NXP Display Elements Guide

NXP Rapid IoT projects feature a variety of embedded elements used to add “pages” for the hardware’s display. These elements allow you to display data and information on the screen and manage page navigation and interactivity.

This guide provides an overview on using these elements, adding pages to the display, and organizing pages for navigation.

Display Elements

NXP display elements are unique to Rapid IoT projects, and are distinct compared to other elements as their properties correlate with other display elements added to the designer.

The following embedded elements are specific for use with the NXP Rapid IoT’s display:

DisplayPageControllerElement icon for the element library

Display Page Controller

SystemStatusPageElement icon for the element library

System Status

LabeledIconPageElement icon for the element library

Labeled Icon Page

SelectionPageElement icon for the element library

Selection Page

TextPageElement icon for the element library

Text Page

TextIconPageElement icon for the element library

Text Icon Page

These elements include the Display Page Controller, which is used as a centralized controller for all page navigation, and numerous page elements that add pages in a variety of templates. Each page element added to Embedded View’s designer represents one page available on the display, and any number of pages can be added to a project.

The display uses a grid coordinate system to chart page locations for navigation, which you can set up to navigate with using the hardware’s touch sensor buttons.

The display page coordinate grid is demonstrated as follows: Display Page Coordinate Grid
One page occupies the display at a time, with one page per set of coordinates. If multiple pages have identical coordinates, you’ll receive an error when attempting to compile the project.

The coordinates (0,0) represent the display’s home location, meaning a page with these coordinates is identified as the home page and is the first page displayed when the Rapid IoT Kit is on.

Page Element Coordination

Every page element contain properties for navigation and interaction, which allow you to specify their location on the display grid and potential button actions (if the page type supports it).

Each of these elements have the following set of properties specific to building the display’s navigation structure:

Property Description
X/Y Coordinate The coordinates where the page is located on the display grid. As previously mentioned, coordinates (0,0) represent the display’s home page.
X/Y Span The number of grid rows and columns the page spans for navigation. Any pages adjacent to the page within the length of the span can directly navigate to this page.
Buttons Enabled Enable or disable the usage of the hardware’s side buttons on the page. Used for page templates with interactivity, such as the selection page element.

The coordinate and span properties are required for any page on the designer in order for it to be located on the display grid.

Display Requirements and Setup

To set up pages on the display, you’ll need the following in your project:

  • Display Page Controller element: The Display Page Controller is required for any project that has more than one page or uses any kind of interaction on a page. This element controls all interaction for every page added to the designer, and as such only one of these elements is needed per project.
  • Interactive element: Semtech SX9500 element for the touch sensor buttons and/or the user buttons element for the side buttons. These elements can be connected to the Display Page Controller, which will control navigation based on the triggers and abilities set up. Since the Display Page Controller controls all page navigation and interaction, only one of either of these elements is needed per project.
  • Page element(s): You can add any number of pages to the designer and set their grid coordinates for navigation. Because navigation and interaction is handled entirely through the Display Page Controller for all pages, page elements do not need to be connected to the Display Page Controller or interactive elements.

Adding Pages

Whenever you add a page element to Embedded View’s designer, it creates a page for the display: Add Home Page
The home coordinates are the default coordinates for a page, so keep this in mind when multiple page elements are added as their coordinates need to be changed. As you add more page elements, edit their coordinates to start building the navigation structure around the home page.

To assist with keeping track of page locations, it’s recommended to visually place page elements on the designer in accordance with their location on the grid.

While on a page on the display, you can navigate to the next page in the same row and column, regardless of the distance between them on the grid. For example, if there is a page at (0,0) and another page in the same row at (4,0), navigating right from the home page will go to the next available page and vice versa: Navigating Pages
The double-sided arrow demonstrates that you can navigate between these two pages while on either page. Additionally, any page that can be navigated to is marked by a line on the edge of the screen (along with that page’s title) in that page’s direction. Note the white lines on the edges of the pages in the diagram above, which indicate being able to navigate in that direction.

Continuing the prior example, two additional pages added with coordinates set to (0,1) and (-1,1): Navigating More Pages
With the additional pages, the page lines and arrows indicate which directions are available to navigate to.

Spanning Navigation

While pages traditionally only navigate to another page in its row or column, a page can be navigated to if it’s not directly adjacent to it through its span properties.

As mentioned above, a page’s span refers to the number of rows and columns the page can be navigated to from adjacent elements within the length of the span (to the right direction only). All page elements have an x- and y-axis span of 1 by default, meaning they can be navigated to from one row and column next to them.

When setting a page's span, ensure pages in that same row/column have their coordinate set outside of the span. Any page in the same row/column as the span page will not be able to be navigated to from that page if its coordinate falls within the span value.

Continuing the above example, the home page may have a span x columns property of 4 and a span y rows property of 1. Additionally, two new pages are added with coordinates set to (1,1) and (2,1):

Span Navigation
From the diagram, you can see the length of the span the home page reaches, extending four columns across. This span allows any page elements in adjacent rows to the home page, but not the same column, to navigate to the page.

In the example above, the pages at (1,1) and (2,1) are both able to navigate back to the home page because they are within the home page’s span in an adjacent row, but notice the single-sided arrow above them indicating navigation is one-way, as the home page can’t navigate back to them.

Once you feel comfortable using NXP display elements, give the NXP Rapid IoT Display Page Guide a try. This guide provides a complete walkthrough creating a project that uses multiple pages to display sensor data.