Karta Lovelace🍄 Mushroom

Ktoś pomoże ze stylami CSS, co trzeba dopisać:

type: custom:mushroom-entity-card
entity: sensor.sypialnia
name: ' '

Działa na takiej zasadzie:

card-mod

type: custom:mushroom-template-card
primary: Kosiarka
secondary: Ogród
picture: local/kosiarka.jpg
icon_color: ''
icon: ''
card_mod:
  style: |
    mushroom-shape-icon {
      --shape-color: none !important;
       --shape-color-disabled: none !important;}
     ha-card { 
      icon: transparent;
      width: 196px;
      border-radius: 30px;
      margin-left: 30px;
      margin-right: auto;
      margin-bottom: 26px;}

Zmieniając np. parametr margin-left na większą wartość, przesuwasz w prawo.
Kartę ma tylko z ciekawości
/

type: custom:mushroom-entity-card
entity: sensor.daily_energy
hold_action:
  action: more-info
card_mod:
  style: |
    mushroom-shape-icon {
      --shape-color: none !important;
       --shape-color-disabled: none !important;}
     ha-card { 
      icon: transparent;
      width: 250px;
      border-radius: 20px;
      margin-left: 100px;
      margin-right: auto;
      margin-bottom: 0px;}

Propozycja

type: custom:mushroom-template-card
primary: |2
   {{'💧'}} Pogoda

secondary: |
  Deszcz jest od domu      {{ (states('sensor.pogoda_nearest_storm_distance'))}} km
  Na zewnątrz jest teraz    {{ (states('sensor.temp_srednia'))}}  °C
multiline_secondary: true
card_mod:
  style: |
    mushroom-shape-icon {
      --shape-color: none !important;
       --shape-color-disabled: none !important;}
     ha-card { 
      icon: transparent;
      width: 450px;
      border-radius: 0px;
      margin-left: 100px;
      margin-right: auto;
      margin-bottom: 0px;}
1 Like

@krskrab fajne mi pokazałeś rzeczy, na pewno się przyda, ale nie jest to co ja bym chciał uzyskać.
Chciałby żeby to wyglądało tak:
image
Oczywiście zrobione w programie graficznym :slight_smile:

Robię sobie, w każdym razie próbuję, kartę person. Czy w secondary_info nie można użyć takiej konstrukcji jak poniżej? Czy ja robię coś tam źle?

  - type: custom:mushroom-person-card
    entity: person.grzegorz
    layout: vertical
    primary_info: name
    secondary_info: '{{ states("sensor.p30_battery_level") }} %'

Według dokumentacji w przypadku mushroom-person-card nie mozna wrzucić template.
Można wyświetlić: name state last-changed last-updated none

Można miksować karty:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-person-card
    entity: person.artur
    use_entity_picture: true
    hide_name: false
    layout: default
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Artur        
      card:
        type: custom:mod-card
        style: |
          ha-card {
             padding-right: 15px;
             padding-left: 15px;
             padding-bottom: 15px;     
          }
        card:
          type: vertical-stack
          cards:
            - type: custom:mushroom-entity-card
              entity: sensor.urodziny_artur
              primary_info: none
              icon: mdi:map-marker
              icon_color: yellow
            - type: horizontal-stack
              cards:
                - type: entity
                  entities:
                    - entity: device_tracker.sm_g781b
                  aspect_ratio: '2'
                  use_entity_picture: true
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: none;
        --chip-height: 33px
      }
    chips:
      - type: template
        icon_color: |2-
                    {% set state=states('sensor.sm_g781b_battery_state') %}
                    {% if state=='Charging' %}
                    green
                    {% elif state=='Not Charging' %}
                    #6f6f6f
                   {% endif %}
        entity: sensor.sm_g781b_battery_state
        content: '{{ states(entity) }}'
        icon: mdi:power-plug
        tap_action:
          action: more-info
      - type: template
        entity: sensor.sm_g781b_battery_level
        content: '{{ states(entity) }} %'
        icon: |2
                    {% set bl = states('sensor.sm_g781b_battery_level') | int %}
                    {% if bl < 10 %} mdi:battery-outline
                    {% elif bl < 20 %} mdi:battery-10
                    {% elif bl < 30 %} mdi:battery-20
                    {% elif bl < 40 %} mdi:battery-30
                    {% elif bl < 50 %} mdi:battery-40
                    {% elif bl < 60 %} mdi:battery-50
                    {% elif bl < 70 %} mdi:battery-60
                    {% elif bl < 80 %} mdi:battery-70
                    {% elif bl < 90 %} mdi:battery-80
                    {% elif bl < 100 %} mdi:battery-90
                    {% elif bl == 100 %} mdi:battery
                    {% else %} mdi:battery-unknown
                    {% endif %}
        icon_color: |2-
                    {% set bl = states('sensor.sm_g781b_battery_level') | int %}
                    {% if bl < 10 %} red
                    {% elif bl < 20 %} red
                    {% elif bl < 30 %} red
                    {% elif bl < 40 %} orange
                    {% elif bl < 50 %} orange
                    {% elif bl < 60 %} green
                    {% elif bl < 70 %} green
                    {% elif bl < 80 %} green
                    {% elif bl < 90 %} green
                    {% elif bl < 100 %} green
                    {% elif bl == 100 %} green
                    {% else %} grey
                    {% endif %}
        tap_action:
          action: more-info
      - type: template
      - type: entity
        icon_color: yellow
        entity: sensor.sm_g781b_steps_sensor
      - type: map
        icon_color: yellow
        entity: person.artur
    alignment: left

