Flint Project Hierarchy

Flint IDE is primarily developed to aid developing screens for the Sparklet Embedded Graphics library. Various widgets available can easily be dragged and dropped from the toolbox on to the design view and properties edited to suit user requirements.

It is important to understand that Flint is also capable of generating RAPIDSEA project as well as a project containing both RAPIDSEA and Sparklet features. So, when a Flint Project is created it might have resources for both these. Also, it is possible to have multiple Sparklet applications or windows in the same project.

The below diagram explains the hierarchy for a Flint Project with relation to Sparklet and RAPIDSEA features.

Flint Project – Sparklet/RAPIDSEA Relationship

Flint Project – Sparklet/RAPIDSEA Relationship

The output directory contains files built, if no default path is set. The contents of the resource directory can be shared across all the Sparklet Apps and RAPIDSEA. The Sparklet Apps folder contains different Sparklet applications organized as directories. Each of these apps may have at least one Window and multiple views. We will now discuss in detail the steps involved in creating the Flint project for a Sparklet application.

To set a context, here we will attempt to create an instrument cluster that has two screens. Main screen – With some labels displaying Speedometer, Fuel gauge, Tripmeter, indicator Tachometer. Settings Screen – With few widgets

Instrument Cluster Example Project – Main Screen

Instrument Cluster Example Project – Main Screen

Flint Project

This section explains the procedure to create a new project for Sparklet using the Flint IDE. To begin with, right click on the Flint Navigator (in Flint Perspective) or Project Explorer (in other perspective). On the pop-up menu, select the New option. Another sub-menu will be displayed. Select the Project option from it.

New Project

New Project

On selecting the Project option, a dialog will be shown listing different kinds of projects supported by Eclipse. Under the Flint group, select Flint Project.

New Flint Project

New Flint Project

New Sparklet Application wizard will be started and will ask for the project name and its properties. Enter the project name. In this example, the Project name is Cluster_demo. Also select the Project Type as Sparklet. Then, Select Silicon Vendor, Family, Part number, and Board. In this instance, we’ve opted for Renesas as the silicon vendor, chosen the RH850 family, specifically the RH850 D1M1A part number, and selected the Renesas AICv1 Cluster Platform as the board.

New Project Wizard

New Project Wizard

The list of boards supported in Flint is as follows.

Silicon Vendor

Family

Part Number

Board

Description

Display

Renesas

RH850

RH850D1M1A

Renesas AICv1 Cluster Platform

Renesas Automotive Instrument Cluster Reference Platform v1

800x480

Renesas AICv2 Cluster Platform

Renesas Automotive Instrument Cluster Reference Platform v2

800x480

Renesas D1M1A Mango Platform

Renesas Mango Board

800x480

Embien eStorm-C2 -7 NTP

Embien’s Cluster Reference Platform with 7 Inch Display without touch

800x480

Embien eStorm-C2 -7 TP

Embien’s Cluster Reference Platform with 7 Inch Display with touch

1280x600

Embien eStorm-C2 -10 NTP

Embien’s Cluster Reference Platform with 10 Inch Display with touch

1024x480

Custom

Custom Configuration

Editable

RA6M3

R7FA6M3AH3CFC

Renesas - R7FA6M3AH3CFC EVK

EVK for R7FA6M3AH3CFC

320x240

Custom

Custom Configuration

Editable

Nuvoton

Gerda-ZWEI

KM2KSZ210UA

ASB-Gerda-ZWEI-128-1

Evaluation Board based on 128 pin part

800x480

Custom

Custom Configuration

Editable

KM2KSZ220UA

ASB-Gerda-ZWEI-144-2

Evaluation Board based on 144 pin part

800x480

Custom

Custom Configuration

Editable

KM2KSZ260UA

TKS

TKS Platform based on 144 pin part

800x480

Custom

Custom Configuration

Editable

NXP

iMxRT

iMxRT1170

NXP iMxRT1170 EVK

EVK for RT1170

800x480

Custom

Custom Configuration

Editable

Now click Next button and select any one of the default templates below.

S.No

Template

Description

1

Single Window Application

Basic template with which an application with only one window can be created.

2

Application with switchable dual screens

Home/Settings type application is created with two screens along with necessary HSM logic to switch between the screens.

3

Modbus Client Demo

Modbus Client application with a basic user interface is created.

4

Custom

Used to create customizable applications.

Let us select Custom in this example.

