我也來做 MagicMirror (二) 基本用法

上 一 文 講 了 我 的 Magic Mirror 的 硬 件 ,今 次 就 說 軟 件 。想 重 溫 上 一 文 的 朋 友 可 以 按 這 個 連 結 ,我 也 來 做 MagicMirror (一 ) 選 擇 硬 件

我 這 次 用 的 軟 件 就 叫 做 MagicMirror,它 是 一 個 開 源 的 軟 件 ,主 要 是 在 Raspberry Pi 上 面 運 行 。選 擇 它 的 原 因 ,是 因 為 MagicMirror 有 成 噸 的 3rd party models 可 以 使 用 , 既 可 以 增 加 各 種 功 能 ,也 可 以 讓 你 定 制 出 與 別 不 同 的 Magic Mirror。

我 的 設 定 主 要 是 參 考 了 Thomas SanladererDigital Dashboard ( 他 用 的 是 dakboard )。當 然 外 觀 上 不 會 一 模 一 樣 ,始 終 是 不 同 的 軟 件 ,但 功 能 上 基 本 都 有 齊 ( 甚 至 更 好 )。

要 安 裝 MagicMirror,首 先 你 要 有 一 部 Raspberry Pi,還 要 預 先 裝 好 Raspbian ( 現 時 最 新 版 本 是 Buster )。要 安 裝 Raspbian,我 這 次 用 了 最 簡 單 的 裝 法 ,Raspberry Pi Imager for Windows。安 裝 Raspbian 你 要 一 張 8GB 或 以 上 的 micro SD card。

在 選 擇 OS 的 時 候 ,一 定 要 選 Raspbian with Desktop。沒 有 Desktop 的 Raspberry Lite 版 本 是 不 能 運 行 MagicMirror 的 。完 成 之 後 ( 30 分 鐘 吧 ? ),就 可 以 把 SD  card 插 入 Raspberry Pi 4,接 上 Montior、Keyboard 和 Mouse,就 可 以 進 行 第 一 次 boot 機 。

首 次 boot 機 時 它 會 彈 出 一 個 Wizard,可 以 輕 鬆 幫 你 設 定 好 locale、language、WiFi、oversacn 等 等 東 西 。但 Wizard 也 不 是 萬 能 ,例 如 system update,我 每 次 在 Wizard 做 總 是 很 慢 ,在 Terminal 手 動 做 就 會 快 很 多 。

How to Update Your Raspberry Pi to the Latest Raspbian OS

又 例 如 display setting,我 們 要 手 動 修 改 resolution 去 4K ( 預 設 只 有 2K,不 知 道 為 什 麼 ),Orientation 也 要 自 己 設 定 為 垂 直 ( 是 rotate 左 還 是 rotate 右 看 你 的 monitor 的 擺 法 )。最 後 如 果 你 想 「遙 控 」Pi 的 話 ,也 別 忘 記 enable SSH 或 者 VNC。

MagicMirror – Installation & Usage

 

設 定 好 Raspbian,重 新 啟 動 一 次 ,如 果 所 有 設 定 都 正 常 ,就 可 以 安 裝 MagicMirror。現 在 官 方 的 安 裝 方 法 ,只 剩 下 Manual Installation。聽 落 好 嚇 人 ,但 其 實 很 簡 單 的 ,跟 住 網 頁 一 個 一 個 command 打 入 去   Terminal 就 得 ( 要 確 保 每 一 個 command 都 完 成 了 ,才 執 行 下 一 個 command )。

我 們 剛 才 安 裝 的 就 是 Raspbian Buster,所 以 別 忘 記 要 升 級 一 次 Electron ( 也 只 是 一 個 command )。

Auto Starting MagicMirror

個 人 覺 得 Manual Installation 和 Auto Installation 最 主 要 的 分 別 ,就 是 沒 有 安 裝 和 設 定 好 PM2。PM2 是 一 個 process manager,可 以 很 方 便 地 start / stop / restart 一 個 程 式 ,也 可 以 很 方 便 地 設 定 開 機 自 動 執 行 某 個 程 式 。跟 著 上 面 的 教 學 一 步 步 安 裝 和 設 定 就 好 。做 完 就 reboot 一 次 ,看 看 開 機 時 是 否 會 自 動 執 行 MagicMirror。

成 功 執 行 MagicMirror 的 話 ,就 會 是 上 面 的 樣 子 。別 以 為 那 只 是 一 個 黑 色 畫 面 ,因 為 我 是 4K 的 超 大 畫 面 ,所 以 預 設 顯 示 的 modules 都 會 十 分 細 小 ,你 放 大 圖 片 就 會 見 到 的 了 。

