Creating a Layout

From OpenMBD
Jump to: navigation, search


Creating a Layout

HANtune allows users to create a layout, also referred to as a dashboard. Different windows can be added to this layout in which data can be displayed or sent. The windows are divided into three groups; Editors, Viewers and Markup Windows.

Editors

  • ButtonEditor
  • MultiEditor
  • RadioButtonEditor
  • SliderEditor

Viewers

  • BarViewer
  • BooleanViewer
  • GaugeViewer
  • LedViewer
  • MultiLedViewer
  • MultiViewer
  • ScopeViewer
  • TextViewer
  • ImageManipulatorViewer

Markup Windows

  • TextMarkup
  • ImageMarkup


All these HANtune windows share some common features, such as the option to change the appearance of a window (by clicking "Window" in the right mouse button context menu).

Editors

Editors are HANtune windows which can be used to send data. It will display the data it has sent last. Unlike viewers, Editors will not update periodically but rather send their data after a user command (e.g. pressing the “enter” key). Editors can be created by either a right-click or a drag-and-drop action on an XCP Parameter or a DBC CAN signal. Multiple parameters can be added or removed from one editor by using the right-mouse-button context menu, or drag-and-drop other parameter(s) or CAN-signals(s) on the editor. Please note that not all editors are capable of handling multiple parameters or signals.

MultiEditor

A MultiEditor can be used to adjust parameter values. This is the most basic editor in HANtune. Values can be adjusted by using the two little arrow keys or by directly typing in the text box and pressing enter. The MultiEditor is capable of handling multiple parameters or CAN-signals.

MultiEditor.png


SliderEditor

A SliderEditor can be used to adjust parameter values. Values can be adjusted by using the slider with either the arrow keys or grabbing it with the mouse. Sliding the slider will cause the new values to be sent with at most 10Hz. The SliderEditor is capable of handling multiple parameters or CAN-signals.

SliderEditor.png


ButtonEditor

The ButtonEditor needs to be configured first before it can be used. The “active” (button pressed) and “inactive” (button unpressed) values and texts need to be defined first. This editor will show the value which has been sent last to the left of the button. The ButtonEditor is capable of handling multiple Parameters or CAN-Signals.

ButtonEditor.png


RadioButtonEditor

The RadioButtonEditor needs to be configured first before it can be used. Each radiobutton needs to get a value assigned. Optionally the text can be changed as well. When connected, it will show the value which has been sent last to the left of the radiobutton. The ButtonEditor is capable of handling multiple Parameters or CAN-Signals.

RadioButtonEditor.png


Viewers

Under the header “Signals” are all the signals as described in the ASAP2 file. For each signal different viewers can be selected to visualize them. Right clicking a signal shows a list with available viewers. Some viewers have multiple options which can be accessed by right clicking on the viewer. Multiple signals can be added or removed from one viewer by using the menu.

MultiViewer

A MultiViewer can display multiple signals. The visualization type depends on the type of parameter.

MultiViewer.png


DigitalViewer

A DigitalViewer can display values as numbers. It can display Decimal, Hexadecimal or Binary values. The number of decimals to display can be adjusted.

DigitalViewer.png


BooleanViewer

A Boolean viewer can only display two values. The color can be adjusted and also the method of triggering: Turn on above or below a limit.

BooleanViewer.png


BarViewer

A BarViewer displays values by filling a bar, it also show the exact value below the bar. Options are: adjusting the upper limit, lower limit, the color and the use of sub ranges.

BarViewer.png


GaugeViewer

A GaugeViewer displays values by using a dial. Options are: adjusting the upper limit, lower limit, the color and the use of sub ranges.

GaugeViewer.png


ScopeViewer

A ScopeViewer displays a value at a certain time by using a graph. Multiple signals can be displayed in a single scope. Options are: adjusting the lower limit, the upper limit, the interval time, the use of auto scaling and a hold option which then can be used to save an image of the scope.

ScopeViewer.png


MultiLedViewer

A MultiLedViewer uses a led and a numeric representation to display a value. It has the option to adjust the colors and the limit of the led’s.

MultiViewer.png


ImageManipulatorViewer

An ImageManipulatorViewer uses an image that is provided by the user. This image can be manipulated based on a signal to visualise values.

ImageManipulatorViewer.png


Markup windows

TextMarkup

A TextMarkup is neither an editor nor a true viewer as it is not linked to an ASAP2 reference. It is basically a window which can be used to show additional markup information on a tab. TextMarkup can be added by using the “Window menu” or by pressing Ctrl+L. You can type text inside the window and by using the right mouse click menu you can use different options. Options: Modify font (the font of the entire window changes) Modify font color (the font color of the entire window changes) Toggle frame (the window is not resizable after removing the frame) Toggle 1 px border Toggle background (turns on a white background, default is transparent) Send to back (useful when using multiple TextMarkup windows on top of each other) Notes: When a TextMarkup overlaps a viewer or editor you cannot select it anymore.

ImageMarkup

