Zeigt her eure Dashboards!

Vielen lieben Dank - Code eingefügt und perfekt !! :smiley: Danke Dir :v:

Dann zeige ich euch auch mal wie mein Dashboard aussieht. Bin noch nicht fertig, aber wann ist man das schon? Man findet ja immer wieder was man optimieren und verbessern kann. Versuche das alles kompakt zu halten und arbeite daher viel mit pop ups und tabbed card.

So sieht das auf dem Smartphone aus:

Und so auf dem PC / Tablet:

Paar Beispiele von den PopUps:





Und hier die restlichen Seiten/Tabs:




Heftig! Da bin ich noch weit von entfernt!
Wie hast du den dunkeln Modus hinbekommen?

Aber dass ihr euch alle über die Müllabholung informieren lässt… Bei mir machen das die Nachbarn :smile:

Haha ja meine Nachbarn sind da sehr unzuverlässig und ich vergesse das ganz gerne mal. :smiley:

ja bin auch schon ein paar Wochen dabei. Immer mal wieder was anpassen. Habe auch noch paar Ideen die ich noch ändern will bzw. was ich noch anzeigen lassen will.

Das Theme basiert auf das Google Theme. Ich habe aber schon soviel daran geändert und hinzugefügt das ich am Überlegen bin das alles neu und sauber zu schreiben und evtl. auf GitHub veröffentliche zur freien Nutzung. Am Tag bzw. je nachdem wie das Endgerät eingestellt ist, ist es auch ein Helles Design. Der Fokus liegt aber auf das Dunkle Design da ich das einfach liebe :slight_smile:

Wie hast du denn die Prozent-Balken (z.B. bei CPU) hinbekommen?

mit der Bar-Card

hier der Code:

          - type: custom:bar-card
            width: 55%
            height: 1.8em
            decimal: 0
            unit_of_measurement: '%'
            positions:
              icon: outside
              indicator: 'off'
              name: outside
              value: inside
            severity:
              - color: null
                from: 85
                to: 999
            entity_row: true
            entities:
              - entity: sensor.node_pve_cpu_auslastung
                name: CPU Auslastung
            style: |-
              bar-card-value {
                margin-right: auto;
                font-size: 12px;
                font-weight: bold;
              }

Könntest Du mir mal bitte sagen, wo ich so eine Farbtabelle finde, um die Werte der Farben zu finden (Hintergrund Button) ?

Sowas? Farbtabelle - Farbtafel - Farbcodes

ich wollte die Hue Buttons machen - da ist ein Verlauf drin

Hierüber mache ich es immer
Schönen Sonntag

Vielen lieben Dank, auch Dir einen schönen Sonntag !!

Hallo

Gefällt mir wirklich sehr gut. Könntest du den Code zu Verfügung stellen damit ich das Teile verwenden kann?

lg

sieht sehr nice aus!
Könntest du mir bitte sagen wie du das mit dem Harmony Hub und den unterschiedlichen Aktivitäten gemacht hast? :slight_smile:
Danke!

Habs mal schnell den gesamten Code vom Dashboard bei Github gist hochgeladen. Hier der Link:

@4-Real Das ist die Service Call tile feature Karte ganz unten steht der Code. Ich musste aber einen Helfer erstellen von typ input_select und einer Automation erstellen die die select von harmony input select überträgt da die karte bisher nur das unterstützt. Zumindest war das so wo ich das erstellt hatte. Falls Interesse daran besteht wie die Automation bei mir aussieht bescheid geben. Dann Zeige ich meinen Code. Und hier erstmal der Code von der Karte selber:

- type: tile
  entity: remote.harmony_hub
  hide_state: true
  features:
     type: custom:service-call
     entries:
        - type: selector
           entity_id: input_select.harmony_hub
           color: var(--primary-color)
           options:
             - icon: mdi:power
             - icon: mdi:television-box
             - icon: mdi:nintendo-switch
             - icon: mdi:sony-playstation

Sehr nett schonmal von dir! :slight_smile: Ja, die Automation wäre wirklich sehr nett, wenn du sie auch mal teilst, damit man nachvollziehen kann, wie du es gemacht hast! Danke dir!

Gerne Doch! :slight_smile:

