In-vehicle infotainment example¶

This example shows how you can create a Kanzi Connect in-vehicle infotainment application using Kanzi Studio.

You can find this example in the <KanziConnectInstallation>/SDK/examples/IVI directory.

Running the example¶

To run the example:

In Kanzi Studio open the <KanziConnectInstallation>/SDK/examples/IVI/Tool_project/IVI.kzproj project.
In the Kanzi Studio main menu select Kanzi Connect > Start Kanzi Connect Server.

Kanzi Studio starts the Kanzi Connect Server that is installed on your computer.
To run the application on an Android device:
1. In Kanzi Studio in the Kanzi Connect Editor window set:
  - Server IP Address to the IP address of the computer where you started the Kanzi Connect Server
  - Server Port to the port of the computer where you started the Kanzi Connect Server
  The Server IP Address and Server Port properties set the address and port of the Kanzi Connect Server that the client application uses during runtime.
2. Connect your Android device to your computer and set the connection type to Transfer Files.
  
  This way you can access the device file system with Windows Explorer.
3. In Kanzi Studio main menu select File > Export > Build Android Package.
  
  Kanzi Studio creates an Android package from your Kanzi Studio project, deploys, and runs it on your Android device.
  
  When the application starts, it connects to the Kanzi Connect Server that runs on the IP address and port you set in the Kanzi Connect window in Kanzi Studio.

Main features¶

Connectivity through Kanzi Connect
Home screen
- Media widget (Media Service)
- Weather widget (System Service)
Car Settings
- Visualize climate settings for left and right seat (System Service)
Media player screen (Media Service)
- Visualize music player state
- Visualize currently playing track
- Control media player
Media browser screen (Media Service)
- Visualize currently playing playlist
- List all available playlists (local and remote)
- Allow to select a song and start playback
Phone Mock-up (Content Service)
- List all available contacts (local and remote)
- Allow to select a contact from a list and show the details
Status and Navigation
- Status bar with date and time information (System Service)
- Navigation bar to change between infotainment pages

Project structure¶

The project uses these Page and Page Host nodes to structure the contents of the UI:

Home (RootPage > Home)
Car (RootPage > Car)
Contacts (RootPage > Contacts)
Music (RootPage > Music)

These bars always overlay the content of the active page:

Status Bar (RootPage > SplitGrid > StatusStack)
Navigation Panel (RootPage > SplitGrid > NavigationPanel)

Data binding¶

The data sources in this project are imported from Kanzi Connect. The Data Sources window lists all the data sources in the project:

Media provides information, such as the information about the currently playing track
System provides information, such as date and time
Content provides information, such as contacts and album information

The Content data source uses the Content_overrides.xml file which overrides or supplements certain service description properties. These are used to modify how the client uses the data.

<root>
    <preload_url target="contacts.image" uri="kzb://ivi/Textures/Icon_Avatar"/>
    <preload_url target="songs.albumimage" uri="kzb://ivi/Textures/Icon_Music"/>
    <block_size target="contacts" size="100"/>
    <dynamic_source uri="content://com.rightware.content/songs" name="songs" type="list"/>
    <data-source uri="content://com.rightware.content/playlists" name="playlists" type="list">
        <field type="list" column="tracks" name="tracks"/>
    </data-source>
    <dynamic_source target="playlists.tracks" dynamic_source="songs" lookup_column="id"/>
</root>

preload_url defines the placeholder image that is used until the application downloads from the server the content referenced by the target attribute.
block_size sets the limit to the amount of data downloaded from the targeted source at once. The default is 200. Use this property to optimize the behavior of virtualized lists.
data-source overrides the type of the playlists > tracks to be a list.
dynamic_source defines the list of tracks provided by the data-source to be a reference to the dynamic source songs and uses its “id” column as the reference key. In this way you can use the tracks to access songs through the playlists.

Status Bar¶

The Status bar uses the System data source which is set in the RootPage > SplitGrid. All its child nodes inherit the data context from this node:

Server Connection icon - the binding in RootPage > SplitGrid > StatusStack > ServerConnection binds the connection state to the ‘connected’ property that is used to drive the opacity animation of the icon.
Date - the binding in RootPage > SplitGrid > StatusStack > Date binds the date from the server to the ‘Text’ property of the text block.
Time - the binding in RootPage > SplitGrid > StatusStack > Time binds the time from the server to the ‘Text’ property of the text block.

Home page¶

The Home page uses these data sources:

RootPage > Home uses the System data source.
RootPage > Home > HomeGrid > Media uses the Media data source.

The nodes on the Home page have these bindings:

Artist - the binding in RootPage > Home > HomeGrid > Media > MediaInfoStack > Artist binds the artist of the currently playing media track to the ‘Text’ property of the text block.
Track Name - the binding in RootPage > Home > HomeGrid > Media > MediaInfoStack > Song binds the name of the currently playing media track to the ‘Text’ property of the text block.
Play Button - the trigger in RootPage > Home > HomeGrid > Media > MediaButtonContainer > Play runs the Media:play action.
Pause Button - the trigger in RootPage > Home > HomeGrid > Media > MediaButtonContainer > Pause runs the Media:pause action.
Weather Location - the binding in RootPage > Home > HomeGrid > Weather > Location binds the current weather location from the server to the ‘Text’ property of the text block.
Temperature - the binding in RootPage > Home > HomeGrid > Weather > Value+Icon > Value binds the current temperature from the server to the ‘Text’ property of the text block.
Weather Icon - the binding in RootPage > Home > HomeGrid > Weather > Value+Icon > WeatherIcon binds the current weather type from the server to the ‘WeatherType’ property, used to control the visual state of the icon.

