Lovelace-like entities

Layout

Screenshot

Code

To add an openHASP plate to your installation with a sample design looking a bit like Home Assistant's Lovelace UI:

  • in the plate's web UI select Hasp Light UI theme and reboot,
  • upload a pages.jsonl file with the folowing content to your plate and reboot:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{"page":1,"id":1,"obj":"btn","x":0,"y":0,"w":240,"h":30,"text":"ENTITIES","value_font":22,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0,"click":0}

{"page":1,"id":11,"obj":"label","x":8,"y":30,"w":30,"h":35,"text":"\uE004","align":1,"text_font":32,"text_color":"black"}
{"page":1,"id":12,"obj":"label","x":48,"y":40,"w":130,"h":30,"text":"Presence override","align":0,"text_font":16,"text_color":"black"}
{"page":1,"id":13,"obj":"switch","x":180,"y":37,"w":50,"h":25,"radius":25,"radius2":15}

{"page":1,"id":21,"obj":"label","x":8,"y":65,"w":30,"h":35,"text":"\uF054","align":1,"text_font":32,"text_color":"black"}
{"page":1,"id":22,"obj":"label","x":48,"y":75,"w":130,"h":30,"text":"Front gate","align":0,"text_font":16,"text_color":"black"}
{"page":1,"id":23,"obj":"switch","x":180,"y":72,"w":50,"h":25,"radius":25,"radius2":15}

{"page":1,"id":31,"obj":"label","x":8,"y":100,"w":30,"h":35,"text":"\uF054","align":1,"text_font":32,"text_color":"black"}
{"page":1,"id":32,"obj":"label","x":48,"y":110,"w":130,"h":30,"text":"Back yard","align":0,"text_font":16,"text_color":"black"}
{"page":1,"id":33,"obj":"switch","x":180,"y":107,"w":50,"h":25,"radius":25,"radius2":15}

{"page":1,"id":41,"obj":"label","x":8,"y":135,"w":30,"h":35,"text":"\uEA7A","align":1,"text_font":32,"text_color":"black"}
{"page":1,"id":42,"obj":"label","x":48,"y":145,"w":130,"h":30,"text":"Trash service","align":0,"text_font":16,"text_color":"black"}
{"page":1,"id":43,"obj":"label","x":100,"y":145,"w":130,"h":30,"text":"in 6 days","align":2,"text_color":"black"}

{"page":1,"id":51,"obj":"label","x":8,"y":170,"w":30,"h":35,"text":"\uE70D","align":1,"text_font":32,"text_color":"black"}
{"page":1,"id":52,"obj":"label","x":48,"y":180,"w":130,"h":30,"text":"Selective trash","align":0,"text_font":16,"text_color":"black"}
{"page":1,"id":53,"obj":"label","x":100,"y":180,"w":130,"h":30,"text":"in 10 days","align":2,"text_color":"black"}

{"page":1,"id":61,"obj":"label","x":8,"y":205,"w":30,"h":35,"text":"\uE32A","align":1,"text_font":32,"text_color":"black"}
{"page":1,"id":62,"obj":"label","x":48,"y":215,"w":130,"h":30,"text":"Green energy active","align":0,"text_font":16,"text_color":"black"}
{"page":1,"id":63,"obj":"label","x":100,"y":215,"w":130,"h":30,"text":"Yes :)","align":2,"text_color":"black"}

{"page":1,"id":71,"obj":"label","x":8,"y":240,"w":30,"h":35,"text":"\uE026","align":1,"text_font":32,"text_color":"black"}
{"page":1,"id":72,"obj":"label","x":48,"y":250,"w":130,"h":30,"text":"Air quality","align":0,"text_font":16,"text_color":"black"}
{"page":1,"id":73,"obj":"label","x":100,"y":250,"w":130,"h":30,"text":"OK (29.58 µg/m3)","align":2,"text_color":"black"}

Check out the pagination example to learn how to implement the bottom bar.
Check out the clock and temperature example to learn how to implement values to the top.
Check out the Lovelace cover example to learn how to bring life to the objects.

Last update: 2022-06-04
Back to top