Open main menu

DAVE Developer's Wiki β

XELK-TN-001: Using Chromium browser as an Embedded GUI

Info Box
Axel-04.png Applies to Axel Ultra
Axel-02.png Applies to AXEL ESATTA
Axel-lite 02.png Applies to Axel Lite
SBC-AXEL-02.png Applies to SBC AXEL


200px-Emblem-important.svg.png This application note has been validated starting from the XELK 4.0.0 kit version. 200px-Emblem-important.svg.png

Contents

HistoryEdit

Version Date XELK version Notes
1.0.0 Oct 2019 4.1.0

IntroductionEdit

Starting from XELK 4.0.0 a new root file system image can be created using Yocto recipes provided by DAVE's XELK BSP.

The new axel-image-x11-browser Yocto image includes the recipes for adding the LASP packages (Linux, Apache, SQLite and PHP):

  • backend with apache2 and PHP
  • frontend with Chromium browser with HTML5 and Javascript
  • database SQLite

ArchitectureEdit

The new root file system can be a complete solution for creating GUI (Graphical User Interface) using popular knowledge as per designing HTML web pages. The apache2 web server is configured for starting at boot time: the web pages, stored on local file system, will be directly shown on the Chromium browser which is configured for looking on localhost interface.

Here below a command line example for chromium using this configuration:

google-chrome --test-type --kiosk -disable-gpu --start-maximized http://localhost:80/phpinfo.php

How to configureEdit

Web serverEdit

Apache2 is used as a web server let the embedded system to provide the HTML pages used for creating the GUI. Once installed into the rfs, apache2 will be automatically started using the following configuration file:

/etc/apache2/httpd.conf

It is possible to see that apache2 uses the web page present into the /usr/share/apache2/htdocs directory:

root@imx6qxelk:~# cat /etc/apache2/httpd.conf | grep htdocs
DocumentRoot "/usr/share/apache2/htdocs"
<Directory "/usr/share/apache2/htdocs">
root@imx6qxelk:~#

Graphical backendEdit

Chromium browser has been built on top of X11 backend: the Yocto build automatically starts the X11 Desktop which should be avoided for having a clean boot with only the browser displayed.

For this purposes, the desktop will be displayed and the X11 server will be started only as backend:

root@imx6qxelk:~# systemctl disable xserver-nodm.service
Removed /etc/systemd/system/multi-user.target.wants/xserver-nodm.service.
root@imx6qxelk:~# 

Then, the new X service will be created and started

root@imx6qxelk:~# cat /etc/systemd/system/X.service
[Unit]
Description=X
After=network.target
StartLimitIntervalSec=0

[Service]
Type=simple
Restart=always
RestartSec=1
User=root
ExecStart=/usr/bin/X -nocursor

[Install]
WantedBy=multi-user.target
root@imx6qxelk:~# systemctl enable X
Created symlink /etc/systemd/system/multi-user.target.wants/X.service → /etc/systemd/system/X.service.
root@imx6qxelk:~#

ChromiumEdit

In the same way of the web server, chormium can be started using a proper service:

root@imx6qxelk:~# cat /etc/systemd/system/browser.service
[Unit]
Description=ChromiumBrowser
After=network.target
StartLimitIntervalSec=0

[Service]
Type=simple
Restart=always
RestartSec=1
User=root
ExecStart=/home/root/browser.sh

[Install]
WantedBy=multi-user.target

and a script which will be started at boot time:

root@imx6qxelk:~# cat browser.sh
#!/bin/bash

export DISPLAY=:0

google-chrome --test-type --kiosk -disable-gpu --start-maximized http://localhost:80/phpinfo.php
root@imx6qxelk:~#

As per the command line parameters, chromium is started with the following properties:

  • Full screen mode: --start-maximized
  • Kiosk mode: --kiosk
  • removing warning popus: --test-type

keyboardEdit

For touch screen interaction, it is possible to install a Virtual Keyboard available on the chrome Google store. This is very easy starting chrome on the proper URL and then installing it:

root@imx6qxelk:~# google-chrome https://chrome.google.com/webstore/detail/virtual-keyboard/pflmllfnnabikmfkkaddkoolinlfninn

ResultsEdit

Chrome browser started with its home page:

 


Use case #1: PHPEdit

For demonstration purposes the PHP info page is loaded as the home page for our web server running on the system:

root@imx6qxelk:~# cat /usr/share/apache2/htdocs/.htaccess
DirectoryIndex phpinfo.php
root@imx6qxelk:~# cat /usr/share/apache2/htdocs/phpinfo.php
<?php

phpinfo();

?>
root@imx6qxelk:~#

In this way, the PHP info page is shown when the web browser is started on localhost.

 

Use case #2: eZ Server MonitorEdit

A useful application demostrating PHP capabilities is the eZ Server Monitor: it is a lightweight and simple dashboard for Linux machine.

It uses PHP scripts for collecting the server status/information and displaying them on an embedded web page.

   

eZ Server Monitor running on NXP iMX6DL