Sonnestand Card ähnlich zur Mondphasen Card selbst erstellen

Na super! :slight_smile: Was ich nicht verstehe, warum dort ein Rand/Border angezeigt wird. Dürfte eigentlich nicht sein. Über „Mittag“ müsste auch noch Aktuell zu lesen sein.

1 „Gefällt mir“

Da war noch ein „white“

Aber der Rahmen ist noch da, obwohl

                card_mod:
                  style: |
                    ha-card {
                      width: 120%;
                      margin-left: -10px;
                      padding-top: 10px;
                      box-shadow: none !important;
                      border: none !important;
                      background: transparent !important;                  
                      border-radius: 0px !important;
                    }

@jayjojayson
Danke dir. Klasse Arbeit :wink:

Hi, so nach einigem Suchen habe ich gelesen, dass die Markdown Card kein richtiges Styling via Card Mod zulässt. Ich frage mich nur, warum es bei mir funktioniert, muss ja irgendeinen Grund haben. Also habe ich eine alternative gesucht, aber das ist auch nicht so leicht, weil ein Template für die Bildabfrage genutzt wird. Letztendlich bin ich bei der mushroom-entity-card als Ausweichmöglichkeit für die markdown-card gelandet.

Du kannst im Code nur die markdown-Card austauschen oder nutzt weiter unten den kompletten neuen Code.

- type: vertical-stack
  cards:
    - type: custom:mushroom-entity-card
      entity: person.eric
      show_name: false
      show_state: false
      icon: none
      card_mod:
        style: |
          ha-card {
            background-image: url('{{ states('sensor.sun_position_bild') }}');
            background-size: cover;
            background-position: center;
            border: none;
            width: 60px !important;
            height: 60px !important;
            margin: 15px;
            --card-primary-color: transparent !important;
            --card-secondary-color: transparent !important;
          }     
          ha-state-icon {
            color: none !important;
          } 
          mushroom-shape-icon {
            --shape-color: none !important;
          }

Hier der komplette angepasste Code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Sonnenstand
    card_mod:
      style: |
        ha-card {
          margin-left: 10px;
          margin-bottom: -20px;
        } 
        .title {
          font-weight: normal !important;
          font-size: 25px !important;
        }
  - type: horizontal-stack
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 20% 30% 50%
          grid-template-rows: auto
        cards:
          - type: vertical-stack
            cards:
              - type: custom:mushroom-entity-card
                entity: person.eric
                show_name: false
                show_state: false
                icon: none
                card_mod:
                  style: |
                    ha-card {
                      background-image: url('{{ states('sensor.sun_position_bild') }}');
                      background-size: cover;
                      background-position: center;
                      border: none;
                      width: 60px !important;
                      height: 60px !important;
                      margin: 15px;
                      --card-primary-color: transparent !important;
                      --card-secondary-color: transparent !important;
                    }     
                    ha-state-icon {
                      color: none !important;
                    } 
                    mushroom-shape-icon {
                      --shape-color: none !important;
                    }
          - type: vertical-stack
            cards:
              - type: entity
                entity: sensor.sun_position
                name: Aktuell
                state_color: false
                icon: none
                card_mod:
                  style: |
                    ha-card {
                      width: 120%;
                      margin-left: -20px;
                      padding-top: -12px;
                      box-shadow: none !important;    
                      border: none !important;
                                      background: none !important;   
                    }    
                    .header {
                      margin-bottom: -10px;
                      margin-top: 13px;
                      border: none !important;
                    }
                    .value {
                      font-size: 15px !important;
                      font-weight: normal !important;
                      color: #258adb;  
                    }
                    .name {
                      font-size: 15px !important;
                      color: #e4e8ed !important; 
                    }
          - type: vertical-stack
            cards:
              - type: entities
                card_mod:
                  style: |
                    ha-card {
                      width: 115%;
                      background: none !important;
                      box-shadow: none !important;
                      border: none !important;
                      border-radius: 0px !important;
                      margin-top: 25px;
                      margin-left: -50px;
                    } 
                    :host ::slotted(.card-content) {
                      padding: 25px 0 0 0 !important;
                    }
                    #states > * {
                      margin: -20px -16px !important;
                    }
                entities:
                  - entity: sensor.sonnenaufgang_uhrzeit
                    icon: none
                    name: Sonnenaufgang
                  - entity: sensor.sonnenuntergang_uhrzeit
                    icon: none
                    name: Sonnenuntergang

@Mika schön, wenn es dir gefällt. :slight_smile:

1 „Gefällt mir“

Vielen, vielen Dank für Deine Mühen!

Ich habe jetzt den ganzen Code kopiert und es sieht so aus:

1 „Gefällt mir“

Du musst natürlich deine Person in der mushroom-card anpassen (vierte Zeile)! :wink:

entity: person.eric

2 „Gefällt mir“

ok, das habe ich auch hinbekommen, aber ich habe keine Ahnung wofür … :man_shrugging:

Egal, nun sieht es super aus.

VIELEN DANK!!!

1 „Gefällt mir“

Du musst dir das so vorstellen. Jetzt wird eine mushroom-entity card genutzt und die braucht irgendeine hinterlegte Entität, sonst sieht es aus wie bei dir im Bild. Im Hintergrund der Card wird das Bild über ein Template geladen und der Rest einfach ausgeblendet. Leider habe ich keine andere Möglichkeit gefunden. Mit einer normalen Bild Karte geht das leider nicht. Deswegen finde ich die Markdown-Card eigentlich auch besser. Aber wir wollen ja für alle eine Lösung. :slight_smile:

