Skip to content

Latest commit

 

History

History
208 lines (173 loc) · 6.48 KB

SOP Deploy react app on rpi kiosk mode.md

File metadata and controls

208 lines (173 loc) · 6.48 KB
Raw

Raspberry Pi setup

QUICK

  • change the served URL by editing KIOSK_URK

sudo nano /home/pi/.xinitrc

Kit

  • Raspberry pi 3B+
  • 7" Touchscreen + enclosure link
  • SD card and whatnot

Setup

  • Create image using raspbian lite use etcher
  • Setup SSH access by creating an empty ssh file on root dir. I am using ethernet, no need to setup network, you can find the pi using hostname raspberrypi. Nice Guide
  • setup a static IP on the pi for sanity sake, also internet sharing doesnt work without this
> sudo nano /etc/dhcpcd.conf

  • Easiest way to share internet. In Windows right click on Internet Adapter -> Properties -> Sharing . Select "Allow sharing something" and the ethernet adapter

  • change hostname-password kioskpi-strawberry

  • enable autologin

  • update everything

> sudo apt-get update && sudo apt-get upgrade
  • follow guide
    • Step 7: I like the screen going blank
xset +dpms              # i do want stuff to turn off
xset s off              # don't activate screensaver
xset dpms 200 0 0       # sleep after 200 sec


# Remove exit errors from the config files that could trigger a warning

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/chr$

# Run Chromium in kiosk mode
chromium-browser  --noerrdialogs --disable-infobars --kiosk --check-for-update-interval=31536000  $KIOSK_URL

  • Step 8: we define the URL here. Using google for initial test. myIP:3000 while developing and eventually http://localhost after deployed with nginx

  • had to add a setup to turn off stuff like pinch zoom, this also seems to give better control over stuff. it seems to overrude the flags in the previous setup

    • edit file /home/pi/.xinitrc mind the site and window size
#!/usr/bin/env sh
xset +dpms
xset s off
xset dpmx 200 0 0

unclutter &
chromium-browser http://localhost:3000 \
  --window-size=800,480 \
  --window-position=0,0 \
  --start-fullscreen \
  --kiosk \
  --noerrdialogs \
  --disable-translate \
  --no-first-run \
  --fast \
  --fast-start \
  --disable-infobars \
  --disable-features=TranslateUI \
  --disk-cache-dir=/dev/null \
  --overscroll-history-navigation=0 \
  --disable-pinch \
  --check-for-update-interval=31536000 \

  • Setup a cronjob to reboot everynight

  • Install screen link

Build react app

https://www.digitalocean.com/community/tutorials/how-to-deploy-a-react-application-with-nginx-on-ubuntu-20-04

  • move build directory to the pi /var/www/[kioskcore]/build ( sudo rsync -vr /home/pi/kioskcore/* /var/www/kioskcore )

Notes on config files

Any code inside the src folder gets compiled. This is impratical for a build once > deploy many times structure. I have created a js file with a config object. The file is places inside the public folder and imported in the index.html file (in public folder) under the root div.

<div id="root"></div>
<script type="application/javascript" src="%PUBLIC_URL%/config.js"></script>

You can then access the object by calling it as part of the windows props

const config = window.config;

the object in the config file must be type var

var config = {
  projectTitle: 'Kringjså Skole',
  revisionDate: '12.02.2021',
  devices: [
    {
      id: 1,
      name: 'DMX Output',
      type: 'Quadcore',
      ipaddress: 'http://haarlem.visualproductions.nl:10015/',
      notes: 'Receives UDP from IOCore, runs lighting scenes',
      short: 'Q'
    },
    {
      id: 2,
      name: 'Sensor Input',
      type: 'IOCore',
      ipaddress: 'http://haarlem.visualproductions.nl:89/',
      notes: 'Receives data from 5 sensors and sends to Quadcore as UDP',
      short: 'I'
    },
    {
      id: 3,
      name: 'Sensor Input',
      type: 'Cuecore',
      ipaddress: 'http://haarlem.visualproductions.nl:84/',
      notes: 'Testing only',
      short: 'C'
    },
  ],
    notes: '',
    contact: 'Pekka Stoke at mail@ljos.no',
  }

Nginx

  • Install nginx, follow guide

sudo apt install nginx

  • Navigate to directory and add directory to root definition

/etc/nginx/sites-available/

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;
        #
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
        # include snippets/snakeoil.conf;

        root /var/www/kioskcore/build;
  • test config

sudo nginx -t

  • restart server

sudo systemctl restart nginx

Notes

  • Touchscreen resolution is 800 x 480. App made pixel perfect
  • Quality of jumper cables seems pretty random. super glue or soldering would be an improvement
  • Some issues with providing enough power to both the pi and touchscreen (bolt icon on display), try with RPI4, different cable or separate supply for the screen

Potential Issues

  • Already had another pi on my network, as both responded to the hostname raspberrypi I was getting a lot of issues. isolating one and changing hostname sorted this out link
  • Rendering unicode character was looking tricky, installing the ancient fonts pack sorted it

sudo apt-get install ttf-ancient-fonts

  • Official screen was upside down for me. in sudo nano /boot/config.txt add lcd_rotate=2

  • It could be nice to add systemd or something to watch the process in case of crashes link

Useful Links