Bei mir zeigt die Button Card mit der Windrichtung immer in die entgegengesetzte Richtung. Die windrose-card zeigt die Richtung korrekt an.
Der urspüngliche Code der Button Card zeigte den Pfeil verkehr an, dann hast du es irgendwann auf Wunsch einen Mitglieds angepasst, dass er in die andere Richtung zeigt.
Jetzt hatte ich gestern den neuen Code von dir vom 03. Februar getestet und der zeigt den Pfeil bei mir wieder in die falsche Richtung an. Mit ist aber der Unterschied in den Codings nicht so ganz klar, sonst hätte ich es selbst geändert
Wenn das für dich passt, dann ist das vollkommen in Ordnung.
Das kommt drauf an. Du kannst aber nicht Äpfel mit Birnen vergleichen.
Es ist ein Unterschied, ob die Anzeige die Windrichtung ist, oder die Richtung aus der der Wind kommt.
Meine Karte zeigt die Windrichtung an. Bei der Wind-Rose-Card ist das anders. Die zeigt die Richtung aus der der Wind kommt. Windrichtung Süd ist ein Wind aus der Richtung Nord.
Der Pfeil dreht sich auf einem Kreis und zeigt in die Richtung in die der Wind bläst. Der Pfeil steht also immer unten auf Süd, wenn er in Richtung Nord bläst.
Hast du eine Wetterstation auf dem Dach? Vergleiche bitte die Windfahne mit der Karte.
du hast auch das drinn stehen in der Wind-Rose Card?
rose_config:
windrose_draw_north_offset: 0
Wenn du beides so setzt und den neuen Code für die Windrichtung nimmst wird es passen. Der Code den du gezeigt hast ist leider falsch, da das die Windrichtung komplett umdreht.
Deine beiden Pfeile zeigen ja auch jeweils in die Richtung, in die der Wind weht.
Bei mir mit dem ersten Code leider nicht. Da zeigt eben der Pfeil aus der Button Card in die Richtung, aus der der Wind kommt. So wie bei dem User, der im Oktober danach gefragt hatte.
Hallo habe ein Problem! Meine aktuell Wetterzustand ändert leider weder die Hintergrundfarbe noch das Symbol. Lediglich der Text ändert von „sonnig“ auf „bewölkt“ usw.
Ich habe gesehen das Thema mal angesprochen wurde aber ich habe, das gleich proben . vielleicht kann man das noch ein weniger genauer erklären? Oder eine genaue Anleitung erstellen wie man das macht.
Das Problem hatte ich auch. Eigentlich soll man einen Helfer erstellen, der die Begriffe auf Englisch übersetzt. Ich habe einfach die if Abfragen auf englisch geändert.
ChatGPT hat mir den Code angepasst und es funktioniert soweit auch erstmal bei mir.
Das Icon Rechts wird noch nicht gezeigt… da muss ich nochmal dran
type: custom:button-card
entity: weather.dwd_wetter
layout: icon_name_state
show_state: true
show_name: false
show_label: true
icon: |
[[[
if (["rainy", "pouring"].includes(entity.state))
return "mdi:weather-rainy";
if (["cloudy", "partlycloudy"].includes(entity.state))
return "mdi:weather-cloudy";
if (entity.state == "windy" || entity.state == "windy-variant")
return "mdi:weather-windy";
if (entity.state == "fog")
return "mdi:weather-fog";
if (entity.state == "clear-night")
return "mdi:weather-night";
if (entity.state == "lightning-rainy")
return "mdi:weather-lightning-rainy";
if (entity.state == "lightning")
return "mdi:weather-lightning";
if (["snowy", "snowy-rainy", "hail"].includes(entity.state))
return "mdi:weather-snowy-heavy";
return "mdi:weather-sunny";
]]]
styles:
card:
- background-color: |
[[[
if (["rainy", "pouring"].includes(entity.state)) return "#122f5a";
if (["lightning", "lightning-rainy"].includes(entity.state)) return "#04152d";
if (["cloudy", "partlycloudy"].includes(entity.state)) return "#25252d";
if (["windy", "windy-variant"].includes(entity.state)) return "#487890";
if (entity.state == "clear-night") return "#0b084c";
if (entity.state == "fog") return "#787878";
if (["snowy", "snowy-rainy", "hail"].includes(entity.state)) return "#b1b1b1";
return "#e4b532";
]]]
- color: |
[[[
if (entity.state == "sunny") return "#a73d03";
if (["snowy", "snowy-rainy"].includes(entity.state)) return "#2a374b";
return "#b1b1b1";
]]]
- background-image: |
[[[
if (entity.state == "sunny" || entity.state == "partlycloudy")
return "url(/local/bg_img/weather-partly-cloudy22.png)";
return "url(/local/bg_img/weather-partly-cloudy10.png)";
]]]
- background-repeat: no-repeat
- background-position: right -10px top 23px
- background-size: 130px
icon:
- color: |
[[[
if (entity.state == "sunny") return "#a73d03";
if (["snowy", "snowy-rainy"].includes(entity.state)) return "#2a374b";
return "#e1e1e1";
]]]
- padding: 0
- margin: 0 0 0 -40px
name:
- display: flex
- align-items: center
- font-weight: normal
- width: 100%
- font-size: 22px
- white-space: wrap
- text-overflow: unset
- text-align: left
- padding: 0 10px 0 0
- margin: 0 0 0 -70px
label:
- margin: "-160px 0 0 0"
- text-align: right
- width: 100%
- padding: 0 19px 0 0
label: Aktuelles Wetter
tap_action: none
hold_action: none
double_tap_action: none
Ich habe den Code nochmals angepasst. Nun können eigene Farben für den Hintergrund, die Schrift sowie das Icon festgelegt werden. Außerdem wird rechts jetzt die Temperatur angezeigt.
Zusätzlich besteht die Möglichkeit, die Höhe der Karte anzupassen.
Ich weiß nicht, ob die Übersetzungen bei anderen Wetter-Integrationen Probleme verursachen, aber mit dem Deutschen Wetterdienst (DWD) funktioniert es gut.
type: custom:button-card
entity: weather.dwd_wetter # Hier eigene Wetter Integration eintragen
show_state: true
show_name: false
show_label: false
variables:
text_color: |
[[[
if (entity.state == "sunny") return "#ffffff";
if (["snowy", "snowy-rainy", "hail"].includes(entity.state)) return "#2a374b";
if (["fog", "cloudy", "partlycloudy", "windy", "windy-variant"].includes(entity.state)) return "#e1e1e1";
return "#e1e1e1";
]]]
bg_color: |
[[[
if (["rainy", "pouring"].includes(entity.state)) return "#48778cff";
if (["lightning", "lightning-rainy"].includes(entity.state)) return "#263745ff";
if (["cloudy", "partlycloudy"].includes(entity.state)) return "#1c2934ff";
if (["windy", "windy-variant"].includes(entity.state)) return "#48778cff";
if (entity.state == "clear-night") return "#0b084c";
if (entity.state == "fog") return "#7a8c99ff";
if (["snowy", "snowy-rainy", "hail"].includes(entity.state)) return "#b1b1b1";
return "#1c1c1c";
]]]
icon_color: |
[[[
if (entity.state == "sunny") return "#e4b532";
if (["rainy", "pouring"].includes(entity.state)) return "#03a9f4ff";
if (["windy", "windy-variant"].includes(entity.state)) return "#03a9f4ff";
if (["lightning", "lightning-rainy"].includes(entity.state)) return "#e4b532";
if (["snowy", "snowy-rainy", "hail"].includes(entity.state)) return "#ffffff";
if (["fog", "cloudy", "partlycloudy", "windy", "windy-variant"].includes(entity.state)) return "#48778cff";
if (entity.state == "clear-night") return "#e4b532";
return "#e1e1e1";
]]]
custom_fields:
temp: |
[[[
return entity.attributes.temperature + "°C";
]]]
icon: |
[[[
if (["rainy", "pouring"].includes(entity.state)) return "mdi:weather-rainy";
if (["cloudy", "partlycloudy"].includes(entity.state)) return "mdi:weather-cloudy";
if (["windy", "windy-variant"].includes(entity.state)) return "mdi:weather-windy";
if (entity.state == "fog") return "mdi:weather-fog";
if (entity.state == "clear-night") return "mdi:weather-night";
if (entity.state == "lightning-rainy") return "mdi:weather-lightning-rainy";
if (entity.state == "lightning") return "mdi:weather-lightning";
if (["snowy", "snowy-rainy", "hail"].includes(entity.state)) return "mdi:weather-snowy-heavy";
return "mdi:weather-sunny";
]]]
styles:
grid:
- grid-template-areas: "\"i s temp\""
- grid-template-columns: 60px minmax(0, 1fr) max-content
- grid-template-rows: 1fr
- align-items: center
card:
- padding: 0 20px
- height: 70px
- background-color: "[[[ return variables.bg_color ]]]"
- background-image: |
[[[
if (entity.state == "sunny" || entity.state == "partlycloudy")
return "url(/local/bg_img/weather-partly-cloudy22.png)";
return "url(/local/bg_img/weather-partly-cloudy10.png)";
]]]
- background-repeat: no-repeat
- background-position: right -10px top 23px
- background-size: 120px
icon:
- width: 60px
- margin: 0
- align-self: center
- color: "[[[ return variables.icon_color ]]]"
- filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.2))
state:
- justify-self: start
- align-self: center
- margin: 0 15px 0 10px
- font-size: 22px
- font-weight: bold
- color: "[[[ return variables.text_color ]]]"
- white-space: normal
- line-height: 1.1
- text-align: left
custom_fields:
temp:
- justify-self: end
- align-self: center
- margin: 0
- font-size: 40px
- font-weight: bold
- color: "[[[ return variables.text_color ]]]"
tap_action:
action: navigate
navigation_path: "#Wetter"
hold_action: none
double_tap_action: none
grid_options:
columns: full
Das ist absolut korrekt. Allerdings handelt es sich auch nicht mehr um den aktuellen Code bei mir. Die Beiträge kann ich selbst nicht bearbeiten und müsste dazu jedesmal Harryp bemühen. Ich denke insgesamt sollte man den Code auch als Anstoss verstehen und sich nicht zwangsläufig auf Aktualität verlassen.
Derzeit sieht es so aus:
{% set steigt = states('binary_sensor.rel_luftdruck_steigt') %}
{% set faellt = states('binary_sensor.rel_luftdruck_fallt') %}
{% if steigt in ['unavailable', 'unknown'] or faellt in ['unavailable', 'unknown'] %}
Unbekannt
{% elif steigt == 'on' %}
Steigend
{% elif faellt == 'on' %}
Fallend
{% else %}
Gleichbleibend
{% endif %}
Warum?
Mache ich immer so, damit Sensoren nur einmal abgefragt werden. Im Scriptteil kann man dann auf die Variablen zurückgreifen.
Bei Verbindungsproblemen wird nicht “gleichbleibend” angezeigt, sondern unbekannt.
Die Icons in der Karte lade ich ebenfalls mittlerweile so:
{% set steigt = states('binary_sensor.rel_luftdruck_steigt') %}
{% set faellt = states('binary_sensor.rel_luftdruck_fallt') %}
{% if steigt in ['unavailable', 'unknown'] or faellt in ['unavailable', 'unknown'] %}
mdi:help-circle-outline
{% elif steigt == 'on' %}
mdi:weather-sunny
{% elif faellt == 'on' %}
mdi:weather-pouring
{% else %}
mdi:weather-partly-cloudy
{% endif %}
Bei Problemen wird dann nicht unbekannt oder so angezeit, sondern ein Fragezeichen-icon
Sehr gute Idee mit der Karte für das Klima Empfinden.
Ich würde ne kleine Verbesserung anregen wollen. ich würde einen fehlenden Wert abfangen. Also zum Beispiel möchte ich nicht das die Karte “angenehm” anzeigt, wenn der Sensor nicht erreichbar ist, also eigentlich unavailable ist… Dann soll etwas passendes dort auch erscheinen.
Außerdem würde ich das eher in einem Helfer abbilden und nicht direkt in der Gauge Karte.
