I had a similar issue with my lock. You need to create a switch in HA for it and then use toggle for the switch in Floorplan. Example below is for a lock, but you should be able to adjust it for a cover.
platform: template
switches:
front_lock:
friendly_name: "Front Lock"
value_template: "{{ is_state('lock.front_door', 'locked') }}"
turn_on:
service: lock.lock
entity_id: lock.front_door
turn_off:
service: lock.unlock
entity_id: lock.front_door
OK i have most of my sensors and lights working, i want to create a little more animation, like when i click on the lights it turns yellow. do i need to have 2 images one fill in and the other blank ? and were would i change that config in my floorplan.yaml ? i read a lot people do stuff with .css.
Thank you for all the help im getting a better understanding of how all this work.
Love this quick visual and ability to see key features of the instance immediately, thank you for the hard work!
Any chance of embedding an RSS feed for news? I can hack together a weather feed based on dark sky, but I’m having some trouble thinking of ways to add a news “widget”.
-Zach
Changing colors it something you’ll do in the CSS for example like this:
.light-off {
fill: #424242 !important;
fill-opacity: 1 !important;
}
.light-on {
fill: #FFBF00 !important;
fill-opacity: 1 !important;
}
And in your floorplan.yaml you add this:
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
So you do not need multiple images in your floorplan.
You can also enable / disable images in your floorplan if you want but that’s lesson no. 2 
SO, I have all these set up and when I click on my lightbulb icon nothing happens to the icon, do i have to do anything special to the ICON?
Can you post your code?
/* Light */
.light-off {
fill: #424242 !important;
fill-opacity: 1 !important;
}
.light-on {
fill: #FFBF00 !important;
fill-opacity: 1 !important;
- name: Lights
entities:
- light.main_door
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
domain: homeassistant # This optional parameter allows you to use other services such as homeassistant.toggle like here.
service: toggleyou’re missing a closing bracket on the light-on css
lol sorry its there, i forgot to paste that
/* Light */
.light-off {
fill: #424242 !important;
fill-opacity: 1 !important;
}
.light-on {
fill: #FFBF00 !important;
fill-opacity: 1 !important;
}I thought it was an easy fix… and your lights turn on/off when you click them in your floorplan? Are those realy svg elements in your floorplan or bitmaps?
Try changing the domain to light. That works for me.
action:
domain: light # This optional parameter allows you to use other services such as homeassistant.toggle like here.
service: toggleYes, the lights work fine and if I hover the mouse I get a status of the light. I get the images from https://materialdesignicons.com/ they are .png images if that answer the second question.
You should download the icons as svg, its the ‘icon package’ button. I think this will solve the problem.
YAY, changing to SVG images work, so all my images needs to be svg to do anytime of animation ?
Thank you for all your help.
Great! yeah svg (which is a vector format) can be changed using css while png (or any other bitmap icons) can only be shown or hidden as far as I know. That’s why I draw my floorplan on top of an bitmap image and removed it when I was done. Better keep everything svg as it’s also scalable.
For some reason, I’m getting a script error on Safari (MacOS and iOS). However, it works fine on Chrome.
Here are the Safari Console logs:
[Error] NotSupportedError (DOM Exception 9): Cannot define multiple custom elements with the same tag name
define (custom-elements-es5-adapter.js:4:907)
value (custom-elements-es5-adapter.js:4:907)
_polymerFn (data:text/javascript;charset=utf-8,!fu…%0A:1:148)
Global Code (data:text/javascript;charset=utf-8,%0A…%0A:2)
[Error] TypeError: undefined is not an object (evaluating 'Object.keys(list)')
keys (data:text/javascript;charset=utf-8,%0A…%0A:782)
getArray (data:text/javascript;charset=utf-8,%0A…%0A:782)
onStyleSheetLoaded (data:text/javascript;charset=utf-8,%0A…%0A:149)
(anonymous function) (data:text/javascript;charset=utf-8,%0A…%0A:133)
(anonymous function)
[Error] Failed to load resource: the server responded with a status of 404 (HTTP/2.0 404) (webcomponents-lite.js.map, line 0)Hi Folks.
I designed an icon for floorplans and it’s just been added to MDI - https://materialdesignicons.com/icon/floor-plan
I intend to use it for my floorplan iframe panel.
BTW, not sure how long it takes for HASS master to incorporate the latest changes to MDI webfont though… probably the next HASS release at earliest.
For some reason, I’m getting a script error on Safari (MacOS and iOS). However, it works fine on Chrome.
Here are the Safari Console logs:
Same here.
I just upgraded to Hass.io a few days ago then discovered this floor plan piece! I was hesitant at first because it looks so awesome so I thought it’d be a lot of work. Turns out, was pretty easy. I’m still exploring what I can do but here’s what I got so far.
I couldn’t get tracker status to change though. I followed example here by CCOSTAN and it still won’t change in floorplan when it changes in other areas of HA.
Can’t wait to add sprinklers around the house (Rachio), webcam feeds and perhaps some animations. Very cool.
Does not work with ios anymore, version 0.52.1.
