Picture-elements condition based on jinja

Configuration Frontend
1

Hi,

I’m trying to get my dashboard to switch between my different floors, based on a helper (input_text.floorplan_selection_by_browser) that contains a json file in wich I keep the device from wich I’m browsing, and the floor that needs to be shown in the dashboard.
Example of the helper’s content:
{"browser_mod_<phone>":"Ground Floor","browser_mod_<pc>":"First Floor"}

After some AI assistance I got to something that resembles (trimmed it down, to the bare essentials for this problem) the following for my dashboard. (which is a picture elements card)

type: picture-elements
image: /local/floorplan/floorplan background.png
elements:
  - type: custom:state-switch
    entity: template
    template: |
      [[[
        const raw = entity?.state || '{}';
        let obj = {};
        try { obj = JSON.parse(raw); } catch (e) { obj = {}; }
        const bid = window.browser_mod?.browserID;
        const floor = (bid && obj[bid]) ? obj[bid] : 'Ground Floor';
        return floor;
      ]]]
    states:
      Ground Floor:
        - image: /local/floorplan/groundfloor.png
          style:
            left: 50%
            pointer-events: none
            top: 50%
            width: 100%
          type: image
      First Floor:
        - image: /local/floorplan/firstfloor.png
          style:
            left: 50%
            pointer-events: none
            top: 50%
            width: 100%
          type: image
      Second Floor:
        - image: /local/floorplan/secondfloor.png
          style:
            left: 50%
            pointer-events: none
            top: 50%
            width: 100%
          type: image
  - type: custom:button-card
    entity: input_text.floorplan_selection_by_browser
    show_name: false
    show_state: false
    show_icon: false
    show_entity_picture: true
    entity_picture: |
      [[[
        const raw = entity?.state || '{}';
        let obj = {};
        try { obj = JSON.parse(raw); } catch (e) { obj = {}; }
        const bid = window.browser_mod?.browserID;
        const floor = (bid && obj[bid]) ? obj[bid] : 'Ground Floor';
        if (floor === 'First Floor') return '/local/floorplan/floor_icons/FirstFloor.png';
        if (floor === 'Second Floor') return '/local/floorplan/floor_icons/SecondFloor.png';
        return '/local/floorplan/floor_icons/GroundFloor.png';
      ]]]
    styles:
      card:
        - background: none
        - box-shadow: none
        - padding: 0px
    style:
      left: 5%
      top: 20%
      width: 5%
    tap_action:
      action: call-service
      service: script.floorplan_cycle_for_browser
      service_data:
        browser_id: "[[[ return window.browser_mod?.browserID; ]]]"
    hold_action:
      action: more-info

I’m guessing the problem has to do with the template being set with jinja and set to the entity of the state-switch. (downloaded via hacs, as wel as browser_mod) But can’t figure out what goes wrong.

Can anny of you help me?

Thx!

2

Cannot dig into this but this is wrong since state-switch does not support JS, read docs, it supports jinja.

Also, the whole idea to use state-switch to show conditional elements in Picture elements card is absolutely wrong, read docs for Picture elements card.

… which often gives a wrong code, and this could be noticed in case of at least trying to read docs, sorry for rudeness.

3

I’ve given up. Just made a different tab for each floor. This also solves the problem, just gives me some extra work when I need to change something that’s shown on all floors. (Like the buttons to change between floor)

Would still love if someone could tell me wether there’s a better sollution for my problem, (like a variable that is local, not global) and maybe how I can see when I can and can’t use jinja or javascript.
But for now things seem to work.

4

Imho this is much more simpler as you think.

type: picture-elements
image: ...
elements:
  - type: conditional
    ... specify your template sensor which returns a value dependently on your conditions
    ... specify your "image" elements dependently of your template sensor
  - ... your custom button-card

or if only an image is different (i.e. “style” is same) - use ONE “type: image” element instead of “type: conditional”:

  - type: image
    entity: ... that template sensor
    state_image: ... specify images dependently on your template sensor

Read Docs. Do not use AI.

Can only be used for cards, not elements.
Can be replaced by a stock conditional card if no special options are needed (i.e. supported by state-switch only)

5

I took a liberty to edit the thread’s title a bit since it was confusing:
“Picture-elements condition based on json”
→
“Picture-elements condition based on jinja”