1 „Gefällt mir“

Wirklich tolle Arbeit :slight_smile:
Wenn ich das richtig verstanden habe, ist es also ganz egal welche Entität das ist. Ich würde dann vielleicht lieber eine allgemeine Entität wie z.B. update.home_assistant_core_update nutzen, die alle haben. Dann wundert sich keiner mehr :slight_smile: LG

2 „Gefällt mir“

Scheinbar ist durch ein Update die Optik kaputt gegangen:

Kann leider nicht genau sagen, welches es war.

Bei mir sieht alles normal aus, keine Ahnung woran das jetzt liegen könnte.
Schicke mal bitte deinen aktuellen Code, dann kann ich mal schauen, wie es bei mir in HA aussieht.

1 „Gefällt mir“

sorry, war wahrscheinlich nur der Browsercache …

1 „Gefällt mir“

Jetzt habe ich es wieder

Kann es sein, dass da ein Bild fehlt zu dieser Tageszeit?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Sonnenstand
    card_mod:
      style: |
        ha-card {
          margin-left: 10px;
          margin-bottom: -20px;
        } 
        .title {
          font-weight: normal !important;
          font-size: 25px !important;
        }
  - type: horizontal-stack
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 20% 30% 50%
          grid-template-rows: auto
        cards:
          - type: vertical-stack
            cards:
              - type: custom:mushroom-entity-card
                entity: person.volker_gerdes
                show_name: false
                show_state: false
                icon: none
                card_mod:
                  style: |
                    ha-card {
                      background-image: url('{{ states('sensor.sun_position_bild') }}');
                      background-size: cover;
                      background-position: center;
                      border: none;
                      width: 60px !important;
                      height: 60px !important;
                      margin: 15px;
                      --card-primary-color: transparent !important;
                      --card-secondary-color: transparent !important;
                    }     
                    ha-state-icon {
                      color: none !important;
                    } 
                    mushroom-shape-icon {
                      --shape-color: none !important;
                    }
          - type: vertical-stack
            cards:
              - type: entity
                entity: sensor.sun_position
                name: Aktuell
                state_color: false
                icon: none
                card_mod:
                  style: |
                    ha-card {
                      width: 120%;
                      margin-left: -20px;
                      padding-top: -12px;
                      box-shadow: none !important;    
                      border: none !important;
                                      background: none !important;   
                    }    
                    .header {
                      margin-bottom: -10px;
                      margin-top: 13px;
                      border: none !important;
                    }
                    .value {
                      font-size: 15px !important;
                      font-weight: normal !important;
                      color: #258adb;  
                    }
                    .name {
                      font-size: 15px !important;
                      color: #e4e8ed !important; 
                    }
          - type: vertical-stack
            cards:
              - type: entities
                card_mod:
                  style: |
                    ha-card {
                      width: 115%;
                      background: none !important;
                      box-shadow: none !important;
                      border: none !important;
                      border-radius: 0px !important;
                      margin-top: 25px;
                      margin-left: -50px;
                    } 
                    :host ::slotted(.card-content) {
                      padding: 25px 0 0 0 !important;
                    }
                    #states > * {
                      margin: -20px -16px !important;
                    }
                entities:
                  - entity: sensor.sonnenaufgang_uhrzeit
                    icon: none
                    name: Sonnenaufgang
                  - entity: sensor.sonnenuntergang_uhrzeit
                    icon: none
                    name: Sonnenuntergang

Es sollten 6 Bilder sein. (hoffe hab mich nicht verzählt)

Der Code dafür solltest du in der config oder evtl. sensors.yaml drinnen stehen haben.
Achte auch auf die richtige Pfad angabe

Ich habe nur 5

  - sensors:
      sun_position_bild:
        friendly_name: "Sun Position Bild"
        value_template: >-
          {% set sun = states('sun.sun') %}
          {% if sun == 'above_horizon' %}
            {% set azimuth = state_attr('sun.sun', 'azimuth') | float(default=0) %}
            {% set elevation = state_attr('sun.sun', 'elevation') | float(default=0) %}
            {% if elevation < 0 %}
              /local/sonne/unterHorizont.png
            {% elif elevation < 10 %}
              /local/sonne/dammerung.png
            {% elif azimuth < 150 %}
              /local/sonne/morgen.png
            {% elif azimuth < 200 %}
              /local/sonne/mittag.png
            {% elif azimuth < 255 %}
              /local/sonne/morgen.png
            {% else %}
              /local/sonne/abend.png'
            {% endif %}
          {% else %}
            /local/sonne/unterHorizont.png
          {% endif %}

Sollten aber alle sein

Ich denke nicht, dass das Hochkomma da richtig ist, oder?

1 „Gefällt mir“

Du hast recht sind nur 5

1 „Gefällt mir“

ja das muss da weg

2 „Gefällt mir“

Hi, ups vollkommen korrekt, das ’ darf nicht sein, passe ich gleich oben im code an.

Das es fünf Bilder sind ist korrekt, Sonnenauf- und untergang nutzen das selbe Bild.

1 „Gefällt mir“