Academic Company Events NI Developer Zone Support Solutions Products & Services Contact NI MyNI

Document Type: Tutorial
NI Supported: Yes
Publish Date: Aug 3, 2008

Creating HMI pages for LabVIEW Touch Panel Module

0 ratings | 0.00 out of 5
Print

Overview

This document describes how to create a Human Machine Interface Page using the LabVIEW Touch Panel Module

Table of Contents

  1. Background and Scope
  2. Implementation
  3. References:

Background and Scope

As described in the An HMI Architecture Overview document, a Human Machine Interface (HMI) provides an operator with a graphical user interface (GUI) for monitoring a machine's state and operating parameters and setting control parameters.   

This document is intended for programmers who want to learn more about building UI pages using the Touch Panel Page Development Component (TPD) with LabVIEW Touch Panel Module.  For an overview of the other components of a touch panel-based HMI, please see the document An HMI Architecture for LabVIEW Touch Panel Module.

Implementation

In LabVIEW Touch Panel Module, HMI pages are implemented as LabVIEW VIs, where the   front panel displays the UI elements for the page.   The UI elements are linked to other HMI components using the current value table (CVT) programming interface.

The following sections describe how to create the page VI code using the CVT and the Touch Panel Page Development (TPD) components.

 

Building the User Interface

The first thing to do when building an HMI page is to set the front panel dimensions.  Since a front panel can be bigger than the HMI’s display, it is important to constrain our UI elements to specific boundaries.  For example, when using the NI TPC-2012 HMI the size of the LabVIEW’s Front Panel needs to match the TPC’s resolution, which is 800x600 pixels. 

The second step is to select the UI elements that will be used to implement the functions controlled by the page.  The most common User Interface elements include:

- Navigation Buttons

- Control Buttons 

- Alarm Displays

- Images

- Constant Free Text Labels

- Text Indicators

- Data Entry Objects (i.e. keypads)

The Touch Panel Page Development (TPD) example includes a page VI that uses each of these elements.

Figure 1 shows a sample page containing a typical set of UI elements.  Note that a good UI design follows a convention for the UI look and feel.  In this example, red boolean buttons represent controls; when the operator presses any of them, it causes a control parameter or state change in the machine controller.  The blue buttons are navigation buttons that cause the HMI to navigate to a different page. Other UI elements shown in Figure 1 include string indicators (Alarm Footer, and the Sequence results in blue) and a LabVIEW Chart.

 

Figure 1. HMI Page- LabVIEW VI’s Front Panel

Block Diagram Design Pattern

An HMI page’s block diagram can be structured using a sequence with three frames: Initialization, Operational and Cleanup.  Each frame interacts with the UI elements and tags in different ways. 

Figure 2. Block Diagram Structure

The first frame is the Initialization frame.   This is where the UI elements are initialized by reading the tags’ current value and label property. 

The second (Operational) frame is where the code representing the page functionality is executed.   The Operational frame has an event structure that waits for user-generated events from the front panel.  For each UI control (input) there must be a corresponding event case to handle the operator input.

The event structure timeout case includes the code for updating UI indicators by scanning the corresponding tag values. The timeout period defines the UI update rate.

Lastly, the third (Cleanup) frame is where UI elements are reset to the default state so that stale information will not be displayed the next time the user visits the page.  

Figure 3 shows the block diagram code for the example page that installs with the Touch Panel Page Development (TPD) Component.

 


[+] Enlarge Image

Figure 3. Example Page  Block Diagram

 

TPD

The user interface uses TPD API to write and read values from tags and update UI elements.  This API uses the current value table (CVT) to exchange data with other HMI components.  Please refer to the document A Current Value Table for LabVIEW  for more information about the CVT.

 

Figure 4. TPD palette

 

The following paragraphs describe the operation of the TPD API VIs.