Car page¶

The Car page uses the Content data source. which is set in the RootPage > Car node. All its child nodes inherit the data context from this node.

Climate Temperature (Left Seat) - the binding in RootPage > Car > Grid Layout 2D > ACC temperature Left formats the value from the server to the Text property of the Text Block 2D node.
Climate Temperature (Right Seat) - the binding in RootPage > Car > Grid Layout 2D > ACC temperature Right formats the value from the server to the Text property of the Text Block 2D node.

Contacts page¶

The Contacts page uses the Content data source which is set in the RootPage > Contacts node. All its child nodes inherit the data context from this node.

Contact list - the data binding in RootPage > Contacts > ContactGrid > ContactList binds the contact list from the server to the Items Source property of the list.
The list visualizes the information for each contact using a prefab ContactListItem, which has its data binding and events set up as follows:
- When selected, the Button: Click trigger in the SelectButton sets the name and phone number of the contact to the contact info panel on the left (RootPage > Contacts > ContactGrid > ContactInfoGrid)
- Contact Image - the binding in the Prefabs in the ContactListItem > ContactListItem > SelectButton > Image binds the image from the server to the Image property of the Image node.
- Name - the binding in the Prefabs in the ContactListItem > ContactListItem > Name binds the contact name from the server to the Text property of that Text Block node.

Music page¶

The Music page uses the Media data source, which is set in the RootPage > Music node. All its child nodes inherit the data context from this node, except the RootPage > Music > Music Browse > BrowseGrid > AlbumList, which uses the Content data source..

Song info shows the currently playing track information:
- Artist - the binding in RootPage > Music > Music Album > PlayerGrid > SongInfo > Artist binds the artist of the currently playing media track to the ‘Text’ property of the text block.
- Track Name - the binding in RootPage > Music > Music Album > PlayerGrid > SongInfo > Name binds the name of the currently playing media track to the ‘Text’ property of the text block.
- Playlist Name - the binding in RootPage > Music > Music Album > PlayerGrid > SongInfo > ListName binds the name of the currently playing playlist to the ‘Text’ property of the text block.
- Cover Image - the binding in RootPage > Music > Music Album > PlayerGrid > Album > AlbumPicture that binds the image URI from the server to the ‘Image’ property of the Image.
Media player
- Playback state - the binding in RootPage > Music > Music Album > PlayerGrid > PlayerControls > MediaButtonContainer binds the current playback state to the ‘MediaButtonController’ property of the node that is used to control the visual state manager of the node. The visual state manager toggles the visibility of play and pause buttons so that only one of them is active at a time.
- Previous Track - the trigger in RootPage > Music > Music Album > PlayerGrid > PlayerControls > PreviousButton runs the Media:previous action.
- Play Button - the trigger in RootPage > Music > Music Album > PlayerGrid > PlayerControls > MediaButtonContainer > Play runs the Media:play action.
- Pause Button - the trigger in RootPage > Music > Music Album > PlayerGrid > PlayerControls > MediaButtonContainer > Pause runs the Media:pause action.
- Next Track Button - the trigger in RootPage > Music > Music Album > PlayerGrid > PlayerControls > NextButton runs the Media:next action.
Media browser
- Currently playing playlist - the binding in RootPage > Music > Music Browse > BrowseGrid > SongInfo > Name binds the name of the currently playing playlist to the ‘Text’ property of the text block.
- List of playlists - the binding in RootPage > Music > Music Browse > BrowseGrid > AlbumList binds a list of all playlists from the server to the Items Source property of the node. The playlists use the songs through the tracks list reference, explained earlier.
- Playlist prefab instance lists the tracks that belong to a playlist:
  - Playlist ID - the binding in the prefab Playlist stores the ID of the playlist to the ‘PlaylistID’ property.
  - Playlist Name - the binding in the prefab Playlist > PlaylistStack > PlaylistName binds the name of the playlist to the Text property of the text block.
  - Playlist Tracks - the binding in the prefab Playlist > PlaylistStack > Playlist binds the tracks of the playlist to the Items Source property of the node
    - The prefab PlaylistSong instance is used for each track.
    - Track ID - the binding in the prefab PlaylistSong binds the ID of the track to the ‘TrackID’ property.
    - Track Image - the binding in the prefab PlaylistSong > Image binds the cover art URI of the track to the Image property of the Image node.
    - The Button: Click trigger sets off the Media:playTrack action that starts playing the selected track.
- Progress bar:
  - Playback state - the binding in the RootPage > Music > MediaProgressGrid > MediaProgress binds the playback state to the ‘MediaProgressVisible’ property which controls the progress bar visibility.
  - Playback position - the binding in the RootPage > Music > MediaProgressGrid > MediaProgress > Media Timecode binds the current playback position to the ‘Text’ property of the text block.
  - Progress bar position - the binding in the RootPage > Music > MediaProgressGrid > MediaProgress > Progress bar > ProgressFill binds the width of the progress bar fill to the playback offset [0..1].