ImageMarkup is a window in which an image can be displayed. I it always displayed behind other components. Usage: Right click inside the window and select “Choose an Image”. A file chooser will open for selecting an image. Only png, jpg, jpeg and bmp file types are allowed. Images fill the entire window and can be resized by resizing the window. There is an option for scaling the images which will keep the aspect ratio of the image and it can also be sued for returning to the original dimensions. It is advisable to keep the images in a folder with the project file or in the images folder with HANtune to prevent loss of images on layouts.


Creating and loading a layout

Before one can start adding windows, a layout has to be created and loaded. To do so, start by right-clicking 'Layouts' in the left panel of HANtune. Then click on 'New Layout'.

New Layout.png


Doing so will prompt a pop-up in which a layout-name can be defined. Naming your layout is convenient, but not required. Click 'Ok' to continue.

Name Layout.png


Your layout is now created, but not yet active. If it was active, the layout-name would be displayed in a bold font in the left panel.

Layout Created.png


To load the layout, right-click it and select 'Load Layout'.

Load Layout.png


The layout is loaded. As already mentioned, the layout name should now be displayed in a bold font. Its name should also show in a tab (indicated with the cursor in the image).

Layout Loaded.png


Adding a window to the layout

The following instructions are based on adding an ImageManipulatorViewer, but can be applied to any other window. Before adding a window, make sure a layout is created and loaded. To add an ImageManipulatorViewer, click 'Window' and then 'New Viewer'. A pop-up menu will appear, from which ImageManipulatorViewer can be selected.

Adding an ImageManipulatorViewer


Alternatively, one can add an ImageManipulatorViewer by right-clicking the layout. This will display a pop-up menu in which 'New Viewer' and then 'ImageManipulatorViewer' should be selected.

Adding an ImageManipulatorViewer by right-click


Another possibility is to select one or more ASAP2-elemtens in the left panel and dragging them in to the layout. In the menu that will pop up, select 'ImageManipulatorViewer'.

Adding an ImageManipulatorViewer by dragging ASAP2-element(s)


Adding an image to an ImageManipulatorViewer

Note: the following steps only apply to the ImageManipulatorViewer.

Once the ImageManipulatorViewer had been added to the layout, an image can be added. Right-click on the ImageManipulatorViewer and select 'Choose an image'.

Choose image to add to ImageManipulatorViewer


After finding the desired image, click on 'Open' to load the image.

Open image to add to ImageManipulatorViewer


Note: The following fileformats are supported:

  • .png
  • .gif (non-animated)
  • .bmp
  • .jpeg


Your image should now be displayed in the layout.

Chosen image is loaded into ImageManipulatorViewer



Arranging HANtune windows

The main screen of HANtune consists of windows, these can be editors, viewers or markup windows. These windows have the same layering principle as the objects in Microsoft Office. In the right mouse button context menu of all HANtune windows a “Window” menu item can be found. This contains all generic HANtune window functionalities, like ordering the windows above or under each other. This is particularly useful when using the markup windows. HANtune has three main layers: background, default and foreground (“Move to Layer” option). Within each layer, the HANtune windows can be put forwards or backwards relative to each other, within the same layer (Move to front/back option).

Move to front/back

In the following example demonstrates how markup windows and layering could be used. A textMarkup window is used as a colored background, causing the visual effect of a “container”. Other textMarkup windows containing the bold texts are placed on top of it, indicating the groups of editors. Also the editors themselves are placed on top the same colored textMarkup windows. (similar to the gauges)


DashBoardExample.png

Create the red background

In the top of HANtune, click “Window” --> “New TextMarkup”. A new textMarkup window will be added to the active HANtune layout. Press ctrl+R to enable the “Resize and Move” mode and position and size the window. Press ctrl+R again to return to normal mode. Right click the window, choose “Window” --> “Background” and check the item “Visible” Right click the window, choose “Window” --> “Background” --> “Color” to set the background color.


Add texts to the red background

In the top of HANtune, click “Window” --> “New TextMarkup”. A new textMarkup window will be added to the active HANtune layout. Press ctrl+R to enable the “Resize and Move” mode and position and size the window to where the text should appear. Press ctrl+R again to return to normal mode. Right click the window again, choose “Modify Text”. Enter the text to be shown. Note: “Enter” will add a new line. To stop editing, click anywhere else in HANtune. (Window loses focus) If desired, the right click context menu can also be used to modify the text color and font.

Add the editors

Drag and drop a parameter or CAN-signal to the layout to create an editor. Use ctrl+R (Resize and move mode) to position and size the editor To show the background color through the editor, right click the editor, choose “Window” --> “Background” and deselect “Visible”.

Arrange the windows in the right order

Right click the editor which should be moved to the front or back Choose “Window” --> “Move” and use “Move to front (current layer)” or “Move to back (current layer)” to arrange the windows in the right order.

Layers

DashBoardLayers.png

Additional to the arrangement relative to other windows, HANtune also has a background and foreground layer. Components located in the foreground layer will always appear on top of windows residing in the default layer or the background layer. To move a window to a specific layer, right click that window, choose “Window” --> “Move” --> “Move to Layer”. The following image visualizes the principle: