Turn your Raspberry Pi into web dashboard
Recently I worked on a task to turn the Raspberry Pi into a web dashboard. The plan was to connect the RPi boards to TV screens to display production-related information. The actual website was hosted on AWS and RPi’s job was to open the browser and display the website.
I had to visit different websites and forums to make it work. So I am trying to put all the information in one place.
Requirements
- On powerup, the RPi should be auto-logged in.
- A browser with predefined URL running in kiosk mode (full screen + no toolbar, address bar, menu etc.)
- VNC should be enabled, to allow people to connect to the RPi and interact with the website (This is useful during stand up calls)
- Make a distributable image to allow clones of RPi and to display different dashboards only by changing the predefined URL
Prerequisites
- Raspberry Pi board
- MicroSD card with “Raspberry Pi OS with desktop and recommended software” (Chromium browser and VNC Server software are included in the image) installed. Download
Task 1) Auto login to RPi
Raspberry Pi OS image pre configured to auto-login for default user pi.
Don’t forget to change the default password for security reasons.
Task 2) Open the browser in kiosk mode with predefined URL
First we need to create the script that runs on startup to open the browser
open the terminal and create autostart file
nano ~/.config/lxsession/LXDE-pi/autostartCode language: Java (java)if directory structure is not present , create it first with below command
mkdir -p ~/.config/lxsession/LXDE-piCode language: Java (java)copy below script and save the file by by pressing ctrl+o, enter and ctrl + x
@xset s off
@xset -dpms
@xset s noblank
@chromium-browser --kiosk --start-fullscreen news.google.comCode language: Java (java)@xset s off – disables the screensaver@xset -dpms – disables display power management so that screen does not switch off due to idle time@xset s noblank – disables the blank screensaver@chromium-browser --kiosk --start-fullscreen news.google.com – opens the browser in kiosk mode in full screen with given URL
Next, to display the latest information, we need to refresh the browser at regular intervals. We will create a shell script to auto-refresh the page. we use xdotool package to refresh the chrome browser. To install the xdotool, run the following command.
sudo apt-get install xdotoolCode language: Java (java)create the auto-refresh shell script in pi/home folder
nano chrome_autorefresh.shCode language: Java (java)copy the following script into the file. The script refreshes the page for every five minutes by simulating ctrl+F5 key press
#!/bin/bash
# This will only set up the DISPLAY variable for one command
DISPLAY=:0 xdotool key "ctrl+F5"
# This will set up the DISPLAY variable for every command executed on this terminal,
# and child processes spawned from this terminal
export DISPLAY=:0
while true; #create an infinite loop
do
xdotool key "ctrl+F5" &
sleep 300 #refresh time in seconds so 300 = every 5 mins
doneCode language: Java (java)Now set the permissions for the file
sudo chmod 755 chrome_autorefresh.shCode language: Java (java)sudo chmod +x chrome_autorefresh.shCode language: Java (java)We need to run this script after opening the browser. We will update the autostart script to run this script
@xset s off
@xset -dpms
@xset s noblank
@chromium-browser --kiosk --start-fullscreen news.google.com
@/home/pi/chrome_autorefresh.shCode language: Java (java)If you restart the system, chromium browser will open in full screen but it will not be refreshed every 5 mins. We need to run the chrome_autorefresh script under root privileges
Now ,we will create another script to provide root privileges to run the script
Create root privileges script in pi/home folder
nano xauth_root.shCode language: Java (java)Now set the execution permissions for the file
sudo chmod 755 xauth_root.shCode language: Java (java)copy below script to the file
#!/bin/bash
touch /root/.Xauthority
xauth merge /home/pi/.Xauthority
export XAUTHORITY=/root/.XauthorityCode language: Java (java)The above script needs to be run before chrome_autorefresh script.
Lets update autostart script
@xset s off
@xset -dpms
@xset s noblank
@chromium-browser --kiosk --start-fullscreen news.google.com
@/home/pi/xauth_root.sh
@/home/pi/chrome_autorefresh.shCode language: Java (java)If you restart the system, chromium browser will open in full screen and refreshed every 5 mins
If the RPi is powered off abruptly, chromium browser will show a crash bubble on the screen which could annoy the users
To suppress the crash bubbles we will make 2 files immutable. You will need to open Chromium browser once to create these files on the disk.
Open the terminal and run following 2 commands
sudo chattr +i ~/.config/chromium/'Local State'Code language: Java (java)sudo chattr +i ~/.config/chromium/Default/PreferencesCode language: Java (java)Chromium writes its shutdown status to 2 files ‘~/.config/chromium/Default/Preferences’ ~/.config/chromium/’Local State’ “exit_type” and “exited_cleanly fields maintains that information.
In normal scenario info will be “exit_type”: “Normal”
“exited_cleanly”: true
If the browser crashes they will look like
“exit_type”: “Crashed”
“exited_cleanly”: false
By making ‘Local State’ and ‘ ‘Preferences’ files immutable , we are not writing crash state to files.
One more option to avoid crash bubble is to open the browser in incognito mode but it disables cookies and caches. To open the browser in incognito mode change chromium open command in autostart script like below
@chromium-browser --kiosk --incognito --start-fullscreen news.google.comCode language: Java (java)Other options I tried to suppress the crash bubble which did not work for me
I tried to open the browser with following options in autostart script
chromium-browser --kiosk --no-default-browser-check --no-first-run --disable-infobars --disable-session-crashed-bubble "http://some_url/"Code language: Java (java)Task 3) Configuring VNC server
RPi OS image comes with RealVNC server pre-installed. It is not configured to run on startup . you need to enable it manually from RPi Configurations.
- Boot into graphical desktop
- Select Menu > Preferences > Raspberry Pi Configuration
- Open Interfaces tab
- Ensure VNC is Enabled
RealVNC server can be accessed from system tray
Note: If you are using RealVNC for commercial purpose you have to get the licence to use it. For non-commercial purposes, you can continue to use RealVNC server for free. You can get the home subscription licence by visiting this link.
For connecting to the RPi using VNC you need to know the IP address of it, you can get the IP address of RPi by entering ifconfig command on the terminal
ifconfigCode language: Shell Session (shell)
Now open VNC viewer from another computer and enter the IP address of RPi
If you are trying to connect to RPi using VNC viewer from another computer you might get following error
No configured security type is supported by 3.3 viewer
To fix this you’ll need to change the way RealVNC authenticates the VNC client. Follow the steps below:
- Open the RealVNC server UI
2. Click on the Hamburger icon ( Highlighted in red) on the top right corner
3. Select the options menu
4.This will open VNC Server Options window
5. In the left-side menu select security option and on the right side make sure Authentication is set to ‘VNC Password’ and click on Apply button
6. . RealVNC will prompt for entering the VNC session password. Enter the password and confirm password and click on ok button
Now when you try to connect to RPi using VNC Viewer, it will prompt for VNC session password. Enter the given password to connect to RPi.
If you want to use RPi for commercial purpose, you can install x11VNC package, which is a free alternative to RealVNC
Open the terminal window and follow steps below to configure
- Find installed RealVNC package name
dpkg --get-selections | grep vnc Code language: Java (java)2. Uninstall RealVNC
sudo apt-get remove realvnc-vnc-serverCode language: Java (java)3. Install x11vnc
sudo apt-get install x11vncCode language: Shell Session (shell)4. Set the VNC session password. It will prompt for password, confirm password and store password.
x11vnc –storepasswdCode language: Shell Session (shell)5. For testing, enter below command on terminal to start the VNC server
x11vnc -display :0 -usepwCode language: Java (java)6. Open another terminal and use ifconfig command to find the ip address of RPi
ifconfigCode language: Shell Session (shell)7. Use any VNC viewer software to connect to RPi board using IP address and VNC session password.
Next we need to make the x11VNC server to run on boot
First create autostart folder in .config folder
sudo mkdir ~/.config/autostartCode language: Java (java)Next, create x11vnc-autostart.desktop script
sudo nano ~/.config/autostart/x11vnc-autostart.desktopCode language: Java (java)Copy below script to the file and save the file and restart RPi
[Desktop Entry]
Encoding=UTF-8
Type=Application
Name=X11VNC
Exec=x11vnc -forever -usepw -display :0 -ultrafilexfer
StartupNotify=false
Terminal=false
Hidden=falseCode language: Java (java)x11VNC server will automatically starts with every boot.
Task 4) Make redistributable image
I am still working on this task. Once I am done I will update you with another blog post.
Update : I covered this requirements in part-2 of this blog series
Useful Info
When you open browser in kiosk mode you can not access any other application. If you want to access the terminal mode press Ctrl+Alt+F4. You need to login to execute commands.
To disable the auto start kiosk mode, go to terminal mode and log in with userid and password and run following script and restart
mv ~/.config/lxsession/LXDE-pi/autostart ~/.config/lxsession/LXDE-pi/autostart.bak Code language: Java (java)To enable run the below script
mv ~/.config/lxsession/LXDE-pi/autostart.bak ~/.config/lxsession/LXDE-pi/autostart Code language: Java (java)Referenced websites
https://www.instructables.com/id/Remote-Control-Your-Raspberry-Pi/
https://superuser.com/questions/461035/disable-google-chrome-session-restore-functionality
https://www.raspberrypi.org/forums/viewtopic.php?t=10165