Zeigt her eure Dashboards!

Hallo Meowmoo,

sieht super aus. Könntest du den Code teilen ?

Vielen Dank und viele Grüße

Reimar

Dann mal ein Update meines Dashboards. Bedingung ist, dass es sowohl am Rechner, als auch am Tabet an der Wand, sowie am Handy zumindest im Querformat, funktioniert UND - abgesehen vom Handy - nicht gescrollt werden muss.

Alles was man sieht löst entweder selbst eine Aktion aus oder führt in ein Unterdashboard bzw. ein anderes Dashboard.

du brauchst vertical-stack-in-card, text-divider-row und button card. Gibts alles in HACS
Zum An/Aus schalten braucht man
https://github.com/FunkeyFlo/ps5-mqtt
Um die Playtime zu speichern braucht man
https://github.com/danieldotnl/ha-measureit
Die Condition template zum aufzeichen sieht so aus

{{ is_state('sensor.psn_status', 'Playing') }}

Ich hab die Entitäten nach dem erstellen auf min umgestellt! kannst in den optionen der entität machen. Wenn du es auf sec lässt musst du die Template für die Zeit anpassen.

Hier sind die icons
https://drive.google.com/drive/folders/1FrKhWUo0vxkmMukHsvwFd893wiM5UE0W?usp=drive_link

Für beide PS5 Addons braucht man einen npso Authenticating Manually | psn-api
der läuft leider iwan ab, und dann muss man einen neuen erstellen…
Hoffe ich hab nix vergessen :stuck_out_tongue:
sonst einfach melden

Code

