Share your Floorplan

Hi, I kinda stopped investigating the floorplan feature because I was focussing on other (zwave) stuff lately. Sorry

Me neither I cant get tha state colour…I am looking for over a week for this!
anyone got an idea about ?
why there is no change colour in the icon?

great job, congratulations … would you like to share the code and how did you do such a nice job?

Can you share your floorplan code and how you did the TV listing part? That is cool.

Can you share you configs on Github?

Floorplan using pucture elements

Living room interactive (picture elements)

I can post the yaml if needed, any suggestion is more than welcome

2 Likes

This is my floorplan.

Sweet Home 3D - Photoshop for lights on and off layers

2 Likes

I’ve seen several people display time left on timers but I can’t get it to work right.

If I am able to get it to work at all, it only shows “active” or “Idle” and I’ve tried various templates to no avail.

How would I get the time remaining, on say - my washer, to display?

This is the closest I have gotten but as you can see, it shows the total time and not remaining time.

- platform: template
  sensors:
    laundry_remaining:
      entity_id: sensor.time
      value_template: "{{state_attr('timer.laundry', 'remaining')}}"
    laundry_display:
      entity_id: timer.laundry
      value_template: >
        {% if is_state('timer.laundry', 'active') %}
          {{state_attr('timer.laundry', 'remaining')}}
        {% else %}            
        {% endif %}

1 Like

Slowly but surely getting there.
Mine is not as polished as some of the rendered images from sweethome3D. I took mine from a sketchup model I’ve been building as we slowly renovate. Might add a bit of gloss by rendering the model but concentrating on functionality for now.
Almost ready to the point of wall mounting a tablet and testing it on the wife.

Also to note, this one is created using HA-Floorplan for lovelace, rather than picture elements card. I’ve only used this so can’t say which is best to be honest

2 Likes

You’ve got some slick elements going on there.
How did you get the animations to work around the lights and speakers?

Very impressed

i created my floorplan with sweethome 3d and incscape. everthing is working at the moment but i have a long loading time at my tablet. my svg file is 50mb big. Whats the size of your files?

Love the moving info. How’d you do that?? Can you share the config?

1 Like

50mb sounds very big, check the size of base image before importing into Inkscape. No point in anything with a high resolution, best stick to something matching the device you use to access. 1920x1280?

Thanks for ur answer. I changed my floorplan. So now i have 5mb of size. At the old one i created for wach entity a seperate svg. for the on status and imported it, that makes the File big. Now i have only quarters.

Looks great!

For your television, maybe this is something to include (I’m using this, and it works great):

9 Likes

I gave up on the lights on my plan because with multiple lights in one room it didn’t seems to work great with those layers.

But you proof it’s possible for sure with those 2 first examples. Great work on that one. If only I knew how to use photoshop :slight_smile:

You don’t need to know photoshop well, but you need to render lots of images (use SweetHome 3D).
In my case, my largest room has three lights (hall, kitchen and living room), so I have to render the images:

  • Hall light - on
  • kitchen light - on
  • Living light - on
  • Hall-Kitchen light on
  • Hall-Living light on
  • Kitchen-Living light on
  • Hall-Kitchen-Living light on

And then use the condition to display the correct image.

elements:
  - conditions:
      - entity: light.hall_light
        state: 'on'
      - entity: light.kitchen_light
        state: 'on'
    elements:
      - image: Hall-Kitchen-Light-On.png
        style:
          left: 50%
          pointer-events: none
          top: 50%
          width: 100%
        tap_action: toggle
        type: image
    type: conditional
  - conditions:
      - entity: light.kitchen_light_1
        state: 'on'
      - entity: light.living_room_light_3
        state: 'on'
    elements:
      - image: Kitchen-Living-Light-On.png
        style:
          left: 50%
          pointer-events: none
          top: 50%
          width: 100%
        tap_action: toggle
        type: image
    type: conditional
image: Home-Lights-Off.png
type: picture-elements
1 Like

Thanks for the tip!

Do you use the picture elements to make your floorplan? I just can’t have it working with my LG TV (that supports the picture_entity property)

Alex

Took some effort but happy with the result. Would like to optimise the size a bit as the file is 53MB.

Only problem I have is I cannot make it show as a card!

  - title: Floorplan
    path: floorplan
    badges: []
    cards:
      - type: 'custom:floorplan-card'
        name: Simple Floorplan
        image: /local/floorplan/examples/simple/simple.svg?v=1.1.14
        stylesheet: /local/floorplan/examples/simple/simple.css?v=1.1.14
        rules:
          - entities:
              - binary_sensor.main_bedroom
              - binary_sensor.living_area
              - binary_sensor.double_garage
            states:
              - class: binary-sensor-off
                state: 'off'
              - class: binary-sensor-on
                state: 'on'

Just getting a spinning wheel :thinking:
image

3 Likes

File is too heavy?