我 們 先 把 解 像 度 降 低 一 點 ,學 習 一 下 MagicMirror 的 版 面 。首 先 版 面 上 面 一 個 一 個 的 ,叫 做 module,每 個 module 都 有 一 個 獨 一 無 二 的 名 稱 。上 圖 顯 示 的 都 是 系 統 內 建 的 module,我 們 也 可 以 安 裝 海 量 3rd party 的 modules 來 加 強 MagicMirror 的 各 項 功 能 。

每 一 個 module 都 有 它 顯 示 的 位 置 ,MagicMirror 將 整 個 頁 面 分 割 成 幾 個 特 定 的 區 域 。包 括 top_bar, top_left, top_center, top_right, upper_third, middle_center, lower_third, bottom_left, bottom_center, bottom_right, bottom_bar, fullscreen_above 和 fullscreen_below。

這 些 區 域 都 不 難 理 解 。用 預 設 的 modules 為 例 子 ,Clock 和 Calendar 都 是 top_left。Compliments 就 是 lower_third。而 News Feed 就 是 bottom_bar。特 別 值 得 一 提 的 是 Clock 和 Calendar,如 果 2 個 modules 都 用 同 一 個 position,那 就 會 按 照 config file 裡 面 的 先 後 次 序 ,由 上 向 下 排 列 。

要 自 己 設 定 MagicMirror,我 們 主 要 修 改 2 個 檔 案 。一 是 剛 剛 提 到 的 config file。

/home/pi/MagicMirror/config/config.js

二 是 custom css file。

/home/pi/MagicMirror/css/custom.css

修 改 完 成 之 後 ,就 要 restart 一 次 MagicMirror。

pm2 restart mm

然 後 新 的 改 動 就 會 顯 示 出 來 。

例 如 我 在 MagicMirror 的 設 定 增 加 了 一 個 叫 zoom 的 property,並 把 value 設 定 為 2。這 樣 就 會 把 所 有 東 西 都 放 大 2 倍 。

Restart 之 後 就 會 變 成 上 面 的 樣 子 ,看 起 來 好 像 是 一 個 1920 x 1080 的 MagicMirror 一 樣 。

MagicMirror 很 多 module 都 是 顯 示 即 時 資 訊 的 ,例 如 天 氣 、新 聞 之 類 。這 些 資 訊 其 實 是 從 網 上 來 的 ,提 供 這 些 資 訊 的 供 應 商 ,很 多 都 會 要 求 使 用 者 注 冊 一 個 帳 號 ( 就 好 似 google account / apple ID 一 樣 )。

例 如 系 統 內 建 的 Weather module,就 要 使 用 到 OpenWeatherMap。如 果 想 用 這 個 module,我 們 就 要 先 到 OpenWeatherMap 網 站 注 冊 一 個 帳 戶 ,然 後 獲 取 一 個 API key。

還 是 在 config file,去 到 current weather 和 weather forecast 兩 個 module,修 改 location ( hong kong ) 和 API key 。

Restart 之 後 就 會 見 到 現 在 的 天 氣 ,和 未 來 幾 日 的 天 氣 預 測 。

現 在 MagicMirror 是 英 文 的 ,Calendar 顯 示 的 是 美 國 假 期 ,News Feed 顯 示 的 是 美 國 新 聞 。我 們 嘗 試 把 他 們 都 香 港 化 吧 。

語 言 我 們 可 以 設 定 為 zh-hk ( 意 思 是 中 文 香 港 )。

Calendar 的 話 ,在 說 明 文 件 中 我 們 知 道 它 是 使 用 ical 格 式 。於 是 我 google 一 下 「香 港 公 眾 假 期 ical」,就 找 到 香 港 政 府 1823 網 頁 的 「香 港 公 眾 假 期 」iCal。香 港 公 眾 假 期 有 齊 繁 簡 英 ( 使 用 不 同 的 網 址 ),我 這 裡 就 用 了 繁 體 的 。我 也 順 手 改 了 header 和 symbol。Symbol 是 根 據 說 明 文 件 在 Font Awesome 找 的 。

至 於 News Feed module,它 是 使 用 RSS 格 式 。Google 了 一 下 ,我 找 到 了 google news 的 RSS。也 順 手 改 了 title。

Restart 之 後 就 上 面 的 樣 子 。值 得 留 意 的 是 ,雖 然 我 們 已 經 把 語 言 設 定 成 zh-hk,但 並 不 是 所 有 module 都 有 中 文 化 的 。例 如 Compliments、Current Weather 就 完 全 沒 有 中 文 化 , 而 Weather Forecast 就 只 有 星 期 幾 中 文 化 了 。

