Home

Page Layout

You can define the layout of the pages by creating a special file on the SPIFFS file system. This layout is read each time HASP starts up. You can upload this file (and other resource assets like fonts and images) in the web interface Configuration > HASP Settings.

pages.jsonl

The layout of the pages is defined in the /pages.jsonl file. It uses the JSON Lines format with one json object on per line. Each line should contain exactly one valid json object and end with a line-break \n (not a comma).

The file is interpreted line-by-line. When a malformed line is encountered, the processing of the rest of the file stops. If you are missing objects, check the logs to see which line was processed last. You probably have a typo in the following line which blocks parsing the rest of the file.

| Note: The complete file in its entirety is not a valid json file. Each individual line however must be a valid json object. The file extension is .jsonl and not .json.

Objects

Each individual line defines one object on a page and the line has the json format. The order of objects dictates the layer on the page from bottom to top.

Example Objects

{"page":2,"id":1,"objid":12,"x":20,"y":20,"h":50,"w":50,"enable":"true","hidden":"false"}
{"page":2,"id":2,"objid":50,"x":20,"y":120,"h":100,"w":150,"enable":"false","hidden":"false"}

These are the common properties shared among all objects:

Property	Value	Required	Default	Description
page	0-255	yes	n/a	ID of the page the object appears on
id	0-255	yes	n/a	ID of the object on this page
objid	0-255	yes	n/a	ID of the object type (see below)
x	int16	no	0	horizontal position on the page
y	int16	no	0	vertical position on the page
w	int16	no	0	width of the object
h	int16	no	0	height of the object
enable	true/false	no	true	object is clickable
hidden	true/false	no	false	object is hidden
opacity	0-100	no	100	% that the object is opaque

The maximum number of pages and objects is limited by the memory available in the MCU.

"page":254 specifies that the object is on every page. It can be used for example to specify a static menu bar. You can still hide the object on select pages if needed. Objects on this page appear on top of any objects on the underlying page.

Comments

If any of the required page, id or objid properties are missing -and the line is still valid json- then it is interpreted as a comment and skipped.

Example comments

{"comment":" ----------- Page 2 layout ------------"}
{"page3":" ---- My Awesome Color Picker Layout ----"}

| Note: If the line is not valid json, the parsing of the rest of the file is also stopped.

Blank Lines

Blank lines are allowed for readability and are ignored.

Object Types

Each object type is an ID that indicates which object type that line represents. Besides the common properties listed above, each object type can have specific properties.

Button

objid:10

Property	Value	Required	Default	Description
toggle	boolean	no	true	When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button

Checkbox

objid:11

Property	Value	Required	Default	Description
val	int16	no	0	The value: 1 for checked, 0 for unchecked
txt	string	no	"Checkbox"	The label of the checkbox

Text Label

objid:12

Property	Value	Required	Default	Description
txt	string	no	"Text"	The text of the label

{"page":2,"id":1,"objid":12,"h":24,"w":120,"txt":"\ufe05 Icon Demo"}

Spinner

objid:21

Property	Value	Required	Default	Description
speed	int16	no	1000	The time for 1 furn in ms
direction	int16	no	100	0 for clockwise, 1 for counter-clockwise
thickness	int16	no	dep. on theme	The width of the arcline

Colorpicker

objid:20

Property	Value	Required	Default	Description
val	uint16	no	0	The selected color in RBG565 format

Slider

objid:30

Property	Value	Required	Default
min	int16	no	0
max	int16	no	100
val	int16	no	0

Double Slider

objid:30

Property	Value	Required	Default
min	int16	no	0
max	int16	no	100
val	int16	no	0

Gauge

objid:31

Property	Value	Required	Default
min	int16	no	0
max	int16	no	100
val	int16	no	0

Progressbar

objid:32

Property	Value	Required	Default
min	int16	no	0
max	int16	no	100
val	int16	no	0

Switch

objid:40

Property	Value	Required	Default
val	int16	no	0

LED Indicator

objid:41

Property	Value	Required	Default	Description
val	int16	no	0	0 for off, 1 for on
brightness	int16	no	50	The brightness of the indicator when off

Drop-down List

objid:50

Property	Value	Required	Default
min	int16	no	0
max	int16	no	100
val	int16	no	0

Roller

objid:51

Property	Value	Required	Default
min	int16	no	0
max	int16	no	100
val	int16	no	0

Example file

This is a real-world demo pages.jsonl file:

{"comment":"---------- Page 0 ----------"}
{"objid":10,"id":1,"page":0,"x":10,"y":45,"w":220,"h":55,"toggle":"TRUE","txt":"Toggle Me \uf0a6"}
{"objid":11,"id":2,"page":0,"x":10,"y":100,"w":220,"h":55,"txt":"Checkbox 1"}
{"objid":12,"id":3,"page":0,"x":10,"y":10,"w":220,"h":30,"txt":"Text Label 1","align":1,"padh":50}
{"objid":40,"id":4,"page":0,"x":70,"y":205,"w":100,"h":55}
{"objid":41,"id":5,"page":0,"x":10,"y":205,"w":55,"h":55}
{"objid":50,"id":6,"page":0,"x":10,"y":150,"w":150,"txt":"\uf007 Option 1\n\uf007 Option 2\n\uf007 Option 3"}
{"objid":21,"id":7,"page":0,"x":165,"y":140,"w":70,"h":70}
{"comment":"---------- Page 1 ----------"}
{"objid":30,"id":1,"page":1,"x":10,"y":170,"w":200,"h":50}
{"objid":31,"id":3,"page":1,"x":13,"y":10,"w":100,"h":100}
{"objid":32,"id":4,"page":1,"x":10,"y":110,"w":200,"h":50}
{"objid":33,"id":5,"page":1,"x":127,"y":10,"w":100,"h":100}
{"objid":12,"id":10,"page":1,"x":0,"y":0,"w":70,"h":50,"parentid":5,"txt":"\uf00c OK"}
{"comment":"---------- Page 2 ----------"}
{"objid":20,"id":1,"page":2,"x":20,"y":0,"w":200,"h":200}
{"objid":20,"id":2,"page":2,"x":20,"y":210,"w":200,"h":50,"rect":"TRUE"}
{"comment":"---------- Page 3 ----------"}
{"objid":50,"id":1,"page":3,"x":10,"y":10,"w":220,"txt":"Spring\nSummer\nAutumn\nWinter"}
{"objid":51,"id":2,"page":3,"x":40,"y":50,"w":160,"txt":"2018\n2019\n2020\n2021\n2022\n2023\n2024","rows":4}
{"comment":"---------- Page 254 ----------"}
{"objid":10,"id":1,"page":254,"x":0,"y":270,"w":75,"h":50,"opacity":100,"txt":"\uF053 Prev"}
{"objid":10,"id":2,"page":254,"x":75,"y":270,"w":90,"h":50,"opacity":100,"txt":"\uF015 Home"}
{"objid":10,"id":3,"page":254,"x":165,"y":270,"w":75,"h":50,"opacity":100,"txt":"Next \uF054"}