Webportal

emmbedded apps

Best Practice

    THINGS TO KEEP IN MIND #

    WebPortal is based on web technologies however, there are some specificities that you need to consider in order to optimize your app.

    GENERAL #

    Your app is sandboxed in an iframe meaning no access to the internet or public networks.

    You can’t use external resources which means:

    • no CDN
    • no fetch()
    • your package must be standalone and use only relative URLs

    The only way to communicate with the webportal is by using HTML5 Window.postMessage(). This is also how you can communicate with your server if you need to exchange information. You don’t need to mind the MQTT on the embedded part, the WebPortal will handle it for you.

    If your app requires to automatically retry sending a message then you should directly implement it as this functionality does not exist by default in the WebPortal.

    It is best to keep the html to a reasonable size and use assets. This is to reduce the chances of the page not loading properly and thus prevent reloading big files due to the handover. Remember that the handover is even more frequent than for a phone.

    The GPU is deactivated for all devices, this means heavy animations should not be used.

    In a popup, to change line within a string you can use \n.

    Your app is a single page application. It means that you must have only one html file (‘index.html’) in your project.

    DATE AND TIME #

    Do not use the methods of the JavaScript Date class. Instead, you sould use the methods from webportal meant to manipulate those values as they correspond to the current time of the user.

    LOADING AND USING ASSETS #

    In order to make the App launch smoother, the app should only signal its ready state, and thus be displayed, when all the assets have already been loaded.

    All the assets should be loaded at the launch of the app. Then they can be accessed in the cache of the browser by requesting the same URL.

    When accessing the assets you delivered with webportal you have to keep in mind the path is not the same relative one as it will be downloaded by the webportal on launch.

    Keep in mind that RAM is limited when you intend to use assets.

    USING FONTS #

    If no font is specified, the NAC browser will use a font with serif, e.g. Times New Roman.

    The special keywords: serif, sans-serif, monospace for the font-family property are supported by NAC browser which will automatically choose the corresponding font.

    Here is a list of fonts available in NAC software version 42.01.70.50_NAC-r0:

    • Heldustry
    • PAULETTEcondensed
    • PLAQUES gill sans
    • Sansation_Regular
    • Tfont
    • type LCB
    • Vera

    What is more, there are brand-specific fonts:

    • GM Sans UI Global Condensed (for Opel / Vauxhall)
    • Peugeot (for AP/AC/DS)
    • Peugeot Light (similar to Peugeot but thinner)
    • DSTACHY

    COLOUR THEME #

    Depending on the car brand and vehicle, your entertainment system could display various colour theme. For graphic purposes, maybe you will need to know more about the main color and design the user of your application have selected. You can refer to the function Device.GetHMITheme() to retrieve this theme ID.

    But then you will need to understand what this ID means. Here is correspondence tables between ID and theme depending on vehicle brand:

    Peugeot

    ID Theme Name Screenshot/Description
    0 Blue Theme
    Mainstream PEUGEOT
    ambiencePeugeot0
    1 Copper Theme
    Onyx
    ambiencePeugeot1
    2 Red Theme
    GTI
    ambiencePeugeot2
    3 Green Theme
    QUARTZ
     
    4 Dichroique Theme
    PHEV/BEV
    Blue as main color with flashy green lines
    5 Krypto Theme
    PHEV/Performance
    Silver as main color with flashy yellow-ish lines
    8 Red Theme
    Multidrive 1
    BOOST
     
    9 Sable/Zen Theme
    Multidrive 2
    RELAX
    ambiencePeugeot9

    Citroën

    ID Theme Name Screenshot/Description
    0 Orange Theme
    Show Room
    ambienceCitroen0
    1 Mainstream
    Red Theme
    Checkerboard Background
    ambienceCitroen1
    2 Blue Theme
    Checkerboard background
    Luminous headband
    ambienceCitroen2
    3 Brown Theme
    Checkerboard Background
    ambienceCitroen7
    4 Battery Electric Vehicle / Plug
    in Hybrid Electric Vehicle
    ambienceCitroen7
    5 Theme Red
    Change plain background
    ambienceCitroen7
    6 Theme Blue
    Change plain background
    Change Headband
    ambienceCitroen7
    7 Brown Theme
    Change plain background
    Change Headband
    ambienceCitroen7

    DS

    ID Theme Name Screenshot/Description
    0 Gold Theme
    Champagn
    Black/gray
    1 Red Theme
    Champagn Perfo Line
    Black with red edges/angles
    2 Blue Theme
    Ruby
    Red main color
    3 Sapphire Theme
    Battery Electric Vehicle
    Plug-in Hybrid Electric Vehicle
    Blue / white glow
    8 Red Theme
    Titanium
    (same as ambiance 3)
     
    9 Violet Theme
    Cachemire
     

    Opel/Vauxhall

    ID Theme Name Screenshot/Description
    0 Red & grey Theme
    GM
     
    1 Battery Electric Vehicle
    Plug-in Hybrid Electric Vehicle
     

    CONNECTION LIMITATION #

    The volume of data should be kept to a minimum.

    Also keep in mind that if the user has an ATB, their connection is limited to 3G speeds.

    USING CACHE #

    To be able to deliver your content faster, you should cache files you will reuse multiple times. This cache limit is 20MB.

    What is more, the following apis use a cache:

    • Connectivity.GetInternetStatus()
    • Device.GetSoftwareRelease()
    • Device.GetSupplierId()
    • System.Settings.Value()
    • System.Settings.AllKeys()
    • Device.GetHMIFocus()
    • Car.Time.Hours()
    • Car.Time.Minutes()
    • Navigation.CurrentPosition.*
    • Navigation.Destination.*
    • Navigation.ManeuverInfo.*
    • Navigation.JourneyInfo.*

    Calls between each cached api should wait at least 50 milliseconds.

    All other apis should respect an interval of at least 500 milliseconds between each call.

    TESTING PHASE #

    When testing your app, in order to know the version of the webportal you can check the first digit in the system parameters as it corresponds to the wave of the system.

    To generate logs, you have to send the messages to your backend as the logs generated on the device are the ones corresponding to the system.