Mushroom_Secondary Color nach Wert ändern

Deninho91 · 6. September 2024 um 19:25

Hallo zusammen,

Ich bekomme es einfach nicht hin, das sich der Wert der seconday Card farblich ändert…

Anbei mein Code, ich vermute fast es ist was kleines…

Danke euch im voraus

Gruß
Denis


ha-card {    
              zoom: 100%;
              font-size: 15px%;
              margin-left: 110%;
              margin-top: -150%;
              width: 85%;
              height: fit-content !important;
              background-color: transparent !important;
              opacity: '';
              border: transparent;
              {% set state = states('sensor.pooltemperatur') | int %}
              {% if state <= 30 %} 
                --card-secondary-color: red;
              {% elif state <= 27 %}
                --card-secondary-color: yellow;
              {% elif state <= 24 %}
                --card-secondary-color: blue;
              {% endif %}

totow · 6. September 2024 um 19:40

Moin,
kannst du vielleicht auch den Code der eigentlich Karte mit dazu Posten?

Hier kannst du auch mal nachgucken, da findet man viel für die mushroom Karten + Card-mod

auf die schnelle habe ich das für die mushroom entity card da gefunden:

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --card-primary-color: blue;
        --card-secondary-color: orange;
      }

also probiere es mal so:

        card_mod:
          style:
            ha-card {    
              zoom: 100%;
              font-size: 15px%;
              margin-left: 110%;
              margin-top: -150%;
              width: 85%;
              height: fit-content !important;
              background-color: transparent !important;
              opacity: '';
              border: transparent;
              }
            mushroom-state-info$: |
              .container {
              {% set state = states('sensor.pooltemperatur') | int %}
              {% if state <= 30 %} 
                --card-secondary-color: red;
              {% elif state <= 27 %}
                --card-secondary-color: yellow;
              {% elif state <= 24 %}
                --card-secondary-color: blue;
              {% endif %}
              }

LG

Deninho91 · 6. September 2024 um 20:45

Hey,
Ja klar, sorry,

Deine Idee ist gut, den .container habe ich bereits drin.

Wenn ich deinen Code hier eingebe, wird der Temperaturwer rot, wobei er bei 23,5grad eig blau anzeigen müsste …


    - type: custom:mushroom-template-card
      primary: Pooltemperatur
      secondary: '{{states("sensor.pooltemperatur")}} °C'
      entity: sensor.pooltemperatur
      icon: mdi:fan
      icon_color: |
        {% if is_state('climate.inverter_pool_warmepumpe','heat') %} 
          orange
        {% else %} 
          grey
        {% endif %}
      card_mod:
        style:
          mushroom-state-info $: |
            .container {
              --card-primary-font-size: 18px !important;
              --card-primary-color: black;
              --card-secondary-font-size: 20px;
              --card-secondary-color: black;
              flex-direction: row !important;
              align-items: baseline !important;
              gap: 80px;
              
            }
          mushroom-shape-icon$: |
            .shape {
              --shape-color: transparent;
            }
          .: |
            ha-card {    
              zoom: 100%;
              font-size: 15px%;
              margin-left: 150%;
              margin-top: -150%;
              width: 85%;
              height: fit-content !important;
              background-color: transparent !important;
              opacity: '';
              border: transparent;
              {% set state = states('sensor.pooltemperatur') | int %}
              {% if state <= 36 %} 
                --card-secondary-color: red;
              {% elif state <= 27 %}
                --card-secondary-color: yellow;
              {% elif state <= 24 %}
                --card-secondary-color: blue;
              {% endif %}

            }

totow · 6. September 2024 um 20:55

du hast da ja schon das drin was du ändern möchtest.
Probiere es mal so:

- type: custom:mushroom-template-card
      primary: Pooltemperatur
      secondary: '{{states("sensor.pooltemperatur")}} °C'
      entity: sensor.pooltemperatur
      icon: mdi:fan
      icon_color: |
        {% if is_state('climate.inverter_pool_warmepumpe','heat') %} 
          orange
        {% else %} 
          grey
        {% endif %}
      card_mod:
        style:
          mushroom-state-info $: |
            .container {
              --card-primary-font-size: 18px !important;
              --card-primary-color: black;
              --card-secondary-font-size: 20px;
              {% set state = states('sensor.pooltemperatur') | int %}
              {% if state <= 24 %}
                --card-secondary-color: blue;
              {% elif state <= 27 %}
                --card-secondary-color: yellow;
              {% elif state <= 36 %}
                --card-secondary-color: red;
              {% else %}
              --card-secondary-color: black;
              {% endif %}
              flex-direction: row !important;
              align-items: baseline !important;
              gap: 80px;
              
            }
          mushroom-shape-icon$: |
            .shape {
              --shape-color: transparent;
            }
          .: |
            ha-card {    
              zoom: 100%;
              font-size: 15px%;
              margin-left: 150%;
              margin-top: -150%;
              width: 85%;
              height: fit-content !important;
              background-color: transparent !important;
              opacity: '';
              border: transparent;
            }

