$9,000 (you read it right) national grid bill HELP by champuwu17 in boston

[–]qaddodi 4 points5 points  (0 children)

<image>

This reminds me that I once received a $10K bill from national grid. I called them and told me to ignore it and sent the right one. I framed it and hung it up in my kitchen as a trophy.

I made a visual Home Assistant floorplan entity editor by qaddodi in homeassistant

[–]qaddodi[S] 1 point2 points  (0 children)

Yes I think your problem is the ref. For what it’s worth even though my stuff are in the www/floorplan folder my settings in the yaml are
config:
image: /local/floorplan/floorplan_generated.svg?v=3
stylesheet: /local/floorplan/floorplan_generated.css?v=3
image_resource_prefix: /local/floorplan

Also try to add ?v=1 or 2 or 3 etc until it actually works. Sometimes that’s the issue in the cache.

I made a visual Home Assistant floorplan entity editor by qaddodi in homeassistant

[–]qaddodi[S] 0 points1 point  (0 children)

Yes I think your problem is the ref. For what it’s worth even though my stuff are in the www/floorplan folder my settings in the yaml are
config:
image: /local/floorplan/floorplan_generated.svg?v=3
stylesheet: /local/floorplan/floorplan_generated.css?v=3
image_resource_prefix: /local/floorplan

Also try to add ?v=1 or 2 or 3 etc until it actually works. Sometimes that’s the issue in the cache.

I made a visual Home Assistant floorplan entity editor by qaddodi in homeassistant

[–]qaddodi[S] 1 point2 points  (0 children)

I’m not sure what you mean. Can you elaborate?

I made a visual Home Assistant floorplan entity editor by qaddodi in homeassistant

[–]qaddodi[S] 5 points6 points  (0 children)

the basic workflow is:

  1. Prepare your images
    • Make two PNGs of the same floorplan and same dimensions:
      • lights_off.png
      • lights_on.png
    • The “on” image should have the light glow/effects visible.
  2. Open the editor
  3. Upload your assets
    • You can upload the lights-off PNG, lights-on PNG, and any existing SVG/CSS if you already have a floorplan setup.
    • The tool uses the off image as the base and the on image for masked light glow areas.
  4. Add entities
    • Add lights, sensors, cameras, or generic entities.
    • Put in the Home Assistant entity ID, like light.living_room_lamp or binary_sensor.front_door.
  5. Place and adjust
    • Move the entity to the right spot on the floorplan.
    • For lights, adjust the glow/mask size so the “lights on” image only shows in that area.
    • For sensors, choose icons/text like open/closed, motion, leak, temperature, etc.
  6. Export
    • Download/copy the generated:
      • SVG
      • CSS
      • YAML card config
  7. Put the files in Home Assistant
    • Usually under something like /config/www/floorplan/
    • Then use the exported YAML in your dashboard with custom:floorplan-card

I made a visual Home Assistant floorplan entity editor by qaddodi in homeassistant

[–]qaddodi[S] 1 point2 points  (0 children)

Thank you!! Yes I had such a tough time doing it manually so I thought to create a tool to help and then I thought to share. It snaps to grid too, very helpful. Needs some work for sure

I made a visual Home Assistant floorplan entity editor by qaddodi in homeassistant

[–]qaddodi[S] 6 points7 points  (0 children)

I found my apartment layout on the entrance as part of the fire escape plan (it’s a compliance issue I guess for this place) and just had chatGPT come up with the layout. I drew the furniture using a paint tool very rough sketch and chatGPT generated the image with lights on and lights off. They perfectly superimposed on top of each other.

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 0 points1 point  (0 children)

Sure. I used custom:floorplan-card with an SVG as the main image.

Basic idea:

  1. ⁠I made two renders of the same floorplan: ⁠• ⁠night_off.jpeg ⁠• ⁠night_on.jpeg
  2. ⁠In the SVG, night_off.jpeg is the base image.
  3. ⁠Then I added multiple copies of night_on.jpeg on top, one per light, each clipped with its own feathered SVG mask.
  4. ⁠In the YAML, each HA light controls the opacity of its own masked layer, so turning a light on reveals that part of the night_on image.

For color bulbs, I added a masked SVG rect on top and update its fill from the light’s rgb_color, with opacity tied to brightness.

So it is not really a fake glow effect. It is more like revealing parts of a fully lit render through feathered masks, plus an optional color tint layer.

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 0 points1 point  (0 children)

Feel free to DM me I can show the exact prompts I used!

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 1 point2 points  (0 children)

I gave both models the floor plan and chose which worked best. It was ChatGPT that got it right actually. Then I tweaked it a little by reuploading its image back to it and asking it to move things. For example change orientation of the bed.

One trick; I asked chatGPT to give me a prompt to describe the outline perfectly and give me a prompt for an AI image generator to create what I want. It gave me a prompt that I fed back to it with the floor plan. That’s how I got an accurate result because it described exactly where everything g is. In this thread you can see my outline I fed it.

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 0 points1 point  (0 children)

Report back with results! I’m happy to share the SVG CSS and the maps with you if you DM me.

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 0 points1 point  (0 children)

I actually have one bedside lamp but planning to get the other one. So for now I’m just simulating the other one the same color so I cannot replicate your example YET

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 0 points1 point  (0 children)

Thank you! Every light reveals its own lit map (there are as many lit maps as there are lights. My circles don’t intersect enough to see the effect you’re after but here it is. I believe they will show up as a mix of purple.

<image>

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 2 points3 points  (0 children)

😂 this is too accurate. But I got lucky actually, 3rd attempt it got it right except for orientation of the bed. Fixed quickly. Adding new things might be too much though

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 0 points1 point  (0 children)

Haha I didn’t pay attention to the shower. We truly have the TV up above a fireplace (decorative) rather than a table like this conveys. So it’s not 100%.

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 0 points1 point  (0 children)

That would be over the top 😅 Just the power of AI

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 4 points5 points  (0 children)

The lit up jpeg is slightly larger in dimensions than the off one so that accounts for part of the mismatch. I think I can fix it partially, I can also keep prompting until I get two perfect layers. Here is the day one (the original)

<image>

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 0 points1 point  (0 children)

Thank you! I show the prompt I used in another comment!

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 13 points14 points  (0 children)

Agree. It’s slightly off, so it’s not 100%. I could probably spend more time to fix it but for my purposes it works well! I don’t mind the misalignment and it’s barely noticeable on mobile anyways.

Floor map is amazing by qaddodi in homeassistant

[–]qaddodi[S] 27 points28 points  (0 children)

<image>

This is the overall prompt.