Floorplan UI with Color synced lights

Can anyone tell what goes wrong in this syntax. I tried a lot but I can’t figure it out. I expect it’s something simple but I don’t see it anymore.

type: 'custom:config-template-card'
entities:
  - light.go
card:
  type: picture-elements
  image: /local/home/downstairs_go_white.png
  elements:
    - type: image
      entity: light.go
      tap_action: none
      hold_action: none
      action: none
      image:  /local/home/downstairs_go_white.png
      style:
        filter: >-
          ${ "hue-rotate(" + (states['light.go'].attributes.hs_color ?
          states['light.go'].attributes.hs_color[0] : 0) + "deg)"}
        left: 50%
        mix-blend-mode: lighten
        top: 50%
        width: 100%

I don’t have a syntax-error in the sense that I can’t store it but the second part of

${ "hue-rotate(" + (states['light.go'].attributes.hs_color ?
          states['light.go'].attributes.hs_color[0] : 0) + "deg)"}

also after the ? doesn’t color the same as the first part where ‘hue-rotate’ and ‘light.go’ are blue and ‘states’ is white where in the second line everything is orange except ’ : 0) ’ + (white) and ’ “deg)” ’ (blue) so there must be some sort of syntax-error left.

hey there! did this ever happen? I have the same issue, unable to do a similar style

Hello everyone I have created my house plan with home sweet 3d I have added 3 entities in my plan but only the last one works that I put in order in lovelace.yaml how can I make them all work where I am wrong and as if it does not go wild l click event.

- title: Controllo Stanze
    icon: 'mdi:floor-plan'
    panel: true
    badges: []    
    cards:
     
        ###################   config-template-card    #####################
        #########################   IMPORTANT!    #########################

        # To use the styling templates for individual lights, I have used 
        # Config Template Card. Config template card passes the entities it
        # uses into the card. Make sure you change these entities below to  
        # your own and include any light entities you use above.
        
        # To understand why, check: https://github.com/iantrich/config-template-card
    - type: horizontal-stack
      cards:
     
      - type: conditional
        conditions:
          - entity: input_select.floorplan_floor
            state: "1st Floor"
        card:
            type: 'custom:config-template-card'
            entities:
                - switch.luce_soggiorno_1
                - switch.luce_soggiorno_2
                - switch.luce_corridoio_1
            card:
              ###################   Picture Elements Card    #####################
              type: 'picture-elements'        
              image: /local/ui/floorplan/punta_secca_primo_piano_luci_spente.png
              style: |
                ha-card:first-child {
                  background: rgba(42, 46, 48, 1)
                }
                
              elements:
              

    
                  #########################    DAY BASE FLOORPLAN OVERLAY    #########################
                  
               

           
                - entity: switch.luce_soggiorno_1
                  hold_action: none
                  state_image:
                    'off': /local/floorplan/transparent_square.png
                    'on': /local/floorplan/examples/puntasecca/soggiorno_1_on.png
                  style:
                    left: 50%
                    top: 50%
                    width: 100%
                  tap_action: none
                  type: image
                - entity: switch.luce_soggiorno_1
                  hold_action:
                    action: call-service
                    service: browser_mod.popup
                    service_data:
                      card:
                        cards:
                          - entities:
                              - entity: switch.luce_soggiorno_1
                                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: switch.luce_soggiorno_1
                                    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: Stairs - Upstairs
                  icon: 'mdi:ceiling-light'
                  style:
                    '--iron-icon-height': 1.5vw
                    '--iron-icon-width': 1.5vw
                    '--paper-item-icon-active-color': '#000000'
                    '--paper-item-icon-color': darkgrey
                    align-items: center
                    background-color: 'rgba(255, 255, 255, 1)'
                    border-radius: 100%
                    box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
                    display: flex
                    height: 2vw
                    justify-content: center
                    margin-left: '-1.5vw'
                    margin-top: '-1.5vw'
                    left: 50%
                    top: 52%
                    transform: 'scale(1.2)'
                    width: 2vw
                  tap_action:
                    action: toggle
                  type: state-icon
                - entity: switch.luce_soggiorno_2
                  hold_action: none
                  state_image:
                    'off': /local/floorplan/transparent_square.png
                    'on': /local/floorplan/examples/puntasecca/soggiorno_1_on.png
                  style:
                    left: 50%
                    top: 50%
                    width: 100%
                  tap_action: none
                  type: image
                - entity: switch.luce_soggiorno_2
                  hold_action:
                    action: call-service
                    service: browser_mod.popup
                    service_data:
                      card:
                        cards:
                          - entities:
                              - entity: switch.luce_soggiorno_2
                                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: switch.luce_soggiorno_2
                                    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: Stairs - Upstairs
                  icon: 'mdi:ceiling-light'
                  style:
                    '--iron-icon-height': 1.5vw
                    '--iron-icon-width': 1.5vw
                    '--paper-item-icon-active-color': '#000000'
                    '--paper-item-icon-color': darkgrey
                    align-items: center
                    background-color: 'rgba(255, 255, 255, 1)'
                    border-radius: 100%
                    box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
                    display: flex
                    height: 2vw
                    justify-content: center
                    margin-left: '-1.5vw'
                    margin-top: '-1.5vw'
                    left: 50%
                    top: 45%
                    transform: 'scale(1.2)'
                    width: 2vw
                  tap_action:
                    action: toggle
                  type: state-icon
                  
    
    
    

