Zeigt her eure Dashboards!

Für die Temp und Luftfeuchte, sind das die mini-graph. Falls ja, Gefällt mir gut, kannst du mal ein inhalt poste

Hi,

ja es sind mini-graph.

Hier der Code. Ich glaube aber das er noch verbessert werden kann. Den horizontal stack hätte ich gar nicht setzen müssen, wenn ich den vertical-stack-in als horizontal beschrieben hätte.

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - color_thresholds:
          - color: '#fe2712'
            value: 26
          - color: '#fefe33'
            value: 23
          - color: '#66b032'
            value: 21
          - color: '#0000cd'
            value: 19
        color_thresholds_transition: smooth
        entities:
          - entity: sensor.lumi_lumi_weather_temperature_3
            name: Wohnzimmer
        group: false
        hour24: true
        line_width: 2
        points_per_hour: 4
        height: 60
        show:
          extrema: true
          fill: fade
          icon: false
          labels: false
          name: true
          state: true
        type: custom:mini-graph-card
      - color_thresholds:
          - color: '#0000cd'
            value: 75
          - color: '#436eee'
            value: 65
          - color: '#66b032'
            value: 55
          - color: '#ffd700'
            value: 45
        color_thresholds_transition: smooth
        entities:
          - entity: sensor.lumi_lumi_weather_humidity_3
            name: []
        group: false
        hour24: true
        line_width: 2
        points_per_hour: 4
        height: 60
        show:
          extrema: true
          fill: fade
          icon: false
          labels: false
          name: true
          state: true
        type: custom:mini-graph-card

Gruß …

2 „Gefällt mir“

Hallo,

hier noch unser Handy Dashboard.

Gruß …

3 „Gefällt mir“

@Jerry.L Das sieht ziemlich gut aus. Da werde ich mir ein bisschen was abgucken.
Die “Emma” finde ich genial :smiley:
Hast du die mit Cardmod animiert, wenn die läuft?
6ef9912646d6d1aa28954bc7789e398189246ebb

Hi,

gesehen habe ich diese animierten Icons schon. Aber beschäftigt habe ich mich bis jetzt noch nicht damit. Glaube auch nicht das ich sie in naher Zukunft nutzen möchte.

Bis denne …

Das sieht echt super aus.
Einfach und klar strukturiert.

Wäre es vielleicht möglich, dass du deinen YAML Code dazu mit uns teilst?

Vorallem die großen Buttons würden mich interessieren. Sind die mit Buttons-Card gemacht worden?

Hey Jerry, sag mal welche Lunos Anlage hast du und wie steuerst du die an?

Vielen Dank

Hi,

wir haben in den Wohnräumen die e2 und in der Küche, Bäder, HWR die Ego‘s.

Standardmäßig waren sie mit den bekannten zwei Kippschalter angeschlossen.

Nach ein wenig Recherche habe ich einen Schaltplan für den Anschluss von Shelly Uni‘s gefunden.

Einfach hinter den Schalter parallel angeschlossen.

In Home Assistant ein paar Helfer erstellt.

Passende Automatisierungen in Node Red erstellt und ab damit auf Dashboard.

Mich würde der Code für das animierte Icon auch sehr interessieren.

Daran soll es nicht scheitern. Hier der Code für die Waschmaschine.
das icon steht still und ist grau, wenn die Maschine nicht läuft
sobald die entität auf “on” geht, wird das Icon gelb, die Animation läuft und der Spaß beginnt :rofl:

type: custom:mushroom-template-card
entity: switch.waschmaschine
icon: mdi:washing-machine
icon_color: |-
  {% if is_state(config.entity,'on') %}
    yellow
  {% else %}
    grey
  {% endif %}
primary: Waschmaschine
card_mod:
  style:
    mushroom-shape-icon: |
      ha-state-icon {
        animation: {{ 'shake 400ms ease-in-out infinite, drum 2s ease infinite' if is_state(config.entity, 'on') else 'none' }};
        transform-origin: 50% 110%;
      }
       @keyframes shake {
         0%, 100% { transform: translate(0, 0) rotate(0); }
         20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
         40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
         60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
         80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
       }
       @keyframes drum {
         20%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
       }
1 „Gefällt mir“

