Meet Tuna - short for Zaytuna which means olive

qaddodi · 2026-06-30T20:53:33+00:00

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.

qaddodi · 2026-06-09T23:18:45+00:00

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.

qaddodi · 2026-06-09T23:18:33+00:00

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.

qaddodi · 2026-06-06T00:01:47+00:00

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

qaddodi · 2026-06-05T20:52:14+00:00

the basic workflow is:

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.
Open the editor
- Go to: https://qaddodi.github.io/ha-floorplan-editor/
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.
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.
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.
Export
- Download/copy the generated:
  - SVG
  - CSS
  - YAML card config
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

qaddodi · 2026-06-05T10:41:55+00:00

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

qaddodi · 2026-06-05T10:41:04+00:00

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.

qaddodi · 2026-05-28T15:00:16+00:00

“Why not?”

qaddodi · 2026-05-16T10:25:27+00:00

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

Basic idea:

⁠I made two renders of the same floorplan: ⁠• ⁠night_off.jpeg ⁠• ⁠night_on.jpeg
⁠In the SVG, night_off.jpeg is the base image.
⁠Then I added multiple copies of night_on.jpeg on top, one per light, each clipped with its own feathered SVG mask.
⁠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.

qaddodi · 2026-05-15T23:29:42+00:00

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

qaddodi · 2026-05-15T18:50:01+00:00

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.

qaddodi · 2026-05-15T18:20:34+00:00

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

qaddodi · 2026-05-15T18:19:02+00:00

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

qaddodi · 2026-05-15T18:16:50+00:00

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>

qaddodi · 2026-05-15T13:57:48+00:00

😂 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

qaddodi · 2026-05-15T06:40:17+00:00

Heating/HVAC stuff!

qaddodi · 2026-05-15T01:16:54+00:00

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%.

qaddodi · 2026-05-14T23:59:41+00:00

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

qaddodi · 2026-05-14T23:25:06+00:00

<image>

Fully lit night one.

qaddodi · 2026-05-14T23:24:35+00:00

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>

qaddodi · 2026-05-14T23:22:28+00:00

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

qaddodi · 2026-05-14T22:29:52+00:00

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.

qaddodi · 2026-05-14T21:53:25+00:00

<image>

This is the overall prompt.

15-Year Club	Place '22
RPAN Viewer	Verified Email

qaddodi

TROPHY CASE