There are breaking changes in browser_mod 1.3 https://github.com/thomasloven/hass-browser_mod/releases/tag/1.3.0

Just try changing your hold_actions like this

          entity: light.kitchen
          hold_action:          
            action: fire-dom-event
            browser_mod:
              command: popup
              card:                             
                ...
              deviceID:
                - this
              card_mod:
                ...
              title: Kitchen

Has anyone found something creative to put in this empty space if you are in the States and the rain graph isn’t applicable?

Depending on whether you have a weather entity that provides you with forecast data (I’ve gone with Openweathermap), you can then plot that data with ApexCharts card. Here’s what my take on the graph looks like:

1 Like

Hi, how can I fix the size?

This is exactly what I was looking for! Thank you!

@CDRX2 Could you post your configuration for that exact chart? I am also using Openweathermap.

Sure, here you go:

  - type: 'custom:apexcharts-card'
    graph_span: 7d12h
    span:
      start: day
      offset: +12h
    apex_config:
      dataLabels:
        enabled: false
      chart:
        height: 270%
      legend:
        position: 'top'
      stroke:
        colors: ['#ffa31a', '#03a8f4', 'none']
      fill:
        type: ['gradient', 'gradient', 'solid']
        gradient:
          type: 'vertical'
          shade: 'dark'
          inverseColors: true
          opacityFrom: 0.8
          opacityTo: 0.1
          stops: [20, 100]
        opacity: 0.85
      plotOptions:
        area:
          fillTo: 'origin'
        bar:
          columnWidth: '150%'
    series:
      - entity: weather.openweathermap
        type: area
        curve: smooth
        color: '#ffa31a'
        name: 'Température'
        extend_to_end: true
        fill_raw: last
        show:
          legend_value: false
        data_generator: |
          return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime), entry.temperature];
          });
      - entity: weather.openweathermap
        type: area
        curve: smooth
        name: 'Température min.'
        extend_to_end: true
        color: '#03a8f4'
        fill_raw: last
        show:
          legend_value: false
        data_generator: |
          return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime), entry.templow];
          });
      - entity: weather.openweathermap
        type: column
        color: '#0b0385'
        name: 'Précipitations'
        fill_raw: last
        show:
          legend_value: false
        data_generator: |
          return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime), entry.precipitation];
          });
    card_mod:
      style: |
        :host {
          left: 50%;
          top: 72.5%;
          width: 90% !important;
        }
        ha-card {
          background: none !important;
        }
