Floorplan UI with Color synced lights

[edi023 (edwin)]

• led strip: i also was thing about to do something like that to get the ledstrip look
  -apexchart: i agree it’s a bit busy but i will take a look at that when i have al the most important thing up and running.
• background: well yes both the background and the home images are now the same resolution, iam think to try your files to see if anything chages maybe my resolution is not correct, now iam thinking about i tought i read somewhere i need to take in account of the with of the sidebar, something about making the images 20% smaller.
  lowering the icon: that is a bit dumb from my side, could think of it myself hahaha.
  trying to do to manny things at ones

So i decided to concentrate on one panel at the time, first stop the controle panel.
i have the pop ups working and the overlays are also working, but i was wondering should the brightness level reflect the actuel brightness of the lights, if it should i can not really see it to be honest.?
and with one light iam trying to get the color correct on my image so i made one with white light and one with red but when i change the color nothing happends, was wondering if did

it correctly.

- type: 'custom:config-template-card'
    entities:
      - light.slaapkamer_verlichting
    element:
      action: none
      entity: light.slaapkamer_verlichting
      hold_action:
        action: none
      image: /local/transparent.png
      state_image:
        'on': /local/Huis/Klaar/slaapkamer_wit1.0.png
      tap_action:
        action: none
      type: image
    style:
      left: 50%
      mix-blend-mode: lighten
      opacity: "${states['light.slaapkamer_verlichting'].state === 'on' ? (states['light.slaapkamer_verlichting'].attributes.brightness / 255) : '0'}"
      top: 50%
      width: 100%
  - type: 'custom:decluttering-card'
    template: light_overlay
    variables:
      - entity: light.slaapkamer_verlichting
      - image: slaapkamer_rood1.0.png

[CDRX2]

Well, the code you posted should reflect the brightness of the light, but is missing the color part of the code. The red image looks like what I use, so if you adapt your code it should work.

[edi023 (edwin)]

How did i miss that
I changed my config to so i also have the correct white color.

- type: custom:config-template-card
    entities:
      - light.slaapkamer_verlichting
    element:
      type: image
      image: /local/Huis/Klaar/slaapkamer_wit1.0.png
      entity: light.slaapkamer_verlichting
      tap_action:
        action: none
      hold_action:
        action: none
    style:
      opacity: >-
        ${ ( states["light.slaapkamer_verlichting"].attributes.brightness ?
        states["light.slaapkamer_verlichting"].attributes.brightness / 255 : 0) -
        (states["light.slaapkamer_verlichting"].attributes.hs_color ?
        states["light.slaapkamer_verlichting"].attributes.hs_color[1]/255 : 0)}
      mix-blend-mode: lighten
      left: 50%
      top: 50%
      width: 100%
  

  - type: custom:config-template-card
    entities:
      - light.slaapkamer_verlichting
    element:
      type: image
      image: /local/Huis/Klaar/slaapkamer_rood1.0.png
      entity: light.slaapkamer_verlichting
      tap_action:
        action: none
      hold_action:
        action: none
    style:
      filter: >-
        ${ "hue-rotate(" + (states["light.slaapkamer_verlichting"].attributes.hs_color ?
        states["light.slaapkamer_verlichting"].attributes.hs_color[0] : "0") + "deg)
        saturate(" + (states["light.slaapkamer_verlichting"].attributes.hs_color ?
        states["light.slaapkamer_verlichting"].attributes.hs_color[1] : 255)+ "%)" }
      opacity: >-
        ${ (states["light.slaapkamer_verlichting"].attributes.brightness ?
        states["light.slaapkamer_verlichting"].attributes.brightness / 100 : 0) *
        (states["light.slaapkamer_verlichting"].attributes.hs_color ?
        states["light.slaapkamer_verlichting"].attributes.hs_color[1]/90 : 0) }
      mix-blend-mode: lighten
      left: 50%
      top: 50%
      width: 100%

Having the controle room with the honeycomb addon done i saw something strange with my floorplan, with one of the bottem right lights on the picture expands,when its off it looks like it cutts the picture.all the pictures are the same as i didn’t use gimp to cut the picture to only the lit up parts.

As i finished the control room,climat and controle lights page it’s time for the dreaded media part.
only the remote part has to be done but need to figure out how al my 5 appliances has to fit in.can i ask what your media_player.bubble is? trying to incorperate my spotify like @lukevink did with his page.

[CDRX2]

For the cut off picture, I’m sure you’ll find some info in your browser’s code inspector.

My Bubble media player is actually an Openhome media renderer. It’s basically my AV receiver which is proxied as an openjome renderer thanks to a soft called BubbleUpnp. That soft allows you to take any dlna media renderer on your network and turn it into an openhome renderer. You then install the soft’s counterpart app, BubbleUpnp on your phone, connect it to your Tidal/Spotify, other streaming service or local media and you can send playlists to said renderer. It allows you to play music without draining your phone’s battery since the playlist is sent to the renderer, not kept on the phone.

I mainly use it to play Tidal playlists or tracks on my stereo system (tidal doesn’t have an integration in HA). For Spotify, there is an integration but I’m afraid that’s the extent of my knowledge since I don’t use it.

[frozenhellguard]

I found your github repo and was planning on going from there. Is yours based on this project, but more up-to-date (I would assume)? I’ve created a floorplan using Sweet Home 3D, did you follow the tutorial in the original post to get all the images sorted?

I just don’t want to follow some outdated approach, so just making sure I have the correct tools and guidelines to follow along.

Thanks in advance!

[CDRX2]

Yes I started out by following Luke’s tutorial like everyone else on here. Took me a while, but the repo you found is pretty much my up to date config.
For the images, I did follow Luke’s tutorial with two key differences:

