Hello,
TLDR;
Here is a tool to help editing images to create a dynamic map of your house in HA.
/TDLR;
I’ve recently followed a few posts about making a map of your house and integrating this map as a way to provide visual controls over your house.
First you need an image of the floor you want to map. You generally use:
- Using floor plan
- Using 8/12/32 bits style software (Tiles is a free software and you can find some cool sources)
- Using the vaccum generated map
- …
Here is mine using Tiles and some tilesets (took about 4 hours for the first, the other ones took far less time):
With the entity picture card you can already use that and position your icons to make something that looks cool.
But what if you want to go further ? You most probably have already seen but here are some sources so you can see what we mean without stealing the light from some other contributors to this:
- https://www.reddit.com/r/homeassistant/comments/1hrkku1/pokemon_style_floorplan/
- https://www.reddit.com/r/homeassistant/comments/1ht3ipu/how_to_create_a_floorplan_pokemon_style/
- https://www.reddit.com/r/homeassistant/comments/1i8r6ce/i_did_something_pokemon_floorplan_without_plugins/
Only a few ones I specifically used but you can find more.
Anyway, the next steps are about image edition, applying effects, layers, gradient transparency and such. Which can be very precise and tedious. All that can take some time. And once you are done and you want to change anything in your original image, you’ll need to edit the images again. Make this whole process tedious to update.
So I came up with a tool to help in this process currently hosted here: https://holynoodle.github.io/
It allows you, once you have created your floor image, to manage your layers and light sources.
Configure your day/night (or others) layers
Create and edit light sources (for layers (windows for example) and rooms (bulbs for example)) and set the light color
And play with it
You can then download a zip of all the images required and a template YAML for starting your Picutre entity card. The images must be put in the www/ folder of your HA so they are available. The path in the YAML should be updated in case you don’t put the image in the same place.
This whole app should work on mobile and on computer. Without any special requirements but it may be slow as I didn’t optimize the code. You should have precise control over the shape of the light sources. There is still work to do on the gradient transparency parameters and result but this is good enought I think.
I gladly take feedbacks
I want to put emphasis on:
- this tool is only a client and isn’t tracking anything. Everything is saved locally in your browser. I intend to make something to allow to export the saved memory and reimport elsewhere.
- The code isn’t opened as of now but I’ll gladly invite people interested on the repository. The code isn’t in a shape I can present to the world for now.
- This is still barely a tool in development but it should work. Consider this a beta release.