Difference between revisions of "XELK-TN-001: Using Chromium browser as an Embedded GUI"
(Created page with "{{InfoBoxTop}} {{AppliesToAxel}} {{AppliesToAxelEsatta}} {{AppliesToAxelLite}} {{AppliesToSBCX}} {{InfoBoxBottom}} {{ImportantMessage|text=This application note has been vali...") |
(→How to configure) |
||
| Line 41: | Line 41: | ||
== How to configure == | == 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:~# | ||
| + | |||
| + | === PHP === | ||
| + | For demonstration purposes the PHP info page is loaded as the home page for our web server running on the system: | ||
| + | |||
| + | <pre> | ||
| + | root@imx6qxelk:~# cat /usr/share/apache2/htdocs/.htaccess | ||
| + | DirectoryIndex phpinfo.php | ||
| + | root@imx6qxelk:~# cat /usr/share/apache2/htdocs/phpinfo.php | ||
| + | <?php | ||
| + | |||
| + | phpinfo(); | ||
| + | |||
| + | ?> | ||
| + | root@imx6qxelk:~# | ||
| + | </pre> | ||
| + | |||
| + | In this way, the PHP info page is shown when the web browser is started on localhost. | ||
=== Graphical backend === | === Graphical backend === | ||
| Line 76: | Line 105: | ||
root@imx6qxelk:~# | root@imx6qxelk:~# | ||
| − | === | + | === Chromium === |
| − | + | In the same way of the web server, chormiumcam be started using a proper service: | |
| − | + | <pre> | |
| + | 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 | |
| − | + | </pre> | |
| − | |||
| − | + | and a script which will be started at boot time: | |
| − | |||
<pre> | <pre> | ||
| − | root@imx6qxelk:~# cat | + | 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:~# | root@imx6qxelk:~# | ||
</pre> | </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> | ||
| + | |||
| + | For a 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 | ||
Revision as of 12:55, 3 October 2019
| HOME | SOMs | SBCs | ToloMEO Embedded Assistant |  GET A QUOTE
|
 ONLINE HELPDESK
|
| Roadmap | IoT Services | ML/AI services | Embedded Design Services |
Info Box
|
 This application note has been validated starting from the XELK 4.0.0 kit version. |
Contents
History[edit | edit source]
| Version | Date | XELK version | Notes |
|---|---|---|---|
| 1.0.0 | Sep 2019 | 4.0.0 |
Introduction[edit | edit source]
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 following packages:
- Chromium browser
- apache2 web server
- PHP with apache2 plugin
Architecture[edit | edit source]
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 configure[edit | edit source]
Web server[edit | edit source]
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:~#
PHP[edit | edit source]
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.
Graphical backend[edit | edit source]
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 this pruposes, the desktop will be displayed and the X1 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:~#
Chromium[edit | edit source]
In the same way of the web server, chormiumcam 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
For a 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
