-
-
Notifications
You must be signed in to change notification settings - Fork 179
Home
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. Currently, you need to upload the partition with this file (and any other resource assets like fonts and images) as a separate partition.
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 it 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.
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,"type":12,"x":20,"y":20,"h":50,"w":50,"enable":"true","hidden":"false"}
{"page":2,"id":2,"type":50,"x":20,"y":120,"h":100,"w":150,"enable":"false","hidden":"false"}These are thr 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 |
| type | 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.
If any of the required page, id or type 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 are allowed for readability and are ignored.
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.
type:1
| Note: You can include some FontAwesome icons in the text. Include \u and the hexadecimal unicode character in the text:
{"page":2,"id":1,"type":12,"h":24,"w":120,"txt":"\ufe05 Icon Demo"}LV_HASP_SWITCH 40 LV_HASP_LED 41 LV_HASP_DDLIST 50 #N/A LV_HASP_SLIDER 30 LV_HASP_GAUGE 31 LV_HASP_BAR 32 LV_HASP_LMETER 33 #N/A LV_HASP_CPICKER 20 LV_HASP_CPICKER 20 #N/A LV_HASP_DDLIST 50 LV_HASP_ROLLER 51 #N/A LV_HASP_BUTTON 10 LV_HASP_BUTTON 10 LV_HASP_BUTTON 10
type: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 |
type: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 |
type:12
| Property | Value | Required | Default | Description |
|---|---|---|---|---|
| txt | string | no | "Text" | The text of the label |
type: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 |
type:20
| Property | Value | Required | Default | Description |
|---|---|---|---|---|
| val | uint16 | no | 0 | The selected color in RBG565 format |
type:30
| Property | Value | Required | Default |
|---|---|---|---|
| min | int16 | no | 0 |
| max | int16 | no | 100 |
| val | int16 | no | 0 |
type:30
| Property | Value | Required | Default |
|---|---|---|---|
| min | int16 | no | 0 |
| max | int16 | no | 100 |
| val | int16 | no | 0 |
type:31
| Property | Value | Required | Default |
|---|---|---|---|
| min | int16 | no | 0 |
| max | int16 | no | 100 |
| val | int16 | no | 0 |
type:32
| Property | Value | Required | Default |
|---|---|---|---|
| min | int16 | no | 0 |
| max | int16 | no | 100 |
| val | int16 | no | 0 |
type:40
| Property | Value | Required | Default |
|---|---|---|---|
| val | int16 | no | 0 |
type: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 |
type:50
| Property | Value | Required | Default |
|---|---|---|---|
| min | int16 | no | 0 |
| max | int16 | no | 100 |
| val | int16 | no | 0 |
type:51
| Property | Value | Required | Default |
|---|---|---|---|
| min | int16 | no | 0 |
| max | int16 | no | 100 |
| val | int16 | no | 0 |
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. Currently, you need to upload the partition with this file (and any other resource assets like fonts and images) as a separate partition.
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 it 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.
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,"type":12,"x":20,"y":20,"h":50,"w":50,"enable":"true","hidden":"false"}
{"page":2,"id":2,"type":50,"x":20,"y":120,"h":100,"w":150,"enable":"false","hidden":"false"}These are thr 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 |
| type | 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.
If any of the required page, id or type 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 are allowed for readability and are ignored.
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.
type:1
| Note: You can include some FontAwesome icons in the text. Include \u and the hexadecimal unicode character in the text:
{"page":2,"id":1,"type":12,"h":24,"w":120,"txt":"\ufe05 Icon Demo"}LV_HASP_SWITCH 40 LV_HASP_LED 41 LV_HASP_DDLIST 50 #N/A LV_HASP_SLIDER 30 LV_HASP_GAUGE 31 LV_HASP_BAR 32 LV_HASP_LMETER 33 #N/A LV_HASP_CPICKER 20 LV_HASP_CPICKER 20 #N/A LV_HASP_DDLIST 50 LV_HASP_ROLLER 51 #N/A LV_HASP_BUTTON 10 LV_HASP_BUTTON 10 LV_HASP_BUTTON 10
type: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 |
type: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 |
type:12
| Property | Value | Required | Default | Description |
|---|---|---|---|---|
| txt | string | no | "Text" | The text of the label |
type: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 |
type:20
| Property | Value | Required | Default | Description |
|---|---|---|---|---|
| val | uint16 | no | 0 | The selected color in RBG565 format |
type:30
| Property | Value | Required | Default |
|---|---|---|---|
| min | int16 | no | 0 |
| max | int16 | no | 100 |
| val | int16 | no | 0 |
type:30
| Property | Value | Required | Default |
|---|---|---|---|
| min | int16 | no | 0 |
| max | int16 | no | 100 |
| val | int16 | no | 0 |
type:31
| Property | Value | Required | Default |
|---|---|---|---|
| min | int16 | no | 0 |
| max | int16 | no | 100 |
| val | int16 | no | 0 |
type:32
| Property | Value | Required | Default |
|---|---|---|---|
| min | int16 | no | 0 |
| max | int16 | no | 100 |
| val | int16 | no | 0 |
type:40
| Property | Value | Required | Default |
|---|---|---|---|
| val | int16 | no | 0 |
type: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 |
type:50
| Property | Value | Required | Default |
|---|---|---|---|
| min | int16 | no | 0 |
| max | int16 | no | 100 |
| val | int16 | no | 0 |
type:51
| Property | Value | Required | Default |
|---|---|---|---|
| min | int16 | no | 0 |
| max | int16 | no | 100 |
| val | int16 | no | 0 |