Floorplan spinning blue circle

[spodec]

Hi,

I just started with my floorplan and implemented an overlay picture for the status of my tv. The standard background picture is showing the “on” state of the tv. As soon as I turn it off it is overlayed with another picture. When the tv is turned “on” a spinning blue circle in the middle appears. It it is turned “off” there is no circle. The same behavior with other entities. What’s going on here and how can I remove it?

kiosk_mode:
  entity_settings:
    - entity:
        input_boolean.vollbildmodus: 'on'
      hide_sidebar: true
      hide_header: true
      hide_overflow: false
views:
  - title: Home - Tablet
    path: home-tablet
    icon: mdi:home
    type: sidebar
    badges: []
    cards: []
  - type: panel
    title: Wohnzimmer
    cards:
      - type: picture-elements
        image: /local/floorplan/ipad_wohnzimmer.png
        elements:
          - type: image
            action: none
            entity: vacuum.roborock_s6_maxv
            tap_action: none
            hold_action: none
            state_image:
              docked: /local/floorplan/roborock_im_dock.png
            style:
              top: 50%
              left: 50%
              width: 100%
          - type: image
            action: none
            entity: media_player.apple_tv
            tap_action: none
            hold_action: none
            state_image:
              standby: /local/floorplan/tv_aus.png
            style:
              top: 50%
              left: 50%
              width: 100%
          - type: state-label
            entity: sensor.wohnzimmer_wandthermostat_temperature
            style:
              top: 6%
              left: 82.7%
              font-size: 40px
              font-weight: bold
              color: '#000'
          - type: state-label
            entity: fan.wohnzimmer
            tap_action:
              action: toggle
            style:
              top: 91.5%
              left: 44%
              font-size: 40px
              font-weight: bold
              color: '#000'
          - type: state-label
            entity: input_boolean.vollbildmodus
            tap_action:
              action: toggle
            style:
              top: 5%
              left: 5%
              font-size: 30px
              color: '#000'
    icon: mdi:sofa
    path: ipad-wohnzimmer

Thanks for your help

[OzGav]

This category is for ha-floorplan queries. You are using picture elements so please ask in configuration

About the Floorplan category

Floorplan is a custom integration which allows you to show a floorplan of your home.

[Frank_Beetz]

The spinning circle means, that HA does not know what to show, because you did not attach an image to the state of the respective entity (or the name of the image you want to show is misspelled )

In other words - for example HA doesn’t know what image you want to show when the state of your “media_player.apple_tv” is other than “standby”.

Not sure if “replacing” the whole image with a new one just because one item in the view changed is the way to go?
Lets say you have 4 different items that may change how they look.
You will end up making 4x3x2=24 different renderings.

My suggestion for picture-elements:
Leave the background picture the same and only change the item in question using “conditional” to decide what to show

[spodec]

@Frank_Beetz

In other words - for example HA doesn’t know what image you want to show when the state of your “media_player.apple_tv” is other than “standby”.

I got it. Thanks. Is there any way I can configure that if it’s not “standby” do nothing?

@Frank_Beetz

You will end up making 4x3x2=24 different renderings.

No. I have a base image (see picture below) and only need one additional picture for each item to show 2 different states. Here for example vacuum to overlay it to the base image. This way I can overlay multiple pictures without interfering each other. It’s a png file so the white area is transparent and always shows the base image.

[Frank_Beetz]

@spodec

I got it. Thanks. Is there any way I can configure that if it’s not “standby” do nothing?

Make a PNG that is completely transparent and call it “transparent.png”.

Under the line
standby: /local/floorplan/tv_aus.png

add a line
on: /local/floorplan/transparent.png

and a line (just in case)
unavailable: /local/floorplan/transparent.png

You may have to add other states - no idea which additional states your TV entity can assume.

[spodec]

@Frank_Beetz

Leave the background picture the same and only change the item in question using “conditional” to decide what to show

I also got it to work this way. This way I only need one status which is easier than covering all possible status (playing, paused, idle,…)

    - type: conditional
            conditions:
              - entity: media_player.apple_tv
                state: standby
            elements:
              - type: image
                action: none
                tap_action: none
                hold_action: none
                image: /local/floorplan/tv_aus.png
                style:
                  top: 50%
                  left: 50%
                  width: 100%

One more question. I want the whole object to be clickable. So I increased the size of the button, but the button only reacts to the center area where the lettering is. How can I expand the clickable area to the whole green area?

- type: state-label
            entity: fan.wohnzimmer
            tap_action:
              action: toggle
            style:
              top: 73.7%
              left: 44.1%
              font-size: 10px
              font-weight: bold
              color: black
              background-color: green
              padding: 182px 20px
              border-radius: 30px

[Frank_Beetz]

Make a transparent rectangle and posititon it over the fan.
Here is an example:

remove the letter t in the border-line.
That way you can position it precisely

[spodec]

Very cool. Thank you! Is there any way to distort the picture to make it perfectly fit on top of the room?

- type: image
            image: /local/floorplan/leer.png
            entity: input_button.visu_raumauswahl
            tap_action:
              action: navigate
              navigation_path: /dashboard-ipad/wohnzimmer
            style:
              top: 33%
              left: 40.5%
              height: 28%
              width: 21%
              border: 4px solid red
              rotate: 22.3deg

[spodec]

I found a solution:

- type: image
            image: /local/floorplan/leer.png
            entity: input_button.visu_raumauswahl
            tap_action:
              action: navigate
              navigation_path: /dashboard-ipad/wohnzimmer
            style:
              top: 12.8%
              left: 31%
              height: 29%
              width: 27%
              border: none
              rotate: 22.3deg
              transform: skew(-16deg)