Style files

Tile styles and dashboard templates are JSON files. The app has its own built in, and offers those of the style library on Tilez Cloud after them, which a site admin uploads on its admin page. A file’s name, without .json, is its id: lower-case letters, digits and dashes, and not the name of a built-in one.

Tile style files

A style to pick for a tile: a tile style, and look options of one tile type. Picking it copies them into the tile.

{
    "name": "Unit below",
    "order": 20,
    "types": [
        "value"
    ],
    "style": {
        "valueAlign": "center"
    },
    "options": {
        "unitPosition": "below"
    }
}

Field	Type	Default	What
name	text	required	Name. What the style picker shows.
shape	one of wide, square, tall		Shape. The tile shape it is made for; left out: any.
style	object	{}	Tile style. Any of a tile style’s properties. Its fields: Tile style.
options	object	{}	Look options. Look options of its tile type, as a tile’s options nest them. A style that sets any must be for one type ("types": ["value"]). Which they are: the type’s page under Tiles.
order	number	required	Order. Its place in the list, lowest first, then by name.
types	list, each one of value, graph, solar, thermostat, airquality, video, image, light, switch, action, table, status, forecast, text, group		Tile types. The types it is offered for, group included; every type and groups when left out.

Built in

Id	Name	For	Shape
centred	Centred	every type, and groups	any
left	Left aligned	every type, and groups	any
compact	Compact	every type, and groups	any
icon-left	Icon at the left	every type, and groups	any
unit-below	Unit below	value	any
trend-below	Trend below	value	wide
trend-behind	Trend behind	value	wide
dial	Dial	value	square
ring	Ring	value	square
arc	Arc	value	square
no-extras	Just the number	value	any

Dashboard template files

A dashboard’s look without its content: applying one replaces the dashboard’s background, margin, spacing and tile style with the template’s, and adds its tile styles. What it leaves out is the default.

Field	Type	Default	What
name	text	required	Name. What the template picker shows.
description	text		Description. A line below the name in the picker.
background	colour		Background. Behind every screen’s tiles.
grid	object		Grid. Its margin and spacing; the dashboard keeps its columns and rows.
grid.margin	number, at least 0		Margin. From the screen’s edges, in pixels.
grid.spacing	number, at least 0		Spacing. Between tiles, in pixels.
tileStyle	object		Tile style. Every tile’s style, where a tile sets none of its own. Its fields: Tile style.
tileStyles	list		Tile styles. Styles it adds to the dashboard’s own; one of the same name for the same type is replaced.
tileStyles[].name	text	required	Name. What the style picker shows.
tileStyles[].type	one of value, graph, solar, thermostat, airquality, video, image, light, switch, action, table, status, forecast, text	required	Tile type. The type of tile it is for.
tileStyles[].shape	one of wide, square, tall		Shape. The tile shape it is made for; left out: any.
tileStyles[].style	object	{}	Tile style. Any of a tile style’s properties. Its fields: Tile style.
tileStyles[].options	object	{}	Look options. Look options of its tile type, as a tile’s options nest them.
order	number	required	Order. Its place in the list, lowest first, then by name.

Built in

Id	Name	What
classic	Classic	Dark grey tiles on black, the titles in capitals: the defaults.
night-blue	Night blue	Raised blue-grey tiles with a thin border on a deep blue: the demo’s look.
graphite	Graphite	Flat, rounded dark grey tiles, the titles as typed at the left.
outline	Outline	No tile backgrounds: a thin grey border around each tile, on black.