I saw u/mythriz Zelda style floor-plan and that finally gave me the perfect Idea for my own home!
I tried MyHome3D and just basic 2D SVG variants but I was never quite satisfied.
Mimicking a game however was exactly my taste.
I'm more a Pokémon kinda guy so I got going with the tilesets you can find on archive.org.
Of course Pokémon doesn't have everything you need in a modern home, like flat-screen TVs or L-shaped sofas, even stuff like a sideways bed was missing since the game really isn't layed out to work like that. So I had to create some assets myself or modified existing ones.
The Daylight version is on the second slide.
Everything has been put together with picture-elements card. Covers and appliances are still wip. (And yes the disappearing table has been noticed already...)
Can't remember if there is functionality within Tiled for that, but IIRC, there's a program for that. Otherwise, you can find the tiles themselves on some other sites with RPGMaker tilesets.
That tutorial basically covers it. One thing i did to make it so smooth was to give every room.png an entity and add this style-filter. This makes the "light" fade in and out with your matching entity.
For those eager to recreate (like me). OP was inspired by this post. Here a free open-source 2D game engine was used to create the floorplan. Really nice idea and accessible for those not that talented in Photoshop to start with.
Anyone wanting to create a map quickly can use spritefusion.com, it has an online free version, just follow the tutorial because it's not super intuitive otherwise.
Can you share some more insights on the grafics? More then archive.org? Do you plan to upload a bundle of the tiles for people who are not good with photoshop?
It's not that easy to create something like this if you have no experience at all. Especially the walls and windows can get a bit frustrating. But any decent graphics software is capable of achieving this with enough patience.
This was so well done I just opened up the thread when I saw Pokemon Style on HA and took 2-3 seconds to click what I was actually looking at and how it all worked. And that right there, that's how things should be designed. Fun, functional, and easy to just look at and go oh it's a house, let me turn something on or off.
That's dang near something a child could use (And I mean that as a compliment do to its ease of use overall). I didn't know you could even do this and now my day is going to be filled with rabbit holes thanks to you and /u/mythriz >< So thanks OP lol
That's awesome, I also love that you made the lights actually "soft circles" instead of the "hard" black boxes I added (I just did it that way because that's what was in the example floorplans haha)! I may steal that idea for my floorplan too. :)
This is amazing. So calming, nostalgic and useful. This is why I use Reddit for. To see such „simple” yet original ideas made by creative people. We see GUIs polished by big tech and they pretty much make us think the same way. This on the other hand made me smile, made me feel nostalgic and happy. Thank you.
How are y'all getting decent enough measurements to actually create a plan like this? Every time I try no walls match up, and it ends up a geometric mess
It doesn't have to be perfectly accurate. It just has to look like it makes logical sense.
Sort of like railway maps, where they have a messy version overlayed on an actual map, and then there is the simplified version streamlined for understanding the rail network and relevant stops.
what is the best way to separate the image files into individual textures? As a non graphic designer, doing this in gimp, manually moving the crosshair and selecting boundaries is proving a bit cumbersome.
Amazing job with the lighting effects. I will take it as inspiration. Will need to have to cycle through different floors and garden/garage but could still be fun. Using a real game to walk around and switch devices would be the next level (...hmm time for a project)
It comes up right in front of your driveway, but only suddenly when you have to go to an important interview or work day, and instead of looking like snorlax it looks like some jackasses car.
I struggle to understand what sort of files we need for this. So, I guess one is the static image, and then a full one for each of the possible variations for every light?
What's the amount of files required? I struggle to imagine.
It's one complete floor.png and then every section where there should be a light is a separate one. Then you do the same for nighttime if you're crazy. So right now I have 6 files per Day/Night
So essentially what it does is overlap each section when it's active, right? I guess it's then limited to multiple combinations for the same section, as the variations can get crazy.
This is an example of one section. You could go to even smaller ones to create more zones but the way i did the glow makes this difficult. One other way would be to just create transparent light glows and place them over the appropriate lights but then they might overlap some walls etc.
So I guess the hard work is in creating the original floor plan first. Then it's a matter of copy pasting and adjusting the changes you want to be dynamic.
Ooof, I've spent a couple hours now trying to play with Solarus just like the Zelda guy did, but I wasn't able to make it work. I thought it would help make it easier having a grid based snap tool to design the floorplan. Or is there a way to do that with Photoshop?
Using your tileset, was there a way you did to autocreate all the elements? Or did you manually crop them one by one from the tileset pngs?
Also I haven't been able to find the doors and walls you used in the tileset you shared.
This is a great idea! Trying to replicate that for my home. Unfortunately, I don't know how to import the tilesets. This seems to work to Solarus Quests only. How did you do it?
Wait am I understanding correctly that turning on the lights on your map turn on the same lights in your home? My jaw is on the foor, what an awesome idea.
This is amazing! And exactly what I'm currently making for myself! Currently stuck trying to get my wife and my little player model to move around based off Bluetooth signal strengths!
I am trying the same and so far it works great, however I struggle with getting the light-image to overlap on the correct spot on all devices. On PC it looks like this while on mobile it overlaps perfectly. The conditional image does have the
transform: none
left: 0%
top: 0%
so it should fit but alas....
The yaml looks like this, maybe you see anything that throws things off:
I have my lights on a transparent canvas with the same dimensions as my background. If you want to use smaller single light files you could try absolute positioning with 'px' instead '%'
That's the weird part, both of my images have the same dimensions. Here is the layout and here the lights. If its not too much to ask could you maybe take a look and see if you can reproduce my situation? I am still pretty new to HA and maybe I took a wrong step somewhere before
This looks so good! I've checked the files in the bundle you sent, but I can't quite find some of the elements, like the walls. Did you create this by yourself? They really look nice
This is AMAZING. By the way, I never knew that floorplans are a thing in HA? I’m still rather new with it I must say and today I will receive my first Zigbee antenna :) But this looks good. I think I will also make a floorplan if it’s a standard feature that I can use.
How do you do something like this? This is REALLY cool but I'm not familiar with Home Assistant. The farthest I've gotten with it so far is adding devices and getting them to show up in the system but I'm lost on dashboards. Thank you!!~
570
u/ryaaan89 Jan 02 '25
This is one of the coolest things I’ve seen on here.