Designing Page Content

<< Click to Display Table of Contents >>

Navigation:  Quick Start Tutorial >

Designing Page Content

A new project always comes with a page having a default page name. By following the next steps the page name can be changed.

•Double click on project name (7)

•Double click on "Pages" (7)

•Double click the Home Page in the project tree. (8)

•The Home Page Editor opens. (9)

•In the Properties window change the page name into Gauges Page. (10)

clip0026

 

In this tutorial, the basic page layout is given by a background image. To add a background image, open the Image Library tab (11), and use the Browse button (12) to add the folder where the tutorial images were saved. Then select the image Training Background1.png (13) and drag & drop it onto the gray frame in the virtual device (14). Select the Frame 1 and then Background Image.

clip0027

Note that the image now has a suffix _480_272 in the file name . A new instance of the image in this resolution is automatically created.

 

hmtoggle_plus1Visualization of Received Values

 

Now you're ready to add the Meter object.

•Drag the Meter object from the Palette (15) and drop it in the editor (16).

2018-04-23_08h54_03

 

Now change the following properties of the Meter in the Properties window (for the min/max values use the exact order as listed here):

Make sure that the Meter object is selected in the scene!

•Select the Theme Template "modern_bright"

•X Location: 181

•Y Location: 51

•Width: 118

•Height: 118 (will be set automatically when you set the width)

•Check Transparent

•Max Value: 100

•Absolute Max Value: 100

•Min Value: 0

•Absolute Min Value: 0

•Start Angle: 325

•End Angle: 215

•Uncheck Draw Ticks

Here is what the result looks like:

2018-04-23_09h12_33

To be able to change the value shown by the meter, you need to create a variable and attach it to the meter:

•Click the Add New Variable button (17) of the Variable View.

•A new variable with name New Variable_1 is created.

•Change the Variable Name of New Variable_1 into kmh (18).

2018-04-23_09h16_55

 

To make it easier to work with variables you have created, there are two possibilities to reduce the amount of variables shown in the Variable View:

•One option is to check the Hide pre-defined variables check box (19).

•A second option is to enter a search sting (e.g. the variable name kmh) in the search area (20).

•In both cases, the amount of visible variables is reduced.

Now you need to attach the variable kmh to the meter:

•Click the kmh variable row to select it and drag & drop the variable over the meter. You can also drop the variable on the Meter 1 in the project tree (22).

•A context menu appears. In the first level, select the Meter 1 object. In the second level, select the the Variable Reference option (21).

•You can now check in the Properties window, that the variable kmh is referenced by the meter object (23).

2018-06-05_10h25_40

 

Later we will simulate the project. To be able to easily simulate the correct variable values, we have to set the minimum and maximum values of the kmh variable:

•Select the kmh variable in the Variable View (24).

•Open the right click context menu of the kmh variable and choose Edit in Variable Manager (25).

2018-04-23_09h34_15

 

The Variable Manager window opens: Set the following properties:

•Minimum Value: 10

•Maximum Value: 170

•Default Value: 10

Then close the window by clicking the OK button (22).

 

2018-04-23_09h35_53

Setting up CAN communication start with the port configuration:

•Choose Port Configuration... from the menu Communication (29).

 

In the Port Configuration window:

•Select CAN:1 (30).

•Set the Bus Speed to 250 kbps (31).

•Close the window by clicking OK button (32).

 

2018-04-23_10h24_44

 

After configuring the CAN port, the CAN protocol and a communication partner, e.g. an ECU, must be defined:

•Click the Terminal and Owner ECU(s) Configuration... entry in the Communication menu (33).

 

The Terminal and Owner ECU(s) Configuration... dialog appears.

•Choose protocol CANFreestyle running on CAN1 (34) and click the Add button (35).

•Choose CANFreestyle running on CAN1 (36).

•Enter ECU Name MyECU (37) and click the Add button (38).

•Now the ECU is listed in the Select ECU dropdown menu (39).

•Close the window by clicking OK button (40).

2018-04-23_10h54_16

 

Now it's time to create a CAN mapping for the CAN message and add the kmh variable to this message:

•Click on the CANFreestyle shortcut button in the toolbar or, alternatively, go to the menu Communication -> Protocols -> CANFreestyle -> Configure Mappings... in the Communication menu.

 

2018-04-23_11h36_21

 

The CANFreestyle Configure Mappings dialog appears. Make the following settings:

•Enter MessageFromMyECU as the message name (41).

•Choose Receive to create a message that is received by the display (42).

•Click the Add button to create the receive message (43).

•Select MessageFromMyECU (44).

•Change the CAN ID Type to 29 Bit (45).

•Enter the message CAN ID 0x4711 (46).

•Switch to Visual CAN Mapping (47).

