NXP Rapid IoT Display Page Guide

This guide teaches you how to add NXP display embedded elements to a project to build pages for the NXP Rapid IoT’s display. This includes adding the display’s pages, connecting their button interactions, structuring the page navigation.

This guide demonstrates a project that has five pages to navigate to, with a home page, three pages displaying sensor data (temperature, ambient light, and air quality), and one page that allows you to toggle the hardware’s buzzer on and off.

If you are unfamiliar with using NXP display elements and how they work, it is recommended to read the NXP Display Elements Guide before attempting this guide. This guide provides a complete overview on using the NXP display elements, how they work to add pages to the display, and how to set up the display's page navigation.

Hardware Requirements

  • NXP Rapid IoT Prototyping Kit

Software Requirements

  • None

This project does not use Studio’s Application View to build an interface, use cloud connectivity, or require the device to be registered to Atmosphere, so the Atmosphere IoT app is not needed for the guide.

Step 1 of 10: Create a New Project

Navigate to Atmosphere Studio from the side menu. When you visit Studio for the first time in a session, you are brought to the Studio Projects screen.

  1. Click thenew projectbutton. This displays a New Project window.
  2. Give the project a name. Then select the NXP Rapid IoT project type and click Create.

This opens a new project in Studio.

This guide walks through the step-by-step process to perform actions in Studio, but doesn't cover the in-depth aspects of Studio itself. To learn more about using Studio, its areas and features, and Studio elements, visit the Atmosphere Studio section.

Step 2 of 10: Add the Project’s Display Page Controller

The first aspect of building this sample project is adding elements to Embedded View to create the display’s navigation and controls, starting with theDisplay Page ControllerDisplay Page Controller. The Display Page Controller is essential for all NXP Rapid IoT projects that use the display to control page navigation and interaction.

Add aDisplay Page ControllerDisplay Page Controller to the designer by double-clicking it in the Element Toolbox. None of the element’s default properties need to be modified, but you can change the element’s name if you like.

Step 3 of 10: Set Up Page Controls

With a Display Page Controller added to the designer, it needs to be given instructions to do something for navigation. This is accomplished using the Rapid IoT’s touch sensor buttons and side buttons.

  1. Add the following elements to the designer by double-clicking them in the Element Toolbox:
    • Semtech SX9500 ElementSX9500 element: The SX9500 element enables use with the hardware’s four touch sensor buttons to navigate between pages.
    • User Buttons ElementUser buttons element: The user buttons element enables use with the hardware’s four side buttons for interaction on a page.
  2. Connect the SX9500 element to the Display Page Controller. The connection between the SX9500 element and Display Page Controller allows you to setup navigation for pages by using the touch buttons. This is done through adding events and establishing the proper triggers and abilities for the element.
    • Select the Up Pressed trigger on the SX9500 element’s properties, and add an event. When prompted select the Display Page Controller. This adds an event between these elements for this trigger. Within this event, select the Navigate Up ability. This means when the top touch sensor button is pressed, the display will navigate up to a page.
    • Repeat this process for the remaining three directional (down, left, and right) triggers using their corresponding navigatation abilities, so each touch button navigates in its intended direction.
  3. Connect the user buttons element to the Display Page Controller. The connection between the user buttons element and Display Page Controller allows you to setup page interaction by using the side buttons.
    • Select the Bottom-left Button Pressed trigger on the user button element’s properties, and add an event. When prompted select the Display Page Controller. This adds an event between these elements for this trigger. Within this event, select the Press Bottom-left Button ability. This means when the bottom-left side button is pressed, an action will be performed (which is page specific).
    • For the sake of this guide this is the only side button used, but likewise if the remaining button triggers and abilities are setup, they would also enable interaction with that specific button.

To this point, display navigation and controls have been established. The Embedded View designer should resemble the following image:

Step 4 of 10: Add the Display Pages

The next aspect of the project is adding the pages for the display. This includes a dedicated home page and four subsequent pages that you can navigate to.

Add the following elements to the designer:

  • Text Page ElementText page element: The text page element adds a page that displays nothing but a single line of text. This will be used as the home page.
  • Selection Page ElementSelection page element: The selection page element adds a page that allows you to make a selection on it by toggling between two options. This will be used to toggle the buzzer on and off.
  • Labeled Icon Page ElementThree labeled icon page elements: The labeled icon page element adds a page that includes an icon and a label. These will be used to display the various sensor data with a corresponding icon.