1 Like

Thank you! For some reason my open weather is different and doesn’t have templow but I’ll keep messing around and try to figure out how to get that to populate. It does have a daytime indicator that I could use in an if statement to show minimum if daytime is false but I don’t know how to do that within the ApexCharts type. Any ideas?

temperature: 46
humidity: 49
pressure: 1018
wind_bearing: 269
wind_speed: 2.15
attribution: Data provided by OpenWeatherMap
forecast:
  - datetime: '2021-03-16T21:00:00+00:00'
    precipitation: null
    pressure: 1018
    wind_speed: 1.4
    wind_bearing: 282
    condition: sunny
    temperature: 47.1
  - datetime: '2021-03-17T00:00:00+00:00'
    precipitation: null
    pressure: 1017
    wind_speed: 0.44
    wind_bearing: 358
    condition: sunny
    temperature: 48.4
  - datetime: '2021-03-17T03:00:00+00:00'
    precipitation: null
    pressure: 1019
    wind_speed: 0.98
    wind_bearing: 139
    condition: partlycloudy
    temperature: 43.2
  - datetime: '2021-03-17T06:00:00+00:00'
    precipitation: null
    pressure: 1020
    wind_speed: 0.54
    wind_bearing: 119
    condition: partlycloudy
    temperature: 40.6
  - datetime: '2021-03-17T09:00:00+00:00'
    precipitation: null
    pressure: 1021
    wind_speed: 1.25
    wind_bearing: 49
    condition: cloudy
    temperature: 37.9
  - datetime: '2021-03-17T12:00:00+00:00'
    precipitation: null
    pressure: 1021
    wind_speed: 1.26
    wind_bearing: 79
    condition: cloudy
    temperature: 35.1
  - datetime: '2021-03-17T15:00:00+00:00'
    precipitation: null
    pressure: 1022
    wind_speed: 1.31
    wind_bearing: 69
    condition: cloudy
    temperature: 35.7
  - datetime: '2021-03-17T18:00:00+00:00'
    precipitation: null
    pressure: 1020
    wind_speed: 1.35
    wind_bearing: 89
    condition: partlycloudy
    temperature: 46.4
  - datetime: '2021-03-17T21:00:00+00:00'
    precipitation: null
    pressure: 1018
    wind_speed: 1.19
    wind_bearing: 171
    condition: partlycloudy
    temperature: 53.3
  - datetime: '2021-03-18T00:00:00+00:00'
    precipitation: null
    pressure: 1016
    wind_speed: 0.73
    wind_bearing: 186
    condition: partlycloudy
    temperature: 53.6
  - datetime: '2021-03-18T03:00:00+00:00'
    precipitation: null
    pressure: 1017
    wind_speed: 0.81
    wind_bearing: 82
    condition: cloudy
    temperature: 45.9
  - datetime: '2021-03-18T06:00:00+00:00'
    precipitation: null
    pressure: 1017
    wind_speed: 1.4
    wind_bearing: 76
    condition: cloudy
    temperature: 43.5
  - datetime: '2021-03-18T09:00:00+00:00'
    precipitation: null
    pressure: 1017
    wind_speed: 1.75
    wind_bearing: 72
    condition: partlycloudy
    temperature: 40.5
  - datetime: '2021-03-18T12:00:00+00:00'
    precipitation: null
    pressure: 1016
    wind_speed: 2.06
    wind_bearing: 68
    condition: cloudy
    temperature: 39.3
  - datetime: '2021-03-18T15:00:00+00:00'
    precipitation: null
    pressure: 1015
    wind_speed: 2.34
    wind_bearing: 71
    condition: cloudy
    temperature: 39.4
  - datetime: '2021-03-18T18:00:00+00:00'
    precipitation: null
    pressure: 1013
    wind_speed: 2.77
    wind_bearing: 125
    condition: cloudy
    temperature: 51.5
  - datetime: '2021-03-18T21:00:00+00:00'
    precipitation: null
    pressure: 1011
    wind_speed: 5.41
    wind_bearing: 206
    condition: cloudy
    temperature: 59.6
  - datetime: '2021-03-19T00:00:00+00:00'
    precipitation: null
    pressure: 1009
    wind_speed: 2.6
    wind_bearing: 193
    condition: cloudy
    temperature: 57.1
  - datetime: '2021-03-19T03:00:00+00:00'
    precipitation: null
    pressure: 1008
    wind_speed: 2.7
    wind_bearing: 101
    condition: cloudy
    temperature: 49.2
  - datetime: '2021-03-19T06:00:00+00:00'
    precipitation: null
    pressure: 1008
    wind_speed: 2.74
    wind_bearing: 117
    condition: rainy
    temperature: 45.9
  - datetime: '2021-03-19T09:00:00+00:00'
    precipitation: null
    pressure: 1010
    wind_speed: 6.27
    wind_bearing: 205
    condition: rainy
    temperature: 41.6
  - datetime: '2021-03-19T12:00:00+00:00'
    precipitation: null
    pressure: 1013
    wind_speed: 5.29
    wind_bearing: 199
    condition: rainy
    temperature: 38.7
  - datetime: '2021-03-19T15:00:00+00:00'
    precipitation: null
    pressure: 1016
    wind_speed: 3.76
    wind_bearing: 185
    condition: cloudy
    temperature: 38.8
  - datetime: '2021-03-19T18:00:00+00:00'
    precipitation: null
    pressure: 1016
    wind_speed: 5.01
    wind_bearing: 218
    condition: cloudy
    temperature: 45.9
  - datetime: '2021-03-19T21:00:00+00:00'
    precipitation: null
    pressure: 1014
    wind_speed: 7.69
    wind_bearing: 216
    condition: rainy
    temperature: 48.9
  - datetime: '2021-03-20T00:00:00+00:00'
    precipitation: null
    pressure: 1013
    wind_speed: 7.21
    wind_bearing: 229
    condition: rainy
    temperature: 47.7
  - datetime: '2021-03-20T03:00:00+00:00'
    precipitation: null
    pressure: 1015
    wind_speed: 3.47
    wind_bearing: 235
    condition: partlycloudy
    temperature: 41.1
  - datetime: '2021-03-20T06:00:00+00:00'
    precipitation: null
    pressure: 1015
    wind_speed: 2.26
    wind_bearing: 188
    condition: partlycloudy
    temperature: 38.3
  - datetime: '2021-03-20T09:00:00+00:00'
    precipitation: null
    pressure: 1015
    wind_speed: 2.22
    wind_bearing: 164
    condition: partlycloudy
    temperature: 35.8
  - datetime: '2021-03-20T12:00:00+00:00'
    precipitation: null
    pressure: 1016
    wind_speed: 2.39
    wind_bearing: 167
    condition: cloudy
    temperature: 35.4
  - datetime: '2021-03-20T15:00:00+00:00'
    precipitation: null
    pressure: 1016
    wind_speed: 4.14
    wind_bearing: 203
    condition: snowy
    temperature: 35.8
  - datetime: '2021-03-20T18:00:00+00:00'
    precipitation: null
    pressure: 1016
    wind_speed: 4.36
    wind_bearing: 210
    condition: snowy
    temperature: 40
  - datetime: '2021-03-20T21:00:00+00:00'
    precipitation: null
    pressure: 1016
    wind_speed: 4.84
    wind_bearing: 234
    condition: rainy
    temperature: 43.8
  - datetime: '2021-03-21T00:00:00+00:00'
    precipitation: null
    pressure: 1016
    wind_speed: 5.01
    wind_bearing: 254
    condition: rainy
    temperature: 46.9
  - datetime: '2021-03-21T03:00:00+00:00'
    precipitation: null
    pressure: 1018
    wind_speed: 3.5
    wind_bearing: 253
    condition: cloudy
    temperature: 40.5
  - datetime: '2021-03-21T06:00:00+00:00'
    precipitation: null
    pressure: 1020
    wind_speed: 2.7
    wind_bearing: 210
    condition: partlycloudy
    temperature: 36.4
  - datetime: '2021-03-21T09:00:00+00:00'
    precipitation: null
    pressure: 1021
    wind_speed: 4.42
    wind_bearing: 195
    condition: partlycloudy
    temperature: 33.9
  - datetime: '2021-03-21T12:00:00+00:00'
    precipitation: null
    pressure: 1022
    wind_speed: 4.05
    wind_bearing: 183
    condition: cloudy
    temperature: 32.3
  - datetime: '2021-03-21T15:00:00+00:00'
    precipitation: null
    pressure: 1023
    wind_speed: 4.96
    wind_bearing: 189
    condition: cloudy
    temperature: 32.2
  - datetime: '2021-03-21T18:00:00+00:00'
    precipitation: null
    pressure: 1023
    wind_speed: 5.2
    wind_bearing: 204
    condition: cloudy
    temperature: 37.9
