We want web server with javascript, Cascading Style Sheets (CSS) and Common Gateway Interface (CGI) control.

Table of Contents lighhtpd jQuery Simple page HTML Sending commands Updating buttons

Install lighttpd and FastCGI :

sudo apt update
sudo apt install -y lighttpd
sudo lighttpd-enable-mod fastcgi
sudo service lighttpd force-reload
sudo service lighttpd status

Clone the repository in ~/Controls such in order to have the following commands working (or adapt the constant):

su control
CONTROL_BASE_DIR=~/Controls
mkdir -p $CONTROL_BASE_DIR
cd $CONTROL_BASE_DIR
git clone https://github.com/fcorthay/web-control.git
WEB_CONTROL_BASE_DIR=~/Controls/web-control
ls -l $WEB_CONTROL_BASE_DIR

Change the server's root directory by editing /etc/lighttpd/lighttpd.conf (adapt):

#server.document-root        = "/var/www/html"
server.document-root        = "/home/control/Controls/web-control"

#server.port                 = 80
server.port                 = 8001

Restart the server to reflect the new configuration:

sudo service lighttpd restart

Give the web server user access to the files:

sudo usermod -a -G users www-data
groups www-data
sudo chgrp -R users $WEB_CONTROL_BASE_DIR

jQuery is a JavaScript library which simplifies the writing of the web pages. It provides, under others, a simple instanciation of buttons and sliders.

The repository comes with jquery-3.7.1.min.js which has been renamed as jquery.js. This allows to download a new version of jQuery, rename it in the same way and use it without any change in the HTML code.

The file Test/singleLight.html provides a page with an SVG graphics (a rectangle) and a button which toggles its icon on every click.

Navigate to it with a web browser (adapt server name) and test it:

http://persephone.local:8001/Test/singleLight.html

In Firefox or Chrome, pressing Ctl-Shift-C opens the developer tools. The Console tab shows the log, with a new line every button click.

Sending commands is done via a PUT request to the xPL REST server. In the HTML file, the constant homeControlUrl has to be adapted to the installation of the xPL control system.

Obviously, the sendCommand function can be updated to use other control systems.

Updating the buttons can be done with the help of polling or by listening to a socket, e.g. with a WebSocket.

The choice here has been to poll the state with GET requests to the xPL REST server.

Here also, the updateValue function can be modified to work with other control systems.