Hoping someone can help I have managed to make the migration from the old Floorplan method to the Lovelace card, this is so much more functional so thank you for the hard work and all that have contributed.
I have temperature displays on my floorplan the oval semi-transparent background with a text element on top. The text element is working as i want it but i would like to change the colour of the oval based on the state of the sensor range so that at a glance I can see if the room is very cold, cold, optimal or hot.
I have tried using the various ideas from solar topics above but i have a missing link.
As I understand it the oval has to have a unique label that is an entity in HA. My way of doing something similar to this is to create a input_number sensor and have an automation that keeps it the same as your sensor.loft_1_temperature Then the oval has that input_number entity_id
Here is my code for something similar but I am just colour coding the text, I like your idea though.
I would like to restrict visibility or a particular icon for all but the owner/admin.
I want to have a panel available to users but want to make fill and stroke empty to hide the icon in question unless current user is owner/admin or could use name as well.
Not fond of advertising where the safe is but I want to see when it’s opened via the sensor.
Can anyone suggest the code to test for current user as class template or something?
Hi, sorry for the dalay, I tried taking out the infill and that did not work i have also tried just creating a circle from scratch with no fill and that does not seem to work either.
@OzGav & @firstof9 I got it working so far, i managed to keep the fill as it was, and the biggest issue in my equation was i as checking against temp value, not bgtemp so this now works, i shall look to now do this for all of my backgrounds in the nice templated way that OzGav shared.
Hi Guys, Im new in HA and trying to configure a floorplan card in Lovelace, but the first issue that I got is that my floorplan image is not displaying at full size. The image is 1920x1080 px
My code is this one:
config:
image: /local/floorplan/myhome/CasaIApagada.svg?v=1.1.14
log_level: error
rules:
entities:
switch.eb19a5a6e0f2adca83is09
switch.sonoff_100070d589
switch.sonoff_100070d58f
switch.sonoff_100070ee18_1
switch.sonoff_100070ee18_2
switch.sonoff_1000d7f92e
switch.sonoff_100070d58c
switch.sonoff_100070d58d
states:
class: binary-sensor-off
state: ‘off’
class: binary-sensor-on
state: ‘on’
stylesheet: /local/floorplan/examples/simple/simple.css?v=1.1.14
type: ‘custom:floorplan-card
This is how looks like…
’
I think I just discovered you can’t use a group.xxx entity in the floorplan. When I tried it the CSS would not apply to the element. I wasn’t trying to do an action on it so not sure if that would have worked. I was using the group to track a number of switches so that if any were on the group was on, As I said this didn’t flow through to the floorplan. I could hover over it and see the state correctly but the CSS was not working. I got around it by creating an input_boolean and an automation to have it turn on if any switch turned on and off if all the switches turned off. Clunky compared to the group idea but I am not sure there is a way around it.
If anyone has a solution to this please let me know!
Thanks OzGav. I was missing the panel: true. Now I will continue with the configuration to see if make it work.
A important thing about the panel: true is to put it in the right spot to work, In my case, it put it here and worked just fine
I must be super stupid, i just can’t get this work at all. Spent days on this and still can’t get the example to work. I must be missing something very obvious. Don’t know what to do anymore and about to give up on this. If someone can provide a super simple setup with their yaml files and file locations I would be grateful. Thanks.
Firstly just confirm you have a lib folder under floorplan with the three files in it?
I think you might have some issues with your ui-lovelace file. Firstly because you are using YAML mode you can have the resources in configuration.yaml so change that as follows:
lovelace:
mode: yaml
# Include external resources only add when mode is yaml, otherwise manage in the resources in the lovelace configuration panel.
resources:
- type: module
url: /local/floorplan/floorplan-card.js?v=1.1.14
then I notice your indenting has errors in it. Under rules entities and states should be indented two spaces further and a hyphen at the start of entities. stylesheet and type also arent indented correctly. Look again at https://github.com/pkozul/lovelace-floorplan and get the indenting EXACTLY the same, this is critical.
Lastly, you can certainly use your own entities (that is of course the point!) but you have to make sure that in your simple.svg that you have set the ID of the object properties for the object that you wish to see change appearance on your floorplan. I also assume you have added your new classes of light-off and light-on to simple.css
When you say no change can you confirm what you see. Do you see your floorplan on the screen?
In terms of CSS that stylesheet determines what each object will look like. You can control many different aspects of the object. With your current setup when the entity is turned on (which you cant do yet via your floorplan - more on that later) then the style of light-on would be applied and light-off would be applied when the state changes to off. The thing is that the simple.css file you have does not have those styles. You need to add this:
Light off should be a grey colour and light on will be a light yellow. Change those colour codes to whatever you like. Once you get this going more ideas here Share your Floorplan
If you want to be able to touch your floor plan and toggle those lights then you just need to add an action to the rule. I assume now when you touch on the bulbs a dialog box will pop up with info about the light (and a switch to turn it on)
