好 了 ，終 於 來 到 戲 肉 ，讓 我 們 設 定 一 塊 MigicMirror，令 到 它 看 起 來 和 Thomas Sanladerer 的 Digital Dashboard 差 不 多 。

首 先 假 設 你 已 經 有 一 個 運 作 良 好 的 MagicMirror ( 軟 硬 件 都 已 經 設 定 好 )，而 你 對 MagicMirror 的 操 作 亦 有 一 定 認 識 。因 為 這 一 課 我 們 只 會 討 論 安 裝 和 使 用 MagicMirror 的 第 三 方 modules。如 果 有 唔 清 楚 ，可 以 先 閱 讀 上 一 篇 文 章 。

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

MagicMirror 本 來 是 設 計 給 鏡 子 後 面 使 用 的 ，為 了 增 強 對 比 度 ，所 以 最 初 都 是 黑 底 白 字 的 設 計 。到 了 後 來 ，因 為 顯 示 屏 的 亮 度 和 對 比 度 都 越 來 越 高 ，所 以 後 來 亦 有 些 module 加 入 了 彩 色 設 計 。

到 了 今 時 今 日 ，即 使 是 顯 示 全 彩 影 像 的 module 亦 不 難 找 到 ( 播 片 、播 圖 )。所 以 反 過 來 ，近 年 亦 多 了 一 些 MagicMirror without a Mirror 的 用 戶 。去 掉 了 鏡 子 ，屏 幕 的 對 比 度 和 清 晰 度 立 即 提 升 千 倍 百 倍 。

因 為 我 也 沒 有 用 鏡 子 ，所 以 這 個 project 會 盡 量 找 一 些 彩 色 的 modules，令 到 MagicMirror 越 多 顏 色 越 好 。

在 選 3rd party modules 之 前 ，我 要 先 決 定 保 留 那 一 個 內 建 的 module。這 是 對 MagicMirror 作 者 MichMich 的 致 敬 ，我 選 擇 的 是 Clock module。我 把 它 放 了 在 頂 部 的 正 中 間 。( 其 他 幾 個 built-in modules 唔 用 的 話 ，可 以 comment out 左 佢 地 )

Clock module 沒 有 什 麼 特 別 要 設 定 的 ，主 要 就 是 香 港 的 座 標 。我 也 額 外 設 定 了 要 顯 示 日 出 日 落 月 出 月 落 的 時 間 。( config.js )

Custom CSS 也 簡 單 ，只 是 把 clock module 放 大 了 2 倍 。這 主 要 是 因 為 想 離 遠 一 眼 就 睇 到 時 間 。( custom.css )

MMM-News

我 第 一 個 去 找 的 3rd party module，就 是 關 於 新 聞 的 module。最 後 我 選 擇 的 是 eouia 的 MMM-News。最 主 要 是 因 為 它 會 顯 示 一 張 新 聞 的 圖 片 。

3rd Party Module 都 要 自 己 去 安 裝 ，但 安 裝 的 方 法 都 是 一 樣 ，學 一 次 就 得 。所 以 這 一 個 MMM-News 我 就 講 的 詳 細 一 點 。所 有 3rd party modules 都 是 儲 存 在 modules sub-folder 裡 面 ，每 一 個 module 都 自 成 一 個 folder，folder name 必 須 要 與 module name 一 致 。

從 上 圖 可 以 看 到 ，要 安 裝 MMM-News，其 實 也 只 不 過 是 4 個 command。

cd ~/MagicMirror/modules/

第 一 個 command 是 cd，即 是 change directory。上 面 用 的 是 相 對 路 徑 ，因 為 它 假 設 了 你 是 剛 剛 打 開 terminal，現 在 的 路 徑 是 /home/pi ( 這 是 你 自 己 的 home folder，一 般 raspbian 的 user 就 是 pi )。

完 成 這 個 command 之 後 ，你 應 該 會 進 入 了 modules folder ( 即 是 /home/pi/MagicMirror/modules )。有 些 3rd party modules 的 說 明 文 件 不 會 寫 得 這 麼 清 楚 ，可 能 只 會 寫 半 句 go to modules folder 之 類 的 ，也 是 一 樣 的 意 思 。

