A React app meant for a Raspberry Pi Zero 2 W with a Hyperpixel 4.0 Square display.
The React app can be hosted either directly on the Pi, or somewhere else.
When not playing a clock is shown, and when enabled a request will be made to the local Pi to turn the screen on and off.
Occupancy detection can also be enabled, where a Home Assistant entity state will be queried. When the entity is off, the screen will be turned off.
Unfortunately due to cross-origin request issues TLS will most likely need to be enabled on everything.
Place contents of autostart in
.config/lxsession/LXDE-pi/autostart
, which will call
autostart-spotify-playing.sh. This will
hide the cursor, disable the screensaver and power management, and start
Chromium in kiosk mode after a delay to so the URL actually loads.
screen.php will need to be hosted on the Pi, and the URL added to your .env.production. It calls screen.sh, which the www-data user needs to call with sudo so the script has access to your user's .Xauthority file.
Create /etc/sudoers.d/screen
containing
www-data ALL=(ALL) NOPASSWD: /root/screen.sh on, /root/screen.sh off
Add a Home Assistant boolean entity to your .env.production. For example, I
have a helper entity that I toggle with a "when people are home" automation in
HomeKit which is named input_boolean.homekit_occupied
.
You will have to enable CORS in your Home Assistant configuration for the domain the React app is running on.
http:
cors_allowed_origins:
- http://localhost:5173
- https://spotify-playing
It may be helpful to use xdotool
to reload Chromium without needing to VNC
into the Pi. An example is the reload-chromium.sh
script.
Heavily inspired by Now Playing at chorus.fm.