1. All my color lights are rendered as red in Sweethome3d. The original code stopped working for me at some point and someone on here pointed to this solution.
2. I did not cut up my images by rooms, a bit too complicated, especially on the ground floor for me.

Everything else is either based on what Luke made or reworked by myself over time.

[frozenhellguard]

Hi again!

Reason is, I started following the OP and some approaches seem outdated. I do like that you’re using view layouts aswell. How close is yours to Luke’s in terms of the visuals? Do you mind posting a screenshot of the dashboard with the floorplan showing? You have multiple floors it seems, can I just remove the includes for any floor(s) I won’t be needing?

Thanks again!

[frozenhellguard]

On my floorplan there seems to be a somewhat transparent image overlay across the entire screen (of the full floorplan itself), overlapping my other images.

Below you can see what I mean, I added a few arrows and circled some parts just in case Another thing is the bottom part of the sidebar, but this might be due to the image making all this happening to begin with.

Sidenote: How did you guys make it so that the sidebar isn’t overlapping the floorplan? Did you just make the floorplan images smaller and added some “dead space” over on the left to make it the right resolution still?

[CDRX2]

This is what my dashboard looks like. Visually it’s very close to Luke’s, I just reworked a lot of things in the background.

You can remove the includes for the floors you don’t need. If you only have one floor, you can also remove the input_select.floor helper and the floor select buttons in the sidebar.

Regarding your ghost image: most likely your images don’t all have the same size or it’s a positioning issue.

As for the sidebar: that’s why I use the layout-card, no chance of that happening (except maybe with some overflow issues).

[frozenhellguard]

Looking good!

Alright, thanks for the info regarding the rooms.

Regarding my ghost image, I’ve checked (about a trillion times) that all images are the exact same size, downloaded them from HA just to check the right resolution images were uploaded. Uploaded them again with new names (incase of a caching error), still the problem persists. I’m also using the same approach as you, with all images (per light) being the same size, so positioning is the same across the board.

Edit: After deleting the HA app and its data from the tablet and downloading it again, the ghost image has disappeared. Weird, I thought re-uploading the files with new names and changing the yaml would sort any caching problems. Thanks again

[CDRX2]

Yeah, that cache tricked me more than once. That’s why I always use my browser while doing any modifications, much easier to clear cache than with the (Android) app.

[frozenhellguard]

Well on my way now, sorted out the floorplan with individual lights, room controls etc. When it comes to the browser mod popups (hold action), I cannot seem to get the coding right. I realized the code in Luke’s repo is outdated for this part. I’ve tried following the documentation for browser mod, but when I thought I had it all figured out, it shows up as no card type specified.

The original code looks as follows:

- entity: light.living_room_lights
  hold_action:
    action: fire-dom-event
    browser_mod:
      command: popup
      card:
        cards:
          - entities:

[Christian-CFP (Christian)]

Try this, but you need “mod card” and “decluttering card” (take a look at CDRX2s decluttering card for lights)

This code is without an icon to click on. Its just an invisible clicking area!

- type: custom:config-template-card
  entities:
    - light.living_room_lights
  element:
    type: image
    image: /local/transparent.png
    entity: light.living_room_lights
    hold_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          content:
            type: custom:mod-card
            card_mod:
              style:
                layout-card$:
                  grid-layout$: |
                    :host {
                      padding: 0 !important;
                    }
                    #root {
                      margin: 0px !important;
                    }
                    #root > * {
                      margin: 0px !important;
                    }
            card:
              type: "custom:decluttering-card"
              template: light_popup_mid
              variables:
                - light: light.living_room_lights
                - name: LIGHT NAME
                - icon: ICON
          title: TITLE FOR POPUP
  style:
    left: YOUR LEFT POSITION
    top: YOUR TOP POSITION
    width: WIDTH
    height: AND HIGHT

[CDRX2]

You don’t need mod-card or decluttering-card necessarily. Your syntax needs to be corrected, as in Christian’s code, you’re missing the data and content lines.

[edi023 (edwin)]

Noooo while i was busy working on my dashboard for my phone, something went wrong and the controle rooms,climat en control lights are not working anymore. there are no errors and al the files are on the correct place and not altered. the sidebar and the other pages are working correctly.hmmm would hate to start al over. any sug

estions are welcome

[CDRX2]

What does your code inspector tell you?

[edi023 (edwin)]

Sorry i have to tell you that is totally new for me so i’am trying to figure out how it works
Did put a back up back from last week and there it was working but have to redo my mobile dashboard, and i wont learn anything so i will dive deeper into de code inspector.

[frozenhellguard]

Hi CDRX2!

Got Luke’s version running flawlessly now and I’m on to working on yours now (made Luke’s first because it was simpler). Doing both just so I’m learning along the way, yours was always the end goal because of the view layouts and extra added spice

Got the sidebar working, the floorplan is still giving me a particular error though. Sorted all images, lights, etc. But the first part of the code with the sunlight_opacity sensor and daylight images are giving me the following error:
“element custom:config-template-card Error: No style defined for element”

Sensor is implemented and working and I’m using your exact code. Any ideas?

Solution: Downloaded config-template-card again.

[CDRX2]

You were quicker in finding a solution than I was just attempting to reply Congrats!

[frozenhellguard]

Sometimes it’s just something simple like actually downloading a card again, even though I had the latest version…

One thing I’ve been stuck on for a while now though is the sidebar background not stretching all the way to the bottom. I adjusted all my images and overlays to compensate for the sidebar and that stretched the height a bit.

Any clue on this one? I’ll move on to work on some other parts meanwhile so your work is not for nothing

Edit: person images in sidebar is square instead of rounded/circle. I even tried replacing the “image” template with Luke’s to no avail. Any clue why that is? I could just edit the photos, but I can’t seem to figure why it isn’t working as is.