State-switch in picture-elements

Configuration Frontend
1

Hi! I have a picture-elements of my house with all the elements drawn: lights, alarm, air conditioner… As it was getting too saturated, first I broke it into different views.

Then I discovered the conditional element in picture-elements. So I created a way to select what elements to show, using input_select, and input_boolean helpers. I could even show many elements at the same time -after placing them correctly.

Problem: those selectors run in the background and they’re shared by all the . So Imagine I’m viewing the lights, and my wife wants to see the air conditioner, it changes for everybody…

Then I discovered the state-switch element, with hash, that uses parameters in the URL to allow different elements shown in different browsers. But I cannot use that inside a picture-elements card. I’d need to create a lot of picture-elements and show/hide them, or go back to different views, but I love the beauty of having only 1 map with everything on it.

Has anybody showing/hiding elements in picture-elements using state-switch hashes?

2

##Edited later with a solution yhat works for me##
I have the same requirement and have spent some time trying to get it working. I’ve got a complex card displaying various entities and embedding a canvas-gauge card within which I have a group of entities only visible to me, any other user should just see a short message.
By trial & error I’ve come up with the card below. Apologies for reproducing it in full, but is demonstrates a custom:card-gauge as well, which still doesn’t scale correctly on some browsers, but attempts to do so using a custom:state-switch
it looks like this:

image
image987×1507 93.9 KB

WIth the group under the brown/green box only visible to me.

type: custom:card-templater
entities:
  - sensor.height_now
  - input_number.tide_low_restriction