type: custom:vertical-stack-in-card
cards:
  - type: custom:text-divider-row
    text: Playstation
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:button-card
        entity: sensor.psn_status
        show_name: false
        label: ps5
        show_label: false
        show_entity_picture: true
        entity_picture: |
          [[[ 
            if (entity.state == 'Playing') {
              return states['media_player.ps5_console'].attributes.entity_picture;
             } else {
               return '/local/ps5/ps.png';
             }
          ]]]
        custom_fields:
          playtime: |
            [[[
              const rawValue = states['sensor.ps5_time_day'].state;
              const floatValue = parseFloat(rawValue);
              const hours = Math.floor(floatValue / 60);
              const minutes = Math.floor(floatValue % 60);
              let output = 'Today: ';
              if (hours > 0) {
                output += `${hours}h `;
              }
              output += `${minutes}min`;
              return output;
            ]]]
          play_count: |
            [[[
              return `Play Count: ${states['sensor.psn_status'].attributes.play_count}`;
            ]]]
          playtime_total: |
            [[[
              return `Total Played: ${states['sensor.psn_status'].attributes.play_duration}`;
            ]]]
          tagline: |
            [[[
              if (entity.attributes.description) {
                const description = entity.attributes.description.slice(0, 100);
                if (description.length > 50) {
                  let breakIndex = 50;
                  while (breakIndex >= 0 && !/\s/.test(description[breakIndex])) {
                    breakIndex--;
                  }
                  if (breakIndex === -1) {
                    breakIndex = 50; 
                  }
                  return description.slice(0, breakIndex) + '<br>' + description.slice(breakIndex + 1);
                } else {
                  return description;
                }
              } else {
                return '';
              }
            ]]]
        styles:
          grid:
            - position: relative
          custom_fields:
            playtime_total:
              - text-shadow: 1px 1px 1px black
              - position: absolute
              - left: 10px
              - bottom: 10px
              - font-size: 12px
              - line-height: 15px
            play_count:
              - text-shadow: 1px 1px 1px black
              - position: absolute
              - left: 10px
              - bottom: 30px
              - font-size: 12px
              - line-height: 15px
            playtime:
              - background-color: null
              - text-shadow: 1px 1px 1px black
              - position: absolute
              - right: 10px
              - bottom: 10px
              - font-size: 12px
              - line-height: 15px
            tagline:
              - text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black
              - position: absolute
              - left: 50%
              - transform: translateX(-50%)
              - top: '-16px'
              - font-size: 14px
              - font-style: oblique;
        state:
          - value: Offline
            styles:
              card:
                - filter: opacity(50%)
                - height: 50px
              custom_fields:
                playtime:
                  - filter: opacity(0%)
                  - color: null
                  - background-color: null
                  - text-shadow: 1px 1px 1px black
                  - position: absolute
                  - left: 5px
                  - bottom: null
                  - font-size: 12px
                  - line-height: 15px
                play_count:
                  - filter: opacity(0%)
                  - color: null
                  - background-color: null
                  - text-shadow: 1px 1px 1px black
                  - position: absolute
                  - left: 5px
                  - bottom: null
                  - font-size: 12px
                  - line-height: 15px
                playtime_total:
                  - filter: opacity(0%)
                  - color: null
                  - background-color: null
                  - text-shadow: 1px 1px 1px black
                  - position: absolute
                  - left: 5px
                  - bottom: 0px
                  - font-size: 12px
                  - line-height: 15px
              entity_picture: null
          - value: Online
            styles:
              card:
                - filter: opacity(50%)
                - height: 50px
              custom_fields:
                playtime:
                  - filter: opacity(0%)
                  - color: null
                  - background-color: null
                  - text-shadow: 1px 1px 1px black
                  - position: absolute
                  - left: 5px
                  - bottom: null
                  - font-size: 12px
                  - line-height: 15px
                play_count:
                  - filter: opacity(0%)
                  - color: null
                  - background-color: null
                  - text-shadow: 1px 1px 1px black
                  - position: absolute
                  - left: 5px
                  - bottom: null
                  - font-size: 12px
                  - line-height: 15px
                playtime_total:
                  - filter: opacity(0%)
                  - color: null
                  - background-color: null
                  - text-shadow: 1px 1px 1px black
                  - position: absolute
                  - left: 5px
                  - bottom: 0px
                  - font-size: 12px
                  - line-height: 15px
              entity_picture: null
          - value: Playing
            styles:
              entity_picture:
                - height: 97%
                - width: 97%
              card:
                - height: null
        tap_action:
          action: call-service
          service: input_boolean.toggle
          data: {}
          target:
            entity_id: input_boolean.lovelace_media_stats
        hold_action:
          action: call-service
          confirmation:
            text: Playstation an/aus schalten?
          service: switch.toggle
          data: {}
          target:
            entity_id: switch.ps5_power
  - type: conditional
    conditions:
      - condition: state
        entity: sensor.psn_status
        state: Playing
    card:
      type: horizontal-stack
      cards:
        - type: custom:button-card
          entity: sensor.psn_status
          layout: icon_name_state
          show_entity_picture: true
          size: 50%
          entity_picture: |
            [[[ return '/local/ps5/platinum.png' ]]]
          name: |
            [[[
              return `${states['sensor.psn_status'].attributes.earned_trophies.platinum}/${states['sensor.psn_status'].attributes.trophies.platinum}`;
            ]]]
          show_name: true
          show_state: false
          show_icon: true
          styles:
            name:
              - font-size: 12px
              - margin-right: 10px
            state:
              - font-size: 12px
        - type: custom:button-card
          entity: sensor.psn_status
          layout: icon_name_state
          show_entity_picture: true
          size: 50%
          entity_picture: |
            [[[ return '/local/ps5/gold.png' ]]]
          name: |
            [[[
              return `${states['sensor.psn_status'].attributes.earned_trophies.gold}/${states['sensor.psn_status'].attributes.trophies.gold}`;
            ]]]
          show_name: true
          show_state: false
          show_icon: true
          styles:
            name:
              - font-size: 12px
              - margin-right: 10px
            state:
              - font-size: 12px
        - type: custom:button-card
          entity: sensor.psn_status
          layout: icon_name_state
          show_entity_picture: true
          size: 50%
          entity_picture: |
            [[[ return '/local/ps5/silver.png' ]]]
          name: |
            [[[
              return `${states['sensor.psn_status'].attributes.earned_trophies.silver}/${states['sensor.psn_status'].attributes.trophies.silver}`;
            ]]]
          show_name: true
          show_state: false
          show_icon: true
          styles:
            name:
              - font-size: 12px
              - margin-right: 10px
            state:
              - font-size: 12px
        - type: custom:button-card
          entity: sensor.psn_status
          layout: icon_name_state
          show_entity_picture: true
          size: 50%
          entity_picture: |
            [[[ return '/local/ps5/bronze.png' ]]]
          name: |
            [[[
              return `${states['sensor.psn_status'].attributes.earned_trophies.bronze}/${states['sensor.psn_status'].attributes.trophies.bronze}`;
            ]]]
          show_name: true
          show_state: false
          show_icon: true
          styles:
            name:
              - font-size: 12px
              - margin-right: 10px

