続：ReTerminal Web App Kiosk（NodeRED）

これは、以下の記事を参考に書いています。
https://www.1ft-seabass.jp/memo/2021/10/25/seeed-studio-reterminal-node-red-install/ 
https://www.1ft-seabass.jp/memo/2021/12/27/summary-soracom-device-meetup-vol6-reterminal-talk/


Node-REDを実行させ、KIOSKモードでダッシュボードを表示したいですよね。
初回では、Dashboardのボタンが使えなかったり、日本語がNGだったので、他の方法を探ります。

# 試した環境
ReTerminal(CM4104032)　
> RaspberryPi CM4ボード(eMMC32GBが載っているのでSDカードの心配が要らない)
メモリ4GB
eMMC32GB
Touch Display 5Inch
リアルタイムクロック：NXP PCF8563T
加速度センサ：STMicroelectronics LIS3DHTR
Encryption：Microchip ATECC608A
光センサ(Levelek LTR-303ALS-01)、デジタル光センサ
インターナル IO 拡張機能：Microchip MCP23008-E
ブザー：≧85dB @10cm 2700±300Hz

PC(Windows 10)
- TertermなどのSSHターミナル
- Web ブラウザー

USB-C　ケーブル（PCとreTerminalを接続するもの）
USB-Cの電源　(reTerminal用電源。Type-Cで3A以上の電流が使えるもの）

(分解用）
- ヘラ
- ドライバー(reTerminalに付属のもの）

# Raspbianのインストール(ドライバー込み)
https://wiki.seeedstudio.com/reTerminal/#flash-raspberry-pi-os-with-drivers-from-seeed-to-emmc
からイメージをダウンロードします。この記事では”2024-03-14-Raspbian-reTerminal-arm64”を使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/4ec1bd17-72ab-f6c3-ae35-22d24a491ee0.png)
ダウンロードが終わったら展開します。

rpiboot_tool を https://github.com/raspberrypi/usbboot/raw/master/win32/rpiboot_setup.exe　からダウンロードし、インストールします。

Imager(Windows版）を https://www.raspberrypi.com/software/ からダウンロードし、インストールします。

reTerminalの裏ブタを開けて、bootモードスイッチを下にします。
ヒートシンク下の部分が空けにくいのでヘラが必要です(赤線の部分）。ネジをなくさないよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/e2d079b6-298a-ae9f-678e-e4bb5c82e9f1.png)

（チップが暖かくなりますが、たぶん、ヒートシンクは外したままで大丈夫です）

USBケーブルでPCと接続します。(reTerminalはType-Cのコネクタ）
※途中でFormatするかどうかのダイアログが表示されたらキャンセルします。
rpibootを起動します。PCは、reTerminalをドライブとして認識します。
Imagerを起動します。
Ctrl+Shift+X キーを押し設定を行います。
WiFiやID,Password等は間違えないように設定してください。
(WiFiを使う国やロケールのJPはキーで入力した方が楽でした）
ユーザー名はpiを想定して記事を書いています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/a708f1c4-06b6-b49f-f42f-93b03412ba41.png)
SSHで接続するので必ず有効化してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/6a87dcef-26c6-fe19-408c-9b1379b23bfe.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/237cd9a0-a731-7d74-c829-9dca64f80785.png)
保存を押し、元の画面に戻ります。

デバイスはRaspberryPi4(ComputerModule4)を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/230d8deb-5279-5368-9732-6ca35f6a3d8e.png)

OSは"Use Custom"を選択します。展開したimgファイルを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/8b2e5265-faf6-d4cb-2fe1-6e836758d62a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/3d1f23ae-aac2-b238-5203-e4264e193df8.png)
”設定を編集”を選択し、今一度、確認しても良いでしょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/c923435a-26b8-da0c-6109-00bd16619bde.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/601f8a26-c059-0bec-d81c-11a86c23eade.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/4a2d55a6-cc1f-8970-b2db-ae50d17d8f25.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/7830e527-137b-3c41-2678-1b6c9f0b1c84.png)


インストールが終わったらBootモードスイッチを元(上側)に戻します。
ヒートシンクを取付けてます。
reTerminalを電源に接続し、起動します。
起動迄少し待ちます。（SYSランプの点滅が終わるぐらいまで、初回は数分かかります。）

PCからSSHでつなぎます。接続先は、Imagerで定義したアドレスです。ここではraspberrypi.localになります。
id,パスワードを入力します。
```
(システムを更新します。)
$ sudo apt update
(モニタの向きを変更します。これは多分バグ ~/.configがpiユーザーが見れなく、変更できなくなっていると思われるので修正。これだけで治ると思いますが、更に治らなければタッチパネルでラズベーリマーク --> preference --> screen settingで修正)
$ sudo chmod -R 777 ~/.config/
(タッチパネルの向きを変更）
$ sudo vi /boot/firmware/config.txt
```
tp_rotate=0に変更

再起動
```
$ sudo reboot
```
# Node-REDのインストール
SSHでつないだPCから
```
$ bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)
(インストール前の質問は両方ともｙで答えます。インストール後の質問はid,pass以外は既定値です。)
$ cd ~/.node-red
(reTerminal用のライブラリのインストール）
$ npm i node-red-contrib-reterminal
(node-red dashboardのインストール)
$ npm i node-red-dashboard
(自動起動の設定)
$ sudo systemctl enable nodered.service
(再起動)
$ sudo reboot
```
PCのブラウザでhttp://raspberrypi.local:1880/ でつなぎます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/cfbd8944-acfa-7e57-f219-0ca544927ac8.png)

## サンプル１の実行
### キーを押すとLEDが光るフローです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/78493160-f9e7-4beb-69c8-34daa59eb7c0.png)

switchノードでmsg.payload.statusがpressedの時とreleasedの時で分岐します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/cc31148d-08f6-f141-fd78-d5a1a699c8fd.png)
pressedの時は、msg.payloadを1にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/85c58ab0-05d0-32a9-dd99-a7bca644d95f.png)
releasedの時は0にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/ef69d1b2-076c-8e80-95cf-f3eb76d5e3e2.png)
デプロイして確認してみましょう。緑色のボタンを押すとLEDが光ります。

### DASHBOARDのサンプル
フローにGaugeを追加して、最小、最大を0,1に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/9a638141-ef42-4291-451f-eff4648f7f7e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/c6a97e09-17ec-4ee9-aa45-e676f22feb62.png)
グループやタブなどのダッシュボードの設定は適当に設定してください。
デプロイすると、UIのページに表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/999ebe90-0b4f-921d-8fb5-064bb556cdd5.png)

# KIOSKモードでの起動
再度SSHでつないでPCから設定します。
```
(起動時にKISOKモードでのchromium-browserの起動)
$ sudo vi /etc/rc.local
```
exit 0 の前に以下の1行を加えます。
```
sudo -u pi DISPLAY=":0.0" /usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mod --kiosk --app=http://localhost:1880/ui &
```
```
(再起動）
$ sudo reboot
```
これで設定は終わりです。

--------------
## 止める場合
```
$ pkill -o chromium
```