Opacity from Brightness on Floor Plan picture element

Configuration Frontend
1

Ive looked at sample code others have posted on this and simply cannot get it to work - does anyone see anything wrong with this syntax ? (if I hard code the opacity it works) - thanks

type: horizontal-stack
cards:
  - type: picture-elements
    image: /local/floorplan/upper/246-Upper-Floor-DAY.png
    panel: true
    elements:
      - type: image
        entity: light.dining_room
        state_image:
          "on": /local/floorplan/upper/246-Upper-Floor-DiningRoom.png
          "off": /local/floorplan/upper/246-Upper-Floor-DAY.png
        style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten
          opacity: >-
            ${states['light.dining_room'].state === 'on' ?
            (states['light.dining_room'].attributes.brightness / 255) : '0'}
        tap_action:
          action: none
2

What you are trying to use is a JS-like code. Picture-elements card does not support templates. Consider using card-mod. Google for “Picture elements small tutorial” (cannot give you a link).

3

I got the syntax from this link - and also see it in others - (removed)

views:
  - title: Floorplan
    type: panel
    path: first
    badges: []
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-elements
            image: /local/
            panel: true
            elements:
              - type: image
                entity: <entity>
                style:
                  left: 50%
                  top: 50%
                  width: 100%
                  mix-blend-mode: lighten
                  filter: >-
                    ${ "hue-rotate(" +
                    (states[‘entity’].attributes.hs_color ?
                    states[‘entity’].attributes.hs_color[0] : 0) +
                    "deg)"}
                  opacity: >-
                    ${states[‘entity’].state === 'on' ?
                    (states[‘entity’].attributes.brightness / 255)
                    : '0'}
                state_image:
                  'on': /local/
                  'off': /local/
                tap_action:
                  action: none

              - type: state-icon
                entity: <entity>
                style:
                  left: 5%
                  top: 55%
                  opacity: 
                tap_action:
                  action: toggle
4

Means the code is wrong on that link.
May it’s author (or someone else) omitted some significant part (like config-template-card).

5

Yes I see what you mean - the author of that link took code from it looks like another author who used a custom-template-card (Which isnt in the code above ) - so - Ill have to go to that original source and see how to do it properly - thanks for the reply

6

Already proposed you to find a tutorial, no insisting.