Screenshot - 18.09.2022 , 23_04_26

Poprawione dla nowego browser_mod 2
Po kliknięciu w ikonkę użytkownika popup okna

@gregusz @krskrab

2 Likes

Fajne. Już działam. Co prawda nie używam browser_mod 2. Jeszcze :slight_smile: Może za jakiś czas i do tego dojrzeje, by wgrać do swojej instalacji i wykorzystać możliwości. Zobaczymy. Tak na szybko zrobiłem taką wersję. Wydaje mi się, że jest funkcjonalna:

image

Pytanko poza tematem. Często widzę takie fajne ikony przy personach. Kojarzę, że kiedyś był taki generator chyba na FB, co generował takie postacie. Ale nie pamiętam gdzie. Wiec skąd macie takie fajne postacie?

Ja korzystam z AR Emoji standardowa aplikacja w telefonach Szajsung używasz przedniej kamery i nanosi ci maskę .

albo AR emoju jak kolega wyzej, albo Bitmoji - tutaj sam sobie wybierasz twarz, wlosy, itp itd

W starym rozwiązaniu mam przycisk do licznika (pomocnik) z funkcją decrease. Nie znalazłem informacji czy da się takie coś podłączyć pod działanie przycisku pod chips. Da się czy jednak trzeba inaczej kombinować?

Daj kod starej żeby zobaczyć o co chodzi.

Chciałem zrobić coś takiego:

      - type: template
        icon_color: |2-
                    {% set bl = states('counter.filtr_coffee') | int %}
                    {% if bl < 20 %} red
                    {% elif bl < 50 %} yellow
                    {% elif bl < 100 %} green
                    {% else %} grey
                    {% endif %}
        entity: counter.filtr_coffee
        content: |
          {{ states("counter.filtr_coffee") }}
        icon: mdi:coffee-maker
        tap_action:
          action: call-service
          service: counter.decrement

Ale wypisuje mi, że brakuje entity_id. I nie wiem, gdzie to dodać.

—edit
Dobra, dodałem pomocnika w typie input_boolean i automatyzację jako reakcja na kliknięcie. W action zmieniłem call-service na toggle. No i działa. Trochę dookoła, ale liczy się efekt końcowy. Chyba na tej samej zasadzie dorobię przycisk zakupu, czyli dodania 100 filtrów :slight_smile:

—edit2
Kolejny krok w dodawaniu funkcjonalności. A skoro nikt nie pisał, to nie będę tworzył nowego wpisu, tylko edycja :slight_smile:
Kombinowałem ze stworzeniem sobie karty do sterowania ogrzewania. Właściwie to nadal ją tworzę. Problem jest taki, że większość jest oparta od razu na entity: climate. Nie da się wpiać innego rozwiązania by to miało sens. W moim przypadku podpinanie samego termostatu nie ma sensu, bo nic na nim nie ustawiam. Mam osobnego inputa i w nim deklarowaną wartość sterowaną potem przez NR. Więc w karcie termostatu najlepiej jakby pokazywała mi się właśnie zadeklarowana wartość z tego pola (i możliwość edycji). Wersja z podłączonym termostatem, czyli entity: climate wyglądała wstępnie u mnie tak:
image

Wsępnie przerobiłem na mushroom-template-card i wyszło mi coś takiego:
image

