ReTerminal-DM Web App Kiosk

Products & Technology Raspberry Pi
#1

Just thought I would chuck a little guide together to get a working HTML5 Kiosk on the ReTerminal-DM

hmi
hmi1920Ă—1440 194 KB

Main Features:

  • Webkit Browser Engine: supported by most platfoms as part of Safari compatibility.

  • Full Kiosk Mode: No desktop OS on this system, no other apps, no way to exit.

  • Hardware Acceleration: Panel PC hardware supported by linux is able to be utilised.

  • On Screen Keyboard: Critical missing piece of 99% of similar attempts. Auto opens and closes with focus on text entry elements.

  • Auto-Boot: System Boots on power on, no login and ready to go in 25seconds.

  • Auto Network Refresh: The system will refresh the page automatically when a network change is detected.

  • No Menus: No interface items at all besides the rendered webpage.

  • Touchscreen Support: Any touchscreen that works in linux is usable.

I have built and tested this on the Seeed Studios ReTerminal-DM.

This guide assumes you are able to work out simple tasks like setting an IP and editing a text file on linux.
Use this at own risk.

Installing Raspbian

Install a copy of the latest version of (6.1.21 or higher) Raspbian Lite OS, follow the manufacturer guide for the ReTerminal:

Don’t do the touchscreen orientation section.

** Critical steps here - Enable SSH, Set a username and password.

This should get you set up with a Pi that boots to a console login page with the username and password that you chose when uploading the image.

Setting Up the Kiosk

Log in to this console with SSH, this is now your base for all the commands on the unit.

Enter the following into the terminal:

$ sudo apt update

$ sudo apt install snapd

You will also need to reboot your device. This can be accomplished from the terminal (and from the desktop), but make sure you save any open documents first:

$ sudo reboot

After this, install the core snap in order to get the latest snapd.

$ sudo snap install core

core 16-2.45.2 from Canonicalâś“ installed

Now install Ubuntu Frame with the following command:

$ sudo snap install ubuntu-frame

On Raspbian, Ubuntu Frame does not start by default. To change this default run the following command:

$ sudo snap set ubuntu-frame daemon=true

Now install wpe-webkit-mir-kiosk:

$ sudo snap install wpe-webkit-mir-kiosk

Now we connect it to the display server:

$ sudo snap connect wpe-webkit-mir-kiosk:wayland

As per above, on Raspbian, wpe-webkit-mir-kiosk does not start by default. To change this default run the following command:

$ sudo snap set wpe-webkit-mir-kiosk daemon=true

Now we set the target url for your perspective session, which here is the demo of Inductive Automation’s Ignition SCADA .

$ sudo snap set wpe-webkit-mir-kiosk url=http://demo.inductiveautomation.com

Now start the service:

$ sudo snap start wpe-webkit-mir-kiosk

You should now see on screen the perspective session you linked to.

On Screen Keyboard

Next we configure the On Screen Keyboard:

$ sudo snap install ubuntu-frame-osk

Make sure it’s connected to the display server interface:

$ snap connect ubuntu-frame-osk:wayland

And make it a service:

$ sudo snap **set** ubuntu-frame-osk daemon=true

You can switch between light and dark mode with the theme option:

$ sudo snap **set** ubuntu-frame-osk theme=dark

$ sudo snap **set** ubuntu-frame-osk theme=light

Now we have a working system on the screen, and if you have a working touchscreen, it should be able to interact with the session as normal.

Cosmetic Fixes

On my system, the LCD was set up in portrait orientation, which is not the install direction for the unit, so to fix this we open up some settings.

$ sudo nano /boot/cmdline.txt

Use the arrow keys to navigate to the end of the line and add the following:

fbcon:rotate=1

Then we save and exit the file (+W , Y , )

(1 = Rotate Clockwise 90 degrees, 2 = 180, 3 = 270)

$ sudo reboot

Now your Pi should boot and display the screen in the right orientation.

You may notice that the system will always boot to a browser error saying “dns resolution failed”, This is because the system boots up and starts the browser before the network interface is connected and online.

To fix this, we do a little hack fix (There is likely a nice way to do this, but this works if a little messy).

$sudo nano /lib/dhcpd/hooks/01-Test

Now we add at the bottom of the file the following:


if [ $reason = “BOUND”] || [ $reason = “STATIC”];
then
    snap set wpe-webkit-mir-kiosk url=https://demo.inductiveautomation.com
fi

This effectively reloads the url every time the network either gets a new DHCP address or is configured with a Static IP, which happen every time you reconnect a network.

I have a bunch of other tweaks figured out, but this should get you started pretty well.

Limitations

One note of warning though, the Raspberry Pi has very limited processing power, and you will need to build any pages you want with optimisation in mind to keep your loading times down to a reasonable time.

2 Likes
#2

Im trying to apply this to my reTerminal DM, but I cant get the screen to rotate. I tried both
fbcon:rotate=1 in /boot/firmware/config.txt

and also tried adding tp_rotate=1 to /boot/firmware/config.txt

#3

This would work perfectly for my needs but I can’t get the screen on my ReTerminal-DM to rotate. I’ve updated cmdline.txt by adding fbcon:rotate=1 but still no luck. I’ve also tried both bullseye and bookworm.

#4

I was able to rotate the ReTerminal-DM screen with the following command but I still can’t get the touchscreen oriented correctly.

sudo snap set ubuntu-frame display="
layouts:
# keys here are layout labels (used for atomically switching between them)
# when enabling displays, surfaces should be matched in reverse recency order
  default:                         # the default layout
    cards:
    # a list of cards (currently matched by card-id)
    - card-id: 0
      DisplayPort-1:
        # (disconnected)
      DSI-1:
        # This output supports the following modes: [email protected], [email protected],
        # [email protected], [email protected], [email protected], [email protected], [email protected],
        # [email protected], [email protected], [email protected], [email protected], [email protected],
        # [email protected], [email protected], [email protected], [email protected], [email protected],
        # [email protected], [email protected], [email protected], [email protected], [email protected],
        # [email protected], [email protected], [email protected], [email protected], [email protected],
        # [email protected], [email protected], [email protected], [email protected]
        #
        # Uncomment the following to enforce the selected configuration.
        # Or amend as desired.
        #
         state: enabled        # {enabled, disabled}, defaults to enabled
         mode: [email protected]  # Defaults to preferred mode
         position: [0, 0]      # Defaults to [0, 0]
         orientation: right   # {normal, left, right, inverted}, defaults to normal
         scale: 1
         group: 0      # Outputs with the same non-zero value are treated as a single display
      DisplayPort-2:
        # (disconnected)
      HDMI-A-2:
        # (disconnected)
"
#5

Note on the touch screen, I had run the command to fix the touch screen orientation from the ReTerminal DM Flash OS Wiki. Once I deleted the entry it created in /etc/udev/rules.d/98-touchscreen-cal.rules the touch screen worked correctly.

1 Like