btw. ich würde mit der kleinsten Zahl starten den <= 36 ist auch true wen der wert z.B. 24 ist.

LG
Tobi

Deninho91 · 7. September 2024 um 05:47

Vielen Dank!!!
Wieso ich das unter ha-Card gemacht habe, weiß ich nicht.

Jetzt noch ne Frage.
In der secondary Info, würde ich gerne 2 Sensoren anzeigen lassen,
z.b. PV Leistung und Battery.

Ich kann das ja, durch | trennen, aber ist es auch iwie möglich dort Leerzeichen in der Zeile und jeweils ein anderes Icon einzufügen innerhalb der secondary info?

totow · 7. September 2024 um 08:30

Icon nicht aber aber Unicode Emoji
grafik

Da hilft dir z.B. so eine Seite.
Da steht für das Thermometer: U+1F321 das + ersetzt du durch so viele 0 bis hinter dem U 8 Stellen sind: U0001F321 und dann noch ein \ davor und fertig

Hier mein secondary abschnitt von der gezeigten Karte:

        secondary: >-
          {{"\U0001F321"}}{{ states('sensor.temp_buro') }}°C
          {{"\U0001F4A7"}}{{ states('sensor.humidity_buro') }}%

LG
Tobi

Deninho91 · 7. September 2024 um 09:28

Ja cool Tobi, das versuche ich gleich mal. Und Leerzeichen zwischen den beiden? Geht das auch?
Heißt aber im Umkehrschluss, die farbliche Änderung würde für beide gleich sein, oder kann man das auch noch separieren?
Hierzu fand ich nichts.

Deninho91 · 24. September 2024 um 17:49

Hey,

Du müsstest du mir mal bitte auf die Sprünge helfen…

Dein Code etc hat wunderbar funktioniert, super!
Seit einigen Tagen hat sich die gerammte konfi verändert, ohne das es Updates gab?
Hast du eine Idee?
Der Code ist weiterhin der gleiche, aber schau mal wie es sich verändert hat…
Vorher/nachher…

totow · 25. September 2024 um 18:21

Was ist da jetzt das Problem?
Das die Secondary Sachen jetzt unter dem Namen stehen und nicht mehr rechts daneben?
Ist das nur auf dem Gerät oder auch auf anderen so?

Deninho91 · 25. September 2024 um 18:34

Danke für deine Antwort:)

Ne ne, scheinbar hat ein Update meine ganze Card Mod zerschossen…
Das Bild was jetzt klein ist, weiß und in 2 Reihen, kam einfach so…
es ist auf allen Geräten geändert…

Wenn ich jetzt allerdings die „Set State“ entferne, ist es fast wie vorher, also alles in einer Reihe, meine Größen etc passen fasst.

Nur möchte ich die „Set State“ gerne behalten und weiß nicht wo ich sie nun hinstellen soll, weil es ja wohl daran lag…

totow · 25. September 2024 um 19:05

Magst du mal den aktuellen Code der Karte posten, dann werde ich mir das bei noch mal durch testen.

Deninho91 · 25. September 2024 um 19:23

Ja klar, gerne.
Die Größe etc. Muss ich nochmal anpassen, aber das grundgerüst steht


kiosk_mode:
  non_admin_settings:
    hide_header: true
    hide_sidebar: true