總 之 ，不 管 說 明 文 件 有 沒 有 寫 ，要 安 裝 新 module 就 一 定 要 進 入 modules folder。

git clone https://github.com/eouia/MMM-News

第 二 個 command 是 git clone。git clone command，在 無 限 簡 化 之 後 ，就 是 從 網 上 下 載 到 此 處 的 意 思 。以 上 的 command 會 將 一 份 程 式 ，由 https://github.com/eouia/MMM-News 下 載 到 你 的 modules folder 裡 面 。

指 令 完 成 之 後 ，你 的 modules folder 裡 面 ，就 會 多 出 了 一 個 MMM-News 的 sub-folder。

cd MMM-News

第 三 個 command 又 是 cd。意 思 就 是 進 入 到 剛 剛 建 立 的 新 folder。

npm install

第 四 個 command 是 npm install。npm 是 一 個 software package manager，可 以 用 來 自 動 下 載 和 安 裝 軟 件 。npm 支 援 所 謂 的 dependency，即 是 你 安 裝 一 個 project 時 ，它 會 檢 查 你 的 電 腦 ，並 會 自 動 安 裝 這 個 project 所 需 要 的 其 他 軟 件 。

使 用 npm install 可 以 大 大 簡 化 新 手 們 的 軟 件 安 裝 / 更 新 工 作 。

其 實 所 有 其 他 3rd party modules 的 安 裝 方 法 都 是 上 面 個 樣 子 。
1. 進 入 MagicMirror 的 modules folder；
2. 用 git clone 下 載 相 關 的 module；
3. 進 入 新 module 的 folder ( 通 常 是 MMM-xxxxx )；
4. 執 行 一 次 npm install。

成 功 安 裝 一 個 module 之 後 ，要 使 用 和 設 定 該 個 module，還 是 要 回 到 MagicMirror 的 config 檔 和 custom css 檔 。

參 照 了 MMM-News 的 說 明 文 件 ( 其 實 就 是 copy & paste 再 修 改 )，我 的 config 檔 就 是 上 圖 那 樣 。MMM-News 的 資 料 來 源 是 newsapi.org，我 們 要 去 注 冊 並 申 請 一 個 免 費 的 API Key。

我 把 MMM-News 擺 放 在 整 個 屏 幕 的 最 底 ( bottom-bar )，所 以 就 用 了 橫 度 ( type: horizontal )。

我 只 設 定 了 一 個 query，也 沒 有 挑 三 選 四 的 ，就 只 設 定 了 country 是 hk ( 這 只 是 一 個 小 程 式 的 parameter，並 不 涉 及 主 權 ，大 家 不 要 意 淫 好 了 )。newsapi.org 功 能 強 大 ，你 可 以 建 立 多 個 不 同 的 query。除 了 country 之 外 ，還 可 以 選 擇 sources ( 新 聞 機 構 )、category、keyword。

MMM-News 功 能 十 分 強 勁 ，可 以 設 定 的 地 方 十 分 多 。但 我 的 monitor 沒 有 touch screen，所 以 很 多 功 能 都 用 不 上 ( touchable: false )。我 只 是 為 新 聞 稍 為 增 加 一 點 色 彩 ，把 標 題 設 定 成 紅 色 ( 加 了 一 個 叫 redTitle 的 built-in class )。

MMM-News 本 身 的 大 小 就 已 經 剛 剛 好 ，所 以 我 沒 有 ( 也 不 需 要 ) 加 任 何 的 custom css。

MMM-NOAA3

 

我 第 二 個 選 的 ，是 天 氣 的 module。3rd party 的 天 氣 modules 超 級 多 ，我 選 的 是 cowboysdude 的 MMM-NOAA3，單 一 module 就 有 齊 current weather 和 weather forecast。

安 裝 方 法 和 上 一 個 module 一 樣 ，幾 個 command 就 完 成 。

我 選 擇 MMM-NOAA3 的 主 要 原 因 ( 除 了 靚 仔 之 外 )，是 因 為 它 support 5 個 不 同 的 source / provider。包 括 weatherbit、darksky、weatherunloacked、accuweather 和 openweathermap。