friendly_name: OpenWeatherMap

I think the reason why you don’t have a temp low is due to your configuration of the openweathermap integration. It seems yours is configured for hourly forecast, mine is configured for daily forecast which of course means a different config for apexcharts-card. If you search the forum thread, I think I remember someone who had an hourly config on there, but I’m not 100% certain.

Edit: I’m configured as onecall_daily, to be precise.

1 Like

@CDRX2 That makes total sense! Thank you! Got it solved. I appreciate your help!

Hi, can you help me with my problem? I have dimensions larger than my screen, how can I fix this?

I’m not exactly sure what you mean. Basically, you should make sure your images have the correct aspect ratio for your screen. Since you’ll probably use different devices with different aspect ratios, it won’t look right on every one of them.

I have a problem on all devices. If you set kiosk_mode, on some screens it is smaller, and on others it is larger and you have to scroll. How can I customize it for each screen?

As I haven’t customized it for every screen myself, I can’t exactly tell you how. Maybe layout card could be of help, you should find it easily enough on this forum (sorry, I’m on the road, can’t provide you with the direct link right now).

What I’ve done is get the pictures in the aspect ratio fitting most screens (tablets and computers) and I will do a mobile adaptation at some point.

No help so I had to solve it myself.

The correct syntax is:

${ "hue-rotate(" + (states['light.sfeerlamp'].attributes.hs_color ?
          states['light.sfeerlamp'].attributes.hs_color[0]:0) + 'deg'}