Step 5 of 10: Structure Page Navigation

With each page added to the designer, they need to be structured in a way that enabled them to navigate along the display page coordinate grid.

  1. Click the text page element, and modify the following properties:
    • Page Title: Change the title to read “Home Page.”
    • Span X Rows: Set the span to 2 so the page is accessible by up to two columns.

    Because this page is designated as the home page, it will keep its (0,0) coordinates.

  2. Click the selection page element, and modify the following properties:
    • Page Title: Change the title to read “Buzzer.”
    • X Coordinate: Set the X coodinate to 3, so it’s beyond the home page’s span.
    • Y Coordinate: Leave the Y coordinate set to 0.
    • Icon: Set the icon to Buzzer.
    • Initial Value: This determines if the value of the selection is the left or right option. In this case this refers to the value of the buzzer being off (left) or on (right). Turn the initial value off, so the buzzer is not on by default.

    With coordinates set to (3,0), the buzzer page is to the right of the home page and can be directly navigated to it by pressing the right touch button, but won’t overlap with the home page’s span of two columns.

  3. Select the first labeled icon page element, and modify the following properties:
    • Page Title: Change the title to read “Ambient Light.”
    • X Coordinate: Set the X coodinate to 0.
    • Y Coordinate: Set the Y coordinate to 1.
    • Icon: Set the icon to Ambient Light.

    With coordinates set to (0,1), the ambient light page is directly beneath the home page and can be navigated to by pressing the down touch button.

  4. Select the second labeled icon page element, and modify the following properties:
    • Page Title: Change the title to read “Temperature.”
    • X Coordinate: Set the X coodinate to -1.
    • Y Coordinate: Set the Y coordinate to 1.
    • Icon: Set the icon to Temperature.

    With coordinates set to (-1,1), the temperature page is one row under the home page and to the left of the ambient light page. It can be navigated to by pressing the left touch button while on the ambient light page.

  5. Select the third labeled icon page element, and modify the following properties:
    • Page Title: Change the title to read “Air Quality.”
    • X Coordinate: Set the X coodinate to 2.
    • Y Coordinate: Set the Y coordinate to 1.
    • Icon: Set the icon to Air Quality.

    With coordinates set to (2,1), the air quality page is one row under the home page and to the right of the ambient light page. It can be navigated to by pressing the right touch button while on the ambient light page. Because the air quality page is within the span settings for the home page, it can also navigate back to the home page by pressing the up touch button.

After each page’s coordinates are set, it’s recommended to visually place the page elements on the designer in accordance with their location on the display grid. If arranged by their grid coordinates, the page elements on the designer should resemble the following image:

Step 6 of 10: Add Data Readings

Once pages are created, they need to be given something to do. This is where sensor data is added for them, and the ability to toggle the buzzer.

  1. Add the following elements to the designer:
    • Interval ElementInterval element: The interval element sets the project to run at the time set in the element’s properties, which by default is set to once per second (1000 ms).
    • Buzzer ElementBuzzer element: The buzzer element interacts with the hardware’s buzzer.
    • TSL2572 ElementTSL2572 element: The TSL2572 element reads the hardware’s ambient light sensor data.
    • ENS210 ElementENS210 element: The ENS210 element reads the hardware’s temperature/humidity sensor data.
    • CCS811 ElementCCS811 element: The CCS811 element reads the hardware’s total volatile organic compound (TVOC) air quality sensor data.
  2. Connect the interval element to the TSL2572 element, ENS210 element, and CCS811 element. Under the interval element’s properties, these connections add three events under the interval element’s Interval trigger with corresponding abilities: Read Temperature, Read Ambient Light, and Read TVOC. When the project runs, the value of each connected sensor is read on the interval time (1000 ms) and every subsequent 1000 ms, so the data is read once per second.
  3. Connect the selection page element to the buzzer element. The connection between the selection page element and buzzer element allows you to change the state of the buzzer while on the page using the bottom-left side button, which was connected to the Display Page Controller earlier. This is done through adding events and establishing the proper triggers and abilities for the element.
    • Select the Set On trigger on the selection page element’s properties. Within the event, select the Turn On ability. This means when the selection page’s value is set to “on” the buzzer will turn on.
    • Repeat this process with the element’s Set Off trigger and Turn Off ability, so the buzzer can be turned on or off from the page.

