NI Tutorial 52139 En

Embed Size (px)

DESCRIPTION

national instrument

Citation preview

  • 1/16 www.ni.com

    1. 2. 3. 4. 5. 6. 7.

    1.

    2.

    Getting Started with Amulet DisplaysPublish Date: May 08, 2014

    Overview

    Amulet Technologies displays provide the ability to add touch panel interfaces to embedded systems. Using Amulet TechnologiesGEMstudio enables the creation of a user interface for the touch panel that runs entirely on the module, reducing the need forthe host application to continuously redraw the screen and map the touch interface. The Amulet Display API in LabVIEW 2013 orlater allows host applications or embedded targets such as a CompactRIO or Single-Board RIO to send and receive data from thetouch panel through USB or serial via NI-VISA. For more information regarding Amulet displays, please see .this white paper

    This tutorial will walk you through installing the Amulet software and hardware, creating a fully-functional touch panel applicationfor the Amulet display module using GEMstudio, testing the touch panel on the development computer, deploying it to themodule, developing LabVIEW code to communicate with the touch panel using the Amulet Display API, and performing systemdeployment.

    Table of Contents

    Software InstallationHardware InstallationGEMstudioProgramming HMI onto DisplayAmulet Display APISystem DeploymentConclusion

    1. Software Installation

    The Amulet Display API is available in VI Package Manager for LabVIEW 2013 or later. Installing the Amulet Display API willinstall the VIs to the palette, examples in Example Finder, and prompt you to install GEMstudio.

    Open VI Package Manager and search for .Amulet Display API

    Figure 1. Searching for theAPI in VI Package Manager

    Double-click the and press . Continue through the prompts and accept the license agreement.Amulet Display API Install

  • 2/16 www.ni.com

    2.

    3.

    4.

    Figure 2. Installing the AmuletDisplay API

    When the installation is finished, a prompt to install GEMstudio will appear. Select and follow the prompts to installOKGEMstudio.

    Figure 3. Installing GEMstudio

    Following GEMstudio installation, you will be prompted for a registration name and key. If you purchased NI Part Number783305-01, this registration key was sent to you via email following purchase. If you cannot find the email, please check yourspam box to ensure the email was not accidently marked as spam. Otherwise, please locate your order number from thepurchase order and contact .National Instruments support

    Figure 4. Activating GEMstudio

    Each example consists of a GEMstudio and LabVIEW project. To locate the GEMstudio projects, navigate to \GEMstudio Pro\LabVIEW Demos

    Each LabVIEW example explains which GEMstudio project needs to be deployed to your Amulet display module prior to runningthe example. 2. Hardware Installation

    During the development process, it is recommended that the Amulet Display module be connected to the development computer

  • 3/16 www.ni.com

    1. 2.

    1. 2.

    During the development process, it is recommended that the Amulet Display module be connected to the development computervia USB. The USB drivers will be installed when GEMstudio is installed.

    Connect a USB A to Mini-B cable between the development computer and the Amulet Display module.The drivers should automatically install successfully.

    3. GEMstudio

    GEMstudio allows for the creation of a graphical user interface through a drag-and-drop experience. Complete human-machineinterface (HMI) applications can be tested and deployed through GEMstudio.Upon launching GEMstudio, you are presented with several options.

    Figure 5.GEMstudio launch screen

    Create a New GEMstudio Project - Allows you to start a new GEMstudio project.Open Existing GEMstudio Project - Allows you to open an existing GEMstudio project, including examples.Launch LCD Profile Editor - This option is only present in the licensed version of GEMstudio. It allows you to create a newLCD profile if you are using a custom LCD display with the display module.Launch GEMcompiler - Allows you to compile existing HTML-based projects and program it onto the display module.Launch GEM Font Converter - Allows you to create an Amulet font file from any installed Windows font that you can use inany Amulet project.

    In this section, you will build a fully-functional user interface in GEMstudio. In later sections, you will deploy this interface to thetouch panel and develop LabVIEW code to communicate with the touch panel.This tutorial guides you to select a numeric value using a slider. LabVIEW will read the value of the slider, calculate 100 randomnumbers in the range 0 slider value, and send it for display on the touch panel on a LineGraph. In addition, the current time willbe display on the touch panel.

    Create a new GEMstudio project by clicking .Create a New GEMstudio ProjectIf you are developing with the Amulet display module (NI Part Number 783304-01 or 783305-01), ensure the settings in Table 1are enabled.

    Setting Value

    LCD Size 480x272

    LCD Manufacturer Amulet

    LCD Part Number STK-480272C

    LCD Rotation No1

    Board Name MK-480272C

  • 4/16 www.ni.com

    2.

    Board Name MK-480272C1 If your screen will be installed relative to the native orientation (ribbon cables on the bottom), set the LCD Rotation to theappropriate value. However, setting this value to any value other than No will require the Amulet OS to continuously redrawand recalculate the interface and touch panel.

    Table 1. Project Property Settings

    The remainder of the settings should use the default settings.

    Figure 6. Setting up the project properties

    The GEMstudio interface will load with a new project using the properties specified in the Project Properties dialog. The rightside consists of the canvas that allows for ability to design the user interface via drag-and-drop while the left side consists of theproperty pane that lists the details and functions for each widget and page created.

  • 5/16 www.ni.com

    2.

    3. 4.

    5.

    Figure 7.GEMstudio interface with the canvas on the right and properties pane on the left

    Adding widgets (prebuilt navigation, controls, and indicators) can be done by clicking the button in the lower left corner of+GEMstudio.Add static text to the canvas by clicking .+Static TextModify the properties of the static text by changing the property to and to .text Time: fontStyle Bold

    Figure 8.Modifying StaticText properties

    Use the justification and alignment tools in the toolbar to right justify and align the text in the middle.

  • 6/16 www.ni.com

    4.

    5.

    6. 7. 8.

    9.

    10.

    Use the justification and alignment tools in the toolbar to right justify and align the text in the middle.

    Figure 9.Justification and alignment tools

    Add another static text by repeating steps 3-5. Set the property as .text AmplitudeGet numeric input from the user by adding a slider via .+WidgetsSliderIn order to enable the LabVIEW Amulet Display API to read the value of the slider, the value of the slider must be written to theinternal memory of the display module via a function call. Click on the property to open the Event Method List window tohrefcreate this function.

    The Amulet OS makes space in the internal memory available to the module via internal RAM. Table 2 lists the number ofinternal RAM variables and data types that the OS provides.

    Amulet Data Type Size LabVIEW Data Type Number of Internal RAMVariables

    Byte 8 bits U8 256

    Word 16 bits U16 256

    Color 32 bits U32 256

    String 25 character, null terminated String 256Table 2. Amulet Internal RAM Variables

    The Event Method List window can be used to define function calls that allow widgets to read or write from internal RAM. Formore information on the Amulet internal RAM, please see .Amulet's websiteIn the Event Method List window, press tab to show the autocomplete window. It is recommended that you complete thefunction call prior to providing parameters or else you cannot autocomplete the function call.Complete the function call in the Event Method List to read:

    Amulet:internalRAM.byte(x).setValue(intrinsicValue)

  • 7/16 www.ni.com

    10.

    11.

    12.

    13. 14.

    15.

    Figure 10. Entering the function call for the slider to store its value to internal RAM byte variable 0

    intrinsicValue will return the current value of the widget.Change the to . The final function call should read the following:x 0

    Amulet:internalRAM.byte(0).setValue(intrinsicValue)

    Figure 11. Completed function call for slider

    Press .DoneThis function call specifies that the value of the internal RAM byte variable 0 will be set by the value of the slider. The AmuletDisplay API in LabVIEW can read the current value of the slider by reading from this variable.The slider does not include the ability to display the current value on the interface. A NumericField widget can be used todisplay numeric information on the front panel. GEMstudio allows us to link the NumericField to the value of the slider via theinternal RAM without host intervention.Add a NumericField widget by clicking .+WidgetsNumericFieldThe numeric field should display the current value of the slider, which is residing in byte 0 of the internal RAM. Create afunction call to get the value of byte 0 of the internal RAM by clicking on the property to open the Event Method Listhrefwindow.Complete the function call by using the tab key to display the options and show the following:

    Amulet:internalRAM.byte(x).value()

  • 8/16 www.ni.com

    15.

    16. 17.

    18.

    19. 20.

    21.

    Amulet:internalRAM.byte(x).value()

    Figure 12. Completed function call for the numeric field

    Change the parameter to in order to display the correct value in the numeric field.x 0Press .DoneTest the functionality of the interface thus far by running the interface in the GEMstudio emulator. Push in the lower rightRuncorner of GEMstudio.

    Figure 13. Testing the interface in the GEMstudio emulator

    Move the slider in the emulator. The numeric field should update with the correct value of the slider as it is moved. You mayneed to reposition the widgets on the canvas so they do not overlap.Numeric data can be exchanged between the Amulet display module and the host application by using either bytes, words, orcolors. To display string data, the string data type should be used. In this project, the current time will be sent from the host as astring and displayed on the touch panel.Add a StringField widget by clicking .+WidgetsStringFieldThe string field should display the current time that the host placed in string variable 0 of the internal RAM. Create a functioncall to read the value of string variable 0 by clicking on the property to open the Event Method List window.hrefComplete the function call by using the tab key to display the options and show the following:

    Amulet:internalRAM.string(x).value()

    Change the parameter to in order to display the correct value in the string field.x 0

  • 9/16 www.ni.com

    21.

    22. 23.

    24. 25.

    26.

    Figure 14. Completed function call for the string field

    Press .DoneTest the interface to make sure the slider still works as expected. The current time will not be populated since there is no hostapplication yet.To finish the interface, display a graph of 100 random numbers generated by the host application. GEMstudio allows forarrays by utilizing consecutive internal RAM variables starting at a specific index. The host application will place 100 16-bitnumbers in the internal RAM starting at index 0.Add a LineGraph widget by clicking .+WidgetsLineGraphBy default, the line graph does not display an axis. Right-click on the LineGraph widget in the properties pane and select

    .Add/Remove Parameter

    Figure 15.Showing additional parameters for the line graph

    Enable the parameter by checking the checkbox. Press .showAxis Save

  • 10/16 www.ni.com

    26.

    27.

    28.

    29.

    Figure 16. Enabling the showAxis property for the line graph

    Check the property and change to . This will allow you to display all 100 samples on the graph withshowAxis xSamples 100the axis shown.

    Figure 17.Modifying the properties of the line graph

    Display the data from the internal RAM on the graph by creating a function call that reads 100 values starting at word variable0. Click on the property to open the Event Method List window.hrefComplete the function call using the tab key to display the options and show the following:

    Amulet:internalRAM.words(x).array(y)

    x is the starting index and y is the number of values. Change to and to .x 0 y 100

  • 11/16 www.ni.com

    29.

    30. 31.

    32.

    1.

    Figure 18. Completed function call for line graph

    Press .DoneUse the mouse, alignment tools, and justification tools to arrange the user interface to look like Figure 19.

    Figure 19.Completed user interface in GEMstudio

    Test the interface to make sure the slider still works as expected. The graph will not display data since there is no hostapplication yet, but it should display the axis.

    4. Programming HMI onto Display

    After testing the interface, it can be programmed onto the Amulet Display module flash through GEMstudio. Programming theHMI onto the display will allow the interface to start up automatically on module powerup.

    Push in the lower right corner of GEMstudio.Program

  • 12/16 www.ni.com

    1.

    2.

    3. 4.

    5.

    1. 2. 3.

    Figure 20. The Program Flash dialog

    Select the COM port the Amulet Display module is connected to. If the module is connected via USB, it will be the Amulet USBto Serial Converter. If the display module is not listed, ensure that the driver was installed correctly.Verify the LCD and OS settings. This information is extracted from the project settings.Push . If the OS settings on the Amulet Display module are incorrect, you will be prompted to reprogram theProgram ProjectOS. If so, reprogram the OS and then reprogram the flash with your project.Verify the numeric field updates with the correct values from 0 to 255 as the slider is moved on the touch panel.

    5. Amulet Display API

    The Amulet Display API in LabVIEW 2013 or later enables communication between a host application and the Amulet Displaymodule connected via USB or serial. Because the communication with the Amulet Display module occurs via USB or Serial withNI-VISA, this API can be used on a host computer or a real-time target. This section will create a LabVIEW application that willcommunicate with the interface designed in the previous section.

    Create a new LabVIEW VI by going to in LabVIEW.FileNew VISwitch to the block diagram. Open the Amulet Display API in .Functions PaletteConnectivityAmulet Display APIPlace an Amulet VISA Open and create a control for the VISA resource name. This will open a connection to the AmuletDisplay module through the COM port you specify.

  • 13/16 www.ni.com

    3.

    4.

    5.

    Figure 21. Openinga connection to the Amulet Display module

    Place an Amulet Write InternalRAM. This polymorphic VI can write to any of the Amulet internal RAM variables. Write thecurrent time to string variable 0 by selecting the Amulet Write String instance of the polymorphic VI. The current time can beobtained by using Get Date/Time in Seconds in conjunction with Format Date/Time String. Wire the Amulet Resource Nameand error wires from Amulet VISA Open.

    Figure 22. Writingthe current time to internal RAM string variable 0

    Place an Amulet Read InternalRAM. This polymorphic VI can read from any of the Amulet internal RAM variables. Read thevalue of the slider from byte variable 0 by selecting the Amulet Read Byte instance of the polymorphic VI. Wire the AmuletResource Name and error wires from Amulet Write InternalRAM.

  • 14/16 www.ni.com

    5.

    6.

    7.

    Figure 23: Readingthe current value of the slider from internal RAM byte variable 0

    Generate 100 random numbers scaled by the value of the slider using a For loop and Random Number (0-1).

    Figure 24.Calculating 100 random numbers and scaling them based on the slider value

    Place an Amulet Write InternalRAM. Convert the double-precision random numbers to unsigned words and write it to theAmulet internal RAM words starting at variable 0 using the Amulet Write Word Array instance of the polymorphic VI. Theconversion to unsigned words can be done using the To Unsigned Word Integer primitive. Wire the Amulet Resource Nameand error wires from Amulet Read InternalRAM.

  • 15/16 www.ni.com

    7.

    8.

    9.

    Figure 25. Writingthe random numbers to internal RAM word variables starting at variable 0

    Place an Amulet VISA Close. This will close the connection to the Amulet Display module. Wire the Amulet Resource Nameand error wires from Amulet Write InternalRAM. Display any errors at the end with a Simple Error Handler.

    Figure 26. Closingthe connection to the Amulet Display module and displaying errors

    Drag a while loop around the Amulet Read/Write InternalRAM Vis and supporting code. This program should continuouslygenerate data until directed to stop by the user. Add a control to the condition terminal.

  • 16/16 www.ni.com

    9.

    10.

    11. 12.

    Figure 27.Continuously read and write data to and from the Amulet Display module

    Add timing to the loop by forcing the loop to execute every second with a Wait (ms).

    Figure 28. CompletedLabVIEW code with timing

    Switch to the front panel. Select the COM port that the Amulet Display module is connected to and run the VI.The current time and 100 points of random data should be display on the interface. As the slider value is changed, the relativeamplitude of the random data should also change.

    6. System Deployment

    During the development process, it is recommended that the user interface be deployed to the module through GEMstudio andthe USB port. As deployment nears, embedded deployment is the preferred deployment method since the module will most likelybe integrated into the system and a USB connection not ideal due to lack of retention. The Amulet Display module contains amass termination connector on the bottom that allows for the development of a custom hardware interface such as a PCB or cableinto the final application. This mass termination connector provides access to the serial communication pins, power, and DIOavailable within the Amulet OS. National Instruments also offers an interface board (NI Part Number 783306-01) that allows datato be transferred via a DB9 serial connector with built-in retention and a power connector that enables the display to be connectedto the same power supply input voltage as a RIO-based product. More information about the mass termination connector on theAmulet Display module can be found in .the module's datasheetTo programmatically deploy the user interface using the Amulet Display API in LabVIEW, a .PDB display file can be created inGEMstudio. The PDB file contains all the files required to remotely program the entire user interface and can be created inGEMstudio by choosing . This file can then be remotely deployed or transferred to the target andFileSave As Production Filelocally deployed. For more information on the deployment methods, please see .this white paper 7. Conclusion

    This tutorial discussed the implementation of a fully-featured touch panel application driven by data made available to the host. Byprogramming the user interface with GEMstudio, we can read or write from variables in the internal memory of the AmuletDisplay module. Using the Amulet Display API in LabVIEW, we can access this internal memory in order to provide interactiveuser interfaces in any embedded project.