How can I get my rotating image to stay in the same place?
I have a fan symbol in my plan wich I want to rotate when enabled.
When I activate the fan the symbol gets larger and rotates over the entire plan.
What am I missing?
.fan-on {
animation-name: spin;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
Hi @aee74
Can you try the suggestion described here?
We added a section about the positioning of animations
This is how the editor shows the symbol
<g
inkscape:label="switch.afzuigkap_power"
transform="matrix(0.43460003,0,0,0.43460003,444.74252,65.818359)"
id="switch.afzuigkap_power">
<g
transform="matrix(0.02062095,0,0,0.02062095,2.4453086e-6,-0.5591783)"
id="g855">
Can you try removing the transform from the lower (second) <g> and I think your labels may be incorrect. Have a close look at the link Petar supplied above and replicate that.
I will try
Changed it to this:
<g
id="switch.afzuigkap_power_group"
transform="matrix(0.01772951,0,0,0.01772951,443.23034,62.929346)"
<g
id="switch.afzuigkap_power">
The switch.afzuigkap_power_group does not exist, should I create this switch?
You may not need to. Does it work with the above?
It did not work. I’ve changed the setup now. Created a box and dependign on the state it wil show an icon. this icon rotates inside the box. works fine.
Is it also possible to make an icon mirror (hor or vert.)
great. I’m going to try this. thanks
I’m finally getting around to migrating (on a test host) from the old old Floorplan card to the new shiny Floorplan card. However, I’m hitting an odd bug.
With the same SVG file as I’m already using I’m getting lots of cannot find element 'binary_sensor.blah' in SVG file. For example:
10/08/2021, 19:08:14 WARNING CONFIG Cannot find element 'binary_sensor.bathroom_window_contact' in SVG file
SVG file:
image: /local/floorplan/config/home/floorplan.svg
Yet, when I do
% grep binary_sensor.bathroom_window_contact ~/.homeassistant/www/floorplan/config/home/floorplan.svg
id="binary_sensor.bathroom_window_contact"
Some things are found, and it’s mostly the ones I put in first. It doesn’t seem to be a layer issue since found and missing entities are in the same layers. It doesn’t seem to be a file size issue since there’s found entities later on than the missing ones. It doesn’t even seem to be naming. Indeed I can find nothing in common.
Any thoughts as to where I should look next?
I would use Inkscape’s FIND feature and search the SVG that way. Once the element has been located try deleting it and reinserting and see if that makes a difference. Maybe there is some sort of corruption or outdated formatting in your current SVG?
I need a little help because I’m at a loss. I can’t seem to get the card to display a full floorplan, only a sliver of it. I made the floor plan in the 1024x768 size because it was suggested, however I just need the ground floor which is very wide and not very tall, so the plan takes up 100% of the width but only 30% of the height. Below is my yaml config and how the card looks. My css file is empty. I’m sure I’m missing something obvious, I would love any help. Thank you 
cards:
- type: horizontal-stack
cards:
- type: 'custom:floorplan-card'
style: |
svg {
height: auto !important;
width: auto !important;
}
config:
image: /local/floorplan/floorplan.svg
stylesheet: /local/floorplan/floorplan.css
log_level: info
console_log_level: info
defaults:
hover_action: hover-info
tap_action: more-info
rules:
It might be because of what you say here ^^^^^^
Assuming you use Inkscape you might mean you have gone to FILE>>DOCUMENT PROPERTIES and set a custom size? If so you have probably made that too small for your actual image? Just set the custom size so the rectangle that shows that is the same size as your actual image. Play around with the custom size values and you should see the rectangle get bigger and smaller. If that doesn’t help you will need to post a copy of your SVG for us to look at.
Resizing it didn’t help, looks basically the same. The svg file is here: FloorplanFTF/floorplan.svg at 15549b52cdadcfa0230e57f0cf7b2c287c80e0f1 · frantathefranta/FloorplanFTF · GitHub
Not sure if that’s the best way to post that.
I don’t know enough to know why your SVG is getting clipped but I was able to use some options to make it work from here: How to Handle Size and Expand Floorplan - Floorplan for Home Assistant So for a start don’t horizontal stack it. When I removed that I had full width but it was clipped at the bottom. This was fixed with the full_height option
- panel: true
cards:
- config:
# log_level: info
image:
location: /local/floorplan/floorplan.svg
cache: false
stylesheet:
location: /local/floorplan/floorplan.css
cache: true
rules:
full_height: true
type: 'custom:floorplan-card'
This works for me too however it’s not what I want, as this just shows a single card in one dashboard/view. I would like this to show up as a card among more cards. Or am I setting it up wrong? I know the panel: true option makes the view show up as just one card, right?
Technically it makes the card full width. You can have this with other cards but I recommend having this as a full width card and the other cards above or below. Here is one I have:
Edit: You could try without the panel:true option and see if it will work for you just with full_height:true but as I said I don’'t do that.
- panel: true
cards:
- type: vertical-stack
cards:
- type: 'custom:floorplan-card'
config:
stylesheet:
location: /local/floorplan/floorplan.css
cache: true
image:
location: /local/floorplan/floorplan_devices.svg
cache: true
defaults:
hover_action:
action: hover-info
tap_action:
action: more-info
rules:
- entities:
- device_tracker.gargoylelan
- device_tracker.netgearwapbedroomlan
- device_tracker.unifi_alfrescolan
- device_tracker.rumpus_ap_workgroup
- device_tracker.webserverlan
- device_tracker.arduinosolarlan
- device_tracker.00_25_22_19_d1_54 #Freenas server 192.168.1.174
- device_tracker.ipcamworkgroup
- binary_sensor.sprinkler_controller_status
- binary_sensor.sprinkler_controller_lower_status
- device_tracker.opencanary_workgroup
- device_tracker.adguard_workgroup
name: Switches
state_action:
action: call-service
service: floorplan.class_set
service_data: '${(["on", "home"].includes(entity.state)) ? "always-invisible" : "always-visible"}'
- entities:
- zwave.aeotec_dsa02203_z_stick_s2
- zwave.aeotec_zw132_dual_nano_switch
- zwave.aeotec_zw111_nano_dimmer
name: textSensors
state_action:
service: floorplan.text_set
service_data: '${entity.state ? entity.state.replace(/\s{2,}/g,"") : "---"}'
- entities:
- sensor.pantry_tablet_battery_level
name: textSensors
state_action:
service: floorplan.text_set
service_data: '${entity.state ? entity.state.replace(/\s{2,}/g,"") + "%" : "---"}'
- entities:
- switch.tp_link_smart_plug_da0e
- switch.washing_machine
- switch.pantry_tablet_screen
name: Toggle Device Switches
tap_action:
action: call-service
service: switch.toggle
state_action:
service: floorplan.class_set
service_data:
class: '${(entity.state === "on") ? "always-visible" : "always-invisible"}'
- type: horizontal-stack
cards:
- type: history-graph
entities:
- sensor.speedtest_ping
- sensor.speedtest_download
- sensor.speedtest_upload
show_header_toggle: true
title: Internet Speed
- type: history-graph
entities:
- sensor.power_generation
- sensor.energy_generation
- sensor.aeotec_zw132_dual_nano_switch_voltage
show_header_toggle: false
title: Solar Panels
I’m now trying it like this, however it now cuts it off for some reason again…
Also adding more cards above or below doesn’t make them show up. I think I’m putting them at the right indentation but not sure. This is now my lovelace.yaml:
- title: Background
path: background
panel: true
cards:
- type: vertical-stack
cards:
- type: 'custom:floorplan-card'
config:
# log_level: info
image:
location: /local/floorplan/floorplan.svg
cache: false
stylesheet:
location: /local/floorplan/floorplan.css
cache: true
rules:
full_height: true
- type: entities
entities:
I really appreciate your help btw
Hmmm that is odd as I justed pasted your YAML into my system and:
You can try a SHIFT-F5, and hit the three dots top right and RELOAD RESOURCES and same dots again and REFRESH. Try a different browser as well
P.S. When you get this working make your image bigger so it fits higher resoltuion screens. Mine is around 10000 pixels wide!
