Example layouts: Look what I built ! #37
Replies: 58 comments 111 replies
-
Beta Was this translation helpful? Give feedback.
-
|
Seems to update p0b4 |
Beta Was this translation helpful? Give feedback.
-
|
Lots of examples in the documentation: |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Home Assistant Lovelace-like appearance and functionality: |
Beta Was this translation helpful? Give feedback.
-
|
@nagyrobi we need to capture all these examples in a proper place :) Lets use the Wiki on the custom-component repository |
Beta Was this translation helpful? Give feedback.
-
|
Ok! |
Beta Was this translation helpful? Give feedback.
-
|
Lets do one wiki page per "HA entity" |
Beta Was this translation helpful? Give feedback.
-
|
I don't see a way to edit the wiki using the web interface of github. |
Beta Was this translation helpful? Give feedback.
-
|
Clone: |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
does the album image scale with the screen? I'm trying to make it bigger on the sc01 3.5" |
Beta Was this translation helpful? Give feedback.
-
Using the Below a cut from my own HA automations (Sonos media player plate): |
Beta Was this translation helpful? Give feedback.
-
|
anybody have and examples of what a jsonl file and a Home Assistant config file using gpios (switch) should look like. |
Beta Was this translation helpful? Give feedback.
-
|
that part is still work in progress. |
Beta Was this translation helpful? Give feedback.
-
|
Ok great thx |
Beta Was this translation helpful? Give feedback.
-
|
Door/window sensor state
HA config |
Beta Was this translation helpful? Give feedback.
-
|
Thanks to the open source community and in this case to the open HASP group. I was able to create a nice controller without spending weeks/months writing code made this project possible.
{"comment":"------------------Displays on all pages - show nav buttons at bottom - time & temp at top"}
{"page":0,"id":10,"obj":"btn","action":"prev","x":0,"y":450,"w":105,"h":30,"bg_color":"#2C3E50","text":"\uE141","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":24}
{"page":0,"id":11,"obj":"btn","action":"back","x":106,"y":450,"w":105,"h":30,"bg_color":"#2C3E50","text":"\uE2DC","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":16}
{"page":0,"id":12,"obj":"btn","action":"next","x":212,"y":450,"w":105,"h":30,"bg_color":"#2C3E50","text":"\uE142","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":24}
{"page":0,"id":4,"obj":"label","x":5,"y":5,"h":30,"w":70,"text":"00.0°C","align":2,"bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"page":0,"id":6,"obj":"label","x":260,"y":5,"h":30,"w":62,"text":"00:00","align":0,"bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"page":0,"id":1,"obj":"label","x":115,"y":5,"w":110,"h":30,"text":"ASM Tech","value_font":16,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}
{"comment":"cycle through only configured pages"}
{"page":1,"id":0,"prev":4}
{"page":4,"id":0,"next":1}
{"comment":"------------------Page 1 - Light control, slider - This was only a test"}
{"page":1,"id":2,"obj":"btn","x":10,"y":40,"w":105,"h":90,"toggle":true,"text":"\uE335","text_font":32,"mode":"break","align":1}
{"page":1,"id":5,"obj":"slider","x":20,"y":190,"h":15,"w":300,"min":0,"max":100}
{"comment":"------------------Page 2 - Media control"}
{"page":2,"id":1,"obj":"label","x":1,"y":40,"w":320,"h":30,"text":"Media Player","value_font":16,"align":"center","bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}
{"page":2,"id":10,"obj":"btn","comment":"action-power","x":115,"y":85,"w":80,"h":50,"bg_color":"#2C3E50","toggle":false,"text":"\uE425","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":24}
{"page":2,"id":12,"obj":"btn","comment":"skip-previous","x":10,"y":150,"w":80,"h":70,"bg_color":"#2C3E50","toggle":false,"text":"\uE4AE","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":24}
{"page":2,"id":14,"obj":"btn","comment":"pause","x":115,"y":150,"w":80,"h":70,"bg_color":"#2C3E50","toggle":false,"text":"\uE3E4","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":24}
{"page":2,"id":18,"obj":"btn","comment":"skip-next","x":220,"y":150,"w":80,"h":70,"bg_color":"#2C3E50","toggle":false,"text":"\uE4AD","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":24}
{"page":2,"id":20,"obj":"btn","comment":"stop","x":70,"y":240,"w":60,"h":50,"bg_color":"#2C3E50","toggle":false,"text":"\uE4DB","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":24}
{"page":2,"id":22,"obj":"btn","comment":"mute","toggle":false,"x":190,"y":240,"w":60,"h":50,"bg_color":"#2C3E50","toggle":false,"text":"\uE75F","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":24}
{"page":2,"id":5,"obj":"slider","x":20,"y":310,"h":15,"w":300,"min":0,"max":100}
{"page":2,"id":8,"obj":"label","x":12,"y":340,"w":140,"h":30,"text":"Volume","value_font":16,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}
{"comment":"------------------Page 3 - Work Lights"}
{"page":3,"id":1,"obj":"label","x":1,"y":50,"w":320,"h":30,"text":"Bench Work Lites","value_font":16,"align":"center","bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}
{"page":3,"id":3,"obj":"btn","action":"power","x":130,"y":90,"w":50,"h":40,"bg_color":"#2C3E50","text":"\uE425","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":24}
{"page":3,"id":5,"obj":"slider","x":20,"y":150,"h":15,"w":280,"min":1,"max":255}
{"page":3,"id":6,"obj":"label","x":90,"y":168,"w":245,"h":30,"text":"Work desk Upper","value_font":16,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}
{"page":3,"id":8,"obj":"btn","action":"power","x":130,"y":205,"w":50,"h":40,"bg_color":"#2C3E50","text":"\uE425","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":24}
{"page":3,"id":10,"obj":"slider","x":20,"y":265,"h":15,"w":280,"min":1,"max":255}
{"page":3,"id":14,"obj":"label","x":90,"y":280,"w":175,"h":30,"text":"Work desk Lower","value_font":16,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}
{"page":3,"id":16,"obj":"btn","action":"power","x":130,"y":327,"w":50,"h":40,"bg_color":"#2C3E50","text":"\uE425","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":24}
{"page":3,"id":18,"obj":"slider","x":20,"y":385,"h":15,"w":280,"min":1,"max":255}
{"page":3,"id":22,"obj":"label","x":60,"y":405,"w":210,"h":30,"text":"Computer desk Lower","value_font":16,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}
{"comment":"------------------Page 4 - Mood Lights"}
{"page":4,"id":1,"obj":"label","x":1,"y":27,"w":320,"h":30,"text":"Bench Mood Lites","value_font":16,"align":"center","bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}
{"page":4,"id":4,"obj":"btn","x":10,"y":117,"w":50,"h":30,"radius":10,"toggle":false}
{"Page":4,"id":6,"obj":"cpicker","x":85,"y":57,"w":155,"h":155}
{"page":4,"id":8,"obj":"slider","x":275,"y":50,"h":165,"w":15,"min":1,"max":255}
{"page":4,"id":10,"obj":"label","x":34,"y":218,"w":245,"h":30,"text":"CompDesk","value_font":16,"align":"center","bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}
{"page":4,"id":14,"obj":"btn","x":10,"y":330,"w":50,"h":30,"radius":10,"toggle":false}
{"Page":4,"id":16,"obj":"cpicker","x":85,"y":254,"w":155,"h":155}
{"page":4,"id":18,"obj":"slider","x":275,"y":255,"h":175,"w":15,"min":1,"max":255}
{"page":4,"id":20,"obj":"label","x":34,"y":415,"w":245,"h":30,"text":"WorkDesk","value_font":16,"align":"center","bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0} |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for sharing! |
Beta Was this translation helpful? Give feedback.
-
|
Would you be able to share your automation code for this? Looks Great! |
Beta Was this translation helpful? Give feedback.
-
|
Hi.
Thanks. Spent more time tweaking the objects on the screen, then modifying
the example code.
I did not write any code.
Just used the examples from the openHASP pages on github. I just replaced
the entities in the examples with the entities that I wanted to control
that are in my Home Assistant.
…On Fri, 13 Aug 2021 at 15:30, rlust ***@***.***> wrote:
Would you be able to share your automation code for this? Looks Great!
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#37 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/APA3HLUS7VI6FPRMCKCUE5DT4VXGNANCNFSM4VQLCQDQ>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email>
.
|
Beta Was this translation helpful? Give feedback.
-
|
Can you share the Home Assistant automation code you used? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
plate2: |
Beta Was this translation helpful? Give feedback.
-
|
Spinner object spins nicely behind the transparent PNG, shows the impression of a spinning fan. Changes speed and color based on the fan's actual preset level. |
Beta Was this translation helpful? Give feedback.
-
|
See example: |
Beta Was this translation helpful? Give feedback.
-
|
Playing with openhasp + homeassistant Page1 pages.jsonl Open
hassio configuration Open
Corel draw used for test and postioning |
Beta Was this translation helpful? Give feedback.
-
|
Wow so nice! |
Beta Was this translation helpful? Give feedback.
-
|
What's the UI theme you use? |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, i use standard material light, later I added to pages.jsonl the colors for the static icons and instead on the hassio configuration I added the colors for the dynamic icons with change of state |
Beta Was this translation helpful? Give feedback.
-
|
Well, it took like F O R E V E R , but here's my take on a Sonos speaker group plate 🙂 Config is done for a wt32-sc01 device with 320x480 resolution screen. Link for more detailed documentation, as well as all needed config files here If you're into HA templates, then knock yourself out and have a go at 'ironing out' my attempts to make these as effective as possible
|
Beta Was this translation helpful? Give feedback.
-
|
Sonos integration in HA 2022.8 release introduced new breaking changes. On top of previous breaking changes in regard to the deprecated |
Beta Was this translation helpful? Give feedback.
-
|
Well, it took some time, but now it's done and published 😉 |
Beta Was this translation helpful? Give feedback.
-
|
Just added a 320x480 resolution design as well |
Beta Was this translation helpful? Give feedback.
-
|
480 x 800 res. layout for the large 5 and 7" Sunton's devices have just been added
|
Beta Was this translation helpful? Give feedback.
-
|
Here is a simple layout which replaced an old intercom module at my entrance doors: |
Beta Was this translation helpful? Give feedback.
-
|
Thanks to everyone who are contributing their designs. It really helped me going and creating something of my own. I wanted to share back my work, which is based on the Mushroom lovelace cards. All the code is available in this repo. page 1 page 2 page 3 page 4 |
Beta Was this translation helpful? Give feedback.
-
|
is it suitable for 480x480, or is there something that needs to be changed? thank you, nice setting |
Beta Was this translation helpful? Give feedback.
-
|
The blinds control panel. A window of rectangles is drawn and the length of the curtain corresponds to the percentage of opening.
{"page":0,"id":1,"obj":"btn","action":"prev","x":0,"y":420,"w":105,"h":60,"bg_color":"#2C3E50","text":"\uE141","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":32} {"page":3,"id":1,"obj":"obj","x":0,"y":0,"w":320,"h":480,"radius":0,"bg_color":"black","click":0,"border_opa":100} {"page":3,"id":5,"obj":"label","x":65,"y":5,"h":30,"w":220,"text":"Roll-1","text_color":"gray","align":1,"bg_color":"#2C3E50"} |
Beta Was this translation helpful? Give feedback.
-
|
What is the default resolution this is designed for? Trying to migrate it to a Lanbon L8, which from above appears to be larger than it's default resolution. |
Beta Was this translation helpful? Give feedback.
-
|
320x480 |
Beta Was this translation helpful? Give feedback.
-
|
Hello all! I made a page for the WLED, you can adjust brightness, color, intensity, speed and reverse your strip if needed. On the top left (under time) I added power consumption in mA Here is the code for configuration.yaml: and here is the pages code: {"page":7,"id":35,"obj":"img","src":"L:/circl.png","auto_size":0,"w":320} {"page":7,"id":103,"obj":"switch","x":32,"y":95,"w":60,"h":20,"radius":15} Customize as you want. I use WT-32-SC01 and the screen resolution is 320x480. UI Theme is "material dark". WLED entity name in this page is "light.keittiotiskiallas", rename those for your entity. Please fix your page numbers and IDs to fit your pages and configuration.yaml. If you don't want your strip turn off when slider goes down, change the id:106 min value to 1. Remove/change background image, id35, if you dont want to use images on your OpenHASP. Thank you so much for the OpenHASP! I just love it, easy to flash and use, just perfect for my needs! |
Beta Was this translation helpful? Give feedback.
-
|
json `{"comment":" ----------- Page 0 layout Comune------------"} {"comment":" ----------- Page 0 riga in alto------------"} {"comment":" ----------- Page 0 riga in basso------------"} {"comment":" ----------- Page 1 MENU------------"} {"page":1,"id":2,"obj":"btn","action": "p2","x":5,"y":40,"w":110,"h":35,"text":"\uE335 Luci","text_font":22} {"page":1,"id":6,"obj":"btn","action": "p6","x":120,"y":40,"w":110,"h":35,"text":"\uE81C Aperture","text_font":22} {"comment":" ----------- icone altro lato dx------------"} {"comment":" ----------- Page 2 illuminazione------------"} {"page":2,"id":2,"obj":"btn","x":0,"y":120,"w":320,"h":2,"text":"","value_font":22,"text_color":"#000000","radius":0,"border_side":15,"border_color":"#2C3E50"} {"comment":" ----------- Page 3 termostato------------"} {"comment":" ----------- Page 4 TAPPARELLE------------"} {"comment":" ----------- tutte ------------"} {"comment":" ----------- TENDA salone ------------"} {"comment":" ----------- telo video proiettore ------------"} {"comment":" ----------- cameretta ------------"} {"comment":" ----------- Letto ------------"} {"comment":" ----------- Page 5 METEO FORECAST------------"} {"comment":" ----------- Page 5 pallino centrale------------"} {"comment":" ----------- prima pagina pallino------------"} {"page":5,"id":31,"obj":"label","x":8,"y":94,"w":130,"h":22,"align":"left","text":"hour+3","parentid":11,"pad_top":3,"click":0} {"page":5,"id":41,"obj":"label","x":8,"y":116,"w":130,"h":22,"align":"left","text":"hour+4","parentid":11,"pad_top":3,"click":0} {"page":5,"id":51,"obj":"label","x":8,"y":138,"w":130,"h":22,"align":"left","text":"hour+5","parentid":11,"pad_top":3,"click":0} {"comment":" ----------- seconda pagina pallino------------"} {"page":5,"id":71,"obj":"label","x":6,"y":94,"w":100,"h":22,"align":"left","text":"date+2","parentid":12,"pad_top":3,"click":0} {"page":5,"id":81,"obj":"label","x":6,"y":116,"w":100,"h":22,"align":"left","text":"date+3","parentid":12,"pad_top":3,"click":0} {"page":5,"id":91,"obj":"label","x":6,"y":138,"w":100,"h":22,"align":"left","text":"date+4","parentid":12,"pad_top":3,"click":0} {"comment":" ----------- Page 6 PORTE------------"} {"page":6,"id":2,"obj":"btn","x":0,"y":107,"w":320,"h":1,"text":"","value_font":11,"text_color":"#000000","radius":0,"border_side":8,"border_color":"#2C3E50"} {"comment":" ----------- Page 7 POWER------------"} {"page":7,"id":2,"obj":"btn","x":20,"y":95,"w":45,"h":32,"text":"---- W","text_font":16,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":15,"click":0,"border_color":"#FFFFFF"} {"comment":" ----------- grafica frecce e icone------------"} {"comment":" ----------- Page 8 p8------------"} {"comment":" ----------- Page 9 p9------------"} {"comment":" ----------- Page 10 INFORMATION------------"} {"page":10,"id":1,"obj":"label","x":20,"y":35,"w":200,"h":40,"text":"Settings", "text_font": 18} {"page":10,"id":5,"obj":"label","x":20,"y":115,"w":200,"h":40,"text":"System", "text_font": 18} {"page":10,"id":7,"obj":"label","x":25,"y":135,"w":200,"h":40,"text":"IP Address", "text_font": 12, "text_color":"#9b9b9b"} {"page":10,"id":9,"obj":"label","x":25,"y":170,"w":200,"h":40,"text":"Uptime", "text_font": 12, "text_color":"#9b9b9b"} {"page":10,"id":11,"obj":"label","x":170,"y":135,"w":200,"h":40,"text":"openHASP version", "text_font": 12, "text_color":"#9b9b9b"} {"page":10,"id":13,"obj":"label","x":170,"y":170,"w":200,"h":40,"text":"Friendly Name", "text_font": 12, "text_color":"#9b9b9b"} homeassistant `# config per display con openhasp PAGE 0PAGE 2 LUCItermostato pagina 3#TAPARELLA pag 4 #TAPARELLA TENDA SALONE -inizio #TAPARELLA TELO PROIETTORE -inizio METEO pagina 5PORTE E MOVIMENTO pagina 6PAGE 7 POWERPAGE 8PAGE 9PAGE 10. setting` |
Beta Was this translation helpful? Give feedback.
-
|
Dear all, thank you for the great work, involvement, commitment and unconditioned sharing of knowledge!
|
Beta Was this translation helpful? Give feedback.
-
|
Nice work, I was slightly worried your house was on fire at first glance though ;-) I started a couple of threads on openHASP that might be of interest to you - |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
can show icon with code 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Using spook random input.Select service it's easy to add random popup messages.
|
Beta Was this translation helpful? Give feedback.
-
|
Help for syntax 👍 i have results : "points": "[[29,693][29,819]]" but i need 👍 [[29,225],[29,280]] { "page": 7, "id": 26, "obj": "line", "points": [[29,225],[29,280]], "line_width": 10, "line_rounded": true, "line_opa": 255, "line_color": "#80D0FF"} can i remove "" if remove i have error |
Beta Was this translation helpful? Give feedback.
-
|
i try: result: dont see line :( |
Beta Was this translation helpful? Give feedback.
-
|
This question does not belong in this thread. Please create a post in Q&A topic. Thanks. |
Beta Was this translation helpful? Give feedback.
-
|
Not sure if anyone has a need for it. But I created a screensaver that rotates between 5 different backgrounds installed on the device every 5 minutes, and then moves a box containing the time and current temperature every 1 minute to a random place on the screen. Here is the automation code: https://gist.github.com/brmo/45856c510ece8fd3842927c1c4e052c5 Examples:
Edited and added a gist instead. Pasting the code here didnt work too well. |
Beta Was this translation helpful? Give feedback.
-
|
I have been trying for 2 days to make a button usable on your tab page, which simply takes me to a specific page. |
Beta Was this translation helpful? Give feedback.
-
|
Whose tab page, can you share what you setup ? |
Beta Was this translation helpful? Give feedback.
-
|
Using a 7" Elecrow screen Page 1 Page 2 Page 3 Still working on Page 4 |
Beta Was this translation helpful? Give feedback.
-
|
Can you please upload your config file's for this layout ? |
Beta Was this translation helpful? Give feedback.
-
|
pages.txt |
Beta Was this translation helpful? Give feedback.
-
|
And here is the Home Assistant yaml |
Beta Was this translation helpful? Give feedback.
-
|
Really enjoying the dashboard. I've tried to use it in https://haspdesigner.qrisonline.nl/ but it just fails to load it all (no idea why). Been tweaking it to work with the Luxpower inverters which so far works fine. Want to add a few more tabs for the cars so will have to just edit it in json directly it seems. |
Beta Was this translation helpful? Give feedback.
-
|
there are some issues with the temp page . |
Beta Was this translation helpful? Give feedback.
-
|
Keeping an eye on my printer...
|
Beta Was this translation helpful? Give feedback.
-
|
No serial port error messages :( |
Beta Was this translation helpful? Give feedback.
-
|
There are probably many tools one can use, I use putty
|
Beta Was this translation helpful? Give feedback.
-
|
did you see my config? |
Beta Was this translation helpful? Give feedback.
-
|
No, I missed the config. In the action, is the ` supposed to be there? Is the device_id ok? In an example, I see: On the serial port, do you see anything happening? You should see "MQTT RCV: p4b1.src = ..." |
Beta Was this translation helpful? Give feedback.
-
|
I tried a bit more and with this code it finally works :) |
Beta Was this translation helpful? Give feedback.
-
|
Display mounted on the wall. Solar overview page. Solar summary Media info Roller blinds EV charging info. Display is a Sunton ESP32-8048S050C Everything is controlled by Openhab. Link to github |
Beta Was this translation helpful? Give feedback.
-
|
Looks great! |
Beta Was this translation helpful? Give feedback.
-
|
Since I'm not a very skilled user and I'm a bit lazy, I made a helper program to adapt existing pages to a different resolution. This also helps in the positioning of elements when editing new pages. I hope you find it useful. |
Beta Was this translation helpful? Give feedback.
-
|
Some modern design with background blur. Still WIP as I need to add more pages(eg. thermostat, forecast).
{"id":0,"bg_color":"#111"}
{"page":1,"id":0,"bg_color":"#111"}
{"page":2,"id":0,"bg_color":"#111"}
{"page":3,"id":0,"bg_color":"#111"}
// FRONT PAGE
{"page":1,"id":8,"obj":"img","src":"L:/bg1d.png","w":480, "h":480}
{"page":1,"id":1,"obj":"label","x":27,"y":114,"w":328,"h":173,"text":"--:--", "text_font": 148}
{"page":1,"id":2,"obj":"label","x":31,"y":32,"w":48,"h":48,"text":"\uE596", "text_font": 48}
{"page":1,"id":3,"obj":"label","x":85,"y":44,"w":62,"h":38,"text":"--°C", "text_font": 32}
{"page":1,"id":4,"obj":"label","x":31,"y":83,"w":330,"h":28,"text":"--", "text_font": 24}
{"page":1,"id":5,"obj":"label","x":378,"y":54,"w":24,"h":28,"text":"\uE6A1", "text_font": 24}
{"page":1,"id":6,"obj":"label","x":405,"y":54,"w":47,"h":28,"text":"--°C", "text_font": 24}
{"page":1,"id":7,"obj":"label","x":412,"y":76,"w":39,"h":28,"text":"--%", "text_font": 24}
{"page":1,"id":12,"obj":"label","x":54,"y":339,"w":50,"h":50,"text":"\uE456", "text_font": 48}
{"page":1,"id":13,"obj":"label","x":54,"y":402,"w":70,"h":28,"text":"Scenes", "text_font": 24}
{"page":1,"id":11,"obj":"obj","x":16,"y":311,"w":216,"h":144,"radius":15,"click":true,"border_side":0,"bg_color":"#1c1c1c","action":"p2","opacity":0}
{"page":1,"id":22,"obj":"label","x":274,"y":339,"w":50,"h":50,"text":"\uE335", "text_font": 48}
{"page":1,"id":23,"obj":"label","x":274,"y":402,"w":70,"h":40,"text":"Lights", "text_font": 24}
{"page":1,"id":21,"obj":"obj","x":248,"y":311,"w":216,"h":144,"radius":15,"click":true,"border_side":0,"bg_color":"#1c1c1c","action":"p3","opacity":0}
// SCENES PAGE
{"page":2,"id":1,"obj":"img","src":"L:/bg2d.png","w":480, "h":480}
// AppBar
{"page":2,"id":3,"obj":"label","x":0,"y":8,"w":480,"h":40,"text":"Scenes", "text_font": 32,"align":"center"}
{"page":2,"id":4,"obj":"label","x":8,"y":4,"w":32,"h":48,"text":"\uE141", "text_font": 48}
{"page":2,"id":5,"obj":"obj","x":0,"y":0,"w":64,"h":64,"click":true,"action":"back", "opacity":0}
{"page":2,"id":10,"obj":"obj","x":16,"y":90,"w":216,"h":90,"click":true,"opacity":0}
{"page":2,"id":20,"obj":"obj","x":16,"y":217,"w":216,"h":90,"click":true,"opacity":0}
{"page":2,"id":30,"obj":"obj","x":16,"y":344,"w":216,"h":90,"click":true,"opacity":0}
{"page":2,"id":40,"obj":"obj","x":248,"y":90,"w":216,"h":90,"click":true,"opacity":0}
{"page":2,"id":50,"obj":"obj","x":248,"y":217,"w":216,"h":90,"click":true,"opacity":0}
{"page":2,"id":60,"obj":"obj","x":248,"y":344,"w":216,"h":90,"click":true,"opacity":0}
// LIGHTS PAGE
{"page":3,"id":1,"obj":"img","src":"L:/bg3d.png","w":480, "h":480}
// AppBar
{"page":3,"id":3,"obj":"label","x":0,"y":8,"w":480,"h":40,"text":"Lights", "text_font": 32,"align":"center"}
{"page":3,"id":4,"obj":"label","x":8,"y":4,"w":32,"h":48,"text":"\uE141", "text_font": 48}
{"page":3,"id":5,"obj":"obj","x":0,"y":0,"w":64,"h":64,"click":true,"action":"back", "opacity":0}
// light 1
{"page":3,"id":10,"obj":"slider","x":24,"y":80,"w":432,"h":60,"value":50, "min":1, "max":255,"bg_opa00":20, "bg_opa20":0, "bg_color10":"#FAAC1B","bg_color00":"#1c1c1c"}
{"page":3,"id":11,"obj":"obj","x":32,"y":88,"w":44,"h":44,"radius":22,"border_side":0,"bg_color":"#181c18"}
{"page":3,"id":12,"obj":"label","x":32,"y":94,"w":44,"h":44,"text":"\uE335", "text_font": 24,"align":"center","click":0,"text_color":"#747474"}
{"page":3,"id":13,"obj":"label","x":92,"y":94,"w":300,"h":60,"text":"Food Lamp", "text_font": 24,"click":0}
// light 2
{"page":3,"id":20,"obj":"slider","x":24,"y":156,"w":432,"h":60,"value":50, "min":1, "max":255,"bg_opa00":20, "bg_opa20":0,"bg_color10":"#FAAC1B","bg_color00":"#1c1c1c"}
{"page":3,"id":21,"obj":"obj","x":32,"y":164,"w":44,"h":44,"radius":22,"border_side":0,"bg_color":"#181c18"}
{"page":3,"id":22,"obj":"label","x":32,"y":170,"w":44,"h":44,"text":"\uE335", "text_font": 24,"align":"center","click":0,"text_color":"#747474"}
{"page":3,"id":23,"obj":"label","x":92,"y":170,"w":300,"h":60,"text":"U-Lamp", "text_font": 24,"click":0}
// light 3
{"page":3,"id":30,"obj":"slider","x":24,"y":232,"w":432,"h":60,"value":50, "min":1, "max":255,"bg_opa00":20, "bg_opa20":0,"bg_color10":"#FAAC1B","bg_color00":"#1c1c1c"}
{"page":3,"id":31,"obj":"obj","x":32,"y":240,"w":44,"h":44,"radius":22,"border_side":0,"bg_color":"#181c18"}
{"page":3,"id":32,"obj":"label","x":32,"y":246,"w":44,"h":44,"text":"\uE335", "text_font": 24,"align":"center","click":0,"text_color":"#747474"}
{"page":3,"id":33,"obj":"label","x":92,"y":246,"w":300,"h":60,"text":"TV Lamp", "text_font": 24,"click":0}
// light 4
{"page":3,"id":40,"obj":"slider","x":24,"y":308,"w":432,"h":60,"value":50, "min":1, "max":255,"bg_opa00":20, "bg_opa20":0,"bg_color10":"#FAAC1B","bg_color00":"#1c1c1c"}
{"page":3,"id":41,"obj":"obj","x":32,"y":316,"w":44,"h":44,"radius":22,"border_side":0,"bg_color":"#181c18"}
{"page":3,"id":42,"obj":"label","x":32,"y":322,"w":44,"h":44,"text":"\uE335", "text_font": 24,"align":"center","click":0,"text_color":"#747474"}
{"page":3,"id":43,"obj":"label","x":92,"y":322,"w":300,"h":60,"text":"Kitchen", "text_font": 24,"click":0}
{"page":1,"id":0,"prev":3}
{"page":3,"id":0,"next":1}
openhasp:
plate1:
objects:
- obj: "p1b1" # time
properties:
"text": '{{ now().strftime("%H:%M") }}'
- obj: "p1b4" # date
properties:
"text": '{{ now().strftime("%A %d %b") }}'
- obj: "p1b6" # room temperature
properties:
"text": '{{ int(states("sensor.tempkuchnia_temperature")) }}°C'
- obj: "p1b7" # room humidity
properties:
"text": '{{ states("sensor.tempkuchnia_humidity") }}%'
- obj: "p1b3" # outside temperature
properties:
"text": '{{ int(state_attr("weather.forecast_dom", "temperature")) }}°C'
- obj: "p1b2" # forecast icon
properties:
"text": >-
{% set icons = {"cloudy":"\uE590", "fog":"\uE591", "hail":"\uE592", "lightning":"\uE593", "clear-night":"\uE594", "partlycloudy":"\uE595", "pouring":"\uE596", "rainy":"\uE597", "snowy":"\uE598", "sunny":"\uE599", "windy":"\uE59D", "windy-variant":"\uE59E", "lightning-rainy":"\uE67E", "snowy-rainy":"\uE67F", "exceptional":"\uE957"} %}
{{ icons[states("weather.forecast_dom")] | default("\uE957") }}
- obj: "p3b10" # Light brightness 1
properties:
"val": "{{state_attr('light.lampastol', 'brightness') if state_attr('light.lampastol', 'brightness') != None else 0 }}"
event:
"changed":
- service: light.turn_on
data:
entity_id: light.lampastol
brightness: "{{ val }}"
"up":
- service: light.turn_on
data:
entity_id: light.lampastol
brightness: "{{ val }}"
- obj: "p3b11" # Light button
properties:
"bg_color": "{{ '#181c18' if states('light.lampastol') == 'on' else '#262626' }}"
event:
"up":
- service: light.toggle
data:
entity_id: light.lampastol
- obj: "p3b12" # Light bulb icon
properties:
"text_color": "{{ '#FAAC1B' if states('light.lampastol') == 'on' else '#747474' }}"
...
- obj: "p2b10" # Scene button 1 - Cooking
event:
"up":
- service: scene.turn_on
target:
entity_id: scene.gotowanie
... |
Beta Was this translation helpful? Give feedback.
-
|
New device (Guition ESP32-S3-4848S040) and new use case: display for the bathroom next to the mirror, controlling the mirror light (and to be installed in place of the standard light switch). Just a single screen with most important features - media controls, light switch, temperatures and high vent mode switch. pages.jsonl openhasp.yaml |
Beta Was this translation helpful? Give feedback.
-
Sunton 800x480 screenDesign meant for use in living room, idea is to have a quickly available Home Assistant dashboard with only the control elements I need there. The design's a mix of what I have in my HA dashboards and ideas from other posters in this thread. Especially thank you @8bitmcu for the pop-up code and the tag-usage examples. TV pageButtons to start some Home Assistant scripts
For the custom icons I used Fontforge to add some svg's to the Ubuntu font, then uploaded the modified font. Heating pageLive temperatures + pop-up to set desired temperature
jsonl of the panelHome Assistant's configuration.yamlA input_number helper for the thermostat popup A script inside 'script: ' section of your The 'openhasp: ' section of your |
Beta Was this translation helpful? Give feedback.
and others
-
Showcase your favorite layouts built with openHASP!
Beta Was this translation helpful? Give feedback.
All reactions