I'm using a Pi3B+ with the "official" Pi touchscreen and the latest raspios 2021-01-11-raspios-buster-armhf-full.zip.
I launch Chromium in "kiosk" mode with:
DISPLAY=:0 /usr/bin/chromium-browser --app http://localhost:1880/ui \
--kiosk \
--window-size=800,450 \
--window-position=0,0 \
--disable-infobars \
--incognito \
--disable-session-crashed-bubble \
--disable-features=RendererCodeIntegrity \
--process-per-site \
--bwsi \
--disable-cache \
--noerrdialogs \
--no-first-run \
--fast --fast-start \
--check-for-update-interval=31536000 \
--disable-gl-error-limit \
--aggressive-cache-discard \
--simulate-critical-update \
--user-agent="Mozilla/5.0 (X11; CrOS armv7l 11895.95.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.125 Safari/537.36" \
--autoplay-policy=no-user-gesture-required &
Which is basically boilerplate from Google searches, (Wolfgang Ziegler - Setting up a Raspberry Pi in Kiosk Mode - 2020 Update and others)
I run this simple flow:
[{"id":"121f72c7.8df3ed","type":"mqtt in","z":"96979e95.dcd62","name":"LorexAI Alert","topic":"AI_alert","qos":"0","datatype":"buffer","broker":"4d3054a2.cadd6c","x":300,"y":180,"wires":[["560a60c3.1b056","a7281be4.6c0338"]]},{"id":"54dca344.c9d7bc","type":"template","z":"96979e95.dcd62","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"768px\" height=\"432px\" src=\"data:image/jpg;base64,{{{payload}}}\">","output":"str","x":760,"y":180,"wires":[["63ee5fe4.0250c"]]},{"id":"63ee5fe4.0250c","type":"ui_template","z":"96979e95.dcd62","group":"a4d1387f.772c08","name":"Viewer","order":1,"width":"16","height":"9","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":920,"y":180,"wires":[[]]},{"id":"560a60c3.1b056","type":"base64","z":"96979e95.dcd62","name":"","action":"str","property":"payload","x":600,"y":180,"wires":[["54dca344.c9d7bc"]]},{"id":"a7281be4.6c0338","type":"debug","z":"96979e95.dcd62","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":490,"y":140,"wires":[]},{"id":"4d3054a2.cadd6c","type":"mqtt-broker","name":"","broker":"LorexAI.local","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"a4d1387f.772c08","type":"ui_group","name":"Camera Viewer","tab":"3270d8bf.5a65a8","order":2,"disp":false,"width":"16","collapse":false},{"id":"3270d8bf.5a65a8","type":"ui_tab","name":"AI Alert Kiosk","icon":"dashboard","disabled":false,"hidden":false}]
Basically its working exactly as I'd like except for the scrollbar at the bottom which is basically wasting space -- rather serious when you only have a 800x450 display. The "pinch zoom" on the detection box lets me zoom in to see the person in full resolution (4K or HD depending on the camera), which is really great.
I can't paste the dashboard site layout table, but:
SizesHorizontalVertical
1x1 Widget Size
50
50
Widget Spacing
0
0
Group Padding
0
0
Group Spacing
0
0
the tab is width 16 and the viewer is size 16x9.
The template is:
<img width="768px" height="432px" src="data:image/jpg;base64,{{{payload}}}">
Any ideas where I've gone wrong?
node-red v1.2.9
node-red-dashboard v2.27.0
