Dopasowywanie się karty do ekranu

Hej

Dodałem sobie custom:vertical-stack-in-card i na tej karcie mam odkurzacz Roborock S6. Problem polega na tym, że chciałbym aby wyświetlało mi się wszystko naraz na ekranie, bo nie mam tam dużo informacji, a dzieję się tak, że obojętnie jak duży by nie był ekran, to zawsze muszę przewijać w dól. Tylko na telefonie działa jak powinno. Poniżej ui-lovelace.yaml

- title: Edward
    path: roborock
    icon: 'mdi:robot-vacuum'
    panel: false
    badges: []
    cards:
      - type: picture-elements
        image: \local\vacuum.jpg
        elements:
          - type: icon
            icon: 'mdi:bell-ring'
            tap_action: call-service
            entity: vacuum.xiaomi_vacuum_cleaner
            service: vacuum.locate
            style:
              top: 90%
              left: 80%
              color: '#f3ff0d'
          - type: icon
            icon: 'mdi:crosshairs'
            tap_action: call-service
            entity: vacuum.xiaomi_vacuum_cleaner
            service: vacuum.clean_segment
            style:
              top: 90%
              left: 65%
              color: '#f3ff0d'
          - type: icon
            tap_action: call-service
            icon: 'mdi:home'
            entity: vacuum.xiaomi_vacuum_cleaner
            service: vacuum.return_to_base
            style:
              top: 90%
              left: 50%
              color: '#f3ff0d'
          - type: icon
            icon: 'mdi:stop'
            entity: vacuum.xiaomi_vacuum_cleaner
            tap_action: call-service
            service: vacuum.stop
            style:
              top: 90%
              left: 35%
              color: '#f3ff0d'
          - type: icon
            icon: 'mdi:play'
            entity: vacuum.xiaomi_vacuum_cleaner
            tap_action: call-service
            service: vacuum.turn_on
            style:
              top: 90%
              left: 20%
              color: '#f3ff0d'
          - type: state-label
            entity: sensor.vacuum_operation
            style:
              top: 10%
              left: 1%
              color: 'rgb(255, 255, 255)'
              transform: 'translate(0%,-50%)'
              pointer-events: none
              font-family: Trebuchet MS
              font-size: 90%
              font-weight: bold
              border-color: 'rgb(34, 154, 210)'
              background-color: '#3090C7'
              border-radius: 6px
          - type: state-label
            entity: sensor.vacuum_accessories
            style:
              top: 10%
              right: 1%
              color: 'rgb(255, 255, 255)'
              transform: 'translate(0%,-50%)'
              pointer-events: none
              font-family: Trebuchet MS
              font-size: 90%
              font-weight: bold
              border-color: 'rgb(34, 154, 210)'
              background-color: '#3090C7'
              border-radius: 6px
          - type: state-label
            tap_action: more-info
            entity: vacuum.xiaomi_vacuum_cleaner
            style:
              top: 14%
              right: 38%
              color: 'rgb(255, 255, 255)'
              transform: 'translate(0%,-50%)'
              font-family: Trebuchet MS
              font-size: 150%
              font-weight: bold
              border-color: 'rgb(34, 154, 210)'
              border-radius: 6px
              background-color: '#cccccc'
          - type: state-label
            entity: sensor.vacuum_cleanmainbrush
            style:
              top: 35%
              right: 1%
              color: '#ffffff'
              transform: 'translate(0%,-50%)'
              pointer-events: none
              font-family: Trebuchet MS
              font-size: 76%
              font-weight: bold
              border-right-style: solid
              border-color: 'rgb(34, 154, 210)'
          - type: state-label
            entity: sensor.vacuum_cleansidebrush
            style:
              top: 45%
              right: 1%
              color: '#ffffff'
              transform: 'translate(0%,-50%)'
              pointer-events: none
              font-family: Trebuchet MS
              font-size: 76%
              font-weight: bold
              border-right-style: solid
              border-color: 'rgb(34, 154, 210)'
          - type: state-label
            entity: sensor.vacuum_cleanfilter
            style:
              top: 55%
              right: 1%
              color: '#ffffff'
              transform: 'translate(0%,-50%)'
              pointer-events: none
              font-family: Trebuchet MS
              font-size: 76%
              font-weight: bold
              border-right-style: solid
              border-color: 'rgb(34, 154, 210)'
              opacity: 0.8
          - type: state-label
            entity: sensor.vacuum_sensordirtyleft
            style:
              top: 65%
              right: 1%
              color: '#ffffff'
              transform: 'translate(0%,-50%)'
              pointer-events: none
              font-family: Trebuchet MS
              font-size: 76%
              font-weight: bold
              border-right-style: solid
              border-color: 'rgb(34, 154, 210)'
          - type: state-label
            entity: sensor.vacuum_status
            style:
              top: 40%
              left: 1%
              color: '#ffffff'
              transform: 'translate(0%,-50%)'
              pointer-events: none
              font-family: Trebuchet MS
              font-size: 80%
              font-weight: bold
              border-left-style: solid
              border-color: '#3090C7'
          - type: state-label
            entity: sensor.vacuum_battery
            style:
              top: 50%
              left: 1%
              color: '#ffffff'
              transform: 'translate(0%,-50%)'
              pointer-events: none
              font-family: Trebuchet MS
              font-size: 80%
              font-weight: bold
              border-left-style: solid
              border-color: 'rgb(34, 154, 210)'
          - type: state-label
            entity: sensor.vacuum_fan_speed
            style:
              top: 60%
              left: 1%
              color: '#ffffff'
              transform: 'translate(0%,-50%)'
              pointer-events: none
              font-family: Trebuchet MS
              font-size: 80%
              font-weight: bold
              border-left-style: solid
              border-color: 'rgb(34, 154, 210)'
          - type: state-label
            entity: sensor.vacuum_cleaned_area
            prefix: 'Area:'
            style:
              top: 79%
              left: 31%
              color: '#84a6ba'
              transform: 'translate(0%,-50%)'
              pointer-events: none
              font-family: Trebuchet MS
              font-size: 80%
              font-weight: bold
          - type: state-label
            entity: sensor.vacuum_cleaning_time
            prefix: 'Time:'
            style:
              top: 79%
              left: 51%
              color: '#84a6ba'
              transform: 'translate(0%,-50%)'
              pointer-events: none
              font-family: Trebuchet MS
              font-size: 80%
              font-weight: bold
      - type: horizontal-stack
        title: Wybierz pokój do posprzątania
        cards:
          - type: picture-entity
            image: /local/malypokoj.jpg
            entity: script.vacuum_malypokoj
          - type: picture-entity
            image: /local/salon.jpg
            entity: script.vacuum_salon
          - type: picture-entity
            image: /local/lazienka.jpg
            entity: script.vacuum_lazienka
          - type: picture-entity
            image: /local/hol.jpg
            entity: script.vacuum_hol
          - type: picture-entity
            image: /local/sypialnia.jpg
            entity: script.vacuum_sypialnia
          - type: picture-entity
            image: /local/kuchnia.jpg
            entity: script.vacuum_kuchnia
      - type: entities
        entities:
          - entity: input_select.vacuum_mode_select
    type: 'custom:vertical-stack-in-card'

