Example layouts: Look what I built ! #37
fvanroie
started this conversation in
Show and tell
Replies: 67 comments 149 replies
-
|
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
|
Beta Was this translation helpful? Give feedback.
2 replies
-
|
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.
2 replies
-
|
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.
0 replies
-
|
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.
pages.jsonl{"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.
2 replies
-
|
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.
2 replies
-
|
Can you share the Home Assistant automation code you used? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Click to expand: configuration.yamlplate2:
objects:
#Page 0 Items - object to show on all pages
- obj: "p0b4" # temperature label on all pages
properties:
"text": '{{ states("sensor.bathroom_master1_am2301_temperature_2") }}°C'
- obj: "p0b6" #time
properties:
"text": "{{ states('sensor.time') }}"
# Page 1 items - Test area for controlling dimmer
- obj: "p1b2" # light-switch toggle button
properties:
"val": '{{ 1 if states("light.tasmota_2") == "on" else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.tasmota_2", "on") else "\uE335" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "light.tasmota_2"
- obj: "p1b3" # dropdown
event:
"changed":
- service: persistent_notification.create
data:
message: I like {{ text }}
- obj: "p1b5" # Light brightness
properties:
"val": "{{ state_attr('light.tasmota_2', 'brightness') if state_attr('light.tasmota_2', 'brightness') != None else 0 }}"
event:
"changed":
- service: light.turn_on
data:
entity_id: light.tasmota_2
brightness: "{{ val }}"
"up":
- service: light.turn_on
data:
entity_id: light.tasmota_2
brightness: "{{ val }}"
# Page 2 items - Media Player
- obj: "p2b5" #volume
properties:
"val": "{{ state_attr('media_player.kitchen_player','volume_level') * 100 | int }}"
"click": "{{ 'false' if (is_state('media_player.kitchen_player','unavailable') or is_state('media_player.kitchen_player','unknown')) else 'true' }}"
event:
"changed":
- service: media_player.volume_set
data:
entity_id: media_player.kitchen_player
volume_level: "{{ val | int / 100 }}"
"up":
- service: media_player.volume_set
data:
entity_id: media_player.kitchen_player
volume_level: "{{ val | int / 100 }}"
- obj: "p2b10" # power
properties:
"text_color": "{{ '#B00000' if states('media_player.kitchen_player') == 'off' else '#FFFFFF' }}"
"text_opa": "{{ '80' if (is_state('media_player.kitchen_player','unavailable') or is_state('media_player.kitchen_player','unknown')) else '255' }}"
event:
"down":
- service: media_player.toggle
data:
entity_id: media_player.kitchen_player
- obj: "p2b14" # play/pause
properties:
"text": >
{% if is_state('media_player.kitchen_player', 'playing') %}
{{ "\uE3E4" | e }}
{%-else %}
{{ "\uE40A" | e }}
{%-endif %}
"text_opa": "{{ '80' if (is_state('media_player.kitchen_player','unavailable') or is_state('media_player.kitchen_player','unknown')) else '255' }}"
event:
"down":
- service: media_player.media_play_pause
target:
entity_id: media_player.kitchen_player
"long":
- service: media_player.media_stop
target:
entity_id: media_player.kitchen_player
- obj: "p2b22" # mute
properties:
"text": >
{% if state_attr('media_player.kitchen_player', 'is_volume_muted') %}
{{ "\uE75F" | e }}
{%-else %}
{{ "\uE57E" | e }}
{%-endif %}
"text_opa": "{{ '80' if (is_state('media_player.kitchen_player','unavailable') or is_state('media_player.kitchen_player','unknown')) else '255' }}"
event:
"down":
- service: media_player.volume_mute
data:
entity_id: media_player.kitchen_player
is_volume_muted: >
{% if state_attr('media_player.kitchen_player', 'is_volume_muted') %}
false
{% else %}
true
{%-endif %}
- obj: "p2b12" # prev
properties:
"text_opa": "{{ '80' if (is_state('media_player.kitchen_player','unavailable') or is_state('media_player.kitchen_player','unknown')) else '255' }}"
event:
"down":
- service: media_player.media_previous_track
target:
entity_id: media_player.kitchen_player
- obj: "p2b18" # next
properties:
"text_opa": "{{ '80' if (is_state('media_player.kitchen_player','unavailable') or is_state('media_player.kitchen_player','unknown')) else '255' }}"
event:
"down":
- service: media_player.media_next_track
target:
entity_id: media_player.kitchen_player
### Page 3 items Work are lighting
- obj: "p3b3" # light-switch toggle button for work desk lights upper
properties:
"val": '{{ 1 if states("light.work_desk_lites_workdesk_upper") == "on" else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.work_desk_lites_workdesk_upper", "on") else "\uE335" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "light.work_desk_lites_workdesk_upper"
- obj: "p3b5" # Light brightness for work desk upper section
properties:
"val": "{{ state_attr('light.work_desk_lites_workdesk_upper', 'brightness') if state_attr('light.work_desk_lites_workdesk_upper', 'brightness') != None else 0 }}"
event:
"changed":
- service: light.turn_on
data:
entity_id: light.work_desk_lites_workdesk_upper
brightness: "{{ val }}"
"up":
- service: light.turn_on
data:
entity_id: light.work_desk_lites_workdesk_upper
brightness: "{{ val }}"
- obj: "p3b8" # light-switch toggle button for Work Table Under
properties:
"val": '{{ 1 if states("light.work_desk_lites_workdesk_lower") == "on" else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.work_desk_lites_workdesk_lower", "on") else "\uE335" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "light.work_desk_lites_workdesk_lower"
- obj: "p3b10" # Light brightness for Work Table Under
properties:
"val": "{{ state_attr('light.work_desk_lites_workdesk_lower', 'brightness') if state_attr('light.work_desk_lites_workdesk_lower', 'brightness') != None else 0 }}"
event:
"changed":
- service: light.turn_on
data:
entity_id: light.work_desk_lites_workdesk_lower
brightness: "{{ val }}"
"up":
- service: light.turn_on
data:
entity_id: light.work_desk_lites_workdesk_lower
brightness: "{{ val }}"
- obj: "p3b16" # light-switch button for Computer Table Lower
properties:
"val": '{{ 1 if states("light.work_desk_lites_compdesk_lower") == "on" else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.work_desk_lites_compdesk_lower", "on") else "\uE335" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "light.work_desk_lites_compdesk_lower"
- obj: "p3b18" # Light brightness for Work Table Lower
properties:
"val": "{{ state_attr('light.work_desk_lites_compdesk_lower', 'brightness') if state_attr('light.work_desk_lites_compdesk_lower', 'brightness') != None else 0 }}"
event:
"changed":
- service: light.turn_on
data:
entity_id: light.work_desk_lites_compdesk_lower
brightness: "{{ val }}"
"up":
- service: light.turn_on
data:
entity_id: light.work_desk_lites_compdesk_lower
brightness: "{{ val }}"
### Page 4 Items - Mood lighting for Computer & Work Desks
- obj: "p4b6" # color picker for Computer Desk
properties:
"color": >
{% if is_state('light.wled_desk_mood_segment_1','on') %}
{% set rgb = state_attr('light.wled_desk_mood_segment_1','rgb_color') %}
{{ "#%02x%02x%02x" | format(rgb[0],rgb[1],rgb[2]) }}
{% endif %}
event:
"up":
- service: light.turn_on
data:
entity_id: light.wled_desk_mood_segment_1
rgb_color: "[{{ r }},{{ g }},{{ b }}]"
- obj: "p4b4" # light-switch toggle button for Computer Desk Mood lighting
properties:
"val": '{{ 1 if states("light.wled_desk_mood_segment_1") == "on" else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.wled_desk_mood_segment_1", "on") else "\uE335" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "light.wled_desk_mood_segment_1"
- obj: "p4b8" # Light brightness for Computer Desk Mood
properties:
"val": "{{ state_attr('light.wled_desk_mood_segment_1', 'brightness') if state_attr('light.wled_desk_mood_segment_1', 'brightness') != None else 0 }}"
event:
"changed":
- service: light.turn_on
data:
entity_id: light.wled_desk_mood_segment_1
brightness: "{{ val }}"
"up":
- service: light.turn_on
data:
entity_id: light.wled_desk_mood_segment_1
brightness: "{{ val }}"
- obj: "p4b16" # color picker for Work Desk
properties:
"color": >
{% if is_state('light.wled_desk_mood','on') %}
{% set rgb = state_attr('light.wled_desk_mood','rgb_color') %}
{{ "#%02x%02x%02x" | format(rgb[0],rgb[1],rgb[2]) }}
{% endif %}
event:
"up":
- service: light.turn_on
data:
entity_id: light.wled_desk_mood
rgb_color: "[{{ r }},{{ g }},{{ b }}]"
- obj: "p4b14" # light-switch toggle button for Computer Desk Mood lighting
properties:
"val": '{{ 1 if states("light.wled_desk_mood") == "on" else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.wled_desk_mood", "on") else "\uE335" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "light.wled_desk_mood"
</details> |
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.
1 reply
-
|
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.
3 replies
-
|
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.
5 replies
-
|
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.
-
Is it possible to use other speakers than the sonos ones? I have al lot of Chromcast and Alexa Speakers and want to use your style for my own 480x480. Thanks |
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.
0 replies
-
|
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.
2 replies
-
|
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.
-
|
I have just tried the page 4 and it suits fine on 480x480, without any modification :D |
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.
3 replies
-
|
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.
-
Nice design! Her you wrote... {"page":3,"id":2,"obj":"img","src":"L:/black4.bin","auto_size":0,"w":320,"h":420} And what changes do I have to do to fit for my 480x480 display? |
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.
0 replies
-
|
WLED control: I adjusted the pages code to fit the 2.4" Lolin screen {"page":1,"id":109,"obj":"btn","x":0,"y":0,"w":240,"h":20,"text":"WLED Demo","bg_color":"#80","align":2,"text_color":"#FFFFFF","radius":0,"border_side":0} {"page":1,"id":103,"obj":"switch","x":12,"y":49,"w":60,"h":20,"radius":15} |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Here's another WLED control Layout. This is on the sc01 3.5" jsonl openhasp.conf |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
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.
0 replies
-
|
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.
1 reply
-
|
Nice work on the blur effects! I guess you did those right at the end once you were happy with your layouts? |
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.
0 replies
-
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 panelShow codeHome Assistant's configuration.yamlShow codeA input_number helper for the thermostat popup. Each time a thermostat poup is opened, the value of this helper is set to the current target temperature of the selected room. A script inside 'script: ' section of your The 'openhasp: ' section of your Note how on objects "p0b10", "p0b35" and "p0b37" an openhasp command to draw new jsonl lines is fired when these elements (arc slider and -+ buttons) are used. This is to immediately update the displayed target temperature. If you omit this there will be a delay until mqtt picks up the changed state. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Seeed studio SenseCap Indicator. (480 x 480) I wanted a simple "smart thermostat" style screen to replace an old mechanical thermostat.
Plate JSONL{"comment":"Designer Config","page_size":"large_square","plate_name":"openhasp"}
{"page":0,"comment":"Page 0"}
{"obj":"btn","id":1,"x":450,"y":1,"w":30,"h":40,"text_font":"2","text":"\uE5A9","text_color":"gray","bg_opa":0,"border_width":0}
{"page":1,"comment":"Page 1","bg_color":"#000000"}
{"id":1,"obj":"arc","x":0,"y":0,"w":480,"h":480,"angle":286,"radius":2,"line_width":30,"line_width10":30,"line_color10":"#fe8f58","bg_color":"#000000","bg_color20":"#4b4b4b","border_color":"#000000","border_width":2,"border_width20":5,"min":150,"max":250,"pad_top":29,"pad_right":29,"pad_left":29,"pad_bottom":29,"pad_top20":1.5,"pad_right20":1.5,"pad_left20":1.5,"pad_bottom20":1.5,"adjustable":true,"start_angle":128,"end_angle":54}
{"id":3,"obj":"label","x":200,"y":280,"w":100,"h":60,"text":"00.0","text_font":56,"text_color":"#4cb050"}
{"id":6,"obj":"label","x":160,"y":180,"w":160,"h":100,"text":"00.0","text_font":90,"text_color":"#fe8f58"}
{"id":7,"obj":"label","x":160,"y":160,"w":160,"h":20,"align":"center","text":"Set Temp","text_font":18,"text_color":"#fe8f58"}
{"id":8,"obj":"label","x":180,"y":340,"w":140,"h":20,"align":"center","text":"Actual Temp","text_font":16,"text_color":"#4cb050"}
{"id":12,"obj":"btn","x":200,"y":400,"w":80,"h":40,"toggle":true,"radius":20,"bg_color":"#a9a9a9","border_color":"#838994","text_font":"2","text":"\uE238","text_color":"#ffffff"}
{"id":33,"obj":"btn","action":"next","x":420,"y":440,"w":60,"h":40,"radius":20,"bg_color":"#a9a9a9","border_color":"#838994","text_font":"2","text":"\uE6B5","text_color":"#ffffff"}
{"id":35,"obj":"label","x":320,"y":200,"w":60,"h":80,"align":"center","text":"+","text_font":65,"text_color":"#d81b43"}
{"id":37,"obj":"label","x":100,"y":200,"w":60,"h":80,"align":"center","text":"-","text_font":65,"text_color":"#1f87e8"}
{"page":2,"comment":"Page 2","bg_color":"#000000"}
{"id":26,"obj":"btn","x":100,"y":40,"w":280,"h":40,"toggle":true,"radius":20,"border_color":"##838994","text":"Window Lamp","text_font":28,"text_color":"#ffffff"}
{"id":27,"obj":"btn","x":100,"y":100,"w":280,"h":40,"toggle":true,"radius":20,"border_color":"##838994","text":"Sideboard Lamp","text_font":28}
{"id":28,"obj":"btn","x":100,"y":160,"w":280,"h":40,"toggle":true,"radius":20,"border_color":"##838994","text":"Piano Lamp","text_font":28}
{"id":29,"obj":"btn","x":100,"y":220,"w":280,"h":40,"toggle":true,"radius":20,"border_color":"##838994","text":"Fire","text_font":28}
{"id":30,"obj":"btn","x":100,"y":280,"w":280,"h":40,"toggle":true,"radius":20,"border_color":"##838994","text":"Rainbow Lamp","text_font":28}
{"id":31,"obj":"btn","x":100,"y":340,"w":280,"h":40,"toggle":true,"radius":20,"border_color":"##838994","text":"Hall Lamp","text_font":28}
{"id":32,"obj":"btn","x":100,"y":400,"w":280,"h":40,"toggle":true,"radius":20,"border_color":"##838994","text":"Conservatory Lamp","text_font":28}
{"id":34,"obj":"btn","action":"prev","x":0,"y":440,"w":60,"h":40,"radius":20,"bg_color":"#a9a9a9","border_color":"#838994","text_font":"2","text":"\uE238","text_color":"#ffffff"}
Home Assistant configuration fileplate: # replace climate.heating with your climate entity
objects:
- obj: "p1b3" # temperature label
properties:
"text": '{{ states("sensor.your_sensor_temperature") }}°C'
- obj: "p1b1" # arc slider
properties:
"val": >
{% if state_attr('climate.heating','temperature') is not none %}
{{ state_attr('climate.heating','temperature') | int * 10 }}
{%- endif %}
"min": >
{% if state_attr('climate.heating','min_temp') is not none %}
{{ state_attr('climate.heating','min_temp') | int * 10 }}
{%- endif %}
"max": >
{% if state_attr('climate.heating','max_temp') is not none %}
{{ state_attr('climate.heating','max_temp') | int * 10 }}
{%- endif %}
"opacity": "{{ 60 if (is_state('climate.heating','unavailable') or is_state('climate.heating','unknown')) else 255 }}"
"click": "{{ 'false' if (is_state('climate.heating','unavailable') or is_state('climate.heating','unknown')) else 'true' }}"
"line_color1": >
{% if is_state('switch.yourswitch', 'on') %}
{{ "#fe8f58" }}
{%-elif is_state('switch.yourswitch', 'off') %}
{{ "#4b4b4b" }}
{%-else %}
{% endif %}
event:
"changed":
- service: climate.set_temperature
target:
entity_id: climate.heating
data:
temperature: "{{ val | int / 10 }}"
"up":
- service: climate.set_temperature
target:
entity_id: climate.heating
data:
temperature: "{{ val | int / 10 }}"
- obj: "p1b6" # label target temp
properties:
"text": >
{% if state_attr('climate.heating','temperature') is not none %}
{{ state_attr('climate.heating','temperature') }}
{%- endif %}
"opacity": "{{ 60 if (is_state('climate.heating','unavailable') or is_state('climate.heating','unknown')) else 255 }}"
- obj: "p1b12" # Heating on/off switch
properties:
"val": "{{ 0 if (is_state('climate.heating', 'off') or is_state('climate.heating', 'unavailable')) else 1 }}"
"click": "{{ 'false' if (is_state('climate.heating','unavailable') or is_state('climate.heating','unknown')) else 'true' }}"
"opacity": "{{ 60 if (is_state('climate.heating','unavailable') or is_state('climate.heating','unknown')) else 255 }}"
event:
"down":
- service_template: >
{% if val == 0 -%}
climate.turn_on
{% else -%}
climate.turn_off
{% endif -%}
entity_id: "climate.heating"
- obj: "p2b26" # light-switch toggle button
properties:
"val": '{{ 1 if states("switch.yourlight") == "on" else 0 }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.yourlight"
- obj: "p2b27" # light-switch toggle button
properties:
"val": '{{ 1 if states("switch.yourlight") == "on" else 0 }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.yourlight"
- obj: "p2b28" # light-switch toggle button
properties:
"val": '{{ 1 if states("switch.yourlight") == "on" else 0 }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.yourlight"
- obj: "p2b29" # light-switch toggle button
properties:
"val": '{{ 1 if states("switch.yourlight") == "on" else 0 }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "light.led_lights"
- obj: "p2b30" # light-switch toggle button
properties:
"val": '{{ 1 if states("switch.yourlight") == "on" else 0 }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.sonoff_1000f66a95"
- obj: "p2b31" # light-switch toggle button
properties:
"val": '{{ 1 if states("switch.yourlight") == "on" else 0 }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.sonoff_100073b5f0"
- obj: "p2b32" # light-switch toggle button
properties:
"val": '{{ 1 if states("switch.yourlight") == "on" else 0 }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.yourlight"
- obj: "p0b1"
properties:
"text_color": "{% if -30 <= state_attr('openhasp.plate1','rssi') |int %}green{% elif -31 > state_attr('openhasp.plate1','rssi') |int >= -50 %}orange{% elif -51 > state_attr('openhasp.plate1','rssi') |int >= -80 %}tomato{% else %}red{% endif %}"
- obj: "p1b35" # plus button for temp
event:
"down":
- service: climate.set_temperature
target:
entity_id: climate.heating
data:
temperature: "{{ state_attr('climate.heating','temperature') + state_attr('climate.heating','target_temp_step') | float(default=1)}}"
- obj: "p1b37" # minus button for temp
event:
"down":
- service: climate.set_temperature
target:
entity_id: climate.heating
data:
temperature: "{{ state_attr('climate.heating','temperature') - state_attr('climate.heating','target_temp_step') | float(default=1)}}" |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
hi, "line_color1": >
{% if is_state('switch.yourswitch', 'on') %}
{{ "#fe8f58" }}
{%-elif is_state('switch.yourswitch', 'off') %}
{{ "#4b4b4b" }}
{%-else %}
{% endif %}And thank you so much for sharing code whe have make a display with code from you |
Beta Was this translation helpful? Give feedback.
-
|
Hi @danphop, just wondering how you flashed your SenseCAP : the web installer is not working for me... Thanks for sharing your plate btw :) |
Beta Was this translation helpful? Give feedback.
-
Sunton 7" 800x480 (With Home Assistant)Yes... I went overboard with my energy management.
pages.jsonl{"comment":"---- Config ---- ","page_size":"xlarge_landscape","project_name":"MediumPanel"}
{"page":1, "swipe":1, "comment":"----------- page 1 ------- ", "bg_color": "#000000"}
{"id":1,"obj":"obj","x":0,"y":0,"w":800,"h":45,"border_color":"#848a94","border_width":1,"radius":5, "bg_color": "#333333"}
{"id":10,"obj":"label","x":20,"y":0,"w":90,"h":50,"parentid":1,"text":"0:0","text_font":32}
{"id":11,"obj":"label","x":140,"y":0,"w":400,"h":50,"parentid":1,"text":"Booting...","text_font":32}
{"id":12,"obj":"label","x":450,"y":0,"w":340,"h":50,"parentid":1,"text":"\ue50F 0.0°C","text_font":32, "align": "right"}
{"id":2,"obj":"obj","x":0,"y":55,"w":390,"h":95,"border_color":"#848a94","border_width":1,"radius":10, "bg_color": "#333333"}
{"id":20,"obj":"label","x":20,"y":5,"w":70, "h":95,"parentid":2,"text":"\uF40B", "text_font":72}
{"id":21,"obj":"label","x":110,"y":5,"w":110,"h":40,"parentid":2,"text":"#FFFFFF Power:","text_font":24}
{"id":22,"obj":"label","x":110,"y":30,"w":110,"h":40,"parentid":2,"text":"#00FFFF Consumed: ","text_font":24}
{"id":23,"obj":"label","x":110,"y":55,"w":110,"h":40,"parentid":2,"text":"#EE82EE Returned:","text_font":24}
{"id":24,"obj":"label","x":240,"y":5,"w":110,"h":40,"parentid":2,"text":"0 W","text_font":24, "align": "right"}
{"id":25,"obj":"label","x":240,"y":30,"w":110,"h":40,"parentid":2,"text":"#00FFFF 0.0 kWh","text_font":24, "align": "right"}
{"id":26,"obj":"label","x":240,"y":55,"w":110,"h":40,"parentid":2,"text":"#EE82EE 0.0 kWh","text_font":24, "align": "right"}
{"id":3,"obj":"obj","x":0,"y":160,"w":390,"h":95,"border_color":"#848a94","border_width":1,"radius":10, "bg_color": "#333333"}
{"id":30,"obj":"label","x":20,"y":5,"w":70, "h":95,"parentid":3,"text":"\uE5A8", "text_font":72}
{"id":31,"obj":"label","x":110,"y":5,"w":110,"h":40,"parentid":3,"text":"#FFD700 Power: ","text_font":24}
{"id":32,"obj":"label","x":110,"y":30,"w":110,"h":40,"parentid":3,"text":"#FFD700 Generated:","text_font":24}
{"id":33,"obj":"label","x":110,"y":55,"w":110,"h":40,"parentid":3,"text":"#FFFFFF Remaining:","text_font":24}
{"id":34,"obj":"label","x":240,"y":5,"w":110,"h":40,"parentid":3,"text":"#FFD700 0 W","text_font":24, "align": "right"}
{"id":35,"obj":"label","x":240,"y":30,"w":110,"h":40,"parentid":3,"text":"#FFD700 0 kWh","text_font":24, "align": "right"}
{"id":36,"obj":"label","x":240,"y":55,"w":110,"h":40,"parentid":3,"text":"#FFFFFF 0 kWh","text_font":24, "align": "right"}
{"id":4,"obj":"obj","x":0,"y":265,"w":390,"h":95,"border_color":"#848a94","border_width":1,"radius":10, "bg_color": "#333333"}
{"id":40,"obj":"label","x":20,"y":5,"w":70, "h":95, "parentid":4,"text":"\uF2A3", "text_font":72}
{"id":41,"obj":"label","x":110,"y":5,"w":110,"h":40,"parentid":4,"text":"#008080 Power:","text_font":24}
{"id":42,"obj":"label","x":110,"y":30,"w":110,"h":40,"parentid":4,"text":"Charge:","text_font":24}
{"id":45,"obj":"label","x":110,"y":55,"w":200,"h":40,"parentid":4,"text":"Please wait...","text_font":24}
{"id":43,"obj":"label","x":240,"y":5,"w":110,"h":40,"parentid":4,"text":"#008080 0 W","text_font":24, "align": "right"}
{"id":44,"obj":"label","x":240,"y":30,"w":110,"h":40,"parentid":4,"text":"0%","text_font":24, "align": "right"}
{"id":5,"obj":"obj","x":0,"y":370,"w":390,"h":110,"border_color":"#848a94","border_width":1,"radius":10, "bg_color": "#333333"}
{"id":50,"obj":"label","x":20,"y":10, "w":70, "h":110 ,"parentid":5,"text":"\uE5F1", "text_font":72}
{"id":51,"obj":"label","x":110,"y":0, "w":110,"h":40,"parentid":5,"text":"Power:","text_font":24}
{"id":52,"obj":"label","x":110,"y":25,"w":110,"h":40,"parentid":5,"text":"Remaining:","text_font":24}
{"id":53,"obj":"label","x":110,"y":50,"w":75,"h":40,"parentid":5,"text":"Charge:","text_font":24}
{"id":58,"obj":"label","x":110,"y":75,"w":230,"h":40,"parentid":5,"text":"Idle","text_font":24, "align": "left"}
{"id":55,"obj":"label","x":240,"y":0, "w":110,"h":40,"parentid":5,"text":"0 W","text_font":24, "align": "right"}
{"id":56,"obj":"label","x":240,"y":25,"w":110,"h":40,"parentid":5,"text":"0 kWh","text_font":24, "align": "right"}
{"id":57,"obj":"label","x":200,"y":50,"w":150,"h":40,"parentid":5,"text":"0%","text_font":24, "align": "right"}
{"id":6,"obj":"obj","x":420,"y":55,"w":380,"h":60,"border_color":"#848a94","border_width":1,"radius":10, "bg_color": "#333333"}
{"id":60,"obj":"btn","x":10,"y":10,"w":170,"h":40,"parentid":6,"border_color":"#848a94","border_width":1,"radius":5,"text":"Airco","text_font":24}
{"id":61,"obj":"btn","x":200,"y":10,"w":40,"h":40,"parentid":6,"border_color":"#848a94","border_width":1,"radius":5,"text":"-","text_font":24}
{"id":62,"obj":"btn","x":320,"y":10,"w":40,"h":40,"parentid":6,"border_color":"#848a94","border_width":1,"radius":5,"text":"+","text_font":24}
{"id":63,"obj":"label","x":250,"y":10,"w":60,"h":40,"parentid":6,"text":"0°C","text_font":24, "align": "center"}
{"id":7,"obj":"obj","x":420,"y":125,"w":380,"h":355,"border_color":"#848a94","border_width":1,"radius":10, "bg_color": "#333333"}
{"id":70,"obj":"label","x":20,"y":10,"w":110,"h":40,"parentid":7,"text":"Badkamer:","text_font":24}
{"id":75,"obj":"btn", "x":150,"y":10,"w":50,"h":40,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE6E8","text_font":24}
{"id":76,"obj":"btn", "x":210,"y":10,"w":50,"h":40,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE438","text_font":24}
{"id":77,"obj":"label","x":270,"y":10,"w":80,"h":40,"parentid":7,"text":"0°C","text_font":24, "align": "right"}
{"id":71,"obj":"label","x":20,"y":55,"w":110,"h":40,"parentid":7,"text":"Robin:","text_font":24}
{"id":78,"obj":"btn", "x":150,"y":55,"w":50,"h":40,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE6E8","text_font":24}
{"id":79,"obj":"btn", "x":210,"y":55,"w":50,"h":40,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE438","text_font":24}
{"id":80,"obj":"label","x":270,"y":55,"w":80,"h":40,"parentid":7,"text":"0°C","text_font":24, "align": "right"}
{"id":72,"obj":"label","x":20,"y":100,"w":110,"h":40,"parentid":7,"text":"Wout:","text_font":24}
{"id":81,"obj":"btn", "x":150,"y":100,"w":50,"h":40,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE6E8","text_font":24}
{"id":82,"obj":"btn", "x":210,"y":100,"w":50,"h":40,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE438","text_font":24}
{"id":83,"obj":"label","x":270,"y":100,"w":80,"h":40,"parentid":7,"text":"0°C","text_font":24, "align": "right"}
{"id":73,"obj":"label","x":20,"y":145,"w":110,"h":40,"parentid":7,"text":"Linne:","text_font":24}
{"id":84,"obj":"btn", "x":150,"y":145,"w":50,"h":40,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE6E8","text_font":24}
{"id":85,"obj":"btn", "x":210,"y":145,"w":50,"h":40,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE438","text_font":24}
{"id":86,"obj":"label","x":270,"y":145,"w":80,"h":40,"parentid":7,"text":"0°C","text_font":24, "align": "right"}
{"id":74,"obj":"label","x":20,"y":190,"w":110,"h":40,"parentid":7,"text":"Janne:","text_font":24}
{"id":87,"obj":"btn", "x":150,"y":190,"w":50,"h":40,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE6E8","text_font":24}
{"id":88,"obj":"btn", "x":210,"y":190,"w":50,"h":40,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE438","text_font":24}
{"id":89,"obj":"label","x":270,"y":190,"w":80,"h":40,"parentid":7,"text":"0°C","text_font":24, "align": "right"}
{"id":90,"obj":"label","x":0,"y":235,"w":120,"h":40,"parentid":7,"text":"Eetkamer","text_font":24, "align": "center"}
{"id":91,"obj":"btn", "x":30,"y":280,"w":60,"h":60,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE6E8","text_font":24}
{"id":92,"obj":"label","x":130,"y":235,"w":120,"h":40,"parentid":7,"text":"Living","text_font":24, "align": "center"}
{"id":93,"obj":"btn", "x":160,"y":280,"w":60,"h":60,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE6E8","text_font":24}
{"id":94,"obj":"label","x":260,"y":235,"w":120,"h":40,"parentid":7,"text":"Bureau","text_font":24, "align": "center"}
{"id":95,"obj":"btn", "x":290,"y":280,"w":60,"h":60,"parentid":7,"border_color":"#848a94","border_width":1,"radius":5,"text":"#FFD700 \uE6E8","text_font":24} |
Beta Was this translation helpful? Give feedback.
3 replies
-
|
openhasp.yaml please |
Beta Was this translation helpful? Give feedback.
-
Sorry, I just saw your message... |
Beta Was this translation helpful? Give feedback.
-
|
Hello , can you please share your Home Assistant's configuration.yaml of this nice looking dashboard? |
Beta Was this translation helpful? Give feedback.
-
|
Some refresh of my layouts. Still most features on single page as I want to have it right with one click. For some specific use cases pages switch automatically e.g. when I stand on a smart weight scale. pages.jsonl{"page":0,"comment":"----------- page 0 ------- "}
{"id":1,"obj":"label","x":405,"y":0,"h":40,"w":70,"text":"00:00","align":"right","bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"id":2,"obj":"label","x":5,"y":0,"h":40,"w":160,"text":"0000.00.00","align":"left","bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"id":3,"obj":"label","x":165,"y":0,"h":40,"w":30,"text":"\uE5A9","text_color":"white","bg_opa":0,"border_width":0, "bg_color":"#2C3E50","text_color":"#FFFFFF", "comment":"WiFi Signal"}
{"id":31,"obj":"label","x":205,"y":0,"h":40,"w":30,"text":"\uE81C","text_color":"white","bg_opa":0,"border_width":0, "bg_color":"#2C3E50","text_color":"#FFFFFF", "comment":"Door sensor"}
{"id":32,"obj":"label","x":245,"y":2,"h":40,"w":30,"text":"\uE536","text_font":"material36", "text_color":"white","bg_opa":0,"border_width":0, "bg_color":"#2C3E50","text_color":"#FFFFFF", "comment":"Motion sensor"}
{"id":4,"obj":"label","x":295,"y":0,"h":40,"w":120,"text":"\uE4C3: --%","text_color":"gray","bg_opa":0,"border_width":0, "bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"id":5,"obj":"obj","swipe":1,"x":0,"y":0,"h":40,"w":480,"opacity":0,"comment":"swipe-area-at-top"}
{"page":1,"comment":"----------- page 1 ------- "}
{"id":200,"obj":"img","src":"L:/back5.png","w":480, "h":480}
{"id":1,"obj":"btn","x":6,"y":365,"w":468,"h":110,"toggle":true,"text":"\uE335","text_font":72,"mode":"break","align":1,"radius":5,"bg_color":"#1c1c1c","bg_grad_color":"#1c1c1c","border_width":0,"bg_opa":200,"groupid":1, "comment":"Lamp Switch"}
{"id":2,"obj":"btn","x":6,"y":265,"w":152,"h":90,"toggle":false,"text":"","text_font":"material48","mode":"break","align":1,"bg_color":"Black","bg_grad_color":"Black", "bg_opa":255, "border_color": "Black"}
{"id":3,"obj":"btn","x":164,"y":265,"w":152,"h":90,"toggle":false,"text":"","text_font":48,"mode":"break","align":1,"bg_color":"Black","bg_grad_color":"Black", "bg_opa":255, "border_color": "Black"}
{"id":4,"obj":"btn","x":322,"y":265,"w":152,"h":90,"toggle":false,"text":"","text_font":48,"mode":"break","align":1,"bg_color":"Black","bg_grad_color":"Black", "bg_opa":255, "border_color": "Black"}
{"id":5,"obj":"img","src":"L:/new_off.bin","x":12,"y":265,"bg_color":"#1c1c1c","bg_grad_color":"#1c1c1c","opacity":200}
{"id":6,"obj":"img","src":"L:/357_off.bin","x":170,"y":265,"bg_color":"#1c1c1c","bg_grad_color":"#1c1c1c","opacity":200}
{"id":7,"obj":"img","src":"L:/baobab_off.bin","x":328,"y":265,"bg_color":"#1c1c1c","bg_grad_color":"#1c1c1c","opacity":200}
{"id":8,"obj":"btn","x":322,"y":185,"w":73,"h":70,"toggle":false,"text":"\uE580","text_font":48,"mode":"break","align":1,"bg_color":"Gray","bg_grad_color":"Gray","bg_color":"#1c1c1c","bg_grad_color":"#1c1c1c","border_width":0,"bg_opa":200, "comment":"Ciszej"}
{"id":9,"obj":"btn","x":400,"y":185,"w":73,"h":70,"toggle":false,"text":"\uE57E","text_font":48,"mode":"break","align":1,"bg_color":"Gray","bg_grad_color":"Gray","bg_color":"#1c1c1c","bg_grad_color":"#1c1c1c","border_width":0,"bg_opa":200, "comment":"Głośniej"}
{"id":10,"obj":"btn","x":6,"y":185,"h":70,"w":310,"toggle":false,"text":" ","align":"center", "text_font":24, "mode":"break","text_color":"#FFFFFF", "bg_color":"#1c1c1c","bg_grad_color":"#1c1c1c", "bg_opa":200, "border_color": "#1c1c1c", "comment":"Media title"}
{"id":11,"obj":"btn","x":322,"y":100,"w":152,"h":75,"toggle":true,"text":"Zone Sync","text_font":24,"mode":"break","align":1,"bg_color":"#1c1c1c","bg_grad_color":"#1c1c1c","border_width":0,"bg_opa":200}
{"id":12,"obj":"btn","x":6,"y":100,"w":310,"h":75,"toggle":true,"text":"\uE59D","text_font":48,"mode":"break","align":1,"bg_color":"#1c1c1c","bg_grad_color":"#1c1c1c","border_width":0,"bg_opa":200}
{"id":13,"obj":"btn","x":6,"y":45,"w":152,"h":45,"toggle":false,"text":"--°C","value_font":48,"text_font":36,"mode":"break","align":1,"border_width":0,"text_color":"#FFFFFF","bg_color":"Gray","bg_grad_color":"Gray", "bg_opa":0, "comment":"Łazienka temperatura"}
{"id":14,"obj":"btn","x":164,"y":45,"w":152,"h":45,"toggle":false,"text":"--%","value_font":48,"text_font":36,"mode":"break","align":1,"border_width":0,"text_color":"#FFFFFF","bg_color":"Gray","bg_grad_color":"Gray", "bg_opa":0, "comment":"Łazienka wilgotność"}
{"id":15,"obj":"btn","x":322,"y":45,"w":152,"h":45,"toggle":false,"text":"--°C","value_font":48,"text_font":36,"mode":"break","align":1,"border_width":0,"text_color":"#FFFFFF","bg_color":"Gray","bg_grad_color":"Gray", "bg_opa":0, "comment":"Temperatura wody"}
{"page":2,"comment":"----------- page 2 ------- "}
{"id":200,"obj":"img","src":"L:/back5.png","w":480, "h":480}
{"id":99,"x": 200, "y": 360,"w":80,"h":40, "obj": "btn", "action": {"hold": "restart"}, "text":"\uE456","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":24,"border_width":0,"bg_opa":0}
{"id":1,"obj":"btn","action":"prev","x":5,"y":415,"w":120,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE141","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":2,"obj":"btn","action":"next","x":355,"y":415,"w":120,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE142","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":3,"obj":"btn","action":"back","x":130,"y":415,"w":220,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE2DC","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":4,"obj":"label","x":5,"y":50,"h":40,"w":280,"text":"Waga:","align":"right","text_color":"#FFFFFF","text_font":32}
{"id":5,"obj":"label","x":5,"y":100,"h":40,"w":280,"text":"Wiek metaboliczny:","align":"right","text_color":"#FFFFFF","text_font":32}
{"id":6,"obj":"label","x":320,"y":50,"h":40,"w":180,"text":"----","align":"left","text_color":"#FFFFFF","text_font":32}
{"id":7,"obj":"label","x":320,"y":100,"h":40,"w":180,"text":"----","align":"left","text_color":"#FFFFFF","text_font":32}
{"page":3,"comment":"----------- page 3 ------- "}
{"id":200,"obj":"img","src":"L:/back5.png","w":480, "h":480}
{"id":1,"obj":"btn","action":"prev","x":5,"y":415,"w":120,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE141","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":2,"obj":"btn","action":"next","x":355,"y":415,"w":120,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE142","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":3,"obj":"btn","action":"back","x":130,"y":415,"w":220,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE2DC","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":10,"obj":"btn","x":15,"y":65,"w":140,"h":45,"toggle":false,"text":"--°C","value_font":48,"text_font":36,"mode":"break","align":1,"text_color":"#FFFFFF","bg_color":"Gray","bg_grad_color":"Gray","border_width":0}
{"id":11,"obj":"label","x":15,"y":40,"h":20,"w":140,"text":"Południe","align":"center","text_color":"#FFFFFF","text_font":16}
{"id":20,"obj":"btn","x":170,"y":65,"w":140,"h":45,"toggle":false,"text":"--°C","value_font":48,"text_font":36,"mode":"break","align":1,"text_color":"#FFFFFF","bg_color":"Gray","bg_grad_color":"Gray","border_width":0}
{"id":21,"obj":"label","x":170,"y":40,"h":20,"w":140,"text":"Dach","align":"center","text_color":"#FFFFFF","text_font":16}
{"id":30,"obj":"btn","x":325,"y":50,"w":140,"h":60,"toggle":false,"text":"--","value_font":48,"text_font":48,"mode":"break","align":1,"text_color":"#FFFFFF","bg_color":"Gray","bg_grad_color":"Gray","border_width":0,"bg_opa":0}HA .yaml filehasp3:
objects:
- obj: "p0b1" # time label on all pages
properties:
"text": '{{ states("sensor.time") }}'
- obj: "p0b2" # date label on all pages
properties:
"text": >
{% set input = as_datetime(states('sensor.date')) %}
{% set months = ["Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"] %}
{{ input.strftime('%d ') + months[input.strftime('%m') | int - 1] }}
- obj: "p0b3"
properties:
"text_color": "{% if -50 <= state_attr('openhasp.hasp3','rssi') |int(0) %}green{% elif -51 > state_attr('openhasp.hasp3','rssi') |int(0) >= -65 %}orange{% elif -66 > state_attr('openhasp.hasp3','rssi') |int(0) >= -80 %}tomato{% else %}red{% endif %}"
- obj: "p0b31" # Door sensor
properties:
"text": '{{ "\uE81B" if is_state("binary_sensor.door_sensor_4_contact", "off") else "\uE81C" | e }}'
"text_color": '{{ "Green" if is_state("binary_sensor.door_sensor_4_contact", "off") else "Red" | e }}'
- obj: "p0b32" # Motion sensor
properties:
"text": '{{ "\uE536" if is_state("binary_sensor.aeon_labs_zw100_multisensor_6_home_security_motion_detection", "on") else "\uE84E" | e }}'
"text_color": '{{ "Green" if is_state("binary_sensor.aeon_labs_zw100_multisensor_6_home_security_motion_detection", "on") else "Red" | e }}'
- obj: "p1b1" # Lustro Lamp switch
properties:
"text": '{{ "\uE6E8" if is_state("light.hasp3_light_40", "on") else "\uE335" | e }}'
- obj: "p1b2" # Radio Nowy Świat
properties:
"val": '{{ 1 if states("switch.nowyswiat_bathroom") == "on" else 0 }}'
# "text": '{{ "\uE4C3" if is_state("switch.nowyswiat_bathroom", "on") else "\uE4C3" | e }}'
"bg_color": '{{ "Black" if is_state("switch.nowyswiat_bathroom", "off") else "Black" | e }}'
"bg_grad_color": '{{ "Black" if is_state("switch.nowyswiat_bathroom", "off") else "Black" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.nowyswiat_bathroom"
- obj: "p1b5" # Image: Radio Nowy Świat
properties:
"src": '{{ "L:/new.bin" if is_state("switch.nowyswiat_bathroom", "on") else "L:/new_off.bin" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.nowyswiat_bathroom"
- obj: "p1b3" # Radio 357
properties:
"val": '{{ 1 if states("switch.radio357_bathroom") == "on" else 0 }}'
# "text": '{{ "\uE4C3" if is_state("switch.radio357_bathroom", "on") else "\uE4C3" | e }}'
"bg_color": '{{ "Black" if is_state("switch.radio357_bathroom", "off") else "Black" | e }}'
"bg_grad_color": '{{ "Black" if is_state("switch.radio357_bathroom", "off") else "Black" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.radio357_bathroom"
- obj: "p1b6" # Image: Radio 357
properties:
"src": '{{ "L:/357.bin" if is_state("switch.radio357_bathroom", "on") else "L:/357_off.bin" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.radio357_bathroom"
- obj: "p1b4" # Radio Baobab
properties:
"val": '{{ 1 if states("switch.baobab_bathroom") == "on" else 0 }}'
# "text": '{{ "\uE4C3" if is_state("switch.baobab_bathroom", "on") else "\uE4C3" | e }}'
"bg_color": '{{ "Black" if is_state("switch.baobab_bathroom", "off") else "Black" | e }}'
"bg_grad_color": '{{ "Black" if is_state("switch.baobab_bathroom", "off") else "Black" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.baobab_bathroom"
- obj: "p1b7" # Image: Radio Baobab
properties:
"src": '{{ "L:/baobab.bin" if is_state("switch.baobab_bathroom", "on") else "L:/baobab_off.bin" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.baobab_bathroom"
- obj: "p1b8" # Volume Down
event:
"down":
- service: script.media_volume_step
data:
entity_id: media_player.salon_zone3
increment: -0.04
- obj: "p1b9" # Volume Up
event:
"down":
- service: script.media_volume_step
data:
entity_id: media_player.salon_zone3
increment: 0.04
- obj: "p1b10" # Media title
properties:
# "text": '{{ states("sensor.media_title_bathroom_downstairs") }}'
"text": >
{% if (states("sensor.media_title_bathroom_downstairs") | length ) <= 60 or (states("sensor.media_title_bathroom_downstairs") | length ) > 90 %}
{{ states("sensor.media_title_bathroom_downstairs")[:135] }}
{% elif 60 < (states("sensor.media_title_bathroom_downstairs") | length ) <= 90 %}
{{ states("sensor.media_title_bathroom_downstairs") }}
{% endif %}
# "text": >
# {% if state_attr("media_player.salon_zone3", "media_title") == none %}
# {% elif state_attr("media_player.salon_zone3", "media_title") == "Radio Nowy Świat - Pion i poziom!" %}
# {{ states("sensor.nowy_swiat_tytul") }} - {{ states("sensor.nowy_swiat_autor") }}
# {% elif state_attr("media_player.salon_zone3", "media_title") == "Radio 357 - Najlepszy radiowy adres na świecie!" %}
# {{ states("sensor.radio357_audycja") }} - {{ states("sensor.radio357_autor") }}
# {% else %}
# {{ state_attr("media_player.salon_zone3", "media_title") }}
# {% endif %}
"text_color": '{{ "#1c1c1c" if state_attr("media_player.salon_zone3", "media_title") == none else "#FFFFFF" }}'
"text_font": >
{% if (states("sensor.media_title_bathroom_downstairs") | length ) <= 60 %}
24
{% elif 60 < (states("sensor.media_title_bathroom_downstairs") | length ) %}
16
{% endif %}
event:
"down":
- service: button.press
target:
entity_id: button.send_bathroom_media_title
- obj: "p0b4" # Volume text
properties:
"text": '{{ "\uE4C3 "+"--%" if (state_attr("media_player.salon_zone3", "volume_level") == none) else "\uE4C3 " + (state_attr("media_player.salon_zone3", "volume_level") * 100) | int(0) | string +"%" }}'
- obj: "p1b11" # Main zone sync
properties:
"val": '{{ 1 if is_state("switch.main_zone_bathroom", "on") else 0 }}'
event:
"down":
- service: switch.toggle
target:
entity_id: switch.main_zone_bathroom
- obj: "p1b12" # Wietrzenie
properties:
"val": '{{ 1 if is_state("input_select.wietrzenie", "medium") or is_state("input_select.wietrzenie", "high") else 0 }}'
event:
"down":
- service: >
{% if val == 0 %}
script.wietrzenie_medium
{% elif val == 1 %}
script.wietrzenie_off
{% endif %}
- obj: "p1b13" # Temperatura łazienka
properties:
"text": '{% if states("sensor.aeon_labs_zw100_multisensor_6_temperature") != "unknown" and states("sensor.aeon_labs_zw100_multisensor_6_temperature") != "unavailable" %}{{ "\uE6A1 "+ (states("sensor.aeon_labs_zw100_multisensor_6_temperature") | round(1) | string)+"°C" }}{% else %}--{% endif %}'
"bg_color": "{% if states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 0 %}blue{% elif 0 < states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 4 %}Aqua{% elif 4 < states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 15 %}Khaki{% elif 15 < states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 25 %}green{% elif 25 < states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 30 %}yellow{% else %}red{% endif %}"
"bg_grad_color": "{% if states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 0 %}blue{% elif 0 < states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 4 %}Aqua{% elif 4 < states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 15 %}Khaki{% elif 15 < states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 25 %}green{% elif 25 < states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 30 %}yellow{% else %}red{% endif %}"
# "text_color": "{% if states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 0 %}#FFFFFF{% elif 0 < states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 4 %}#000000{% elif 4 < states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 15 %}#000000{% elif 15 < states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 25 %}#FFFFFF{% elif 25 < states('sensor.aeon_labs_zw100_multisensor_6_temperature') |int(0) <= 30 %}#000000{% else %}#FFFFFF{% endif %}"
- obj: "p1b14" # Wilgotność
properties:
"text": '{% if states("sensor.aeon_labs_zw100_multisensor_6_relative_humidity") != "unknown" and states("sensor.aeon_labs_zw100_multisensor_6_relative_humidity") != "unavailable" %}{{ "\uE58E "+ (states("sensor.aeon_labs_zw100_multisensor_6_relative_humidity") | round(1) | string)+"%" }}{% else %}--{% endif %}'
"bg_color": "{% if states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 0 %}blue{% elif 0 < states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 30 %}Aqua{% elif 30 < states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 40 %}Khaki{% elif 40 < states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 60 %}green{% elif 60 < states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 80 %}yellow{% else %}red{% endif %}"
"bg_grad_color": "{% if states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 0 %}blue{% elif 0 < states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 30 %}Aqua{% elif 30 < states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 40 %}Khaki{% elif 40 < states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 60 %}green{% elif 60 < states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 80 %}yellow{% else %}red{% endif %}"
# "text_color": "{% if states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 0 %}#000000{% elif 0 < states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 30 %}#000000{% elif 30 < states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 40 %}#000000{% elif 40 < states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 60 %}#FFFFFF{% elif 60 < states('sensor.aeon_labs_zw100_multisensor_6_relative_humidity') |int(0) <= 80 %}#000000{% else %}#FFFFFF{% endif %}"
- obj: "p1b15" # Temperatura wody
properties:
"text": '{% if states("sensor.viessmann_storage_temperature") != "unknown" and states("sensor.viessmann_storage_temperature") != "unavailable" %}{{"\uE58C " + (states("sensor.viessmann_storage_temperature") | round(1) | string) + "°C" }}{% else %}--{% endif %}'
"bg_color": "{% if states('sensor.viessmann_storage_temperature') |int(0) <= 25 %}blue{% elif 25 < states('sensor.viessmann_storage_temperature') |int(0) <= 30 %}Aqua{% elif 30 < states('sensor.viessmann_storage_temperature') |int(0) <= 38 %}Khaki{% elif 38 < states('sensor.viessmann_storage_temperature') |int(0) <= 45 %}green{% elif 45 < states('sensor.viessmann_storage_temperature') |int(0) <= 50 %}yellow{% else %}red{% endif %}"
"bg_grad_color": "{% if states('sensor.viessmann_storage_temperature') |int(0) <= 25 %}blue{% elif 25 < states('sensor.viessmann_storage_temperature') |int(0) <= 30 %}Aqua{% elif 30 < states('sensor.viessmann_storage_temperature') |int(0) <= 38 %}Khaki{% elif 38 < states('sensor.viessmann_storage_temperature') |int(0) <= 45 %}green{% elif 45 < states('sensor.viessmann_storage_temperature') |int(0) <= 50 %}yellow{% else %}red{% endif %}"
# "text_color": "{% if states('sensor.viessmann_storage_temperature') |int(0) <= 25 %}#000000{% elif 25 < states('sensor.viessmann_storage_temperature') |int(0) <= 30 %}#000000{% elif 30 < states('sensor.viessmann_storage_temperature') |int(0) <= 38 %}#000000{% elif 38 < states('sensor.viessmann_storage_temperature') |int(0) <= 45 %}#FFFFFF{% elif 45 < states('sensor.viessmann_storage_temperature') |int(0) <= 50 %}#000000{% else %}#FFFFFF{% endif %}"
- obj: "p2b6" # Waga
properties:
"text": '{{ states("sensor.adam_weight") | round(2) | string + " kg" }} '
- obj: "p2b7" # Wiek
properties:
"text": '{{ states("sensor.adam_metabolic_age") | round(0) | string }}'
- obj: "p3b10" # Temperatura południe
properties:
"text": '{% if states("sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2") != "unknown" and states("sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2") != "unavailable" %}{{ states("sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2") | round(1) }}°C{% else %}--{% endif %}'
"bg_color": "{% if states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 0 %}blue{% elif 0 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 4 %}Aqua{% elif 4 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 15 %}Khaki{% elif 15 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 25 %}green{% elif 25 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 30 %}yellow{% else %}red{% endif %}"
"bg_grad_color": "{% if states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 0 %}blue{% elif 0 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 4 %}Aqua{% elif 4 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 15 %}Khaki{% elif 15 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 25 %}green{% elif 25 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 30 %}yellow{% else %}red{% endif %}"
"text_color": "{% if states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 0 %}#FFFFFF{% elif 0 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 4 %}#000000{% elif 4 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 15 %}#000000{% elif 15 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 25 %}#FFFFFF{% elif 25 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 30 %}#000000{% else %}#FFFFFF{% endif %}"
- obj: "p3b20" # Temperatura stacja pogodowa
properties:
"text": '{% if states("sensor.outdoor_temperature") != "unknown" and states("sensor.outdoor_temperature") != "unavailable" %}{{ states("sensor.outdoor_temperature") | round(1) }}°C{% else %}--{% endif %}'
"bg_color": "{% if states('sensor.outdoor_temperature') |int(0) <= 0 %}blue{% elif 0 < states('sensor.outdoor_temperature') |int(0) <= 4 %}Aqua{% elif 4 < states('sensor.outdoor_temperature') |int(0) <= 15 %}Khaki{% elif 15 < states('sensor.outdoor_temperature') |int(0) <= 25 %}green{% elif 25 < states('sensor.outdoor_temperature') |int(0) <= 30 %}yellow{% else %}red{% endif %}"
"bg_grad_color": "{% if states('sensor.outdoor_temperature') |int(0) <= 0 %}blue{% elif 0 < states('sensor.outdoor_temperature') |int(0) <= 4 %}Aqua{% elif 4 < states('sensor.outdoor_temperature') |int(0) <= 15 %}Khaki{% elif 15 < states('sensor.outdoor_temperature') |int(0) <= 25 %}green{% elif 25 < states('sensor.outdoor_temperature') |int(0) <= 30 %}yellow{% else %}red{% endif %}"
"text_color": "{% if states('sensor.outdoor_temperature') |int(0) <= 0 %}#FFFFFF{% elif 0 < states('sensor.outdoor_temperature') |int(0) <= 4 %}#000000{% elif 4 < states('sensor.outdoor_temperature') |int(0) <= 15 %}#000000{% elif 15 < states('sensor.outdoor_temperature') |int(0) <= 25 %}#FFFFFF{% elif 25 < states('sensor.outdoor_temperature') |int(0) <= 30 %}#000000{% else %}#FFFFFF{% endif %}"
- obj: "p3b30" # Pogoda ikona
properties:
"text": "{% if states('weather.home') == 'clear_night' %}\uE594{% elif states('weather.home') == 'cloudy' %}\uE590{% elif states('weather.home') == 'fog' %}\uE591{% elif states('weather.home') == 'lightning_rainy' %}\uE67E{% elif states('weather.home') == 'partlycloudy' %}\uE595{% elif states('weather.home') == 'pouring' %}\uE596{% elif states('weather.home') == 'rainy' %}\uE597{% elif states('weather.home') == 'snowy' %}\uE598{% elif states('weather.home') == 'snowy_rainy' %}\uE67F{% else %}\uE599{% endif %}" |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
And wt32-sc01-plus_16MB pages.jsonl{"page":0,"id":1,"obj":"label","x":415,"y":0,"h":30,"w":62,"text":"00:00","align":"right","bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"page":0,"id":2,"obj":"label","x":5,"y":0,"h":30,"w":175,"text":"0000.00.00","align":"left","bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"page":0,"id":3,"obj":"label","x":180,"y":5,"h":30,"w":30,"text_font":"2","text":"\uE5A9","text_color":"gray","bg_opa":0,"border_width":0}
{"page":0,"id":5,"obj":"obj","swipe":1,"x":0,"y":0,"h":40,"w":480,"opacity":0,"comment":"swipe-area-at-top"}
{"page":1,"comment":"----------- page 1 ------- "}
{"id":200,"obj":"img","src":"L:/back6.png","w":480, "h":320}
{"id":1,"obj":"btn","x":0,"y":0,"w":480,"h":40,"text":"","value_font":24,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0,"bg_opa":0,"comment":"top_bar"}
{"id":2,"obj":"btn","x":15,"y":65,"w":140,"h":45,"toggle":false,"text":"--°C","value_font":48,"text_font":36,"mode":"break","align":1,"text_color":"#FFFFFF","bg_color":"Gray","bg_grad_color":"Gray","border_width":0,"bg_opa":0,"comment":"temperatura dach"}
{"id":20,"obj":"label","x":15,"y":40,"h":20,"w":140,"text":"Południe","align":"center","text_color":"#FFFFFF","text_font":16}
{"id":3,"obj":"btn","x":170,"y":65,"w":140,"h":45,"toggle":false,"text":"--°C","value_font":48,"text_font":36,"mode":"break","align":1,"text_color":"#FFFFFF","bg_color":"Gray","bg_grad_color":"Gray","border_width":0,"bg_opa":0,"comment":"temperatura południe"}
{"id":21,"obj":"label","x":170,"y":40,"h":20,"w":140,"text":"Dach","align":"center","text_color":"#FFFFFF","text_font":16}
{"id":4,"obj":"btn","x":15,"y":120,"w":140,"h":90,"toggle":false,"text":"--","text_font":"48","mode":"break","align":1,"border_width":0,"bg_opa":150,"comment":"brama"}
{"id":5,"obj":"btn","x":170,"y":120,"w":140,"h":90,"toggle":false,"text":"--","text_font":48,"mode":"break","align":1,"bg_color":"Gray","bg_grad_color":"Gray","border_width":0,"bg_opa":150,"comment":"all_lights"}
{"id":6,"obj":"btn","x":15,"y":220,"w":140,"h":90,"toggle":false,"text":"\uE81B","text_font":"48","mode":"break","align":1,"bg_color":"Gray","bg_grad_color":"Gray", "pad_top":40, "pad_inner":40, "margin_top":40,"border_width":0,"bg_opa":150,"comment":"furtka"}
{"id":8,"obj":"label","x":15,"y":222,"h":20,"w":140,"text":"Furtka","align":"center","text_color":"#FFFFFF","text_font":16}
{"id":7,"obj":"btn","x":170,"y":220,"w":140,"h":90,"toggle":false,"text":"--","text_font":48,"mode":"break","align":1,"bg_color":"Gray","bg_grad_color":"Gray","border_width":0,"bg_opa":150,"comment":"światła_front"}
{"id":9,"obj":"label","x":170,"y":222,"h":20,"w":140,"text":"Front","align":"center","text_color":"#FFFFFF","text_font":16}
{"id":10,"obj":"btn","x":325,"y":50,"w":140,"h":60,"toggle":false,"text":"--","value_font":48,"text_font":48,"mode":"break","align":1,"text_color":"#FFFFFF","bg_color":"Gray","bg_grad_color":"Gray","border_width":0,"bg_opa":0, "comment":"pogoda"}
{"id":11,"obj":"btn","action":"next","x":325,"y":120,"w":140,"h":90,"toggle":false,"text":"--","text_font":"material48","mode":"break","align":1,"bg_color":"Gray","bg_grad_color":"Gray","border_width":0,"bg_opa":150,"comment":"taras"}
{"id":12,"obj":"btn","x":325,"y":220,"w":140,"h":90,"toggle":false,"text":"--","text_font":48,"mode":"break","align":1,"bg_color":"Gray","bg_grad_color":"Gray","border_width":0,"bg_opa":150,"comment":"alarm"}
{"id":13,"obj":"label","x":325,"y":122,"h":20,"w":140,"text":"Taras","align":"center","text_color":"#FFFFFF","text_font":16}
{"id":14,"obj":"label","x":170,"y":122,"h":20,"w":140,"text":"All Lights","align":"center","text_color":"#FFFFFF","text_font":16}
{"page":2,"comment":"----------- page 2 ------- "}
{"id":200,"obj":"img","src":"L:/back6.png","w":480, "h":320}
{"id":1,"obj":"btn","action":"prev","x":5,"y":255,"w":130,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE141","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":2,"obj":"btn","action":"next","x":365,"y":255,"w":110,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE142","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":3,"obj":"btn","action":"back","x":140,"y":255,"w":220,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE2DC","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":10,"obj":"btn","x":0,"y":0,"w":480,"h":40,"text":"","value_font":24,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0,"bg_opa":0,"comment":"top_bar"}
{"id":4,"obj":"slider","x":25,"y":45,"w":350,"h":55,"enabled":true,"min":0,"max":100,"text":"Dach","border_width":0,"bg_opa00":220, "bg_opa20":0, "bg_color10":"#FAAC1B","bg_color00":"#1c1c1c", "bg_grad_color10":"#FAAC1B", "border_width10":0, "border_width20":0, "radius":25, "radius10":25, "radius20":25}
{"id":5,"obj":"btn","x":15,"y":150,"w":100,"h":50,"radius":10,"bg_color":"#6e6e6e","enabled":true,"border_color":"black","border_width":1,"text":"Pergola","text_color":"white"}
{"id":6,"obj":"switch","x":15,"y":105,"w":100,"h":40,"radius":20,"bg_color":"#6e6e6e","enabled":true,"border_color":"black","border_width":1}
{"id":7,"obj":"btn","x":120,"y":150,"w":95,"h":50,"radius":10,"bg_color":"#6e6e6e","enabled":true,"border_color":"black","border_width":1,"text":"Półki","text_color":"white"}
{"id":8,"obj":"switch","x":120,"y":105,"w":95,"h":40,"radius":20,"bg_color":"#6e6e6e","enabled":true,"border_color":"black","border_width":1}
{"id":9,"obj":"slider","x":415,"y":60,"w":55,"h":170,"enabled":true,"min":0,"max":100,"border_width":0,"bg_opa00":220, "bg_opa20":0, "bg_color10":"#FAAC1B","bg_color00":"#1c1c1c", "bg_grad_color10":"#FAAC1B", "border_width10":0, "border_width20":0, "radius":25, "radius10":25}
{"id":11,"obj":"btn","x":220,"y":105,"w":90,"h":95,"radius":10,"text_font":72,"bg_color":"#Gray","mode":"break","align":1,"bg_color":"Gray","bg_grad_color":"Gray"}
{"id":12,"obj":"btn","x":315,"y":105,"w":90,"h":95,"radius":10,"text":"-","text_font":72,"bg_color":"#Gray","mode":"break","align":1,"bg_color":"Gray","bg_grad_color":"Gray"}
{"page":3,"comment":"----------- page 3 ------- "}
{"id":200,"obj":"img","src":"L:/back6.png","w":480, "h":320}
{"id":1,"obj":"btn","action":"prev","x":5,"y":255,"w":130,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE141","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":2,"obj":"btn","action":"next","x":365,"y":255,"w":110,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE142","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":3,"obj":"btn","action":"back","x":140,"y":255,"w":220,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE2DC","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":4,"obj":"btn","x":0,"y":0,"w":480,"h":40,"text":"","value_font":24,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0,"bg_opa":0,"comment":"top_bar"}
{"id":5,"obj":"label","x":280,"y":5,"h":30,"w":120,"text":"\uE4C3 : --%","text_color":"gray","bg_opa":0,"border_width":0, "bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"id":8,"obj":"label","x":15,"y":182,"h":20,"w":140,"text":"Nowy Swiat","align":"center","text_color":"#FFFFFF","text_font":16}
{"id":9,"obj":"label","x":170,"y":182,"h":20,"w":140,"text":"357","align":"center","text_color":"#FFFFFF","text_font":16}
{"id":11,"obj":"btn","x":325,"y":60,"w":65,"h":90,"toggle":false,"text":"\uE580","text_font":48,"mode":"break","align":1,"bg_color":"Gray","bg_grad_color":"Gray","border_width":0,"bg_opa":0}
{"id":19,"obj":"btn","x":400,"y":60,"w":65,"h":90,"toggle":false,"text":"\uE57E","text_font":48,"mode":"break","align":1,"bg_color":"Gray","bg_grad_color":"Gray","border_width":0,"bg_opa":0}
{"id":15,"obj":"label","x":325,"y":182,"h":20,"w":140,"text":"Baobab","align":"center","text_color":"#FFFFFF","text_font":16}
{"id":16,"obj":"img","src":"L:/new_off.bin","x":15,"y":160}
{"id":17,"obj":"img","src":"L:/357_off.bin","x":170,"y":160}
{"id":18,"obj":"img","src":"L:/baobab_off.bin","x":325,"y":160}
{"page":4,"comment":"----------- page 4 ------- "}
{"id":200,"obj":"img","src":"L:/back6.png","w":480, "h":320}
{"id":1,"obj":"btn","action":"prev","x":5,"y":255,"w":130,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE141","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":2,"obj":"btn","action":"next","x":365,"y":255,"w":110,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE142","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":3,"obj":"btn","action":"back","x":140,"y":255,"w":220,"h":60,"radius":10,"bg_color":"#6e6e6eff","enabled":true,"border_color":"black","border_width":1,"text":"\uE2DC","text_color":"white","text_font":48,"border_width":0,"bg_opa":0}
{"id":4,"obj":"label","x":15,"y":50,"h":40,"w":180,"text":"Woda główny:","align":"right","text_color":"#FFFFFF","text_font":32}
{"id":5,"obj":"label","x":15,"y":100,"h":40,"w":180,"text":"Woda ogród:","align":"right","text_color":"#FFFFFF","text_font":32}
{"id":6,"obj":"label","x":220,"y":50,"h":40,"w":180,"text":"----","align":"left","text_color":"#FFFFFF","text_font":32}
{"id":7,"obj":"label","x":220,"y":100,"h":40,"w":180,"text":"----","align":"left","text_color":"#FFFFFF","text_font":32}configuration.yamlhasp1:
objects:
- obj: "p0b1" # time label on all pages
properties:
"text": '{{ states("sensor.time") }}'
- obj: "p0b2" # date label on all pages
properties:
"text": >
{% set input = as_datetime(states('sensor.date')) %}
{% set months = ["Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"] %}
{{ input.strftime('%d ') + months[input.strftime('%m') | int - 1] }}
- obj: "p0b3"
properties:
"text_color": "{% if -30 <= state_attr('openhasp.hasp_1','rssi') |int(0) %}green{% elif -31 > state_attr('openhasp.hasp_1','rssi') |int(0) >= -50 %}orange{% elif -51 > state_attr('openhasp.hasp_1','rssi') |int(0) >= -80 %}tomato{% else %}red{% endif %}"
- obj: "p1b2" # Temperatura południe
properties:
"text": '{% if states("sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2") != "unknown" and states("sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2") != "unavailable" %}{{ states("sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2") | round(1) }}°C{% else %}--{% endif %}'
"bg_color": "{% if states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 0 %}blue{% elif 0 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 4 %}Aqua{% elif 4 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 15 %}Khaki{% elif 15 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 25 %}green{% elif 25 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 30 %}yellow{% else %}red{% endif %}"
"bg_grad_color": "{% if states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 0 %}blue{% elif 0 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 4 %}Aqua{% elif 4 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 15 %}Khaki{% elif 15 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 25 %}green{% elif 25 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 30 %}yellow{% else %}red{% endif %}"
# "text_color": "{% if states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 0 %}#FFFFFF{% elif 0 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 4 %}#000000{% elif 4 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 15 %}#000000{% elif 15 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 25 %}#FFFFFF{% elif 25 < states('sensor.qubino_goap_zmnhbdx_flush_2_relays_temperature_2') |int(0) <= 30 %}#000000{% else %}#FFFFFF{% endif %}"
- obj: "p1b3" # Temperatura stacja pogodowa
properties:
"text": '{% if states("sensor.outdoor_temperature") != "unknown" and states("sensor.outdoor_temperature") != "unavailable" %}{{ states("sensor.outdoor_temperature") | round(1) }}°C{% else %}--{% endif %}'
"bg_color": "{% if states('sensor.outdoor_temperature') |int(0) <= 0 %}blue{% elif 0 < states('sensor.outdoor_temperature') |int(0) <= 4 %}Aqua{% elif 4 < states('sensor.outdoor_temperature') |int(0) <= 15 %}Khaki{% elif 15 < states('sensor.outdoor_temperature') |int(0) <= 25 %}green{% elif 25 < states('sensor.outdoor_temperature') |int(0) <= 30 %}yellow{% else %}red{% endif %}"
"bg_grad_color": "{% if states('sensor.outdoor_temperature') |int(0) <= 0 %}blue{% elif 0 < states('sensor.outdoor_temperature') |int(0) <= 4 %}Aqua{% elif 4 < states('sensor.outdoor_temperature') |int(0) <= 15 %}Khaki{% elif 15 < states('sensor.outdoor_temperature') |int(0) <= 25 %}green{% elif 25 < states('sensor.outdoor_temperature') |int(0) <= 30 %}yellow{% else %}red{% endif %}"
# "text_color": "{% if states('sensor.outdoor_temperature') |int(0) <= 0 %}#FFFFFF{% elif 0 < states('sensor.outdoor_temperature') |int(0) <= 4 %}#000000{% elif 4 < states('sensor.outdoor_temperature') |int(0) <= 15 %}#000000{% elif 15 < states('sensor.outdoor_temperature') |int(0) <= 25 %}#FFFFFF{% elif 25 < states('sensor.outdoor_temperature') |int(0) <= 30 %}#000000{% else %}#FFFFFF{% endif %}"
- obj: "p1b4" # Brama
properties:
"val": '{{ 1 if states("cover.brama") == "closed" else 0 }}'
"text": '{{ "\uF2D3" if is_state("cover.brama", "closed") else "\uF2D4" | e }}'
# "text": '{{ "\uF0299" if is_state("cover.brama", "closed") else "\uF116A" | e }}'
# "text": '{{ "\uF12D3" if is_state("cover.brama", "closed") else "\uF12D4" | e }}'
"bg_color": '{{ "Red" if is_state("cover.brama", "open") else "Green" | e }}'
"bg_grad_color": '{{ "Red" if is_state("cover.brama", "open") else "Green" | e }}'
"enabled": "{{ false if states('input_boolean.hasp1_locked') == 'on' else true }}"
event:
"up":
- service: homeassistant.toggle
entity_id: "cover.brama"
- obj: "p1b5" # Wszystkie światła
properties:
"val": '{{ 1 if states("group.all_lights") == "on" else 0 }}'
"text": '{{ "\uE6E8" if is_state("group.all_lights", "on") else "\uE335" | e }}'
"bg_color": '{{ "Gray" if is_state("group.all_lights", "off") else "Green" | e }}'
"bg_grad_color": '{{ "Gray" if is_state("group.all_lights", "off") else "Green" | e }}'
"enabled": "{{ false if states('input_boolean.hasp1_locked') == 'on' else true }}"
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.all_lights"
# - obj: "p1b6" # Światła - drzewa
# properties:
# "val": '{{ 1 if states("switch.qubino_goap_zmnhbdx_flush_2_relays_switch_2") == "on" else 0 }}'
# "text": '{{ "\uE406" if is_state("switch.qubino_goap_zmnhbdx_flush_2_relays_switch_2", "on") else "\uE406" | e }}'
# "bg_color": '{{ "Gray" if is_state("switch.qubino_goap_zmnhbdx_flush_2_relays_switch_2", "off") else "Green" | e }}'
# "bg_grad_color": '{{ "Gray" if is_state("switch.qubino_goap_zmnhbdx_flush_2_relays_switch_2", "off") else "Green" | e }}'
# "enabled": "{{ false if states('input_boolean.hasp1_locked') == 'on' else true }}"
# event:
# "up":
# - service: homeassistant.toggle
# entity_id: "switch.qubino_goap_zmnhbdx_flush_2_relays_switch_2"
- obj: "p1b6" # Furtka
properties:
"val": '{{ 1 if states("switch.gate_switch_2") == "on" else 0 }}'
"text": '{{ "\uE81B" if is_state("switch.gate_switch_2", "off") else "\uE81C" | e }}'
"bg_color": '{{ "Green" if is_state("switch.gate_switch_2", "off") else "Red" | e }}'
# "bg_color": '{{ "white" if is_state("switch.gate_switch_2", "off") else "white" | e }}'
"bg_grad_color": '{{ "Green" if is_state("switch.gate_switch_2", "off") else "Red" | e }}'
# "bg_grad_color": '{{ "white" if is_state("switch.gate_switch_2", "off") else "white" | e }}'
"enabled": "{{ false if states('input_boolean.hasp1_locked') == 'on' else true }}"
event:
"down":
- service: button.press
entity_id: "button.gate_furtka"
- obj: "p1b7" # Światła - ogród front
properties:
"val": '{{ 1 if states("switch.outdoor_front_lights") == "on" else 0 }}'
"text": '{{ "\uE8DD" if is_state("switch.outdoor_front_lights", "on") else "\uE8DD" | e }}'
"bg_color": '{{ "Gray" if is_state("switch.outdoor_front_lights", "off") else "Green" | e }}'
"bg_grad_color": '{{ "Gray" if is_state("switch.outdoor_front_lights", "off") else "Green" | e }}'
"enabled": "{{ false if states('input_boolean.hasp1_locked') == 'on' else true }}"
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.outdoor_front_lights"
- obj: "p1b10" # Pogoda ikona
properties:
"text": "{% if states('weather.home') == 'clear_night' %}\uE594{% elif states('weather.home') == 'cloudy' %}\uE590{% elif states('weather.home') == 'fog' %}\uE591{% elif states('weather.home') == 'lightning_rainy' %}\uE67E{% elif states('weather.home') == 'partlycloudy' %}\uE595{% elif states('weather.home') == 'pouring' %}\uE596{% elif states('weather.home') == 'rainy' %}\uE597{% elif states('weather.home') == 'snowy' %}\uE598{% elif states('weather.home') == 'snowy_rainy' %}\uE67F{% else %}\uE599{% endif %}"
- obj: "p1b11" # Światła - taras
properties:
"val": '{{ 1 if states("switch.taras_lights") == "on" else 0 }}'
"text": '{{ "\uEA47" if is_state("switch.taras_lights", "on") else "\uEA47" | e }}'
"bg_color": '{{ "Gray" if is_state("switch.taras_lights", "off") else "Green" | e }}'
"bg_grad_color": '{{ "Gray" if is_state("switch.taras_lights", "off") else "Green" | e }}'
"enabled": "{{ false if states('input_boolean.hasp1_locked') == 'on' else true }}"
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.taras_lights"
- obj: "p1b12" # Stan alarmu
properties:
"text": "{% if states('switch.alarm_armed') == 'off' %}\uEFC6{% else %}\uE33E{% endif %}"
"text_color": "{% if states('group.allpersons') == 'home' %}White{% elif states('switch.alarm_armed') == 'off' %}Green{% else %}Red{% endif %}"
"bg_color": "{% if states('group.allpersons') == 'not_home' %}Gray{% elif states('switch.alarm_armed') == 'off' %}Green{% else %}Red{% endif %}"
"bg_grad_color": "{% if states('group.allpersons') == 'not_home' %}Gray{% elif states('switch.alarm_armed') == 'off' %}Green{% else %}Red{% endif %}"
"enabled": "{{ false if states('input_boolean.hasp1_locked') == 'on' else true }}"
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.alarm_armed"
- obj: "p2b4" # Cover: refleksola
properties:
"val": >
{% if (state_attr('cover.taras_dach','current_position') != none and states('cover.taras_refleksola') not in ['unavailable', 'unknown']) %}
{{ state_attr('cover.taras_dach','current_position') | int(default=100) }}
{%-endif %}
event:
"up":
- service: cover.set_cover_position
data:
position: "{{ val | int }}"
target:
entity_id: cover.taras_dach
- obj: "p2b9" # Cover: refleksola
properties:
"val": >
{% if (state_attr('cover.taras_refleksola','current_position') != none and states('cover.taras_refleksola') not in ['unavailable', 'unknown']) %}
{{ state_attr('cover.taras_refleksola','current_position') | int(default=100) }}
{%-endif %}
event:
"up":
- service: cover.set_cover_position
data:
position: "{{ val | int }}"
target:
entity_id: cover.taras_refleksola
- obj: "p2b5" # Pergola Switch
properties:
"val": '{{ 1 if is_state("light.taras_gora", "on") else 0 }}'
# "text": '{{ "\uE6E8" if is_state("light.taras_gora", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.taras_gora"
- obj: "p2b6" # Pergola Switch
properties:
"val": '{{ 1 if is_state("light.taras_gora", "on") else 0 }}'
# "text": '{{ "\uE6E8" if is_state("light.taras_gora", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.taras_gora"
- obj: "p2b7" # Półki Switch
properties:
"val": '{{ 1 if is_state("light.taras_channel_2", "on") else 0 }}'
# "text": '{{ "\uE6E8" if is_state("light.taras_channel_2", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.taras_channel_2"
- obj: "p2b8" # Półki Switch
properties:
"val": '{{ 1 if is_state("light.taras_channel_2", "on") else 0 }}'
# "text": '{{ "\uE6E8" if is_state("light.taras_channel_2", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.taras_channel_2"
- obj: "p2b11" # Rain sensor Aquara
properties:
"text": '{{ "\uE597" if is_state("binary_sensor.water_leak_1_water_leak", "on") else "\uE599" | e }}'
"bg_color": '{{ "Red" if is_state("binary_sensor.water_leak_1_water_leak", "on") else "Green" | e }}'
"bg_grad_color": '{{ "Red" if is_state("binary_sensor.water_leak_1_water_leak", "on") else "Green" | e }}'
- obj: "p3b11" # Volume Down
event:
"down":
- service: media_player.volume_down
entity_id: "media_player.taras"
- obj: "p3b19" # Volume Up
event:
"down":
- service: media_player.volume_up
entity_id: "media_player.taras"
- obj: "p3b5" # Volume Level
properties:
"text": '{{ "\uE4C3 "+"--%" if (state_attr("media_player.taras", "volume_level") == none) else "\uE4C3 " + (state_attr("media_player.taras", "volume_level") * 100) | int(0) | string +"%" }}'
- obj: "p3b16" # Image: Radio Nowy Świat
properties:
"src": '{{ "L:/new.bin" if is_state("switch.nowyswiat_taras", "on") else "L:/new_off.bin" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.nowyswiat_taras"
- obj: "p3b7" # Radio 357
properties:
"val": '{{ 1 if states("switch.radio357_taras") == "on" else 0 }}'
"text": '{{ "\uE4C3" if is_state("switch.radio357_taras", "on") else "\uE4C3" | e }}'
"bg_color": '{{ "Gray" if is_state("switch.radio357_taras", "off") else "Green" | e }}'
"bg_grad_color": '{{ "Gray" if is_state("switch.radio357_taras", "off") else "Green" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.radio357_taras"
- obj: "p3b17" # Image: Radio 357
properties:
"src": '{{ "L:/357.bin" if is_state("switch.radio357_taras", "on") else "L:/357_off.bin" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.radio357_taras"
- obj: "p3b12" # Radio Baobab
properties:
"val": '{{ 1 if states("switch.baobab_taras") == "on" else 0 }}'
"text": '{{ "\uE4C3" if is_state("switch.baobab_taras", "on") else "\uE4C3" | e }}'
"bg_color": '{{ "Gray" if is_state("switch.baobab_taras", "off") else "Green" | e }}'
"bg_grad_color": '{{ "Gray" if is_state("switch.baobab_taras", "off") else "Green" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.baobab_taras"
- obj: "p3b18" # Image: Radio Baobab
properties:
"src": '{{ "L:/baobab.bin" if is_state("switch.baobab_taras", "on") else "L:/baobab_off.bin" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.baobab_taras"
- obj: "p4b6" # Woda główny
properties:
"text": '{{ states("sensor.water_total") | round(0) | string + " m³" }} '
- obj: "p4b7" # Woda ogród
properties:
"text": '{{ states("sensor.water_garden_total") | round(0) | string + " m³" }}'
|
Beta Was this translation helpful? Give feedback.
0 replies
-
guition esp32 s3 4848s040only just discovered openHASP and started playing around with it, but already love what it can do on a £20 device and will have to get more of them.
|
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Would be great to get your configuration 🙏🏼? Nice work. |
Beta Was this translation helpful? Give feedback.
-
|
Still early days in my learning of openHASP but I love tinkering at the pixel level. UPDATE : New screenshot, decided to get rid of AI generated weather commentary and replace with 3 day forecast. Spent ages pixel pushing screenshots in photoshop to get everything nicely lined up. Needed to add a template sensor to extract the required values from the weather forecast.
configuration.yaml.txt |
Beta Was this translation helpful? Give feedback.
13 replies
-
|
@TommySharpNZ I just want to use your template to create something with the same layout but with some different information. |
Beta Was this translation helpful? Give feedback.
-
|
I have exactly the same display. I really like your design. Can I ask you to post it pages.jsonl |
Beta Was this translation helpful? Give feedback.
-
|
@radsonpatrick and @olbordangmailcom Here is my pages file for inspiration. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @TommySharpNZ |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much @TommySharpNZ |
Beta Was this translation helpful? Give feedback.
-
|
Quite simple, but very effective guition I installed near the entry door to our camper. Provides controls for all lights, fans, TVs, etc. Additionally, it provides status in the top right corner for propane tanks, water tanks, battery charge/status and shore power availability. The status icons will turn yellow then red based on remaining fuel/fluid/battery. The battery icon also changes depending on SOC - charging/discharging and percent charged.
|
Beta Was this translation helpful? Give feedback.
4 replies
-
|
excelent!!! |
Beta Was this translation helpful? Give feedback.
-
|
Could you share this project, I also want to automate my camper. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Here are my pages.jsonl and openhasp.yaml files. I've also posted my progress on my HA Camper project here. pages.jsonl{"comment":" ----------- All Pages Title Bar ------------"}
{"page":0,"id":1,"obj":"label","x":62,"y":0,"h":32,"w":6,"text":"•","align":"center","text_color":"#FFFFFF","text_font":24}
{"page":0,"id":2,"obj":"label","x":72,"y":0,"h":32,"w":92,"text":"00.0°F","align":"left","text_color":"#FFFFFF","text_font":24}
{"page":0,"id":3,"obj":"label","x":4,"y":0,"h":32,"w":58,"text":"00:00","template":"%H:%M","align":0,"text_color":"#FFFFFF","text_font":24}
{"page":0,"id":4,"obj":"label","x":456,"y":4,"h":28,"w":24,"text":"\uDB81\uDEA6","align":"right","text_color":"#FFFFFF","text_font":"mdi24"}
{"page":0,"id":5,"obj":"label","x":436,"y":4,"h":28,"w":24,"text":"\uDB80\uDC8E","align":"right","text_color":"#FFFFFF","text_font":"mdi24"}
{"page":0,"id":6,"obj":"label","x":412,"y":4,"h":28,"w":24,"text":"\uDB84\uDF57","align":"right","text_color":"#FFFFFF","text_font":"mdi24"}
{"page":0,"id":7,"obj":"label","x":388,"y":4,"h":28,"w":24,"text":"\uDB82\uDDAB","align":"right","text_color":"#FFFFFF","text_font":"mdi24"}
{"page":0,"id":8,"obj":"label","x":364,"y":4,"h":28,"w":24,"text":"\uDB82\uDDA0","align":"right","text_color":"#FFFFFF","text_font":"mdi24"}
{"page":0,"id":9,"obj":"label","x":340,"y":4,"h":28,"w":24,"text":"\uDB86\uDF2A","align":"right","text_color":"#FFFFFF","text_font":"mdi24"}
{"comment":" ----------- Page 1 Layout ------------"}
{"comment":" ----------- Page 1 Title Bar ------------"}
{"page":1,"id":0,"prev":4}
{"page":1,"id":1,"obj":"btn","x":0,"y":0,"h":32,"w":480,"bg_color":"#2C3E50","bg_grad_color":"#00B6FF","bg_grad_dir":1,"text":"Living","align":"center","radius":0,"border_side":0,"text_color":"#FFFFFF","text_font":24}
{"comment":" ----------- Kitchen Slider ------------"}
{"page":1,"id":2,"obj":"slider","x":24,"y":54,"w":432,"h":60,"min":1,"max":255,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":1,"id":3,"obj":"btn","x":24,"y":54,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE335","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"page":1,"id":4,"obj":"label","x":94,"y":68,"h":60,"w":300,"text":"Kitchen","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"comment":" ----------- Dining Slider ------------"}
{"page":1,"id":5,"obj":"slider","x":24,"y":134,"w":432,"h":60,"min":1,"max":255,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":1,"id":6,"obj":"btn","x":24,"y":134,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE335","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"page":1,"id":7,"obj":"label","x":94,"y":148,"h":60,"w":300,"text":"Dining","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"comment":" ----------- Bed Slider ------------"}
{"page":1,"id":8,"obj":"slider","x":24,"y":214,"w":432,"h":60,"min":1,"max":255,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":1,"id":9,"obj":"btn","x":24,"y":214,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE335","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"page":1,"id":10,"obj":"label","x":94,"y":228,"h":60,"w":300,"text":"Bed","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"comment":" ----------- Ceiling Switch ------------"}
{"page":1,"id":11,"obj":"slider","x":24,"y":294,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":1,"id":12,"obj":"label","x":94,"y":308,"h":60,"w":120,"text":"Ceiling","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"page":1,"id":13,"obj":"btn","x":24,"y":294,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0}
{"page":1,"id":14,"obj":"btn","x":24,"y":294,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE335","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- Fan Switch ------------"}
{"page":1,"id":15,"obj":"slider","x":256,"y":294,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":1,"id":16,"obj":"label","x":326,"y":308,"h":60,"w":120,"text":"Fan","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"page":1,"id":17,"obj":"btn","x":256,"y":294,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0}
{"page":1,"id":18,"obj":"btn","x":256,"y":294,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE210","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- TV Switch ------------"}
{"page":1,"id":19,"obj":"slider","x":24,"y":374,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":1,"id":20,"obj":"label","x":94,"y":388,"h":60,"w":120,"text":"TV","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"page":1,"id":21,"obj":"btn","x":24,"y":374,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0}
{"page":1,"id":22,"obj":"btn","x":24,"y":374,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE502","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- All Off Switch ------------"}
{"page":1,"id":23,"obj":"slider","x":256,"y":374,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000","hidden":1}
{"page":1,"id":24,"obj":"label","x":326,"y":388,"h":60,"w":120,"text":"All Off","align":"left","text_color":"#FFFFFF","text_font":24,"click":0,"hidden":1}
{"page":1,"id":25,"obj":"btn","x":256,"y":374,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0,"hidden":0,"click":1}
{"comment":" ----------- Bottom Dots ------------"}
{"page":1,"id":95,"obj":"label","x":212,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":255}
{"page":1,"id":96,"obj":"label","x":228,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":128}
{"page":1,"id":98,"obj":"label","x":244,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":128}
{"page":1,"id":99,"obj":"label","x":260,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":128}
{"comment":" ----------- Page 2 Layout ------------"}
{"comment":" ----------- Page 2 Title Bar ------------"}
{"page":2,"id":1,"obj":"btn","x":0,"y":0,"h":32,"w":480,"bg_color":"#2C3E50","bg_grad_color":"#00B6FF","bg_grad_dir":1,"text":"Bunk & Bath","align":"center","radius":0,"border_side":0,"text_color":"#FFFFFF","text_font":24}
{"comment":" ----------- Bunk Sconce Slider ------------"}
{"page":2,"id":2,"obj":"slider","x":24,"y":54,"w":432,"h":60,"min":1,"max":255,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":2,"id":3,"obj":"btn","x":24,"y":54,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE335","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"page":2,"id":4,"obj":"label","x":94,"y":68,"h":60,"w":300,"text":"Bunk Sconce","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"comment":" ----------- Bunk Fan Slider ------------"}
{"page":2,"id":5,"obj":"slider","x":24,"y":134,"w":432,"h":60,"min":1,"max":100,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":2,"id":6,"obj":"btn","x":24,"y":134,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE210","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"page":2,"id":7,"obj":"label","x":94,"y":148,"h":60,"w":300,"text":"Bunk Fan","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"comment":" ----------- Bunk Light Switch ------------"}
{"page":2,"id":8,"obj":"slider","x":24,"y":214,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":2,"id":9,"obj":"label","x":94,"y":228,"h":60,"w":120,"text":"Bunk Ceiling","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"page":2,"id":10,"obj":"btn","x":24,"y":214,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0}
{"page":2,"id":11,"obj":"btn","x":24,"y":214,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE335","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- Bunk TV Switch ------------"}
{"page":2,"id":12,"obj":"slider","x":256,"y":214,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":2,"id":13,"obj":"label","x":326,"y":228,"h":60,"w":120,"text":"Bunk TV","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"page":2,"id":14,"obj":"btn","x":256,"y":214,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0}
{"page":2,"id":15,"obj":"btn","x":256,"y":214,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE502","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- Bath Light Switch ------------"}
{"page":2,"id":16,"obj":"slider","x":24,"y":294,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":2,"id":17,"obj":"label","x":94,"y":308,"h":60,"w":120,"text":"Bath Light","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"page":2,"id":18,"obj":"btn","x":24,"y":294,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0}
{"page":2,"id":19,"obj":"btn","x":24,"y":294,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE335","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- Bath Fan Switch ------------"}
{"page":2,"id":20,"obj":"slider","x":256,"y":294,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":2,"id":21,"obj":"label","x":326,"y":308,"h":60,"w":120,"text":"Bath Fan","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"page":2,"id":22,"obj":"btn","x":256,"y":294,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0}
{"page":2,"id":23,"obj":"btn","x":256,"y":294,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE210","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- Bottom Dots ------------"}
{"page":2,"id":95,"obj":"label","x":212,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":128}
{"page":2,"id":96,"obj":"label","x":228,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":255}
{"page":2,"id":98,"obj":"label","x":244,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":128}
{"page":2,"id":99,"obj":"label","x":260,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":128}
{"comment":" ----------- Page 3 Layout ------------"}
{"comment":" ----------- Page 3 Title Bar ------------"}
{"page":3,"id":1,"obj":"btn","x":0,"y":0,"h":32,"w":480,"bg_color":"#2C3E50","bg_grad_color":"#00B6FF","bg_grad_dir":1,"text":"Exterior","align":"center","radius":0,"border_side":0,"text_color":"#FFFFFF","text_font":24}
{"comment":" ----------- Awning Slider ------------"}
{"page":3,"id":2,"obj":"slider","x":24,"y":54,"w":432,"h":60,"min":1,"max":100,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":3,"id":3,"obj":"btn","x":24,"y":54,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uF11E","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"page":3,"id":4,"obj":"label","x":94,"y":68,"h":60,"w":300,"text":"Awning","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"comment":" ----------- Patio Light Switch ------------"}
{"page":3,"id":5,"obj":"slider","x":24,"y":134,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":3,"id":6,"obj":"label","x":94,"y":148,"h":60,"w":120,"text":"Patio","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"page":3,"id":7,"obj":"btn","x":24,"y":134,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0}
{"page":3,"id":8,"obj":"btn","x":24,"y":134,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE335","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- Marker Light Switch ------------"}
{"page":3,"id":9,"obj":"slider","x":256,"y":134,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":3,"id":10,"obj":"label","x":326,"y":148,"h":60,"w":120,"text":"Markers","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"page":3,"id":11,"obj":"btn","x":256,"y":134,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0}
{"page":3,"id":12,"obj":"btn","x":256,"y":134,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE335","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- Speaker Light Switch ------------"}
{"page":3,"id":13,"obj":"slider","x":24,"y":214,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":3,"id":14,"obj":"label","x":94,"y":228,"h":60,"w":120,"text":"Speakers","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"page":3,"id":15,"obj":"btn","x":24,"y":214,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0}
{"page":3,"id":16,"obj":"btn","x":24,"y":214,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE335","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- Stair Light Switch ------------"}
{"page":3,"id":17,"obj":"slider","x":256,"y":214,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":3,"id":18,"obj":"label","x":326,"y":228,"h":60,"w":120,"text":"Stair","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"page":3,"id":19,"obj":"btn","x":256,"y":214,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0}
{"page":3,"id":20,"obj":"btn","x":256,"y":214,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE335","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- Patio TV Switch ------------"}
{"page":3,"id":21,"obj":"slider","x":24,"y":294,"w":200,"h":60,"min":0,"max":1,"radius":30,"border_side20":0,"radius10":30,"bg_opa20":0,"bg_color10":"#00B6FF","bg_opa00":120,"bg_color":"#000000"}
{"page":3,"id":22,"obj":"label","x":94,"y":308,"h":60,"w":120,"text":"Patio TV","align":"left","text_color":"#FFFFFF","text_font":24,"click":0}
{"page":3,"id":23,"obj":"btn","x":24,"y":294,"w":200,"h":60,"radius":30,"bg_opa":0,"border_side":0}
{"page":3,"id":24,"obj":"btn","x":24,"y":294,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"true","border_color":"#00B6FF","border_width":4,"text":"\uE502","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- Bottom Dots ------------"}
{"page":3,"id":95,"obj":"label","x":212,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":128}
{"page":3,"id":96,"obj":"label","x":228,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":128}
{"page":3,"id":98,"obj":"label","x":244,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":255}
{"page":3,"id":99,"obj":"label","x":260,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":128}
{"comment":" ----------- Page 4 Layout ------------"}
{"comment":" ----------- Page 4 Title Bar ------------"}
{"page":4,"id":0,"next":1}
{"page":4,"id":1,"obj":"btn","x":0,"y":0,"h":32,"w":480,"bg_color":"#2C3E50","bg_grad_color":"#00B6FF","bg_grad_dir":1,"text":"Climate","align":"center","radius":0,"border_side":0,"text_color":"#FFFFFF","text_font":24}
{"comment":" ----------- Text ------------"}
{"page":4,"id":4,"obj":"label","x":160,"y":114,"w":160,"h":32,"align":"center","text":"Status","text_font":22,"text_color":"#FFFFFF"}
{"page":4,"id":5,"obj":"label","x":140,"y":150,"w":200,"h":60,"text":"\uE50F 00.0°F","align":"center","text_font":22,"text_color":"#FFFFFF"}
{"comment":" ----------- Setpoint - Heat or Cool Mode ------------"}
{"page":4,"id":6,"obj":"label","x":140,"y":176,"w":200,"h":84,"text":"00.0°F","align":"center","text_font":68,"text_color":"#FFFFFF","hidden":1}
{"comment":" ----------- Setpoint - Dual Mode ------------"}
{"page":4,"id":7,"obj":"label","x":100,"y":182,"w":132,"h":84,"text":"00.0°","align":"right","text_font":60,"text_color":"#FFFFFF","hidden":0}
{"page":4,"id":8,"obj":"label","x":248,"y":182,"w":132,"h":84,"text":"00.0°","align":"left","text_font":60,"text_color":"#FFFFFF","hidden":0}
{"comment":" ----------- Arcs ------------"}
{"comment":" ----------- Background Arc ------------"}
{"page":4,"id":15,"obj":"arc","x":52,"y":40,"w":376,"h":376,"rotation":90,"line_width":28,"line_color":"#232830","line_opa":255,"line_opa10":0,"border_side":0,"min":45,"max":95,"adjustable":false,"start_angle":45,"end_angle":315,"bg_opa":0,"val":0}
{"comment":" ----------- Baseline Points in Dual Mode ------------"}
{"page":4,"id":16,"obj":"obj","x":110,"y":330,"w":28,"h":28,"bg_opa":255,"bg_color":"#A14A1E","border_side":0,"radius":14}
{"page":4,"id":17,"obj":"obj","x":342,"y":330,"w":28,"h":28,"bg_opa":255,"bg_color":"#4473B0","border_side":0,"radius":14}
{"comment":" ----------- Heat Indicator - set hidden to 0 (heat or dual) or 1 (cool or off)------------"}
{"comment":" ----------- Show Knob - set adjustable to true (heat) or false (dual, cool or off)------------"}
{"page":4,"id":18,"obj":"arc","x":52,"y":40,"w":376,"h":376,"rotation":90,"line_width":28,"line_width10":28,"line_color10":"#A14A1E","bg_color20":"#FFFFFF","line_opa":0,"border_side":0,"border_width20":4,"border_color20":"#FF6F22","min":90,"max":190,"start_angle":45,"end_angle":315,"start_angle10":45,"end_angle10":315,"bg_opa":0,"type":0,"val":90,"hidden":0,"adjustable":false}
{"comment":" ----------- Cool Indicator - set hidden to 0 (cool or dual) or 1 (heat or off)------------"}
{"comment":" ----------- Show Knob - set adjustable to true (cool) or false (dual, heat or off)------------"}
{"page":4,"id":19,"obj":"arc","x":52,"y":40,"w":376,"h":376,"rotation":90,"line_width":28,"line_width10":28,"line_color10":"#4473B0","bg_color20":"#FFFFFF","line_opa":0,"border_side":0,"border_width20":4,"border_color20":"#59A1FF","min":90,"max":190,"start_angle":45,"end_angle":315,"start_angle10":45,"end_angle10":315,"bg_opa":0,"type":2,"val":190,"hidden":0,"adjustable":false}
{"comment":" ----------- Current temp ------------"}
{"page":4,"id":20,"obj":"arc","x":52,"y":40,"w":376,"h":376,"rotation":90,"line_width":28,"line_width10":28,"line_opa":0,"line_opa10":0,"border_side":0,"border_side20":0,"min":1,"max":1,"start_angle":200,"end_angle":200,"bg_opa":0,"bg_opa20":128,"bg_color20":"#FFFFFF","pad_left20":-9,"pad_right20":-9,"pad_top20":-10,"pad_bottom20":-9,"val":1,"adjustable":true,"click":0}
{"comment":" ----------- Arc Fatfinger Protection ------------"}
{"page":4,"id":21,"obj":"obj","x":146,"y":120,"w":188,"h":248,"bg_opa":0,"bg_color":"#A14A1E","border_side":0,"radius":0}
{"page":4,"id":22,"obj":"obj","x":60,"y":368,"w":360,"h":36,"bg_opa":0,"bg_color":"#A14A1E","border_side":0,"radius":0}
{"comment":" ----------- Temp Control Buttons - Dual Mode ------------"}
{"page":4,"id":23,"obj":"btn","x":165,"y":260,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"false","border_color":"#FF6F22","border_width":1,"text":"\uE415","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"page":4,"id":24,"obj":"btn","x":165,"y":332,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"false","border_color":"#FF6F22","border_width":1,"text":"\uE374","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"page":4,"id":25,"obj":"btn","x":255,"y":260,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"false","border_color":"#59A1FF","border_width":1,"text":"\uE415","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"page":4,"id":26,"obj":"btn","x":255,"y":332,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"false","border_color":"#59A1FF","border_width":1,"text":"\uE374","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0}
{"comment":" ----------- Temp Control Buttons - Heat-Cool Mode ------------"}
{"page":4,"id":27,"obj":"btn","x":165,"y":332,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"false","border_color":"#FFFFFF","border_width":1,"text":"\uE374","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0,"hidden":1}
{"page":4,"id":28,"obj":"btn","x":255,"y":332,"h":60,"w":60,"radius":30,"border_side":15,"bg_color":"#181c18","toggle":"false","border_color":"#FFFFFF","border_width":1,"text":"\uE415","align":"center","text_color":"#FFFFFF","text_font":24,"bg_opa00":0,"hidden":1}
{"comment":" ----------- Mode Buttons ------------"}
{"page":4,"id":30,"obj":"obj","x":60,"y":406,"w":360,"h":36,"bg_color":"#232830","border_side":0,"radius":11}
{"page":4,"id":31,"obj":"btn","x":60,"y":406,"w":90,"h":36,"toggle":false,"radius":20,"bg_color":"#232830","bg_color02":"#A9A9A9","border_side":0,"text_font":"mdi24","text":"\uDB81\uDC25","text_color":"#ffffff","radius":11}
{"page":4,"id":32,"obj":"btn","x":150,"y":406,"w":90,"h":36,"toggle":false,"radius":20,"bg_color":"#232830","bg_color02":"#FF6F22","border_side":0,"text_font":"mdi24","text":"\uDB80\uDE38","text_color":"#ffffff","radius":11}
{"page":4,"id":33,"obj":"btn","x":240,"y":406,"w":90,"h":36,"toggle":false,"radius":20,"bg_color":"#232830","bg_color02":"#59A1FF","border_side":0,"text_font":"mdi24","text":"\uDB81\uDF17","text_color":"#ffffff","radius":11}
{"page":4,"id":34,"obj":"btn","x":330,"y":406,"w":90,"h":36,"toggle":false,"radius":20,"bg_color":"#232830","bg_color02":"#FFC107","border_side":0,"text_font":"mdi24","text":"\uDB86\uDE79","text_color":"#ffffff","radius":11}
{"comment":" ----------- Bottom Dots ------------"}
{"page":4,"id":95,"obj":"label","x":212,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":128}
{"page":4,"id":96,"obj":"label","x":228,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":128}
{"page":4,"id":98,"obj":"label","x":244,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":128}
{"page":4,"id":99,"obj":"label","x":260,"y":441,"h":32,"w":8,"text":"•","align":"center","text_color":"#FFFFFF","text_font":32,"text_opa":255}
{"comment":" ----------- Page 5 Layout ------------"}
{"comment":" ----------- White Screen ------------"}
{"page":5,"id":0,"next":1,"prev":4}
{"page":5,"id":2,"obj":"obj","x":0,"y":0,"h":480,"w":480,"radius":0,"bg_opa":255,"bg_color":"#FFFFFF","border_side":0}
{"comment":" ----------- All Pages Swipe ------------"}
{"page":0,"id":94,"obj":"obj","swipe":1,"x":0,"y":0,"h":480,"w":24,"opacity":0,"comment":"swipe-area-at-left"}
{"page":0,"id":95,"obj":"obj","swipe":1,"x":456,"y":0,"h":480,"w":24,"opacity":0,"comment":"swipe-area-at-right"}
{"page":0,"id":96,"obj":"obj","swipe":1,"x":0,"y":448,"h":32,"w":480,"opacity":0,"comment":"swipe-area-at-bottom"}
{"page":0,"id":97,"obj":"obj","swipe":1,"x":0,"y":0,"h":32,"w":480,"opacity":0,"comment":"swipe-area-at-top"}
{"page":0,"id":98,"obj":"btn","action":{"down": "page prev"},"x":64,"y":448,"w":32,"h":32,"text":"\uE141","text_color":"#FFFFFF","border_side":0,"text_font":36,"bg_opa":0,"text_opa":128}
{"page":0,"id":99,"obj":"btn","action":{"down": "page next"},"x":384,"y":448,"w":32,"h":32,"text":"\uE142","text_color":"#FFFFFF","border_side":0,"text_font":36,"bg_opa":0,"text_opa":128}configuration.yamlcamper_entry:
objects:
- obj: "p0b2"
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_home')] | default('\uE957') }}{{ state_attr('weather.forecast_home', 'temperature') }}°F"
- obj: "p0b4"
properties:
"text": "{% if states('sensor.node_17_node_status') != 'dead' %}
{% if states('sensor.air_conditioner_electric_consumption_v')|float >= 108 %}\U000F06A5
{% else %}\U000F06A6
{% endif %}
{% else %}\U000F06A6
{% endif %}"
- obj: "p0b5"
properties:
"text": "{% if states('sensor.camper_battery_battery_current') != 'unavailable' and states('sensor.camper_battery_battery_current') != 'unknown' and states('sensor.camper_battery_state_of_charge') != 'unavailable' and states('sensor.camper_battery_state_of_charge') != 'unknown' %}
{% if states('sensor.camper_battery_battery_current')|float == 0 and states('sensor.camper_battery_state_of_charge')|float == 100 %}\U000F0079
{% elif states('sensor.camper_battery_battery_current')|float >= 0 and 75 <= states('sensor.camper_battery_state_of_charge')|float <= 100 %}\U000F12A6
{% elif states('sensor.camper_battery_battery_current')|float >= 0 and 50 <= states('sensor.camper_battery_state_of_charge')|float < 75 %}\U000F12A5
{% elif states('sensor.camper_battery_battery_current')|float >= 0 and states('sensor.camper_battery_state_of_charge')|float < 50 %}\U000F12A4
{% elif states('sensor.camper_battery_battery_current')|float < 0 and states('sensor.camper_battery_state_of_charge')|float >= 75 %}\U000F12A3
{% elif states('sensor.camper_battery_battery_current')|float < 0 and 50 <= states('sensor.camper_battery_state_of_charge')|float < 75 %}\U000F12A2
{% elif states('sensor.camper_battery_battery_current')|float < 0 and states('sensor.camper_battery_state_of_charge')|float < 50 %}\U000F12A1
{% else %}\U000F008E
{% endif %}
{% endif %}"
"text_color": "{% if states('sensor.camper_battery_state_of_charge') != 'unavailable' and states('sensor.camper_battery_state_of_charge') != 'unknown' %}
{% if states('sensor.camper_battery_state_of_charge')|float >= 75 %}#FFFFFF
{% elif 50 <= states('sensor.camper_battery_state_of_charge')|float < 75 %}#FFF200
{% elif states('sensor.camper_battery_state_of_charge')|float < 50 %}#F20026
{% else %}#FFFFFF
{% endif %}
{% endif %}"
- obj: "p0b6"
properties:
"text_color": "{% if states('sensor.propane_tank_1') != 'unavailable' and states('sensor.propane_tank_1') != 'unknown' and states('sensor.propane_tank_2') != 'unavailable' and states('sensor.propane_tank_2') != 'unknown' %}
{% if (states('sensor.propane_tank_1') |float + states('sensor.propane_tank_2') |float)/2 >= 50 %}#FFFFFF
{% elif 25 <= (states('sensor.propane_tank_1') |float + states('sensor.propane_tank_2') |float)/2 < 50 %}#FFF200
{% elif (states('sensor.propane_tank_1') |float + states('sensor.propane_tank_2') |float)/2 < 25 %}#F20026
{% else %}#FFFFFF
{% endif %}
{% endif %}"
- obj: "p0b7"
properties:
"text_color": "{% if states('sensor.black_water_tank') != 'unavailable' and states('sensor.black_water_tank') != 'unknown' %}
{% if states('sensor.black_water_tank') |float < 50 %}#FFFFFF
{% elif 50 <= states('sensor.black_water_tank') |float < 75 %}#FFF200
{% elif states('sensor.black_water_tank') |float >= 75 %}#F20026
{% else %}#FFFFFF
{% endif %}
{% endif %}"
- obj: "p0b8"
properties:
"text_color": "{% if states('sensor.gray_water_tank') != 'unavailable' and states('sensor.gray_water_tank') != 'unknown' %}
{% if states('sensor.gray_water_tank') |float < 50 %}#FFFFFF
{% elif 50 <= states('sensor.gray_water_tank') |float < 75 %}#FFF200
{% elif states('sensor.gray_water_tank') |float >= 75 %}#F20026
{% else %}#FFFFFF
{% endif %}
{% endif %}"
- obj: "p0b9"
properties:
"text_color": "{% if states('sensor.fresh_water_tank') != 'unavailable' and states('sensor.gray_water_tank') != 'unknown' %}
{% if states('sensor.fresh_water_tank') |float >= 50 %}#FFFFFF
{% elif 25 <= states('sensor.fresh_water_tank') |float < 50 %}#FFF200
{% elif states('sensor.fresh_water_tank') |float > 25 %}#F20026
{% else %}#FFFFFF
{% endif %}
{% endif %}"
- obj: "p1b2" # Light brightness
properties:
"val": "{{ state_attr('light.camper_kitchen_kitchen_lights', 'brightness') if state_attr('light.camper_kitchen_kitchen_lights', 'brightness') != None else 0 }}"
event:
"changed":
- service: light.turn_on
data:
entity_id: light.camper_kitchen_kitchen_lights
brightness: "{{ val }}"
"up":
- service: light.turn_on
data:
entity_id: light.camper_kitchen_kitchen_lights
brightness: "{{ val }}"
- obj: "p1b3" # switch
properties:
"val": '{{ 1 if is_state("light.camper_kitchen_kitchen_lights", "on") else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.camper_kitchen_kitchen_lights", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.camper_kitchen_kitchen_lights"
- obj: "p1b5" # Light brightness
properties:
"val": "{{ state_attr('light.dining_lights_channel_1', 'brightness') if state_attr('light.dining_lights_channel_1', 'brightness') != None else 0 }}"
event:
"changed":
- service: light.turn_on
data:
entity_id: light.dining_lights_channel_1
brightness: "{{ val }}"
"up":
- service: light.turn_on
data:
entity_id: light.dining_lights_channel_1
brightness: "{{ val }}"
- obj: "p1b6" # switch
properties:
"val": '{{ 1 if is_state("light.dining_lights_channel_1", "on") else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.dining_lights_channel_1", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.dining_lights_channel_1"
- obj: "p1b8" # Light brightness
properties:
"val": "{{ state_attr('light.bedroom_lights_channel_1', 'brightness') if state_attr('light.bedroom_lights_channel_1', 'brightness') != None else 0 }}"
event:
"changed":
- service: light.turn_on
data:
entity_id: light.bedroom_lights_channel_1
brightness: "{{ val }}"
"up":
- service: light.turn_on
data:
entity_id: light.bedroom_lights_channel_1
brightness: "{{ val }}"
- obj: "p1b9" # switch
properties:
"val": '{{ 1 if is_state("light.bedroom_lights_channel_1", "on") else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.bedroom_lights_channel_1", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.bedroom_lights_channel_1"
- obj: "p1b11" # Light brightness
properties:
"val": '{{ 1 if is_state("light.camper_lighting_1", "on") else 0 }}'
- obj: "p1b13" # invisible switch
event:
"down":
- service: homeassistant.toggle
entity_id: "light.camper_lighting_1"
- obj: "p1b14" # switch
properties:
"val": '{{ 1 if is_state("light.camper_lighting_1", "on") else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.camper_lighting_1", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.camper_lighting_1"
- obj: "p1b15" # Fan switch
properties:
"val": '{{ 1 if is_state("fan.camper_fan_camper_fan_3", "on") else 0 }}'
- obj: "p1b17" # invisible switch
event:
"down":
- service: homeassistant.toggle
entity_id: "fan.camper_fan_camper_fan_3"
- obj: "p1b18" # switch
properties:
"val": '{{ 1 if is_state("fan.camper_fan_camper_fan_3", "on") else 0 }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "fan.camper_fan_camper_fan_3"
- obj: "p1b19" # TV switch
properties:
"val": '{{ 1 if is_state("switch.camper_tv_switch", "on") else 0 }}'
- obj: "p1b21" # invisible switch
event:
"down":
- service: homeassistant.toggle
entity_id: "switch.camper_tv_switch"
- obj: "p1b22" # switch
properties:
"val": '{{ 1 if is_state("switch.camper_tv_switch", "on") else 0 }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "switch.camper_tv_switch"
- obj: "p1b23" # All Off Switch
properties:
"val": '{{ 1 if is_state("light.all_lights", "on") or is_state("switch.all_switches", "on") else 0 }}'
"hidden": '{{ 0 if is_state("light.all_lights", "on") or is_state("switch.all_switches", "on") else 1 }}'
- obj: "p1b24" # label
properties:
"hidden": '{{ 0 if is_state("light.all_lights", "on") or is_state("switch.all_switches", "on") else 1 }}'
- obj: "p1b25" # invisible switch
properties:
"click": '{{ 1 if is_state("light.all_lights", "on") or is_state("switch.all_switches", "on") else 0 }}'
"hidden": '{{ 0 if is_state("light.all_lights", "on") or is_state("switch.all_switches", "on") else 1 }}'
event:
"down":
- service: openhasp.command
data:
keyword: p1b24.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p1b23.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p1b25.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: homeassistant.turn_off
entity_id:
- "light.all_lights"
- "switch.all_switches"
- obj: "p2b2" # Light brightness
properties:
"val": "{{ state_attr('light.camper_bunk_sconce_bunk_lights', 'brightness') if state_attr('light.camper_bunk_sconce_bunk_lights', 'brightness') != None else 0 }}"
event:
"changed":
- service: light.turn_on
data:
entity_id: light.camper_bunk_sconce_bunk_lights
brightness: "{{ val }}"
"up":
- service: light.turn_on
data:
entity_id: light.camper_bunk_sconce_bunk_lights
brightness: "{{ val }}"
- obj: "p2b3" # switch
properties:
"val": '{{ 1 if is_state("light.camper_bunk_sconce_bunk_lights", "on") else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.camper_bunk_sconce_bunk_lights", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.camper_bunk_sconce_bunk_lights"
- obj: "p2b5" # Fan level
properties:
"val": "{{ state_attr('fan.camper_bunk_fan', 'percentage') if state_attr('fan.camper_bunk_fan', 'percentage') != None else 0 }}"
event:
"changed":
- service: fan.set_percentage
data:
entity_id: fan.camper_bunk_fan
percentage: "{{ val }}"
"up":
- service: fan.set_percentage
data:
entity_id: fan.camper_bunk_fan
percentage: "{{ val }}"
- obj: "p2b6" # switch
properties:
"val": '{{ 1 if is_state("fan.camper_bunk_fan", "on") else 0 }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "fan.camper_bunk_fan"
- obj: "p2b8" # Light brightness
properties:
"val": '{{ 1 if is_state("light.bunk_ceiling_light", "on") else 0 }}'
- obj: "p2b10" # invisible switch
event:
"down":
- service: homeassistant.toggle
entity_id: "light.bunk_ceiling_light"
- obj: "p2b11" # switch
properties:
"val": '{{ 1 if is_state("light.bunk_ceiling_light", "on") else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.bunk_ceiling_light", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.bunk_ceiling_light"
- obj: "p2b12" # TV switch
properties:
"val": '{{ 1 if is_state("switch.bunk_tv_switch", "on") else 0 }}'
- obj: "p2b14" # invisible switch
event:
"down":
- service: homeassistant.toggle
entity_id: "switch.bunk_tv_switch"
- obj: "p2b15" # switch
properties:
"val": '{{ 1 if is_state("switch.bunk_tv_switch", "on") else 0 }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "switch.bunk_tv_switch"
- obj: "p2b16" # Light brightness
properties:
"val": '{{ 1 if is_state("light.lights_camper_bath", "on") else 0 }}'
- obj: "p2b18" # invisible switch
event:
"down":
- service: homeassistant.toggle
entity_id: "light.lights_camper_bath"
- obj: "p2b19" # switch
properties:
"val": '{{ 1 if is_state("light.lights_camper_bath", "on") else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.lights_camper_bath", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.lights_camper_bath"
- obj: "p2b20" # Fan switch
properties:
"val": '{{ 1 if is_state("fan.fan_camper_bath", "on") else 0 }}'
- obj: "p2b22" # invisible switch
event:
"down":
- service: homeassistant.toggle
entity_id: "fan.fan_camper_bath"
- obj: "p2b23" # switch
properties:
"val": '{{ 1 if is_state("fan.fan_camper_bath", "on") else 0 }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "fan.fan_camper_bath"
- obj: "p3b2" # Awning level
properties:
"val": "{{ state_attr('cover.camper_awning_outbound_bottom', 'current_position') if state_attr('cover.camper_awning_outbound_bottom', 'current_position') != None else 0 }}"
event:
"changed":
- service: cover.set_cover_position
data:
entity_id: cover.camper_awning_outbound_bottom
position: "{{ val }}"
"up":
- service: cover.set_cover_position
data:
entity_id: cover.camper_awning_outbound_bottom
position: "{{ val }}"
- obj: "p3b3" # switch
properties:
"val": '{{ 0 if is_state("cover.camper_awning_outbound_bottom", "closed") else 1 }}'
"text": '{{ "\uF11C" if is_state("cover.camper_awning_outbound_bottom", "open") else "\uF11E" | e }}'
event:
"down":
- service: cover.set_cover_position
data:
entity_id: "cover.camper_awning_outbound_bottom"
position: '{{ 0 if is_state("cover.camper_awning_outbound_bottom", "open") else 100 }}'
- obj: "p3b5" # Light brightness
properties:
"val": '{{ 1 if is_state("light.camper_lighting_2", "on") else 0 }}'
- obj: "p3b7" # invisible switch
event:
"down":
- service: homeassistant.toggle
entity_id: "light.camper_lighting_2"
- obj: "p3b8" # switch
properties:
"val": '{{ 1 if is_state("light.camper_lighting_2", "on") else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.camper_lighting_2", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.camper_lighting_2"
- obj: "p3b9" # Light brightness
properties:
"val": '{{ 1 if is_state("light.exterior_lighting_1", "on") else 0 }}'
- obj: "p3b11" # invisible switch
event:
"down":
- service: homeassistant.toggle
entity_id: "light.exterior_lighting_1"
- obj: "p3b12" # switch
properties:
"val": '{{ 1 if is_state("light.exterior_lighting_1", "on") else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.exterior_lighting_1", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.exterior_lighting_1"
- obj: "p3b13" # Light brightness
properties:
"val": '{{ 1 if is_state("light.exterior_lighting_2", "on") else 0 }}'
- obj: "p3b15" # invisible switch
event:
"down":
- service: homeassistant.toggle
entity_id: "light.exterior_lighting_2"
- obj: "p3b16" # switch
properties:
"val": '{{ 1 if is_state("light.exterior_lighting_2", "on") else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.exterior_lighting_2", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.exterior_lighting_2"
- obj: "p3b17" # Light brightness
properties:
"val": '{{ 1 if is_state("light.camper_relays_1", "on") else 0 }}'
- obj: "p3b19" # invisible switch
event:
"down":
- service: homeassistant.toggle
entity_id: "light.camper_relays_1"
- obj: "p3b20" # switch
properties:
"val": '{{ 1 if is_state("light.camper_relays_1", "on") else 0 }}'
"text": '{{ "\uE6E8" if is_state("light.camper_relays_1", "on") else "\uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.camper_relays_1"
- obj: "p3b21" # TV switch
properties:
"val": '{{ 1 if is_state("switch.patio_tv_switch", "on") else 0 }}'
- obj: "p3b23" # invisible switch
event:
"down":
- service: homeassistant.toggle
entity_id: "switch.patio_tv_switch"
- obj: "p3b24" # switch
properties:
"val": '{{ 1 if is_state("switch.patio_tv_switch", "on") else 0 }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "switch.patio_tv_switch"
- obj: "p4b4"
properties:
"text": "{% if state_attr('climate.hvac','hvac_action') is not none %}
{{ state_attr('climate.hvac','hvac_action') | title }}
{%- endif %}"
- obj: "p4b5"
properties:
"text": "{% if state_attr('climate.hvac','current_temperature') is not none %}
\uE50F {{ state_attr('climate.hvac','current_temperature') }}°F
{%- endif %}"
- obj: "p4b6"
properties:
"hidden": '{{ 1 if is_state("climate.hvac", "heat_cool") or is_state("climate.hvac", "off") else 0 }}'
"text": "{% if state_attr('climate.hvac','temperature') is not none %}
{{ state_attr('climate.hvac','temperature') }}°F
{%- endif %}"
- obj: "p4b7"
properties:
"hidden": '{{ 0 if is_state("climate.hvac", "heat_cool") else 1 }}'
"text": "{% if state_attr('climate.hvac','target_temp_low') is not none %}
{{ state_attr('climate.hvac','target_temp_low') }}°
{%- endif %}"
- obj: "p4b8"
properties:
"hidden": '{{ 0 if is_state("climate.hvac", "heat_cool") else 1 }}'
"text": "{% if state_attr('climate.hvac','target_temp_high') is not none %}
{{ state_attr('climate.hvac','target_temp_high') }}°
{%- endif %}"
- obj: "p4b16"
properties:
"hidden": '{{ 0 if is_state("climate.hvac", "heat_cool") else 1 }}'
- obj: "p4b17"
properties:
"hidden": '{{ 0 if is_state("climate.hvac", "heat_cool") else 1 }}'
- obj: "p4b18"
properties:
"hidden": '{{ 0 if is_state("climate.hvac", "heat_cool") or is_state("climate.hvac", "heat") else 1 }}'
"adjustable": '{{ 1 if is_state("climate.hvac", "heat") else 0 }}'
"val": "{% if is_state('climate.hvac','heat_cool') %}
{{ state_attr('climate.hvac','target_temp_low') * 2 }}
{% elif is_state('climate.hvac','heat') %}
{{ state_attr('climate.hvac','temperature') * 2 }}
{%- endif %}"
event:
"changed":
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
temperature: "{% if is_state('climate.hvac','heat') %}
{{ val/2 }}
{%- endif %}"
"up":
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
temperature: "{% if is_state('climate.hvac','heat') %}
{{ val/2 }}
{%- endif %}"
- obj: "p4b19"
properties:
"hidden": '{{ 0 if is_state("climate.hvac", "heat_cool") or is_state("climate.hvac", "cool") else 1 }}'
"adjustable": '{{ 1 if is_state("climate.hvac", "cool") else 0 }}'
"val": "{% if is_state('climate.hvac','heat_cool') %}
{{ state_attr('climate.hvac','target_temp_high') * 2 }}
{% elif is_state('climate.hvac','cool') %}
{{ state_attr('climate.hvac','temperature') * 2 }}
{%- endif %}"
event:
"changed":
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
temperature: "{% if is_state('climate.hvac','cool') %}
{{ val/2 }}
{%- endif %}"
"up":
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
temperature: "{% if is_state('climate.hvac','cool') %}
{{ val/2 }}
{%- endif %}"
- obj: "p4b20"
properties:
"start_angle": "{% if state_attr('climate.hvac','current_temperature') is not none %}
{{ (((state_attr('climate.hvac','current_temperature')-45)*5.4)+45) | round(0) }}
{%- endif %}"
"end_angle": "{% if state_attr('climate.hvac','current_temperature') is not none %}
{{ (((state_attr('climate.hvac','current_temperature')-45)*5.4)+45) | round(0) }}
{%- endif %}"
"val": 1
- obj: "p4b23"
properties:
"hidden": '{{ 0 if is_state("climate.hvac", "heat_cool") else 1 }}'
event:
"down":
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
target_temp_low: "{{ state_attr('climate.hvac','target_temp_low') + state_attr('climate.hvac','target_temp_step') | float(default=1)}}"
target_temp_high: "{% if (state_attr('climate.hvac','target_temp_low') + 4.5) > state_attr('climate.hvac','target_temp_high') %}
{{ state_attr('climate.hvac','target_temp_high') + state_attr('climate.hvac','target_temp_step') | float(default=1)}}
{% else %}
{{ state_attr('climate.hvac','target_temp_high') }}
{% endif %}"
- obj: "p4b24"
properties:
"hidden": '{{ 0 if is_state("climate.hvac", "heat_cool") else 1 }}'
event:
"down":
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
target_temp_low: "{{ state_attr('climate.hvac','target_temp_low') - state_attr('climate.hvac','target_temp_step') | float(default=1)}}"
target_temp_high: "{{ state_attr('climate.hvac','target_temp_high') }}"
- obj: "p4b25"
properties:
"hidden": '{{ 0 if is_state("climate.hvac", "heat_cool") else 1 }}'
event:
"down":
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
target_temp_low: "{{ state_attr('climate.hvac','target_temp_low') }}"
target_temp_high: "{{ state_attr('climate.hvac','target_temp_high') + state_attr('climate.hvac','target_temp_step') | float(default=1)}}"
- obj: "p4b26"
properties:
"hidden": '{{ 0 if is_state("climate.hvac", "heat_cool") else 1 }}'
event:
"down":
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
target_temp_low: "{% if (state_attr('climate.hvac','target_temp_low') + 4.5) > state_attr('climate.hvac','target_temp_high') %}
{{ state_attr('climate.hvac','target_temp_low') - state_attr('climate.hvac','target_temp_step') | float(default=1)}}
{% else %}
{{ state_attr('climate.hvac','target_temp_low') }}
{% endif %}"
target_temp_high: "{{ state_attr('climate.hvac','target_temp_high') - state_attr('climate.hvac','target_temp_step') | float(default=1)}}"
- obj: "p4b27"
properties:
"hidden": '{{ 1 if is_state("climate.hvac", "heat_cool") or is_state("climate.hvac", "off") else 0 }}'
event:
"down":
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
temperature: "{{ state_attr('climate.hvac','temperature') - state_attr('climate.hvac','target_temp_step') | float(default=1)}}"
- obj: "p4b28"
properties:
"hidden": '{{ 1 if is_state("climate.hvac", "heat_cool") or is_state("climate.hvac", "off") else 0 }}'
event:
"down":
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
temperature: "{{ state_attr('climate.hvac','temperature') + state_attr('climate.hvac','target_temp_step') | float(default=1)}}"
- obj: "p4b31"
properties:
"bg_color": '{{ "#A9A9A9" if is_state("climate.hvac", "off") else "#232830" }}'
event:
"up":
- service: climate.set_hvac_mode
target:
entity_id: climate.hvac
data:
hvac_mode: "off"
- obj: "p4b32"
properties:
"bg_color": '{{ "#FF6F22" if is_state("climate.hvac", "heat") else "#232830" }}'
event:
"up":
- service: openhasp.command
data:
keyword: p4b7.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p4b8.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p4b23.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p4b24.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p4b25.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p4b26.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: climate.set_hvac_mode
target:
entity_id: climate.hvac
data:
hvac_mode: "off"
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
temperature: 50
- service: climate.set_hvac_mode
target:
entity_id: climate.hvac
data:
hvac_mode: "heat"
- obj: "p4b33"
properties:
"bg_color": '{{ "#59A1FF" if is_state("climate.hvac", "cool") else "#232830" }}'
event:
"up":
- service: openhasp.command
data:
keyword: p4b7.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p4b8.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p4b23.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p4b24.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p4b25.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p4b26.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: climate.set_hvac_mode
target:
entity_id: climate.hvac
data:
hvac_mode: "off"
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
temperature: 85
- service: climate.set_hvac_mode
target:
entity_id: climate.hvac
data:
hvac_mode: "cool"
- obj: "p4b34"
properties:
"bg_color": '{{ "#FFC107" if is_state("climate.hvac", "heat_cool") else "#232830" }}'
event:
"up":
- service: openhasp.command
data:
keyword: p4b6.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p4b27.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: openhasp.command
data:
keyword: p4b28.hidden
parameters: "1"
target:
entity_id: openhasp.camper_entry
- service: climate.set_hvac_mode
target:
entity_id: climate.hvac
data:
hvac_mode: "off"
- service: climate.set_temperature
target:
entity_id: climate.hvac
data:
target_temp_low: 50
target_temp_high: 85
- service: climate.set_hvac_mode
target:
entity_id: climate.hvac
data:
hvac_mode: "heat_cool" |
Beta Was this translation helpful? Give feedback.
-
|
could you help me to adapt 800x480 your page of climate entity? thank you |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
3 replies
-
|
Your links point to nowere. |
Beta Was this translation helpful? Give feedback.
-
|
Works for me. |
Beta Was this translation helpful? Give feedback.
-
Sorry my bad. The old links only dont work. |
Beta Was this translation helpful? Give feedback.
-
|
@kdw2060 it is possible go back to page 1 (or whatever) when the X to close the popup is clicked? |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Please open a separate thread for support questions, this thread is for sharing designs only, thanks. |
Beta Was this translation helpful? Give feedback.
-
|
Here's my Workshop Air Quality display:
pages.jsonl{"page":0,"id":1,"obj":"label","x":705,"y":15,"w":40,"h":30,"text":"\uE5A9","text_color":"#eaeaea","text_font":24,"align":"right"}
{"page":0,"id":2,"obj":"obj","x":750,"y":38,"w":4,"h":3,"radius":0,"bg_color":"#eaeaea","bg_opa":0, "border_width":1}
{"page":0,"id":3,"obj":"obj","x":755,"y":34,"w":4,"h":7,"radius":0,"bg_color":"#eaeaea","bg_opa":0, "border_width":1}
{"page":0,"id":4,"obj":"obj","x":760,"y":30,"w":4,"h":11,"radius":0,"bg_color":"#eaeaea","bg_opa":0, "border_width":1}
{"page":0,"id":5,"obj":"obj","x":765,"y":26,"w":4,"h":15,"radius":0,"bg_color":"#eaeaea","bg_opa":0, "border_width":1}
{"page":1,"id":1,"obj":"obj","x":0,"y":0,"w":800,"h":480,"bg_color":"#000000","bg_opa":255,"border_width":0}
{"page":1,"id":2,"obj":"label","x":100,"y":15,"w":600,"h":40,"text":"Workshop Air Quality","text_color":"#eaeaea","text_font":28,"align":"center"}
{"page":1,"id":13,"obj":"obj","x":15,"y":75,"w":377,"h":315,"radius":10,"bg_color":"#2f2f2f","border_width":0}
{"page":1,"id":12,"obj":"label","x":15,"y":95,"w":377,"h":30,"text":"Air Quality Index","text_color":"#8a8a8a","text_font":28,"align":"center"}
{"page":1,"id":11,"obj":"arc","x":104,"y":140,"w":200,"h":200,"min":0,"max":500,"val":0,"start_angle":135,"end_angle":45,"bg_opa":0,"line_color":"#8a8a8a","line_width":12,"line_opa10":0,"bg_line_width":12, "border_width":0}
{"page":1,"id":10,"obj":"label","x":104,"y":315,"w":200,"h":80,"text":"---","text_color":"#8a8a8a","text_font":48,"align":"center"}
{"page":1,"id":20,"obj":"obj","x":407,"y":75,"w":378,"h":95,"radius":10,"bg_color":"#2f2f2f","border_width":0}
{"page":1,"id":21,"obj":"label","x":407,"y":107,"w":104,"h":30,"text":"VOC","text_color":"#8a8a8a","text_font":28,"align":"right"}
{"page":1,"id":22,"obj":"label","x":511,"y":107,"w":80,"h":30,"text":"---","text_color":"#8a8a8a","text_font":28,"align":"right"}
{"page":1,"id":24,"obj":"label","x":658,"y":107,"w":120,"h":30,"text":"","text_color":"#8a8a8a","text_font":28,"align":"left"}
{"page":1,"id":30,"obj":"obj","x":407,"y":185,"w":378,"h":95,"radius":10,"bg_color":"#2f2f2f","border_width":0}
{"page":1,"id":31,"obj":"label","x":407,"y":217,"w":104,"h":30,"text":"PM2.5","text_color":"#8a8a8a","text_font":28,"align":"right"}
{"page":1,"id":32,"obj":"label","x":511,"y":217,"w":80,"h":30,"text":"---","text_color":"#8a8a8a","text_font":28,"align":"right"}
{"page":1,"id":33,"obj":"label","x":596,"y":227,"w":60,"h":25,"text":"µg/m³","text_color":"#8a8a8a","text_font":16,"align":"left"}
{"page":1,"id":34,"obj":"label","x":658,"y":217,"w":120,"h":30,"text":"","text_color":"#8a8a8a","text_font":28,"align":"left"}
{"page":1,"id":35,"obj":"obj","x":407,"y":295,"w":378,"h":95,"radius":10,"bg_color":"#2f2f2f","border_width":0}
{"page":1,"id":36,"obj":"label","x":407,"y":327,"w":104,"h":30,"text":"CO2","text_color":"#8a8a8a","text_font":28,"align":"right"}
{"page":1,"id":37,"obj":"label","x":511,"y":327,"w":80,"h":30,"text":"---","text_color":"#8a8a8a","text_font":28,"align":"right"}
{"page":1,"id":38,"obj":"label","x":596,"y":337,"w":60,"h":25,"text":"ppm","text_color":"#8a8a8a","text_font":16,"align":"left"}
{"page":1,"id":39,"obj":"label","x":658,"y":327,"w":120,"h":30,"text":"","text_color":"#8a8a8a","text_font":28,"align":"left"}
{"page":1,"id":40,"obj":"obj","x":15,"y":405,"w":181,"h":60,"radius":10,"bg_color":"#2f2f2f","border_width":0}
{"page":1,"id":41,"obj":"label","x":15,"y":408,"w":181,"h":22,"text":"\uE50F Temperature","text_color":"#8a8a8a","text_font":16,"align":"center"}
{"page":1,"id":42,"obj":"label","x":15,"y":430,"w":181,"h":30,"text":"--°C","text_color":"#8a8a8a","text_font":28,"align":"center"}
{"page":1,"id":43,"obj":"label","x":161,"y":430,"w":30,"h":30,"text":"","text_color":"#8a8a8a","text_font":28,"align":"right"}
{"page":1,"id":50,"obj":"obj","x":211,"y":405,"w":181,"h":60,"radius":10,"bg_color":"#2f2f2f","border_width":0}
{"page":1,"id":51,"obj":"label","x":211,"y":408,"w":181,"h":22,"text":"\uE58E Humidity","text_color":"#8a8a8a","text_font":16,"align":"center"}
{"page":1,"id":52,"obj":"label","x":241,"y":430,"w":120,"h":30,"text":"--%","text_color":"#8a8a8a","text_font":28,"align":"center"}
{"page":1,"id":53,"obj":"label","x":357,"y":430,"w":30,"h":30,"text":"","text_color":"#8a8a8a","text_font":28,"align":"right"}
{"page":1,"id":60,"obj":"obj","x":407,"y":405,"w":181,"h":60,"radius":10,"bg_color":"#2f2f2f","border_width":0}
{"page":1,"id":61,"obj":"label","x":407,"y":408,"w":181,"h":22,"text":"\uE58E AMS Humidity","text_color":"#8a8a8a","text_font":16,"align":"center"}
{"page":1,"id":62,"obj":"label","x":437,"y":430,"w":120,"h":30,"text":"--%","text_color":"#8a8a8a","text_font":28,"align":"center"}
{"page":1,"id":63,"obj":"label","x":553,"y":430,"w":30,"h":30,"text":"","text_color":"#8a8a8a","text_font":28,"align":"right"}
{"page":1,"id":90,"obj":"btn","x":603,"y":405,"w":182,"h":60,"radius":10,"bg_color":"#0083cc","text":"Controls \uE142","text_color":"#ffffff","text_font":20,"action": {"down": "page 2"}}
{"page":2,"id":1,"obj":"obj","x":0,"y":0,"w":800,"h":480,"bg_color":"#000000","bg_opa":255,"border_width":0}
{"page":2,"id":2,"obj":"btn","x":20,"y":15,"w":100,"h":40,"radius":8,"bg_color":"#0083cc","text":"\uE141 Back","text_color":"#ffffff","text_font":18,"action": {"down": "page 1"}}
{"page":2,"id":3,"obj":"label","x":100,"y":15,"w":600,"h":40,"text":"Controls","text_color":"#eaeaea","text_font":28,"align":"center"}
{"page":2,"id":10,"obj":"obj","x":92,"y":95,"w":300,"h":180,"radius":15,"bg_color":"#2f2f2f","border_width":0}
{"page":2,"id":11,"obj":"label","x":92,"y":110,"w":300,"h":30,"text":"\uE438 Panel Heater","text_color":"#eaeaea","text_font":18,"align":"center"}
{"page":2,"id":12,"obj":"switch","x":207,"y":150,"w":70,"h":40,"bg_color":"#3d3d3d","bg_color10":"#4ecca3","radius":20}
{"page":2,"id":13,"obj":"label","x":92,"y":201,"w":300,"h":24,"text":"---","text_color":"#8a8a8a","text_font":18,"align":"center"}
{"page":2,"id":14,"obj":"slider","x":112,"y":235,"w":260,"h":20,"min":10,"max":30,"val":20,"bg_color":"#3d3d3d","bg_color10":"#8a8a8a","radius":10}
{"page":2,"id":20,"obj":"obj","x":407,"y":95,"w":300,"h":180,"radius":15,"bg_color":"#2f2f2f","border_width":0}
{"page":2,"id":21,"obj":"label","x":407,"y":110,"w":300,"h":30,"text":"\uE438 Underfloor","text_color":"#eaeaea","text_font":18,"align":"center"}
{"page":2,"id":22,"obj":"switch","x":522,"y":150,"w":70,"h":40,"bg_color":"#3d3d3d","bg_color10":"#4ecca3","radius":20}
{"page":2,"id":23,"obj":"label","x":407,"y":201,"w":300,"h":24,"text":"---","text_color":"#8a8a8a","text_font":18,"align":"center"}
{"page":2,"id":24,"obj":"slider","x":427,"y":235,"w":260,"h":20,"min":10,"max":30,"val":20,"bg_color":"#3d3d3d","bg_color10":"#8a8a8a","radius":10}
{"page":2,"id":30,"obj":"obj","x":92,"y":290,"w":300,"h":150,"radius":15,"bg_color":"#2f2f2f","border_width":0}
{"page":2,"id":31,"obj":"label","x":92,"y":305,"w":300,"h":30,"text":"\uE210 Fan","text_color":"#eaeaea","text_font":20,"align":"center"}
{"page":2,"id":32,"obj":"switch","x":207,"y":345,"w":70,"h":40,"bg_color":"#3d3d3d","bg_color10":"#4ecca3","radius":20}
{"page":2,"id":33,"obj":"label","x":92,"y":400,"w":300,"h":24,"text":"---","text_color":"#8a8a8a","text_font":18,"align":"center"}
{"page":2,"id":40,"obj":"obj","x":407,"y":290,"w":300,"h":150,"radius":15,"bg_color":"#2f2f2f","border_width":0}
{"page":2,"id":41,"obj":"label","x":407,"y":305,"w":300,"h":30,"text":"\uE58E Dehumidifier","text_color":"#eaeaea","text_font":18,"align":"center"}
{"page":2,"id":42,"obj":"switch","x":522,"y":345,"w":70,"h":40,"bg_color":"#3d3d3d","bg_color10":"#4ecca3","radius":20}
{"page":2,"id":43,"obj":"label","x":407,"y":400,"w":300,"h":24,"text":"---","text_color":"#8a8a8a","text_font":18,"align":"center"}configuration.yaml# Home Assistant OpenHASP Configuration for Workshop Display
# Add this to your configuration.yaml with:
# openhasp: !include openhasp.yaml
workshop:
objects:
# ============================================================================
# PAGE 1: AIR QUALITY DASHBOARD
# ============================================================================
# Overall Air Quality Status Text (p1b10)
- obj: "p1b10"
properties:
"text": >
{{ state_attr('sensor.workshop_air_quality', 'quality_label') | title }}
"text_color": >
{% set quality = state_attr('sensor.workshop_air_quality', 'quality_label') %}
{% if quality == 'great' %} #4ecca3
{% elif quality == 'ok' %} #90ee90
{% elif quality == 'caution' %} #ffc107
{% elif quality == 'bad' %} #ff9800
{% else %} #ff5252
{% endif %}
# Air Quality Score Arc Gauge (p1b11)
- obj: "p1b11"
properties:
"val": "{{ states('sensor.workshop_air_quality') | int(100) }}"
"line_opa10": 255
"line_color10": >
{% set quality = state_attr('sensor.workshop_air_quality', 'quality_label') %}
{% if quality == 'great' %} #4ecca3
{% elif quality == 'ok' %} #90ee90
{% elif quality == 'caution' %} #ffc107
{% elif quality == 'bad' %} #ff9800
{% else %} #ff5252
{% endif %}
# VOC Value (p1b22)
- obj: "p1b22"
properties:
"text": "{{ states('sensor.apollo_air_1_080cd8_sen55_voc') | round(0) }}"
"text_color": "#eaeaea"
# VOC Quality Status (p1b24)
- obj: "p1b24"
properties:
"text": "{{ states('sensor.apollo_air_1_080cd8_voc_quality') | title }}"
"text_color": >
{% set voc = states('sensor.apollo_air_1_080cd8_sen55_voc') | float(0) %}
{% if voc < 80 %} #4ecca3
{% elif voc < 150 %} #90ee90
{% elif voc < 250 %} #ffc107
{% elif voc < 400 %} #ff9800
{% else %} #ff5252
{% endif %}
# PM2.5 Value (p1b32)
- obj: "p1b32"
properties:
"text": "{{ states('sensor.apollo_air_1_080cd8_pm_2_5mm_weight_concentration') | round(0) }}"
"text_color": "#eaeaea"
# PM2.5 Quality Status (p1b34)
- obj: "p1b34"
properties:
"text": >
{% set pm25 = states('sensor.apollo_air_1_080cd8_pm_2_5mm_weight_concentration') | float(0) %}
{% if pm25 <= 5 %} Excellent
{% elif pm25 <= 15 %} Good
{% elif pm25 <= 35 %} Moderate
{% elif pm25 <= 55 %} Poor
{% else %} Hazardous
{% endif %}
"text_color": >
{% set pm25 = states('sensor.apollo_air_1_080cd8_pm_2_5mm_weight_concentration') | float(0) %}
{% if pm25 <= 5 %} #4ecca3
{% elif pm25 <= 15 %} #90ee90
{% elif pm25 <= 35 %} #ffc107
{% elif pm25 <= 55 %} #ff9800
{% else %} #ff5252
{% endif %}
# CO2 Value (p1b37)
- obj: "p1b37"
properties:
"text": "{{ states('sensor.apollo_air_1_080cd8_co2') | round(0) }}"
"text_color": "#eaeaea"
# CO2 Quality Status (p1b39)
- obj: "p1b39"
properties:
"text": >
{% set co2 = states('sensor.apollo_air_1_080cd8_co2') | float(0) %}
{% if co2 <= 600 %} Excellent
{% elif co2 <= 800 %} Good
{% elif co2 <= 1000 %} Moderate
{% elif co2 <= 1500 %} Poor
{% else %} Bad
{% endif %}
"text_color": >
{% set co2 = states('sensor.apollo_air_1_080cd8_co2') | float(0) %}
{% if co2 <= 600 %} #4ecca3
{% elif co2 <= 800 %} #90ee90
{% elif co2 <= 1000 %} #ffc107
{% elif co2 <= 1500 %} #ff9800
{% else %} #ff5252
{% endif %}
# Temperature (p1b42)
- obj: "p1b42"
properties:
"text": "{{ states('sensor.apollo_air_1_080cd8_sen55_temperature') | round(1) }}°C"
"text_color": "#eaeaea"
# Temperature Status Icon (p1b43)
- obj: "p1b43"
properties:
"text": >
{% set temp = states('sensor.apollo_air_1_080cd8_sen55_temperature') | float(0) %}
{% if temp < 10 %}{{ "\uE717" }}
{% elif temp <= 24 %}{{ "\uE12C" }}
{% else %}{{ "\uE599" }}
{% endif %}
"text_color": >
{% set temp = states('sensor.apollo_air_1_080cd8_sen55_temperature') | float(0) %}
{% if temp < 10 %} #2196f3
{% elif temp <= 24 %} #4ecca3
{% else %} #ff5252
{% endif %}
# Workshop Humidity (p1b52)
- obj: "p1b52"
properties:
"text": "{{ states('sensor.apollo_air_1_080cd8_sen55_humidity') | round(0) }}%"
"text_color": "#eaeaea"
# Workshop Humidity Status Icon (p1b53)
- obj: "p1b53"
properties:
"text": >
{% set humidity = states('sensor.apollo_air_1_080cd8_sen55_humidity') | float(0) %}
{% if humidity <= 30 %}{{ "\uE045" }}
{% elif humidity <= 60 %}{{ "\uE12C" }}
{% else %}{{ "\uE05D" }}
{% endif %}
"text_color": >
{% set humidity = states('sensor.apollo_air_1_080cd8_sen55_humidity') | float(0) %}
{% if humidity <= 30 %} #ffc107
{% elif humidity <= 60 %} #4ecca3
{% else %} #ff5252
{% endif %}
# AMS Humidity (p1b62)
- obj: "p1b62"
properties:
"text": "{{ states('sensor.ams_humidity') | round(0) }}%"
"text_color": "#eaeaea"
# AMS Humidity Status Icon (p1b53)
- obj: "p1b63"
properties:
"text": >
{% set humidity = states('sensor.ams_humidity') | float(0) %}
{% if humidity <= 10 %}{{ "\uE12C" }}
{% else %}{{ "\uE05D" }}
{% endif %}
"text_color": >
{% set humidity = states('sensor.ams_humidity') | float(0) %}
{% if humidity <= 10 %} #4ecca3
{% elif humidity <= 20 %} #ffc107
{% else %} #ff5252
{% endif %}
# ============================================================================
# PAGE 2: CONTROLS
# ============================================================================
# Panel Heating Switch (p2b12)
- obj: "p2b12"
properties:
"val": "{{ 1 if is_state('climate.workshop_heater', 'heat') else 0 }}"
event:
"up":
- choose:
- conditions:
- condition: template
value_template: "{{ val == 1 }}"
sequence:
- service: climate.turn_on
data:
entity_id: climate.workshop_heater
default:
- service: climate.turn_off
data:
entity_id: climate.workshop_heater
# Panel Heating Status Label (p2b13)
- obj: "p2b13"
properties:
"text": >
{% if is_state('climate.workshop_heater', 'heat') %}
{{ state_attr('climate.workshop_heater', 'temperature') | round(0) }}°C • {% if state_attr('climate.workshop_heater', 'current_temperature') | float(0) >= state_attr('climate.workshop_heater', 'temperature') | float(0) %}Idle{% else %}{{ "\uE238" }} Heating{% endif %}
{% else %}
Off
{% endif %}
"text_color": >
{% if is_state('climate.workshop_heater', 'heat') and state_attr('climate.workshop_heater', 'current_temperature') | float(0) < state_attr('climate.workshop_heater', 'temperature') | float(0) %}
#ff5252
{% else %}
#eaeaea
{% endif %}
# Panel Heating Slider (p2b14)
- obj: "p2b14"
properties:
"val": "{{ state_attr('climate.workshop_heater', 'temperature') | int(20) }}"
"bg_color10": "{{ '#4ecca3' if is_state('climate.workshop_heater', 'heat') else '#8a8a8a' }}"
event:
"up":
- service: climate.set_temperature
data:
entity_id: climate.workshop_heater
temperature: "{{ val }}"
# Underfloor Heating Switch (p2b22)
- obj: "p2b22"
properties:
"val": "{{ 1 if is_state('climate.underfloor_heating', 'heat_cool') else 0 }}"
event:
"up":
- choose:
- conditions:
- condition: template
value_template: "{{ val == 1 }}"
sequence:
- service: climate.turn_on
data:
entity_id: climate.underfloor_heating
default:
- service: climate.turn_off
data:
entity_id: climate.underfloor_heating
# Underfloor Heating Status Label (p2b23)
- obj: "p2b23"
properties:
"text": >
{% if is_state('climate.underfloor_heating', 'heat_cool') %}
{{ state_attr('climate.underfloor_heating', 'temperature') | round(0) }}°C • {% if state_attr('climate.underfloor_heating', 'current_temperature') | float(0) >= state_attr('climate.underfloor_heating', 'temperature') | float(0) %}Idle{% else %}{{ "\uE238" }} Heating{% endif %}
{% else %}
Off
{% endif %}
"text_color": >
{% if is_state('climate.underfloor_heating', 'heat_cool') and state_attr('climate.underfloor_heating', 'current_temperature') | float(0) < state_attr('climate.underfloor_heating', 'temperature') | float(0) %}
#ff5252
{% else %}
#eaeaea
{% endif %}
# Underfloor Heating Slider (p2b24)
- obj: "p2b24"
properties:
"val": "{{ state_attr('climate.underfloor_heating', 'temperature') | int(20) }}"
"bg_color10": "{{ '#4ecca3' if is_state('climate.underfloor_heating', 'heat_cool') else '#8a8a8a' }}"
event:
"up":
- service: climate.set_temperature
data:
entity_id: climate.underfloor_heating
temperature: "{{ val }}"
# Fan Switch (p2b32)
- obj: "p2b32"
properties:
"val": "{{ 1 if is_state('switch.workshop_fan', 'on') else 0 }}"
event:
"up":
- service: switch.toggle
data:
entity_id: switch.workshop_fan
# Fan Status Label (p2b33)
- obj: "p2b33"
properties:
"text": "{{ 'On' if is_state('switch.workshop_fan', 'on') else 'Off' }}"
"text_color": "{{ '#4ecca3' if is_state('switch.workshop_fan', 'on') else '#eaeaea' }}"
# Dehumidifier Switch (p2b42)
- obj: "p2b42"
properties:
"val": "{{ 1 if is_state('switch.workshop_dehumidifier', 'on') else 0 }}"
event:
"up":
- service: switch.toggle
data:
entity_id: switch.workshop_dehumidifier
# Dehumidifier Status Label (p2b43)
- obj: "p2b43"
properties:
"text": "{{ 'On' if is_state('switch.workshop_dehumidifier', 'on') else 'Off' }}"
"text_color": "{{ '#4ecca3' if is_state('switch.workshop_dehumidifier', 'on') else '#eaeaea' }}"
# ============================================================================
# PAGE 0: STATUS - SIGNAL STRENGTH BARS
# ============================================================================
# Signal Strength Bar 1 - Show if RSSI ≥ -85 (any connection) (p0b2)
- obj: "p0b2"
properties:
"bg_opa": >
{% set rssi = state_attr('openhasp.workshop', 'rssi') | int(-100) %}
{% if rssi >= -85 %} 255 {% else %} 0 {% endif %}
# Signal Strength Bar 2 - Show if RSSI ≥ -60 (fair or better) (p0b3)
- obj: "p0b3"
properties:
"bg_opa": >
{% set rssi = state_attr('openhasp.workshop', 'rssi') | int(-100) %}
{% if rssi >= -60 %} 255 {% else %} 0 {% endif %}
# Signal Strength Bar 3 - Show if RSSI ≥ -50 (good or better) (p0b4)
- obj: "p0b4"
properties:
"bg_opa": >
{% set rssi = state_attr('openhasp.workshop', 'rssi') | int(-100) %}
{% if rssi >= -50 %} 255 {% else %} 0 {% endif %}
# Signal Strength Bar 4 - Show if RSSI > -50 (excellent only) (p0b5)
- obj: "p0b5"
properties:
"bg_opa": >
{% set rssi = state_attr('openhasp.workshop', 'rssi') | int(-100) %}
{% if rssi > -50 %} 255 {% else %} 0 {% endif %}
|
Beta Was this translation helpful? Give feedback.
2 replies
-
|
what sensor do you use? |
Beta Was this translation helpful? Give feedback.
-
|
Nice screens! |
Beta Was this translation helpful? Give feedback.
-
|
Hi everyone, I’ve been playing around with Home Assistant and openHASP a bit lately. Here is my Anker Solix display in 480x480. I bought the display on AliExpress: For flashing, I used the web.esphome.io page. You can find the pre-compiled binary file for openHASP on the nightly.openhasp.com website (Guition ESP32-S3-4848S040). 
pages.jsonl// ----------- NEUE SEITE 1 -----------
{"page":1,"id":1,"obj":"obj","x":0,"y":0,"w":480,"h":480,"bg_color":"#FFFFFF","click":0}
{"page":1,"id":60,"obj":"img","src":"L:/anker_neu.bin","x":0,"y":0,"action":{"down": "page next"},"click":1}
{"page":1,"id":14,"obj":"spinner","x":275,"y":262,"w":15,"h":15,"line_width":2,"line_color":"#008080","line_color10":"#00D2FF"}
{"page":1,"id":17,"obj":"spinner","x":232,"y":273,"w":15,"h":15,"line_width":2,"line_color":"#008080","line_color10":"#00D2FF"}
{"page":1,"id":50,"obj":"bar","x":209,"y":255,"w":20,"h":45,"val":100,"min":0,"max":100,"bg_opa":0,"bg_color_bar":"#008080","bg_color_bar2":"#00D2FF"}
{"page":1,"id":51,"obj":"bar","x":250,"y":245,"w":20,"h":45,"val":100,"min":0,"max":100,"bg_opa":0,"bg_color_bar":"#008080","bg_color_bar2":"#00D2FF"}
{"page":1,"id":61,"obj":"label","x":95,"y":23,"w":75,"h":35,"text":" W","text_color":"#000000","align":2,"text_font":20,"click":0}
{"page":1,"id":70,"obj":"label","x":35,"y":320,"w":170,"h":80,"text":"Eric Solarbank 2","text_color":"#008080","align":2,"text_font":23,"click":0}
{"page":1,"id":62,"obj":"label","x":318,"y":23,"w":75,"h":50,"text":" W","text_color":"#000000","align":2,"text_font":20,"click":0}
{"page":1,"id":63,"obj":"label","x":40,"y":350,"w":75,"h":35,"text":" %","text_color":"#000000","align":2,"text_font":20,"click":0}
{"page":1,"id":65,"obj":"label","x":120,"y":350,"w":75,"h":35,"text":" W","text_color":"#000000","align":2,"text_font":20,"click":0}
{"page":1,"id":69,"obj":"label","x":240,"y":300,"w":75,"h":35,"text":" W","text_color":"#008080","align":2,"text_font":20,"click":0}
{"page":1,"id":64,"obj":"label","x":340,"y":350,"w":75,"h":50,"text":" W","text_color":"#000000","align":2,"text_font":20,"click":0}
{"page":1,"id":66,"obj":"label","x":60,"y":440,"w":75,"h":35,"text":" €","text_color":"#000000","align":2,"text_font":20,"click":0}
{"page":1,"id":67,"obj":"label","x":185,"y":440,"w":85,"h":35,"text":" kg","text_color":"#000000","align":2,"text_font":20,"click":0}
{"page":1,"id":68,"obj":"label","x":328,"y":440,"w":100,"h":35,"text":" kWh","text_color":"#000000","align":2,"text_font":20,"click":0}
{"page":1,"id":0,"next":1,"prev":1}configuration.yamlopenhasp:
plate:
objects:
# --- NEUE SEITE 1 (Anker Eric) ---
- obj: "p1b61"
properties:
"text": "{{ states('sensor.gesamte_solarleistung') }} W"
- obj: "p1b62"
properties:
"text": "{{ states('sensor.aktueller_hausverbrauch') }} W"
- obj: "p1b50" # Der linke Balken (ID 50)
properties:
"val": "{{ states('sensor.solar_wattwarnsinn_ladestand') | int(0) }}"
- obj: "p1b51" # Der rechte Balken (ID 51)
properties:
"val": "{{ states('sensor.solar_wattholle_ladestand') | int(0) }}"
- obj: "p1b14" # Seite 1, ID 14 (Dein Spinner)
properties:
"hidden": "{{ states('sensor.solar_wattwarnsinn_ladestand') | int(0) == 100 }}"
- obj: "p1b17" # Seite 1, ID 17 (Dein Spinner)
properties:
"hidden": "{{ states('sensor.solar_wattholle_ladestand') | int(0) == 100 }}"
- obj: "p1b63"
properties:
"text": "{{ states('sensor.gesamtladeestand_akkus') }}%"
- obj: "p1b64"
properties:
"text": "{{ states('sensor.gesamte_ac_hausausgabe') }} W"
- obj: "p1b65"
properties:
"text": "{{ states('sensor.einspeiseleistung_gesamt') }} W"
- obj: "p1b66"
properties:
"text": "{{ states('sensor.gesamte_kostenersparnis') }} €"
- obj: "p1b67"
properties:
"text": "{{ states('sensor.co2_einsparung') }} kg"
- obj: "p1b68"
properties:
"text": "{{ states('sensor.ertrag_gesamt') }} kWh"
- obj: "p1b69"
properties:
"text": "{{ states('sensor.dc_ausgangsleistung') }} W" |
Beta Was this translation helpful? Give feedback.
3 replies
-
|
Beautiful! Thanks for sharing. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks 💯 |
Beta Was this translation helpful? Give feedback.
-
|
Awesome. Congratulation to this nice configuration 👍 |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
and others
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Showcase your favorite layouts built with openHASP!
Put your JSONL code in a block like this:
Put your YAMLcode in a block like this:
It will show up as expandable sections:
pages.jsonl
{Your JSONL code goes here...}configuration.yaml
{Your YAML code goes here...}Beta Was this translation helpful? Give feedback.
All reactions