Hallo zusammen,
Ich dachte es wäre mal nett ein paar Bespiele mit Code zu sammeln.
Ich habe gesehen, es gibt so etwas schon bei Github (Github Designbeispiele).
Ich dachte es wäre nett bei Rückfragen vielleicht auf Deutsch fragen zu können.
Wenn das Thema hier unpassend ist bitte Bescheid geben, dann lösche ich es wieder.
Ich fange einfach mal an:
Display: Sunton ESP32-8048S070
Bildschirmschoner (Seite 3):
Startseite (Seite 1)
pages.jasonl
{"comment":"---------- Uhrzeit&Datum&Temperatur ---------------------------------------------------------------------------------"}
{"page":0,"id":1,"obj":"label","x":660,"y":5,"h":60,"w":100,"text":"00.0","align":2,"bg_color":"#2C3E50"}
{"page":0,"id":2,"obj":"label","x":760,"y":5,"h":60,"w":100,"text":"°C","align":0,"bg_color":"#2C3E50"}
{"page":0,"id":3,"obj":"label","x":3,"y":5,"h":60,"w":100,"text":"00:00","align":0,"bg_color":"#2C3E50"}
{"page":0,"id":4,"obj":"label","x":250,"y":10,"h":21,"w":300,"text":"Donnerstag, der DD September JJJJ","align":1,"bg_color":"#2C3E50","text_font":16}
{"comment":"---------- Seitennavigation ---------------------------------------------------------------------------------"}
{"page":0,"id":5,"obj":"btn","action":"prev","x":0,"y":435,"w":265,"h":45,"bg_color":"#2C3E50","text":"\uE141","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":28,"bg_opa":75}
{"page":0,"id":6,"obj":"btn","action":"back","x":267,"y":435,"w":265,"h":45,"bg_color":"#2C3E50","text":"\uE2DC","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":22,"bg_opa":75}
{"page":0,"id":7,"obj":"btn","action":"next","x":535,"y":435,"w":265,"h":45,"bg_color":"#2C3E50","text":"\uE142","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":28,"bg_opa":75}
{"page":1,"comment":"---------- Seite 1--------------------------------------------------- -----------------------------------------------------------------------------------------"}
{"id":99,"obj":"img","src":"L:/large.png","auto_size":1,"h":960,"w":1600,"zoom":256,"x":0,"y":0,swipe:1}
{"comment":"Buttons und Mediaplayer Light Hintergrund--------"}
{"id":10,"obj":"obj","enabled":true,"x":20,"y":65,"w":360,"h":360,"bg_opa":75,"clip_corner":1,"border_post":1,"border_color":"#87CEFF","border_width":2,"radius":10,"radius1":10,"radius2":10}
{"comment":"Buttons----------------"}
{"id":11,"obj":"btn","x":5,"y":5,"w":110,"h":65,"parentid":10,"toggle":true,"text":"\uE335","text_font":18,"align":1,"bg_opa":75,"bg_color01":"#FFFFFF","text_color":"#2C3E50","text_color01":"#2C3E50"}
{"id":12,"obj":"btn","x":125,"y":5,"w":110,"h":65,"parentid":10,"toggle":true,"text":"\uE335","text_font":18,"align":1,"bg_opa":75,"bg_color01":"#FFFFFF","text_color":"#2C3E50","text_color01":"#2C3E50"}
{"id":13,"obj":"btn","x":245,"y":5,"w":110,"h":65,"parentid":10,"toggle":true,"text":"\uE335","text_font":18,"align":1,"bg_opa":75,"bg_color01":"#FFFFFF","text_color":"#2C3E50","text_color01":"#2C3E50"}
{"id":14,"obj":"btn","x":5,"y":75,"w":110,"h":65,"parentid":10,"toggle":true,"text":"\uE335","text_font":18,"align":1,"bg_opa":75,"bg_color01":"#FFFFFF","text_color":"#2C3E50","text_color01":"#2C3E50"}
{"id":15,"obj":"btn","x":125,"y":75,"w":110,"h":65,"parentid":10,"toggle":true,"text":"\uE335","text_font":18,"align":1,"bg_opa":75,"bg_color01":"#FFFFFF","text_color":"#2C3E50","text_color01":"#2C3E50"}
{"id":16,"obj":"btn","x":245,"y":75,"w":110,"h":65,"parentid":10,"toggle":true,"text":"\uE335","text_font":18,"align":1,"bg_opa":75,"bg_color01":"#FFFFFF","text_color":"#2C3E50","text_color01":"#2C3E50"}
{"comment":"Media Player Light------------------"}
{"id":17,"obj":"obj","x":5,"y":145,"w":350,"h":135,"parentid":10,"enabled":true,"bg_opa":75,"bg_color":"#FFFFFF","border_color":"#87CEFF","border_width":2,"radius":10,"radius1":10,"radius2":10}
{"comment":"Title & Artist text"}
{"id":18,"obj":"label","enabled":false,"x":35,"y":-02,"w":315,"h":32,"parentid":17,"bg_opa":0,"bg_color":"#000000","mode":"break","text":"Artistpoiupoipoiupoiupoiu lkjhlkjhlkjh","text_color":"#2C3E50","text_font":24}
{"id":19,"obj":"label","enabled":false,"x":35,"y":68,"w":315,"h":64,"parentid":17,"bg_opa":0,"bg_color":"#000000","mode":"break","text":"Titlepoiupoiupoiupoiupoiupoiupoiu hjlkjhlkjh oiuyoiuy uytruytr","text_color":"#2C3E50","text_font":24}
{"id":20,"obj":"bar","enabled":false,"x":35,"y":64,"w":315,"h":4,"parentid":17,"min":0,"max":100,"bg_color10":"#FFAC00","bg_opa":100,"border_opa":0,"pad_top":0,"pad_bottom":0,"pad_left":0,"pad_right":0}
{"comment":"little man next to Artist"}
{"id":21,"obj":"label","x":4,"y":000,"w":33,"h":32,"parentid":17,"click":0,"bg_opa":0,"bg_color":"#000000","border_color":"#C7BAA7","border_width":0,"text":"\ue004","text_color":"#2C3E50","text_font":24}
{"comment":"Musical notes next to title"}
{"id":22,"obj":"label","x":4,"y":065,"w":33,"h":32,"parentid":17,"click":0,"bg_opa":0,"bg_color":"#000000","border_color":"#C7BAA7","border_width":0,"text":"\ue75a","text_color":"#2C3E50","text_font":24}
{"comment":"Previous"}
{"id":23,"obj":"btn","x":5,"y":285,"w":110,"h":65,"parentid":10,"bg_opa":75,"bg_color":"#FFFFFF","border_color":"#87CEFF","border_width":2,"radius":10,"radius1":10,"radius2":10,"text":"\ue4ae","text_color":"#2C3E50","text_font":64}
{"comment":"Play button"}
{"id":24,"obj":"btn","x":120,"y":285,"w":120,"h":65,"parentid":10,"bg_opa":75,"toggle":true,"bg_color":"#FFFFFF","border_color":"#87CEFF","border_width":2,"radius":10,"radius1":10,"radius2":10,"text":"\ue40a","text_color":"#2C3E50","text_font":64}
{"comment":"Next"}
{"id":25,"obj":"btn","x":245,"y":285,"w":110,"h":65,"parentid":10,"bg_opa":75,"bg_color":"#FFFFFF","border_color":"#87CEFF","border_width":2,"radius":10,"radius1":10,"radius2":10,"text":"\ue4ad","text_color":"#2C3E50","text_font":64}
{"comment":"---------- Heizungsthermostat---------"}
{"comment":"---------- Heizungsthermostat Hintergrund----------"}
{"id":50,"obj":"obj","enabled":true,"x":420,"y":65,"w":360,"h":360,"bg_opa":75,"clip_corner":1,"border_post":1,"border_color":"#87CEFF","border_width":2,"radius":10,"radius1":10,"radius2":10}
{"comment":"---------- Isttemperatur bogen----------"}
{"id":51,"obj":"linemeter","x":15,"y":15,"w":330,"h":330,"parentid":50,"bg_opa10":75,"bg_opa20":200,"bg_opa":75,"bg_color01":"#FFFFFF","line_count":90,"val":90,"min":120,"max":60}
{"comment":"---------- Solltemperatur Bogen ----------"}
{"id":52,"obj":"arc","x":30,"y":30,"w":270,"h":270,"parentid":51,"bg_opa10":0,"bg_opa20":200,"border_opa":0,"bg_opa":0,"bg_color01":"#FFFFFF","val":90,"min":60,"max":120,"adjustable":"true"}
{"comment":"---------- Isttemperatur ----------"}
{"id":53,"obj":"label","enabled":false,"x":55,"y":130,"w":250,"h":50,"parentid":50,"bg_opa":0,"bg_color":"#000000","text":"100°C","text_color":"#2C3E50","text_font":48,"align":1}
{"comment":"---------- Solltemperatur ----------"}
{"id":54,"obj":"label","enabled":false,"x":55,"y":180,"w":250,"h":35,"parentid":50,"bg_opa":0,"bg_color":"#000000","text":"110°C","text_color":"#2C3E50F","text_font":32,"align":1}
{"comment":"---------- Modus ----------"}
{"id":58,"obj":"label","enabled":false,"x":55,"y":250,"w":250,"h":20,"parentid":50,"bg_opa":0,"bg_color":"#000000","text":"Offline","text_color":"#2C3E50","text_font":18,"align":1}
{"comment":"---------- Temperatureinstellung und power ----------"}
{"id":55,"obj":"btn","x":0,"y":310,"w":119,"h":45,"parentid":50,"bg_color":"#2C3E50","text":"-","text_color":"#2C3E50","radius":0,"border_side":0,"text_font":28,"bg_opa":75}
{"id":56,"obj":"btn","toggle":true,"x":120,"y":310,"w":120,"h":45,"parentid":50,"bg_color":"#2C3E50","text":"power","text_color":"#2C3E50","text_color1":"#2C3E50","radius":0,"border_side":0,"text_font":28,"bg_opa":75}
{"id":57,"obj":"btn","x":241,"y":310,"w":119,"h":45,"parentid":50,"bg_color":"#2C3E50","text":"+","text_color":"#2C3E50","radius":0,"border_side":0,"text_font":28,"bg_opa":75}
{"page":2,"comment":"---------- Seite 2--------------------------------------------------- ------------------------------------------------------------------------------------------"}
{"id":99,"obj":"img","src":"L:/large.png","auto_size":1,"h":960,"w":1600,"zoom":256,"x":0,"y":0,swipe:1}
{"comment":"----------------- MEDIA PLAYER -----------------"}
{"comment":"Box & Image for Album art"}
{"id":39,"obj":"obj","enabled":true,"x":0,"y":65,"w":355,"h":355,"bg_opa":180,"clip_corner":1,"border_post":1,"border_color":"#87CEFF","border_width":2,"radius":10,"radius1":10,"radius2":10}
{"id":40,"obj":"img","enabled":true,"x":0,"y":0,"w":355,"h":355,"parentid":39,"auto_size":1,"src":""}
{"id":13,"obj":"obj","x":358,"y":137,"w":442,"h":140,"enabled":false,"bg_opa":75,"bg_color":"#FFFFFF","border_color":"#87CEFF","border_width":2,"radius":10,"radius1":10,"radius2":10}
{"id":23,"obj":"obj","x":358,"y":65,"w":442,"h":70,"enabled":false,"bg_opa":75,"bg_color":"#FFFFFF","border_color":"#87CEFF","border_width":2,"radius":10,"radius1":10,"radius2":10}
{"comment":"Title & Artist text"}
{"id":14,"obj":"label","enabled":false,"x":35,"y":-02,"w":399,"h":32,"parentid":13,"bg_opa":0,"bg_color":"#FFFFFF","mode":"break","text":"Artistpoiupoipoiupoiupoiu lkjhlkjhlkjh","text_color":"#2C3E50","text_font":28}
{"id":15,"obj":"label","enabled":false,"x":35,"y":68,"w":399,"h":64,"parentid":13,"bg_opa":0,"bg_color":"#FFFFFF","mode":"break","text":"Titlepoiupoiupoiupoiupoiupoiupoiu hjlkjhlkjh oiuyoiuy uytruytr","text_color":"#2C3E50","text_font":28}
{"comment":"Dropdown Source"}
{"id":19,"obj":"dropdown","text_color":"#2C3E50","text_font":28,"x":2,"y":2,"w":440,"h":64,"parentid":23,"bg_opa":0,"bg_color":"#FFFFFF","border_color":"#000000","border_opa":0,"options":"Source1\nSource2\nSource3","direction":1,"max_height":300}
{"id":41,"obj":"bar","enabled":false,"x":35,"y":64,"w":390,"h":4,"parentid":13,"min":0,"max":100,"bg_color10":"#FFAC00","bg_opa":100,"border_opa":0,"pad_top":0,"pad_bottom":0,"pad_left":0,"pad_right":0}
{"comment":"Previous"}
{"id":16,"obj":"btn","x":358,"y":286,"w":125,"h":79,"bg_opa":75,"bg_color":"#FFFFFF","border_color":"#87CEFF","border_width":2,"radius":10,"radius1":10,"radius2":10,"text":"\ue4ae","text_color":"#2C3E50","text_font":64}
{"comment":"Play button"}
{"id":17,"obj":"btn","x":495,"y":286,"w":168,"h":79,"bg_opa":75,"toggle":true,"bg_color":"#FFFFFF","border_color":"#87CEFF","border_width":2,"radius":10,"radius1":10,"radius2":10,"text":"\ue40a","text_color":"#2C3E50","text_font":64}
{"comment":"Next"}
{"id":18,"obj":"btn","x":675,"y":286,"w":125,"h":79,"bg_opa":75,"bg_color":"#FFFFFF","border_color":"#87CEFF","border_width":2,"radius":10,"radius1":10,"radius2":10,"text":"\ue4ad","text_color":"#2C3E50","text_font":64}
{"comment":"Volume Slider"}
{"id":20,"obj":"slider","x":385,"y":372,"w":395,"h":35,"bg_opa":75,"bg_color":"#FFFFFF","border_color":"#87CEFF","border_width":2,"radius":5,"radius1":50,"radius2":5,"value_font":32,"value_color":"#FFFFFF","value_opa":255,"value_ofs_x":170,"min":0,"max":100,"val":0,"bg_color1":"#0000ff","border_width1":2,"border_color1":"#87CEFF"}
{"comment":"little man next to Artist"}
{"id":21,"obj":"label","x":4,"y":000,"w":33,"h":32,"parentid":13,"click":0,"bg_opa":0,"bg_color":"#000000","border_color":"#87CEFF","border_width":0,"text":"\ue004","text_color":"#2C3E50","text_font":24}
{"comment":"Musical notes next to title"}
{"id":22,"obj":"label","x":4,"y":065,"w":33,"h":32,"parentid":13,"click":0,"bg_opa":0,"bg_color":"#000000","border_color":"#87CEFF","border_width":0,"text":"\ue75a","text_color":"#2C3E50","text_font":24}
{"page":3,"bg_color":"#000000","comment":"---------- Seite 3 -----------------------------------
-----------------------------------------------------------------------------------------------"}
{"id": 1, "obj": "label", "x": 200, "y": 200, "w": 400, "h": 150, "text_font": 144, "text_color": "#B00000", "align": "center", "text": "98:80" , "template": "%H:%M"}
{"id":2,"obj":"label","x":150,"y":170,"h":35,"w":500,"text":"Donnerstag, der DD September JJJJ","align":"center", "text_color": "#B00000","text_font":30}
{"id":3,"obj":"label","x":50,"y":135,"h":42,"w":700,"text":"XX.X°C","align":"center","text_color": "#B00000","text_font":26}
{"id":4,"obj":"spinner","x":175,"y":15,"w":450,"h":450,"bg_opa":0,"border_width":0,"line_width":7,"line_width10":7,"type":2,"angle":10,"speed":1000000000,"line_color10":"#B00000","line_width":0,"value_str":3}
{"comment":"---------- Limit page prev/next between 1 and 2 ----------"}
{"page":1,"id":0,"prev":2}
{"page":2,"id":0,"next":3}
idle_off.cmd
json ['page 1']
jsonl {"page":0,"id":5,"hidden":false}
jsonl {"page":0,"id":6,"hidden":false}
jsonl {"page":0,"id":7,"hidden":false}
idle_short.cmd
json ['page 3']
jsonl {"page":0,"id":5,"hidden":true}
jsonl {"page":0,"id":6,"hidden":true}
jsonl {"page":0,"id":7,"hidden":true}
In Home Assitant
objects:
# Seitenübergreifend-------------------------------------------------
# temperature label on all pages
- obj: "p0b1"
properties:
"text": "{{ state_attr('climate.heizkorperthermostat_3','current_temperature') | int if not (is_state('climate.heizkorperthermostat_3','unavailable')) }}"
# time label on all pages
- obj: "p0b3"
properties:
"text": '{{ states("sensor.Time") }}'
# Datum label on all pages
- obj: "p0b4"
properties:
"text": '{{ states("sensor.datum")}}'
# Seite 3-------------------------------------------------
- obj: "p3b1" # Time label Bildschirmschoner
properties:
"text": '{{ states("sensor.time")}}'
- obj: "p3b2" # Datum label Bildschirmschoner
properties:
"text": '{{ states("sensor.datum")}}'
- obj: "p3b3" # Weather label Bildschirmschoner
properties:
"text": '{{ states("sensor.wetterstation_2_temperatur") }} °C | {{ states("sensor.wetterstation_2_rainfall_rate") }} mm/h | {{ states("sensor.wetterstation_2_luftfeuchtigkeit") }} % | {{ states("sensor.wetterstation_2_light_intensity") }} lux'
# Seite 1-------------------------------------------------
# Buttons-------------------------------------------------
# light-switch toggle button LED Bett
- obj: "p1b11"
properties:
"val": '{{ 1 if states("light.beleuchtung_bett") == "on" else 0 }}'
"text": '{{ "#FF0000 \uE6E8#\nLED Bett" if is_state("light.beleuchtung_bett", "on") else "\uE335\nLED Bett" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "light.beleuchtung_bett"
# light-switch toggle button Heizdecke Mausi
- obj: "p1b12"
properties:
"val": '{{ 1 if states("switch.sonoff_1001eac458_1") == "on" else 0 }}'
"text": '{{ "#FF0000 \uE2E3#\nH Mausi" if is_state("switch.sonoff_1001eac458_1", "on") else "\uE2E3\nH Mausi" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.sonoff_1001eac458_1"
# light-switch toggle button Heizdecke Nubbi
- obj: "p1b13"
properties:
"val": '{{ 1 if states("switch.sonoff_1001eac3d0_1") == "on" else 0 }}'
"text": '{{ "#FF0000 \uE2E3#\nH Nubbi" if is_state("switch.sonoff_1001eac3d0_1", "on") else "\uE2E3\nH Nubbi" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "switch.sonoff_1001eac3d0_1"
# light-switch toggle button Rollade Schlafzimmer
- obj: "p1b14"
properties:
"val": '{{ 1 if states("cover.rolladen_schlafzimmer") == "open" else 0 }}'
"text": '{{ "#FF0000 \uF11E#\nRolladen" if is_state("cover.rolladen_schlafzimmer", "open") else "\uF11C\nRolladen" | e }}'
event:
"up":
- service: homeassistant.toggle
entity_id: "cover.rolladen_schlafzimmer"
# light-switch toggle button Gute Nacht
- obj: "p1b15"
properties:
"val": '{{ 1 if states("cover.rolladen_schlafzimmer") == "open" else 0 }}'
"text": '{{ "#FF0000 \uE594#\nGute Nacht" if is_state("cover.rolladen_schlafzimmer", "open") else "\uE594\nGute Nacht" | e }}'
event:
"up":
- service: media_player.play_media
target:
device_id: b3e0bb31f1394f6e2d73a0f723aa0248
data:
media_content_type: routine
media_content_id: gute nacht
# light-switch toggle button Guten Morgen
- obj: "p1b16"
properties:
"val": '{{ 1 if states("cover.rolladen_schlafzimmer") == "open" else 0 }}'
"text": '{{ "#FF0000 \uE594#\nGuten Morgen" if is_state("cover.rolladen_schlafzimmer", "open") else "\uE594\nGuten Morgen" | e }}'
event:
"up":
- service: media_player.play_media
target:
device_id: b3e0bb31f1394f6e2d73a0f723aa0248
data:
media_content_type: routine
media_content_id: Guten morgen
# Mediaplayer light
- obj: "p1b18" # artist label
properties:
"text": "{{ state_attr('media_player.spotify_H-Climber','media_artist') if state_attr('media_player.spotify_H-Climber','media_artist') else '-' }}"
- obj: "p1b19" # title label
properties:
"text": "{{ state_attr('media_player.spotify_H-Climber','media_title') if state_attr('media_player.spotify_H-Climber','media_title') else '-' }}"
- obj: "p1b24" # play/pause/stop
properties:
"text": >
{% if is_state('media_player.spotify_H-Climber', 'playing') %}
{{ "\uE3E4" | e }}
{%-else %}
{{ "\uE40A" | e }}
{%-endif %}
"text_opa": "{{ '80' if states('media_player.spotify_H-Climber') in ['unavailable', 'unknown'] else '255' }}"
event:
"down":
- service: media_player.media_play_pause
target:
entity_id: media_player.spotify_H-Climber
"long":
- service: media_player.media_stop
target:
entity_id: media_player.spotify_H-Climber
- obj: "p1b23" # prev
properties:
"text_opa": "{{ '80' if states('media_player.spotify_H-Climber') in ['unavailable', 'unknown'] else '255' }}"
event:
"down":
- service: media_player.media_previous_track
target:
entity_id: media_player.spotify_H-Climber
- obj: "p1b25" # next
properties:
"text_opa": "{{ '80' if states('media_player.spotify_H-Climber') in ['unavailable', 'unknown'] else '255' }}"
event:
"down":
- service: media_player.media_next_track
target:
entity_id: media_player.spotify_H-Climber
# Heizungsthermostat-------------------------------------------------
- obj: "p1b52" # arc slider
properties:
"val": "{{ state_attr('climate.heizkorperthermostat_3','temperature') * 10 | int if not (is_state('climate.heizkorperthermostat_3','unavailable')) }}"
"min": "{{ state_attr('climate.heizkorperthermostat_3','min_temp') * 10 | int if not (is_state('climate.heizkorperthermostat_3','unavailable')) }}"
"max": "{{ state_attr('climate.heizkorperthermostat_3','max_temp') * 10 | int if not (is_state('climate.heizkorperthermostat_3','unavailable')) }}"
"line_color1": >
{% if is_state('climate.heizkorperthermostat_3', 'heat') %}
{{ "#FF0000" }}
{%-else %}
{{ "#9f96b0" }}
{% endif %}
event:
"changed":
- service: climate.set_temperature
target:
entity_id: climate.heizkorperthermostat_3
data:
temperature: "{{ val | int / 10 }}"
"up":
- service: climate.set_temperature
target:
entity_id: climate.heizkorperthermostat_3
data:
temperature: "{{ val | int / 10 }}"
- obj: "p1b51" # linemeter current temp
properties:
"val": "{{ state_attr('climate.heizkorperthermostat_3','current_temperature') * 10 | int if not (is_state('climate.heizkorperthermostat_3','unavailable')) }}"
"min": "{{ state_attr('climate.heizkorperthermostat_3','min_temp') * 10 | int if not (is_state('climate.heizkorperthermostat_3','unavailable')) }}"
"max": "{{ state_attr('climate.heizkorperthermostat_3','max_temp') * 10 | int if not (is_state('climate.heizkorperthermostat_3','unavailable')) }}"
- obj: "p1b53" # current temp
properties:
"text": "{{ state_attr('climate.heizkorperthermostat_3','current_temperature') if not (is_state('climate.heizkorperthermostat_3','unavailable')) }}"
- obj: "p1b58" # current modus
properties:
"text": "{{ state_attr('climate.heizkorperthermostat_3','hvac_action') if not (is_state('climate.heizkorperthermostat_3','unavailable')) }}"
- obj: "p1b54" # current temp
properties:
"text": "{{ state_attr('climate.heizkorperthermostat_3','temperature') if not (is_state('climate.heizkorperthermostat_3','unavailable')) }}"
- obj: "p1b55" # Button -
event:
"up":
- service: climate.set_temperature
target:
entity_id: climate.heizkorperthermostat_3
data:
temperature: "{{ state_attr('climate.heizkorperthermostat_3','temperature') - state_attr('climate.heizkorperthermostat_3','target_temp_step') | float(default=0)}}"
- obj: "p1b57" # Button +
event:
"up":
- service: climate.set_temperature
target:
entity_id: climate.heizkorperthermostat_3
data:
temperature: "{{ state_attr('climate.heizkorperthermostat_3','temperature') + state_attr('climate.heizkorperthermostat_3','target_temp_step') | float(default=0)}}"
- obj: "p1b56" # on/off switch
properties:
"val": "{{ 0 if (is_state('climate.heizkorperthermostat_3', 'off') or is_state('climate.heizkorperthermostat_3', 'unavailable')) else 1 }}"
"text": '{{ "aus" if is_state("climate.heizkorperthermostat_3", "off") else "Automatik" | e }}'
event:
"down":
- service: climate.set_hvac_mode
target:
entity_id: climate.heizkorperthermostat_3
data:
hvac_mode: '{{ "auto" if is_state("climate.heizkorperthermostat_3", "off") else "off" | e }}'
# Seite 2-------------------------------------------------
#
#
#Media Player
#
- obj: "p2b14" # artist label
properties:
"text": "{{ state_attr('media_player.spotify_H-Climber','media_artist') if state_attr('media_player.spotify_H-Climber','media_artist') else '-' }}"
- obj: "p2b15" # title label
properties:
"text": "{{ state_attr('media_player.spotify_H-Climber','media_title') if state_attr('media_player.spotify_H-Climber','media_title') else '-' }}"
- obj: "p2b19" # sources list
properties:
"options": >
{% if (state_attr('media_player.spotify_H-Climber','source_list') != none and states('media_player.spotify_H-Climber') not in ['unavailable', 'unknown']) %}
{{"(no source)\n"|e}}
{%- for source in state_attr('media_player.spotify_H-Climber','source_list') -%}
{{source+"\n"|e}}{%-if not loop.last%}{%-endif%}{%-endfor%}{%-endif %}
"val": >
{% if states('media_player.spotify_H-Climber') not in ['unavailable', 'unknown'] %}
{% if state_attr('media_player.spotify_H-Climber','source') == None %}0{% else %}
{%for source in state_attr('media_player.spotify_H-Climber','source_list')%}
{{loop.index if source == state_attr('media_player.spotify_H-Climber','source') }}
{%-endfor%}{%-endif %}{%-endif %}
"click": "{{ 'false' if states('media_player.spotify_H-Climber') in ['unavailable', 'unknown'] else 'true' }}"
event:
"changed":
- service: media_player.select_source
data:
entity_id: media_player.spotify_H-Climber
source: "{{ text }}"
# - obj: "p2b16" # sound modes list
# properties:
# "options": >
# {% if (state_attr('media_player.shop','sound_mode_list') != none and states('media_player.shop') not in ['unavailable', 'unknown']) %}
# {%-for soundmode in state_attr('media_player.shop','sound_mode_list')-%}
# {{soundmode+"\n"|e}}{%-if not loop.last%}{%-endif%}{%-endfor%}{%-endif %}
# "val": >
# {% if states('media_player.shop') not in ['unavailable', 'unknown'] %}{%for source in state_attr('media_player.shop','sound_mode_list')%}
# {{loop.index -1 if source == state_attr('media_player.shop','sound_mode') }}
# {%-endfor%}{% endif %}
# "click": "{{ 'false' if states('media_player.shop') in ['unavailable', 'unknown'] else 'true' }}"
# event:
# "changed":
# - service: media_player.select_sound_mode
# data:
# entity_id: media_player.shop
# sound_mode: "{{ text }}"
- obj: "p2b17" # play/pause/stop
properties:
"text": >
{% if is_state('media_player.spotify_H-Climber', 'playing') %}
{{ "\uE3E4" | e }}
{%-else %}
{{ "\uE40A" | e }}
{%-endif %}
"text_opa": "{{ '80' if states('media_player.spotify_H-Climber') in ['unavailable', 'unknown'] else '255' }}"
event:
"down":
- service: media_player.media_play_pause
target:
entity_id: media_player.spotify_H-Climber
"long":
- service: media_player.media_stop
target:
entity_id: media_player.spotify_H-Climber
- obj: "p2b16" # prev
properties:
"text_opa": "{{ '80' if states('media_player.spotify_H-Climber') in ['unavailable', 'unknown'] else '255' }}"
event:
"down":
- service: media_player.media_previous_track
target:
entity_id: media_player.spotify_H-Climber
- obj: "p2b18" # next
properties:
"text_opa": "{{ '80' if states('media_player.spotify_H-Climber') in ['unavailable', 'unknown'] else '255' }}"
event:
"down":
- service: media_player.media_next_track
target:
entity_id: media_player.spotify_H-Climber
- obj: "p2b20" # volume slider
properties:
"val": >
{% if (state_attr('media_player.spotify_H-Climber','volume_level') != none and states('media_player.spotify_H-Climber') not in ['unavailable', 'unknown']) %}
{{ state_attr('media_player.spotify_H-Climber','volume_level') * 100 | int(default=40) }}
{%-endif %}
"click": "{{ 'false' if states('media_player.spotify_H-Climber') in ['unavailable', 'unknown'] else 'true' }}"
event:
"changed":
- service: media_player.volume_set
data:
entity_id: media_player.spotify_H-Climber
volume_level: "{{ val | int / 100 }}"
"up":
- service: media_player.volume_set
data:
entity_id: media_player.spotify_H-Climber
volume_level: "{{ val | int / 100 }}"
In automations.yaml (um das Albumcover hochzuladen)
- id: '1708859386723'
alias: Openhasp Plate3 Albumcover
description: ''
trigger:
- platform: state
entity_id: media_player.spotify_H-Climber
condition:
- condition: template
value_template: "{{ trigger.from_state.attributes.entity_picture !=\n trigger.to_state.attributes.entity_picture
}}\n"
action:
- choose:
- conditions:
- condition: template
value_template: '{{ state_attr(''media_player.spotify_H-Climber'',''entity_picture'')
!= None }}'
sequence:
- service: openhasp.push_image
target:
entity_id: openhasp.plate3
data:
image: http://192.168.68.151:8123{{ state_attr('media_player.spotify_H-Climber','entity_picture')
}}
obj: p2b40
width: 355
height: 355
- service: openhasp.command
target:
entity_id: openhasp.plate3
data:
keyword: p2b40.hidden
parameters: '0'
- conditions:
- condition: template
value_template: '{{ state_attr(''media_player.spotify_H-Climber'',''entity_picture'')
== None }}'
sequence:
- service: openhasp.command
target:
entity_id: openhasp.plate3
data:
keyword: p2b40.hidden
parameters: '1'
mode: single
PS: Ich habe den Code größtenteils zusammenkopiert, weiß aber nicht bei allem woher. Also Entschuldigung falls ich eueren Code benutze 
Sieht super aus. Bin auch gerade am basteln. Bekomme aber push to image von meiner reolink nicht hin 
Hallo H-Climber,
vielen Dank für das Beispiel. Wie hast du es geschafft, dass das Datum in deutsch dargestellt wird? Bei mir sind die Wochentage immer in englisch.
Gruß
Peter
Hallo habe folgendes template in der configuration.yaml eingegügt:
template:
- sensor:
- name: "Datum Uhrzeit"
state: >
{% set wochentag = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"] %}
{% set monat = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"] %}
{% set wochentag = wochentag[now().weekday()] %}
{% set monat = monat[now().month - 1] %}
{{ wochentag }}, der {{ now().day }} {{ monat }} {{now().year}} -- {{now().hour}}:{{now().minute}}
- name: "Datum"
state: >
{% set wochentag = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"] %}
{% set monat = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"] %}
{% set wochentag = wochentag[now().weekday()] %}
{% set monat = monat[now().month - 1] %}
{{ wochentag }}, der {{ now().day }} {{ monat }} {{now().year}}
Hallo,
hat mal jemand einen unsichtbare Button hinbekommen?
Oder ein Label, mit dem ich auf eine andere Seite springen kann?
Ich würde gerne beim drücken auf die Uhrzeit die Seite wechseln, aber ohne den hintergrund hinter der Uhrzeit:
Grüße
Hallo Stephan,
Kannst du mal deinen Code für diese Seite posten? Eventuell reicht es schon den Toggle status raus zu nehmen…
Muss ich aber immer erst selber ausprobieren 
Gruß
Hallo H-Climber,
{"page":5,"id":30,"obj":"btn","x":0,"y":0,"w":240,"h":80, "action":"p6","radius":0,"border_side":0}
{"page":5,"id":31,"obj":"btn","x":0,"y":120,"w":240,"h":60, "action":"p8","radius":0,"border_side":0}
{"page":5,"id":1,"obj":"label","x":5,"y":100,"w":240,"h":173,"text":"--:--", "text_font": "opsare70","toggle":false}
{"page":5,"id":2,"obj":"label","x":5,"y":7,"w":48,"h":48,"text":"\uE596", "text_font": 32}
{"page":5,"id":3,"obj":"label","x":60,"y":5,"w":62,"h":48,"text":"--°C", "text_font": "opsare32"}
{"page":5,"id":4,"obj":"label","x":5,"y":45,"w":330,"h":28,"text":"--", "text_font": "opsare24"}
{"page":5,"id":10,"obj":"btn","x":10,"y":250,"w":100,"h":50,"toggle":false,"text":"3","text_font":32,"radius":10,"border_side":0,"align":"center"}
{"page":5,"id":20,"obj":"btn","x":130,"y":250,"w":100,"h":50,"toggle":false,"text":"\uE75A","text_font":32,"radius":10,"border_side":0,"align":"center","action":"p7"}
Es geht um die beiden btn id 30 und 31.
Danke
Hallo Stephan,
So müsste es klappen:
{"page":5,"id":30,"obj":"btn","x":0,"y":0,"w":240,"h":80,"toggle":false,"action":{"down":"page 6"},"radius":0,"border_side":0,"bg_opa":0}
{"page":5,"id":31,"obj":"btn","x":0,"y":120,"w":240,"h":60,"toggle":false,"action":{"down":"page 8"},"radius":0,"border_side":0,"bg_opa":0}
{"page":5,"id":1,"obj":"label","x":5,"y":100,"w":240,"h":173,"text":"--:--", "text_font": "opsare70","toggle":false}
{"page":5,"id":2,"obj":"label","x":5,"y":7,"w":48,"h":48,"text":"\uE596", "text_font": 32}
{"page":5,"id":3,"obj":"label","x":60,"y":5,"w":62,"h":48,"text":"--°C", "text_font": "opsare32"}
{"page":5,"id":4,"obj":"label","x":5,"y":45,"w":330,"h":28,"text":"--", "text_font": "opsare24"}
{"page":5,"id":10,"obj":"btn","x":10,"y":250,"w":100,"h":50,"toggle":false,"text":"3","text_font":32,"radius":10,"border_side":0,"align":"center"}
{"page":5,"id":20,"obj":"btn","x":130,"y":250,"w":100,"h":50,"toggle":false,"text":"\uE75A","text_font":32,"radius":10,"border_side":0,"align":"center","action":"p7"}
Ich habe hinzugefügt:
(macht den Hintergrund zu 0% Sichtbar)(macht den Button zu einem nicht umschaltbaren Button)(öffnet beim herunterdrücken Seite 6)Hi H-Climber,
vielen Dank für deine Hilfe.
aber bei mir funktionierts irgendwie nicht, ich habe jetzt mal den Background die gleiche Farbe wie den Hintergrund gemacht, jetzt geht es:
{"page":5,"bg_color":"#607D8B"}
{"page":5,"id":30,"obj":"btn","x":0,"y":0,"w":240,"h":80, "action":"p6","radius":0,"border_side":0,"bg_color":"#607D8B"}
{"page":5,"id":31,"obj":"btn","x":0,"y":120,"w":240,"h":60, "action":"p8","radius":0,"border_side":0,"bg_color":"#607D8B"}
Grüße
Hallo,
ich habe das Dashboard meiner Anker Solarbank auf einem 2,8" TFT Display ohne Touch visualisiert.
Das Design ist sicherlich noch anpassungsfähig, aber für meine ersten Schritte in HA und Openhasp, ist es schon ganz gut geworden. Finde ich.
Hilfe hatte ich auch von @H-Climber 
pages.jsonl
{"comment":" -----------Seite 0 für alle Seiten------------"}
{"page":0,"id":200,"bg_color":"#FFFFFF","text_color":"#34495E"}
{"page":0,"id":4,"obj":"label","x":150,"y":1,"h":40,"w":70,"text":"00:00","template":"%H:%M","align":"right","bg_color":"#2C3E50", "text_color":"#8A2BE2"}
{"page":0,"id":5,"obj":"label","x":5,"y":1,"h":40,"w":145,"text":"0000.00.00","align":"left","bg_color":"#2C3E50","text_color":"#8A2BE2"}
{"page":0,"id":6,"obj":"label","x":225,"y":1,"h":40,"w":30,"text":"\uE5A9","text_color":"gray","bg_opa":0,"border_width":0, "bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"comment":" -----------Seite 1 Solarbank ------------"}
{"comment":" -----------Werte ------------"}
{"comment":" -----------Akkukapazität ------------"}
{"page":1,"id":11,"obj":"label","x":178,"y":98,"h":30,"w":95,"text":"Akku %","align":0,"bg_color":"#2C3E50", "text_font":24, "text_color":"#FFFFFF"}
{"page":1,"id":107,"obj":"label","x":184,"y":123,"h":30,"w":95,"text":"%","align":0,"bg_color":"#2C3E50", "text_font":18, "text_color":"#FFFFFF"}
{"comment":" -----------Werte Solarpanel 1 ------------"}
{"page":1,"id":12,"obj":"label","x":2,"y":30,"h":30,"w":75,"text":"Panel 1W","align":0,"bg_color":"#2C3E50", "text_font":12, "text_color":"#FF7F24"}
{"comment":" -----------Werte Solarpanel 2 ------------"}
{"page":1,"id":13,"obj":"label","x":2,"y":40,"h":30,"w":75,"text":"Panel 2W","align":0,"bg_color":"#2C3E50", "text_font":12, "text_color":"#FF7F24"}
{"comment":" -----------Werte Solarpanel 3 ------------"}
{"page":1,"id":14,"obj":"label","x":60,"y":30,"h":30,"w":75,"text":"Panel 3W","align":0,"bg_color":"#2C3E50", "text_font":12, "text_color":"#FF7F24"}
{"comment":" -----------Werte Solarpanel 4 ------------"}
{"page":1,"id":15,"obj":"label","x":60,"y":40,"h":30,"w":75,"text":"Panel 4W","align":0,"bg_color":"#2C3E50", "text_font":12, "text_color":"#FF7F24"}
{"comment":" -----------Werte Hausverbrauch ------------"}
{"page":1,"id":16,"obj":"label","x":40,"y":275,"h":30,"w":75,"text":"Haus W","align":0,"bg_color":"#2C3E50", "text_font":14, "text_color":"#FF7F24"}
{"comment":" -----------Werte Solargesamt ------------"}
{"page":1,"id":17,"obj":"label","x":120,"y":80,"h":30,"w":75,"text":"Solarges","align":0,"bg_color":"#2C3E50", "text_font":14, "text_color":"#FF7F24"}
{"comment":" -----------Werte Vom Akku zum Haus ------------"}
{"page":1,"id":18,"obj":"label","x":100,"y":150,"h":30,"w":75,"text":"Hausabgabe","align":0,"bg_color":"#2C3E50", "text_font":14, "text_color":"#FF7F24"}
{"comment":" -----------Werte Netz ------------"}
{"page":1,"id":19,"obj":"label","x":115,"y":235,"h":30,"w":75,"text":"Netz","align":0,"bg_color":"#2C3E50", "text_font":14, "text_color":"#FF7F24"}
{"comment":" -----------Grafiken ------------"}
{"comment":" -----------Grafik Haus ------------"}
{"page":1,"id":100,"obj":"label","x":2,"y":180,"h":90,"w":90,"text":"\uE6A1","text_color":"gray","bg_opa":0,"border_width":0, "text_font":100,"bg_color":"#2C3E50","text_color":"#0000FF"}
{"comment":" -----------Grafik Batterie ------------"}
{"page":1,"id":101,"obj":"label","x":150,"y":75,"h":80,"w":60,"text":"\uE08E","text_color":"gray","bg_opa":0,"border_width":0, "text_font":80,"bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"comment":" -----------Grafik Netzmast ------------"}
{"page":1,"id":102,"obj":"label","x":155,"y":190,"h":90,"w":90,"text":"\uED3E","text_color":"gray","bg_opa":0,"border_width":0, "text_font":80,"bg_color":"#2C3E50","text_color":"#969696"}
{"comment":" -----------Grafik Solar ------------"}
{"page":1,"id":103,"obj":"label","x":20,"y":50,"h":60,"w":60,"text":"\uFA74","text_color":"gray","bg_opa":0,"border_width":0, "text_font":60,"bg_color":"#2C3E50","text_color":"#FFFF00"}
{"comment":" -----------Linie Solar->Akku ------------"}
{"page":1,"id":104,"obj":"line","points":[[95,100],[165,100]],"line_color":"#ffa727","line_width":5}
{"comment":" -----------Linie Akku->Haus ------------"}
{"page":1,"id":105,"obj":"line","points":[[80,215],[165,150]],"line_color":"#ffa727","line_width":5}
{"comment":" -----------Linie Haus->Netz ------------"}
{"page":1,"id":106,"obj":"line","points":[[95,230],[165,230]],"line_color":"#ffa727","line_width":5}
config.yaml
openhasp:
display:
objects:
- obj: "p0b4"
properties:
"text": "{{ states('sensor.time') }}"
- obj: "p0b5"
properties:
"text": "{{ states('sensor.date') }}"
- obj: "p0b6"
properties:
"text_color": "{% if -30 <= state_attr('openhasp.hasp3','rssi') |int(0) %}green{% elif -31 > state_attr('openhasp.hasp3','rssi') |int(0) >= -50 %}orange{% elif -51 > state_attr('openhasp.hasp3','rssi') |int(0) >= -80 %}tomato{% else %}red{% endif %}"
- obj: "p1b10"
properties:
"text": " Außentemp: {{ states('sensor.zuhause_aussentemperatur')}}°C"
- obj: "p1b11" # Akkustandsanzeige Farbig in (green,orange,tomato,red)
properties:
"text": '{{ states("sensor.solarbank_2_e1600_pro_ladestand")}}'
"text_color": >
{% if 75 < states('sensor.solarbank_2_e1600_pro_ladestand') |int(0) %}
{{ "green" }}
{% elif 75 >= states('sensor.solarbank_2_e1600_pro_ladestand') |int(0) >= 50 %}
{{ "orange" }}
{% elif 50 > states('sensor.solarbank_2_e1600_pro_ladestand') |int(0) >= 30 %}
{{ "tomato" }}
{%-else %}
{{ "red"}}
{%-endif %}
- obj: "p1b12"
properties:
"text": " P1: {{ states('sensor.solarbank_2_e1600_pro_solar_pv1')}} W"
- obj: "p1b13"
properties:
"text": " P2: {{ states('sensor.solarbank_2_e1600_pro_solar_pv2')}} W"
- obj: "p1b14"
properties:
"text": " P3: {{ states('sensor.solarbank_2_e1600_pro_solar_pv3')}} W"
- obj: "p1b15"
properties:
"text": " P4: {{ states('sensor.solarbank_2_e1600_pro_solar_pv4')}} W"
- obj: "p1b16"
properties:
"text": " {{ states('sensor.haus')}} W"
- obj: "p1b17"
properties:
"text": " {{ states('sensor.solarbank_2_e1600_pro_solarleistung')}} W"
- obj: "p1b18"
properties:
"text": " {{ states('sensor.solarbank_2_e1600_pro_ac_hausabgabe')}} W"
- obj: "p1b101"
properties:
"text_color": "{% if 75 <= states('sensor.solarbank_2_e1600_pro_ladestand') |int(0) %}green{% elif 74 > states('sensor.solarbank_2_e1600_pro_ladestand') |int(0) >= 50 %}orange{% elif 49 > states('sensor.solarbank_2_e1600_pro_ladestand') |int(0) >= 30 %}tomato{% else %}red{% endif %}"
- obj: "p1b19"
properties:
"text": " {{ states('sensor.netz')}} W"
- obj: "p1b107" # Akkustandsanzeige Farbig in (green,orange,tomato,red)
properties:
"text": '{{(%)}}'
"text_color": >
{% if 75 < states('sensor.solarbank_2_e1600_pro_ladestand') |int(0) %}
{{ "green" }}
{% elif 75 >= states('sensor.solarbank_2_e1600_pro_ladestand') |int(0) >= 50 %}
{{ "orange" }}
{% elif 50 > states('sensor.solarbank_2_e1600_pro_ladestand') |int(0) >= 30 %}
{{ "tomato" }}
{%-else %}
{{ "red"}}
{%-endif %}
template:
- sensor:
# Berechnung der Netzleistung positiv/negativ
- name: "Netz"
unique_id: "Netz+"
unit_of_measurement: 'W'
device_class: "energy"
state: "{{ float(states('sensor.smart_meter_netzbezug')) - float(states('sensor.smart_meter_netzeinspeisung')) }}"
- sensor:
# Berechnung Hausverbrauch
- name: "Haus"
unique_id: "haus+"
unit_of_measurement: 'W'
device_class: "energy"
state: "{{ float(states('sensor.netz')) + float(states('sensor.solarbank_2_e1600_pro_ac_hausabgabe')) }}"
Das ist für ein esp32 Display (4 Zoll 480×480)
{"page":0,"comment":"----------- page 0 ------- "}
{"id":1,"obj":"obj" ,"x":380,"y":0, "w":100,"h":480,"border_color":"#848a94","border_width":2,"border_side":8,"radius":1,"bg_color":"#673bb7", "bg_grad_dir":0}
{"id":18, "obj":"label","x":0,"y":0, "w":100,"h":60, "parentid":1,"border_color":"#848a94","bg_color":"#5a6173","align":"center","text_color":"white","text":"00:00","text_font":42, "template": "%H:%M"}
{"id":11,"obj":"label","x":0,"y":60, "w":100,"h":40, "parentid":1,"border_color":"#848a94","bg_color":"#5a6173","align":"center","text_color":"white","text":"Aussen","text_font":20}
{"id":98,"obj":"label","x":0,"y":82, "w":100,"h":40, "parentid":1,"border_color":"#848a94","bg_color":"#5a6173","align":"center","text_color":"white","text":"0.0°C","text_font":32}
{"id":13,"obj":"btn" ,"x":0,"y":180,"w":100,"h":60, "parentid":1,"action":{"down": "page 1"},"border_color":"#848a94","border_width":2,"border_side":2,"radius":1,"bg_color":"#000000","text":"\uE2DC","text_color":"white","bg_color":"#673bb7","text_font":38, "bg_grad_dir":0,"comment":"Home"}
{"id":14,"obj":"btn" ,"x":0,"y":240,"w":100,"h":60, "parentid":1,"action":{"down": "page 2"},"border_color":"#848a94","border_width":2,"border_side":2,"radius":1,"bg_color":"#000000","text":"\uE590","text_color":"white","bg_color":"#673bb7","text_font":38, "bg_grad_dir":0,"comment":"Weather"}
{"id":15,"obj":"btn" ,"x":0,"y":300,"w":100,"h":60, "parentid":1,"action":{"down": "page 3"},"border_color":"#848a94","border_width":2,"border_side":2,"radius":1,"bg_color":"#000000","text":"\uE6E8","text_color":"white","bg_color":"#673bb7","text_font":38, "bg_grad_dir":0,"comment":"Lights"}
{"id":16,"obj":"btn" ,"x":0,"y":360,"w":100,"h":60, "parentid":1,"action":{"down": "page 4"},"border_color":"#848a94","border_width":2,"border_side":2,"radius":1,"bg_color":"#000000","text":"\uED3E","text_color":"white","bg_color":"#673bb7","text_font":38, "bg_grad_dir":0,"comment":"Lights"}
{"page":1,"comment":"Page 1","bg_color":"#000000"}
{"comment":"--Hintergrund--"}
{"page":1,"id":99,"obj":"img","src":"L:/Vektor2.png","auto_size":1,"w":480}
{"comment":"--ausgelendet--"}
{"id":2,"obj":"obj" ,"x":0,"y":360, "w":480,"h":0,"border_color":"#848a94","border_width":2,"border_side":8,"radius":1,"bg_color":"#673bb7", "bg_grad_dir":0}
{"id":4,"obj":"obj" ,"x":379,"y":0, "w":1,"h":480,"border_color":"#848a94","border_width":2,"border_side":8,"radius":1,"bg_color":"#673bb7", "bg_grad_dir":0}
{"comment":"--Ring--"}
{"page":1,"id":1,"obj":"arc","x":25,"y":30,"w":370,"h":330,"min":140,"max":300,"val":250,"border_side":0,"type":0,"rotation":0,"start_angle":128,"end_angle":54,"adjustable":"true","line_width":20,"line_width10":20,"line_color10":"#0afcf0","bg_color20":"#9de7e3","bg_opa":1,"pad_top20":1,"pad_bottom20":1,"pad_left20":1,"pad_right20":1,"pad_top":1,"pad_bottom":1,"pad_left":1,"pad_right":1}
{"comment":"--Temperaturen--"}
{"id":3,"obj":"label","x":110,"y":130,"w":160,"h":120,"text":"00.1","text_font":90,"text_color":"#4cb050"}
{"id":6,"obj":"label","x":135,"y":390,"w":140,"h":80,"text":"00.2","text_font":62,"text_color":"#fe8f58"}
{"id":97,"obj":"label","x":140,"y":300,"h":40,"w":95,"text":"00.3 %","text_color":"#FFFFFF"}
{"comment":"--Texte--"}
{"id":7,"obj":"label","x":120,"y":365,"w":140,"h":20,"align":"center","text":"Set Temperatur","text_font":18,"text_color":"#fe8f58"}
{"id":8,"obj":"label","x":120,"y":100,"w":140,"h":20,"align":"center","text":"Raumtemperatur","text_font":16,"text_color":"#4cb050"}
{"id":95,"obj":"label","x":120,"y":280,"w":140,"h":20,"align":"center","text":"Luftfeuchtigkeit","text_font":16,"text_color":"#FFFFFF"}
{"comment":"--Plus Minus--"}
{"id":35,"obj":"label","x":290,"y":375,"w":60,"h":80,"align":"center","text":"\uE238","text_font":80,"text_color":"#d81b43"}
{"id":37,"obj":"label","x":20,"y":380,"w":60,"h":80,"align":"center","text":"\uE717","text_font":75,"text_color":"#1f87e8"}
{"comment":"--Seite 2--"}
{"page":2,"comment":"----------- Weather ------- "}
{"id":1,"obj":"obj","x":0,"y":0,"w":660,"h":480,"bg_color":"#ffffff", "bg_grad_dir":0, "radius":0}
{"id":2, "parentid":1,"obj":"obj","x":0,"y":0,"w":480,"h":49,"bg_color":"#e1e1e1", "border_width":2, "border_side":1, "border_color":"#848a94","radius":0, "bg_grad_dir":0}
{"id":20,"parentid":2,"obj":"label","x":145,"y":00,"w":480,"h":45,"text":"WETTER","text_color":"#585858","radius":0,"border_side":0,"click":0}
{"id":3, "parentid":1,"obj":"obj","x":0,"y":50,"w":480,"h":450,"bg_color":"#FFFFFF", "border_width":2, "border_side":1, "border_color":"#848a94","radius":0, "bg_grad_dir":0,"text_font":16}
{"id":15,"obj":"label","x":120,"y":10,"w":130,"h":25,"align":"center","text":"Heute","parentid":3,"text_color":"#00008B"}
{"id":16,"obj":"label","x":110,"y":34,"w":150,"h":40,"align":"center","text":"00.0°C","parentid":3,"text_font":32,"text_color":"#00008B"}
{"id":17,"obj":"label","x":70,"y":78,"w":150,"h":40,"align":"center","text":"\uE59D","parentid":3,"text_font":25,"text_color":"#00008B"}
{"id":171,"obj":"label","x":165,"y":78,"w":150,"h":40,"align":"center","text":"km/h ","parentid":3,"text_font":24,"text_color":"#00008B"}
{"id":172,"obj":"label","x":260,"y":78,"w":150,"h":40,"align":"center","text":"Wind2 ","parentid":3,"text_font":28,"text_color":"#00008B"}
{"id":173,"obj":"label","x":50,"y":100,"w":150,"h":40,"align":"center","text":"Wind in Text ","parentid":3,"text_font":20,"text_color":"#00008B"}
{"id":18,"obj":"label","x":10,"y":10,"w":90,"h":90,"text":"\uE2DA","parentid":3,"click":0,"text_font":80,"text_color":"#00008B"}
{"id":21,"obj":"label","x":250,"y":10,"w":130,"h":25,"align":"center","text":"Min","parentid":3,"text_color":"#00008B"}
{"id":22,"obj":"label","x":240,"y":34,"w":150,"h":40,"align":"center","text":"00.0°C","parentid":3,"text_font":32,"text_color":"#00008B"}
{"id":10,"obj":"tabview","x":0,"y":0,"w":660,"h":430,"parentid":3,"btn_pos":0,"bg_opa":0,"border_width":2,"text_color":"#00008B"}
{"id":51,"obj":"label","x":6,"y":130,"w":150,"h":50,"align":"center","text":"Tag","parentid":10,"pad_top":3,"click":0,"text_font":10,"text_color":"#00008B"}
{"id":52,"obj":"label","x":120,"y":130,"w":150,"h":50,"align":"center","text":"Nierdig","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":10}
{"id":53,"obj":"label","x":180,"y":130,"w":150,"h":50,"align":"center","text":"Hoch","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":10}
{"id":57,"obj":"label","x":260,"y":130,"w":150,"h":50,"align":"center","text":"Himmel","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":10}
{"id":61,"obj":"label","x":6,"y":150,"w":150,"h":50,"align":"left","text":"date+1","parentid":10,"pad_top":3,"click":0,"text_font":30,"text_color":"#00008B"}
{"id":62,"obj":"label","x":120,"y":160,"w":150,"h":50,"align":"center","text":"00.0","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":20}
{"id":63,"obj":"label","x":180,"y":160,"w":150,"h":50,"align":"center","text":"00.0","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":20}
{"id":64,"obj":"label","x":280,"y":150,"w":90,"h":90,"text":"\uE2DA","parentid":3,"click":0,"text_font":40,"text_color":"#00008B","align":"center"}
{"id":71,"obj":"label","x":6,"y":200,"w":150,"h":50,"align":"left","text":"date+2","parentid":10,"pad_top":3,"click":0,"text_font":30,"text_color":"#00008B"}
{"id":72,"obj":"label","x":120,"y":210,"w":150,"h":50,"align":"center","text":"00.0","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":20}
{"id":73,"obj":"label","x":180,"y":210,"w":150,"h":50,"align":"center","text":"00.0","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":20}
{"id":74,"obj":"label","x":280,"y":200,"w":90,"h":90,"text":"\uE2DA","parentid":3,"click":0,"text_font":40,"text_color":"#00008B","align":"center"}
{"id":81,"obj":"label","x":6,"y":250,"w":150,"h":50,"align":"left","text":"date+3","parentid":10,"pad_top":3,"click":0,"text_font":30,"text_color":"#00008B"}
{"id":82,"obj":"label","x":120,"y":260,"w":150,"h":50,"align":"center","text":"00.0","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":20}
{"id":83,"obj":"label","x":180,"y":260,"w":150,"h":50,"align":"center","text":"00.0","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":20}
{"id":84,"obj":"label","x":280,"y":250,"w":90,"h":90,"text":"\uE2DA","parentid":3,"click":0,"text_font":40,"text_color":"#00008B","align":"center"}
{"id":91,"obj":"label","x":6,"y":300,"w":150,"h":50,"align":"left","text":"date+4","parentid":10,"pad_top":3,"click":0,"text_font":30,"text_color":"#00008B"}
{"id":92,"obj":"label","x":120,"y":310,"w":150,"h":50,"align":"center","text":"00.0","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":20}
{"id":93,"obj":"label","x":180,"y":310,"w":150,"h":50,"align":"center","text":"00.0","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":20}
{"id":94,"obj":"label","x":280,"y":300,"w":90,"h":90,"text":"\uE2DA","parentid":3,"click":0,"text_font":40,"text_color":"#00008B","align":"center"}
{"id":101,"obj":"label","x":6,"y":350,"w":150,"h":50,"align":"left","text":"date+5","parentid":10,"pad_top":3,"click":0,"text_font":30,"text_color":"#00008B"}
{"id":102,"obj":"label","x":120,"y":360,"w":150,"h":50,"align":"center","text":"00.0","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":20}
{"id":103,"obj":"label","x":180,"y":360,"w":150,"h":50,"align":"center","text":"00.0","parentid":10,"pad_top":-2,"text_font":24,"text_color":"#00008B","click":0,"text_font":20}
{"id":104,"obj":"label","x":280,"y":350,"w":90,"h":90,"text":"\uE2DA","parentid":3,"click":0,"text_font":40,"text_color":"#00008B","align":"center"}
{"page":3,"comment":"Page 3","bg_color":"#000000"}
{"id":1,"obj":"obj","x":0,"y":0,"w":480,"h":480,"bg_color":"#ffffff", "bg_grad_dir":0}
{"id":2,"parentid":1,"obj":"btn","x":10,"y":40,"w":115,"h":100,"toggle":true,"text":"\uE425\nMaster","mode":"break","align":"center","text_color":"#00008B","text_font":24}
{"id":3,"parentid":1,"obj":"btn","x":132,"y":40,"w":115,"h":100,"toggle":true,"text":"\uE425\nKind","mode":"break","align":"center","text_color":"#00008B","text_font":24}
{"id":4,"parentid":1,"obj":"btn","x":255,"y":40,"w":115,"h":100,"toggle":true,"text":"\uE425\nFlur","mode":"break","align":"center","text_color":"#00008B","text_font":24}
{"id":7,"parentid":1,"obj":"btn","x":10,"y":200,"w":115,"h":100,"toggle":true,"text":"\uE425\nWC","mode":"break","align":"center","text_color":"#00008B","text_font":24}
{"id":8,"parentid":1,"obj":"btn","x":132,"y":200,"w":115,"h":100,"toggle":true,"text":"\uE425\nWohnen","mode":"break","align":"center","text_color":"#00008B","text_font":24}
{"id":9,"parentid":1,"obj":"btn","x":255,"y":200,"w":115,"h":100,"toggle":true,"text":"\uE425\nKüche","mode":"break","align":"center","text_color":"#00008B","text_font":24}
{"id":13,"parentid":1,"obj":"btn","x":10,"y":350,"w":115,"h":100,"toggle":true,"text":"\uE425\nFeuer","mode":"break","align":"center","text_color":"#00008B","text_font":24}
{"id":14,"parentid":1,"obj":"btn","x":132,"y":350,"w":115,"h":100,"toggle":true,"text":"\uE425\nPflanze","mode":"break","align":"center","text_color":"#00008B","text_font":24}
{"id":15,"parentid":1,"obj":"btn","x":255,"y":350,"w":115,"h":100,"toggle":true,"text":"\uE425\nGarten","mode":"break","align":"center","text_color":"#00008B","text_font":24}
{"page":4,"comment":"Page 4","bg_color":"#000000"}
Template
openhasp.yam
plate1:
objects:
- obj: "p1b3" # temperature label
properties:
"text": '{{ states("sensor.wandregler_wohnen_reglung_temperatur") }}°C'
- obj: "p1b97" # hunitity label
properties:
"text": '{{ states("sensor.wandregler_wohnen_reglung_luftfeuchtigkeit") }}%'
- obj: "p0b98" # temperature label on all pages
properties:
"text": '{{ states("sensor.kellertemperatur_bmp180_temperature") }}°C'
- obj: "p1b1" # arc slider
properties:
"val": >
{% if state_attr('climate.wandregler_wohnen_reglung','temperature') is not none %}
{{ state_attr('climate.wandregler_wohnen_reglung','temperature') | int * 10 }}
{%- endif %}
"min": >
{% if state_attr('climate.wandregler_wohnen_reglung','min_temp') is not none %}
{{ state_attr('climate.wandregler_wohnen_reglung','min_temp') | int * 10 }}
{%- endif %}
"max": >
{% if state_attr('climate.wandregler_wohnen_reglung','max_temp') is not none %}
{{ state_attr('climate.wandregler_wohnen_reglung','max_temp') | int * 10 }}
{%- endif %}
"opacity": "{{ 60 if (is_state('climate.wandregler_wohnen_reglung','unavailable') or is_state('climate.wandregler_wohnen_reglung','unknown')) else 255 }}"
"click": "{{ 'false' if (is_state('climate.wandregler_wohnen_reglung','unavailable') or is_state('climate.wandregler_wohnen_reglung','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.wandregler_wohnen_reglung
data:
temperature: "{{ val | int / 10 }}"
- obj: "p1b6" # label target temp
properties:
"text": >
{% if state_attr('climate.wandregler_wohnen_reglung','temperature') is not none %}
{{ state_attr('climate.wandregler_wohnen_reglung','temperature') }}
{%- endif %}
"opacity": "{{ 60 if (is_state('climate.wandregler_wohnen_reglung','unavailable') or is_state('climate.wandregler_wohnen_reglung','unknown')) else 255 }}"
- obj: "p1b12" # Heating on/off switch
properties:
"val": "{{ 0 if (is_state('climate.wandregler_wohnen_reglung', 'boost') or is_state('climate.wandregler_wohnen_reglung', 'unavailable')) else 1 }}"
"click": "{{ 'false' if (is_state('climate.wandregler_wohnen_reglung','unavailable') or is_state('climate.wandregler_wohnen_reglung','unknown')) else 'true' }}"
"opacity": "{{ 60 if (is_state('climate.wandregler_wohnen_reglung','unavailable') or is_state('climate.wandregler_wohnen_reglung','unknown')) else 255 }}"
event:
"down":
- service_template: >
{% if val == 0 -%}
climate.turn_on
{% else -%}
climate.turn_boost
{% endif -%}
entity_id: "climate.wandregler_wohnen_reglung"
- obj: "p0b1"
properties:
"text_color": "{% if -30 <= state_attr('openhasp.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.wandregler_wohnen_reglung
data:
temperature: "{{ state_attr('climate.wandregler_wohnen_reglung','temperature') + state_attr('climate.wandregler_wohnen_reglung','target_temp_step') | float(default=1)}}"
- obj: "p1b37" # minus button for temp
event:
"down":
- service: climate.set_temperature
target:
entity_id: climate.wandregler_wohnen_reglung
data:
temperature: "{{ state_attr('climate.wandregler_wohnen_reglung','temperature') - state_attr('climate.wandregler_wohnen_reglung','target_temp_step') | float(default=1)}}"
- obj: "p1b81" # switch, checkbox or btn with toggle true
properties:
"val": '{{ 1 if is_state("switch.a1t_1", "on") else 0 }}'
"text": '{{ "\uE2DA" if is_state("switch.a1t_1", "on") else "Timer" | e }}'
event:
"down":
- service: switch.turn_on
entity_id: switch.a1t_1
- delay: '00:00:05'
- service: switch.turn_off
entity_id: switch.a1t_1
- obj: "p1b82" # switch, checkbox or btn with toggle true
properties:
"val": '{{ 1 if is_state("switch.a1t_1", "on") else 0 }}'
"text": '{{ "\uE597" if is_state("switch.a1t_1", "on") else "Schalter" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: switch.a1t_1
- obj: "p2b16" # temperature label on all pages
properties:
"text": '{{ states("sensor.wetterhoechsttemperatur0") }}°C'
- obj: "p2b22" # temperature label on all pages
properties:
"text": '{{ states("sensor.wetterniedriegtemperatur0") }}°C'
- obj: "p2b18" # Weather Icon change according to weather
properties:
"text": >
{% set forecast = states('sensor.wetterhimmel0') %}
{% if forecast == "clear-night" %}
{{ "\uE594" }}
{% elif forecast == "cloudy" %}
{{ "\uE590" }}
{% elif forecast == "fog" %}
{{ "\uE591" }}
{% elif forecast == "hail" %}
{{ "\uE592" }}
{% elif forecast == "lightning" %}
{{ "\uE593" }}
{% elif forecast == "lightning-rainy" %}
{{ "\uE67E" }}
{% elif forecast == "partlycloudy" %}
{{ "\uE595" }}
{% elif forecast == "pouring" %}
{{ "\uE596" }}
{% elif forecast == "rainy" %}
{{ "\uE597" }}
{% elif forecast == "snowy" %}
{{ "\uE598" }}
{% elif forecast == "snowy-rainy" %}
{{ "\uE67F" }}
{% elif forecast == "sunny" %}
{{ "\uE5A8" }}
{% elif forecast == "windy" %}
{{ "\uE59D" }}
{% elif forecast == "windy-variant" %}
{{ "\uE59E" }}
{% elif forecast == "exceptional" %}
{{ "\uE59E" }}
{% else %}
{% endif %}
- obj: "p2b171" # Windgeschwindigkeit label on all pages
properties:
"text": '{{ states("sensor.wetterwindgeschwindigkeit0") }}km/h'
- obj: "p2b172" # Windgeschwindigkeit label on all pages
properties:
"text": >
{% set dir = states('sensor.wetterwindrichtung0')|float %}
{% if 11.25 < dir <= 33.75 %} {{"NNO"}}
{% elif 33.75 < dir <= 56.25 %} {{"NO"}}
{% elif 56.25 < dir <= 78.75 %} {{"ONO"}}
{% elif 78.75 < dir <= 101.25 %} {{"O"}}
{% elif 101.25 < dir <= 123.75 %} {{"OSO"}}
{% elif 123.75 < dir <= 146.25 %} {{"SO"}}
{% elif 146.25 < dir <= 168.75 %} {{"SSO"}}
{% elif 168.75 < dir <= 191.25 %} {{"S"}}
{% elif 191.25 < dir <= 213.75 %} {{"SSW"}}
{% elif 213.75 < dir <= 236.25 %} {{"SW"}}
{% elif 236.25 < dir <= 258.75 %} {{"WSW"}}
{% elif 258.75 < dir <= 281.25 %} {{"W"}}
{% elif 281.25 < dir <= 303.75 %} {{"WNW"}}
{% elif 303.75 < dir <= 326.25 %} {{"NW"}}
{% elif 326.25 < dir <= 348.75 %} {{"NNW"}}
{% else %} {{"N"}}
{% endif %}
- obj: "p2b173" # Windgeschwindigkeit label on all pages
properties:
"text": >
{% set speed_ms = states('sensor.wetterwindgeschwindigkeit0') | float(0) %}
{% if speed_ms < 1 %} Stille
{% elif speed_ms < 11 %} Schwacher Wind
{% elif speed_ms < 28 %} Mäßiger Wind
{% elif speed_ms < 38 %} Frische Briese
{% elif speed_ms < 49 %} Starker Wind
{% elif speed_ms < 61 %} Steife Briese
{% elif speed_ms < 74 %} Stürmischer Wind
{% elif speed_ms < 88 %} Sturm
{% elif speed_ms < 102 %} Schwerer Sturm
{% elif speed_ms < 117 %} Orkanartiger Sturm
{% else %} Orkan
{% endif %}
- obj: "p2b62" # temperature label on all pages
properties:
"text": '{{ states("sensor.wetterhoechsttemperatur1") }}°C'
- obj: "p2b63" # temperature label on all pages
properties:
"text": '{{ states("sensor.wetterniedriegtemperatur1") }}°C'
- obj: "p2b64" # Weather Icon change according to weather
properties:
"text": >
{% set forecast = states('sensor.wetterhimmel1') %}
{% if forecast == "clear-night" %}
{{ "\uE594" }}
{% elif forecast == "cloudy" %}
{{ "\uE590" }}
{% elif forecast == "fog" %}
{{ "\uE591" }}
{% elif forecast == "hail" %}
{{ "\uE592" }}
{% elif forecast == "lightning" %}
{{ "\uE593" }}
{% elif forecast == "lightning-rainy" %}
{{ "\uE67E" }}
{% elif forecast == "partlycloudy" %}
{{ "\uE595" }}
{% elif forecast == "pouring" %}
{{ "\uE596" }}
{% elif forecast == "rainy" %}
{{ "\uE597" }}
{% elif forecast == "snowy" %}
{{ "\uE598" }}
{% elif forecast == "snowy-rainy" %}
{{ "\uE67F" }}
{% elif forecast == "sunny" %}
{{ "\uE5A8" }}
{% elif forecast == "windy" %}
{{ "\uE59D" }}
{% elif forecast == "windy-variant" %}
{{ "\uE59E" }}
{% elif forecast == "exceptional" %}
{{ "\uE59E" }}
{% else %}
{{ "\uE5A8" }}
{% endif %}
- obj: "p2b72" # temperature label on all pages
properties:
"text": '{{ states("sensor.wetterhoechsttemperatur2") }}°C'
- obj: "p2b73" # temperature label on all pages
properties:
"text": '{{ states("sensor.wetterniedriegtemperatur2") }}°C'
- obj: "p2b74" # Weather Icon change according to weather
properties:
"text": >
{% set forecast = states('sensor.wetterhimmel2') %}
{% if forecast == "clear-night" %}
{{ "\uE594" }}
{% elif forecast == "cloudy" %}
{{ "\uE590" }}
{% elif forecast == "fog" %}
{{ "\uE591" }}
{% elif forecast == "hail" %}
{{ "\uE592" }}
{% elif forecast == "lightning" %}
{{ "\uE593" }}
{% elif forecast == "lightning-rainy" %}
{{ "\uE67E" }}
{% elif forecast == "partlycloudy" %}
{{ "\uE595" }}
{% elif forecast == "pouring" %}
{{ "\uE596" }}
{% elif forecast == "rainy" %}
{{ "\uE597" }}
{% elif forecast == "snowy" %}
{{ "\uE598" }}
{% elif forecast == "snowy-rainy" %}
{{ "\uE67F" }}
{% elif forecast == "sunny" %}
{{ "\uE5A8" }}
{% elif forecast == "windy" %}
{{ "\uE59D" }}
{% elif forecast == "windy-variant" %}
{{ "\uE59E" }}
{% elif forecast == "exceptional" %}
{{ "\uE59E" }}
{% else %}
{{ "\uE5A8" }}
{% endif %}
- obj: "p2b82" # temperature label on all pages
properties:
"text": '{{ states("sensor.wetterhoechsttemperatur3") }}°C'
- obj: "p2b83" # temperature label on all pages
properties:
"text": '{{ states("sensor.wetterniedriegtemperatur3") }}°C'
- obj: "p2b84" # Weather Icon change according to weather
properties:
"text": >
{% set forecast = states('sensor.wetterhimmel3') %}
{% if forecast == "clear-night" %}
{{ "\uE594" }}
{% elif forecast == "cloudy" %}
{{ "\uE590" }}
{% elif forecast == "fog" %}
{{ "\uE591" }}
{% elif forecast == "hail" %}
{{ "\uE592" }}
{% elif forecast == "lightning" %}
{{ "\uE593" }}
{% elif forecast == "lightning-rainy" %}
{{ "\uE67E" }}
{% elif forecast == "partlycloudy" %}
{{ "\uE595" }}
{% elif forecast == "pouring" %}
{{ "\uE596" }}
{% elif forecast == "rainy" %}
{{ "\uE597" }}
{% elif forecast == "snowy" %}
{{ "\uE598" }}
{% elif forecast == "snowy-rainy" %}
{{ "\uE67F" }}
{% elif forecast == "sunny" %}
{{ "\uE5A8" }}
{% elif forecast == "windy" %}
{{ "\uE59D" }}
{% elif forecast == "windy-variant" %}
{{ "\uE59E" }}
{% elif forecast == "exceptional" %}
{{ "\uE59E" }}
{% else %}
{{ "\uE5A8" }}
{% endif %}
- obj: "p2b92" # temperature label on all pages
properties:
"text": '{{ states("sensor.wetterhoechsttemperatur4") }}°C'
- obj: "p2b93" # temperature label on all pages
properties:
"text": '{{ states("sensor.wetterniedriegtemperatur4") }}°C'
- obj: "p2b94" # Weather Icon change according to weather
properties:
"text": >
{% set forecast = states('sensor.wetterhimmel4') %}
{% if forecast == "clear-night" %}
{{ "\uE594" }}
{% elif forecast == "cloudy" %}
{{ "\uE590" }}
{% elif forecast == "fog" %}
{{ "\uE591" }}
{% elif forecast == "hail" %}
{{ "\uE592" }}
{% elif forecast == "lightning" %}
{{ "\uE593" }}
{% elif forecast == "lightning-rainy" %}
{{ "\uE67E" }}
{% elif forecast == "partlycloudy" %}
{{ "\uE595" }}
{% elif forecast == "pouring" %}
{{ "\uE596" }}
{% elif forecast == "rainy" %}
{{ "\uE597" }}
{% elif forecast == "snowy" %}
{{ "\uE598" }}
{% elif forecast == "snowy-rainy" %}
{{ "\uE67F" }}
{% elif forecast == "sunny" %}
{{ "\uE5A8" }}
{% elif forecast == "windy" %}
{{ "\uE59D" }}
{% elif forecast == "windy-variant" %}
{{ "\uE59E" }}
{% elif forecast == "exceptional" %}
{{ "\uE59E" }}
{% else %}
{{ "\uE5A8" }}
{% endif %}
- obj: "p2b102" # temperature label on all pages
properties:
"text": '{{ states("sensor.wetterhoechsttemperatur5") }}°C'
- obj: "p2b103" # temperature label on all pages
properties:
"text": '{{ states("sensor.wetterniedriegtemperatur5") }}°C'
- obj: "p2b104" # Weather Icon change according to weather
properties:
"text": >
{% set forecast = states('sensor.wetterhimmel5') %}
{% if forecast == "clear-night" %}
{{ "\uE594" }}
{% elif forecast == "cloudy" %}
{{ "\uE590" }}
{% elif forecast == "fog" %}
{{ "\uE591" }}
{% elif forecast == "hail" %}
{{ "\uE592" }}
{% elif forecast == "lightning" %}
{{ "\uE593" }}
{% elif forecast == "lightning-rainy" %}
{{ "\uE67E" }}
{% elif forecast == "partlycloudy" %}
{{ "\uE595" }}
{% elif forecast == "pouring" %}
{{ "\uE596" }}
{% elif forecast == "rainy" %}
{{ "\uE597" }}
{% elif forecast == "snowy" %}
{{ "\uE598" }}
{% elif forecast == "snowy-rainy" %}
{{ "\uE67F" }}
{% elif forecast == "sunny" %}
{{ "\uE5A8" }}
{% elif forecast == "windy" %}
{{ "\uE59D" }}
{% elif forecast == "windy-variant" %}
{{ "\uE59E" }}
{% elif forecast == "exceptional" %}
{{ "\uE59E" }}
{% else %}
{{ "\uE5A8" }}
{% endif %}
# Wochentage
- obj: "p2b61" # Day tomorrow
properties:
"text": '{{ states("sensor.date3") }}'
- obj: "p2b71" # Day today + 2
properties:
"text": '{{ states("sensor.date4") }}'
- obj: "p2b81" # Day today + 3
properties:
"text": '{{ states("sensor.date5") }}'
- obj: "p2b91" # Day today + 4
properties:
"text": '{{ states("sensor.date6") }}'
- obj: "p2b101" # Day today + 5
properties:
"text": '{{ states("sensor.date7") }}'
und mit dieser Yaml erzeuge ich die Sensoren.
Das ist bestimmt sehr umständlich aber besser bekomme ich das nicht hin
template:
- trigger:
- platform: time_pattern
minutes: "/1"
action:
- action: weather.get_forecasts
target:
entity_id:
- weather.forecast_wetter
data:
type: daily
response_variable: vorhersage
sensor:
- name: Wettervorhersage
unique_id: weather_entity_forecast
state: "{{ now().isoformat() }}"
icon: mdi:calendar-range
attributes:
forecast: "{{ vorhersage['weather.forecast_wetter'].forecast }}"
sensor:
- platform: template
sensors:
wetterhoechsttemperatur0:
friendly_name: "Hoechsttemperatur0"
unit_of_measurement: "°C"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[0].temperature }}"
wetterniedriegtemperatur0:
friendly_name: "Niedrigtemperatur0"
unit_of_measurement: "°C"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[0].templow }}"
wetterhimmel0:
friendly_name: "Himmel0"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[0].condition }}"
wetterwindgeschwindigkeit0:
friendly_name: "Windgeschwindigkeit0"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[0].wind_speed }}"
unit_of_measurement: "km/h"
wetterwindrichtung0:
friendly_name: "Windrichtung0"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[0].wind_bearing }}"
wetterhoechsttemperatur1:
friendly_name: "Hoechsttemperatur1"
unit_of_measurement: "°C"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[1].temperature }}"
wetterniedriegtemperatur1:
friendly_name: "Niedrigtemperatur1"
unit_of_measurement: "°C"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[1].templow }}"
wetterhimmel1:
friendly_name: "Himmel1"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[1].condition }}"
wetterhoechsttemperatur2:
friendly_name: "Hoechsttemperatur2"
unit_of_measurement: "°C"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[2].temperature }}"
wetterniedriegtemperatur2:
friendly_name: "Niedrigtemperatur2"
unit_of_measurement: "°C"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[2].templow }}"
wetterhimmel2:
friendly_name: "Himmel2"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[2].condition }}"
wetterhoechsttemperatur3:
friendly_name: "Hoechsttemperatur3"
unit_of_measurement: "°C"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[3].temperature }}"
wetterniedriegtemperatur3:
friendly_name: "Niedrigtemperatur3"
unit_of_measurement: "°C"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[3].templow }}"
wetterhimmel3:
friendly_name: "Himmel3"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[3].condition }}"
wetterhoechsttemperatur4:
friendly_name: "Hoechsttemperatur4"
unit_of_measurement: "°C"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[4].temperature }}"
wetterniedriegtemperatur4:
friendly_name: "Niedrigtemperatur4"
unit_of_measurement: "°C"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[4].templow }}"
wetterhimmel4:
friendly_name: "Himmel4"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[4].condition }}"
wetterhoechsttemperatur5:
friendly_name: "Hoechsttemperatur5"
unit_of_measurement: "°C"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[5].temperature }}"
wetterniedriegtemperatur5:
friendly_name: "Niedrigtemperatur5"
unit_of_measurement: "°C"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[5].templow }}"
wetterhimmel5:
friendly_name: "Himmel5"
value_template: "{{ states.sensor.wettervorhersage.attributes.forecast[5].condition }}"
date2:
friendly_name: "Datum"
entity_id: sensor.time
value_template: >
{% set days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'] %}
{{ now().timestamp() | timestamp_custom(days[now().weekday()-6] ) }}
date3:
friendly_name: "Datum3"
entity_id: sensor.time3
value_template: >
{% set days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'] %}
{{ now().timestamp() | timestamp_custom(days[now().weekday()-5] ) }}
date4:
friendly_name: "Datum4"
entity_id: sensor.time4
value_template: >
{% set days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'] %}
{{ now().timestamp() | timestamp_custom(days[now().weekday()-4] ) }}
date5:
friendly_name: "Datum5"
entity_id: sensor.time
value_template: >
{% set days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'] %}
{{ now().timestamp() | timestamp_custom(days[now().weekday()-3] ) }}
date6:
friendly_name: "Datum6"
entity_id: sensor.time6
value_template: >
{% set days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'] %}
{{ now().timestamp() | timestamp_custom(days[now().weekday()-2] ) }}
date7:
friendly_name: "Datum7"
entity_id: sensor.time7
value_template: >
{% set days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'] %}
{{ now().timestamp() | timestamp_custom(days[now().weekday()-1] ) }}
date8:
friendly_name: "Datum8"
entity_id: sensor.time8
value_template: >
{% set days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'] %}
{{ now().timestamp() | timestamp_custom(days[now().weekday()] ) }}
Sehr gern würde ich die Windrichtung als Pfeile anzeigen lassen aber da hab ich noch keine Lösung
Hallo Jens,
die Displays sehen sehr gut aus, ich kann sie sehr gut gebrauchen, danke!
Eine Frage: liegen di Bilder/Symbole auf der SD-Karte? Wie hast du es geschafft, sie anzusprechen?
Bei mir wird sie nicht erkannt. Ich benutze die Openhasp-Version 0.7.0-rc12 mit einem Display “Guition ESP32-S3-4848S040 480*480”.
Danke!
“L:/” ,das sieht nach dem normalen internen Flash aus.
Ja die Dateien werden über die OpenHasp Oberfläche auf den Internen Speicher hochgeladen.
Ja, jetzt habe ich es. Danke!
Hallo @jbst00 Dein Beispiel gefällt mir total gut. Ich versuche es gerade anzupassen.Komme aber gleich am Anfang an meine Grenzen. Du scheinst ein etwas größeres Display zu haben. Wo kann ich den Zoomfaktor (falls es sowas gibt) anpassen. Ich habe ein SC01Plus 3.5 vonb Panlee. Anbei zwei Screenshots. Gruß, AndiFidi
Hi, was hast du denn für Gehäuse? Bzw. wie hast du die Befestigt?
