Light Example Example Floorplan YAML CSS title: Light config: image: location: /local/floorplan/examples/light/light.svg cache: true stylesheet: location: /local/floorplan/examples/light/light.css cache: true defaults: hover_action: action: hover-info tap_action: action: more-info rules: - entities: - light.kitchen - light.office tap_action: action: navigate navigation_path: /lovelace/lights state_action: - action: call-service service: floorplan.style_set service_data: | > var elements = [ `${entity.entity_id}`, `${entity.entity_id}.gradient_color_0`, ]; var color = 'rgb(0, 0, 0)'; var opacity = 0; if (entity.state === 'on') { if (entity.attributes.color_temp) { var rgb = util.color.miredToRGB(entity.attributes.color_temp); color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`; opacity = 1; } else if (entity.attributes.rgb_color) { var rgb = entity.attributes.rgb_color; color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`; opacity = 1; } } var style = `fill: ${color}; stop-color: ${color}; stop-opacity: ${opacity};`; return { elements: elements, style: style, }; /* SVG size */ #floorplan > svg { max-width: 200px; } /* SVG elements */ svg * { vector-effect: non-scaling-stroke !important; } /* Hover over */ .floorplan-shape:hover, g.floorplan-hover > :not(text):hover, g.floorplan-click > :not(text):hover, g.floorplan-long-click > :not(text):hover, :not(text).floorplan-hover:hover, :not(text).floorplan-click:hover, :not(text).floorplan-long-click:hover { stroke: #03a9f4 !important; stroke-width: 1px !important; stroke-opacity: 1 !important; } Assets All assets can be found in the ha-floorplan repository on GitHub. Here you’ll find the .svg, .css and .yaml used in the example. Previous Next