Mx-Suite Help

HMI Panels

Hide Navigation Pane

HMI Panels

 This is the first topic This is the last topic No directory for this topic Expand/collapse all hidden text  

HMI Panels

 This is the first topic This is the last topic Topic directory requires JavaScript JavaScript is required for expanding text JavaScript is required for the print function Mail us feedback on this topic!  

HMI panels enable you to create a computer-based user interface that looks like the actual Human-Machine Interface of the final control system.

Click to expand.
Click to expand.

The Mx‑VDev HMI panel offers a simple approach to creating a PC-based animation of the graphic interface to your controller (such as an instrument cluster, center-stack display, or navigation system). Input can be accepted by clicking active components on the panel and outputs such as gauges and tell-tales are displayed and changed as tests are run. The HMI Panel active components can be linked to any stimulus or response Signals that are available in the Signal Dictionary.

To get started, you need digital images of your display (such as bmp or png files) in its different operational states. Create a library of images of the active and background components of your display. There are many sources for the display images. They include: a digital camera, sample images, design tools like GLStudio and Altia, and graphic editors such as Photoshop.

The following types of controls are supported:

•Gauge with Needle
•Tell-tale such as a warning light or turn indicator
•Numeric display such as an odometer
•Button
•Bitmap display

You can see an example of an Mx-HMI panel in the Door Turn Scenario.

1.Open the DoorTurnSample Project.  See Sample Projects Overview.
2.Open the Scenario named: TestScenarioRPM_HMI.mxs
3.Open the HMI panel named Cluster.mxhmi (in the HMI folder).
4.Click the RTClock_button button on the Simulation toolbar to switch to RT Clock.
5.On the Simulation toolbar click the Run button.

Briefly, this is how it works:

Start with the digital artwork of the HMI.

Create the mxhmi file with a tool such as Notepad or Visual Studio. The mxhmi file is an XML file. Use the sample file as a template.

You should see the HMI Panel animate as the test case executes.

hmtoggle_plus1Sample XML Code

Use the Background tag to specify the HMI artwork file.

For all controls (widgets), the SigName tag specifies the Signal that operates the control.

The XML code for a gauge looks like this:

<Widget>

<SigName>VehSpeedPercetage</SigName>

<Region x="451" y="136" width="88" height="24" />

<Gauge Name="Vehicle Speed Gauge">

<Needle Start="150" End="391">

<Image>.\HMI_Images\Needles\Needle2.png</Image>

<Center x="18" y="12" />

</Needle>

</Gauge>

</Widget>

The region coordinates specify the location of the gauge in the HMI in pixels. The needle start and end indicate the range of rotation in degrees for the needle. The center coordinates specify the pivot point of the needle in pixels relative to the corner of the needle image. You can use your own images for needles (and other controls) or use the sample images provided in the TurnDoorSample project.

<Widget>

<SigName>L_front_turn_lamp</SigName>

<Region height="25" width="33" y="129" x="245" />

<Icon Name="L turn LED">

<IconGlyph Name="LED Off">

<Image>.\HMI_Images\TurnOff.bmp</Image>

<IconSrc height="25" width="33" y="0" x="0" />

</IconGlyph>

<IconGlyph Name="LED On">

<Image>.\HMI_Images\TurnLtOn.bmp</Image>

<IconSrc height="25" width="33" y="0" x="0" />

</IconGlyph>

</Icon>

</Widget>

The region coordinates specify the location of the tell-tale in the HMI in pixels. The two images are of the tell-tale in the Off and On states. You can use your own images or use the sample images provided in the TurnDoorSample project.

