MoreMeng.in.th

บันทึกการติดตั้ง Raspberry Pi OS : Chromium in Kiosk mode แบบไม่ต่อจอภาพ

บันทึกการติดตั้ง Raspberry Pi OS : Chromium in Kiosk mode แบบไม่ต่อจอภาพ

Thanikul Sriuthis Life of Dev 637 views

Updated: 18 January 2023

ในเคสนี้ผมไม่มีจอสำหรับต่อ HDMI จะยกทีวีมาต่อก็ไม่สะดวก เลยต้องทำกันแบบคนตา(แกล้ง)บอด เป็นอีกวิธีที่ใช้งานได้เช่นกัน และไม่ต้องเอา mouse, keyboard ไปต่อกับเจ้า Rasberry Pi โดยตรง

เครื่องมือและอุปกรณ์

  • Raspberry PI 3
  • Micro SD Card  : 16 GB หรือ 32 GB 
  • Card Reader : แบบไหนก็ได้ เอามาเสียบ Micro SD ได้ก็พอ
  • Router/switch/dhcp : อุปกรณ์ที่มันแจก IP ได้ แล้วก็ต้องมีช่องเสียบ RJ45 ไว้ซักช่องนึง
  • Internet : เพราะเราจะ download package มาติดตั้งด้วย
  • สาย LAN สั้นๆ : เนื่องจากตอนติดตั้งใหม่ มันไม่สามารถเชื่อม wifi ได้เอง
  • สาย HDMI : เอาไว้ใช้ต่อกับทีวีหรือจอภาพ (สำหรับติดตั้งใช้งานแล้ว)
  • Raspberry Pi OS (Raspbian) : เวอร์ชั่น desktop (ไม่ต้อง full ก็ได้)
    https://www.raspberrypi.org/downloads/raspbian/
  • Etcher : สำหรับเขียน Rasbian ลง SD Card (flash OS image )
    https://www.balena.io/
  • Advance Network Scan : สำหรับ scan หา IP Address
    https://www.advanced-ip-scanner.com/
  • SSH client : สำหรับเชื่อมต่อกับ pi ผ่าน shell เช่น putty (แต่ในที่นี้ผมใช้ windows terminal)
    https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701
    https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html
  • VNC viewer : สำหรับ remote เข้าไปดูหน้าจอ (แทนการต่อหน้าจอกับ pi)
    https://www.realvnc.com/en/connect/download/viewer/

Setting up the Raspberry Pi Kiosk

Step 1: Flash Raspbian to SD Card

ผมใช้โปรแกรมชื่อ Etcher มันง่ายและสะดวกมาก browse file ที่เป็น zip ได้เลย ไม่ต้องแตก zip แต่เสียบ SD Card แล้วโปรแกรมมันก็ detect ให้ทันที เรามีหน้าที่กดคำว่า Flash! แล้วก็รอ

Step 2: Enable SSH

เมื่อ flash เสร็จแล้วให้เข้าไปที่ SD Card จากนั้นสร้างไฟล์ชื่อ ssh เป็นวิธีการ enable SSH ให้กับ Raspberry Pi ที่แสนจะง่ายดาย

Step 3: Card-in and Boot Up

นำ Micro SD Card ที่ติดตั้ง Raspberry Pi OS เสร็จเรียบร้อยแล้ว ไปเสียบกับ Raspberry Pi และต่อไฟ ซึ่งจะใช้ adapter ที่มากับตัวเครื่อง หรือ ใช้กับที่ชาร์ทมือถือก็ได้ หัวแบบ micro USB แล้วแต่สะดวก ผมทดลองต่อกับจอทีวี LCD แล้วก็ใช้งานได้ ไม่มีปัญหา ถ้าเขาจะแนะนำที่ 2.5A ก็ตาม สังเกตุให้ดีว่า ไฟ LAN ติด ถ้าไม่ติดแสดงว่ามัน boot ไม่สำเร็จ การ์ดอาจมีปัญหา หรือต้อง flash image OS ใหม่

