Hi,
First my best wishes for 2023!
I tried to customize the sake12 dashboard with environment cards.
Everything is working fine, except my sensor data is not visible!
My data from my entities are there if I click on one of the circles!
Any idea what is wrong?
#
# View : view-sake12-ani-m3
# Project : Home Assistant / Swiss Army Knife custom card.
# Repository: https://github.com/AmoebeLabs/swiss-army-knife-card
#
# Author : Mars @ AmoebeLabs.com
#
# License : CC BY-SA, https://creativecommons.org/licenses/by/4.0/
#
# -----
# Description:
# SAK Example #12. Some wide cards and some animated circles!!!!!!!
#
# Refs:
#
################################################################################
title: SAKE12
path: sake12
panel: false
cards:
#-------------------------------------------------------------------------------
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:swiss-army-knife-card'
entities:
- entity: sensor.u_s_air_quality_index
name: 'Glabbeek'
- entity: sensor.u_s_air_pollution_level
- entity: sensor.u_s_air_quality_index
secondary_info: last_changed
format: relative
# Define aspect ratio
aspectratio: 6/1
layout:
styles:
card:
toolsets:
toolsets:
# ================================================================
- toolset: line1
position:
cx: 200
cy: 50
tools:
# ------------------------------------------------------------
- type: line
position:
cx: 50
cy: 50
orientation: vertical
length: 50
styling:
line:
fill: var(--primary-text-color)
opacity: 0.5
# ================================================================
- toolset: line2
position:
cx: 400
cy: 50
tools:
# ------------------------------------------------------------
- type: line
position:
cx: 50
cy: 50
orientation: vertical
length: 50
styling:
line:
fill: var(--primary-text-color)
opacity: 0.5
# ================================================================
- toolset: colomn-icon
position:
cx: 30
cy: 50
tools:
# ------------------------------------------------------------
- type: icon
position:
cx: 50
cy: 50
align: center
icon_size: 30
entity_index: 0
- type: circle
position:
cx: 50
cy: 50
radius: 22
styles:
circle:
fill: none
stroke: var(--primary-text-color)
stroke-width: 3em
opacity: 1
- toolset: colomn-name
position:
cx: 120
cy: 50
tools:
# ------------------------------------------------------------
- type: name
position:
cx: 50
cy: 50
entity_index: 0
styles:
name:
text-anchor: middle
font-size: 20em
font-weight: 700
# ------------------------------------------------------------
- type: state
position:
cx: 50
cy: 70
entity_index: 2
show:
uom: none
styles:
state:
text-anchor: middle
font-size: 10em
font-weight: 700
- toolset: colomn-state
position:
cx: 300
cy: 50
tools:
# ------------------------------------------------------------
- type: icon
position:
cx: 25
cy: 25
align: end
icon_size: 30
entity_index: 1
# ------------------------------------------------------------
- type: state
position:
cx: 50
cy: 25
entity_index: 0
styles:
state:
text-anchor: start
font-size: 25em
font-weight: 700
fill: var(--primary-text-color)
uom:
fill: var(--primary-text-color)
font-weight: 700
# ------------------------------------------------------------
- type: 'segarc'
id: 0
position:
cx: 50
cy: 70
start_angle: 190
end_angle: 170
width: 8
radius_x: 405 # 20 degrees = 1/9 = 45*9 = 405
radius_y: 1
entity_index: 0
scale:
min: 0
max: 300
width: 6
offset: 12
show:
scale: true
style: 'colorstops'
segments:
colorstops:
gap: 0.1
colors:
0: '#A8E05F'
51: '#FDD74B'
101: '#FE9B57'
151: '#FE6A69'
201: '#A97ABC'
301: '#A87383'
styles:
foreground:
fill: darkgrey
background:
fill: var(--theme-sys-elevation-surface-neutral5)
- toolset: colomn-history
position:
cx: 500
cy: 50
tools:
# ------------------------------------------------------------
- type: text
position:
orientation: vertical
cx: 50
cy: 20
text: "Last 24 hours"
styles:
text:
text-anchor: middle
font-size: 15em
font-weight: 700
# ------------------------------------------------------------
- type: bar
id: 1
entity_index: 0
position:
orientation: vertical
cx: 50
cy: 60
width: 150
height: 40
margin: 1
hours: 24
barhours: 1
show:
style: 'colorstops'
colorstops:
fill: true
colors:
0: '#A8E05F'
51: '#FDD74B'
101: '#FE9B57'
151: '#FE6A69'
201: '#A97ABC'
301: '#A87383'
styles:
bar:
stroke-linecap: square
# ==========================================================================
- type: horizontal-stack
cards:
#
# Indoor Environment: Woonkamer
#
########################################################################
- type: 'custom:swiss-army-knife-card'
entities:
- entity: sensor.woonkamer
name: 'Woonkamer'
icon: mdi:sofa
decimals: 1
- entity: sensor.netatmo_kerkstraat_10_woonkamer_humidity
decimals: 0
- entity: sensor.netatmo_kerkstraat_10_woonkamer_co2
decimals: 0
- entity: sensor.netatmo_kerkstraat_10_woonkamer_noise
decimals: 0
- entity: sensor.bathroom_2f_iaq_linkquality
decimals: 0
- entity: sensor.woonkamer
secondary_info: last_changed
format: relative
# Define aspect ratio
aspectratio: 6/1
layout:
styles:
card:
toolsets:
toolsets:
# ================================================================
- toolset: line1
position:
cx: 200
cy: 50
tools:
# ------------------------------------------------------------
- type: line
position:
cx: 50
cy: 50
orientation: vertical
length: 50
styling:
line:
fill: var(--primary-text-color)
opacity: 0.5
# ================================================================
- toolset: line2
position:
cx: 500
cy: 50
tools:
# ------------------------------------------------------------
- type: line
position:
cx: 50
cy: 50
orientation: vertical
length: 50
styling:
line:
fill: var(--primary-text-color)
opacity: 0.5
# ================================================================
- toolset: colomn-icon
position:
cx: 30
cy: 50
tools:
# ------------------------------------------------------------
- type: icon
position:
cx: 50
cy: 50
align: center
icon_size: 30
entity_index: 0
# ------------------------------------------------------------
- type: circle
position:
cx: 50
cy: 50
radius: 22
styles:
circle:
fill: none
stroke: var(--primary-text-color)
stroke-width: 3em
opacity: 1
- toolset: colomn-name
position:
cx: 120
cy: 50
tools:
# ------------------------------------------------------------
- type: name
position:
cx: 50
cy: 50
entity_index: 0
styles:
name:
text-anchor: middle
font-size: 20em
font-weight: 700
opacity: 1
# ------------------------------------------------------------
- type: state
position:
cx: 50
cy: 70
entity_index: 5
show:
uom: none
styles:
state:
text-anchor: middle
font-size: 10em
font-weight: 700
# ================================================================
- toolset: colomn-temperature
position:
cx: 260
cy: 50
tools:
# ------------------------------------------------------------
- type: icon
icon: mdi:thermometer
position:
cx: 50
cy: 30
align: center
icon_size: 25
entity_index: 5
# ------------------------------------------------------------
- type: state
position:
cx: 50
cy: 55
entity_index: 0
show:
uom: bottom
styles:
state:
text-anchor: middle
font-size: 20em
font-weight: 700
fill: var(--primary-text-color)
uom:
fill: var(--primary-text-color)
font-weight: 700
# ------------------------------------------------------------
- type: 'segarc'
id: 0
position:
cx: 50
cy: 50
start_angle: 0
end_angle: 360
width: 6
radius: 40
entity_index: 0
scale:
min: 15
max: 25
width: 6
offset: 12
show:
scale: false
style: 'colorlist'
segments:
colorlist:
gap: 1
colors:
- var(--theme-sys-palette-primary50)
styles:
foreground:
fill: darkgrey
background:
fill: var(--theme-sys-elevation-surface-neutral4)
opacity: 1
# ================================================================
- toolset: colomn-humidity
position:
cx: 355
cy: 50
tools:
# ------------------------------------------------------------
- type: icon
position:
cx: 50
cy: 30
align: center
icon_size: 25
entity_index: 1
# ------------------------------------------------------------
- type: state
position:
cx: 50
cy: 55
entity_index: 1
show:
uom: bottom
styles:
state:
text-anchor: middle
font-size: 20em
font-weight: 800
fill: var(--primary-text-color)
uom:
fill: var(--primary-text-color)
font-weight: 800
# ------------------------------------------------------------
- type: 'segarc'
id: 0
position:
cx: 50
cy: 50
start_angle: 0
end_angle: 360
width: 6
radius: 40
entity_index: 1
scale:
min: 0
max: 100
width: 4
offset: 12
show:
scale: false
style: 'colorlist'
segments:
colorlist:
gap: 1
colors:
- var(--theme-sys-palette-primary45)
styles:
foreground:
fill: darkgrey
background:
fill: var(--theme-sys-elevation-surface-neutral4)
opacity: 1
# ================================================================
- toolset: colomn-co2
position:
cx: 450
cy: 50
tools:
# ------------------------------------------------------------
- type: icon
icon: mdi:molecule-co2
position:
cx: 50
cy: 30
align: center
icon_size: 25
entity_index: 2
# ------------------------------------------------------------
- type: state
position:
cx: 50
cy: 55
entity_index: 2
show:
uom: bottom
styles:
state:
text-anchor: middle
font-size: 20em
font-weight: 700
fill: var(--primary-text-color)
uom:
fill: var(--primary-text-color)
font-weight: 700
# ------------------------------------------------------------
- type: 'segarc'
id: 0
position:
cx: 50
cy: 50
start_angle: 0
end_angle: 360
width: 6
radius: 40
entity_index: 2
scale:
min: 300
max: 2500
width: 6
offset: 12
show:
scale: false
style: 'colorlist'
segments:
colorlist:
gap: 1
colors:
- var(--theme-sys-palette-primary40)
styles:
foreground:
fill: darkgrey
background:
fill: var(--theme-sys-elevation-surface-neutral4)
opacity: 1
# ================================================================
- toolset: colomn-noise
position:
cx: 540
cy: 50
tools:
# ------------------------------------------------------------
- type: icon
icon: mdi:ear-hearing
position:
cx: 30
cy: 30
align: right
icon_size: 25
entity_index: 3
# ------------------------------------------------------------
- type: state
position:
cx: 70
cy: 30
entity_index: 3
show:
uom: none
styles:
state:
text-anchor: middle
font-size: 18em
font-weight: 700
fill: var(--primary-text-color)
uom:
fill: var(--primary-text-color)
font-weight: 700
# ------------------------------------------------------------
- type: 'segarc'
id: 0
position:
cx: 70
cy: 30
start_angle: 0
end_angle: 360
width: 3
radius: 18
entity_index: 3
scale:
min: 0
max: 100
width: 6
offset: 12
show:
scale: false
style: 'colorlist'
segments:
colorlist:
gap: 1
colors:
- var(--theme-sys-palette-tertiary45)
styles:
foreground:
fill: darkgrey
background:
fill: var(--theme-sys-elevation-surface-neutral4)
opacity: 1
# ================================================================
- toolset: colomn-linkquality
position:
cx: 540
cy: 50
tools:
# ------------------------------------------------------------
- type: icon
position:
cx: 30
cy: 70
align: right
icon_size: 25
entity_index: 4
# ------------------------------------------------------------
- type: state
position:
cx: 70
cy: 70
entity_index: 4
show:
uom: none
styles:
state:
text-anchor: middle
font-size: 18em
font-weight: 700
fill: var(--primary-text-color)
uom:
fill: var(--primary-text-color)
font-weight: 700
# ------------------------------------------------------------
- type: 'segarc'
id: 0
position:
cx: 70
cy: 70
start_angle: 0
end_angle: 360
width: 3
radius: 18
entity_index: 4
scale:
min: 0
max: 100
width: 6
offset: 12
show:
scale: false
style: 'colorlist'
segments:
colorlist:
gap: 1
colors:
- var(--theme-sys-palette-tertiary45)
styles:
foreground:
fill: darkgrey
background:
fill: var(--theme-sys-elevation-surface-neutral4)
opacity: 1
Regards,
Jurgen