Value tiles dashboard

Value tiles (value-tiles) is a public template in the Create dashboard list. It builds a board of live values, gauges, small trends and controls for any equipment without code: pages, sections, tiles, color rules and writes are edited on the board itself. A new board opens with one empty page. For a step-by-step guide, see build a value board.

Pages and sections

A board holds up to 12 pages. The first page is at the dashboard’s own address, the others at /pages/<pageId>. With more than one page, tabs under the header switch between them; on a phone the tabs scroll sideways. An address that is no page shows a message with a link to the first page.

Each page holds up to 20 sections and up to 60 tiles across them. A section has an optional title and an optional Report action, which opens a quick report of the section’s numeric tiles. A quick report takes up to 20 parameters; a section with more has the action disabled and says so.

Tiles flow in a grid of 2 columns on a phone, 3 on a small screen, 4 on a laptop and 6 on a wide screen. Small tiles take one cell, wide tiles two cells side by side, large tiles two by two. On a phone, wide and large tiles take the full width. Values grow with the tile; long names are shortened, and the full name is in the tile’s details.

The header shows the time of the latest reading on the page, Edit for editors, admins and owners, and one grouped message for parameters that cannot be read, with Retry. Only the visible page reads values, at the board’s refresh interval (2 seconds unless changed), and only it loads history.

Tile types

Every tile has a name (the parameter’s name in the UI language when left empty) and a size. Names, units, value types, decimal places, labels, zones and write access come from the parameter, so changes in Setup show at once.

Type	Shows
Value	One parameter by its type: numbers with their unit, labels such as `On` or `Fault`, date-times as `YYYY-MM-DD HH:mm:ss`, text as is. Optional 24-hour trend line and optional Change button.
Gauge	One number on a horizontal bar with its unit: a marker over the parameter’s zone bands, or the bar filled up to the value in the tile’s color. Values outside the bar stop at its ends and keep their real number.
Chart	One to four numeric parameters in the same unit over 1 h, 24 h or 7 d from stored readings, with the latest value of each line. Wide or large only.
Controls	An optional status value and one to four controls: commands with ordered writes and active feedback, and setpoints.

Selecting a value, gauge or controls tile opens its details: the value with the time it was received, a 1 h, 24 h or 7 d chart, the minimum and maximum of that window, the color and what set it, Open report and, for editors, Edit tile. It opens as a side sheet, or as a drawer on a phone. A controls tile without a status value shows its first control’s parameter. Selecting a chart tile opens its quick report.

A tile whose parameter was deleted shows Parameter not found; one whose device cannot be read shows Unavailable. A value that is loading shows a placeholder, never zero.

History

Trend lines and the 24 h chart use 15-minute averages, reloaded every 5 minutes; the 1 h chart uses 1-minute buckets reloaded every minute, and the 7 d chart hourly buckets reloaded every 15 minutes. Values read since the page opened extend each line to the current time. Gaps in the stored readings stay gaps.

A parameter without stored readings in the window shows No history. Readings are stored only for parameters with a background reading period or with readings an MC252 records on the device; for others the details and the tile editor say Not recorded. A background reading period, set in Setup → Parameters, starts storing a parameter’s readings.

Colors

Tiles use five colors that work in light and dark themes: Neutral, Info, OK, Warning and Critical. A color always comes with text: the rule’s label, such as High, or the color’s name on the tile, and the same text in its accessible name.

A value or gauge tile has up to eight rules, checked in order; the first that matches colors the tile. A rule compares the tile’s value, or another parameter’s, with a number: greater than, at least, less than, at most, equal to or not equal to. A flag counts as 1 when on, so a rule can color a temperature when a fault flag is on. Rules compare number, integer and boolean parameters only.

When no rule matches and Use the parameter’s zones is on, the parameter’s zones from Setup apply: red is critical, orange warning, green OK. Below the low orange boundary is red, from it orange, from the green boundary green, from the high orange boundary orange and from the high red boundary red. A boundary that is not set continues the band below it. An integer label with a zone colors the tile the same way.

Only current values are colored, and rules on another parameter count only while that parameter’s value is current. A value that is no longer current keeps the color it had while current, faded, with a clock mark.

Editing

Edit turns on edit mode for editors, admins and owners; edit mode stays on across pages (edit=1 in the address). Every change is saved at once. If someone else changed the same part of the board meanwhile, the form says so and the board shows the latest version; nothing is overwritten.