2018-04-23_11h40_28

•In the search field on the right (47) type the name of the variable, kmh.

•Select the variable (23) and drag & drop it into Bit 1, Byte 1 of the CAN mapping (49).

•Close the window by clicking OK button.

2018-04-23_11h45_10

 

Now you have created a CAN message with CAN ID 0x4711 (Hex) that transmits 4 Byte of data. The data is used as value for variable kmh.

Whenever this message is received, the value of kmh variable is updated. Because the meter references the kmh variable, the meter needle will immediately show the received value. It's important to remember that the message length has to be the same for the display and the ECU. If only parts of the message are needed, use a constant with mask set to 0 to extend the message.
hmtoggle_plus1Create a New Page

In a next step a new page is added. Further the navigation between the two pages is defined.

 

•To create a new page use the right click context menu and choose New Page (50).

•A new page with name Page 1 is created (51).

•A new editor tab is opened showing the new page Page 1 (52).

2018-04-23_11h51_40

 

As you did in the first page:

•In the Properties window of the page change the name into Configuration (53).

•Add the training background 2 image from the Image Library and add it as a background image for the frame (54).

•The new page now has the selected background picture (55).

2018-04-23_13h51_08
hmtoggle_plus1Define Navigation Between Pages

The eight keys at the left and right screen border are called softkeys. You can place icons close to the softkeys into the Softkey Frame on the screen to describe the function of each softkey. The function can be triggered by pressing the appropriate key or by pressing the icon on the screen, if a touch screen is available.

Softkeys will be used for the navigation between the pages.

 

The Softkey Frames for the row of softkeys at the left and right screen border were created automatically. But you still need to create a softkey level to configure the keys. We will start with the Configuration page:

•Open the right click context menu of Softkey Frame Left and choose Create Softkey Level (56)

•Alternatively you can right-click on the Softkey Frame itself and select Create Softkey Level (57)

2018-04-23_14h02_01

Now we can start configuring the softkeys:

•Select the first Softkey in the project tree (58)upper left or in the editor (59)

•Drag & drop the file BUTTON_BACK.png from the Image Library on the Softkey, and in the context menu, select the softkey and then Released Image.

•Drag & drop the file BUTTON_BACK_pressed.png from the Image Library on the Softkey, and in the context menu, select the softkey and then Pressed Image.

2018-04-23_15h33_34

 

By switching the state of the Pressed State check box (62) you are able to view both softkey states in the editor. Make sure that the property is unchecked at the end.

 

Next step is to define a softkey event. The event should change to the Gauges page when the user presses (or rather, releases) the Softkey you just configured graphically:

•Select Softkey 1 in the Projects tree (63).

•Open the Events tab by clicking Events in the Properties window (64).

•Click the "..." icon of the OnRelease event (65).

2018-04-23_15h47_55

The Configure Events and Actions dialog opens.

•Un-check No Action (66).

•Select Jump To Page (67).

•Choose the Gauges page (67).

•Close window by clicking OK button (69).

2018-04-23_15h49_54

That's all for the page switch from the Configuration Page to the Gauges page.

We added two images, one for press and one for non-pressed state of the softkey. Further we defined the jump to page action for the softkey on the OnRelease event.

 

For the navigation from the Gauges Page to the Configuration Page please follow the same steps (56 to 69) to configure one of the softkeys of the Configuration page. The result should look like this:

2018-04-23_15h57_33
hmtoggle_plus1Let the User change the value

The display user shall be able to change the display backlight intensity. Here is what needs to be done:

•Drag the Linear Bargraph from the Palette (70) to the page editor (71).

2018-04-23_16h05_59

 

Change the following Properties of the Linear Bargraph:

•X Location: 239

•Y Location: 110

•Width: 164

•Height: 20

•Check Transparent

•Check Set As Input

•Uncheck Draw Target Line

•Uncheck Draw Ticks

 

To use the Linear Bargraph to change the display backlight intensity, we need to create a reference from the Linear Bargraph to the pre-defined variable @DispBacklightIntensity:

•Uncheck Hide pre-defined variables in the Variable View (72).

•In the Variable View search filed enter: disp (73).

•Drag the variable @DispBacklightIntensity from Variable View (74) and drop it on the Linear Bargraph (75). Alternatively, you could drop it on the Linear Bargraph entry in the project tree (77)

•A context menu appears. In the first level, select the Linear Bargraph 1 object. In the second level, choose Variable Reference (76).

•You can now check in the Properties of the object that the variable is set as the Variable Reference (78).

2018-06-05_10h32_40

When running the project on a real display device, the user can use the encoder to change the display backlight intensity. The intensity is changed immediately when the user changes the value of the Linear Bargraph.

 

Continue simulating and downloading the project