上 一 文 講 了 我 的 Magic Mirror 的 硬 件 ，今 次 就 說 軟 件 。想 重 溫 上 一 文 的 朋 友 可 以 按 這 個 連 結 ，我 也 來 做 MagicMirror (一 ) 選 擇 硬 件 。
我 這 次 用 的 軟 件 就 叫 做 MagicMirror，它 是 一 個 開 源 的 軟 件 ，主 要 是 在 Raspberry Pi 上 面 運 行 。選 擇 它 的 原 因 ，是 因 為 MagicMirror 有 成 噸 的 3rd party models 可 以 使 用 ， 既 可 以 增 加 各 種 功 能 ，也 可 以 讓 你 定 制 出 與 別 不 同 的 Magic Mirror。
我 的 設 定 主 要 是 參 考 了 Thomas Sanladerer 的 Digital 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 )。
個 人 覺 得 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 各 自 也 有 很 多 其 他 野 可 以 設 定 的 ，例 如 多 久 上 網 抓 取 一 次 資 料 、顯 示 多 少 個 項 目 、日 期 顯 示 格 式 之 類 。這 些 就 留 給 大 家 自 己 慢 慢 發 掘 了 。
整 個 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 裡 面 。打 開 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
張先生，男性，肖龍。
你好~~請教一下!當出現有3rd party module有更新時，要如何做更新呢?
很簡單呀，按照該 3rd party module 的作者的指示來更新就好。