Add tile and the section’s Add tile open the tile editor: type, parameter, name, size, unit and decimal places, trend line, Allow changing the value, gauge ends, chart parameters and window, controls, and colors. A preview shows the tile with the current value and the draft colors.
Board → Add tiles from a device adds value tiles for parameters checked in one branch of the parameter tree, to a section or a new one. Recorded numeric parameters get a trend line.
Each tile has a drag handle and a menu: Edit tile, Duplicate, Move to… and Delete tile. Tiles drag within a section and between sections of the page. With the keyboard, Space or Enter on the handle picks a tile up, the arrow keys move it, and Space or Enter drops it; Move to… also moves a tile to another page.
Each section has a menu: Edit section (title and report action), Reorder sections and Delete section, which deletes its tiles too.
Board also adds, renames, reorders and deletes pages, and Duplicate page for another device copies the page with every binding matched to the parameter at the same place under another branch. What does not match is listed before saving and left out of the copy.
Board settings sets the refresh interval (1–60 seconds), the density (comfortable or compact) and Rotate pages for wall displays (10–600 seconds per page). Rotation pauses in edit mode, while a dialog or the details are open and for a minute after any input.

Names typed in forms are stored as typed. A board created by the assistant or a template may have names in several languages; the board shows them in the UI language, and editing one replaces it with the typed text.

Permissions

Role	Can
View only	See the board and details; Change and controls are shown disabled
Operator	Also change values on tiles that allow it and run controls
Editor	Also edit pages, sections, tiles and board settings
Admin	Same as editor
Owner	Same as editor

Allow changing the value is offered only for parameters that can be written. Writes show the old and new value for review and wait for the device to confirm; commands write their steps in order after confirmation.

Configuration

The board’s configuration is edited by its forms. Setup → Dashboards also shows it as JSON, checked against the same schema. All IDs are UUIDs and must be unique across the configuration; names and rule labels are text or a map of languages to text.

Key	Value
`refreshSeconds`	Seconds between readings of the visible page, 1–60; 2 when absent
`density`	`comfortable` (default) or `compact`
`rotateSeconds`	Seconds per page for rotation, 10–600; absent turns rotation off
`pages`	1–12 pages; absent shows one empty page

A page is { id, name, sections }; a section is { id, name?, report?, tiles }. Every tile has id, optional name, size (small, wide or large) and kind:

`kind`	Keys
`value`	`parameterId`, `unit?` (empty hides it), `decimals?` (0–6), `sparkline`, `editable`, `colors`
`gauge`	`parameterId`, `unit?`, `decimals?`, `min?`, `max?` (the parameter’s zone range when absent), `colors`
`chart`	`parameterIds` (1–4, different), `window` (`1h`, `24h` or `7d`), `unit?`; size `wide` or `large`
`controls`	`statusParameterId?`, `controls` (1–4 commands or setpoints)

colors is { zones, rules }: zones turns the parameter’s zones on, and rules holds up to 8 { id, parameterId?, operator, value, tone, label? }. operator is gt, gte, lt, lte, eq or ne; tone is neutral, info, ok, warning or critical. A control is a command { id, name, kind: "command", category, steps: [{ id, parameterId, value }], active? } or a setpoint { id, name, kind: "setpoint", parameterId, unit }.

{
  "refreshSeconds": 2,
  "pages": [
    {
      "id": "5b0a2c1e-7d1f-4a43-9a4e-2f7b8f0c1a11",
      "name": { "en": "Boiler", "de": "Kessel" },
      "sections": [
        {
          "id": "9e3c2b51-6c0d-4d8e-8f5a-1a2b3c4d5e61",
          "name": "Water",
          "report": true,
          "tiles": [
            {
              "id": "3f1e5c7a-2b4d-4e6f-8a9b-0c1d2e3f4a51",
              "kind": "value",
              "size": "small",
              "parameterId": "7a6b5c4d-3e2f-4a1b-9c8d-7e6f5a4b3c21",
              "sparkline": true,
              "editable": false,
              "colors": {
                "zones": true,
                "rules": [
                  {
                    "id": "1d2e3f4a-5b6c-4d7e-8f9a-0b1c2d3e4f51",
                    "operator": "gte",
                    "value": 90,
                    "tone": "critical",
                    "label": "Too hot"
                  }
                ]
              }
            },
            {
              "id": "6e5d4c3b-2a1f-4e0d-9c8b-7a6f5e4d3c21",
              "kind": "chart",
              "size": "wide",
              "parameterIds": ["7a6b5c4d-3e2f-4a1b-9c8d-7e6f5a4b3c21"],
              "window": "24h"
            }
          ]
        }
      ]
    }
  ]
}

A configuration that does not match the schema shows the host’s configuration error with a link to the dashboard’s settings. One with repeated IDs, or with more than 60 tiles on a page, shows the board’s own configuration error.