Share your Floorplan

truglodite · August 9, 2020, 6:23pm

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

truglodite · August 9, 2020, 6:43pm

Wow, impressive how you got the light shadowing/gradients to spill over between rooms like that. I’m guessing that takes a lot of rendering and images to accomplish. I mentioned above my apprehension to doing that for my home… it’s about as complicated as your’s, so the sheer number of renders is scaring me off. Right now I have a ‘clean’ looking 2d floorplan that has lots of bells and whistles like yours… just considering what it would take to bring it to the next level like you did (3d impressiveness yet still clean enough to actually use daily ).

Any tips you can give as far as your work flow?

theone · August 10, 2020, 11:47am

I created one ALL LIGHTS ON image and one ALL LIGHTS OFF image in SweetHome3D.
I set the lights’ intensity to ~50%.

I used GIMP with ALL LIGHTS OFF as background image and created each “Light on” picture based on duplicating ALL LIGHTS ON image with Mask and Gadient Transparency (Controlling the gradient radius and fading) using the following method:
How to fade image layers using Gimp gradient/blend tool

sender · September 1, 2020, 8:47pm

I love this… where do I start!?

theone · September 1, 2020, 9:18pm

SweetHome3D

OzGav · September 8, 2020, 3:19am

I don’t think you need to worry about all the permutations. I just did one for each room and then when the light layer is on it is only at 65% opacity so they blend with each other.

Some tweaking was required when borders of two images were maybe too hard… I actually mocked it all up in Gimp first using the layers in there and clicked the light layer on and off to see how it looked. Adjusting the order of the layers I found was important.

Once I was happy I just exported each room. Some room had two images if there was a bedside light and a main bed light. In this case I use an icon to tap on to switch the bedside light and tap the room to switch on the main light.

poudenes · September 19, 2020, 12:04pm

Here is mine… used Sweet Home 3D:

Vincent · October 15, 2020, 7:43am

i like your floorplan with furnitures,
which software did you use to make it ?

poudenes · October 15, 2020, 8:52am

How did you the nice top and bottom part?

parautenbach · November 22, 2020, 3:12pm

I know it’s a long time since your post but I’m interested in seeing how you created the glow effects. I’m currently creating a new floorplan and want to use a similar effect. Would you mind sharing links to your configs and SVG?

rousveiga · November 23, 2020, 11:28am

@BoundedAnimal, @geoff.wray, what I did was generate overlays of the 6 primary and secondary colores plus white, and then use the custom config-template-card to modify the opacity of the overlays according to the RGB value.

macnug · December 27, 2020, 4:12pm

Hi! what if i have no RGB lights?
I have white bulbs and Shellies on MQTT.

Thank you!

macnug · December 27, 2020, 4:17pm

This is awesome!!! May i ask you the code for covers? i would like tyo create the different colour square on top of every window.
Thank you!!!

theone · December 28, 2020, 8:35am

I used the state_image option in image type element with different color squares

        state_image:
          closed: /local/images/floorplan/shutters/square_closed.png
          closing: /local/images/floorplan/shutters/square_closing.png
          open: /local/images/floorplan/shutters/square_open.png
          opening: /local/images/floorplan/shutters/square_opening.png

xefil · December 28, 2020, 7:04pm

Hello @aswam, how to draw the green closed door which gets red open as soon it’s opened? Thanks!

Simon

AsWaM · January 11, 2021, 9:21am

Hello,

This is an image (I have 4 depending on the direction the doors can be opened)

For exemple this is for a vertical door opening right side, the door_c_r.png is the green image, and the door_o_r.png is the orange one

  - entity: binary_sensor.openclose_fenetre_doudou
    image: /local/images/door_o_r.png
    state_image:
      'off': /local/images/door_c_r.png
      'on': /local/images/door_o_r.png
    style:
      left: 15%
      top: 39.7%
      width: 5.6%
    title: fenetre chambre doudou
    type: image

popsyann · January 19, 2021, 7:03am

@tringler I like your design and mine is quite similar. I am struggling at showing the temperature of various rooms.
I have created Text (or rectangle) with the id similar to the id of my actual temperature sensor in Home Assistant. But the temperature is not reflected in the floor plan. Here is the portion of code in my ha-floorplan-card:

                    - entity: sensor.master_bedroom_bed_temperature
                      element: sensor.master_bedroom_bed_temperature
                      text_template: >-
                        ${entity.state ? Math.ceil(entity.state * 10) / 10 + "
                        °C"  : "unknown"}
                      class_template: ' var temp = parseFloat(entity.state.replace("Â°", "")); if (temp < 10) return "temp-low"; else if (temp < 30) return "temp-medium"; else return "temp-high"; '

Could you send me an example? Thanks in advance

popsyann · January 19, 2021, 10:14am

@Ratsathome I have problem to make my fans spin. From your post I understand that a mdi icon is not enough? I should also create a transparent rectangle in which I will center the mdi icon?

Would you mind giving an example or describe the process? (I have been trying this since many days and I am still stuck).

Thanks in advance for your answer.
Best

oTIREXo · January 28, 2021, 6:39pm

Maury77 · February 2, 2021, 10:37pm

Can you send the examples of how you did to insert the weather cards and activate the popup cards?