Dodaj jakiś zrzut ekranu.

Dobrze widzę masz ekran podzielony na 2 części ?

mam 2 monitory, różnej wielkości(laptop podłączony pod monitor) ale na obu jest to samo. Myślisz że to powód? Obrazek jest z 2 części bo musiałem scrollować:)

Spróbuj zmniejszyć rozmiar grafiki.

1 Like

Jeśli chcesz to możesz skorzystać z karty którą ja mam zrobioną - podmienisz sobie encje i nazwy plików:

  - elements:
      - icon: 'mdi:bell-ring'
        style:
          color: '#000000'
          left: 90%
          top: 95%
        tap_action:
          action: call-service
          service: vacuum.locate
          service_data:
            entity_id: vacuum.xiaomi_vacuum_cleaner
        type: icon
      - icon: 'mdi:home'
        style:
          color: '#000000'
          left: 75%
          top: 95%
        tap_action:
          action: call-service
          service: vacuum.return_to_base
          service_data:
            entity_id: vacuum.xiaomi_vacuum_cleaner
        type: icon
      - icon: 'mdi:stop'
        style:
          color: '#000000'
          left: 60%
          top: 95%
        tap_action:
          action: call-service
          service: vacuum.stop
          service_data:
            entity_id: vacuum.xiaomi_vacuum_cleaner
        type: icon
      - icon: 'mdi:pause'
        style:
          color: '#000000'
          left: 45%
          top: 95%
        tap_action:
          action: call-service
          service: vacuum.pause
          service_data:
            entity_id: vacuum.xiaomi_vacuum_cleaner
        type: icon
      - icon: 'mdi:play'
        style:
          color: '#000000'
          left: 30%
          top: 95%
        tap_action:
          action: call-service
          service: vacuum.start
          service_data:
            entity_id: vacuum.xiaomi_vacuum_cleaner
        type: icon
      - icon: 'mdi:robot-vacuum'
        style:
          color: '#000000'
          left: 10%
          top: 95%
        tap_action:
          action: toggle
        entity: input_boolean.vacuum_tryb
        type: icon
      - entity: sensor.vacuum_operation
        style:
          background-color: '#000000'
          border-color: 'rgb(34, 154, 210)'
          border-radius: 6px
          color: 'rgb(255, 255, 255)'
          font-family: Trebuchet MS
          font-size: 100%
          font-weight: bold
          left: 0%
          pointer-events: none
          top: 10%
          transform: 'translate(0%,-50%)'
        type: state-label
      - entity: sensor.vacuum_accessories
        style:
          background-color: '#000000'
          border-color: 'rgb(34, 154, 210)'
          border-radius: 6px
          color: 'rgb(255, 255, 255)'
          font-family: Trebuchet MS
          font-size: 100%
          font-weight: bold
          pointer-events: none
          right: 0%
          top: 10%
          transform: 'translate(0%,-50%)'
        type: state-label
      - entity: vacuum.xiaomi_vacuum_cleaner
        style:
          '--paper-item-icon-color': 'rgb(115, 122, 130)'
          action: more-info
          font-size: 150%
          font-weight: bold
          left: 50%
          tap_action: null
          top: 8%
        type: state-label
      - entity: sensor.vacuum_cleanmainbrush
        style:
          border-color: '#ffffff'
          border-right-style: solid
          color: '#ffffff'
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          pointer-events: none
          right: 0%
          top: 25%
          transform: 'translate(0%,-50%)'
        type: state-label
      - entity: sensor.vacuum_cleansidebrush
        style:
          border-color: '#ffffff'
          border-right-style: solid
          color: '#ffffff'
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          pointer-events: none
          right: 0%
          top: 35%
          transform: 'translate(0%,-50%)'
        type: state-label
      - entity: sensor.vacuum_cleanfilter
        style:
          border-color: '#ffffff'
          border-right-style: solid
          color: '#ffffff'
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          pointer-events: none
          right: 0%
          top: 55%
          transform: 'translate(0%,-50%)'
        type: state-label
      - entity: sensor.vacuum_sensordirtyleft
        style:
          border-color: '#ffffff'
          border-right-style: solid
          color: '#ffffff'
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          pointer-events: none
          right: 0%
          top: 65%
          transform: 'translate(0%,-50%)'
        type: state-label
      - entity: sensor.vacuum_status
        prefix: 'Status: '
        style:
          border-color: '#ffffff'
          border-left-style: solid
          color: '#ffffff'
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          left: 0%
          pointer-events: none
          top: 25%
          transform: 'translate(0%,-50%)'
        type: state-label
      - entity: sensor.vacuum_battery
        style:
          border-color: '#ffffff'
          border-left-style: solid
          color: '#ffffff'
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          left: 0%
          pointer-events: none
          top: 38%
          transform: 'translate(0%,-50%)'
        type: state-label
      - entity: sensor.vacuum_fan_speed
        style:
          border-color: '#ffffff'
          border-left-style: solid
          color: '#ffffff'
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          left: 0%
          pointer-events: none
          top: 68%
          transform: 'translate(0%,-50%)'
        type: state-label
      - entity: sensor.vacuum_cleaned_area
        prefix: 'Area: '
        style:
          color: '#ffffff'
          font-family: Trebuchet MS
          font-size: 100%
          font-weight: bold
          left: 59%
          pointer-events: none
          top: 85%
          transform: 'translate(0%,-50%)'
        type: state-label
      - entity: counter.ilosc_sprzatan
        prefix: 'Ilość sprzątań: '
        style:
          color: '#ffffff'
          font-family: Trebuchet MS
          font-size: 100%
          font-weight: bold
          left: 15%
          pointer-events: none
          top: 85%
          transform: 'translate(0%,-50%)'
        type: state-label
    image: /local/image/vacuum.png
    type: picture-elements
type: 'custom:vertical-stack-in-card'

1 Like

dzięki :slight_smile: rozwiązałeś jakoś temat wyboru ilości przejazdów odkurzacza w danym pokoju? Bo w aplikacji na tel można sobie ustawić ilość przejazdów(1-3) a nie wiem jak to zrobić w HA.

W sumie nie myślałem o tym, pewnie do zrobienia, ale szczerze mówiąc nie było mi to potrzebne. Jeśli nie posprzątał mi danego pomieszczenia to sobie klikam jeszcze raz określone pomieszczenie.

No moza i tak, ja to często uzywam przy mopowaniu, od razu daję że ma 3x jechać i jest czysto