WebKontrol

WebKontrol remote browser - An intuitive web kiosk with a web-based admin panel.

I originally developed WebKontrol for the live-streaming industry. It allows me to display a clock or use something like stagetimer.io. This can also be implemented in an information display or a touchscreen kiosk.

Warning

WebKontrol is not completely finished, and the code is imperfect. I will continue developing this. I have tested the platform to ensure it is stable.

Getting started

I am planning to sell pre-configured boxes with SDI outputs in my store. If you are interested, contact me.

Install

WebKontrol is Node-based, which means it can run on a lot of operating systems. It is tested on Windows 11 and Raspberry Pi OS Full on the Raspberry Pi 2 and 4.

Debian

Update OS

sudo apt-get update &&
sudo apt-get upgrade -y

Dependencies

sudo apt install git -y &&
sudo apt install nodejs -y &&
sudo apt install npm -y &&
sudo apt install chromium-browser -y &&
sudo npm install --global tsx -y &&
sudo npm install --global yarn -y

Code

Make a directory:

sudo mkdir /opt/WebKontrol

Clone and install the code:

sudo git clone https://github.com/IJIJI/WebKontrol.git /opt/WebKontrol --branch V0.5.0 &&
cd /opt/WebKontrol/src &&
sudo yarn

To start WebKontrol you can run this:

sudo yarn start

You can now access WebKontrol from your browser! When connected to a display, it will initially list its IP Address(es).

Raspberry Pi OS (Full)

The above config still works on Raspberry Pi OS but requires a few more steps. These steps are tested for Raspberry Pi OS. A different OS may still require extra steps.

Give the right permissions

Open access to port 80.

sudo setcap 'cap_net_bind_service=+ep' `which node`

Give access to the config file.

sudo chmod a+rwx /opt/WebKontrol/src/config.json

Launch WebKontrol

To launch the script you may have to do so with a custom chromium location as Puppeteer does not always recognize that automatically. Run the script by adding the location. You can find that location by running: which chromium-browser

yarn start --chromium=/usr/bin/chromium-browser

Autostart

Note

The autostart part of this tutorial will only work for the X11 desktop. To know what version you are using, run echo $XDG_SESSION_TYPE on the desktop environment. To switch to X11, run: `sudo raspi-config'. Go to option 6, then A6 'Wayland toggle'. Set it to X11.

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

Add the script to the end of the file. Your location may differ.

#/etc/xdg/lxsession/LXDE-pi/autostart
@yarn --cwd /opt/WebKontrol/src start --chromium=/usr/bin/chromium-browser

Make sure to save the file. Changes will take place on reboot.

Auto-hide the cursor

sudo apt-get install unclutter -y

Add the unclutter script to the end of the startup file. You can change the timeout. Here, it is set to 2:

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

#/etc/xdg/lxsession/LXDE-pi/autostart
@unclutter -idle 2

Make sure to save the file. Changes will take place on reboot.

Disable screen blanking

By default the Raspberry Pi display will go to sleep after some time. To disable this, open raspi config:

sudo raspi-config

Select option 2 Display, then D2 Screen Blanking. Disable screen blanking. Your display should now stay on.

Use

Once you have started the script, you should see the splash screen appearing. It lists the IP addresses on which the web interface is available. It should look something like this:

Once you navigate to one of the IP addresses you should see the web interface.

In the admin interface, there are four buttons and one input.

• View: Opens the current URL in a new tab.
• Reload: Reloads the browser on the WebKontrol instance. It also returns to the set URL. If you the puppet and then reload, it will return to the originally requested URL.
• View Internal Clock: Opens the internal clock in a new tab.
• Internal Clock: When pressed, this fills the input with the link to the internal clock.
• Input: Here you can enter the URL you wish to display on the WebKontrol instance.

No connection

If the page that is requested fails, WebKontrol will retry every 30 seconds. While it waits it will display a page with the current time and a countdown.