Default Template Selection

Default Template Selection

Now the project is created. If viewed in Flint perspective, the screen below is shown.

Project in Flint Perspective

Project in Flint Perspective

We will now proceed to create Sparklet applications.

Sparklet Applications

To create a new Sparklet application that is going to be executed as a separate task, right click on the “sparklet” folder. On the pop-up select the New item followed by Project in the sub-menu.

Creating New Sparklet Application

Creating New Sparklet Application

In the dialog shown, select the Sparklet Application option and press Next.

Creating New Sparklet Application

Creating New Sparklet Application

The New Sparklet Application wizard has started. Enter the Folder name to hold the application. In this example, it is entered as cluster_app.

Application Name Entry

Application Name Entry

On completing the wizard, the Sparklet application is created. An efw (Embien Flint Window) file is created and is ready for editing.

The below screen shows the cluster_app.efw file opened in the design view.

_images/image28.png

Now, we can import images by simply copying and pasting it into resources->images folder as needed for our project.

Now the widgets can be dragged and dropped on to the window. For example, click on the Fixedview->FillColor in the widget toolbox and place it on the design view. This will place a Fixedview – holder to contain child widgets at fixed positions on to the main window.

Double click on the dropped control and edit the properties and select any one of the colors from color palette under FillColor property.

Editing Background Color of a Fixed View

Editing Background Color of a Fixed View

Since we have to switch between two screens, we will need to create “View” to accomplish that. New view can be created apart from the window which can be placed programmatically on top of the window. To create a new view, right click on the Application directory and select New->Project. On the dialog, select Sparklet View option.

Creating New View

Creating New View

Then the Wizard asks for View Name. In this case, we give a name - main_screen,. This will create a main_Screen.efv file that has the same size as the project. Similarly create another view called settings_screen.

Note: It is advised to maintain the window (efw) or main background image of any screen as opaque (non-transparent image) for optimal functionality and to prevent unpredictable behavior.

Data File

It is Important to have data as they are the interface between the Sparklet view and RAPIDSEA or custom logic. By creating a data file, all the data that will be used by the application can be defined and same can be mapped to the widgets.

To create a new data file right click on data and select New->Project. On the dialog, select Sparklet Data File option.

Creating Data File

Creating Data File

Then the Wizard asks for Data File Name. Once entered, efd file is created as shown below.

Data File after creation

Data File after creation

There are two different tabs available in this view.

  • Data Variable –This is the actual data that is going to be consumed. It is similar to declaring a variable in C/C++

  • Data Bridge-It can be used to mention the way that the data can be consumed. For example, a float Data can be formatted in %0.2f format and consumed by a Label.

Data Variable

In the Data Variable Tab, click Add button. Provide Name, Id, Storage, Min Value, Max Value when prompted. In this case, let us feed in Left_Indicator, left_ind, Unsigned Int 8, 0 and 1.

Providing values for Data Variable

Providing values for Data Variable

The fields to be entered are:

  • Name: User identifiable string that can be separated by space.

  • ID: Unique name to identify the data. No spaces or special characters allowed.

  • Storage: Size of memory to be allocated for the data. Some of the data storage types supported are

Storage Type

Description

Unsigned Int 8

Unsigned value occupying 8 bits within range 0 to 256

Signed Int 8

Signed value occupying 8 bits within range -128 to 127

Unsigned Int 16

Unsigned value occupying 16 bits within range 0 to 65535

Signed Int 16

Signed value occupying 16 bits within range -32,768 to 32,767

Unsigned Int 32

Unsigned value occupying 32 bits within range 0 to 4,294,967,295

Signed Int 32

Signed value occupying 32 bits within range -2,147,483,648 to 2,147,483,647

Single Precision

Value occupying 4 bits within range 3.4E +/- 38

Double Precision

Value occupying 8 bits within range 1.7E +/- 308

String

Store sequence of characters

  • Minimum Value: Minimum value that can be accepted by this data. Attempt to store a value below this will be ignored. Also, it can be set dependent on another Data.

  • Maximum Value: Maximum value that can be accepted by this data. Attempt to store a value above this will be ignored. Also, it can be set dependent on another Data.

  • Data Type: Indicates the physical type of the data such as Generic, Pixels, Speed. Useful for conversions.

  • Units: Indicates the physical unit of the data such as None, Percent. Useful for conversions.

Data Bridge