Step 4: Finding

ใช้ Advanced IP Scanner หา ip address ที่แจกให้กับ Raspberry Pi ถ้า ใช้กับ network วงใหญ่ๆ ก็จะหายากหน่อย วิธีง่ายๆ ก็ให้พิมพ์ค้นหาคำว่า raspberry

Step 5: Configuration via SSH

ผมใช้ Windows Terminal โดยพิมพ์ ssh user@hostname_or_ipaddress

ssh [email protected]

รหัสผ่านคือ raspberry

จากนั้นพิมพ์คำสั่ง sudo raspi-config เพื่อเข้าไปยังหาการตั้งค่า

sudo raspi-config

1 Change User Password

เปลี่ยนรหัสผ่าน หรือจะข้ามไปก่อนก็ได้

  • 1 Change User Password
  • <Ok>
  • พิมพ์รหัสผ่านใหม่ แล้วกด Enter (ทำซ้ำกัน 2 ครั้ง)
  • <Ok>

3 Boot Options

ให้ login อัตโนมัติหลังจาก boot เสร็จแล้ว

  • 3 Boot Options
  • B1 Desktop /CLI
  • B4 Desktop Autologin

3 Boot Options

ให้มันตรวจสอบเน็ตเวิร์คขณะเริ่มต้นการทำงาน

  • 3 Boot Options
  • B2 Wait for Network at Boot
  • <Yes>
  • <Ok>

4 Localisation Options

แก้ location เป็น asia/bangkok หรือข้ามไปก่อนก็ได้

  • 4 Localisation Options
  • I2 Change Time Zone
  • Asia
  • Bangkok

5 Interfacing Options *

สำหรับ remote เข้าไปดูหน้าจอ แบบนี้จะตั้งค่าได้สะดวกกว่า โดยใช้ VNC viewer ซึ่ง user,password ใช้ตัวเดียวกับ SSH ที่ตั้งไว้ default คือ pi : raspberry

  • 5 Interfacing Options
  • P3 VNC
  • <Yes>

7 Advanced Options

แก้ blank screen ให้เป็น <No> เพื่อไม่ให้จอดับ

  • A6 Screen Blanking
  • <No>
  • <ok>

แล้วเลือก <Finish>

Writing the Raspberry Pi Kiosk Script

เมื่อตั้งค่าระบบเสร็จแล้ว ต่อไปจะต้องติดตั้ง และสร้างไฟล์สำหรับแสดงผลโดยอัตโนมัติ เวลาที่เปิดเครื่องขึ้นมา

Step 6: Up-to-date packages

ก่อน update package อาจจะลบไฟล์หรือ package ที่ไม่ใช้ออก (ไม่ลบก็ได้)

sudo apt-get purge wolfram-engine scratch nuscratch sonic-pi idle3 smartsim java-common minecraft-pi python-minecraftpi python3-minecraftpi libreoffice python3-thonny geany claws-mail bluej greenfoot -y
sudo apt-get clean
sudo apt-get autoremove -y

จากนั้น update 

sudo apt-get update
sudo apt-get upgrade

Step 7: Install Packages

  • unclutter – สำหรับซ่อน mouse จากหน้าจอ
  • sed – stream editor for filtering/transforming text
  • xdotool สำหรับตั้งค่า keyboard/mouse input events (Optional)

จะเลือกลงแค่ uncluter sed ก็ได้ หาก kiosk ไม่ได้มีการเปิดเว็บ 2 หน้าสลับกัน ซึ่งเจ้า xdotool มันมีประโยชน์ตรงที่เราสามารถกำหนดให้มันส่ง key เช่น ctrl + r ทุกๆ 5 นาที ได้เพื่อ refresh หน้าเว็บใหม่ 

sudo apt-get install unclutter sed

Step 8: Create kiosk bash script 

สร้างไฟล์ชื่อ kiosk.sh 

nano /home/pi/kiosk.sh

โค๊ดทั้งหมดใน kiosk.sh (ในภาพจะเกินจากตัวอย่างมา 4 บรรทัด เนื่องจากมีการใช้ xdotool ด้วย) 

