在 Raspberry Pi 上設定 MHS 3.5寸屏幕並啟用 Chromium Kiosk 模式
Toby
Toby

如果你想快速的做一個 Prototype,通常開發者都會直用 Web Browser 作為 GUI 的首選。但是當去到需要部署在硬體上面的時候,到底要怎樣把整個 Chrome 搬到去 ARM 開發板上面呢?

以下這個一個教學將會記錄我 DIY Rpi DAC 時架設 Chromium 的經歷

選擇屏幕

這個應該不用多說,當然就是最便宜的那個吧!就是這樣,我想也沒想就買了這個 MHS 3.5寸屏幕。

收到後接上 Rpi 4,並安裝好 Raspberry Pi OS LITE (沒有桌面版),之後就是重要的部分了

安裝 xserver 跟 Chromium

https://die-antwort.eu/techblog/2017-12-setup-raspberry-pi-for-kiosk-mode/

跟著這個教學,首先我們需要更新 apt-get

sudo apt-get update
sudo apt-get upgrade

之後安裝 Xserver 等顯示需要用到的程序庫

sudo apt-get install --no-install-recommends xserver-xorg x11-xserver-utils xinit openbox -y

最後就是安裝 Chromium

sudo apt-get install --no-install-recommends chromium-browser -y

設定 Openbox 並讓它啟動 Chromiuum 。編輯 /etc/xdg/openbox/autostart

sudo nano /etc/xdg/openbox/autostart

並在裡面填入以下的東西

# Disable any form of screen saver / screen blanking / power management
xset s off
xset s noblank
xset -dpms

# Allow quitting the X server with CTRL-ATL-Backspace
setxkbmap -option terminate:ctrl_alt_bksp

# Start Chromium in kiosk mode
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' ~/.config/chromium/'Local State'
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/; s/"exit_type":"[^"]\+"/"exit_type":"Normal"/' ~/.config/chromium/Default/Preferences
chromium-browser --disable-infobars --window-size=320,480 --app-shell-host-window-size='320x480' --noerrdialogs --kiosk -app='http://YOUR_URL_HERE/'

這裡因為我的屏幕是 320 x 480的,所以所有 window size 的設定都是 320 x 480。請根據你的屏幕大小作更改。

安裝屏幕驅動

https://github.com/waveshare/LCD-show

安裝 git

sudo apt-get install git -y

clone 並安裝驅動

git clone https://github.com/waveshare/LCD-show
cd ./LCD-show
#把下面這行改成你屏幕的規格
sudo ./LCD35-show

如果你需要旋轉顯示角度,用這個指令

#無旋轉
cd LCD-show/
./LCD35-show 0
#90度
cd LCD-show/
./LCD35-show 90
#180度
cd LCD-show/
./LCD35-show 180
#270度
cd LCD-show/
./LCD35-show 270

測試 xserver 運作

輸入以下指令,但是不要用 sudo,不然界面會使用 root 執行(無這個需要)

startx -- -nocursor

如果你需要 log 的話,可以這樣看到

startx -- -nocursor >log.txt 2>&1
cat log.txt

之後你很有可能看到以下錯誤

Xorg: "no screens found" Error when using Touchdisplay

這是因為這個 SPI touch screen 並不是一個真正的屏幕,而是一個把 virtual screen 的 buffer 複制並傳送到 SPI 的一個 background daemon 。於是我們會需要跟系統說這是一個屏幕,請把資料傳送到這個屏幕吧!

設定虛擬屏幕參數

https://www.raspberrypi.org/forums/viewtopic.php?t=162323

編輯 /etc/X11/xorg.conf.d/99-calibration.conf

sudo nano /etc/X11/xorg.conf.d/99-calibration.conf

把下面的這段設定插進去

Section "Device"
# WaveShare SpotPear 3.5", framebuffer 1
Identifier "uga"
driver "fbdev"
Option "fbdev" "/dev/fb0"
Option "ShadowFB" "off"
EndSection

Section "Monitor"
# Primary monitor. WaveShare SpotPear 480x320
Identifier "WSSP"
EndSection

Section "Screen"
Identifier "primary"
Device "uga"
Monitor "WSSP"
EndSection

Section "ServerLayout"
Identifier "default"
Screen 0 "primary" 0 0
EndSection 

另外也順便更改接觸屏的方向(如有需要)。我這裡把屏幕的角度旋轉了 180 度

Option "TransformationMatrix" "-1 0 1 0 -1 1 0 0 1"

編輯之後大概會長這樣

Section "InputClass"
        Identifier      "calibration"
        MatchProduct    "ADS7846 Touchscreen"
        Option  "Calibration"   "230 3900 140 3840"
        Option  "SwapAxes"      "0"
        Option "EmulateThirdButton" "1"
        Option "TransformationMatrix" "-1 0 1 0 -1 1 0 0 1"
        Option "EmulateThirdButtonTimeout" "1000"
        Option "EmulateThirdButtonMoveThreshold" "300"
EndSection

以下為其他旋轉角度的參數

90° = Option "TransformationMatrix" "0 1 0 -1 0 1 0 0 1"

180° = Option "TransformationMatrix" "-1 0 1 0 -1 1 0 0 1"

270° = Option "TransformationMatrix" "0 -1 1 1 0 0 0 0 1"

設定啟動時自動登入 pi

這個很輕易的就可以透過

sudo raspi-config

解決,這裡就省下不說明了。

設定啟動時啟動 xserver

把啟動代碼放進 ~/.bashrc

sudo nano ~/.bashrc

在檔案最後加入以下一行

[[ -z $DISPLAY && $XDG_VTNR -eq 1 ]] && startx -- -nocursor

這會確保只有第一個界面顯示 Chromium,之後用其他方式登入如 ssh 則不會啟動

這樣你的 Chromium 應該就能夠在 SPI 屏幕上正常啟動了。