當 然 ,每 個 module 各 自 也 有 很 多 其 他 野 可 以 設 定 的 ,例 如 多 久 上 網 抓 取 一 次 資 料 、顯 示 多 少 個 項 目 、日 期 顯 示 格 式 之 類 。這 些 就 留 給 大 家 自 己 慢 慢 發 掘 了 。

JSONLint – The JSON Validator

整 個 config file 是 使 用 一 種 叫 json 的 資 料 格 式 ( *.js ),當 資 料 很 長 時 ,有 時 我 們 programmer 也 很 容 易 搞 錯 格 式 ,例 如 多 了 個 comma、少 了 個 parentheses。這 時 間 大 家 可 以 使 用 一 些 網 上 的 json validator 來 確 認 一 下 自 己 個 config file 的 資 料 格 式 有 沒 有 錯 ( 但 這 當 然 不 能 確 認 你 的 parameters 有 沒 有 串 錯 ,values 有 沒 有 set 錯 )。

/home/pi/MagicMirror/css/custom.css

如 果 我 們 想 改 變 外 觀 、顯 示 之 類 的 東 西 ,我 們 就 要 修 改 custom.css 檔 。custom.css 檔 是 使 用 css 格 式 ,其 實 就 是 和 網 頁 上 用 的 css 一 模 一 樣 。

回 到 我 們 的 MagicMirror,之 前 我 們 把 zoom 設 定 成 2。我 們 選 擇 4K monitor 就 是 想 多 顯 示 一 點 資 料 ,現 在 把 所 有 module 都 變 大 一 倍 ,明 顯 違 反 了 選 用 4K monitor 的 原 意 。所 以 我 們 先 把 zoom 的 value 改 成 1。

Restart 之 後 module 就 會 變 回 「正 常 」大 小 ( 這 裡 是 有 bug 的 ,改 過 zoom 之 後 要 回 復 的 話 ,要 按 一 次 ctrl-0,keyboard 要 插 在 Pi 上 )。這 時 候 如 果 我 們 想 只 改 變 其 中 一 個 module 的 大 小 ,我 們 就 可 以 使 用 custom.css。

先 打 開 custom.css ( 如 果 沒 有 就 自 己 創 造 一 個 ),輸 入 上 面 的 入 容 。上 面 的 css 會 改 變 Clock module 大 小 ,變 成 原 來 的 2 倍 。

結 果 就 會 如 上 圖 這 樣 。值 得 一 提 的 是 ,因 為 Clock module 變 大 了 ,而 令 到 top_left 區 域 的 寬 度 增 加 了 ,從 而 令 到 Calendar module 的 寬 度 都 變 大 了 。Clock module 的 zoom value 並 沒 有 影 響 到 Calendar。Calendar 的 zoom 還 只 是 1,你 對 比 一 下 font size 就 知 道 了 。

我 們 再 打 custom.css,輸 入 上 面 的 入 容 。再 restart 就 會 看 到 下 面 的 結 果 。

首 先 Calendar 也 zoom 大 了 ,但 與 Clock 不 同 ,只 有 1.5 倍 。不 同 module 的 放 大 倍 數 當 然 可 以 不 一 樣 。另 外 就 是 我 在 Calendar 加 入 了 margin-top。margin-top 和 margin-left 都 可 以 用 來 微 調 ( fine-tune ) module 的 位 置 。margin 的 value,除 了 是 正 數 ,也 可 以 是 負 數 。

zoom 和 margin 是 我 自 己 最 主 要 用 的 custom css。個 別 module 我 也 會 微 調 一 下 font-size。我 個 人 是 不 主 張 在 custom.css 裡 面 大 改 突 改 ,因 為 如 果 你 真 有 那 麼 多 東 西 要 改 的 話 ,還 不 如 自 己 寫 個 新 的 module 吧 。

在 custom css 還 有 一 個 秘 技 ,就 是 減 少 MagicMirror 預 設 的 margin ( 預 設 是 4 邊 都 是 60px )。上 例 之 中 ,我 把 margin 下 降 到 20px。這 樣 做 是 為 了 令 我 的 4K MagicMirror 可 以 稍 為 顯 示 多 一 點 資 料 。

那 如 果 是 刪 除 某 一 個 module 又 要 如 何 做 呢 ?簡 單 來 說 ,直 接 在 config 檔 裡 面 的 modules section 刪 除 相 關 的 程 式 碼 就 好 了 。不 過 我 自 己 會 選 擇 comment ( comment 就 program 裡 面 不 會 執 行 的 東 西 )。例 如 我 自 覺 已 經 太 聰 明 和 太 靚 仔 了 ( 嘔 吐 ! ),所 以 Compliments 就 不 用 了 吧 。