<Widget>

        <SigName>DispNum_Out1</SigName>

        <Region x="490" y="200" width="19" height="26" />

        <Icon Name="Disp Number">

           <IconGlyph Name="Num=0">

              <Image>.\HMI_Images\SevenSeg0-9.gif</Image>

              <IconSrc x="156" y="0" width="19" height="26" />

              <IconDst x="0" y="0" width="10" height="13" />

           </IconGlyph>

           <IconGlyph Name="Num=1">

              <Image>.\HMI_Images\SevenSeg0-9.gif</Image>

              <IconSrc x="0" y="0" width="3" height="26" />

              <IconDst x="7" y="0" width="2" height="13" />

           </IconGlyph>

           <IconGlyph Name="Num=2">

              <Image>.\HMI_Images\SevenSeg0-9.gif</Image>

              <IconSrc x="4" y="0" width="19" height="26" />

              <IconDst x="0" y="0" width="10" height="13" />

           </IconGlyph>

           <IconGlyph Name="Num=3">

              <Image>.\HMI_Images\SevenSeg0-9.gif</Image>

              <IconSrc x="23" y="0" width="19" height="26" />

              <IconDst x="0" y="0" width="10" height="13" />

           </IconGlyph>

           <IconGlyph Name="Num=4">

              <Image>.\HMI_Images\SevenSeg0-9.gif</Image>

              <IconSrc x="42" y="0" width="19" height="26" />

              <IconDst x="0" y="0" width="10" height="13" />

           </IconGlyph>

           <IconGlyph Name="Num=5">

              <Image>.\HMI_Images\SevenSeg0-9.gif</Image>

              <IconSrc x="61" y="0" width="19" height="26" />

              <IconDst x="0" y="0" width="10" height="13" />

           </IconGlyph>

           <IconGlyph Name="Num=6">

              <Image>.\HMI_Images\SevenSeg0-9.gif</Image>

              <IconSrc x="80" y="0" width="19" height="26" />

              <IconDst x="0" y="0" width="10" height="13" />

           </IconGlyph>

           <IconGlyph Name="Num=7">

              <Image>.\HMI_Images\SevenSeg0-9.gif</Image>

              <IconSrc x="99" y="0" width="19" height="26" />

              <IconDst x="0" y="0" width="10" height="13" />

           </IconGlyph>

           <IconGlyph Name="Num=8">

              <Image>.\HMI_Images\SevenSeg0-9.gif</Image>

              <IconSrc x="118" y="0" width="19" height="26" />

              <IconDst x="0" y="0" width="10" height="13" />

           </IconGlyph>

           <IconGlyph Name="Num=9">

              <Image>.\HMI_Images\SevenSeg0-9.gif</Image>

              <IconSrc x="136" y="0" width="19" height="26" />

              <IconDst x="0" y="0" width="10" height="13" />

           </IconGlyph>

        </Icon>

     </Widget>

For a multi-digit display such as an odometer, the code above must be repeated for each digit. For an example, see the cluster.mxhmi file in the HMI folder in the TurnDoorSample project folder.

The Region coordinates specify the location of the digit in the HMI in pixels.

The IconSrc coordinates specify the location of the digit to be extracted from the source image (SevenSeg0-9.gif in this example).

The IconDst width and height values scale the size of the displayed image. The coordinates specify the location of the extracted image within the region, usually 0, 0.

This code implements a button that causes a transition on the reset Signal when clicked.

<Widget>

<SigName>reset</SigName>

<Region height="38" width="37" y="222" x="554"/>

<Button Name="Reset">

<ButtonGlyph Name="Button OFF">

<Image>.\HMI_Images\Button1Up.png</Image>

<ButtonSrc height="38" width="37" y="0" x="0"/>

</ButtonGlyph>
<ButtonGlyph Name="Button ON">

<Image>.\HMI_Images\Button1Dn.png</Image>

<ButtonSrc height="38" width="37" y="0" x="0"/>

</ButtonGlyph>

</Button>

</Widget>

The region coordinates specify the location of the button in the HMI in pixels. The ButtonGlyph images are of the button in the Off and On states. You can use your own images or use the sample images provided in the TurnDoorSample project.

<Widget>

<SigName>LCD Bitmap Buffer</SigName>

<Region height="40" width="140" y="190" x="230" />

<MessageImage Name="TestImage" ActualHeight="40" ActualWidth="140" Format="MonBitmap">

<BorderColor>

<Image />

</BorderColor>

</MessageImage>

</Widget>

The region coordinates specify the location of the display in the HMI in pixels.

See Comparing Image Signals