card:
  type: picture-elements
  image: /local/images/blankv.jpg
  title: Appledore tides
  elements:
    - type: state-label
      entity: sensor.nult
      suffix_template: >-
        {{+ states("sensor.height_now")|round(1)~"m
        ("~state_attr("sensor.height_now","status")~")"}}
      prefix: 'Tide height now: '
      tap_action:
        action: call-service
        service: multiscrape.trigger_met_inshore_scraper2
        data: {}
      style:
        transform: translate(0%,-80%)
        top: 0%
        left: 0%
        font-weight: bold
        color_template: >-
          {{ iif( states('sensor.height_now')|float <=
          states('input_number.tide_low_restriction')|float, 'red', 'black') }}
    - type: state-label
      entity: sensor.nult
      suffix_template: >-
        {{ states('sensor.height_later')|round(1) ~"m in
        "~states('input_select.tide_later_offset')~" mins"}}
      style:
        transform: translate(0%,-50%)
        top: 0%
        right: 0%
        color: black
    - type: state-label
      entity: sensor.nult
      suffix_template: >
        {% if states('sensor.tide_range_type_last') not in ('none',
        'unavailable', 'undefined') %}
          {{+ states('sensor.tide_range_type_last') + " " + state_attr('sensor.tide_range_type_last','whentxt')~" ago" }}
        {% endif %}
      style:
        transform: none
        top: 0%
        right: 0%
        color: black
    - type: state-label
      entity: sensor.nult
      suffix_template: |
        {% if not states('sensor.tide_range_event')=="" %}
          {{+ states('sensor.tide_range_event') + " " ~ state_attr('sensor.tide_range_event','whentxt') }}
        {% elif not states('sensor.tide_range_event1')=="" %}
          {{+ states('sensor.tide_range_event1') + " " ~ state_attr('sensor.tide_range_event1','whentxt') }}
        {% endif %}
      style:
        transform: none
        top: 3%
        right: 0%
        color: black
    - type: state-label
      entity: sensor.nult
      prefix: Last
      style:
        transform: none
        bottom_template: '{{((states("sensor.tide_last_h")|float*80/9) + 12.5)|int|string +"%"}}'
        right: 87%
        font-size: 90%
        color: black
    - type: state-label
      entity: sensor.nult
      prefix: Now
      style:
        transform: none
        bottom_template: '{{((states("sensor.height_now")|float*80/9) + 10.5)|int|string +"%"}}'
        right_template: >-
          {% if
          (states("sensor.height_now")|float-states("sensor.tide_last_h")|float)|abs>0.6
          %}
            86%
          {% endif %}
        left_template: >-
          {% if
          (states("sensor.height_now")|float-states("sensor.tide_last_h")|float)|abs<0.6
          %}
            30%
          {% endif %}
        font-weight: bold
        color: black
    - type: state-label
      entity: sensor.nult
      suffix_template: >-
        {{as_timestamp(states('sensor.tide_last'))|timestamp_custom('%H:%M',true)}}
      style:
        transform: none
        bottom_template: '{{((states("sensor.tide_last_h")|float*80/9) + 9.5)|int|string +"%"}}'
        right: 87%
        color_template: >
          {% if states('sensor.tide_last_h')|float <=
          states('input_number.tide_low_restriction')|float %}
            red
          {% else %}
           black
          {% endif %} 
    - type: state-label
      entity: sensor.nult
      prefix_template: '{{states("sensor.tide_last_h")|round(1)}}'
      suffix: m
      style:
        transform: none
        font-size: 90%
        bottom_template: '{{((states("sensor.tide_last_h")|float*80/9) + 6.5)|int|string +"%"}}'
        right: 87%
        color: black
    - type: state-label
      entity: sensor.nult
      prefix: Next
      style:
        transform: none
        bottom_template: '{{((states("sensor.tide_next_h")|float*80/9) + 12.5)|int|string +"%"}}'
        left: 30%
        font-size: 90%
        color: black
    - type: state-label
      entity: sensor.nult
      suffix_template: >-
        {{as_timestamp(states('sensor.tide_next'))|timestamp_custom('%H:%M',true)}}
      style:
        transform: none
        bottom_template: '{{((states("sensor.tide_next_h")|float*80/9) + 9.5)|int|string +"%"}}'
        left: 30%
        color_template: >
          {% if states('sensor.tide_next_h')|float <=
          states('input_number.tide_low_restriction')|float %}
            red
          {% else %}
           black
          {% endif %} 
    - type: state-label
      entity: sensor.nult
      prefix_template: '{{states("sensor.tide_next_h")|round(1)}}'
      suffix: m
      style:
        transform: none
        font-size: 90%
        bottom_template: '{{((states("sensor.tide_next_h")|float*80/9) + 6.5)|int|string +"%"}}'
        left: 30%
        color_template: >
          {% if states('sensor.tide_next_h')|float <=
          states('input_number.tide_low_restriction')|float %}
            red
          {% else %}
           black
          {% endif %} 
    - type: state-label
      entity: sensor.gw2000a_absolute_pressure
      tap_action:
        action: call-service
        service: multiscrape.trigger_met_inshore_scraper2
        data: {}
      prefix: 'Pressure: '
      style:
        transform: none
        bottom: 0%
        left: 0%
        font-size: 80%
        color: black
    - type: state-label
      entity: sensor.nult
      prefix: 'Next tides:'
      style:
        transform: none
        font-weight: bold
        bottom: 78%
        left: 45%
        color: black
    - type: state-label
      entity: sensor.nult
      prefix_template: >-
        {{as_timestamp(states('sensor.tide_next'))|timestamp_custom('%a
        %H:%M',true)}}
      suffix_template: '{{": "+states("sensor.tide_next_h")|round(1)|string + "m"}}'
      style:
        transform: none
        bottom: 75%
        left: 45%
        color_template: >
          {% if states('sensor.tide_next_h')|float <=
          states('input_number.tide_low_restriction')|float %}
            red
          {% else %}
           black
          {% endif %} 
    - type: state-label
      entity: sensor.nult
      prefix_template: >-
        {{as_timestamp(states('sensor.tide_next1'))|timestamp_custom('%a
        %H:%M',true)}}
      suffix_template: '{{": "+states("sensor.tide_next1_h")|round(1)|string + "m"}}'
      style:
        transform: none
        bottom: 72%
        left: 45%
        color_template: >
          {% if states('sensor.tide_next1_h')|float <=
          states('input_number.tide_low_restriction')|float %}
            red
          {% else %}
           black
          {% endif %} 
    - type: state-label
      entity: sensor.nult
      prefix_template: >-
        {{as_timestamp(states('sensor.tide_next2'))|timestamp_custom('%a
        %H:%M',true)}}
      suffix_template: '{{": "+states("sensor.tide_next2_h")|round(1)|string + "m"}}'
      style:
        transform: none
        bottom: 69%
        left: 45%
        color_template: >
          {% if states('sensor.tide_next2_h')|float <=
          states('input_number.tide_low_restriction')|float %}
            red
          {% else %}
           black
          {% endif %} 
    - type: state-label
      entity: sensor.nult
      prefix_template: >-
        {{as_timestamp(states('sensor.tide_next3'))|timestamp_custom('%a
        %H:%M',true)}}
      suffix_template: '{{": "+states("sensor.tide_next3_h")|round(1)|string + "m"}}'
      style:
        transform: none
        bottom: 66%
        left: 45%
        color_template: >
          {% if states('sensor.tide_next3_h')|float <=
          states('input_number.tide_low_restriction')|float %}
            red
          {% else %}
           black
          {% endif %} 
    - type: state-label
      entity: sensor.nult
      prefix_template: >-
        {{as_timestamp(states('sensor.tide_next4'),0)|timestamp_custom('%a
        %H:%M',true)}}
      suffix_template: '{{": "+states("sensor.tide_next4_h")|round(1)|string + "m"}}'
      style:
        transform: none
        bottom: 63%
        left: 45%
        color_template: >
          {% if states('sensor.tide_next4_h')|float <=
          states('input_number.tide_low_restriction')|float %}
            red
          {% else %}
           black
          {% endif %} 
    - type: state-label
      entity: sensor.nult
      prefix_template: >-
        {{+ 'ALB restriction: ' ~
        states('input_number.tide_low_restriction')|float|round(1)~' m' }}
      style:
        transform: none
        bottom: 20%
        left: 45%
        background: orange
        font-weight: bold
    - type: state-label
      entity: input_number.tide_low_restriction
      style:
        transform: none
        bottom: 20%
        right: 0%
        color: '#ffffff00'
    - type: state-label
      entity: sensor.slwrestrictions
      attribute: status
      style:
        transform: none
        bottom: 15%
        left: 45%
        font-weight: bold
    - type: state-label
      entity: sensor.nult
      prefix_template: >-
        {% if states('sensor.slwrestrictions')|count >0 and
        state_attr('sensor.slwrestrictions','1stdurn')!=0 %}
         {{+ as_timestamp(state_attr('sensor.slwrestrictions','1stfrom'))|timestamp_custom('%a
         %H:%M',true) ~ " to " }}
        {% endif %}  
      suffix_template: |-
        {% if states('sensor.slwrestrictions')|count >0  and
        state_attr('sensor.slwrestrictions','1stdurn')!=0 %}
         {{+ as_timestamp(state_attr('sensor.slwrestrictions','1stto'))|timestamp_custom('
         %H:%M',true)}} {{+ state_attr('sensor.slwrestrictions','1stdurn') }}
        {% endif %} 
      style:
        transform: none
        bottom: 12%
        left: 43%
        color: red
        font-weight: bold
        font-style_template: >-
          {% if states('sensor.slwrestrictions')|count >0 and
          state_attr('sensor.slwrestrictions','1stoffset')|float == 0 %}
            null
          {% else %}
            italic
          {% endif %} 
    - type: state-label
      entity: sensor.nult
      prefix_template: |-
        {% if states('sensor.slwrestrictions')|count >1 and
        state_attr('sensor.slwrestrictions','2nddurn')!=0 %}
          {{as_timestamp(state_attr('sensor.slwrestrictions','2ndfrom'))|timestamp_custom('%a
         %H:%M',true)}}  {{ " to :" }}
         {% endif %}  
      suffix_template: |-
        {% if states('sensor.slwrestrictions')|count >1 and
        state_attr('sensor.slwrestrictions','2nddurn')!=0 %}
         {{as_timestamp(state_attr('sensor.slwrestrictions','2ndto'))|timestamp_custom('
         %H:%M',true)}}  {{ state_attr('sensor.slwrestrictions','2nddurn') }}
        {% endif %}  
      style:
        transform: none
        bottom: 9%
        left: 43%
        color: red
        font-weight: bold
        font-style_template: >-
          {% if states('sensor.slwrestrictions')|count >1 and
          state_attr('sensor.slwrestrictions','2ndoffset')|float == 0 %}
            null
          {% else %}
            italic
          {% endif %} 
    - type: state-label
      entity: sensor.nult
      prefix_template: |-
        {% if states('sensor.slwrestrictions')|count >2 %}
         {{as_timestamp(state_attr('sensor.slwrestrictions','3rdfrom'))|timestamp_custom('%a
         %H:%M',true)}}  {{ " to :" }}
         {% endif %}  
      suffix_template: |-
        {% if states('sensor.slwrestrictions')|count >2 and
        state_attr('sensor.slwrestrictions','3rddurn')!=0 %}
         {{as_timestamp(state_attr('sensor.slwrestrictions','3rdto'))|timestamp_custom('
         %H:%M',true)}}  {{ state_attr('sensor.slwrestrictions','3rddurn') }}
        {% endif %}  
      style:
        transform: none
        bottom: 6%
        left: 43%
        color: red
        font-weight: bold
        font-style_template: >-
          {% if states('sensor.slwrestrictions')|count >2 and
          state_attr('sensor.slwrestrictions','3rdoffset')|float == 0 %}
            null
          {% else %}
            italic
          {% endif %} 
    - type: state-label
      entity: sensor.nult
      prefix_template: |-
        {% if states('sensor.slwrestrictions')|count >3 %}
         {{as_timestamp(state_attr('sensor.slwrestrictions','4thfrom'),-3600)|timestamp_custom('%a
         %H:%M',true)}}  {{ " to :" }}
         {% endif %}  
      suffix_template: |-
        {% if states('sensor.slwrestrictions')|count >3 %}
        {% if state_attr('sensor.slwrestrictions','4thto')=="No tide" %}
         future
        {% else %}
         {{as_timestamp(state_attr('sensor.slwrestrictions','4thto'),-3600)|timestamp_custom('
         %H:%M',true)}}
         {% endif %}
        {% endif %} 
      style:
        transform: none
        bottom: 3%
        left: 43%
        color: red
        font-weight: bold
    - type: state-label
      entity: input_boolean.tide_offset_use
      prefix: 'Tidal offset '
      suffix_template: >-
        {{+"
        ("~iif(states("sensor.tide_offset")|float>0,"+","")~(states("sensor.tide_offset")|float
        * 100)|round(0)~"cm)"}}
      style:
        transform: none
        font-size: 80%
        bottom: 0%
        right: 0%
        color: black
    - type: custom:state-switch
      entity: mediaquery
      style:
        transform: none
        left: 7.5%
        bottom: 0%
      states:
        '(min-height: 800px)':
          type: custom:canvas-gauge-card
          entity: sensor.height_now
          style:
            transform: none
            left: 5%
            bottom: 0%
          gauge:
            type: linear-gauge
            width: 100
            height: 490
            minValue: -0.5
            maxValue: 8.5
            majorTicks:
              - '-0.5'
              - '0.0'
              - '0.5'
              - '1.0'
              - '1.5'
              - '2.0'
              - '2.5'
              - '3.0'
              - '3.5'
              - '4.0'
              - '4.5'
              - '5.0'
              - '5.5'
              - '6.0'
              - '6.5'
              - '7.0'
              - '7.5'
              - '8.0'
              - '8.5'
            minorTicks: 5
            strokeTicks: true
            animate: false
            highlights:
              - color: red
                from: -0.5
                to_template: '{{ states("input_number.tide_low_restriction") }}'
              - color: '#dcf2fd'
                from: '{{ states("input_number.tide_low_restriction") }}'
                to_template: '{{ states("sensor.tide_low") }}'
              - color: '#fdf6ccff'
                from_template: '{{ states("sensor.tide_low") }}'
                to_template: '{{ states("sensor.tide_high") }}'
              - color: '#c2e1b7'
                from_template: '{{ states("sensor.tide_high") }}'
                to: 8.5
            highlightsWidth: 20
            colorPlate: '#ffffff00'
            colorBar: '#fdf6ccff'
            colorBarProgress: ' #9fddf9ff'
            colorNeedle: red
            borderShadowWidth: 0
            colorBorderOuter: '#ffffff00'
            colorBorderMiddle: '#ffffff00'
            colorBorderInner: '#ffffff00'
            colorBorderOuterEnd: '#ffffff00'
            colorBorderMiddleEnd: '#ffffff00'
            colorBorderInnerEnd: '#ffffff00'
            borders: false
            needleType: line
            needleWidth: 5
            tickSide: both
            numberSide: left
            needleSide: both
            barStrokeWidth: 0
            barBeginCircle: false
            valueBox: false
        '(min-height: 700px)':
          type: custom:canvas-gauge-card
          entity: sensor.height_now
          style:
            transform: none
            left: 5%
            bottom: 0%
          gauge:
            type: linear-gauge
            width: 120
            height: 600
            minValue: -0.5
            maxValue: 8.5
            majorTicks:
              - '-0.5'
              - '0.0'
              - '0.5'
              - '1.0'
              - '1.5'
              - '2.0'
              - '2.5'
              - '3.0'
              - '3.5'
              - '4.0'
              - '4.5'
              - '5.0'
              - '5.5'
              - '6.0'
              - '6.5'
              - '7.0'
              - '7.5'
              - '8.0'
              - '8.5'
            minorTicks: 5
            strokeTicks: true
            animate: false
            highlights:
              - color: red
                from: -0.5
                to_template: '{{ states("input_number.tide_low_restriction") }}'
              - color: '#dcf2fd'
                from: '{{ states("input_number.tide_low_restriction") }}'
                to_template: '{{ states("sensor.tide_low") }}'
              - color: '#fdf6ccff'
                from_template: '{{ states("sensor.tide_low") }}'
                to_template: '{{ states("sensor.tide_high") }}'
              - color: '#c2e1b7'
                from_template: '{{ states("sensor.tide_high") }}'
                to: 8.5
            highlightsWidth: 20
            colorPlate: '#ffffff00'
            colorBar: '#fdf6ccff'
            colorBarProgress: ' #9fddf9ff'
            colorNeedle: red
            borderShadowWidth: 0
            colorBorderOuter: '#ffffff00'
            colorBorderMiddle: '#ffffff00'
            colorBorderInner: '#ffffff00'
            colorBorderOuterEnd: '#ffffff00'
            colorBorderMiddleEnd: '#ffffff00'
            colorBorderInnerEnd: '#ffffff00'
            borders: false
            needleType: line
            needleWidth: 5
            tickSide: both
            numberSide: left
            needleSide: both
            barStrokeWidth: 0
            barBeginCircle: false
            valueBox: false
        all:
          type: custom:canvas-gauge-card
          entity: sensor.height_now
          style:
            transform: none
            left: 3%
            bottom: 0%
          gauge:
            type: linear-gauge
            width: 80
            height: 380
            minValue: -0.5
            maxValue: 8.5
            majorTicks:
              - '-0.5'
              - '0.0'
              - '0.5'
              - '1.0'
              - '1.5'
              - '2.0'
              - '2.5'
              - '3.0'
              - '3.5'
              - '4.0'
              - '4.5'
              - '5.0'
              - '5.5'
              - '6.0'
              - '6.5'
              - '7.0'
              - '7.5'
              - '8.0'
              - '8.5'
            minorTicks: 5
            strokeTicks: true
            animate: false
            highlights:
              - color: red
                from: -0.5
                to_template: '{{ states("input_number.tide_low_restriction") }}'
              - color: '#dcf2fd'
                from: '{{ states("input_number.tide_low_restriction") }}'
                to_template: '{{ states("sensor.tide_low") }}'
              - color: '#fdf6ccff'
                from_template: '{{ states("sensor.tide_low") }}'
                to_template: '{{ states("sensor.tide_high") }}'
              - color: '#c2e1b7'
                from_template: '{{ states("sensor.tide_high") }}'
                to: 8.5
            highlightsWidth: 20
            colorPlate: '#ffffff00'
            colorBar: '#fdf6ccff'
            colorBarProgress: ' #9fddf9ff'
            colorNeedle: red
            borderShadowWidth: 0
            colorBorderOuter: '#ffffff00'
            colorBorderMiddle: '#ffffff00'
            colorBorderInner: '#ffffff00'
            colorBorderOuterEnd: '#ffffff00'
            colorBorderMiddleEnd: '#ffffff00'
            colorBorderInnerEnd: '#ffffff00'
            borders: false
            needleType: line
            needleWidth: 5
            tickSide: both
            numberSide: left
            needleSide: both
            barStrokeWidth: 0
            barBeginCircle: false
            valueBox: false
    - type: custom:state-switch
      entity: user
      default: default
      style:
        transform: none
        top: 40%
        right: 0%
        width: 60%
      states:
        David Inwood:
          type: picture-elements
          image: /local/images/nullmed.jpg
          elements:
            - type: state-label
              entity: input_number.tide_height_target
              prefix: 'Height threshold : '
              style:
                transform: none
                background-color: '#d6cb94'
                top: 0%
                right: 0%
            - type: state-label
              entity: sensor.nul
              prefix_template: '{{states(''sensor.tide_target_status_next'')}}'
              suffix_template: >-
                {{as_timestamp(states('sensor.tide_target_time_1'))|timestamp_custom('%H:%M',true)}}
              style:
                transform: none
                top: 20%
                right: 0%
            - type: state-label
              entity: sensor.nul
              prefix_template: '{{states("sensor.tide_target_status_next_after")}}'
              suffix_template: >-
                {{as_timestamp(states('sensor.tide_target_time_2'))|timestamp_custom('%H:%M',true)}}
              style:
                transform: none
                top: 35%
                right: 0%
            - type: state-label
              entity: sensor.nul
              prefix_template: '{{states("sensor.tide_target_status_tomorrow1")}}'
              suffix_template: >-
                {{as_timestamp(states('sensor.tide_target_time_tomorrow1'))|timestamp_custom('%H:%M',true)}}
              style:
                transform: none
                top: 50%
                right: 0%
            - type: state-label
              entity: sensor.nul
              prefix_template: '{{ states("sensor.tide_target_status_tomorrow2")}}'
              suffix_template: >-
                {{as_timestamp(states('sensor.tide_target_time_tomorrow2'))|timestamp_custom('%H:%M',true)}}
              style:
                transform: none
                top: 65%
                right: 0%
        RNLI:
          type: markdown
          content: |
            Welcome RNLI
        default:
          type: markdown
          content: |
            ## Unknown user
1 Like