Picture elements overlay styling help

[aldojack]

Hey!

I have a hack solution but feel like maybe missing a trick to have it working how I would like

I have base image of my office with the light off and when presence is detected it goes to the base image of light on.

I got two PC images so I can use them as an overlay on the image to show when and which PC is on but I’ve found getting the position a bit of a nightmare like its off on desktop it looks just about right on mobile and tablet. I also notice like a blue spinner as if its trying to load something

The hacky stuff was mainly using card_mod to try align things

type: picture-elements
elements:
  - type: image
    style:
      left: 50%
      top: 50%
      width: 100%
    entity: binary_sensor.office_occupancy
    tap_action:
      action: none
    hold_action:
      action: none
    state_image:
      'on': >-
        http://homeassistant.local:8123/local/dashboard/office/office-light-only.png
    card_mod:
      style:
        hui-image $: |
          .container {
            width: 100%;
            max-height: 100vh;
            pointer-event: none;
          }

          #image {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            pointer-event: none;
            max-height: 100vh;
            margin: 0 auto;
            object-fit: contain;
          }
  - type: image
    style:
      left: 50%
      top: 50%
      width: 100%
    title: AJ
    entity: sensor.aj_pc_monitorpowerstate
    state_image:
      PowerOn: http://homeassistant.local:8123/local/dashboard/office/aj-pc-on.png
    tap_action:
      action: none
    hold_action:
      action: none
    card_mod:
      style:
        hui-image $: |
          .container {
            width: 100%;
            max-height: 100vh;
            pointer-event: none;
          }

          #image {
            display: block;
            width: auto;
            height: auto;
            pointer-event: none;
            max-width: 100%;
            max-height: 100vh;
            margin: 0 auto;
            object-fit: contain;
          }
  - type: image
    style:
      left: 50%
      top: 50%
      width: 100%
    entity: sensor.lauras_pc_monitorpowerstate
    state_image:
      PowerOn: http://homeassistant.local:8123/local/dashboard/office/laura-pc-on.png
    tap_action:
      action: none
    hold_action:
      action: none
    card_mod:
      style:
        hui-image $: |
          .container {
            width: 100%;
            max-height: 100vh;
            pointer-event: none;

          }

          #image {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            pointer-event: none;

            max-height: 100vh;
            margin: 0 auto;
            object-fit: contain;
          }
  - type: icon
    style:
      left: 70%
      top: 30%
    icon: mdi:alert-circle
    tap_action:
      action: navigate
      navigation_path: '#aj-pc'
    card_mod:
      style:
        hui-icon-element $: |
          .type-icon {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100vh;
            margin: 0 auto;
            object-fit: contain;
          }
image:
  media_content_id: http://homeassistant.local:8123/local/dashboard/office/office-off.png
  media_content_type: ''
  metadata:
    navigateIds:
      - {}
      - media_content_type: ''
        media_content_id: __MANUAL_ENTRY__
view_layout:
  grid-area: desks
card_mod:
  style:
    hui-image $: |
      .container {
        width: 100%;
            pointer-event: none;

        max-height: 100vh;
      }

      #image {
        display: block;
        width: auto;
            pointer-event: none;

        height: auto;
        max-width: 100%;
        max-height: 100vh;
        margin: 0 auto;
        object-fit: contain;
      }

[Frank_Beetz]

The easiest way to do this, is

• to do away with all the card-mod stuff
• take a picture with the office dark - picture 1
• take a picture with the office dark and the work station bright - picture 2
• take a picture with the office dark and the work station bright and windows open - picture 3
• etc. etc.

Use GIMP on picture 2,3, etc. to make the stuff that you are not interested in transparent.

Use picture 1 as base picture and overlay the others as required using “- type: conditional”

Here is an example:

[Estanza (estanza.casa)]

The blue spinner is the image element having nothing to show. When the sensor is in a state you didn’t list under state_image and there’s no plain image set, it just sits there loading. Give each overlay an image pointing at a fully transparent png and it goes away. Also use /local/dashboard/office/… instead of the full homeassistant.local address, otherwise the images won’t load when you open the dashboard away from home.