 Hi, so thanks for joining this presentation on Flutter Applications on AGL Video Application Manager. Hope everybody is safe. Unfortunately, we are still not able to meet in person, but hopefully we will be able to do it soon. And yeah, especially thanks to everyone working on the organization of events under this complicated scenario worldwide. So let me introduce what are we going to talk about in this presentation. So basically the goal is to describe how using Chromium and the Web Application Manager, we are going to be able to run applications on this demo platform, specifically building Flutter applications to run on top of one. So I will be describing how this process is done and a bit about some cases of bundles from Flutter apps that are run into the platform using one. And yeah, we will comment then on the ongoing work. So first, a few things about us. Well, I am Lorenzo Tilbe and I work at Igalia. We are an open source consultancy, mostly specialized in browsers and web engines. Our main areas, expertise are Chromium, WebKit and WP and Firefox mainly. But yeah, we have areas of work around compilers, JavaScript, graphics, multimedia and accessibility. And we have been involved with AGL for a long time, specifically focused on providing web runtime support into the platform. And I will be explaining a bit how that is done. So the idea is to ship... We have been working on adding a web runtime into AGL, which high level is based on Chromium and the Web Application Manager. This was coming from a WebOS OC platform and open source by LG. It is using Chromium, which has been verified on multiple embedded devices and architectures, which also provides natural support for different technologies that are used in vehicles as cloud-to-native, but of course any other capability that a runtime, a Chromium-based web engine can provide, which is everything related to implementation of media connectivity, rendering, graphics display, etc. that we are getting by using a Chromium engine. This is also integrating the work using OS on Wail and AppStream implementation that LG has been working on to optimize the usage of GPU capabilities on the different hardware devices. So I'm not going into a lot into detail on the internals of the Web Application Manager this time. I will mention later on about some links to resources where that information can be accessed. But basically, the idea is that the Web Application Manager is a layer that allows connecting and running web applications, allows isolation, life cycle management, and different levels of permissions. The idea of this AGL web runtime is to be able to target a large community of companies and application developers. This means that by having the capacity to run web technologies into AGL, without dependency from any specific UI front-end or framework, it's possible to test, demo, and check integration for different stakeholders willing to run AGL. And we will be describing specifically how a going work on Flutter integration is happening and how already Flutter apps can be tested in the HTML image. This is also based on open standards defined by the W3C. We are being capable of running our web capacities due to that. So, yeah, as I was explaining, in order to understand the internals about Chromium and WAMM, architecture a bit better, you can check a presentation on the past Virtual Automotive Ray Linux that my colleague Antia and me delivered specifically on HTML5 and AGL demo platform with Chromium 1, where you can get more instructions if you are interested in learning how to create images, how to start using web apps and how to build and run them into the platform. So for this session today, we are talking about Flutter integration. So just very briefly, what is Flutter? Basically, Flutter is an open source framework that was done by Google to build native multi-platform applications. So main goal specifically is the capacity that the same code runs on different devices or hardware platforms, which is also something that AGL does. So in this case, it could be possible to create applications in desktop and run them into AGL, either natively or bundled, as we're going to describe. It's based on Dart language, so the idea of Dart is being UI oriented and can be compiled into native code or JavaScript for the web. So this allows to generate web bundles and they can be run out of the box nowadays into a stable HTML5 image from AGL. So I'm not going to explain in detail how to write Flutter applications, but just a brief ideas and resources, how to use some of the existing demo code or how that can be already for developed Flutter applications, how to already run them into AGL. So there are many resources available online to start coding Flutter apps. There are some references and some gallery placeholder applications that ship different widgets that are being used and examples of navigation flow, etc. So we can be also using some of these examples to showcase how they run into AGL in this presentation. And there are other specific resources for learning Dart and Dart.dev. So there's hot reloading that can be tested there to learn more about the language. So what's about running Flutter applications? You can run them using the command-lighted SDK or you can use some editor as in this case virtual studio code to run them on the desktop. So you either get some existing code or just are coding your own applications there and you can run them on desktops. And then we are going to mention how to run them on AGL using one. So as I was mentioning, Flutter has the capacity from the same code for an application to specify the target for which it can be built. And one example of them is compiling them as a web application. So you can run the same code you run for desktop natively into a browser, which allows them to be wrapped using the structure of applications in AGL and run them into the image on some of the supported platforms. Either QEMove for a quick development and test locally or any of the supported hardware platforms as Rinesas or any of the community ones are Raspberry Pi. So there are some documentation links I was sharing there about how this ongoing work is happening. So there's a Confluence page on which resources that I'm using in this presentation are linked. And also there's an issue on AGL Jira about the ongoing work of porting some demo web apps to Flutter that is spec 4.0.4.0 that anyone can follow up as development is open. And we are also talking about them in the weekly developer call. So just feel free to participate and ask if you have any question. Besides what we are describing in this presentation on running Flutter as a JavaScript application, as web bundles into AGL, there's ongoing work happening to native support on AGL. So Toyota was contributing a native Flutter embedder that is already been integrated into master which allows to run directly binary Flutter applications. And yeah, it's also possible to run to the native debugging. There's some additional resources and demos that will be presented during this ALS on that regard. But yeah, for the scope we have here one of the ideas about these flexibilities that any vanilla HTML applications or created with any UI frontend can live and be run in the same image as a Flutter bundle. So we are going to explain how to do that. So in order to build a Flutter web bundle, there's the possibility to directly use the SDK and specify the target there of which element is going to be built. So the way to do that is using Flutter build web when you install the previous Flutter SDK requirements. So you can select web as one of the targets to create the distributed code of the application, either of the example of or the gallery I mean or your own Flutter application. And then you can directly see the content of the build web directory into a WGT file which is the format that was using the application framework to be able to pack and install applications into AGL. Something important is that the scope of this presentation is meant to be for a Luki LAN pre-version as there are some ongoing relevant changes happening in master like the new version that is going to be called Marlin which introduced changes on the application framework which has been reworked to a new approach targeted to security and LTS mentality. So there are a lot of ongoing changes. So the instructions I am sharing here to bundle web apps and to run them with HTML applications are to be run on the LAN pre-version. So once I was meaning the widget is created, if you have your own QE movement for instance that bundle can be directly copied into the QE movement and installed with AFM utility installed in the same way you would be doing for any other web app or native application. And that would be basically in order to have the information describing the structure of the bundle it's necessary to include config.xml file, I will be showing some examples later but basically it defines the name of the application, the permissions that is going to be used there were some additional information about that in the talk I was mentioning before about web apps that you can check too. Something also important is that besides running UI functionalities or use cases it's going to be needed to have platform integration to talk with the layers of AGL or APIs that are providing access to certain functionalities. The way to do that in web applications in the HTML5 image in AGL is using the application framework APIs which we have been wrapping with a JavaScript library binder. So all the calls from the web applications to the different services were wrapped through the AGL GS API library that we were sharing there. So basically all the applications do their logic on the website but in order to get information from controls or internal components that live in AGL demo platform are done through this library. So what we were doing in order to do the same for a Flutter application was creating an AGL GS Dart wrapper that I am sharing there, we will be also sharing some additional details about how it works. But basically your custom Flutter application should be just importing AGL GS dependency in the pubspec.yaml file from the Flutter application. So it could be possible to then use methods that interact with AGL. Which kind of methods I am referring to? Well, those that talk to API calls that were provided application framework as mentioned that this is going to be rework after lamprey but this can be used on the current version. So for instance to create a Flutter application that has access to volume and wants to attach listeners to volume chains. At the first place it has to get the permissions defined in the config.xml file to be able to access those APIs. Otherwise the application would never have access to talk to these services. And then with JavaScript in the library you get exposed methods that would bring the list of available controls or to set specific volumes for one of the specific controls that were listed or to attach to events that you would notify when the volume was changing. So this was done on the JavaScript site. So in this case for creating Flutter applications that did the same but on Flutter we were creating this wrapper that was basically defining the way that the same API calls to the AGL GS were going to happen but written on Dart site. So from that moment on the Dart application would be able to do the same thing that is retrieve controls, change volume or attach callbacks to get notified when the audio mixer was changing. So let's show how this would be working inside of the existing web home screen structure. So this is the anatomy of the layout of the HTML image in AGL demo platform. So basically there are different web applications running at the same time. So one is the one in the orange border that is the home screen area. So that's a web app that is running all the time which has some widgets, some example widgets you can see there. So this showing the time is showing a connection to services that provide weather information and some shortcuts that are actually able to bring up other applications that are going to be shown in the applications area which is showing multiple web applications flipping up and down. So as I was mentioning, so you have that view visible all the time and what you are seeing in this example is one specific case of web application that is called the launcher which lists the installed applications and allows to run one of them and use that area that is in the blue box. So how that would work for the case of the flutter applications that we built? So basically that would allow to embed as one example of gallery app in this case running at the same time as the web versions of the HVAC or mixer or dashboard applications that we were running. So what you are seeing in this example is AGL HTML platform running the flutter gallery as a web app integrated in the system. So you can browse, you can use all the functionality from that application embedded into AGL. So these are another couple of examples. So in this case we are showing an initial prototype of the launcher web app of the launcher flutter application. All these examples are also shared in the Confluence page that I was sharing. So this application what does is lists the installed applications and is able to run them using the calls in the AGL JS wrapper written in Dart that I was mentioning. Another example is an HVAC version, an HVAC flutter version of the equivalent web app. So yeah, they both provide the same functionality but in that case they were runnable and testable on desktop but the connections can be done directly into AGL platform when exported as web bundles. I will be also sharing some other example. There is one version we were working that is a flutter version of the entire home screen. This would allow on the native flutter image to show the entire surface available on the screen. With an entire single flutter application, this provides an integrated view. So yeah, there is still ongoing work in order to be able to integrate with the ongoing work to replace the application framework and also to be able to show multiple flutter apps so they can be handled independently. But I can briefly show how this example of AGL flutter home screen written in flutter is. So yeah, it replicates the aspect of the HTML version. It uses some different widgets but the idea is that in this case this is a pure flutter application that can be run both on desktop or in the native flutter version using the home screen IVI. And again, it could be also exported as a web application and run directly into one with other web applications. So as you can see, it also integrates some of the available widgets in written in flutter. And yeah, it ships mock-up implementation of the alternative launcher and so on. So what is next? Well, there are a lot of things ongoing. So on one side, WAM and Chromium are being adapted in master branch after this removal of the application framework happening after lamprey. So there are quite some work that needs to be done to adapt the functionality after these changes. Also we are working in bringing up the Qtless version of WAM that was released recently. So that could make quite easier to get updates of that version. And also we are bumping the Chromium version from 84 to 87 and the incoming 9x that is going to be available soon. So yeah, we will be getting into a fresher versions of the codebase in WAM and Chromium. We are also working in integration. We are iterating the platform for running flutter bundles in Marlin. So yeah, we will need to still rework some of the functionality of the AGL.js API to be working with the AGL.js Dart wrapper. And yeah, there were some additional work ongoing for the migration of demo apps as the version of the flutter launcher, flutter HVAC or the mixer. So there are besides running flutter apps in HTML, it's also possible to run HTML applications in flutter with a web view. So yeah, this might be something that can be explored in order to provide more flexibility so AGL platform can run any of the available either flutter or web technologies using both their flavors in the future. And yes, also there's additional work in the integration with the native ADI homescreen as allowing surfaces running flutter apps for homescreen and launcher separately. And yeah, ongoing work on handling of application lifecycle and packaging system with the changes that are happening. So that was basically it. Thanks a lot. I'm happy to get any question or comment. Again, really wishing to see you back soon. Thank you.