リベルさんの戯言室

ゲームの攻略とか映画のネタバレとか。そのほかヌルヌル書いてます。リンクフリーです。※当ブログはPC版表示に最適化されています。

Nonsense

ABOUT
ARCHIVE
CATEGORIES
TWITTER
トップ > Raspberry Pi > RaspberryPi3をスマートディスプレー風にするMagicMirror2のインストールと初期設定について

RaspberryPi3をスマートディスプレー風にするMagicMirror2のインストールと初期設定について

Raspberry Pi

Raspberrypiに合成音声でいろいろしゃべらせていましたが、結構頭に入りません。

そこで、簡単にスマートディスプレー化できる「MagicMirror²」を導入してみました。

ディスプレーについて

今後のことも考えてタッチ対応ディスプレーを購入しました。（今回のセットアップの範囲ではタッチ機能はなくても可です）
タッチ対応ディスプレーはGPIOを使うものが多いですが、すでに別の用途でGPIOを使用しているため、USB接続できる以下を購入しました。
接続するだけで特にセットアップは何もなくタッチできるようになりました。めちゃめちゃ便利。
www.amazon.co.jp

合わせて、上のディスプレー専用のケースも購入しました　ディスプレー裏の基盤が丸見えのため、あったほうが良いです。
https://www.amazon.co.jp/gp/product/B07KS8H7NV/ref=as_li_ss_tl?ie=UTF8&psc=1&linkCode=ll1&tag=liber0e7a-22&linkId=225084d65d8973221eecbc0affb88cbd&language=ja_JPwww.amazon.co.jp

MagicMirrorについて

本来はスマートミラーのプロジェクトですが、スマートディスプレーとしても使えるプロジェクトです。
ユーザが公開しているモジュールを簡単に組み合わせて配置することができます
magicmirror.builders

インストール作業

インストールコマンド

以下のコマンドをターミナルに投入してください。
※XRDPを使用したRDP経由で実行時、インストールに失敗しました。RDPではなく直接ラズパイを操作したほうが安全。

bash -c "$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)"

インストール時の選択肢について

インストールが完了すると、以下の選択を求められます。

  • Do you want use pm2 for auto starting of your MagicMirror？
  • Do you want to disable the screen saver ?

私の場合は自動起動はしたくないので「n」としています。（以下の説明は「n」を選択したことが前提となります）
スクリーンセーバーは無効化しないとかってに暗転してしまうため、「y」としています。

起動方法

PCからRDP接続し、以下のコマンドを実行しましょう。エラーが発生しなければラズパイに接続したディスプレーが全面真っ黒になり、「時計」「アメリカの祝日カレンダ」「誉め言葉」「NewYorkTimes最新ニュース」が表示されるようになります。

cd MagicMirror/
DISPLAY=:0 npm start



※上記イメージは別途撮影した物なので、7インチのディスプレーの場合、実際にはもっと詰まっています。

強制終了したい場合、Ctrl+Cを押下しましょう。


※以下のエラーが出た場合はPort8080が使用中です。

Portの設定変更は下記「初期設定」セグメント参照

初期設定

インストール直後はまともに表示されないため、いくつか設定を変更してあげる必要があります。
設定対象ファイルは以下です。
/home/pi/MagicMirror/config/config.js

Portの変更

初期値のportは8080ですが、このポートが使用中の場合は8081等に変更してあげましょう。

カレンダーモジュール

「modules」の中の「module: "calendar"」です。
このセクションは7インチディスプレーでは表示する隙間がないので削除で可。

現在の天気モジュール

「modules」の中の「module: "currentweather"」です。
まずはOpenWeatherMapのAPIを取得し、「appid:」に記載しましょう。
以下URLの「saignUp」からアカウントを登録してAPIキーを取得してください。
www.openweathermap.org

次に、OpenWeatherMapから取得したい場所の名前とIDを取得します。
名前は検索で見つけましょう。「市」の場合は「〇〇-shi」、「区」の場合は「〇〇-ku」のようです。

IDは、URLから取得できます。例えば千代田区の場合は1864529です
https://openweathermap.org/city/1864529

週間天気予報

「modules」の中の「module: "weatherforecast"」です。
上記と同じように設定してください。
このセクションは7インチディスプレーでは表示する隙間がないので削除で可

ニュースフィード

「modules」の中の「module: "newsfeed"」です。
urlにRSSを指定すると、そのRSSの内容を呼んできます。
私はNHKを指定しました
https://www3.nhk.or.jp/rss/news/cat0.xml

その他カスタマイズについて

上記以外にもカスタマイズできる項目がいろいろとあります。
詳細は以下URL参照ください
github.com