RaspberryPiとミニディスプレイでシンプル卓上カレンダー作ってみた
はじめに
普段、仕事デスクにカレンダー付きの時計を置いているのですが、最近接触不良なのか表示がおかしくなってしまいました。
半分閉じると表示される。。
カレンダーは仕事中にちょいちょい確認するのですぐ見れるとこにないと不便です。 100均の小さいカレンダーでもいいのですが、せっかくなのでラズパイとミニディスプレイで卓上カレンダーを作ってみようと思います。
- はじめに
- 環境
- カレンダーツール
- MagicMirror2インストール
- 不要なデフォルトmoduleを削除
- カレンダーの表示
- 画面スリープ設定
- 写真表示
- リッチに写真表示
- その他の便利module
- 最後に
環境
| リソース | 内容 |
|---|---|
| 本体 | Raspberry Pi4 4GB |
| OS | BerryBoot 上のRaspberry Pi OS |
| カレンダーソフト | MagicMirror2 |
| ディスプレイ | OSOYOO 5インチDSIタッチスクリーン |
ディスプレイ裏側にラズパイ本体を固定してます。
カレンダーツール
カレンダー機能として以下を目標にしてみます。
- できるだけシンプルで見やすいカレンダー
- タブレットなどでバッテリーを気にせずAC電源で使いたい
- 月次カレンダーで表示できる
- 日本の祝日を反映させたい
- できればフォトフレームにもしたい
カレンダーツールをいろいろ調べてみましたが、今回はMagicMirror2を使ってみようと思います。
鏡をダッシュボード化するツールとしてよく使われているようですが、鏡はいらないので単純にカレンダーを表示するだけで利用します。
「module」と呼ばれる追加機能が豊富でいろんな機能を自由にカスタムできるようです。
3rd Party Modules · MichMich/MagicMirror Wiki · GitHub
表示内容の設定はJSON形式で正確にテキスト編集する必要があるので、ちょっと難易度高めです。
MagicMirror2インストール
公式ドキュメントの通りコマンドコピペでインストールできました。とりあえずホームディレクトリ直下にインストールします。
https://docs.magicmirror.builders/getting-started/installation.html
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - $ sudo apt install -y nodejs $ git clone https://github.com/MichMich/MagicMirror $ cd MagicMirror/ $ npm install $ cp config/config.js.sample config/config.js $ npm run start # （リモード接続で起動する場合はディスプレイ番号を指定する） $ DISPLAY=:0 npm run start
起動すると突然フルスクリーンでデフォルト設定の情報が表示さます。 マウスカーソルは表示されないようです。
キーボードの右altキーでメニューが表示されます。
ズームの調整ができるので見やすいサイズに合わせておきます。
カレンダーとして使うにはラズパイ起動直後にすぐ表示して欲しいので、サービス設定してスタートアップされるようにしておきます。
$ sudo touch /etc/systemd/system/magicmirror2.service
内容は以下で保存します。「WorkingDirectory」は絶対パスでインストールしたフォルダを指定します。
[Unit] Description=Magic Mirror2 [Service] Type = simple Restart=always WorkingDirectory=/home/pi/MagicMirror ExecStart=/bin/bash -c 'npm run start' StandardOutput=syslog StandardError=syslog User=pi Environment=DISPLAY=:0 [Install] WantedBy=multi-user.target
自動起動の設定と起動の確認をしてみます。
$ sudo systemctl daemon-reload $ sudo systemctl enable magicmirror2 $ sudo systemctl start magicmirror2
サーバモードで起動すると突然真っ黒画面にはならずブラウザで見れるようになります。
$ npm run server
起動後にブラウザで「http://localhost:8080」にアクセスすると同じ画面が表示されます。 今回は直接起動した方が便利なのでこちらは利用しません。
また、DockerHubにもコンテナが用意されているので、Docker環境を作られてる方はインストールの手間が省けそうです。
不要なデフォルトmoduleを削除
Magic Mirror 2 の表示内容は以下の設定ファイルを編集してカスタムします。
~/MagicMirror/config/config.js
表示内容をいったん時計のみにしてみます。上記ファイル内の「modules」の配列に表示内容が列挙されてるので、alert, updatenotification, clock 以外を消してしまいます。
...
modules: [
{
module: "alert",
},
{
module: "updatenotification",
position: "top_bar"
},
{
module: "clock",
position: "top_left",
config: {
showDate: false // 日付を消す場合の設定
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
...
編集はMacからsshで入ってviで編集しました。 保存したらメニューバーからView＞Reload あるいはショートカットキーで Ctrl+R で更新するとすぐに反映されます。MagicMirror本体の再起動は不要です。
時計だけになりました。カンマが抜けてたりカッコが閉じられてなかったり設定ファイルにミスがあると
こんな感じになります。
カレンダーの表示
サードパーティのカレンダーmoduleを使ってみます。
MMM-CalendarExt2 は高機能なカレンダーでgoogleカレンダーの予定などを表示できます。
これだとちょっとサイズが大きいので、もう少しシンプルなMMM-CalendarExtMinimonth を使ってみます。
MMM-CalendarExtMinimonthはMMM-CalendarExt2のプラグインで両方インストール、設定が必要とのことです。
インストール手順は各moduleのGitHubに説明があるので、コマンドコピペで導入します。
$ cd ~/MagicMirror/modules $ git clone --depth=1 https://github.com/eouia/MMM-CalendarExt2 $ git clone https://github.com/eouia/MMM-CalendarExtMinimonth $ cd MMM-CalendarExt2 $ npm install
設定はまた「config.js」のmodules 内に追記します。
...
modules: [
{
module: "alert",
},
{
module: "updatenotification",
position: "top_bar"
},
{
module: "clock",
position: "top_left",
config: {
}
},
{
module: 'MMM-CalendarExt2',
config: {
calendars : [{url: "https://www.google.com/calendar/ical/ja.japanese%23holiday%40group.v.calendar.google.com/public/basic.ics"}],
views: [
// ここを空にするとMMM-CalendarExt2本体のカレンダーが非表示になる
],
scenes: [{name: "DEFAULT"}],
},
},
{
module:"MMM-CalendarExtMinimonth",
position:"bottom_right",
},
]
...
calendars キーにはiCalendarのURLを指定します。途中で切れてしまってますが以下を入力しています。ブログの書き方がまだわかってなく。。すみません。
自分のGoogleカレンダーを指定すれば予定が反映されるようになります。今回は祝日のみ表示したいので一般公開されている日本の祝日用icalを利用させていただきます。 上記URLの他にもいくつか公開されてるようです。
これで画面を更新すると、
ちょっと小さいのでズームインします。
私の環境ではicsを読み込むせいか表示までに若干時間がかかりました。ちなみにOSのタイムゾーンが東京になってないと、時間がずれて休日が2日にまたがってしまいます。
画面スリープ設定
私は仕事中しか見ないので8時間でスリープにしてスクリーンセーバーは止めておきます。
メニューから「スクリーンセーバー」で設定します。
メニューに出てこない場合は以下のコマンドでインストールします。コマンドでも変更できるようですが割愛します。
$ sudo apt install xscreensaver
写真表示
MMM-ImageSlideshowのmoduleでスライドショーができるようになります。
インストールはclone のみのようです。
$ cd ~/MagicMirror/modules
$ git clone https://github.com/AdamMoses-GitHub/MMM-ImageSlideshow
「config.js」には以下のように記述しました。写真は左下に表示されるサイズに設定しています。
{
module: 'MMM-ImageSlideshow',
position: 'bottom_left',
config: {
fixedImageWidth: 320,
fixedImageHeight: 240,
imagePaths: ['modules/photos/'],
}
},
設定したらMagicMirror2自体を再起動しないと反映されなかったのでやっておきます。
$ sudo systemctl restart magicmirror2
こんな感じになりました。スライドショーで切り替わります。トランジションはなくパッと切り替わります。
「imagePaths」に写真を置くディレクトリを指定しますが、MagicMirror2のインストールパスからの相対パスでないと読み込めませんでした。
しばらく表示させておくと、CPU温度は45℃から50℃程度でした。
リッチに写真表示
MMM-BackgroundSlideshow は写真を背景にするmoduleです。スライドショーもトランジションが設定できます。
インストールはclone & npm install です。こちらもインストール後にMagicMirror2の再起動が必要でした。
$ cd ~/MagicMirror/modules $ git clone https://github.com/darickc/MMM-BackgroundSlideshow $ cd MMM-BackgroundSlideshow $ npm install $ sudo systemctl restart magicmirror2
「config.js」の設定です。「position」はfullscreen_belowでないと表示されませんでした。
{
module: 'MMM-BackgroundSlideshow',
position: 'fullscreen_below',
config: {
imagePaths: ['modules/photos/'],
transitionImages: true,
randomizeImageOrder: true,
backgroundAnimationEnabled: true,
transitionImages: true,
},
},
写真を背景にできました。
カレンダーのデザインと合わない写真も出てきそうです。カレンダーはCSSでデザインを変えられるようで上の写真は透明度を少し下げてみました。
CPU温度は55℃から60℃くらいまで上がりました。
その他の便利module
- MMM-Cursor
MagicMirror2 はマウスカーソルが表示されないようになってますが、こちらを入れると動かした時だけ表示されるようになります。
いくつか他のmoduleを試した時にボタンなどクリック操作が必要なものがあり、カーソル見えないとクリック不可です。。カレンダー表示のみであれば不要です。
- MMM-MagicMover
一定時間ごとに表示位置をちょっとだけずらしてくれるmoduleです。焼き付き防止？ですかね。
最後に
卓上カレンダーとしてMagicMirror2をカスタムしてみました。moduleはたくさんありますし、デザインもある程度はカスタムできそうなのでゆっくり作り上げていくのも楽しそうです。
