Raspberry Pi 4 B でkiosk端末にして、オリジナルのタイムカードシステムにするまで

今回はラズパイネタであります。
以前、デジサイっぽいのを作りましたが、その時の経験を生かして
今回はサラリーで内製化したタイムカードシステム用のKIOSKを作ってみようと思います。
ではstart。

広告

Raspberry Pi 4 B で KIOSKまで

ではまずはラズパイでキオスク化まで。
今回はカメラを使った打刻機にする為に、カメラモジュールと
キーボードじゃダサいので、タッチスクリーンを用意しました。

揃えたモノ


元々開発用で持っている Raspberry Pi 4 B 8GB
それにしても、凄く高くなってない??
もう少し安くならないかなー

ちなみに、今回の内容で8GBは必要ないです。


カメラモジュール
安いので全然平気。


タッチスクリーンのディスプレイ。
プライムデーで安くなってたのが嬉しい。
他のヤツでもいけるはず。

セッティングからKIOSK化まで

いよいよ始めます。

まず今回使ったOSは Raspberry Pi OS Lite 64bit (Bullseye) です。
最初はレガシー版でやってたのですが、64bit版も作って見たくて結局Bullseyeにしました。

これが苦戦の始まりで、メモ代わりに本投稿を。

OSのSDカードへの書き込みは皆さんやるでしょうからスルー。

ではまずはアプデ・・・ と行きたいトコロですが、

WIMAXIT 7インチモニターを付けて、SSHすると妙に重い。
しかもモニターは直ぐに真っ暗になる・・・。

後ほど原因が分かるのですが、最初の作業はモニターはつけずPCからSSHするのがおススメ。

ではまず、アプデ。

アプデ

$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get dist-upgrade
$ sudo reboot

その後、ディスプレイを使えるようにするために、ドライバーを入れます。
真っ暗な原因はドライバーが入ってない事ッポイ??
ちなみにbusterでは普通に写っていたので、結構ハマったポイント。

Git と LCDドライバー

まずはGitをインストール。
ドライバーがGitにあるようなので。

$ sudo apt-get install -y git

gitが入ったら、ドライバー入れてきます。

$ sudo git clone https://github.com/kedei/LCD_driver
$ sudo chmod -R 777 LCD_driver
$ cd LCD_driver
$ sudo ./LCD35_hdmi

これで再起動されて、画面が写り使えるようになります。
がしかし、解像度が設定が微妙なので、

$ sudo nano /boot/config.txt

#下のほうにある部分を変更
hdmi_force_hotplug=1
config_hdmi_boost=7
hdmi_drive=2
hdmi_group=2
hdmi_mode=87
hdmi_cvt 1024 600 60 6 0 0

[pi4]
# Enable DRM VC4 V3D driver on top of the dispmanx display stack
dtoverlay=vc4-fkms-v3d
#max_framebuffers=2
#hdmi_timings=600 0 20 28 48 400 0 13 3 32 0 0 0 30 0 25000000 5

config.txt の hdmi_cvt の内容を変更し、hdmi_timingsはコメントアウトしました。

これで reboot すれば 1024*600になります。

調べてたら似たようなドライバー見つけたので追記
ラズパイZEROにはこっちのドライバー入れた。
最後の sudo ./LCD7-1024×600-show はディスプレイによって変更。

$ sudo git clone https://github.com/waveshare/LCD-show
$ sudo chmod -R 777 LCD-show
$ cd LCD-show
$ sudo ./LCD7-1024x600-show

こっちのがストレートに入るかも??

↑のドライバー使ってKIOSKしたさいに ”Failed to load module ‘fbturbo'” が出ちゃうようなら

sudo mv /usr/share/X11/xorg.conf.d/99-fbturbo.conf ~

で99-fbturbo.confをいなくすればKIOS出来ました。

Kioskまでの流れ

それではKIOSKまで。

オートログインの設定。


$ sudo raspi-config

System Options -> Boot/AutoLogin -> Console Autologin

GUI系とChromiumのインスト


$ sudo apt-get install --no-install-recommends xserver-xorg x11-xserver-utils xinit openbox
$ sudo apt-get install --no-install-recommends chromium-browser

autostartの設定

$ sudo nano /etc/xdg/openbox/autostart

xset -dpms
xset s noblank
xset s off #デジサイじゃ無いんでscreensaverはどっちも良いかも。

# CTRL-ATL-Backspace でターミナルに戻れるように。必要なければ書かない。
setxkbmap -option terminate:ctrl_alt_bksp

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  --noerrdialogs --disable-infobars --kiosk $KIOSK_URL


ターミナルに戻る方法が分かったので追記。
セットアップの時とかはあると良いし、メンテが多い場合は必須ですよね。

$KIOSK_URLの設定

$ sudo nano /etc/xdg/openbox/environment

#https://google.comを好きなアドレスに
export KIOSK_URL=https://google.com

bash_profileの設定

$ sudo nano .bash_profile

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

これでrebootすればKIOSKの完成。

スリープしないように

$ iwconfig

wlan0     
          Power Management:on

Power Management:on なので

$ sudo nano /etc/rc.local

# exit 0 の上に追加↓↓
/sbin/iw wlan0 set power_save off

/sbin/iw wlan0 set power_save off を追加して

$ iwconfig

wlan0     
          Power Management:off

になる。

カメラモジュールを使えるようにする


$ sudo raspi-config

Interface Options -> legacy camera -> Enable

一応 config.txt にstart_x=1を


$ sudo nano /boot/config.txt

gpu_mem=128
start_x=1

これでrebootしたら、Bullseyeのchromiumでもカメラを認識しました。

モニターを縦置きに

自前で作ったシステムがスマホ向けなので、縦のほうが収まりが良く、その設定。
ここもドハマりしてた。

config.txtで触っても出来るんだけど、autostart を使います。


$ sudo nano /etc/xdg/openbox/autostart

xrandr --output HDMI-1 --rotate right

上のほうに追加。
これでディスプレイ例を90度傾けます。

そしてタッチスクリーンも傾ける。


$ sudo nano /usr/share/X11/xorg.conf.d/45-evdev.conf

# Option "TransformationMatrix" "0 1 0 -1 0 1 0 0 1" を追加してる
Section "InputClass"
        Identifier "evdev touchscreen catchall"
        MatchIsTouchscreen "on"
        Option "TransformationMatrix" "0 1 0 -1 0 1 0 0 1"
        MatchDevicePath "/dev/input/event*"
        Driver "evdev"
EndSection

Touchscreenがどうたらって書いてある部分に
Option “TransformationMatrix” “0 1 0 -1 0 1 0 0 1”
を追加。

これでrebootで完成。

完成

このよう、QRコードを読み取り打刻するタイムカードシステムの専用端末になりました。

ちなみにシステムはWordpress上にプラグインとして構築しています。
PWAなのでスマホにも簡単にインスト可能です。

ご依頼があれば設置&オリジナル作ります。

ではでは。


おすすめのコンテンツ

広告

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください