The layout of the pages can be defined in several ways:
- by creating a special file on the flash file system, which will be loaded and the layout with the objects displayed each time HASP starts up.
- by issuing commands through MQTT to draw/change the objects immediately
You can create the file wity your favourite text editor and upload it (and other resource assets like fonts) using the web interface HASP Design menu.
The location of this file is
/pages.jsonl in the root of the flash filesystem.
It uses the JSON Lines format with one json object per line.
Each line should contain exactly one valid json object and end with a line-break
\n (not a comma).
The jsonl lines are 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.
Blank lines are allowed for readability and are ignored.
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
The maximum number of pages and objects is limited by the memory available in the MCU, it depends on the microcontroller type you use.
If any of the required
obj properties are missing -and the line is still valid json- then it is interpreted as a comment.
When you upload the file to your plate's flash filesystem, you can also use the
page parameter in a comment to set the default page for new objects that don't have a
Example 1: Add a comment on a single line that is ignored.
Example 2: Set the default
2 for objects in the following lines, besides adding a comment as well.
pageparameter in the lines below this comment, those objects will appear by default on page
Example 3: Insert a comment for an object.
If the line is not valid json, the parsing of the rest of the file is also stopped.
See commands documentation for the
jsonl command. The payload of the command corresponds to what's exactly in one line of the
pages.jsonl file above, with a minor exception: page numbers are not kept between the commands - you need to specfiy the page with each!
Some integrations like the custom component for Home Assistant can store the
pages.jsonl centrally for your plates, in such cases you have the to specify the page number for each object, as those files are actually parsed line by line using the
Each line in
pages.jsonl creates one object on a page and has to be in the json format.
The order of the objects also dictates the layer on the page from bottom to top. So the last drawn object will be the topmpost.
Once the object is created, you can reference it with
X is the page number and
Y is the id of the object.
Ids start from
1 on each page.
You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.)
0 refers to an object visible on all pages.
An id of
0 refers to the page itself instead of an object.
If you add the objects on the page
0 last, you ensure that they will be always be visible on top of all other pages.
See objects documentation for details.
A page can have the following attributes:
prev: The number of the destination page when performing a
page prevaction on this page
next: The number of the destination page when performing a
page nextaction on this page
back: The number of the destination page when performing a
page backaction on this page
By default all pages cycle in a round-robin fashion (after the last page jump back to first), but you can change this behaviour by adjusting the
back target pages.
For example, to limit cycle through page 1-5 only:
on page 5,
page next action will jump back to page 1:
on page 1,
page prev action will go to page 5 (instead of default page 12 on an ESP32)
p0b0 (as all pages) is not valid to set this attribute for. It has to be set individually on each real page starting from 1.
back acts like a level up action, so you can jump back to the home or menu page where you came from using
page back. You can create a hierarchy of pages and menus this way.
Check out the example for how to implement a simple pagination bar.