Value tile

A number with its unit, optionally on a gauge or with a graph.

In a dashboard file: "type": "value", with the options below. Every tile also has the fields under Every tile.

Example

A tile, as it goes in a screen’s tiles:

{
    "type": "value",
    "label": "Outside",
    "titleIcon": "temperature-half",
    "layout": { "x": 1, "y": 1, "width": 2, "height": 2 },
    "dataSource": {
        "connection": "demo",
        "params": { "device": "weather-station", "value": "temperature" }
    },
    "options": { "numberFormat": "0.0", "unit": "°C", "gauge": { "min": -10, "max": 35 } }
}

It reads the demo home: in a dashboard with the connection "demo": { "driver": "demo", "config": {} }, it works as it is. To read a device of your own, its data source names one of your connections, with the params of that connection’s driver (Connections and data sources).

Options

Field	Type	Default	What
source	data source name	primary	Reading. One of the tile’s data sources, by name, that gives a number, a level or readings over time.
numberFormat	number format	0	Number format. 0, 0.0, 0.## or #,##0.
transform	expression		Transform. Arithmetic on the value, such as value/1000 or ftoc(value).
color	colour		Colour. Of the number. A look option: a tile style can set it.
unit	text	""	Unit. Shown after the number, such as °C.
unitSize	number, 25 to 400	100	Unit size. In percent: 100 as usual, 200 double. A look option: a tile style can set it.
unitPosition	one of right-top (Right, at the top), right-center (Right, in the middle), right-bottom (Right, at the bottom), below (Below the number)	right-top	Unit position. Beside the number; a gauge has it below the number. A look option: a tile style can set it.
caption	text		Caption. A line of text below the value; style rules can change it.
gauge	object		Gauge. The value on a dial. A tile style can add it or take it away.
gauge.min	number	0	Min.
gauge.max	number	required	Max.
gauge.colors	gradient	red-green	Gradient. A named one such as red-green, or a list of colours. A look option: a tile style can set it.
gauge.thresholds	list	[]	Thresholds. A colour from a value on, such as green, yellow from 24, red from 27.
gauge.thresholds[].from	number	required	From. The value this colour starts at.
gauge.thresholds[].color	colour	required	Colour.
gauge.coloring	one of gradient, threshold (By thresholds), single (One colour)		Colouring. The gradient, the colour of the threshold the value is in, or one colour; by the thresholds where there are any, else one colour where one is set. A look option: a tile style can set it.
gauge.color	colour		Colour. The gauge’s one colour. A look option: a tile style can set it.
gauge.track	colour or none		Unfilled part. The part of the scale not filled. A look option: a tile style can set it.
gauge.icon	icon name		Icon. In the middle.
gauge.iconColor	colour		Icon colour. A look option: a tile style can set it.
gauge.secondary	object		Second value. A smaller value below the first.
gauge.secondary.source	data source name	required	Reading. One of the tile’s data sources, by name, that gives a number or a level.
gauge.secondary.numberFormat	number format	0	Number format. 0, 0.0, 0.## or #,##0.
gauge.secondary.unit	text	""	Unit. Shown after it.
gauge.secondary.color	colour		Colour.
gauge.more	list	[]	More values. For the rings style: a ring and a number each.
gauge.more[].source	data source name	required	Reading. One of the tile’s data sources, by name, that gives a number or a level.
gauge.more[].numberFormat	number format	0	Number format. 0, 0.0, 0.## or #,##0.
gauge.more[].unit	text	""	Unit. Shown after it.
gauge.more[].color	colour		Colour.
gauge.more[].min	number		Min. The gauge’s when left out.
gauge.more[].max	number		Max. The gauge’s when left out.
gauge.look	object		Look. Thickness, steps, sweep and the like, where the style has them. A look option: a tile style can set it.
gauge.look.thickness	number, 1 to 50		Thickness. Of the arc, ring or bar, in percent of the gauge.
gauge.look.steps	whole number, 2 to 100		Steps. Ticks, blocks, cells or dots; the needle’s numbered ticks.
gauge.look.sweep	number, 90 to 360		Sweep. How far round a dial goes, in degrees.
gauge.look.roundEnds	true or false		Round ends.
gauge.look.vertical	true or false		Upright. A bar, cells or bullet standing up.
gauge.look.numbers	true or false		Numbers. On the scale, where the style has them.
gauge.look.accent	colour		Accent. The needle, the knob, the glow, the fill.
gauge.look.markSecond	true or false		Second on the scale. Marks the second value on the scale too, where it is on the same scale (a set point); the thermostat’s does, a value tile’s not unless set.
sparkline	object		Sparkline. Readings over time as a line below or behind the value. A tile style can add it or take it away.
sparkline.source	data source name		Readings. One of the tile’s data sources, by name, that gives readings over time or a number. The value’s own when left out.
sparkline.color	colour	#ffffff	Colour. A look option: a tile style can set it.
sparkline.lineWidth	number, above 0	1	Line width. In pixels. A look option: a tile style can set it.
sparkline.fill	true or false	false	Fill. The area below the line, fading out to the bottom. A look option: a tile style can set it.
sparkline.height	number, 5 to 100		Height. In percent of the tile: 20 below the value, 100 behind it when left out. A look option: a tile style can set it.
sparkline.placement	one of below (Below the value), behind (Behind the value)	below	Placement. In a strip below the value, or across the whole tile behind it. A look option: a tile style can set it.
styleRules	list	[]	Style rules. Top to bottom; each that holds for the value changes the style, a later one over an earlier one.
styleRules[].when	condition	required	When. A condition on the value, such as value > 10 or value >= 5 and value < 10.
styleRules[].style	object	{}	Style. What changes while it holds. Its fields: Tile style.
styleRules[].caption	text		Caption. The text below the value while it holds, such as Comfortable.

Built-in styles

The styles the app offers for it, after “The dashboard’s style”. Style files says what they set.

• Centred
• Left aligned
• Compact
• Icon at the left
• Unit below
• Trend below (wide)
• Trend behind (wide)
• Dial (square)
• Ring (square)
• Arc (square)
• Just the number