Dashboard Na Komórkę Home Assistant Bubble Card Pop up Smartphone #OdZeraDoAutomatykiDomu #15

Witajcie w serii Od Zera Do Automatycznego Domu. Zabiorę was razem ze mną na przygodę tworzenia od podstaw automatycznego domu na bazie Home Assistant. Postaram się wrzucać do tej serii wszystkie rzeczy które robię na moim nowym sprzęcie. Robię wszystko od nowa! Będzie tego naprawdę sporo…

W tym odcinku pokażę wam jak stworzyć dashboard na komórkę przy użyciu bubble card, pop upów i jak pokolorować wszystko według waszego uznania. Jeśli macie jakies pytania czy coś wam nie wychodzi to piszcie w komentarzach. Powodzenia!

Kod do kolorowania różnych elementów poniżej.

Kolorowanie buttona, najpierw tło a druga rzecz to kolor ikony:

        styles: |
          .bubble-button-background {
            opacity: 1 !important;
            background-color: ${state === 'on' ? '#FFABAB' : ''} !important;
          }
          .bubble-icon {
            color: ${hass.states['input_boolean.home_alarm'].state === 'on' ? 'white' : ''} !important;
          }

Kolorowanie buttonu na podstawie jego stanu w kilku opcjach, 3 wierze i 4 rzecz to zmiana koloru czcionki stanu sensora:

        styles: |
          .bubble-button-background {
            opacity: 1 !important;
            background-color: ${state > '4' ? '#FFC247' : ''} !important;
          }
          .bubble-button-background {
            opacity: 1 !important;
            background-color: ${state > '5' ? '#FFA447' : ''} !important;
          }
          .bubble-button-background {
            opacity: 1 !important;
            background-color: ${state > '6' ? '#FF8547' : ''} !important;
          }
          .bubble-state {
            color: ${state > '4' ? 'black' : ''} !important;
          }

Kolorowanie sub-buttonów, najpierw tło w zależności od stanu a potem druga rzecz to ikona,z wróćcie uwagę na numerację. Poniższy kod koloruje pierwszy sub-botton:

    styles: |
      .bubble-sub-button:nth-child(2) {
        background-color: ${hass.states['light.frontyard_grass'].state === 'on' ? '#FFF5BA' : ''} !important;
      }
      .bubble-sub-button-1 > ha-icon {
        color: ${hass.states['light.frontyard_grass'].state === 'on' ? '#41444B' : ''} !important;
      }

Kolejny kod koloruje trochę wiecej rzeczy. Najpierw tło, potem wartość/tekst sensora i na końcu zmieniamy kolor ikony:

    styles: |
      .bubble-sub-button:nth-child(2) {
        background-color: ${hass.states['binary_sensor.frontyard_c_wicket_contact'].state === 'on' ? '#FFBEBC' : ''} !important;
      }
      .bubble-sub-button:nth-child(2) { 
        color: ${hass.states['binary_sensor.frontyard_c_wicket_contact'].state === 'on' ? '#41444B' : ''} !important;
      } 
      .bubble-sub-button-1 > ha-icon {
        color: ${hass.states['binary_sensor.frontyard_c_wicket_contact'].state === 'on' ? '#41444B' : ''} !important;
      }

Kolejny blok kodu przedstawia kolorowanie tła i koloru wartości sensora bez żadnych zależności:

    styles: |
      .bubble-sub-button:nth-child(2) {
        background-color: ${'#6EB5FF'} !important;
      }
      .bubble-sub-button:nth-child(2) { 
        color: ${'#41444B'} !important;

Ostatni kod służy do kolorowania sliderów i ikony:

        styles: |
          .bubble-range-fill { 
            background: rgba(175,203,255,1) !important;
            opacity: 1 !important;
          }
          .bubble-icon {
            color: ${hass.states['cover.masterbedroom_window'].state === 'open' ? 'white' : ''} !important;
          }  

Link afiliacyjny do Aliexpress, dzięki! https://s.click.aliexpress.com/e/_DD72ldL

Zachęcam do subskrypcji kanału, dzięki za łapkę i oglądanie.