Share your Floorplan

Hey
I would like to Use RBG_Color value of a light, to change the color of an icon within my HAFloorplan setup, i believe this can be done just unsure how to implement it.

In simple terms i want the color in my floorplan icon to match the real colour of the RGB light

Thanks in advance

I am looking for a solution also and just asked the same question over in the main HA lovelace thread.
I can read the current colour attribute from the entity, question is whether this can be applied as a style directly in the lovelace config as it’s not possible to dynamically update the CSS for nor list 16M class states

My latest project.

5 Likes

Awesome @sahne! What wall plate is that and assuming the screen is a tablet of some kind?

Could you share some details about this project? I am interested myself as well :smiley:

Tablet is Lenovo Tab E10. Running kiosk mode. Wall plate is custom made out of MDF to suit tablet and lacquered in white.

1 Like

Hey there, not a Lovelace setup, but I tried to create a mobile app version with 3D model which you can actually use it for fully navigating around and control your stuffs from 3D interface :slight_smile:

Some more screenshots here:

I added more detailed information at 3D App for Home Assistant - Unity, RestAPI, MQTT post as I cannot make it long in this thread. This is my hobby project, but really excited to see it can integrated with HomeAssistant!!

Could you give me what you think about this? Thanks guy!

2 Likes

Here it’s mine (I am still working on it but is amost done):

2 Likes

Hi, this is my floorplan…


3 Likes

I love it, I would love to use that! Is it possible to import Sweet Home 3D SVG into your tool?

What software did you use for creating the floorplan?

Hey @c0revin, thank you. I used SketchUp (a 3D modeling tool). Basically you can use any 3D modeling SW tool (included SweetHome 3D). But currently I’ll working on my app. I would love to inform you when it ready for use publicly.

Here is my first attempt to build a floorplan(trying to use different possibilities in the plan) of the house that is not build yet.

I used the plans from the builder and cleaned them up in paint and colored it in.

I only have a few devices yet but it will increase when the house is ready.
image

https://floorplanner.com/

Hi,

I’m working in my Floor plan design. I’ve already my house design in Fusion360. I’m looking for a more realistic light effects than the layers options. I want to render 1 image for every light situation in my room. For example if I have 4 lights (16 options different). I Know that it’s a little overkill but normally I don’t have a lot of lights in all the rooms.
It’s possible to change the card image depending of which light are on or off?
I know how to change the card image depending of 1 light, but I don’t know how to change in function of multiple lights states.

Thank u for the great job!

@algirdasc, Grate information,
I have few questions in how to implement it:

  • where exactly in ha-foloorplan.html you add your code? I don’t have code up to line 527, can you share your ha-foloorplan.html?
  • where in floorplan.yaml you add fables? does it work with floorplan card? can you share your floorplan.yam?
  • I presume in your floorplan.svg you used the id’s your have in labels (climate.air_conditioner.temperature and climate.air_conditioner.current_temperature)
  • does this work in newer version of home assistant? ( Home Assistant 0.110)

Thank you in advance

Hi,
can you please explain a bit more in details how you implement # More TV Channels, # Radio Control Layer, # Weather Layer? did you use ?

thank you in advance

@ mudasar8k Hi what exactly did you change to get it to work.Sit with the same problem. My fan make some funny circles.

Hope you’re still around… I’m working on my HA floorplan, and was intrigued by your post. It seems you are able to create layer objects of the lighting renders from sh3d using photoshop! The results, with accurate shadows etc are impressive. Only way I know to do that is multiple renderings, one for each lighting permutation in the matrix (in my case with 50 lights, that would be 2500 rendered images… if the corresponding yaml wasn’t already too much, my PC also takes about 7min to render one 1080p frame :frowning:).

How did you pull that off? Would you mind please sharing some links to guides that show how you were able to use photoshop to accomplish this?

I tried using the plugin (SVG) but creating the floorplan was too complicated so I went for Picture Elements FloorPlan using SweetHome3D and GIMP and created this floorplan (video)

The main goal was to have the day-2-day activations and information always available/visible and everything else (like schedulers, history graphs) available upto 1-click away.

This UI is used on 15.6" wall mounted touchscreens (for mobile phone I have a different UI).

7 Likes

@Ratsathome, here is my working css for spinning fans… right out of the simple example, but sped up a bit:


/* Spinning Animation */
.spinning {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Sometimes it’s good to mention subtleties… in this case the origin at 50/50 means the center of rotation is placed centered between the image object’s Xmax/min and Ymax/min. So make sure the svg object you use in inkscape as a fan has it’s axle centered in the object. Most mdi fan icons will work fine. OTOH, say for example you draw a custom fan object in inkscape, with a transparent rectangle far off to the side of the fan. That rectangle to the side will shift the 50/50 position for that object off of the fan’s axle. So if you are using this css and it still wobbles funny… you might want to verify the shape and symmetry of your fan object (ensure the axle is centered in the object’s bounding box).

2 Likes