やっとそれっぽいのに出会いました！
天気やソーラーパネルの発電状況、共有予定の確認ボードを作っています。
smashingや、ブラウザベースのものを検討しましたが、いよいよ最終章としてそれっぽいのに出会いました。
(記事を書きかけでずっと放置していたため、写真は完成当時の2024年9月当時のもの。)
下記が公式サイトです。
インストール手順は下記の公式を参考にします。
一旦下記で動くようになります。
npm、Node.js(要20.0以上)がないようですので、必要な場合には事前にインストールします。
sudo apt update
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install nodejs npm
git clone https://github.com/MagicMirrorOrg/MagicMirror
cd MagicMirror/
npm run install-mm
cp config/config.js.sample config/config.js
npm run start
これだけでそれっぽい系になってると思います。
本当はハーフミラー（マジックミラー）を画面に貼り付け、朝の身支度をしながら情報収集できるようにします。
moduleの追加
全て、~/MagicMirror/modulesのディレクトリで、moduleをgitして追加していきます。
モジュールの詳細は下記参照
ここからお気に入りを探します。
天気予報
カレンダー
いくつか試しましたが、UI,オプションから選びました。
https://github.com/MMRIZE/MMM-CalendarExt3
が、WSLでは動いたのにラズパイでは動きませんでした。
画面焼付き防止（定期的に画面を反転させてくれます。）
雨雲レーダー
ネットワークの状況
市況（株価などの表示をする。）
背景をamazonフォトにする
ラズパイの状況を表示
外部HTMLを表示させる（これを使って、別途生成させた情報を表示しています。）
git clone https://github.com/eouia/MMM-HTMLBox
git clone https://github.com/sthuber90/mmm-amazon-photos
git clone https://github.com/werthdavid/MMM-BurnIn.git
git clone https://github.com/jalibu/MMM-RAIN-MAP
git clone https://github.com/thess/MMM-MktIndex
cd MMM-MktIndex
npm install
git clone https://github.com/SalekurPolas/MMM-Pinfo
cd MMM-Pinfo
npm install
git clone https://github.com/MMRIZE/MMM-CalendarExt3
cd MMM-CalendarExt3
npm install
git submodule update --init --recursive
他使えそうなもの
URLのページを表示
天気予報
カレンダー
その他の設定に役立つもの
フルスクリーンにする
初期設定では、画面の端まで使ってくれません。
下記を新規作成します。
~/MagicMirror/css/custom.css
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.region.fullscreen {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
pointer-events: none;
}
.region.fullscreen.below {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
configの中身をお好みにあわせて設定、調整します。
~/MagicMirror/config/config.js
/* Config Sample
*
* For more information on how you can configure this file
* see https://docs.magicmirror.builders/configuration/introduction.html
* and https://docs.magicmirror.builders/modules/configuration.html
*
* You can use environment variables using a `config.js.template` file instead of `config.js`
* which will be converted to `config.js` while starting. For more information
* see https://docs.magicmirror.builders/configuration/introduction.html#enviromnent-variables
*/
let config = {
address: "localhost", // Address to listen on, can be:
// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
// - another specific IPv4/6 to listen on a specific interface
// - "0.0.0.0", "::" to listen on any interface
// Default, when address config is left out or empty, is "localhost"
port: 8080,
basePath: "/", // The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
// you must set the sub path here. basePath must end with a /
ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
// or add a specific IPv4 of 192.168.1.5 :
// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
useHttps: false, // Support HTTPS or not, default "false" will use HTTP
httpsPrivateKey: "", // HTTPS private key path, only require when useHttps is true
httpsCertificate: "", // HTTPS Certificate path, only require when useHttps is true
language: "en",
locale: "en-US",
logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
timeFormat: 24,
units: "metric",
modules: [
{
module: 'mmm-amazon-photos',
position: 'fullscreen_below',
config: {
// see below for configurable options
imageUrls: ['https://www.amazon.co.jp/photos/share/xxxxxxxxxxxxxxx']
},
},
{
module: "calendar",
// position: "top_left",
config: {
broadcastPastEvents: false, // <= IMPORTANT to see past events
calendars: [
{
url: "https://calendar.google.com/calendar/ical/xxxxxxx/basic.ics",
name: "hogehoge", // <= RECOMMENDED to assign name
color: "#143066" //"blue" // <= RECOMMENDED to assign color
},
{
url: "https://calendar.google.com/calendar/ical/yyyyyyyyy/basic.ics",
name: "gehogeho", // <= RECOMMENDED to assign name
color: "#14664b" // <= RECOMMENDED to assign color
},
{
url: "https://calendar.google.com/calendar/ical/ja.japanese%23holiday%40group.v.calendar.google.com/public/basic.ics",
name: "JP holiday", // <= RECOMMENDED to assign name
color: "#662214" // <= RECOMMENDED to assign color
}
]
}
},
{
module: "alert",
},
{
module: "updatenotification",
position: "top_bar"
},
{
module: "clock",
// position: "top_left",
config: {
displaySeconds: "false",
// clockBold: "true",
showDate: "false",
},
},
{
module: "MMM-MonthlyCalendar",
position: "top_center",
config: { // See "Configuration options" for more information.
mode: "fourWeeks",
firstDayOfWeek: "monday",
}
},
// ネットワークの状態を表示できるようにしたかったが断念
//{
// module: 'MMM-NetworkConnection',
// position: 'top_right',
// config: {
// }
//},
//標準現在の天気
{
module: "weather",
position: "top_left",
config: {
weatherProvider: "openweathermap",
apiKey: "kkkkkkkkkkkkkkkkkkk", // OpenWeatherのAPIキー
type: "current",
//type: "forecast", // 天気予報を表示
lat: 14.736381,
lon: 136.816956,
maxNumberOfDays: 5 // 表示する予報の日数（ここを変更）
}
},
//ラズパイ情報
{
module: 'MMM-Pinfo',
position: 'top_left',
config: {
DEVICE: {
labelSerial: 'Serial',
displaySerial: false,
orderSerial: 2
},
NETWORK: {
labelIPv4: 'IPv4',
displayIPv4: false,
orderIPv4: 5,
},
CPU: {
labelUsage: 'CPU Usage',
displayUsage: false,
orderUsage: 11,
labelTemp: 'CPU Temp',
displayTemp: true,
orderTemp: 12
},
}
},
// 別途pythonを作り、ctontabで定期生成させている発電状況のHTML
{
module: "MMM-HTMLBox",
position:"top_left",
config: {
width: "100%",/*20*/
height: "60px",
refresh_interval_sec: 300,
file: "power.html", //When content is too long, you can use this for external file. relative path from `MMM-HTMLBox`
}
},
// 別途pythonを作り、ctontabで定期生成させているヤフー天気のHTML
// もっとスマートに作りたかったが、画面上の場所、レイアウト的な制約、天気の精度的にこれにしました。
{
module: "MMM-HTMLBox",
position:"top_center",
config: {
width: "90%", //60
// height: "30px",
refresh_interval_sec: 600,
file: "today_weather.html",
}
},
//雨雲レーダー 一旦配置したものの、保留のため、positionをコメントアウト
{
module: "MMM-RAIN-MAP",
// position: "bottom_left",
config: {
animationSpeedMs: 400,
colorScheme: 2,
colorizeTime: true,
defaultZoomLevel: 8,
displayTime: true,
displayTimeline: true,
displayClockSymbol: true,
displayHoursBeforeRain: -1,
extraDelayLastFrameMs: 1000,
extraDelayCurrentFrameMs: 3000,
invertColors: false,
markers: [
{ lat: 34.798285629734735, lng: 134.99977367046412, color: "red" }, //home
{ lat: 34.798285629734735, lng: 134.99977367046412, color: "green" }, //work
],
mapPositions: [
{ lat: 34.798285629734735, lng: 134.99977367046412, zoom: 11, loops: 1 },
{ lat: 34.798285629734735, lng: 134.99977367046412, zoom: 10, loops: 1 },
{ lat: 34.798285629734735, lng: 134.99977367046412, zoom: 9, loops: 1 },
{ lat: 34.798285629734735, lng: 134.99977367046412, zoom: 6, loops: 2 },
// { lat: 34.798285629734735, lng: 134.99977367046412, zoom: 5, loops: 2 },
],
mapUrl: "https://a.tile.openstreetmap.de/{z}/{x}/{y}.png",
mapHeight: "300px", // must be a pixel value (no percent)
mapWidth: "300px", // must be a pixel value (no percent)
maxHistoryFrames: -1,
maxForecastFrames: -1,
substitudeModules: [],
updateIntervalInSeconds: 300,
}
},
{
module: 'MMM-RSS-FEED',
position: 'top_right',
// position: "lower_third",
config: {
url: 'https://trends.google.co.jp/trending/rss?geo=JP'
},
},
// 別途pythonを作り、ctontabで定期生成させているswitchbotのHTML
// いい感じのを模索していましたが、欲しい情報だけを表示でき、他のモジュールと見た目の相性のよさそうなものがありませんでした。
{
module: "MMM-HTMLBox",
position:"top_right",
config: {
refresh_interval_sec: 300,
file: "switchbot_data.html",
}
},
//株価を表示させています。
{
module: "MMM-MktIndex",
position: "bottom_right",
config: {
timeFormat: "DD-MM HH:mm",
symbols: ["^N225", "^DJI", "^GSPC", "^TNX", "USDJPY=X"],
// Label name for each symbol. When you use `alias`, the number of symbols and aliases should be the same.
// If value is null or "", symbol string will be used by default.
alias: ["NI225", "^DJI", "S&P 500","Crude Oil", "USD/JPY"],
updateInterval: 180, // Query interval in seconds
}
},
//画面が焼き付かないように、定期的に反転映像を流しています。
//本当は普段の表示が入れ替わってくれたりすると嬉しい。
{
module: "MMM-BurnIn",
position: "top_bar", // whatever, doesn't render anything
config: {
updateInterval: 33, // in Minutes
invertDuration: 5 // in Seconds
}
},
//ニュースを表示させています。
//定期的にRSS内のタイトルを順繰り表示してくれますが、これとは別に一覧表示もできると嬉しい。
{
module: "newsfeed",
position: "top_center",
config: {
feeds: [
{
title: "",
url: "https://www3.nhk.or.jp/rss/news/cat0.xml"
}
],
showSourceTitle: true,
showPublishDate: true,
broadcastNewsFeeds: true,
broadcastNewsUpdates: true
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") { module.exports = config; }
position行をコメントアウトすることで、設定を残しつつ、非表示にできます。
moduleの位置調整や、将来的に使うものを残しておけます。
自動起動の設定
を参考にしました。
$sudo nano /etc/systemd/system/magicmirror2.service
にて
[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
config.jsを更新したら、下記でサービスを再起動させます。
$sudo systemctl restart magicmirror2
キオスク起動
また、以前から設定していたブラウザの自動起動の内容を更新します。
$sudo nano /etc/xdg/lxsession/LXDE-pi/autostart
を編集しておきます。
にも記載していますが、起動時にブラウザの表示、画面が自動的に消灯するのをキャンセルします。
@xset s off
@xset -dpms
@xset s noblank
@unclutter
@chromium-browser --kiosk --app=http://localhost:8080
スケジュールでの画面オフにトライします。
夜中にディスプレイは眩しい。
なおかつ、夜中にはディスプレイの発光は煩わしいです。
結果的には、MMM-Remote-Controlだけで十分でした。
画面のOFFや、MMM-Schedulerなど試しましたが、どれも上手く動きませんでした。
起動時の設定の、スクリーンセーバーや省電力設定のOFF、恐らく対象のモニターに依存すると思われます。
をインストール、config.jsに追加します。
特段、設定は不要で、単純追加のみで動きます。
夜中にモジュールの非表示、朝方に再表示します。
sudo nano /etc/crontab
にて
30 22 * * * pi /usr/bin/curl -s "http://localhost:8080/remote?action=HIDE&module=all"
30 6 * * * pi /usr/bin/curl -s "http://localhost:8080/remote?action=SHOW&module=all"
を追加します。
要はこれらのURLにアクセスすることで、画面の表示・非表示を制御できます。
手動テストも容易です。
今後の展望
・MMM-remote-controlにてモジュールの表示・非表示を切り替えることができるので、
モジュールを時間帯によって切り替えることができます。
例えば、天気予報を時間帯によって切り替えるとか。
・まだ空白の部分があるので活用する。
・カレンダーも直近のスケジュールだけ別途表示
現在の環境
$ node -v
v20.19.5
$ npm -v
10.8.2
$ cd ~/MagicMirror/
$ npm list | grep magicmirror
magicmirror@2.29.0 /home/pi/MagicMirror