Nawet podobne prawda?. Tylko jeszcze muszę dodać chyba trochę “przestrzeni” pod same przyciski, bo są za blisko krawędzi karty. Tylko jeszcze nie wiem jak.

—edit3
Kolejny dylemat odnośnie tej karty z ogrzewaniem. I właściwie nie tylko. Niedługo będę miał w jednym pomieszczeniu klimatyzację. I tak szukam koncepcji jak rozwiązać sprawę, by wszystko mieć w jednej karcie. I sterowanie tradycyjnego termostatu i sterowanie klimy. Ktoś próbował połączyć te dwa byty w jednej karcie?

Zmiana kolory, zależna od wartości:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: none;
        --chip-height: 66px
      }
    chips:
      - type: template
        entity: sensor.sm_g975f_battery_level
        content: '{{ states(entity) }} %'
        icon: |2
                    {% set bl = states('sensor.sm_g975f_battery_level') | int %}
                    {% if bl < 10 %} mdi:battery-outline
                    {% elif bl < 20 %} mdi:battery-10
                    {% elif bl < 30 %} mdi:battery-20
                    {% elif bl < 40 %} mdi:battery-30
                    {% elif bl < 50 %} mdi:battery-40
                    {% elif bl < 60 %} mdi:battery-50
                    {% elif bl < 70 %} mdi:battery-60
                    {% elif bl < 80 %} mdi:battery-70
                    {% elif bl < 90 %} mdi:battery-80
                    {% elif bl < 100 %} mdi:battery-90
                    {% elif bl == 100 %} mdi:battery
                    {% else %} mdi:battery-unknown
                    {% endif %}
        icon_color: |2-
                    {% set bl = states('sensor.sm_g975f_battery_level') | int %}
                    {% if bl < 10 %} red
                    {% elif bl < 20 %} red
                    {% elif bl < 30 %} red
                    {% elif bl < 40 %} orange
                    {% elif bl < 50 %} orange
                    {% elif bl < 60 %} green
                    {% elif bl < 70 %} green
                    {% elif bl < 80 %} green
                    {% elif bl < 90 %} green
                    {% elif bl < 100 %} green
                    {% elif bl == 100 %} green
                    {% else %} grey
                    {% endif %}

Karty można miksować:

type: horizontal-stack
cards:
  - type: custom:mushroom-person-card
    entity: person.xxx
  - type: custom:mushroom-template-card
    primary: 'Kroków dziś : {{ states("sensor.xxxx") }}'
    secondary: 'Dystans: {{ states("sensor.xxx") }} km'
  - type: custom:mushroom-climate-card
    entity: climate.living_room
    primary_info: state
    secondary_info: last-changed

Animowana ikona podczas ładowania

type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
icon: |+
  {% set battery_level = (states(entity) | int / 10) | round(0) | int * 10 %}
  {% if battery_level == 100 %}
    mdi:battery
  {% elif battery_level > 0 %}
    mdi:battery-{{ battery_level }}
  {% else %}
    mdi:battery-alert-variant-outline
  {% endif %}

icon_color: |-
  {% set battery_level = states(entity) | int %}
  {% if battery_level > 90 %} 
    green
  {% elif battery_level > 60 %}
    light-green
  {% elif battery_level > 50 %}
    lime
  {% elif battery_level > 40 %}
    yellow
  {% elif battery_level > 30 %}
    amber
  {% elif battery_level > 20 %}
    orange
  {% elif battery_level > 10 %}
    deep-orange
  {% else %}
    red
  {% endif %} 
layout: horizontal
tap_action:
  action: none
