##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:
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