Remote Example

Example

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.