支 援 多 個 source 有 時 頗 為 重 要 ，因 為 這 些 網 上 提 供 免 費 資 訊 的 provider，都 唔 知 幾 時 會 執 笠 。大 家 唔 好 笑 ，因 為 上 列 的 darksky，由 於 俾 Apple 收 購 左 ，會 慢 慢 唔 再 提 供 免 費 的 服 務 ( 用 埋 今 年 2020，明 年 就 無 。係 ，這 很 諷 刺 ，它 執 笠 唔 係 因 為 失 敗 ，而 係 太 成 功 )。

因 為 之 前 使 用 built-in 的 weather module 就 已 經 申 請 過 一 次 openweathermap，所 以 我 這 次 就 不 用 再 申 請 ，直 接 用 回 那 個 API key 就 得 。

不 過 要 顯 示 空 氣 污 染 指 數 ，所 以 要 申 請 另 一 個 AirKEY ( https://airvisual.com/api )。

MMM-NOAA3 的 設 定 並 不 複 雜 ，設 好 provider、apiKey、airKey，基 本 上 就 可 以 。座 標 就 定 為 香 港 的 座 標 ，我 用 回 clock module 裡 面 的 。我 把 它 放 在 左 上 角 ( top_left )，外 觀 就 選 擇 了 Color style #4 ( css: NOAA4 )。

Custom CSS 我 只 加 了 一 個 zoom，把 MMM-NOAA3 放 大 到 2 倍 。這 主 要 是 想 比 較 容 易 看 清 楚 天 氣 預 報 的 最 高 和 最 低 氣 溫 。

MMM-NOAA3 有 時 顯 示 的 資 料 會 不 完 整 。例 如 有 時 候 天 氣 預 報 ( 4 Day Forecast ) 會 不 見 了 ，但 下 次 update 時 又 會 變 回 來 。UV 也 是 時 有 時 無 ，晚 上 更 會 顯 示 一 個 broken link。

另 有 一 點 值 得 一 提 的 ，是 MMM-NOAA3 的 日 出 時 間 和 日 落 時 間 ，竟 然 和 clock module 的 差 了 一 分 鐘 ！我 肯 定 兩 者 設 定 的 座 標 是 一 模 一 樣 的 ，真 是 奇 怪 ！

MMM-RandomPhoto

第 三 個 我 選 擇 的 module，是 用 diego-vieira 的 MMM-RandomPhoto 來 做 一 個 自 動 更 新 的 超 高 清 4K 背 景 圖 。

MMM-RandomPhoto 的 安 裝 也 很 直 觀 ，和 之 前 的 也 一 樣 。

MMM-RandomPhoto 的 設 定 超 簡 單 。因 為 是 做 背 景 圖 ，所 以 position 必 然 是 fullscreen_below。Url 就 是 獲 得 圖 片 的 網 址 ，雖 然 這 只 是 單 一 的 一 個 網 址 ，但 很 多 網 上 圖 片 庫 也 支 援 由 單 一 網 址 獲 取 隨 機 圖 片 的 。

https://source.unsplash.com/2160x3840/?night,sky

上 面 網 址 的 意 思 ，就 是 獲 取 4K 直 度 ( 2160 x 3840  ) 的 隨 機 圖 片 。圖 片 的 主 題 ( 關 鍵 字 ) 是 night sky。你 可 以 隨 意 指 定 圖 片 大 小 和 圖 片 的 主 題 ，更 詳 細 的 用 法 可 以 參 考 以 下 官 方 網 頁 。

https://source.unsplash.com/

除 了 night sky，其 實 sun, sunrise, sunset 也 是 很 合 用 的 關 鍵 字 。由 於 4K 圖 片 也 有 一 定 份 量 ，所 以 我 設 定 每 10 分 鐘 才 換 一 次 圖 片 ( updateInterval: 600 )。

 

如 果 你 的 相 片 和 屏 幕 的 大 小 不 一 樣 ，你 可 以 在 custom css 把 相 片 的 width 和 height 都 設 定 為 100%，以 覆 蓋 整 個 屏 幕 。再 講 究 一 點 的 ，可 以 加 埋 object-fit: cover。

MMM-HK-Transport

再 來 就 是 MMM-HK-Transport，這 個 主 要 是 支 持 一 下 香 港 貨 。作 者 winstonma 其 實 寫 了 2 個 類 似 的 module，都 是 直 接 抓 取 別 人 網 頁 的 資 料 ，這 並 不 是 一 個 很 好 的 作 法 。這 亦 是 為 什 麼 另 一 個 module MMM-HK-KMB 已 經 不 能 運 作 的 原 因 。 ( 2020-05-11 更 新 ：MMM-HK-KMB 已 修 復 ，能 夠 正 常 運 作 )

MMM-HK-Transport 安 裝 也 是 和 之 前 的 module 一 樣 ，十 分 容 易 。

MMM-HK-Transport 是 抓 取 Citymapper 網 頁 ( 香 港 ) 的 資 料 ，所 以 作 者 要 我 們 去 該 網 頁 找 出 自 己 所 需 要 的 巴 士 站 的 ID ( stopID )。大 家 可 以 先 search 巴 士 路 線 ，再 從 中 選 擇 你 所 需 要 的 巴 士 站 。網 址 最 後 尾 的 部 分 ，就 是 stopID。

香 港 的 巴 士 站 就 是 分 得 太 細 ，我 樓 下 的 德 福 花 園 站 就 分 成 10 個 8 個 站 。不 過 你 也 可 以 同 時 設 定 多 個 巴 士 站 ，在 我 的 例 子 我 就 設 置 了 2 個 巴 士 站 。

Citymapper 的 資 訊 ，個 人 覺 得 有 點 舊 ，大 概 citymapper 已 經 很 久 沒 有 更 新 實 時 到 站 的 程 式 。至 少 ，同 一 條 路 線 ，MMM-HK-Transport 所 顯 示 的 時 間 和 九 巴 App 上 顯 示 的 時 間 相 差 頗 遠 。

其 實 香 港 政 府 於 2019 建 立 了 「資 料 一 線 通 」網 站 ，用 於 開 放 電 子 數 據 給 公 眾 使 用 。「資 料 一 線 通 」裡 面 其 實 亦 已 經 有 實 時 到 站 時 間 的 資 料 。現 時 有 港 鐵 、新 巴 、城 巴 和 大 嶼 山 巴 士 的 數 據 ，唯 獨 狗 巴 還 不 肯 公 開 實 時 到 站 數 據 。

MMM-AlarmClock

接 著 就 是 fewieden 的 MMM-AlarmClock。這 就 是 一 個 簡 單 的 鬧 鐘 ，我 喜 歡 用 它 來 提 示 早 晚 吃 藥 的 時 間 。

這 個 module 的 安 裝 方 法 ，其 實 和 前 面 的 都 一 樣 。只 是 它 的 說 明 文 件 就 寫 得 比 較 簡 化 。

這 個 module 適 合 設 定 一 些 非 常 固 定 的 事 件 ，因 為 它 的 事 件 都 是 寫 死 在 config 檔 裡 面 的 。如 果 想 要 天 天 設 置 不 同 的 鬧 鐘 ，還 是 用 回 你 的 手 機 比 較 好 。

我 修 改 了 幾 個 預 設 值 。例 如 預 設 會 響 60 秒 ，我 縮 短 到 30 秒 。又 例 如 那 幾 個 fade 的 設 定 ，預 設 值 會 令 到 響 聲 由 細 漸 大 。我 的 顯 示 屏 的 內 建 喇 叭 比 較 細 聲 ，在 修 改 了 設 定 之 後 ，響 聲 會 由 一 開 始 就 最 大 聲 。

MMM-Tools

再 來 就 是 MMM-Tools，又 是 eouia 的 作 品 ，它 能 顯 示 幾 個 Pi 的 重 要 資 料 ，例 如 IP 地 址 、CPU 用 量 、RAM 用 量 、CPU 溫 度 等 等 。MMM-Tools 的 安 裝 方 法 也 和 上 面 的 一 樣 。

MMM-Tools 唯 一 要 設 定 的 就 是 device，它 支 持 Raspberry Pi 和 Asus Tinkerboard。我 們 用 的 是 Pi，所 以 要 設 定 為 RPI。我 另 外 的 設 定 就 只 是 disable warning ( enable_warning: false )，因 為 我 並 不 打 算 用 Telegram 來 收 Alert。

MMM-CalendarExt

終 於 來 到 最 後 一 個 module，亦 是 最 重 要 的 一 個 ，Calendar 類 的 module。我 選 擇 的 是 MMM-CalendarExt，再 一 次 是 eouia 作 品 ( 是 ，我 很 喜 歡 他 的 作 品 )。

選 MMM-CalendarExt 的 原 因 ，是 它 有 很 多 不 同 的 views。我 這 裡 使 用 的 是 weeks。我 把 整 個 MagicMirror 的 中 間 部 分 ( middle_center ) 設 定 成 顯 示 未 來 13 個 weeks。以 方 便 我 計 劃 未 來 兩 三 個 月 的 工 作 。

MMM-CalendarExt 的 安 裝 亦 是 非 常 簡 單 ，和 前 面 的 module 沒 有 兩 樣 。

MMM-CalendarExt 的 功 能 異 常 強 大 ，我 這 裡 使 用 的 ，只 及 整 體 功 能 的 萬 一 。大 家 想 要 用 好 這 個 module，就 必 須 要 詳 讀 說 明 文 件 。

我 只 應 用 了 7 種 views 的 其 中 一 種 ( show: [“weeks”] )，所 以 config 檔 的 設 定 相 對 簡 單 。position 設 為 middle_center，就 是 整 個 版 面 的 正 中 間 。我 想 要 顯 示 盡 量 多 星 期 ，幾 經 修 改 之 後 發 覺 13 是 最 合 適 ，所 以 counts 是 13。showWeeks 就 是 顯 不 顯 示 weeks column ( 即 第 一 個 column )，我 覺 得 沒 什 麼 用 就 設 為 不 顯 示 ( 0 )。

然 後 在 calendars 我 設 置 了 4 個 。第 一 個 是 香 港 政 府 1823 網 頁 的 公 眾 假 期 iCal。另 外 3 個 都 是 我 的 Google Calendar。一 個 Google Account 是 可 以 設 置 多 個 不 同 的 Calendar 的 ，這 可 以 方 便 我 分 開 管 理 工 事 和 私 事 。

分 開 不 同 Calendar 的 另 一 個 很 重 要 的 原 因 ，就 是 可 以 用 不 同 的 顏 色 來 顯 示 ( 包 括 在 Google Calender 和 MMM-CalendarExt )。在 MMM-CalendarExt 裡 面 ，我 們 可 以 給 不 同 的 Calendar 設 定 不 同 的 styleName。MMM-CalendarExt 已 經 內 建 了 20 個 不 同 的 style 給 我 們 選 擇 ( styleName: “style13” )。

例 如 在 我 的 日 曆 ，公 眾 假 期 就 用 了 紅 色 ，工 事 就 黑 色 ，私 事 就 黃 綠 色 ，一 些 每 月 不 斷 重 複 的 事 就 是 藍 色 ( 交 電 費 、找 卡 數 之 類 )。

要 獲 得 google calendar 的 iCal 連 結 ，我 們 要 在 我 的 日 曆 的 旁 邊 ，選 擇 「設 定 和 共 用 」。然 後 捲 動 到 頁 面 的 最 下 面 ，就 會 找 得 到 「非 公 開 網 址 ( iCal 格 式 )」。

MMM-CalendarExt 是 一 個 頗 為 複 雜 的 module，所 以 我 的 css ( custom.css ) 改 動 亦 稍 為 多 。上 圖 的 第 一 項 ，.tableStyle 是 用 來 minimize 左 右 兩 邊 的 空 位 。第 二 項 裡 面 的 font-size 就 是 字 體 ；margin-top 就 是 把 整 個 calendar 向 下 移 動 500px ( 因 為 我 的 版 面 上 面 的 東 西 比 較 多 ，下 面 的 東 西 比 較 少 )。第 三 項 的 .tableStyle td 就 算 是 行 高 吧 ，我 很 不 喜 歡 動 態 的 行 高 ，月 曆 就 要 像 月 曆 的 樣 子 ，所 以 我 設 定 了 固 定 的 行 高 。

我 的 MMM-CalendarExt 就 只 有 一 個 問 題 ，就 是 所 有 google calendar 的 repeating full day event，顯 示 出 來 都 會 遲 了 一 日 。例 如 我 每 月 5 號 都 要 交 水 費 ，所 以 在 google calendar 就 有 這 麼 一 個 recurring event。但 偏 偏 在 MMM-CalendarExt 顯 示 出 來 就 在 每 月 的 6 號 。

最 奇 怪 的 是 ，如 果 不 是 full day event 就 不 會 有 這 個 問 題 ！

出 錯 的 原 因 大 概 是 因 為 MMM-CalendarExt 所 引 用 ical.js ( iCal parser ) 有 bug。我 的 解 決 方 法 是 自 己 去 修 改 module 的 程 式 ( components/Calendar.js )，夾 硬 將 recurring event 的 日 期 改 早 一 日 ( 1 day = 86400000 milliseconds )。

同 一 作 者 的 MMM-CalendarExt2 ( 注 意 多 了 個 2 字 )，據 說 不 再 用 這 個 舊 的 iCal parser，所 以 應 該 不 會 有 這 個 問 題 ( MMM-CalendarExt2 我 還 沒 有 試 用 ，短 期 內 也 大 概 不 會 )。

總 結

 

上 圖 就 是 我 的 整 個 MagicMirror 了 。以 這 個 資 料 密 度 ，其 實 並 不 需 要 用 4K monitor。如 果 我 改 用 一 個 Full HD 的 15.6寸 monitor，還 能 再 省 個 二 百 蚊 呢 。

我 的 很 多 module 都 放 大 了 ，真 正 顯 示 了 4K 威 力 的 ，其 實 只 有 右 上 角 ( top_right ) 的 3 個 module。但 用 在 15.6 寸 顯 示 器 ，看 起 來 字 還 是 太 少 了 一 點 。如 果 是 24 寸 ，甚 至 42 寸 大 電 視 ，那 就 完 全 不 是 問 題 。

大 家 有 留 意 的 話 ，會 見 到 我 的 MagicMirror 中 間 有 個 空 位 ( Clock module 的 下 方 )。這 並 不 是 國 畫 的 留 白 ，而 是 還 沒 有 決 定 好 要 用 那 個 To-do list。我 自 己 是 用 開 Google Keep，但 那 並 不 能 夠 share 出 來 給 MagicMirror 用 。我 現 在 考 慮 轉 用 Google Task 又 或 者 Microsoft To Do。但 現 在 我 還 未 能 下 決 定 ，所 以 也 不 知 道 要 安 裝 那 個 module。

這 個 MagicMirror 還 有 很 多 不 夠 香 港 化 的 地 方 。例 如 天 氣 不 是 香 港 天 文 台 ，巴 士 到 站 時 間 也 不 準 確 。現 在 有 了 政 府 資 料 一 線 通 ，以 後 有 時 間 我 一 定 會 寫 自 己 的 module 的 。

新 聞 module 是 夠 香 港 了 ，但 內 容 肯 定 要 疏 理 一 下 。我 對 體 育 新 聞 無 甚 興 趣 ，對 娛 樂 新 聞 則 頗 為 反 感 。

語 音 功 能 ( voice assistant ) 我 是 鐵 定 不 會 裝 的 ，太 別 扭 了 。但 其 實 MagicMirror 還 有 很 多 有 用 的 3rd party modules。例 如 Yeelight、Synology、Octoprint、RepRapFirmware ( Duet ) 等 等 的 東 西 我 家 裡 也 有 用 ，但 就 是 版 面 沒 有 那 麼 多 空 間 都 裝 齊 它 們 。

MMM-Remote-Control 也 是 一 個 must have，可 以 用 手 機 ( 以 及 電 腦 ) 遙 控 MagicMirror。

你 們 的 MagicMirror 又 有 什 麼 必 備 的 module 呢 ？

張先生，男性，肖龍。
職業：I.T. Consultant
簡介：不好好讀書；七尺差五寸，手長過膝，雙耳垂肩；性寬和，寡言語，喜怒不形於色。據說少時曾斬白蛇於鳳凰山下……