Architecture
Understanding the three-layer architecture of the CC2 device UI helps you design DataViews that behave exactly as expected and debug issues efficiently.
Three-layer architecture
Section titled “Three-layer architecture”┌─────────────────────────────────────────────┐│ DeviceUI Manager ││ Owns the display and touch hardware. ││ Draws widgets using OS graphics primitives. ││ Manages system bar, navigation, modals. │├─────────────────────────────────────────────┤│ ApplicationUI Manager ││ Parses DataView JSON. ││ Registers pages with DeviceUI Manager. ││ Updates widget values from MQTT messages. ││ Sends uplink messages when user enters data │├─────────────────────────────────────────────┤│ MessageManager ││ Selects active network (WiFi, BLE, etc.). ││ Encodes/decodes MQTT JSON messages. ││ Routes uplink and downlink traffic. │└─────────────────────────────────────────────┘The DeviceUI Manager acts like a window manager — it is analogous to a GUI desktop environment. It provides a consistent, well-defined framework for interaction that is independent of which DataView is currently active.
The ApplicationUI Manager is the DataView engine. It parses the DataView JSON files, creates and registers InfoPages and InfoWidgets with the DeviceUI Manager, and keeps them up to date as MQTT messages arrive.
The MessageManager handles all network communication, insulating the UI layers from the underlying transport.
Display layout
Section titled “Display layout”The CC2 screen is divided into two areas. Only one area can be active at a time:
| Graphical element | Area | Description |
|---|---|---|
| System bar | Top strip | Always visible except during DED modal dialogs. Shows current DataView name, system icons, and status indicators. |
| InfoPage | Remaining screen | Displays one page of InfoWidgets as defined by the active DataView. |
| DataEntryDialog (DED) | Full screen | A modal dialog that covers the entire screen to allow data entry. Replaces the InfoPage while open. |
Navigation buttons
Section titled “Navigation buttons”The CC2 has three tactile navigation buttons. Their behaviour depends on the current UI state:
| Button | On an InfoPage | During a DED |
|---|---|---|
| Back | Go to the previous page in the sequence | Cancel — discard any entered data, close DED |
| Forwards | Go to the next page in the sequence | Accept entered data — proceed to next field/close |
| OK / Home | Go to page id:"1" of the current app; if already there, go to the device home screen |
Confirm entry — accept the current value |
OK/Home dual role
Pressing OK/Home on an InfoPage navigates to the first page (id "1") of the current DataView. If the user is already on page "1", it navigates to the device home screen — the top-level grid of all installed applications.
If a DataView is configured as the home DataView in allocdata, then its page "1" is the home screen. In that case the OK/Home button on page "1" returns to the same page.
Button events for rules
Buttons also fire press, release, dblclick, and longpress events. These can be used in the RuleMgr onButton rules to trigger custom actions without the user being on a specific page.
-> See Rules (RuleMgr)
DataView home page override
Section titled “DataView home page override”By default, the device home screen shows a grid of icons — one per configured DataView. This can be overridden by naming one DataView with the id home in the allocdata. In that case, page "1" of that DataView becomes the home screen.
Related
Section titled “Related”- DataView JSON Format — how DataViews are defined
- InfoPage — page structure and ID rules
- InfoWidget — widget attributes and interaction types
- Rules (RuleMgr) — on-device event-driven actions