Antia Puentes and Lorenzo Tilve talk about Igalia's work on the Automotive Grade Linux Demo Platform with Chromium and the Web Application Manager, from the March 17-18th 2021 Automotive Grade Linux All Members Meeting. https://www.youtube.com/watch?v=35SgM_g8ePk&t=1s

2. HTML5 on the AGL demo platform with Chromium and WAM
Antía Puentes <apuentes@igalia.com>
Lorenzo Tilve <ltilve@igalia.com>

3. ● About us
● Goals of the AGL web runtime
● Chromium and the Web Application Manager (WAM)
● The HTML5 AGL demo image, its home screen and webapps
● Web UI running on the reference hardware
● Status update & plans for the future
Agenda

4. ● Highly specialized Open Source consultancy
● Experts on Browsers and Web Engines:
○ Chromium, WebKit, WPE and Firefox
○ Compilers, JavaScript engines, Graphics, Multimedia, Accessibility
About Igalia

6. Goals of AGL web runtime
● Integrate full HTML5 support into AGL platform.
● Support Web applications with the same level and integration as any
other native applications.
● Freedom to use any framework or frontend libraries for the user
interface.
● Capability to use standard APIs provided by any web technologies
out-of-the box.
● Potential to reach a big community of developers.
● Ease development, debugging, customization and interoperability with
other services.

7. The AGL Web Runtime
● Solution based on Chromium and the Web Application Manager from
WebOS OSE platform, open-sourced by LGe.
● Chromium has been verified on multiple embedded devices and
architectures as WebEngine, and provides natural support to Cloud-native
Vehicle technologies.
● Integrate the upstream Ozone/Wayland Chromium implementation that
Igalia has been developing to improve usage of modern GPU capabilities.

8. Chromium and WAM
● Chromium as the web engine:
○ Provides separation between processes as browser, renderer and GPU ones to
isolate different execution processes and secure interactions with different devices.
○ Huge adoption and continuous improvement on functionalities and optimizations.
● Web Application Manager (WAM):
○ Launches webapps as standalone applications, integrating the AGL security model
to ensure permissions isolation.
○ Manages webapp life-cycle depending on visibility status.
○ Simplifies other extra components of the browser.

9. Chromium and WAM

10. Chromium and WAM
● The WAM launcher process was modified to integrate with the AGL application
framework, callbacks and events.
● Initially integrated with Weston Wayland compositor, it was modified to run on top
of the new agl-compositor component developed by Collabora
https://docs.automotivelinux.org/en/master/#5_Component_Documentation/1_agl-compositor/
● It has been under continuous evolution to get adapted to different improvements of
the AGL platform as changes on the security model or Yocto upgrades.

11. Testing the HTML5 version
● The HTML5 alternative version of the demo platform is available and integrated into the
AGL build system and gerrit repositories since Itchy Icefish version.
● Currently as part of meta-agl-demo Yocto layer.
● Uses the same application framework services as the Qt version, which are exposed
through WebSocket APIs.
● Structures the UI into a permanently visible homescreen, the applications launcher, and
some of the demo webapps.

12. The HTML5 demo platform
● The gerrit repositories of the demo platform example webapps:
○ https://gerrit.automotivelinux.org/gerrit/admin/repos/q/filter:html5

13. Getting started
● Startup documentation:
https://docs.automotivelinux.org/en/master/
● Different Reference/Community BSPs can be used to build and test AGL:
https://docs.automotivelinux.org/en/master/#1_Hardware_Support/Overview/
○ Renesas R-Car starter kit: h3ulcb / m3ulcb
○ Intel 64-Bit Hardware Platforms: intel-corei7-64
○ Raspberry Pi 4: raspberrypi4
○ Emulation with QEMU: qemux86-64

14. ● Getting AGL code for the latest versions Jumping Jellyfish 10.0.2 or Kookie Koi 11.0.0
$ repo init -b koi -m koi_11.0.0.xml
-u https://gerrit.automotivelinux.org/gerrit/AGL/AGL-repo.git
$ repo sync
● Configuring the build and compiling all the stack with Yocto:
$ source meta-agl/scripts/aglsetup.sh -f -m <h3ulcb | raspberrypi4| … >
-b build agl-devel agl-localdev agl-demo
$ bitbake agl-demo-platform-html5
Building HTML5 image

15. ● This fetches and builds the recipes of the meta-agl-demo Yocto layer:
○ WAM
• https://gerrit.automotivelinux.org/gerrit/gitweb?p=AGL/meta-agl-demo.git;a=t
ree;f=recipes-wam/wam
○ Chromium 79
• https://gerrit.automotivelinux.org/gerrit/gitweb?p=AGL/meta-agl-demo.git;a=t
ree;f=recipes-wam/chromium
Chromium/WAM Yocto layer

16. ● The generated image will be located at:
build/tmp/deploy/images/<arch>/agl-demo-platform-html5-<arch>.wic.xz
● And then flash the image into an SD :
$ xzcat agl-demo-platform-html5-<arch>.wic.xz | sudo dd of=/dev/mmcblk0 bs=4M
&& sync
● Then the SD card can be inserted on the device and booted for the first time.
Flashing the built images

