自從開始玩 rpi2 之後,一直沒真正做什麼有用的東西出來。都是 demo code 裝一裝,跑一跑之後就收起來了。 直到最近發現了 Magic Mirror(Smart Mirror),而且剛好手上有不少沒在使用的 LCD 面板,所以就興起了做一個來試試的念頭。

準備材料

製作一個 Magic Mirror 需要下列材料(附上採買時的價格)

  • 一片 LCD 面板
  • 一塊與 LCD 面板搭配的 eDP control board - $683
  • 一塊 Raspberry Pi
  • 一塊玻璃 - $150
  • 半透明及不透明玻璃紙各一 - $329 + $329
  • 外框 - $250
  • HDMI 線
  • 電源延長線

材料取得

LCD 面板

可以從舊的筆電上拆下來,或是買舊的顯示器來拆,或是露天上有些賣家有在賣面板的。買的時候要注意,一定要是 eDP 2/3 lanes(30 pins) 的,因為市面上找不到 eDP 4 lanes(40 pins) 的 control board。至於 LVDS 接頭的,應該遇不太到,這是早期的介面,不過如果面板是這種接頭的也可以。

面板後面會有面板的 Model No,像我的就是 B125HAN02.2,可以到 Panelook 找到這塊面板的資料,確定 Signal Interface 是 eDP 30 pins。

eDP control board

LCD 面板沒辦法直接接到 rpi 上,得要透過 HDMI 介面,所以我們需要一塊 eDP 控制板來連接,並生出 HDMI 介面。由於 eDP 並沒有萬用的控制板(LVDS 介面的只要去露天隨便找一塊就行),所以你得要先記下面板的 Model No. 然後到露天找能幫你燒 eDP firmware 的控制板賣家(用 "eDP 驅動板" 查),然後買一塊與你面板能搭配的控制板。

Raspberry Pi

Pi 板大家都有,就不再贅述了。這邊要注意的是,必需使用 desktop 版本的 image,因為 Magic Mirror 需要使用到 Desktop 來畫畫面。如果是裝 Lite 版本的,就得要自己補齊缺少的套件。 上面的材料都有了,就可以先把線接起來看看囉。

玻璃(or 雙面鏡)

不知道網路上那些人去哪生的雙面鏡,我去我家附近的玻璃店請他切一塊我想要的大小,然後使用半透明跟不透明的玻璃紙來達成雙面鏡的功能。

玻璃的大小為 30cm X 50cm X 5mm 要價 $150,比我想像中的還要便宜。

玻璃紙(隔熱紙)

我買了兩種不同的玻璃紙,一種是 40% 透光半黑的,另一種是 100% 不透光的(其實還是有一點點透)。這次不是露天上買的了,是 PChome :p

40% 透光的紙主要是遮蓋面板的邊緣,避免透過玻璃直接看到 LCD 面板,這樣看起來很突兀。用 40% 透光的紙先貼一層在整個玻璃上,這樣放 LCD 上去,痕跡就不這麼明顯了。(還是看的到一條線啦,可以試試透光率更低的紙。不過透光率低,也就表示 LCD 上顯示的字越看不到。)

外框

網路上大家都是用木框自己組,但是我手上沒有木材,也不想做很粗的外框,所以就在露天上找到可以訂做鋁框的店家,30cm X 50cm $250 品質不錯,轉角都有補強,掛這麼重的玻璃還是很穩固。而且他還有附透明壓克力板,把它裁切出 LCD 大小的空間,剛好可以從下面撐住 LCD,實在是非常剛好。

硬體組裝

首先,先處理玻璃的部分。先把玻璃整個噴溼,然後撕下 40% 玻璃紙背膠時也邊撕邊噴溼,小心的把整塊玻璃貼上 40% 玻璃紙,並用刮刀把水給刮出去。

然後再貼不透明的玻璃紙,不透光的玻璃紙切掉 LCD 面板佔用的部分之後貼上去,這樣鏡子就完成了。

把水份刮乾,確定玻璃紙黏好後,就可以裝進框裡(沒有貼玻璃紙的朝外)。然後拿出框附的透明壓克力板,切下 LCD 顯示的大小,並把切下來的部分用雙面膠黏回去補強(或是能放在玻璃下半部分支撐 LCD 的支架),然後也放進框裡。這時框裡會有黏好玻璃紙的玻璃、LCD 下方的支撐架、及 LCD 面板。

接著再將 Pi 板(已裝好 Desktop 版 image)及 LCD 控制板接上,並黏在壓克力板(支撐架)上,然後就可以開機試試了。 因為 Pi 板跟 LCD 控制板都需要電源,為了走線簡潔一點,我黏了個延長線在後面。這個延長線插上 USB 插頭,跟給 LCD 控制板供電,這樣只需要拉出來一個插頭就可以使用。

Magic Mirror 軟體

直接使用現成的 Magic Mirror,安裝超簡易,只需要執行下面指令即可。

1
bash -c "$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)"
跑起來的畫面就會變成這樣

自動執行

雖然執行 Magic Mirror 安裝程式時,就有加入自動啟動的設定,但是使用 pm2 自動啟動是需要 root 權限的,所以前面的設定並不會自動讓 pm2 跑起來,也不會執行 Magic Mirror。下面的 sudo 會將 pm2 加入 systemd 讓它開機之後自動執行,然後確定 pm2 list 裡有 MagicMirror 然後 save 保存住狀態。這樣重開機才會完整的重啟。

1
2
3
sudo pm2 startup systemd -u pi --hp /home/pi
pm2 list
pm2 save

行事歷設定

Magic Mirror 的設定檔在 MagicMirror/config/config.js, 原本設定是美國的節日,將 calendar 的 url 改成台灣節日。

1
"webcal://p44-calendars.icloud.com/published/2/OuWr4vvGTAk6NFghJ3slQyh-zgesLNYCFmqdG9d  EmKzrGVLNOVdFzyDH--YF4MZpJBZyUEb3U0Nevd1EsU_ZI-aeIaQJTTLqnw6AHOZVKdo"
然後加入自己的 Google 行事歷,從 Google Calendar 右上的齒輪 -> 設定,找到你的行事歷的非公開網址(iCal 格式),然後再加一個 calendar 進去。
MagicMirror/config/config.js
1
2
3
4
5
6
7
8
9
10
calendars: [
{
symbol: "calendar-check",
url: "webcal://p44-calendars.icloud.com/published/2/OuWr4vvGTAk6NFghJ3slQyh-zgesLNYCFmqdG9d EmKzrGVLNOVdFzyDH--YF4MZpJBZyUEb3U0Nevd1EsU_ZI-aeIaQJTTLqnw6AHOZVKdo"
},
{
symbol: "Family Calendar",
url: "非公開網址(iCal 格式)"
}
]

CSS 設定

原本的時間太小,所以透過 CSS 將它放大,但是整個日期跟時間一起放大會蓋掉左右兩邊的東西,所以另外再將日期縮小。

MagicMirror/css/custom.css
1
2
3
4
5
6
7
.clock {
transform: scale(5.0);
}


.clock .date {
font-size: 10px;
}

參考文件