Remote Example Example Floorplan YAML CSS title: Remote config: image: /local/floorplan/examples/remote/remote.svg stylesheet: /local/floorplan/examples/remote/remote.css defaults: hover_action: hover-info tap_action: more-info rules: - entity: media_player.tv state_action: - action: call-service service: floorplan.text_set service_data: ${entity.state.toUpperCase()} - action: call-service service: floorplan.class_set service_data: 'tv-${entity.state}-fill' - action: call-service service: floorplan.class_set service_data: elements: - tv_rect - power_rect class: 'tv-${entity.state}-outline' - action: call-service service: floorplan.text_set service_data: element: media_player.tv.volume_level text: '${(entity.attributes.volume_level * 100).toFixed(0)}%' - action: call-service service: floorplan.class_set service_data: element: media_player.tv.volume_group class: '${entity.state === "on" ? "show" : "hide" }' - elements: - button.power - button.tv entity: media_player.tv tap_action: action: call-service service: homeassistant.toggle - element: button.volume_up entity: media_player.tv tap_action: action: call-service service: media_player.volume_up - element: button.volume_down entity: media_player.tv tap_action: action: call-service service: media_player.volume_down /* SVG size */ #floorplan > svg { max-width: 600px; } /* 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; } /* TV power (fill) */ .tv-on-fill { fill: green !important; } .tv-off-fill { fill: red !important; } /* TV power (outline) */ .tv-on-outline { stroke: green !important; } .tv-off-outline { stroke: red !important; } /* TV content */ .show { visibility: visible !important; } .hide { visibility: hidden !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