17. ● The web UI is based on the homescreen webapp (that includes some configurable
shortcuts) + the main area that is used to present app contents
The HTML5 layout

18. ● This is another example of webapp, that shows the entire list of available applications
and uses the application framework to launch them.
The apps launcher

19. ● Have the following elements:
○ A config.xml file (metadata, permissions and required APIs).
○ The content or entry point.
○ An icon.
○ The rest of the source code and web application resources.
● Are packaged into a .wgt file and can be installed and run into AGL.
● https://www.w3.org/TR/widgets/
● There is no dependency of any specific web technology:
○ Pure HTML+JavaScript, WASM, Node app
○ Any frameworks or libraries as Enact, AngularJS, React...
Webapps on AGL

20. ● An example of config.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
id="webapps-youtube" version="1.0.0">
<name>Youtube</name>
<icon src="icon.svg"/>
<content src="index.html" type="text/html"/>
<description>YouTube</description>
<feature name="urn:AGL:widget:required-permission">
<param name="urn:AGL:permission::public:display" value="required" />
<param name="urn:AGL:permission::public:audio" value="required" />
<param name="urn:AGL:permission::public:no-htdocs" value="required" />
</feature>
Structure of a webapp: config.xml
<feature name="urn:AGL:widget:required-api">
<param name="homescreen" value="ws" />
</feature>
</widget>
https://docs.automotivelinux.org/en/master/#3_Developer_Guides/1_Application_Framework/4_Widget_configuration_file/

21. ● An example of content: a simple index.html file
<!DOCTYPE html><html><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>YouTube AGL</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<script>
window.location = "https://www.youtube.com"
</script>
</body>
</html>
Structure of a webapp: Content

22. ● Pack with zip (or use wgtpkg-pack) with the application source code:
$ zip -r app.wgt *
● Copy the generated wgt file and install it on the device:
$ scp -r app.wgt * @<arch>.local:
$ afm-util install app.wgt
● The webapp will be installed with the rest of the available ones at:
@<device>:/usr/local/lib/afm/applications/
Packaging and installing webapps

23. ● AGL Application Framework (AFM) provides APIs and services for: Infotainment,
Telematics and Connectivity and Instrument Cluster.
● https://docs.automotivelinux.org/en/master/#4_APIs_and_Services/0_API_Reference
● WebApps can use them through WebSockets by using AFB.js (IoT.bzh) or its wrapper
agl-js-api:
○ https://gerrit.automotivelinux.org/gerrit/gitweb?p=src/app-framework-binder.git;a=
blob;f=test/AFB.js;h=4c500b993b21c89c7b98974211f7b4c1c76d6098;hb=HEAD
○ https://github.com/AGL-web-applications/agl-js-api/
Connecting to AGL App Framework Services

24. ● audiomixer.js sample code: connecting to audiomixer API at agl-js-api level
import { call as api_call, subscribe as api_subscribe } from ’./api’;
export function set_volume(control, value) {
return api_call("audiomixer/volume",
{control: control, value: value });
}
export function on_volume_changed(handler) {
return api_subscribe("audiomixer/subscribe",
{ event: "volume_changed" }, handler);
}
Connecting to AGL App Framework Services: agl-js-api
audiomixer.on_volume_changed(function(data){
setValue(document.getElementById("slider-"+data.control),
Math.ceil(data.value*100), true);
}).then(function(result) {
console.log("Subscribed To Volume Changed");
});

25. Connecting to AGL App Framework services
se

26. ● Chromium remote inspector
● Enabled when the image is built with agl-devel
● Accessible at port 9998
Debugging your WebApps

27. Debugging your WebApps
[ Target Board]
Transferring
Web Page
information...
[ Developer PC]
Open ‘<board IP>:9998’ in Chromium browser

28. Demo

29. ● There is at the moment ongoing work on several points:
○ Upgrade to Chromium 84
○ Improving stability on scenarios that trigger race condition situations
○ Completing some missing functionalities of the demo webapps
○ Bugfixing and ongoing maintenance to ensure functionality with other
iterations on the platform.
Current status

30. ● There is space to keep improving on several directions:
○ Better integration with the compositor capabilities (web notifications,
interactions between panels, etc).
○ Simplify the process of importing snippets and webapps into the platform.
○ Performance improvements and resource optimizations.
○ Improvements on the architecture design to simplify the maintenance work
and allow a more generic use of WAM.
○ Add documentation and examples of the HTML5 demo platform showing other
web technologies
Future plans

31. ● All work tracked at project JIRA with WebAppMgr label
○ https://jira.automotivelinux.org/issues/?jql=labels%3DWebAppMgr
● Get updated on current work through different channels (mailing lists, dev calls, IRC)
○ https://wiki.automotivelinux.org/dev-call-info
○ https://www.irccloud.com/irc/freenode/channel/automotive
● Participate on the F2F meetings:
○ https://wiki.automotivelinux.org/start#face_to_face_meetings
Open development

32. See you all in person the next time!
Antía Puentes (@apuentes)
Lorenzo Tilve (@ltilve)
Q & A
Thanks to everyone!