Now everything works fine.
I only have created a new problem by using the swipe-card in combination with the config-template-card. Parts of my floorplan turn into all shades of gray.

I added some more information about weather an temperature inside and outside home and nice animation with wind arrow which turns base on wind direction and rain drops which increase base on rain quantity.

6 Likes

Okay, so please forgive my noobishness. I’m still a relative novice to HA and my CSS skills date back to when XHTML 1.0 became a standard.

I’ve been going through this line by line (and learning a lot, so thank you for this!) So far I’ve managed to get a floorplan going (I’m doing this in a separate dashboard vs a ui-lovelace file). On the floorplan, I was able to get the png’s to swap out when I turn lights on and off. So far so good. Having a bit of trouble with the transparent pngs, but I think that’s a matter of the size of the png and properly positioning it via CSS. I did get the individual light icons working, so yay for that.

Anyway, the next part of the code is where I’m running into trouble. I added the sidebar and it displays over my floorplan, cutting off the left-hand side. I don’t know if that’s because my floorplan is 1920x1080 or if maybe I need to add an additional card to separate it out or something. That’s where I’m stuck right now. So I guess the question is, how do I either a) push my floorplan to the right so it’s not being covered by the sidebar or b) resize it slightly/scale it down so it’s not covered. Though honestly, I’d prefer being able to push it to the right. My house is long and narrow, so “landscape” format for the floorplan.