Floorplan UI with Color synced lights

[sergio_pt]

Sure
I don’t have all the customization, but the full floorplan part is working. And the popups started working again (don’t know why they didn’t yesterday)

card:
  elements:
    - action: none
      entity: sun.sun
      hold_action:
        action: none
      state_image:
        above_horizon: /local/myFloorplan/floorplan-day.jpg
        below_horizon: /local/transparent.png
      style:
        height: 100%
        left: 50%
        mix-blend-mode: lighten
        opacity: '${ states[''sensor.sunlight_opacity''].state }'
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: light.sala_candeeiro
      hold_action:
        action: none
      image: /local/myFloorplan/sala-candeeiro-on.png
      style:
        filter: >-
          ${ "hue-rotate(" + (states['light.sala_candeeiro'].attributes.hs_color
          ? states['light.sala_candeeiro'].attributes.hs_color[0] : 0) + "deg)"}
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.sala_candeeiro'].state === 'on' ?
          (states['light.sala_candeeiro'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: light.sala_strip
      hold_action:
        action: none
      image: /local/myFloorplan/sala-strip-on.png
      style:
        filter: >-
          ${ "hue-rotate(" + (states['light.sala_strip'].attributes.hs_color ?
          states['light.sala_strip'].attributes.hs_color[0] : 0) + "deg)"}
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.sala_strip'].state === 'on' ?
          (states['light.sala_strip'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: light.hall_1
      hold_action:
        action: none
      image: /local/myFloorplan/hall-on.png
      state_filter:
        'off': opacity(0%)
        'on': opacity(100%)
      style:
        left: 50%
        mix-blend-mode: lighten
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: light.sala_canto
      hold_action:
        action: none
      image: /local/myFloorplan/sala-lamp-on.png
      style:
        filter: >-
          ${ "hue-rotate(" + (states['light.sala_canto'].attributes.hs_color ?
          states['light.sala_canto'].attributes.hs_color[0] : 0) + "deg)"}
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.sala_canto'].state === 'on' ?
          (states['light.sala_canto'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: light.sofa_1
      hold_action:
        action: none
      image: /local/myFloorplan/sala-sofa-1-on.png
      style:
        filter: >-
          ${ "hue-rotate(" + (states['light.sofa_1'].attributes.hs_color ?
          states['light.sofa_1'].attributes.hs_color[0] : 0) + "deg)"}
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.sofa_1'].state === 'on' ?
          (states['light.sofa_1'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: light.sofa_2
      hold_action:
        action: none
      image: /local/myFloorplan/sala-sofa-2-on.png
      style:
        filter: >-
          ${ "hue-rotate(" + (states['light.sofa_2'].attributes.hs_color ?
          states['light.sofa_2'].attributes.hs_color[0] : 0) + "deg)"}
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.sofa_2'].state === 'on' ?
          (states['light.sofa_2'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: light.tv_1
      hold_action:
        action: none
      image: /local/myFloorplan/sala-tv-1-on.png
      style:
        filter: >-
          ${ "hue-rotate(" + (states['light.tv_1'].attributes.hs_color ?
          states['light.tv_1'].attributes.hs_color[0] : 0) + "deg)"}
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.tv_1'].state === 'on' ?
          (states['light.tv_1'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: light.tv_2
      hold_action:
        action: none
      image: /local/myFloorplan/sala-tv-2-on.png
      style:
        filter: >-
          ${ "hue-rotate(" + (states['light.tv_2'].attributes.hs_color ?
          states['light.tv_2'].attributes.hs_color[0] : 0) + "deg)"}
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.tv_2'].state === 'on' ?
          (states['light.tv_2'].attributes.brightness / 255) : '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: light.hall_quarto_lights
      hold_action:
        action: none
      image: /local/myFloorplan/hall-quarto-on.png
      state_filter:
        'off': opacity(0%)
        'on': opacity(100%)
      style:
        left: 50%
        mix-blend-mode: lighten
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: input_boolean.notify_eve_door
      hold_action:
        action: none
      image: /local/myFloorplan/door-open.png
      state_filter:
        'off': opacity(0%)
        'on': opacity(100%)
      style:
        left: 50%
        mix-blend-mode: lighten
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - action: none
      entity: group.quarto
      hold_action:
        action: none
      image: /local/myFloorplan/quarto-on.png
      style:
        filter: >-
          ${ "hue-rotate(" +
          (states['light.quarto_frente_direita'].attributes.hs_color ?
          states['light.quarto_frente_direita'].attributes.hs_color[0] : 0) +
          "deg)"}
        left: 50%
        mix-blend-mode: lighten
        opacity: >-
          ${states['light.quarto_frente_direita'].state === 'on' ?
          (states['light.quarto_frente_direita'].attributes.brightness / 255) :
          '0'}
        top: 50%
        width: 100%
      tap_action:
        action: none
      type: image
    - entity: group.livingroom
      hold_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          card:
            cards:
              - entities:
                  - entity: group.livingroom
                    secondary_info: last-changed
                style:
                  z-index: 5
                type: entities
              - cards:
                  - cards:
                      - brightness: false
                        color_picker: false
                        effects_list: false
                        entity: group.livingroom
                        full_width_sliders: true
                        header: false
                        persist_features: true
                        show_slider_percent: false
                        smooth_color_wheel: true
                        style: |
                          ha-card {
                            box-shadow: none !important;
                          }
                        type: 'custom:light-entity-card'
                      - brightness: false
                        color_temp: false
                        entity: group.livingroom
                        full_width_sliders: true
                        header: false
                        persist_features: true
                        show_slider_percent: false
                        smooth_color_wheel: true
                        style: |
                          ha-card {
                            box-shadow: none !important;
                          }
                        type: 'custom:light-entity-card'
                    column_height: 1
                    layout: vertical
                    type: 'custom:layout-card'
                  - entities:
                      - color_temp: true
                        entity: group.livingroom
                        header: false
                        persist_features: true
                        type: 'custom:light-slider-card'
                    show_header_toggle: false
                    style: |
                      :host{
                        height: 100%;
                        z-index: 0;  
                      }
                      ha-card {
                        box-shadow: none !important;
                      }
                    type: entities
                column_num: 2
                layout: horizontal
                max_width:
                  - 60%
                  - 40%
                type: 'custom:layout-card'
            type: 'custom:vertical-stack-in-card'
          deviceID:
            - this
          style:
            '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
            border-radius: 0.8vw
            opacity: 0.9
          title: Living Room
      image: /local/transparent.png
      style:
        height: 25%
        left: 23%
        top: 57%
        width: 34%
      tap_action:
        action: call-service
        service: homeassistant.toggle
        service_data:
          entity_id: group.livingroom
      type: image
    - entity: group.quarto
      hold_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          card:
            cards:
              - entities:
                  - entity: group.quarto
                    secondary_info: last-changed
                style:
                  z-index: 5
                type: entities
              - cards:
                  - cards:
                      - brightness: false
                        color_picker: false
                        effects_list: false
                        entity: group.quarto
                        full_width_sliders: true
                        header: false
                        persist_features: true
                        show_slider_percent: false
                        smooth_color_wheel: true
                        style: |
                          ha-card {
                            box-shadow: none !important;
                          }
                        type: 'custom:light-entity-card'
                      - brightness: false
                        color_temp: false
                        entity: group.quarto
                        full_width_sliders: true
                        header: false
                        persist_features: true
                        show_slider_percent: false
                        smooth_color_wheel: true
                        style: |
                          ha-card {
                            box-shadow: none !important;
                          }
                        type: 'custom:light-entity-card'
                    column_height: 1
                    layout: vertical
                    type: 'custom:layout-card'
                  - entities:
                      - color_temp: true
                        entity: group.quarto
                        header: false
                        persist_features: true
                        type: 'custom:light-slider-card'
                    show_header_toggle: false
                    style: |
                      :host{
                        height: 100%;
                        z-index: 0;  
                      }
                      ha-card {
                        box-shadow: none !important;
                      }
                    type: entities
                column_num: 2
                layout: horizontal
                max_width:
                  - 60%
                  - 40%
                type: 'custom:layout-card'
            type: 'custom:vertical-stack-in-card'
          deviceID:
            - this
          style:
            '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
            border-radius: 0.8vw
            opacity: 0.9
          title: Quarto
      image: /local/transparent.png
      style:
        height: 23%
        left: 81%
        top: 44%
        width: 22.7%
      tap_action:
        action: call-service
        service: homeassistant.toggle
        service_data:
          entity_id: group.quarto
      type: image
    - entity: light.hall_quarto_lights
      hold_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          card:
            cards:
              - entities:
                  - entity: light.hall_quarto_lights
                    secondary_info: last-changed
                style:
                  z-index: 5
                type: entities
              - cards:
                  - cards: null
                    column_height: 1
                    layout: vertical
                    type: 'custom:layout-card'
                  - entities:
                      - color_temp: true
                        entity: light.hall_quarto_lights
                        header: false
                        persist_features: true
                        type: 'custom:light-slider-card'
                    show_header_toggle: false
                    style: |
                      :host{
                        height: 100%;
                        z-index: 0;  
                      }
                      ha-card {
                        box-shadow: none !important;
                      }
                    type: entities
                column_num: 1
                layout: horizontal
                max_width:
                  - 100%
                type: 'custom:layout-card'
            type: 'custom:vertical-stack-in-card'
          deviceID:
            - this
          style:
            '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
            border-radius: 0.8vw
            opacity: 0.9
          title: Hall Quarto
      image: /local/transparent.png
      style:
        height: 25%
        left: 64%
        top: 60.5%
        width: 10%
      tap_action:
        action: toggle
      type: image
    - entity: light.hall_lights
      hold_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          card:
            cards:
              - entities:
                  - entity: light.hall_lights
                    secondary_info: last-changed
                style:
                  z-index: 5
                type: entities
              - cards:
                  - cards: null
                    column_height: 1
                    layout: vertical
                    type: 'custom:layout-card'
                  - entities:
                      - color_temp: true
                        entity: light.hall_lights
                        header: false
                        persist_features: true
                        type: 'custom:light-slider-card'
                    show_header_toggle: false
                    style: |
                      :host{
                        height: 100%;
                        z-index: 0;  
                      }
                      ha-card {
                        box-shadow: none !important;
                      }
                    type: entities
                column_num: 1
                layout: horizontal
                max_width:
                  - 100%
                type: 'custom:layout-card'
            type: 'custom:vertical-stack-in-card'
          deviceID:
            - this
          style:
            '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
            border-radius: 0.8vw
            opacity: 0.9
          title: Entrada
      image: /local/transparent.png
      style:
        height: 13.5%
        left: 48%
        top: 53%
        width: 18%
      tap_action:
        action: call-service
        service: homeassistant.toggle
        service_data:
          entity_id: light.hall_lights
      type: image
    - entity: light.sala_candeeiro
      hold_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          card:
            cards:
              - entities:
                  - entity: light.sala_candeeiro
                    secondary_info: last-changed
                style:
                  z-index: 5
                type: entities
              - cards:
                  - cards:
                      - brightness: false
                        color_picker: false
                        effects_list: false
                        entity: light.sala_candeeiro
                        full_width_sliders: true
                        header: false
                        persist_features: true
                        show_slider_percent: false
                        smooth_color_wheel: true
                        style: |
                          ha-card {
                            box-shadow: none !important;
                          }
                        type: 'custom:light-entity-card'
                      - brightness: false
                        color_temp: false
                        entity: light.sala_candeeiro
                        full_width_sliders: true
                        header: false
                        persist_features: true
                        show_slider_percent: false
                        smooth_color_wheel: true
                        style: |
                          ha-card {
                            box-shadow: none !important;
                          }
                        type: 'custom:light-entity-card'
                    column_height: 1
                    layout: vertical
                    type: 'custom:layout-card'
                  - entities:
                      - color_temp: true
                        entity: light.sala_candeeiro
                        header: false
                        persist_features: true
                        type: 'custom:light-slider-card'
                    show_header_toggle: false
                    style: |
                      :host{
                        height: 100%;
                        z-index: 0;  
                      }
                      ha-card {
                        box-shadow: none !important;
                      }
                    type: entities
                column_num: 2
                layout: horizontal
                max_width:
                  - 60%
                  - 40%
                type: 'custom:layout-card'
            type: 'custom:vertical-stack-in-card'
          deviceID:
            - this
          style:
            '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
            border-radius: 0.8vw
            opacity: 0.9
          title: Candeeiro
      icon: 'mdi:lamp'
      style:
        '--iron-icon-height': 1.7vw
        '--iron-icon-width': 1.7vw
        '--paper-item-icon-active-color': '#000000'
        '--paper-item-icon-color': darkgrey
        align-items: center
        background-color: '#FFFFFF'
        border-radius: 100%
        box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
        display: flex
        height: 3vw
        justify-content: center
        left: 12.5%
        margin-left: '-1.5vw'
        margin-top: '-1.5vw'
        top: 70%
        transform: scale(1.2)
        width: 3vw
        z-index: 5
      tap_action:
        action: toggle
      type: state-icon
    - entity: light.sala_canto
      hold_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          card:
            cards:
              - entities:
                  - entity: light.sala_canto
                    secondary_info: last-changed
                style:
                  z-index: 5
                type: entities
              - cards:
                  - cards:
                      - brightness: false
                        color_picker: false
                        effects_list: false
                        entity: light.sala_canto
                        full_width_sliders: true
                        header: false
                        persist_features: true
                        show_slider_percent: false
                        smooth_color_wheel: true
                        style: |
                          ha-card {
                            box-shadow: none !important;
                          }
                        type: 'custom:light-entity-card'
                      - brightness: false
                        color_temp: false
                        entity: light.sala_canto
                        full_width_sliders: true
                        header: false
                        persist_features: true
                        show_slider_percent: false
                        smooth_color_wheel: true
                        style: |
                          ha-card {
                            box-shadow: none !important;
                          }
                        type: 'custom:light-entity-card'
                    column_height: 1
                    layout: vertical
                    type: 'custom:layout-card'
                  - entities:
                      - color_temp: true
                        entity: light.sala_canto
                        header: false
                        persist_features: true
                        type: 'custom:light-slider-card'
                    show_header_toggle: false
                    style: |
                      :host{
                        height: 100%;
                        z-index: 0;  
                      }
                      ha-card {
                        box-shadow: none !important;
                      }
                    type: entities
                column_num: 2
                layout: horizontal
                max_width:
                  - 60%
                  - 40%
                type: 'custom:layout-card'
            type: 'custom:vertical-stack-in-card'
          deviceID:
            - this
          style:
            '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
            border-radius: 0.8vw
            opacity: 0.9
          title: Floor Light
      icon: 'mdi:lightbulb'
      style:
        '--iron-icon-height': 1.7vw
        '--iron-icon-width': 1.7vw
        '--paper-item-icon-active-color': '#000000'
        '--paper-item-icon-color': darkgrey
        align-items: center
        background-color: '#FFFFFF'
        border-radius: 100%
        box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
        display: flex
        height: 3vw
        justify-content: center
        left: 26%
        margin-left: '-1.5vw'
        margin-top: '-1.5vw'
        top: 40%
        transform: scale(1.2)
        width: 3vw
        z-index: 5
      tap_action:
        action: toggle
      type: state-icon
    - entity: light.sala_strip
      hold_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          card:
            cards:
              - entities:
                  - entity: light.sala_strip
                    secondary_info: last-changed
                style:
                  z-index: 5
                type: entities
              - cards:
                  - cards:
                      - brightness: false
                        color_picker: false
                        effects_list: false
                        entity: light.sala_strip
                        full_width_sliders: true
                        header: false
                        persist_features: true
                        show_slider_percent: false
                        smooth_color_wheel: true
                        style: |
                          ha-card {
                            box-shadow: none !important;
                          }
                        type: 'custom:light-entity-card'
                      - brightness: false
                        color_temp: false
                        entity: light.sala_strip
                        full_width_sliders: true
                        header: false
                        persist_features: true
                        show_slider_percent: false
                        smooth_color_wheel: true
                        style: |
                          ha-card {
                            box-shadow: none !important;
                          }
                        type: 'custom:light-entity-card'
                    column_height: 1
                    layout: vertical
                    type: 'custom:layout-card'
                  - entities:
                      - color_temp: true
                        entity: light.sala_strip
                        header: false
                        persist_features: true
                        type: 'custom:light-slider-card'
                    show_header_toggle: false
                    style: |
                      :host{
                        height: 100%;
                        z-index: 0;  
                      }
                      ha-card {
                        box-shadow: none !important;
                      }
                    type: entities
                column_num: 2
                layout: horizontal
                max_width:
                  - 60%
                  - 40%
                type: 'custom:layout-card'
            type: 'custom:vertical-stack-in-card'
          deviceID:
            - this
          style:
            '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
            border-radius: 0.8vw
            opacity: 0.9
          title: TV Strip
      icon: 'mdi:led-strip-variant'
      style:
        '--iron-icon-height': 1.7vw
        '--iron-icon-width': 1.7vw
        '--paper-item-icon-active-color': '#000000'
        '--paper-item-icon-color': darkgrey
        align-items: center
        background-color: '#FFFFFF'
        border-radius: 100%
        box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
        display: flex
        height: 3vw
        justify-content: center
        left: 16%
        margin-left: '-1.5vw'
        margin-top: '-1.5vw'
        top: 40%
        transform: scale(1.2)
        width: 3vw
        z-index: 5
      tap_action:
        action: toggle
      type: state-icon
    - entity: binary_sensor.sensor_hall
      icon: 'mdi:walk'
      state_filter:
        'off': opacity(0%)
        'on': opacity(100%)
      style:
        '--iron-icon-height': 1.7vw
        '--iron-icon-width': 1.7vw
        '--paper-item-icon-active-color': '#ff0000'
        '--paper-item-icon-color': darkgrey
        align-items: center
        background-color: '#FFFFFF'
        border-radius: 100%
        box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
        display: flex
        height: 3vw
        justify-content: center
        left: 40%
        margin-left: '-1.5vw'
        margin-top: '-1.5vw'
        top: 40%
        transform: scale(1.2)
        width: 3vw
        z-index: 5
      tap_action:
        action: more-info
      type: state-icon
    - entity: binary_sensor.sensor_hall_quarto
      icon: 'mdi:walk'
      state_filter:
        'off': opacity(0%)
        'on': opacity(100%)
      style:
        '--iron-icon-height': 1.7vw
        '--iron-icon-width': 1.7vw
        '--paper-item-icon-active-color': '#ff0000'
        '--paper-item-icon-color': darkgrey
        align-items: center
        background-color: '#FFFFFF'
        border-radius: 100%
        box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
        display: flex
        height: 3vw
        justify-content: center
        left: 63%
        margin-left: '-1.5vw'
        margin-top: '-1.5vw'
        top: 80%
        transform: scale(1.2)
        width: 3vw
        z-index: 5
      tap_action:
        action: more-info
      type: state-icon
    - entity: sensor.sensor_quarto
      style:
        '--iron-icon-height': 1.7vw
        '--iron-icon-width': 1.7vw
        '--paper-item-icon-active-color': '#ff0000'
        '--paper-item-icon-color': darkgrey
        align-items: center
        background-color: '#FFFFFF'
        border-radius: 100%
        box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
        color: darkgrey
        display: flex
        font-size: 0.6vw
        height: 3vw
        justify-content: center
        left: 81%
        margin-left: '-1.5vw'
        margin-top: '-1.5vw'
        top: 25%
        transform: scale(1.2)
        width: 3vw
        z-index: 5
      tap_action:
        action: more-info
      type: state-label
  image: /local/myFloorplan/floorplan-night.jpg
  style: |
    ha-card:first-child {
      background: rgba(42, 46, 48, 1)
    }
  type: 'custom:hui-picture-elements-card'
entities:
  - light.hall_lights
  - light.hall_1
  - light.hall_2
  - light.hall_quarto_lights_lights
  - light.hall_quarto_1
  - light.hall_quarto_2
  - null
  - light.quarto_lights
  - light.quarto_frente_direita
  - light.quarto_frente_esquerda
  - light.quarto_tras_direita
  - light.quarto_tras_esquerda
  - light.sala_candeeiro
  - light.sala_canto
  - light.sofa_1
  - light.sofa_2
  - light.sala_strip
  - light.tv_1
  - light.tv_2
  - group.quarto
  - group.livingroom
  - input_boolean.notify_eve_door
  - binary_sensor.sensor_hall
  - binary_sensor.sensor_hall_quarto
  - sensor.sensor_quarto
type: 'custom:config-template-card'

[SuperMario (Mario.B)]

More or less is working again except Media part. I have some Android TV integration for Firestick4K but it seems is broken now in this new HA release.
Also I have found that for now I need to comment the parts under Sidebar where "Minigraph to show temperature inside and out " which uses ‘custom:mini-graph-card’ and part of the sidebar with “Mini Weather card” which uses ‘custom:simple-weather-card’. I didn’t have time for now going more further with this but now i have Lovelace working again:

[dmertens (Danny)]

Great find, thanks fixed it also for me!!!
Pop ups still work for me also, so seems to be something with the mini graph card.
The previous issues with updating states icons, labels, groups of lights and… are still there so we now have everything back as before

Thanks!

[SuperMario (Mario.B)]

I’m using custom Mini graph card under Homekit view for temperature and humidity sensors and there everything is fine. So there is something in Luke’s styling for this mini graph card under Sidebar.

[dmertens (Danny)]

Yes for my mobile view its working indeed fine also

But if I use even the basic example in the floorplan view then it crashes so seems to be something in Luke’s view yes

            - type: custom:mini-graph-card
              entities:
               - sensor.temperature_22

But @lukevink already mentioned that he is willing to look at the newer versions and updates his config as he has the time to review it, so will be fixed, I’m sure about that!

Also my color icons (–iron-icon-fill-color) are white now so probably this also changed in the new version so still a lot of small issues but also so happy with the speed improvements is night and day here!
The wife can manage the house again and does not really care about these small cosmetic issues so for now its again a good day so going to stay on this version. thanks for your support!

[dmertens (Danny)]

Installed 0.110.1 does not fix the issues, so for now no mini graph cards

Other cards that give issues so it’s really not only Luke’s floor plan, seems that a lot of users have the same issues it’s not always clear but it seems that a lot of users have the same issues with picture elements cards because you can read that a lot of floorplans broke with this version

Identified cards for now

• now-playing-poster
• custom-attribute-card #entity-attributes-card?
• custom:circle-sensor-card
• custom:mini-graph
• color-lite-card

Suspects

• custom:gauge-card
• custom:text-element
• custom:thermostat-card
• custom:mini-media-player (I’m using this and works fine here!)
• custom:state-attribute-element

[aerik]

@lukevink

congratz for your works, it’s amazing!
but, you integrate your H1 with Home Assistant? I have a H2 and I’m not getting at all, can you help me with this? Share any tutorial or something like this.

Tks!

[SuperMario (Mario.B)]

I can confirm that with the latest HA version 0.110.2 mini-graph-card is working agan and everything is as should be:

[dmertens (Danny)]

Same here, everythings works great again!

[dmertens (Danny)]

Hi @lukevink,
I was hoping that the issues with groups, but more important state updates where also resolved in the latest version of hass 0.110.2 but it seems that’s not the case so probably something in the view itself?
Any idea how I can changes this that the updates work?

Thanks!

Example;

https://dmertens.stackstorage.com/s/cjA3RH8XzyCxhSI

So basically when I open a window then this will be updated in the map in the color red.
Works fine, but seems not to update automatically in the background, when I for instance activate a light (update?) then the update for the window is also shown in the map.

I’m using this to update the window state

            - entity: binary_sensor.window_door_sensor
              state_image:
                'off': /local/images/selecttrans.png
                'on': /local/images/floorplan/v4/schuifdeur_los_1.png
              style:
                left: 50%
                top: 50%
                width: 100%
              type: image  

[lucibuz (Lucian Buzatu)]

Hello,
Great design, really inspiring!
How can I to change the layout resolution, to 1920x1080 for example?
thanks.

[Maxi1134]

Did you managed to fix the white issue?

[dmertens (Danny)]

Found a great visual tool to get the dimensions, coordinates for the (transparent) images on the floor plan, goes a lot faster then thinkering till you find the correct coordinates
Also the now playing card from this developer is quite cool to see what’s playing on your TV, projector or just showing artwork from your media players, works great in the floor plan

bradcrc/Now-Playing-Card

Video demo: https://www.youtube.com/watch?v=1ZU4WMgwU6s&feature=youtu.be

[reins5 (Renzo)]

what program you use to drag icons

[dmertens (Danny)]

OK lets say I’m stupid because I forgot off course to add all the entities in the template card, after this it works great, my apologies for my stupidity and thanks for the great work you did to enable us non dev wizards to have a great looking and very functional dashbaord!!!

[RodrigoSilva (Rodrigo Ferreira R Silva)]

Olá @lukevink gostei de seu trabalho tenho um robo xiaomi v2 e gostaria de uma ajuda, este codigo que vc colocou input text para que serve? Não consigo chamar por voz o robo para limpeza de area. será que vc consegue me ajudar?

[lukevink]

Hey all! I finally uploaded my code to the latest version (111.3), yay! Apologies for taking so long.
I will go through all comments here tomorrow and see if theres anything I can help out with. Cheers everyone!

lukevink/hass-config-lajv

[lukevink]

The input text is a variable to store which “room” the vaccum cleaner is cleaning - because the robot cant clean rooms. Instead, you have to manually set “zoned areas” by drawing a grid over your map. (its a little complicated). The input variable is then used to highlight which room is being cleaned in the UI.

google translate - não falo português desculpe!
O texto de entrada é uma variável para armazenar em qual “sala” o aspirador está limpando - porque o robô não pode limpar as salas. Em vez disso, você deve definir manualmente “áreas de zona” desenhando uma grade sobre o mapa. (é um pouco complicado). A variável de entrada é usada para destacar qual sala está sendo limpa na interface do usuário.

How I set up room-cleaning automation with Google Home, Home-Assistant and...

Howto: Xiaomi vacuum zoned cleaning

Needs HA Version later than 0.68.xx Hey there, Xiaomi has recently released an update for its v1 vacuum that enabled it for the zoned cleaning and goto function that was previously only available to the v2 vacuum. In this post you will get to know how to: update to the latest firmware on your v1 to get access to the new functions extract your token quickly and easily and setup the component use the new commands (zoned cleaning and goto) figure out the coordinates for your map / floor layout u…

[lukevink]

Sketch and The Noun Project
https://thenounproject.com/ - which for any designer is a massive cheat

[lukevink]

Hey yea! Super cool! I had a now playing on my projector screen in the middle of my living room - but the angle was so warped and thin, it looked pretty terrible in my room so I chose not to keep it.