alias: States - Harmony Hub Activities
description: ""
trigger:
  - platform: state
    entity_id:
      - select.harmony_hub_activities
    from: null
    id: Harmony Hub
  - platform: state
    entity_id:
      - input_select.harmony_hub
    from: null
    id: Harmony Hub Helper
condition: []
action:
  - choose:
      - conditions:
          - condition: trigger
            id:
              - Harmony Hub
        sequence:
          - service: input_select.select_option
            data:
              option: |-
                {% if is_state("select.harmony_hub_activities", "power_off") -%}
                  {{"Ausschalten"}}
                {%- else -%}
                 {{states('select.harmony_hub_activities')}}
                {%- endif %}
            target:
              entity_id: input_select.harmony_hub
      - conditions:
          - condition: trigger
            id:
              - Harmony Hub Helper
        sequence:
          - service: select.select_option
            data:
              option: |-
                {% if is_state("input_select.harmony_hub", "Ausschalten") -%}
                  {{"power_off"}}
                {%- else -%}
                 {{ states('input_select.harmony_hub') }}
                {%- endif %}
            target:
              entity_id: select.harmony_hub_activities
mode: single

Vielen Dank für das Teilen deines Dashboards.
Kannst du eventuell auch das Template header_card für die Button-Card zur Verfügung stellen?

klar, gerne. :slight_smile: Habe drei Variationen davon. Einmal Mit Link Button, Einmal ohne und einmal für die popups ohne link und mit bisschen weniger margin nach oben hin.

button_card_templates:
  header_card:
    variables:
      name: ''
      label: ''
      arrow: mdi:arrow-right
      action: ''
      browser_mod: ''
      link: ''
    show_name: false
    show_state: false
    show_label: false
    styles:
      grid:
        - grid-template-columns: auto min-content 16px
        - grid-template-rows: 26px auto 8px
        - grid-template-areas: '''header .'' ''header link'' ''header .'''
      card:
        - background: none
        - padding: 0
    custom_fields:
      header:
        card:
          type: custom:button-card
          template:
            - header_card_no_link
          name: '[[[ return variables.name ]]]'
      link:
        card:
          type: custom:button-card
          name: '[[[ return variables.label ]]]'
          icon: '[[[ return variables.arrow ]]]'
          show_state: false
          tap_action:
            action: '[[[ return variables.action ]]]'
            browser_mod: '[[[ return variables.browser_mod ]]]'
            navigation_path: '[[[ return variables.link ]]]'
            url_path: '[[[ return variables.link ]]]'
            entity: '[[[ return variables.link ]]]'
          styles:
            grid:
              - grid-template-columns: min-content min-content
              - grid-template-areas: '"n i"'
            card:
              - background: none
              - padding: 0
            img_cell:
              - width: 16px
              - background: var(--ha-card-background)
              - border-radius: 0 4px 4px 0
              - padding-right: 8px
            icon:
              - width: 100%
              - padding-bottom: 2px
            name:
              - background: var(--ha-card-background)
              - border-radius: 4px 0 0 4px
              - padding: 4px 8px 6px
              - font-size: var(--subtitle-font-size)
  header_card_no_link:
    variables:
      name: ''
    name: '[[[ return variables.name ]]]'
    show_state: false
    show_label: false
    tap_action:
      action: none
    styles:
      grid:
        - grid-template-columns: auto
        - grid-template-areas: '"n"'
      card:
        - padding: 32px 16px 16px 16px
        - background: none
        - cursor: default
      name:
        - text-align: left
        - align-self: center
        - justify-self: start
        - font-size: var(--body-font-size)
        - font-weight: 500
        - color: var(--secondary-text-color)
  header_card_popup:
    variables:
      name: ''
    name: '[[[ return variables.name ]]]'
    show_state: false
    show_label: false
    tap_action:
      action: none
    styles:
      grid:
        - grid-template-columns: auto
        - grid-template-areas: '"n"'
      card:
        - padding: 24px 16px 16px 16px
        - background: none
        - cursor: default
      name:
        - text-align: left
        - align-self: center
        - justify-self: start
        - font-size: var(--body-font-size)
        - font-weight: 500
        - color: var(--secondary-text-color)

Nochmals Danke fürs Teilen.

Hey, danke nochmals! Ich hab leider ein kleines Problem.
Wenn ich den Code einfüge sagt er mir leider:
“Custom Element doesn`t exist: service:call”
Kannst du den Fehler nachvollziehen?..