Danke dir!

Ich will noch einen Card-Style einführen, weiß aber nicht, wie ich die beiden Codeschnipsel miteinander verbinde. Hier mein versuch, der aber dann die Animation abschneidet (habe den Part mit ha-card eingefügt)…

card_mod:
  style: |
    ha-card
    { background: transparent;
      width: 200px;    
    }
     mushroom-shape-icon: 
       {% if is_state(config.entity,'on') %}    
         ha-state-icon {
           animation: {{ 'shake 400ms ease-in-out infinite, drum 2s ease infinite' if is_state(config.entity, 'on') else 'none' }};
           transform-origin: 50% 110%;
        }

Auf den ersten Blick hast du ein Leerzeichen zu viel vor dem mushroom-shape-Icon und zum zweiten kannst du die if Abfrage danach weg lassen da diese ja schon in der Animation mit angegeben ist. Davon abgesehen fehlen dann da sowieso geschweifte Klammern glaub. Also die Zeile kannst löschen. :slight_smile:

Edit: und das | hast du auch raus gelöscht? Lass das doch so wie das in der Vorlage von @Comander ist

1 „Gefällt mir“

Ich bin da noch sehr unsicher. Card_mod ist eine mächtige Komponente und mir erklärt sich das manchmal nicht so unbedingt. ICh meine aber du kannst transparent nicht nehmen, wenn wäre es “none”

transparent funktioniert, aber bei deinem Code den du genannt hattest wird dann wieder nur das “transparent” ausgeführt und die Animation fällt weg… Sehr komisch

die if-Abfrage ist wieder raus… die bereits implementierte hatte bei mir erst nach einem Refresh funktioniert… der Card-Style ist aber sehr wichtig für mich, da er sich sonst überhaupt nicht in mein Dashboard integriert…

so funktioniert es bei mir nun mit Animation und transparentem Hintergrund:
grafik

transparenter geht nicht :slight_smile:

type: custom:mushroom-template-card
entity: switch.steckdose_wanddisplay_switch_0
icon: mdi:washing-machine
icon_color: |-
  {% if is_state(config.entity,'on') %}
    yellow
  {% else %}
    grey
  {% endif %}
primary: Waschmaschine
card_mod:
  style:
    mushroom-shape-icon: |
      ha-state-icon {
        animation: {{ 'shake 400ms ease-in-out infinite, drum 2s ease infinite' if is_state(config.entity, 'on') else 'none' }};
        transform-origin: 50% 110%;
      }
       @keyframes shake {
         0%, 100% { transform: translate(0, 0) rotate(0); }
         20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
         40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
         60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
         80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
       }
       @keyframes drum {
         20%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
       }
      ha-card { 
          background: transparent !important;
        }

Danke, das funktioniert!

Habe gerade auch noch in einem englischen Forum gelesen, dass die korrekte Schreibweise zwischen den beiden “Elementen” ein: .: | beinhaltet.

Tu dir keine Zwang an und passe den Code an. Wie gesagt ich bin da kein Profi, aber zumindest funktionierts :face_with_monocle:

@ciddi89
eine Frage zu deinen Eiswarnungen kommen die auch über DWD. Ich habe DWD auch drin aber die haben ja bei den Warnungen nur 2 Entitäten die Aktuelle Warnung und die Vorwarnstufe.

Ne diese hole ich von Eiswarnung.de per Rest Api. Bin aber in Gegensatz zu den letzten Jahren, dieses Jahr sehr enttäuscht davon. Irgendwie waren die Vorhersagen dieses Jahr so lala. Die Jahre davor war das sonst immer mega zuverlässig. Falls doch Interesse besteht. Api Key auf Eiswarnung.de erstellen und hier ist der Sensor:

# Sensor für Eiswarner
- platform: rest
  scan_interval: 7200
  name: eiswarnung_ortname
  resource: https://api.eiswarnung.de?key=hierApiKeyEinfügen&lat=54.33&lng=7.28
  json_attributes:
    - success
    - message
    - callsLeft
    - callsDailyLimit
    - callsResetInSeconds
    - result
  value_template: "{{ value_json.result.forecastText }}"

Name, HierApiKeyEinfügen, Lat und Lng muss dann dementsprechend angepasst werden