1 „Gefällt mir“

Hallo zusammen,

die KI kann mir hier irgendwie auch nicht helfen, wie ich den Inhalt der Kacheln zentriert bekomme:

cards:
  - type: tile
    entity: sensor.hu_k_k_humidity
    card_mod:
      style: |
        :host {
                  {% set hum = states('sensor.hu_k_k_humidity') | float(0) %}
                  {% if hum < 30 %}
                  --card-mod-icon-color: darkred;
                  {% elif hum <= 40 %}
                  --card-mod-icon-color: red;
                  {% elif hum <= 50 %}
                  --card-mod-icon-color: orange;
                  {% elif hum <= 60 %}
                  --card-mod-icon-color: yellow;
                  {% elif hum <= 70 %}
                  --card-mod-icon-color: green;
                  {% elif hum <= 80 %}
                  --card-mod-icon-color: lightblue;
                  {% elif hum <= 90 %}
                  --card-mod-icon-color: blue;
                  {% elif hum <=95 %}
                  --card-mod-icon-color: darkblue;
                  {% endif %}
                }
    name: Keller
    tap_action:
      action: navigate
      navigation_path: /lovelace/0
show_name: true
show_icon: true

Mit

display: flex;
justify-content: center;
text-align: center;
align-items: center;

Sieht es nicht so schön aus:



Die Kachel “Keller” darf sich in dem Fall ruhig über die komplette Breite erstrecken. Auch “Bad” darf die Hälfte einnehmen.

So, ich zeig mal was ich die letzten 2 Jahre so aus 2 ipad Air gemacht habe, eins im EG, eins im OG
Alle Seiten öffnen sich beim entsprechendem Druck auf das passende Element auf den Startseiten:

Startseite EG


Startseite OG

Alle Lichter

Fenster und Türen

Noch mehr Wetter, bau ich aber noch um auf mein eigene Wetter-Karte

