This is a simple project I made for an old Raspberry Pi 4 Model B. Sorry in advance if I get any of the information wrong, or if this doesn’t work on every version of the Raspberry Pi.
This was built specifically for a Raspberry Pi 4 Model B with an 800x480 touchscreen that I bought from Temu, but it should work on other setups with little to no modification.
Demo of PiBoard running on a Browser (not on pi)
-
Raspberry Pi (I used a Pi 4 Model B, but this should run on lower-spec models as well.)
-
Touchscreen (optional) The dashboard was designed for a Pi with a screen, but it can still be used without one.
-
Spotify Premium subscription (optional) The Spotify page was built around Premium features, but the rest of the dashboard will still work without it.
To begin, go to https://developer.spotify.com/ and create a new app. Give it a name and a description, then add the following as a Redirect URI:
http://127.0.0.1:8888/callback/
If you want to use a different redirect URI, just remember to update it later in config.env.
Make sure Web API is checked, then save the app.
Now head over to your Raspberry Pi and install Node.js:
sudo apt install nodejs npm
Once that's installed, clone the repository:
git clone https://github.com/BoardApple/PiBoard
Before running anything, you’ll need to set up the configuration file.
PiBoard uses a simple environment file to keep all configuration in one place.
In the project root you’ll find a file called config.env-example. To use it:
- Change into the PiBoard directory
- Make a copy of the file
- Remove
-examplefrom the name so it becomesconfig.env
cd PiBoard
cp config.env-example config.env
Open config.env and update the following values:
SPOTIFY_CLIENT_ID→ Client ID from your Spotify Developer appSPOTIFY_REDIRECT_URI→ Redirect URI (only change this if you changed it in the Spotify app settings)SPOTIFY_OVERLAY_ENABLED→ Enable or disable the small Spotify overlay on the first page (true or false)
To enable the weather overlay, you’ll need a free WeatherAPI account.
- Go to https://www.weatherapi.com and create a free account
- Once logged in, copy your API Key from the dashboard
Then update the following values in config.env:
WEATHER_ENABLED→ Turn weather section on or off (true or false)WEATHER_API_KEY→ Your WeatherAPI keyWEATHER_LOCATION→ Your location (city name, town, or postcode)
You can also enable or disable the power button in the top right:
POWER_BUTTON_ENABLED→ Enable or disable the power button (true or false)
You can enable or disable the refresh button in the top left:
REFRESH_BUTTON_ENABLED→ Enable or disable the refresh button (true or false)
You can enable or disable a little system overlay in the top right that display's CPU and RAM usage by changing the value in config.env:
SYSTEM_OVERLAY_ENABLED→ Enable or disable the system info overlay (true or false)
To change the date and time settings, edit the following values in config.env:
TIMEZONE→ Timezone in IANA format (e.g. Europe/London, America/New_York)LOCALE→ Locale used for date and time textTIME_24H→ Choose between a 24-hour clock or 12-hour clock (trueorfalse)DATE_FORMAT→ Date display format. Supported values:dddd= weekday name (Sunday)Do= date with ordinal (10th)MMMM= full month name (October)YYYY= year (2024)
List of supported locale codes:
https://saimana.com/list-of-country-locale-code/
Once these values are filled, save the file. The server will automatically load them on startup.
Now change into the project directory and install the required dependencies:
cd PiBoard
npm install
This may take a couple of minutes. Once it finishes, everything needed to run the dashboard will be installed.
To start the server manually, run:
node server.js
Then open a browser and go to:
http://127.0.0.1:8888/
From here:
- Double-tap the screen (or click the second button at the top) to open the Spotify page
- Click Connect to Spotify or go to /login and go through the authorization steps
Once that’s finished, start playing music on any other device and you’ll have a simple Spotify media controller running on your Pi.
If you want the server to start automatically and open the dashboard when the Pi boots, follow the steps below.
Create a file called run.sh (you can place this anywhere):
nano ~/run.sh
Add the following:
(Make sure to change ~/PiBoard to wherever you saved it)
#!/bin/bash
cd ~/PiBoard
node server.js &
sleep 10
DISPLAY=:0 firefox -kiosk http://127.0.0.1:8888
Save the file and exit, then make it executable:
(Make sure to change ~/run.sh to wherever you saved the script)
chmod +x ~/run.sh
Now create a systemd service file so this runs automatically on boot:
sudo nano /etc/systemd/system/piboard.service
Add the following:
Make sure to update these values:
pi- Change to your username/home/pi/run.sh- Change to wherever you saved the script
[Unit]
# PiBoard dashboard startup service
Description=PiBoard Startup Script
# Wait for the desktop environment and network to be ready
After=graphical.target network-online.target
Wants=network-online.target
[Service]
# Simple service that runs continuously
Type=simple
# Run as the user (required for Firefox/X access)
User=pi
# Specify the display for kiosk mode
Environment=DISPLAY=:0
# Use the current X session authentication
Environment=XAUTHORITY=/home/pi/.Xauthority
# Start the PiBoard launch script
ExecStart=/home/pi/run.sh
# Restart the service if it crashes
Restart=on-failure
RestartSec=5
[Install]
# Start when the graphical session is loaded
WantedBy=graphical.target
Save and exit, then reload and enable the service:
sudo systemctl daemon-reload
sudo systemctl enable piboard.service
Reboot your Raspberry Pi:
sudo reboot
Once the Pi boots, the server will start automatically and the dashboard will open in kiosk mode.
Below are a few resources I found helpful while working on this project:
-
Autostarting a bash script on boot
https://linuxconfig.org/how-to-autostart-bash-script-on-startup-on-raspberry-pi -
Helpful forum thread for testing over SSH (
DISPLAY=:0)
https://forums.raspberrypi.com/viewtopic.php?t=189006 -
Project inspiration
https://github.com/ansonlichtfuss/spotify-desk-thing -
Not really helpful, but entertaining while trying to get everything working:
- Added System Info Overlay (CPU / RAM)
- Added System Info Page (CPU / RAM / Uptime)
- Added Spotify Overlay
- Added Extra Buttons to Spotify Media Control Page (Like, Loop, Mute)
- Added Refresh Button to Top Left
- Changed Spotify Buttons to SVG Icons
- Removed Blank "Photo" Page
- Added Shutdown Button
- Changed Hardcoded Values to be Stored in a config.env File
- Added Toggleable Values in config.env (Weather Overlay, Shutdown Button)
- Updated Weather API
- Added Working Spotify Calls
- Added Updated Fonts
These should hopefully be updated in the next release however until then these are the current bugs:
- After leaving it running while nothing is playing, token rotation seems to break
- After leaving it running for a while while not playing, node server shutsdown
I know these are not the best solutions however they work until this is updated, sorry
Reboot the pi, this can either be done by clicking the button on the side and selecting "reboot" or by opening a terminal either on the pi or through SSH and running the reboot command
sudo reboot
Free and open source, use for whatever you want ( ദ്ദി ˙ᗜ˙ )