Creating a Project using Single window template

In this section, we will see how to create a new project in Flint and simulate it. As a simple use case, let us create a 2-wheeler instrument cluster. Typically, it has minimal UI elements like a Speedometer, fuel gauge and a trip meter.

To begin with,

  • First right click on the Flint Navigator.

    Flint Project

    Flint Project

  • Select the New option and then click on Project.

  • Now a dialog will be shown, under the Flint group, Select Flint Project.

    New Project

    New Project

  • Now a New Sparklet Application wizard will be started and will ask for the project name and its properties.

  • Now Enter the Project name, project type and Select Board name under supported Boards,Display resolutions and Target platform.

    New Project Wizard

    New Project Wizard

  • Now click the Next button and select Single Window Application and then click Finish. This default template allows to quickly create an application with only one view. Now the Project is created.

    Default Template Selection

    Default Template Selection

  • We can find a default application created under Sparklet folder.

  • Now click on the sparklet folder, under the default application folder, there is a screens folder, under which we can find a default flint window file created.

  • Once click on the efw file, we can see the Flint perspective optimized for editing views.

    Project in Flint Perspective

    Project in Flint Perspective

To import the images required for the project, we need to simply copy and paste the images into the images folder under the Resources folder.

Adding Images

Adding Images

All the UI to be created needs data to read information from. In Flint, the UI and the business logic interfaces via the data organized as efd file.

  • Now double click on the efd file already created.

  • Select Data variable tab and click on add button

    Providing values for Data Variable

    Providing values for Data Variable

  • Now Data information property editor dialog box is opened.

  • We know the left indicator can be in either off (represented as 0) or on state represented as 1. Let us provide the Name as left indicator, ID as left_ind, Storage as Uint8, Min value is 0 and Max value is 1.

  • Click on Ok.

  • Similarly create few more data – one for right indicator with range 0 to 1, speed with range 0 to 120, fuel from 0 to 100, and trip meter of type uint32 0 to 10000.

  • While we display the trip meter, we need to show the unit as km. For that, create a data bridge with name and select Conversion as Formatted String and Formula as %d km.

    Providing values for Data Bridge

    Providing values for Data Bridge

And now drag and drop the Background image fixedview into the design view.

  • Click on the dropped fixed view and edit the properties like size and position, here we have given the size as 800 X 480.

  • Under the widget properties, select the background image from the list which is imported.

    Added Background image to the view

    Added Background image to the view

The background image is now shown in the design view.

  • Next, drag and drop the horizontal progress bar widget, edit the properties, set widget’s width and height based on the images we have imported and select the image under filled track.

  • Choose default track as none.

  • Now the progress bar is set to show the fuel level.

  • Next, drag and drop the dial widget - transparent with needle to show the speed level.

  • Edit the properties and select the imported image under the needle image list.

Drag and drop the labels widget to show the trip meter and edit the properties and set the text under the display text list.

Adding Properties for Static Widget

Adding Properties for Static Widget

Now drag and drop the Image holder widget to show the indicators and edit the size and its position and set the respective images.

Now we need to map the data to the respective widgets.

  • Click on fuel Progress bar widget.Under the advanced properties, there is a visual properties list available, click on Cur Val button. A data selection dialog box is opened now, select the data from the list and click ok.

  • Likewise, we need to map the data for needle dial widgets.

  • Now click on the trip label, under the properties, click on Text DB from Display text list, select the data bridge and click ok.

  • For left and right indicator, map data variable to self UI state under the States list.

To simulate the whole design,

  • Select the project and click on Export all. The result of the build operation is shown in the console view.

  • Now click on Simulate.

  • The simulation window is opened now.

  • You can play around with the value in the drop-down list.

    Flint Instrument cluster Simulator Screen

    Flint Instrument cluster Simulator Screen