Webportal v1

embedded apps

    Overview - Infotainment System

    NAC #

    The NAC, from the french “NAvigation Connectée” - Connected Navigation, is the infotainment system in Groupe PSA vehicles. It allows to use navigation, browse media player, customize interior, choose driving mode…

    Driver interacts with the NAC through a capacitive touchscreen. Webportal Embedded Apps are also displayed on this same screen!

    NAC

    SOFTWARE VERSIONS #

    There exists 3 differents generations of the NAC each new one coming with its own new functionalities:

    NAC wave 2.1 - using QtWebKit 5.2.1 based on WebKit from July 2013 (r153112).

    NAC wave 3 - using QtWebKit 5.5.0 based on the upstream trunk subversion revision 153112.

    NAC wave 4- using QtWebKit 5.5.0 based on the upstream trunk subversion revision 153112.

    WAVE 2 #

    SW version Percentage of vehicles Build date Trend of use
    21.07.16.32_NAC-r0 26% 01/04/2018
    21.07.67.32_NAC-r0 17% 19/06/2019
    10:90:42 12% 07/09/2017
    10:47:34 11% 08/03/2018
    10:82:12 6%  
    10:68:24 4%  

    WAVE 3 #

    SW version Percentage of vehicles Build date Trend of use
    31.09.46.62_NAC-r0 14% 19/11/2018
    31.08.05.86_NAC-r0 3% 15/05/2018
    10:50:42 1%  

    WAVE 4 #

    SW version Percentage of vehicles Build date Trend of use
    42.01.21.42_NAC-r0 2% 01/02/2020
    40.04.20.22_NAC-r0 1%  
    42.01.37.32_NAC-r0 1% 18/09/2019
    40.04.33.12_NAC-r0 0%  

    SCREEN SIZE #

    Usually in-board screen is located on the dashboard of the car between driver and passenger.

    There are 3 different screen resolutions depending on car model and generation.

    The screen is divided in 3 areas: one is for your app while two others areas are dedicated to car system info. Here is actual available screen size: SD = 800 x 363 px ; HD = 1280 x 582 px ; WHD = 1280 x 620 px.

    COLOR LEGEND
     Grey  Total screen size.
     Blue  Area of the screen dedicated to the infotainment system.
    Green Area of the screen available for your app

    Standard-Definition screen-res-sd

    High-Definition screen-res-hd

    Wide High-Definition screen-res-whd

    VIRTUAL KEYBOARD #

    A virtual keyboard is available on the NAC. It is displayed on the full size of the NAC touchscreen.

    virtual-keyboard

    You just have to create an HTML input text, once the user set the focus on this text field the virtual keyboard is displayed.

    <input type="text" />
    <!-- Focus the field will make the keyboard to show-up -->
    

    Note: When the keyboard is being displayed, you cannot receive events.

    Note 2: Before WAVE4: 42.03.06.50 / WAVE 2: 21.08.63.40, pre-filled text was deleted once the user set the focus in the input field. Since these versions, webportal’s virtual keyboard acts like modern webrowsers as it keeps pre-filled text in the input when the user set the focus in it.

    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
    ambience-peugeot0
    1 Copper Theme
    Onyx
    ambience-peugeot1
    2 Red Theme
    GTI
    ambience-peugeot2
    3 Green Theme
    QUARTZ
    ambience-peugeot3
    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
    ambience-peugeot9

    Citroën

    ID Theme Name Screenshot/Description
    0 Orange Theme
    Show Room
    ambience-citroen0
    1 Mainstream
    Red Theme
    Checkerboard Background
    ambience-citroen1
    2 Blue Theme
    Checkerboard background
    Luminous headband
    ambience-citroen2
    3 Brown Theme
    Checkerboard Background
    ambience-citroen7
    4 Battery Electric Vehicle / Plug
    in Hybrid Electric Vehicle
    ambience-citroen4
    5 Theme Red
    Change plain background
    ambience-citroen7
    6 Theme Blue
    Change plain background
    Change Headband
    ambience-citroen7
    7 Brown Theme
    Change plain background
    Change Headband
    ambience-citroen7

    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
    ambience-opel0
    1 Battery Electric Vehicle
    Plug-in Hybrid Electric Vehicle
    ambience-opel1