#!/bin/bash
xset s noblank
xset s off
xset -dpms

unclutter -idle 0.5 -root &

sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' /home/pi/.config/chromium/Default/Preferences
sed -i 's/"exit_type":"Crashed"/"exit_type":"Normal"/' /home/pi/.config/chromium/Default/Preferences

/usr/bin/chromium-browser  --disk-cache-dir=/dev/null --disk-cache-size=1 --noerrdialogs --disable-infobars --incognito --disable-translate  --disable-features=TranslateUI --kiosk https://moremeng.in.th/ --window-size=1920,1080 --window-position=0,0

เมื่อมั่นใจว่าทุกอย่างถูกต้อง กด Ctrl + x ตามด้วย Y และกด ENTER

Step 9: Create Service file

เมื่อมีคำสั่งไฟล์ที่ใช้สั่งให้เปิด chromium เพื่อแสดงเว็บที่เราต้องไว้แล้ว ต่อไปก็ต้องสร้าง service file เพื่อบอกให้ OS มันรู้ว่าเวลาเริ่มต้นระบบแล้ว ให้เข้าไปเปิดไฟล์ bash script ที่ไหน โดยสร้างไฟล์ชื่อว่า kiosk.service ดังนี้

sudo nano /lib/systemd/system/kiosk.service

ในไฟล์จะมีการกำหนดให้ Service รู้ว่าต้อง ExecStart ไฟล์ที่ไหน

[Unit]
Description=Chromium Kiosk
Wants=graphical.target
After=graphical.target

[Service]
Environment=DISPLAY=:0.0
Environment=XAUTHORITY=/home/pi/.Xauthority
Type=simple
ExecStart=/bin/bash /home/pi/kiosk.sh
Restart=on-abort
User=pi
Group=pi

[Install]
WantedBy=graphical.target

เมื่อมั่นใจว่าทุกอย่างถูกต้อง กด Ctrl + x ตามด้วย Y และกด ENTER

Step 10: Enable kiosk.service

เพื่อให้มันทำงานเมื่อเครื่อง start ขึ้นมา

sudo systemctl enable kiosk.service

จากนั้นก็ทดสอบ start service นี้ดู

sudo systemctl start kiosk.service

เสร็จแล้วทดสอบดูด้วยว่ามัน start สำเร็จมั้ย ถ้าสถานะเป็น “Active: active (running)” แสดงว่า service นี้ทำงานอยู่

sudo systemctl status kiosk.service

VNC Viewer

เมื่อไม่ได้ต่อจอภาพ เราก็ต้องใช้วิธีการ remote เข้าไปดู ว่าหน้าจอมันแสดงผลอย่างที่ตั้งค่าไว้หรือไม่ ซึ่งขั้นตอนนี้ทำได้ตั้งแต่ต้น แต่ต้องการให้ focus ที่การตั้งค่ามากกว่าการเปิดหน้า VNC เอาไว้เฉยๆ

Username: pi
Password: raspberry (default)

ไม่ว่าจะเห็นหน้าจออะไรก็ตาม ให้ลองสั่ง reboot เพื่อดูว่า service ที่ตั้งเอาไว้มันทำงานถูกต้องหรือไม่ ในขณะที่ reboot ก็ไม่ต้องปิดหน้าจอ VNC เราสามารถรอดูจากตรงนี้ได้เลย

ขั้นตอนต่อไปก็คือการนำไปติดตั้งกับหน้างานจริงๆ เช่น TV, ตู้ kiosk หรือ display อื่นๆ ซึ่งในที่นี้ต้องทราบว่า อุปกรณ์ที่จะนำไปต่อนั้นมี resolution ขนาดเท่าไหร่ ถ้าเราปรับไม่เหมาะสมมันก็จะบิดเบี้ยวได้

Optional

How To Set Static IP Address : Raspberry Pi
Windows Terminal SSH access with Ed25519 Private key

References

Full-Stack Developer, Health Informatician