entity: sensor.sm_g781b_battery_level
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {% if is_state('binary_sensor.sm_g781b_is_charging', 'on')%}
          --icon-animation: clip 2s linear infinite;
        {% endif %}
      }
      @keyframes clip {
        0% {
          clip-path: inset(100% 0 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
        }
      }
      .shape {
        {% if is_state('binary_sensor.sm_g781b_is_charging', 'on')%}
          --shape-animation: ping 2s infinite;
        {% endif %}
      }
      @keyframes ping {
        0% {
          {% set battery_level = states(config.entity) | int %}
          box-shadow: 0 0 0 0 rgba(var(
          {% if battery_level > 90 %} 
            --mush-rgb-green
          {% elif battery_level > 60 %}
            --mush-rgb-light-green
          {% elif battery_level > 50 %}
            --mush-rgb-lime
          {% elif battery_level > 40 %}
            --mush-rgb-yellow
          {% elif battery_level > 30 %}
            --mush-rgb-amber
          {% elif battery_level > 20 %}
            --mush-rgb-orange
          {% elif battery_level > 10 %}
            --mush-rgb-deep-orange
          {% else %}
            --mush-rgb-red
          {% endif %}
          ), 0.7);
        }
        70% {
          box-shadow: 0 0 0 10px transparent;
        }
        100% {
          box-shadow: 0 0 0 0 transparent;
        }
      }
    .: |
      ha-card {
        background: none;
        height: 60px !important;
      }
      :host {
        --icon-size: 40px !important;
        --card-primary-font-size: 12px !important;
        --card-secondary-font-size: 11px!important;
      }

Screenshot - 24.09.2022 , 22_04_24

Screenshot - 24.09.2022 , 22_07_38

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-person-card
    entity: person.artur
    use_entity_picture: true
    hide_name: false
    layout: default
    tap_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        deviceID: this
        title: Jeff
        card:
          type: custom:mod-card
          style: |
            ha-card {
               padding-right: 15px;
               padding-left: 15px;
               padding-bottom: 15px;     
            }
          card:
            type: vertical-stack
            cards:
              - type: custom:mushroom-entity-card
                entity: sensor.artur_geo
                primary_info: none
                icon: mdi:map-marker
                icon_color: yellow
              - type: horizontal-stack
                cards:
                  - type: map
                    entities:
                      - entity: device_tracker.sm_g781b
                    aspect_ratio: '2'
                    use_entity_picture: true
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: none;
        --chip-height: 33px
      }
    chips:
      - type: template
        icon_color: |2-
                    {% set state=states('sensor.sm_g781b_battery_state') %}
                    {% if state=='Charging' %}
                    green
                    {% elif state=='Not Charging' %}
                    #6f6f6f
                   {% endif %}
        entity: sensor.sm_g781b_battery_state
        content: '{{ states(entity) }}'
        icon: mdi:power-plug
        tap_action:
          action: more-info
      - type: template
        entity: sensor.sm_g781b_battery_level
        content: '{{ states(entity) }} %'
        icon: |2
                    {% set bl = states('sensor.sm_g781b_battery_level') | int %}
                    {% if bl < 10 %} mdi:battery-outline
                    {% elif bl < 20 %} mdi:battery-10
                    {% elif bl < 30 %} mdi:battery-20
                    {% elif bl < 40 %} mdi:battery-30
                    {% elif bl < 50 %} mdi:battery-40
                    {% elif bl < 60 %} mdi:battery-50
                    {% elif bl < 70 %} mdi:battery-60
                    {% elif bl < 80 %} mdi:battery-70
                    {% elif bl < 90 %} mdi:battery-80
                    {% elif bl < 100 %} mdi:battery-90
                    {% elif bl == 100 %} mdi:battery
                    {% else %} mdi:battery-unknown
                    {% endif %}
        icon_color: |2-
                    {% set bl = states('sensor.sm_g781b_battery_level') | int %}
                    {% if bl < 10 %} red
                    {% elif bl < 20 %} red
                    {% elif bl < 30 %} red
                    {% elif bl < 40 %} orange
                    {% elif bl < 50 %} orange
                    {% elif bl < 60 %} green
                    {% elif bl < 70 %} green
                    {% elif bl < 80 %} green
                    {% elif bl < 90 %} green
                    {% elif bl < 100 %} green
                    {% elif bl == 100 %} green
                    {% else %} grey
                    {% endif %}
        tap_action:
          action: more-info
      - type: template
      - type: entity
        icon_color: yellow
        entity: sensor.sm_g781b_steps_sensor
      - type: entity
        icon_color: yellow
        entity: sensor.artur_distance
    alignment: left

Wiem. Miksuje :slight_smile: Tylko nie mam pomysłu obecnie na połączenie dwóch bytów o tym samym działaniu. Bo nie bardzo mi się podoba np. osobne ustawianie temperatury dla klimy i termostatu. Albo przełączanie między funkcjami, bo to może prowadzić do sytuacji, że w klimie będzie kliknięte chłodzenie, a grzejnik będzie grzał. Abstrakcyjna sytuacja, ale możliwa do wykonania. Co prawda tutaj już trochę wychodzimy poza sam Mushroom, bo tutaj powinna wejść w grę automatyzacja.