Next, select Data Bridge Tab, click Add button. Provide Name, Id, Conversion, Formula (Provide based on the data type) and Data 0 (Browse the required data information value). In this case, let us provide (Trip Value, trip_value, Formatted String, %d, di.default_data.Trip_display). This indicates that the Trip value has to be formatted with a “%d” method and available as a string.

Providing values for Data Bridge

Providing values for Data Bridge

  • Name: User identifiable string that can be separated by space.

  • ID: Unique name to identify the data. No spaces or special characters allowed.

  • Usage: Indicates how this data is going to be used. Possible values are

    • For Value – To be used as a value for cases such as showing the label text etc.

    • For State – To be used as a state value determining current state of a widget. To be done.

  • Conversion:

    • No Conversion – Consumed as it is.

    • To String – Converted to a standard string format

    • Formatted String – Converted to user defined string format.

    • Scaling- Absolute – To scale values from one range to another.

    • Range Map – To set up a mapping of values to simple integers that can be used for state management.

    • Enumeration – To set up a mapping of values to string that can be used to display Special Texts.

    • Translation – To set up a translation ID that can be used to show texts in multiple languages.

  • Data Type: Indicates the physical type of the data such as Generic, Pixels, Speed. Useful for conversions.

  • Units: Indicates the physical unit of the data such as None, Percent. Useful for conversions.

  • Formula: Used for conversions. Eg: %d for Integer values, %.1f for floating values etc.,

Then Click Ok and save the project (Ctrl + S).

Like this, it is possible to add more data as needed by the system design.

Range Map Conversion

It can be used to map a range of values to one integer and use it for further operations like UI State etc. Let’s take the fuel gauge of an instrument cluster as an example. Here we have used a progress bar widget to show the fuel level in two different ranges. Assume that the range of the fuel level is 0 to 100. The fuel bar will be in red up to the range of 20, and blue beyond that. Thus, we exported two different bar images and placed them in the images folder.

Create two Self UI states under state configuration and set the images for both states.

self_ui_state for widget

Self UI_state for widget

Let’s create data variable as Fuel level with minimum and maximum values, 0 and 100, respectively.

Providing values for Data Variable

Providing values for Data Variable

Select conversion as the Range Map in data bridge, then click Formula/Format. Enter the upper limit as 20 and 100 on the dialogue, and the return value, which is the UI state id, as 0 and 1, respectively. Click Ok and set the respective Data variable in Data 0.

Range Map value configuration

Range Map value configuration

Now map the data variable under advanced properties and data bridge to Self UI state under States.

Mapping Data Bridge to Self UI state

Mapping Data Bridge to Self UI state

Now simply export and simulate. The fuel level will be displayed in red up to 20, above that the state id will be changed to 1 in which the blue bar will be displayed.

Fuel range in simulation

Fuel range in simulation

Enumeration Conversion

Now we will see Enumeration conversion. It can be used to map integer values to text information. Let’s take an example of the days of the week that are displayed on a label widget. Simply drag and drop a labels widget. Now create data variable as ‘Days’ with minimum and maximum values,1 and 7 respectively.

Providing values for Data Variable

Providing values for Data Variable

Now select the data bridge and provide a name and ID, Choose the conversion as Enumeration. Click on the Formula/Format. In the dialog, enter the value and texts that are to be displayed on the label. Click Ok and set the required data variable in Data 0.

Enumeration value configuration

Enumeration value configuration

Now map the data bridge to the label widget. Simply export and simulate it. By entering the corresponding data value, the days of the week will be displayed in simulation.

Days value and its corresponding label in simulation

Days value and its corresponding label in simulation

Scaling Absolute

It is used to scale values from one range to another. For example, we’re working with a customized horizontal progress bar widget with a width of 388, and we’ve applied an alpha mask effect to the filled track.

Customized Progress Bar widget

Customized Progress Bar widget

To make the progress flow, we’ll start by creating a data variable “PB level” with minimum and maximum values of 0 and 100, respectively.

Providing values for Data Variable

Providing values for Data Variable

In the data bridge, select “Scaling absolute” as the conversion. Next, click on “Formula/Format.” Input 0 and 100 as the values for X1 and X2, and for Y1 and Y2 & Min and Max, enter -388 and 0, respectively, and then assign the Data variable to Data 0.

Scaling factor setup

Scaling factor setup

Now, go to the advanced properties and map the data variable and data bridge to control the X-Offset under Dimensions.

