HowTo: Wetterdashboard für Anfänger

Dashboard/Cards/Frontend
, , ,
56

Ich habe mal den Code für die Windrichtung in der Custom Button Card angepasst. Der oben gezeigte Helfer hat sich nicht verändert.

Warum?

  1. Code wurde deutlich verschlankt.
    Keine unnötigen if-Abfragen mehr.

  2. Keine verschiedenen Symbole für verschiendene Windrichtungen zugewiesen.

    Nur 1 Symbol, das abhängig von der Windrichtung mit einer schönen Animation gedreht wird.

  3. Wenn der Sensor keine Zahl ausgibt (also z.B. bei unavailable) wird das Symbol rot und zeigt nach oben (0 Degree)

Gerne mitnehmen wer’s gebrauchen kann. :slight_smile:

type: custom:button-card
entity: sensor.windrichtung
layout: icon_name_state
show_state: true
show_label: true
show_name: false
triggers_update:
  - sensor.gw1100a_wind_direction
variables:
  winkel: |
    [[[
      /* SLANG: In eine Fließkommazahl umwandeln und Status des Sensors in die Varibale laden */
      return parseFloat(states['sensor.gw1100a_wind_direction'].state);
    ]]]
icon: mdi:arrow-up-thin-circle-outline
styles:
  icon:
    - color: |
        [[[
          /* SLANG: Prüfen ob es eine gültige Zahl ist, wenn nicht wird der Pfeil rot. */
          return (isNaN(variables.winkel)) ? '#f00' : '#e1e1e1';
        ]]]
    - padding: 0
    - margin: 0 0 0 -40px
    - transition: all 0.5s ease
    - transform: |
        [[[
          /* SLANG: Prüfen ob es eine gültige Zahl ist, wenn nicht zeigt der Pfeil nach oben. */
          return (isNaN(variables.winkel)) ? 'rotate(0deg)' : `rotate(${variables.winkel}deg)`;
        ]]]
  card:
    - background-color: "#323232"
    - background-image: url(/local/bg_img/compass-rose-tn10.png)
    - background-repeat: no-repeat
    - background-position: right -20px top 29px
    - background-size: 160px
    - color: "#e1e1e1"
  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: Windrichtung
tap_action: none
hold_action: none
double_tap_action: none
section_mode: true
grid_options:
  rows: 2
  columns: full