Setup Electron Kiosk App On Ubuntu 18.04

first.plymouth

[Plymouth Theme]
Name=First
Description=First boot splash theme
ModuleName=script

[script]
ImageDir=/usr/share/plymouth/themes/first
ScriptFile=/usr/share/plymouth/themes/first/first.script

kiosk.desktop

# /usr/share/xsessions/firefox.desktop
[Desktop Entry]
Name=Kiosk
Type=Application
Exec=/home/kiosk/kiosk.sh
X-GNOME-Autostart-enabled=true

kiosk.sh

#!/bin/bash
 
# Run this script in display 0 - the monitor
export DISPLAY=:0
 
# Hide the mouse from the display
unclutter &
 
# If Chromium crashes (usually due to rebooting), clear the crash flag so we don't have the annoying warning bar
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' /home/kiosk/.config/chromium/Default/Preferences
sed -i 's/"exit_type":"Crashed"/"exit_type":"Normal"/' /home/kiosk/.config/chromium/Default/Preferences
 
# Run Chromium and open tabs
/usr/bin/chromium-browser --window-size=1920,1080 --kiosk --window-position=0,0 http://localhost:3030/ &
 

lightdm.conf

# /etc/lightdm/lightdm.conf
[SeatDefaults]
autologin-user=kiosk
autologin-user-timeout=0
user-session=ubuntu
greeter-session=unity-greeter
allow-guest=false

Makefile

.PHONY: install uninstall test set-default

test:
	sudo apt install plymouth-x11
	sudo plymouthd ; sudo plymouth --show-splash ; for ((I=0; I<10; I++)); do sleep 1 ; sudo plymouth --update=test$I ; done ; sudo plymouth --quit

uninstall:
	rm -rv /usr/share/plymouth/themes/first || true

install: uninstall
	mkdir /usr/share/plymouth/themes/first
	cp -v *.script *.plymouth *.png /usr/share/plymouth/themes/first/

set-default:
	plymouth-set-default-theme -R first

Setup-Kiosk-Mode-Without-Electron.md

Update & Upgrade

sudo apt update && sudo apt upgrade -y

Create kiosk User Account

sudo adduser kiosk

Install Required Packages

• Chromium is the Chrome browser but with much more options.
• Unclutter removes the mouse cursor from the screen, giving it a clean look.
• xdotool can manipulate on screen elements using a virtual keyboard. We use it to change tabs in Chromium.

sudo apt-get install -y chromium-browser unclutter xdotool

Setup Auto Login

Now we can setup the auto login process. We need the user Kiosk to auto login on every reboot.

sudo nano /etc/lightdm/lightdm.conf and add lightdm.conf

sudo mkdir /etc/lightdm/lightdm.conf.d && sudo nano /etc/lightdm/lightdm.conf.d/50-myconfig.conf and add:

[SeatDefaults]
autologin-user=kiosk

Setup kiosk.sh Script

Run sudo mkdir /home/kiosk/.config/autostart && sudo nano /home/kiosk/.config/autostart/kiosk.desktop and add:

[Desktop Entry]
Type=Application
Name=Kiosk
Exec=/home/kiosk/kiosk.sh
X-GNOME-Autostart-enabled=true

Then make the script executable by running chmod +x kiosk.sh

Copy kiosk.sh script to /home/kiosk/

Managing the system after it’s setup

x11vnx and autosshto automatically setup an SSH tunnel from the system to your centralized server, allowing you to SSH into the device and even VNC to the monitor without needing to know the IP. Very useful!

If you make any changes and want to log Kiosk out without rebooting, I’ve found that this command works. This will kill the kiosk.sh script and restart the Windows service which will log out and log in the kiosk user.

sudo killall kiosk.sh && sudo service lightdm restart How to exit Kiosk mode

Ubuntu Unity UI allows you to press the Windows key on the keyboard to open the launcher. Once the launcher is open, type terminal. Once in the terminal type

sudo killall chromium-browser or press Alt+F4 to close Chromium.

The kiosk.sh script will still be running, this script has the xdotool keydowns running (see above). We need to kill that too with sudo killall kiosk.sh.

To remove it all together, refer to the above to remove the /home/kiosk/.config/autostart/kiosk.desktop file.

Setup-NodeJs-Electron.md

Install Nodejs v8.11.3 & NPM v5.6.0

sudo apt install -y curl git

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

To compile and install native addons from npm you may also need to install build tools:

sudo apt-get install -y build-essential

# Or
sudo apt-get install gcc g++ make

Install Electronjs v2.0.4

npm install -g electron@latest

# Required by Chrome 42
sudo apt-get install libgconf-2-4

Install Utility

Auto Shutdown, Suspend, Reboot: https://github.com/deragon/autopoweroff

sudo dpkg -i autopoweroff*.deb

Install

Setup-OS.md

Update & Upgrade

sudo apt update && sudo apt upgrade -y

Display Server + Windows Manager: sudo apt install xorg openbox -y

Note: I tried to install openbox with --no-install-recommends but half of the screen (right side) was black.

Disable power saving:

Settings > Power > Disable

Auto login

Outlook

Hide taskbar

Change Desktop Background

Hide mouse cursors

sudo apt-get install -y unclutter

Unclutter removes the mouse cursor from the screen, giving it a clean look.

Customize Logo Boot, Splashscreen

Change Ubuntu Logo -> copy new logo replace original logo at /usr/share/plymouth/ Copy First-Themes Folder to /usr/share/plymouth/themes

sudo update-alternatives --install /usr/share/plymouth/themes/default.plymouth default.plymouth /usr/share/plymouth/themes/first/first.plymouth 100

# Choose the theme
sudo update-alternatives --config default.plymouth
sudo update-initramfs -u

#To fix the delayed loading of the splash:

sudo -s
echo FRAMEBUFFER=y >>/etc/initramfs-tools/conf.d/splash
update-initramfs -u

# Testing without rebooting
sudo apt install plymouth-x11
sudo plymouthd ; sudo plymouth --show-splash ; for ((I=0; I<10; I++)); do sleep 1 ; sudo plymouth --update=test$I ; done ; sudo plymouth --quit