Hi thx a lot, helpfull.
Any idea how i should do a fireplace?
I have the same top view on the floorplan
I would like to have the fireplace light the environment but flicker like a real fire
I can use a gif, but u wont see that from the top… and i wont see light flicker.
Maybe you have an idea?
I do something similar with my projector
.media_player-on {
animation: flicker 1s infinite;
}
@keyframes flicker{
0% {opacity:0.75}
10% {opacity:0.45}
11% {opacity:0.75}
27% {opacity:0.45}
29% {opacity:0.75}
67% {opacity:0.45}
68% {opacity:0.75}
99% {opacity:0.45}
100% {opacity:0.75}
}
1 Like
Cool perfect thank you , will try
For a button i could do that i think… but for a picture element, how do i implement that into this part?
type: image
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
state_image:
"on": /local/floorplan/gelijkvloers/Haard.png
"off": /local/floorplan/gelijkvloers/Basis.png
tap_action:
action: none
hold_action:
action: noneCause its Haard.png that should flicker
Ok this thread is for ha-floorplan. If you are using picture elements you need to head over to configuration.
Hi All,
I created a floorplan using floorplanner and created in Inkscape different area’s per room.
Can an area be used for two actions ? I want to click on an area and the lights need to go on, the area will change to opacity: 0. The second action for that area is, when there is motion, that area needs to change color and blink.
Please see below for Yaml file & CSS + panel
floorplan.yaml:
views:
- title: Floorplan
path: floorplan
theme: Google Dark Theme
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:floorplan-card
full_height: true
config:
image: /local/house/floorplan.svg
stylesheet: /local/house/floorplan.css
log_level: info
defaults:
hover_action: hover-info
tap_action: more-info
rules:
- name: Rooms
entities:
- entity: group.hal_lights
element: area.gang
- entity: group.keuken_lights
element: area.keuken
- entity: group.living_lights
element: area.living
tap_action: light.toggle
state_action:
service: floorplan.class_set
service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
- name: Security
entities:
- entity: binary_sensor.hue_motion_sensor_1_motion_2
element: area.gang
- entity: binary_sensor.activity_in_bureau
element: area.bureau
- entity: binary_sensor.activity_in_living_room
element: area.living
- entity: binary_sensor.hue_motion_keuken_motion
element: area.keuken
- entity: binary_sensor.hue_motion_sensor_2_motion
element: area.master
state_action:
service: floorplan.class_set
service_data: >-
${(entity.state === "on") ? "detection-on" :
"detection-off"}
type: panel
background:
opacity: 62
alignment: center
size: cover
repeat: repeat
attachment: fixed
Floorplan.css
#floorplan {
padding: 10px;
}
/* #floorplan svg{
height: 100vh!important;
} */
svg tspan {
fill: var(--primary-text-color);
}
/* SVG shapes */
svg, svg * {
vector-effect: non-scaling-stroke !important;
pointer-events: all !important;
}
/* Hover over */
.ha-entity:hover {
stroke: #03A9F4 !important;
stroke-width: 1px !important;
stroke-opacity: 1 !important;
}
.light-on {
opacity: 0 !important;
}
.light-off {
opacity: 0.5 !important;
transition: opacity .25s;
-moz-transition: opacity .25s;
-webkit-transition: opacity .25s;
}
@keyframes blink {
0%, 100% { background-color: blue; }
50% { background-color: red; }
}
/* Security Check */
.detection-on {
fill: red !important;
animation-name: blink;
animation-iteration-count: infinite;
}
BTW: it doesn’t blink either 
Thanks a lot in advance !
Kr,
Bart
This is what I have for blink
.svg-blink {
animation: blink 2s linear infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
For your other idea I think it will be hard as you would have to remember the light state and reapply that when the motion ceases. I would use two transparent overlays and apply the light state to one and the motion detection to the other
Thanks @ozgav,
What I am now trying to do, is with one dataset, give the entity attributes towards my css stylesheet. I want to pass through the RGB colors to my stylesheet in order to have an svg-image (sort of lamp glowing) to have the same color as my lights that are ‘on’:
state_action:
service: floorplan.class_set
service_data:
class: '${(entity.state === "on") ? "light-on" : "light-off"}'
lamp-aan: 'rgb(${state_attr(entity, "rgb_color").join(", ")})'
But that doesn’t work at all Any more tips you could give me ?
Thanks a lot !
Kr,
Bart
Have you seen this example Light Example - Floorplan for Home Assistant
I wanted a clock face so I built one with HA-Floorplan… man I love this “card”. All hands update appropriately every second. Video of the card in action.
1 Like