Klima Innen (bäh…schwül heute, aber es gewittert grad und kühlt zum Glück ab.

Klima aussen

Kalender

Unser Waage Dashboard, Person auswählen und auf die Waage stellen

Klimaautomat Schlafzimmer (Dachgeschoss)

ZugInfos

Businfos

Unwetterwarnungen im Detail

Wenn das Kind zum Chindsgi muss, bzw. ab Herbst in die Schule

Wenn Post kommt

Alarm-Warnungen, das nationale Alarmsystem kommt noch dazu (mit Ton :wink: )

Und wenn es gut ist zum Lüften, Text ändert sich je nach Klima in den Etagen

4 „Gefällt mir“

Wie hast du das mit dem Lüften gebaut? Also was genau tut das? :blush:

Wenn es draussen 2 Grad kälter als im OG bzw. EG oder Generell ist und es mehr als 22 Grad im Haus sind und vor Mitternacht, dann wird dieses Dahboard via Browser-Mod aus einer Automation heraus aktiviert.

1 „Gefällt mir“

Dann möchte ich mich auch mal vorstellen.
Ich bin Robert und seit unserem Neubau im Jahr 2020 habe ich Home Assistant lieben und schätzen gelernt. Unser Free@Home von Busch Jäger war mir einfach zu eingeschränkt. Das Projekt ist dann einfach immer weiter gewachsen.

Aktuell läuft HA auf nem Proxmox Server mit vielen Automationen (zb. Automatische Verschattung via Node-Red anhand Sonnenstand , Winkel und Wetterdaten…) Das hätte ich mit Free@Home niemals so realisieren können…

Hier mal unser Dashboard vom Fire-Tablet im Flur.

Für die mobile App, hier mal ein paar Ansichten…
Ich mag es schlicht.

Oben links immer der aktuelle Name des Dashboards. Oben rechts gelangt man immer zum Home Dashboard.


Hier mal das Thema Energie mit Überschussrechnung durch auslesen des Stromzählers und der PV-Anlage


Hier habe ich eine Fernbedienung für mein Kino realisiert…

Das war ein ganzes Stück Arbeit. Ich bin Happy


:crayon:by HarryP: Zusammenführung Mehrfachpost

5 „Gefällt mir“

Ich meine die Button-Card kann das. Schaut dir Mal das GitHub Repo an.

1 „Gefällt mir“

Ich habe mir ein extra Dashboard gebaut, da mir die Seitenleiste zu voll war.

Auf der Linken Seite sind Verknüpfungen zu Seite/Addons in Home Assistant und Lokalen Netz die ich regelmäßig benutze.
Der Rest sind Infos die nicht schaden wen man da mal regelmäßig drauf schaut.

Wenn Updates für Proxmox vorhanden sind wird mir das auch angezeigt, wo jetzt 0 steht steht dann die Anzahl verfügbarer Updates:
image

Wenn ich den Wlan Gastzugang starte kommt wir automatisch der QR-Code zum verbinden angezeigt.

Ändert sich bestimmt noch mal was dran, aber fürs erste reicht es mir.

LG
Tobi

3 „Gefällt mir“

Gute Idee und schön übersichtlich. Holst du die proxmox-Daten hierüber?
https://github.com/dougiteixeira/proxmoxve

Ja, genau die Integration verwende ich.

Edit:

So sieht der bereich der Synology NAS aus wen die nicht aus ist

image

Wie hast Du das alles mit dem NAS gemacht? Offline etc. etc.?

Ich bin über die Sichtbarkeit gegangen, hier die Mushroom Template Karte die ich anzeige wen das NAS Offline ist: state = Nicht verfügbar


Bei den anderen ist das halt andersrum: state ≠ Nicht verfügbar

1 „Gefällt mir“

Okay, danke! Die wollte ich auch schon längst eingerichtet haben, aber komme einfach nicht dazu. :see_no_evil:

@ciddi89
ich habe ja einige Dinge von dir entnommen, so u.a. die Beschriftung ganz oben auf den Seiten, aber mir ist es nicht gelungen sowohl für den Haupttitel noch den Untertitel die Textfarbe zu ändern.
Laut Beschreibungen habe ich einiges gefunden aber nichts funktioniert.
Ich habe es mit “card_mod” direkt in der mushroom-title-card unter subtitle ausprobiert.
Das einzige was funktioniert ist der Schriftstil “italic”
Hier mal meine Versuche.

   card_mod:
      style: |
        ha-card {
          --card-primary-color: blue;
          --card-secondary-color: orange;
          --card-primary-color: yellow;
          --primary-text-color: blue;
          --secondary-text-color: lime;
          --text-color: blue;
          font-style: italic;         
           }

Sehr interessante HACS-Integration (frontend) zur Darstellung von mehreren Entitäten in einer Karte:

Hi,
Probiere es mal mit:

card_mod:
  style: |
    ha-card {
      --title-color: orange;
      --subtitle-color: orange;
    }

Manchmal kann es ganz einfach sein :grinning:

Was mir noch nicht gelingt ist das eintragen der Temperatur mit einer farblichen Anpassung

Inzwischen waren die Entwickler der SunSylk PowerFlow-Card sehr fleißig, haben die Informationsvielfalt sehr stark erweitert und fast alles über das UI konfigurierbar gemacht. Zusätzlich wurden noch die Besonderheiten von 20 WR mit aufgenommen, so dass der Name fast irreführend ist. Hier mein aktuelles Power-Flow Dashboard:

Die Farben von Grid, Batterie und Home passen sich automatisch dem jeweiligen Betriebszustand an, wenn man möchte.

8 „Gefällt mir“