在 config 檔 裡 面 我 們 可 以 用 // 又 或 者 /* ….. */。前 者 是 用 來 comment out 一 行 。後 者 就 像 是 括 號 ,會 comment out 包 在 裡 面 的 東 西 。

我 在 本 文 中 使 用 的 text editor ( 用 來 修 改 config.js 和 custom.css ),叫 做 nano,是 Raspbian 內 建 的 text editor 之 一 。它 內 建 了 syntax highlighting 的 功 能 ,所 以 comment 左 之 後 就 會 自 動 變 成 藍 色 。如 果 你 的 text editor 和 我 用 的 不 一 樣 ,顏 色 會 不 一 樣 的 ( 也 許 會 沒 有 任 何 顏 色 )。

nano /home/pi/MagicMirror/config/config.js

想 使 用 nano 的 朋 友 可 以 在 Terminal 裡 面 輸 入 上 面 的 command。至 於 nano 的 用 法 比 較 複 雜 ( 就 是 一 大 堆 keyboard short-cut ),不 是 三 言 兩 語 能 說 清 ,大 家 自 己 去 google 一 下 好 了 。

但 是 有 2 個 built-in module 是 不 能 刪 除 的 ( 至 少 是 不 應 該 刪 除 )。就 是 Alert 和 Update Notification。這 2 個 module 平 時 都 是 看 不 到 的 ,是 在 背 景 運 行 ,為 其 他 的 module 提 供 服 務 的 。

例 如 上 圖 ,就 是 Update Notification 執 行 的 結 果 。它 在 提 示 我 們 某 個 3rd party module 有 新 版 本 可 以 更 新 。

最 後 ,我 還 想 將 我 的 MagicMirror 設 定 成 定 時 開 關 機 ( 主 要 是 晚 上 關 機 ,白 天 開 機 )。但 原 來 Pi 並 不 似 我 們 的 電 腦 ,既 沒 有 schedule power on/off,也 沒 有 wake on lan。Pi 的 設 計 已 經 超 級 省 電 ,本 來 就 是 用 來 長 開 的 。勉 強 近 似 的 功 能 ,就 是 turn off HDMI。


vcgencmd display_power 0 // off
vcgencmd display_power 1 // on

要 關 上 hdmi,Raspbian 也 有 好 幾 個 不 同 的 command,我 這 次 選 擇 的 是 用 vcgencmd。

crontab -e // edit crontab

想 要 定 時 執 行 的 話 ,我 們 可 以 把 指 令 加 到 crontab 裡 面 。打 開 terminal,輸 入 上 面 的 指 令 就 可 以 打 開 crontab 來 修 改 。系 統 可 能 會 問 你 要 用 那 一 個 text editor,我 自 己 就 當 然 用 nano。

上 圖 的 意 思 就 是 每 天 晚 上 23:30 關 上 hdmi,每 天 07:00 打 開 hdmi。想 要 詳 細 學 學 怎 麼 寫 cronjob 的 朋 友 可 以 參 考 下 文 。

A Comprehensive Guide to Using Cronjobs

大 家 要 注 意 的 是 ,vcgencmd 只 是 關 上 hdmi 輸 出 。通 常 你 的 monitor 在 沒 有 訊 號 時 就 會 自 動 進 入 休 眠 狀 態 。Pi 則 依 然 是 整 晚 都 長 開 的 。

至 今 大 家 已 經 學 會 了 MagicMirror 的 基 本 用 法 ,下 篇 就 進 入 戲 肉 ,學 習 如 何 使 用 MagicMirror 的 海 量 3rd party modules。

我 也 來 做 MagicMirror (三 ) 3rd Party Modules

ctleung張 先 生 ,男 性 ,肖 龍 。
職 業 :I.T. Consultant
簡 介 :不 好 好 讀 書 ;七 尺 差 五 寸 ,手 長 過 膝 ,雙 耳 垂 肩 ;性 寬 和 ,寡 言 語 ,喜 怒 不 形 於 色 。據 說 少 時 曾 斬 白 蛇 於 鳳 凰 山 下 ……
This entry was posted in Computer & Network, STEM and tagged , , , , , , . Bookmark the permalink.

2 Responses to 我也來做 MagicMirror (二) 基本用法

  1. Benson Liao says:

    你好~~請教一下!當出現有3rd party module有更新時,要如何做更新呢?

Leave a Reply

Your email address will not be published. Required fields are marked *