Mapping Data Bridge to Filled track X offset

Mapping Data Bridge to Filled track X offset

After setting this up, export the project and run a simulation.

Progress bar range in simulation

Progress bar range in simulation

Note: The default Widget data should not be mapped to the Width of the filled track when the Data bridge (with scaling absolute) is mapped to the X-offset.

Adding Images

We can add our customized images which are going to be used in the application. To achieve that, copy the images from the source location, expand resources folder, right click on images folder and select Paste/ Ctrl + V.

Adding Images

Adding Images

Note: The width of the exported image should be a multiple of 4. In the design view, only the PNG image format is accepted.

Designing View Files

Flint provides a simple drag-and-drop mechanism for designing the views. Simply open view file (main_screen.efv in this case), drag and drop the Fixedview->Background Image. Now double click on the dropped control and edit the properties, then select the required image from the list under BackgroundImage.

Added Background image to the view

Added Background image to the view

Next, add the necessary widgets. In this example, drag and drop Labels->Transparent and in Text DB field under Display Text and click the browse button to select the added data bridge value for this widget.

Adding Properties for Static Widget

Adding Properties for Static Widget

Other widgets from the widget toolbar carry out the following functions:

Widget

Description

Fixedview

View only container widget that can be used to place child widgets at fixed positions with styles like Transparent, filled color and customizable background images.

List View

List view automatically manages the position of the widget and orders them horizontally or vertically.

Carousel View

A carousel view widget is used to display multiple views in a specific space.

Scroll View

The Scroll view widget is used to display the child widgets that are large for the display area and can be scrolled up/down or left/right.

Labels

View only control that can be used to present text values/images with styles like Transparent, filled color and customizable background images.

Button

User interactable control offering on/off states. Transparent, filled color and customizable background image buttons are supported by default.

Toggle Button

User interactable control offering on/off states. Filled color and customizable background image toggle buttons can be created.

Swipe Button

Using the swipe button widget, a slide effect can be shown either horizontally or vertically.

Slider

User interactable control that can be used to change values in a linear fashion. Can create vertical and horizontal sliders with customizable background images

Progress Bar

View only widget that can be used to present the current value to the user in a linear manner. It is possible to create vertical and horizontal progress bar with filled color and customizable background images

Rotary Knob

User interactable control that can be used to change values in a circular fashion. Can create rotary knobs with customizable background images. One has to set minimum and maximum angles.

Image Holder

View only widget to show images.

Clock

This widget displays an analog clock with hands for hours, minutes and seconds.

Dials

View only control that can be used to change values in a circular fashion. Can create rotary knobs with customizable background images. One has to set minimum and maximum angles.

Dialog

A container widget with fixed dimensions and child position, that can be shown at any desired position.

Further Flint follows a layered approach and hence it is possible to create multiple combinations of customizable widgets. The same is explained in detail in the following section.

Adding Fonts

It is possible to create our own customized font for the text to be displayed. To achieve that, expand resources folder. Right click on fonts -> New ->Project. In the dialog select Sparklet Font option.

Sparklet Font file

Sparklet Font file

Importing Existing Project

To import an existing project, follow these steps:

  • Copy the project and paste it into your workspace.

  • Right-click within the Flint Navigator and choose “Import” from the menu.

    Importing Existing Project

    Importing Existing Project

  • Select “Existing projects into Workspace” and then click “Next”.

    Importing Existing Project

    Importing Existing Project

  • Browse the project and click Finish.

    Importing Existing Project

    Importing Existing Project-1

Placeholder File

Now that multiple views are created, we need to show them by placing them on the window. To achieve a dynamic flow, a Placeholder can be used. It is possible to place many views on the placeholder which is in turn placed on the window/another view. Then with a HSM (Hierarchical state machine) approach it is possible to switch between the views in the placeholder creating a dynamic effect.

Switching multiple screens in Placeholder

Switching multiple screens in Placeholder