At this point, the project now has three data values being received once per second after the project starts, has five pages in total, and the buzzer can be toggled on and off. The Embedded View designer should resemble the following image:

Step 7 of 10: Setup Pages to Display Sensor Data

With the sensor data being read from the interval element, it needs somewhere to go. The data will be now be sent to each corresponding page.

  1. Connect the TSL2572 element to the ambient light labeled icon page element. The connection between the TSL2572 element and ambient light page displays the ambient light sensor’s data on the page’s label. This is done through adding events and establishing the proper triggers and abilities for the element.
    • Select the Ambient Light Read trigger on the TSL2572 element’s properties. Within the event, select the Set Label ability. This means when the light sensor is read, it sets the ambient light page’s label with the value.
  2. Connect the ENS210 element to the temperature labeled icon page element. The connection between the TSL2572 element and temperature page displays the temperature sensor’s data on the page’s label. This is done through adding events and establishing the proper triggers and abilities for the element.
    • Select the Temperature Read trigger on the ENS210 element’s properties. Within the event, select the Set Label ability. This means when the temperature sensor is read, it sets the temperature page’s label with the value.
  3. Connect the CCS811 element to the air quality labeled icon page element. The connection between the CCS811 element and air quality page displays the air quality sensor’s data on the page’s label. This is done through adding events and establishing the proper triggers and abilities for the element.
    • Select the TVOC Read trigger on the CCS811 element’s properties. Within the event, select the Set Label ability. This means when the TVOC sensor is read, it sets the air quality page’s label with the value.

With the sensor data connected to their associated pages, the project is complete! The final layout of the Embedded View designer should resemble the following image:

Step 8 of 10: Compile the Project

Once the project is finished, it needs to be compiled. Compiling readies the entire project’s source code for deployment.

From any view, click theCompilebutton in the project options menu on the top-right of the screen. You’ll see a loading graphic on the screen, and will receive a notification when the project is compiled.

Step 9 of 10: Program Firmware into the Rapid IoT

With the project compiled, your Rapid IoT can be programmed with the project’s embedded firmware.

Prior to programming a Rapid IoT, ensure you have the following setup configuration:

  • The device is connected to the computer via USB.
  • The project to be programmed has been compiled.
  • The Rapid IoT is in programming mode.

To put the Rapid IoT into programming mode, perform the following steps:

  1. Connect the Rapid IoT to the computer via USB.
  2. Simultaneously hold the top-left and bottom-right side buttons for five seconds until the screen goes black. Continue holding the buttons while the screen goes black.
  3. The green LED will turn on and start blinking, indicating the device is now in programming mode. The side buttons can be released. While in programming mode, the Rapid IoT displays as a mass storage USB device on your computer.

With setup complete, you can program your Rapid IoT:

  1. While Embedded View is active, click theProgrambutton from the view’s toolbar. This downloads a .bin file containing the project’s compiled firmware.
  2. Locate the downloaded file on your computer, and move it into the Rapid IoT mass storage device. This initiates programming of the Rapid IoT, which is represented by a series of blinking lights on the device.

When the lights stop blinking, programming is complete and the Rapid IoT is programmed with the project’s embedded firmware. The Rapid IoT will reboot itself and no longer display as a mass storage device, and upon startup the project is loaded on the device.

Step 10 of 10: Navigate the Display

After the firmware is programmed, you can use the display and navigate the pages and see the data values on them.

From the home page, you can do the following:

  • Navigate right to the buzzer selection page. On this page, press the bottom-left side button to toggle the Rapid IoT’s buzzer on and off.
  • Navigate down to the ambient light page, which displays light data.
  • From the ambient light page, you may navigate left to the temperature page or right to the air quality page, which shows temperature and air quality data, respectively. Or you may navigate up to return to the home page.
  • From the air quality page, you may navigate up to the home page, as the air quality page is within the home page’s row span property.