TPD Set Language – This VI receives as an input an Enum control with the selected language.  By default the TPD comes with English and Spanish support but other languages can be added if the user.lib/_hmi_shared/hmi_Languages.ctl control is modified.   If no Language is chosen, English is the language selected. 

The language support is provided in the Label field for the tag configuration.  This field is read by the API and parsed depending on the language selected.

TPD Init Free Label – This VI is intended to be used in the Initialization frame for string indicators used as free labels.  The idea of using these string indicators is to modify the text in them depending on the selected language.  Therefore this VI should be called for each free label as part of the page initialization frame.

TPD Init Ctrl - This VI is used to initialize each front panel UI elements with the tag default value. In the case of string controls or indicator and Boolean buttons, it also initializes the text depending on the selected language.

TPD Read Tag – This VI reads a tag value from the CVT and updates the value of a specific UI indicator.  The inputs to this VI are:

  1. Ctrl reference - The reference to the LabVIEW indicator that will be updated with the tag value.
  2. Tag name - If the indicator label is the same as the tag name, then this input is not used.  To use this input, provide an alternate tag name and set the Diff Tag? input to TRUE.
  3. Diff Tag? – This input controls whether the indicator label is used as the tag name.  The default value is FALSE, indicating that TPD Read Tag should use the indicator label tag name.

TPD Write Tag – This VI writes a UI control value to a CVT tag. The inputs to these VI are:

  1. Ctrl reference - The reference to the LabVIEW control that will be used to update the tag value.
  2. Tag name - If the control label is the same as the tag name, then this input is not used.  To use this input, provide an alternate tag name and set the Diff Tag? input to TRUE.
  3. New Value – This input is wired to the LabVIEW control that will update the tag.
  4. Diff Tag? – This input controls whether the indicator label is used as the tag name.  The default value is FALSE, indicating that TPD Read Tag should use the indicator label tag name.

 

Alarm Engine TPD API

The Touch Panel Alarm Engine (TAE) component installer adds a subpalette to the TPD API palette.  This subpalette provides VIs for reading and displaying alarms.  These VIs read a global variable (TAE_AlarmStatusGV.vi) that contains the alarm status and format string that can be used in alarm indicators.  The TAE provides a history of up to 40 alarms.

This global variable is also available in the TAE’s main palette.

 

Figure 5. TPD Alarm Engine palette

 

-TPD Format Active Alarms Display – This VI accepts an array of string indicator references and formats them to display the current alarms in alarm summary format.

- TPD Format Alarm History Display – This VI receives an array of string indicator references and formats them to display a summary of active and inactive alarms.  Active alarms are shown in RED while inactive alarms are shown in GREEN. 

-TPD Format Alarm Ticker – This VI receives a single string indicator reference and formats it to display the latest active alarm.  This VI requires the existence of a tag No_Active_Alarms that is used when there are no active alarms.

The example that installs with the TPD component contains examples of these alarm displays.

For more information about the TAE, reference the document An Alarm Engine for the LabVIEW Touch Panel Module  .

 

HMI Navigation Engine

The HMI Navigation Engine (HNE) component provides an API for selecting the next page to display (see Figure 6) when navigating away from the current page.


[+] Enlarge Image

Figure 6. HNE API to specify the name for the next page


Refer to the documentAn HMI Navigation Engine for LabVIEW for a more detailed description of how the HNE works.

References:

     

0 ratings | 0.00 out of 5
Print

Reader Comments | Submit a comment »

 

Legal
This tutorial (this "tutorial") was developed by National Instruments ("NI"). Although technical support of this tutorial may be made available by National Instruments, the content in this tutorial may not be completely tested and verified, and NI does not guarantee its quality in any way or that NI will continue to support this content with each new revision of related products and drivers. THIS TUTORIAL IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND AND SUBJECT TO CERTAIN RESTRICTIONS AS MORE SPECIFICALLY SET FORTH IN NI.COM'S TERMS OF USE (http://ni.com/legal/termsofuse/unitedstates/us/).