wallpanel:
  enabled: true
  hide_toolbar: false
  idle_time: 1
  image_url: /
  cards:
    - type: custom:clock-weather-card
      entity: weather.openweathermap
      sun_entity: sun.sun
      temperature_sensor: sensor.temperature_30
      weather_icon_type: line
      forecast_rows: 5
      locale: de
      time_pattern: HH:mm
      time_format: 24
      date_pattern: cccc, d. MMM yyyy
      hide_today_section: false
      hide_forecast_section: true
      hide_clock: false
      hide_date: false
      card_mod:
        style: |
          ha-card {
            zoom: 400%;
            font-size: 8px;
            width: 250%;
            margin-left: -115%;
            margin-top: 70%;
            background-color: transparent;
            text-shadow: 1px 1px 3px black;
            border: transparent;
          }
    - type: custom:mushroom-template-card
      primary: Pooltemperatur
      secondary: '{{states("sensor.pooltemperatur")}} °C'
      icon: mdi:fan
      icon_color: |
        {% if is_state('climate.inverter_pool_warmepumpe','heat') %} 
          orange
        {% else %} 
          grey
        {% endif %}
      card_mod:
        style:
          mushroom-state-info $: |
            .container {
              --card-primary-font-size: 25px !important;
              --card-primary-color: black;
              --card-primary-line-height: 28px;
              --card-secondary-font-size: 25px;
              --card-secondary-color: black;
              --card-secondary-line-height: 28px;
              flex-direction: row !important;
              align-items: baseline !important;
              gap: 30px;
              
            }
          mushroom-shape-icon$: |
            .shape {
              --shape-color: transparent;
            }
          .: |
            ha-card {    
              zoom: 120%;
              font-size: 15px%;
              margin-left: 160%;
              margin-top: -170%;
              width: 85%;
              height: fit-content !important;
              background-color: transparent;
              opacity: '';
              border: transparent;

            }

            ha-state-icon {
              --icon-symbol-size: 31px;
              {{ 'animation: spin 2s linear infinite;' if is_state('climate.inverter_pool_warmepumpe','heat') }}
                            
            }  
    - type: custom:mushroom-template-card
      primary: PV Anlage
      secondary: >-
        {{"\U000026A1"}}{{
        "{0:_.0f}".format(states('sensor.ala001022111073_instantaneous_generation')
        | int) | replace("_", ".") }}W {{"\U0001F50B"}} {{
        states('sensor.ala001022111073_instantaneous_battery_soc') | float(0) |
        round(0) }}%
      icon: mdi:solar-power-variant-outline
      entity: ''
      picture: ''
      fill_container: true
      multiline_secondary: false
      layout: horizontal
      icon_color: green
      card_mod:
        style:
          mushroom-state-info$: |
            .container {
             --card-primary-font-size: 23px;
             --card-primary-color: black !important;
             --card-secondary-font-size: 23px;
             --card-secondary-color: black;
             --card-primary-line-height: 30px;
             --card-secondary-line-height: 30px;
             flex-direction: row !important;
             align-items: baseline !important;
             gap: 30px; 
             --state-color: none !important;   
            }
          mushroom-shape-icon$: |
            .shape {
             --shape-color: none !important;
            }
          .: |
            ha-card {
              zoom: 120%;
              font-size: 15px;
              margin-left: 160%;
              margin-top: -160%;
              width: 180%;
              height: fit-content !important;
              background-color: transparent;
              opacity: '';
              border: transparent;
            }
            ha-state-icon {
              --icon-symbol-size: 25px;
            }

Deninho91 · 27. September 2024 um 15:08

Ich weiß nicht wieso, aber ich habe den Code nochmal eingetragen und es geht wieder🤔

Du kannst mir aber dennoch behilflich sein…

Ich hätte gerne,
Wenn Sensor > 0, dann „pooltemperatur“, sonst „Wintermodus“ im primäre Info…

Und im sekundär wäre cool:
Wenn „unavailable“, dann leer, sonst „Wert des sensors

Bekomm es iwie nicht auf die Kette:pray:t4:

totow · 27. September 2024 um 16:23

Ich denke du meinst den Bereich?

hab es nicht getestet aber so sollte es hoffentlich gehen:

    - type: custom:mushroom-template-card
      primary: |
        {% if states('sensor.pooltemperatur') > "0" %}
          Pooltemperatur
        {% else %}
          Wintermodus
        {% endif %}
      secondary: |
        {% if is_state('sensor.pooltemperatur','unavailable') %} 
          ' '
        {% else %} 
          '{{states("sensor.pooltemperatur")}} °C'
        {% endif %}

LG

Deninho91 · 27. September 2024 um 16:56

Danke dir, hab den Fehler gefunden😏

Kann man die Primar width anpassen? Oder geht das nur über die gesamte width via ha_card?

Deninho91 · 2. Oktober 2024 um 18:05

@totow hast du eine Idee?

totow · 2. Oktober 2024 um 18:10

Hierzu habe ich keine Idee:

LG

Thema		Antworten	Aufrufe
Hintergrund Farbe von Mushroom Template Card Allgemein templating , yaml	9	240	27. Oktober 2025
Font Farbe bei bestimmten Wert ändern Dashboard/Cards/Frontend templating , yaml	4	808	14. Januar 2024
Mushroom template card: Wert auslesen und anzeigen Dashboard/Cards/Frontend templating , yaml	14	1144	10. März 2025
Mushroom Card - Luftfeuchtigkeit - Card einfärben Dashboard/Cards/Frontend templating , yaml	4	1403	14. Februar 2024
Mushroom Template Card - color Integrationen templating , yaml	2	80	16. April 2026

Mushroom_Secondary Color nach Wert ändern

Verwandte Themen