Changes

Jump to: navigation, search

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

1,984 bytes added, 14:24, 8 October 2020
no edit summary
{{AppliesToAxelEsatta}}
{{AppliesToAxelLite}}
{{AppliesToAXEL Lite TN}}
{{AppliesToSBCX}}
{{InfoBoxBottom}}
|-
|1.0.0
|Sep Oct 2019|[[Axel_Embedded_Linux_Kit_(XELK)#XELK_4.01.0|4.01.0]]
|
|-
Starting from [[Axel_Embedded_Linux_Kit_(XELK)#XELK_4.0.0|XELK 4.0.0]] a new root file system image can be created using Yocto recipes provided by DAVE's XELK BSP.
The new <code>axel-image-x11-browser</code> Yocto image includes the recipes for adding the following '''LASP''' packages(Linux, Apache, SQLite and PHP):
* backend with apache2 and PHP* frontend with Chromium browserwith HTML5 and Javascript* apache2 web server* PHP with apache2 plugindatabase SQLite
== Architecture ==
== How to configure ==
 
=== Web server ===
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, <code>apache2</code> 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 backend ===
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.
Dor For this pruposespurposes, the desktop will be displayed and the X1 X11 server will be started only as backend:
root@imx6qxelk:~# systemctl disable xserver-nodm.service
root@imx6qxelk:~# systemctl enable X
Created symlink /etc/systemd/system/multi-user.target.wants/X.service → /etc/systemd/system/X.service.
root@imx6qxelk:~#  === Chromium ===In the same way of the web server, chormium can be started using a proper service: <pre>root@imx6qxelk:~# cat /etc/systemd/system/browser.service[Unit]Description=ChromiumBrowserAfter=network.targetStartLimitIntervalSec=0 [Service]Type=simpleRestart=alwaysRestartSec=1User=rootExecStart=/home/root/browser.sh [Install]WantedBy=multi-user.target</pre> and a script which will be started at boot time: <pre>root@imx6qxelk:~# cat browser.sh#!/bin/bash export DISPLAY=:0 google-chrome --test-type --kiosk -disable-gpu --start-maximized http://localhost:80/phpinfo.phproot@imx6qxelk:~#</pre> As per the command line parameters, chromium is started with the following properties: * '''Full screen''' mode: <code>--start-maximized</code>* '''Kiosk''' mode: <code>--kiosk</code>* removing warning '''popus''': <code>--test-type</code> ==== keyboard ====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
==Results= Web server ===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, <code>apache2</code> will be automatically started using the following configuration file:
/etc/apache2/httpd.confChrome browser started with its home page:
It is possible to see that apache2 uses the web page present into the ''/usr/share/apache2/htdocs'' directory[[File:Chrome.png|600px]]
root@imx6qxelk:~# cat /etc/apache2/httpd.conf | grep htdocs
DocumentRoot "/usr/share/apache2/htdocs"
<Directory "/usr/share/apache2/htdocs">
root@imx6qxelk:~#
=== Use case #1: PHP ===
For demonstration purposes the PHP info page is loaded as the home page for our web server running on the system:
</pre>
In this way, the PHP info page is shonw as shown when theweb browser is started on localhost. [[File:Phpinfo.png|600px]] ===Use case #2: eZ Server Monitor ===A useful application demostrating PHP capabilities is the [https://www.ezservermonitor.com/ 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. [[File:EZServer-top.png|600px]] [[File:EZServer.png|600px]] {| class="wikitable" | width="100%"| {{#ev:youtube|xxxxxxxx|500|center|eZ Server Monitor running on NXP iMX6DL |frame}}|}
8,178
edits

Navigation menu