Skip to content
CC2 Device Documentation

Dataview Designer

The Dataview Designer is a visual, drag-and-drop tool for creating DataView JSON files for the CC2 device without writing JSON by hand. It gives you a live preview of the e-paper display as you work.

Open Dataview Designerdataviewdesigner.infrafon.club — build and export DataView JSON files

Interface overview

Section titled “Interface overview”

The Designer is split into three panels:

┌──────────────┬──────────────────────┬────────────────────┐
│ Left Panel   │ Canvas               │ Right Panel        │
│ Icons &      │ (device preview)     │ Properties         │
│ Widgets      │                      │ & Actions          │
└──────────────┴──────────────────────┴────────────────────┘

Left panel — widget library

Section titled “Left panel — widget library”

Drag any widget from here onto the canvas. Widgets are grouped by category:

Category Widgets
Text String, Bool, Number, Percentage
Others Msglist, Bool Icon, Star rating
Icons Icon

To add a widget: drag it from the left panel and drop it onto the canvas.

Centre panel — canvas & page management

Section titled “Centre panel — canvas & page management”

The canvas shows a 1:1 preview of the CC2 e-paper display (176 × 264 px).

Action How
Navigate pages Click arrow button
Select a widget Click on it
Move a widget Drag it to a new position
Resize a widget Drag the corner handles

Always test your DataView on a real device before deployment — scaling can produce unexpected results. :::

Right panel — widget properties

Section titled “Right panel — widget properties”

When a widget is selected, the right panel exposes its configuration:

Position & alignment

Section titled “Position & alignment”
Attribute Description
Align to Canvas Snap widget to canvas edges
H. Align Horizontal: Left, Center, Right
V. Align Vertical: Top, Middle, Bottom
Region Manual x, y, w, h values in pixels

Interaction type

Section titled “Interaction type”
Type Description
Static Value is fixed at allocation — cannot be updated at runtime
Button Executes actions when the user taps the widget area
Editable Backend can push new values via MQTT downlink

Border / outline

Section titled “Border / outline”
Attribute Options
Border Style None, solid_square, solid_rounded, 3d_square
Border Size 1-4 (default: 4)

Actions

Section titled “Actions”

Use the actions array to define what happens when a button is pressed or an editable widget value changes. Add multiple actions — they execute in order.

See Actions reference for the complete list.

Icon library

Section titled “Icon library”

The Designer includes 1,757 preloaded icons available as graphic widget values. Browse the icon library within the Designer’s left panel.

Icons are stored in PBM format on the device. You can also supply custom icons as base64-encoded PBM data.

Exporting and uploading

Section titled “Exporting and uploading”
  1. Export JSON — click the export button to download the .json file
  2. Upload — go to the IES WebAdmin portal -> DataViews -> Upload and Provision the device or can be directly copied to dv folder in the device.
  3. Configuration- the uploaded device should be added to allocdata.json or unallocdata.json depending on the use case
  4. Test on device — provision the DataView to a test device via allocdata

Runtime updates

Section titled “Runtime updates”

Once your DataView is deployed, all button and editable widgets can be driven live from your backend without re-deploying the DataView.

-> Runtime Updates via MQTT — full guide with examples for every widget type

Section titled “Related”