To create a placeholder, right click on the screens under (sparklet->Application directory (cluster_app,in this case) and select New->Project. On the dialog, select Sparklet Placeholder File option.

Creating Placeholder File

Creating Placeholder File

Then the Wizard asks for Placeholder Name. Once entered,cluster_holder, in this case, placeholder is created as shown below.

Placeholder File after creation

Placeholder File after creation

Click Add button. Provide Name, Id, Width and Height values (based on design needs) and in Parent field click the Browse button. Select the Application File Name (efw) under View File and select window under View Control.

Providing Placeholder Information

Providing Placeholder Information

  • Name: User identifiable string that can be separated by space.

  • ID: Unique name to identify the data. No spaces or special characters allowed.

  • X: X position of the Placeholder

  • Y: Y position of the Placeholder

  • Width: Width of the Placeholder

  • Height: Height of the Placeholder

  • Parent: Parent of the place holder. Could be a window or another view.

Since we have two views – main_screen and settings_screen, we can add them both in the place holder. Click Add button under Views. Select the View file name under View file and under View Control which has been placed in that respected view.

Creating view information in Placeholder

Creating view information in Placeholder

Repeat for the next view.The layer’s section can be used to place the children and their children in the layer as suitable for rendering.

State Machine File

State Machines are one of the proven mechanisms that can be used to create large projects with clarity. Inspired by UML design methodology, Flint allows users to create Hierarchical State Machines (HSMs), define multiple states in the HSM, select events that can be received in a given state and actions to be taken for that particular event. To create a state machine, right click on the hsm under (sparklet->Application directory (cluster_app,in this case) and select New->Project. On the dialog, select Sparklet State Machine option.

Creating Sparklet State Machine

Creating Sparklet State Machine

Then the Wizard asks for File Name. Once entered, the state machine is created as below.

Sparklet State Machine after creation

Sparklet State Machine after creation

Let us assume, we want to create the below state machine for our Cluster use case.

Pictorial view of Sparklet State Machine

Pictorial view of Sparklet State Machine

Provide Name, Id (Screen Management, screen_management) and check the Auto Instantiate. Then click the Add button under States. Initially we want to give (init_screen for both Name and Id). Again, we can add Name and Id based on our number of view files (main_screen, setting_screen in this case).

Next, by selecting on the init_screen, click Add button under Actions and select ‘On Entry’ in When to generate, Place holder – Initialize in ‘Type’ & ‘Action’ and browse the Placeholder file (cluster_holder.main_app_holder) which has been created. Again, click Add button provide values On Entry in When to generate, Delayed Transition in Type of Action, provide time in Delay(ms).

Next click Add button under Events. Select Timers and Delays in Group, End of Delay in Type and screen name that switched over to the Next State.

Creating View Information in Sparklet State Machine

Creating View Information in Sparklet State Machine

Next, by selecting on the particular view file(main_screen), click Add button under Actions and provide values On Entry in When to generate, Place holder – Show View in Type of Action and browse the Placeholder file (cluster_holder.main_app_holder) and browse the View Id which has been created.

Creating View Information in Sparklet State Machine

Creating View Information in Sparklet State Machine

Click Add Button under Events, suppose if we have button in that view used to switch to the next screen, click Button in Group, Button Pressed in Type, click Browse Button in Argument (Select the View File Name and select the Button Name used for switching under Widget Control), select the screen name to which want to be switch over under Next State.

Creating Events in Sparklet State Machine

Creating Events in Sparklet State Machine

Proceed with the same value as above by clicking Add button again except (On Entry to On Exit) and (Place holder – Show View to Place holder – Hide View).

  • When to Generate: Used to set when the action is to be generated.

  • On Entry– Action generates when the screen is entered

  • On Exit– Action generates when the screen is exit

Type of Action:

Action Type

Description

At End

Delayed Transition

Used to set the delay in milliseconds

State machine - Initialize

Place holder – Show View

Used to show the view in placeholder

Place holder – Hide View

Used to hide the view in placeholder

Place holder – Go to next View

Used to go for the next view in placeholder

Place holder – Go to previous View

Used to go for the previous view in placeholder

UI State – Set

Used to set State value for the widget

Data – Set

Used to set particular value for the widget

Data - Increment

Used to increase the value

Data - Decrement

Used to decrease the value

Widget - Show

Used to show the widget

Widget - Hide

Used to hide the widget

Widget - Enable

Used to enable the widget

Widget - Disable

Used to disable the widget

HSM Event Property

Group

Type

Description

Internal

Initialization

Timers and Delays

End of Delay

Key Input

Key Down

Event triggered when the specified key is pressed

Button

Button Pressed

Event triggered when the specified button is pressed

Proceed same for further View files.

Watch Flint tutorial video for Creating new project with Single Window Application in the link below: https://www.youtube.com/watch?v=8jqpA_LVSrY