Waveshare DSI Screen

Let's start by setting up the OS via Raspberry Pi Imager

To make thing easier I configure SSH, Wifi, country, language and keyboard settings in the "Advanced Settings" menu before flashing.

After attaching the pi to the screen and plugging in the DSI cable I connect to it via SSH. (I could also plug in a keyboard and a hdmi screen to the pi). Since the downloaded image is not always fully up-to-date we run a bit apt magic and reboot:

sudo apt update
sudo apt full-upgrade
sudo reboot

After that we install the waveshare drivers for the screen by following the wiki

sudo apt install git
git clone https://github.com/waveshare/Waveshare-DSI-LCD
cd Waveshare-DSI-LCD

Since there are multiple versions in the repository for different kernel versions, a quick uname -a reveals that we need version 5.15.84

cd 5.15.84 #kernel version
cd 32 #32bit
sudo bash ./WS_xinchDSI_MAIN.sh 79 I2C0
sudo reboot

Looking good! but the DSI screen has the wrong rotation by default. The wiki states to add video=DSI-1:400x1280M@60,rotate=270 to the /boot/cmdline.txt file to rotate the screen, but this results in a bit of a mess:

The correct command is video=DSI-1:400x1280e,rotate=270 sadly this has not been corrected in the wiki yet.

While it is possible to launch a chromium browser from the console with the use of xserver and for example openbox, up to today I was not able to rotate the opened window.

Desktop Environment

So I decided to install a relatively lightweight desktop environment, xfce4

sudo apt install xserver-xorg chromium-browser xfce4 xfce4-terminal xfce4-power-manager

After that, reboot the pi, start raspi-config to change the boot configuration

The freshly installed dekstop UI allows me to rotate the screen very easily, I then used the power manager to disable the automatic sleep mode and configure a reasonable display sleep time.

To always hide the cursor I edit /usr/share/lightdm/lightdm.conf.d/01_debian.conf and add xserver-command=X -nocursor

Now we create our kiosk script nano ./kiosk.sh

#!/bin/sh

# Clean up
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/chromium/Default/Preferences
chromium-browser --disable-infobars --kiosk 'http://your-url-here'

# Launch
chromium-browser --disable-infobars --kiosk 'https://coding.kiwi'

and give it a try with ./kiosk.sh

And to finish things up we add it as an autostart script

cd ~/.config
mkdir autostart
nano autostart/kiosk.desktop

with the contents:

[Desktop Entry]
Type=Application
Hidden=false
X-GNOME-Autostart-enabled=true
Comment=Start kiosk chrome
Name=chromiumstart
Exec=/home/pi/kiosk.sh

Brightness control

There is a Brightness Control Application from waveshare but brightness can also be controlled by writing to a file

sudo su root
echo 100 > /sys/waveshare/rpi_backlight/brightness

the value can be 0 = full brightness to 255 = off, to allow a script to write to the file we add write perms

sudo chmod a+w /sys/waveshare/rpi_backlight/brightness

Running a nodejs app

First we install the latest node lts version

curl -sL https://deb.nodesource.com/setup_18.x | sudo bash -
sudo apt install nodejs

Then we install pm2

sudo npm i -g pm2

So we can launch our ecosystem.config.yaml file

apps:
  - name : 'myapp'
    script: './src/server/index.js'

pm2 start ecosystem.config.yaml #launch the app
pm2 startup #enable pm2 auto startup
pm2 save #save the process list