r/homeassistant • u/katschung • Jan 02 '25

Pokemon Style Floor-Plan

Gallery image

Gallery image

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

I'll gladly answer your questions.

4.5k Upvotes

99% Upvoted

136 comments sorted by

View all comments

48

u/Freibeuter86 Jan 02 '25 edited Jan 02 '25

I love it, great job! It's basically one large image with further layers for the lighting sections?

I am a graphic designer, so no problem with this, but is there any good tutorial for the technical part?

Edit: Got it https://youtu.be/FeTrI_kogXs?si=t5z5IvrV4_9mntUU

30

u/katschung Jan 02 '25

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.

"on": opacity(100%) "off": opacity(0%)

3

u/Like14Ninjas Jan 06 '25

Can you elaborate a little bit on giving each .png an entity to fade the opacity?

2

u/JohnFCreep Jan 19 '25

This is what I use. It should work alike

      - type: image
        entity: light.dimmer
        tap_action:
          action: more-info
        style:
          width: 9%
          padding: 10px
          top: 20%
          left: 53%
          z-index: 3
        image: /local/floors/light_off.png
        state_image:
          "on": /local/floors/light_on.png
        state_filter:
          "on": brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)
          "off": brightness(80%) saturate(0.8)