@johga could you please share the code behind this particular setup?
1 Like
Here’s the YAML for the card and a template using decluttering card. I have some cleanup to do here so disregard any unnecessary code. 
entities:
- cards:
- cards:
- entity: input_boolean.toggle_lovelace_system
label: System
show_icon: false
show_label: true
show_name: false
template: bct-header
type: 'custom:button-card'
type: horizontal-stack
- card:
cards:
- cards:
- label: Home Assistant
template: bct-topic-horiontal
type: 'custom:button-card'
type: horizontal-stack
- cards:
- entity: sensor.temperature
template: dct-bar-card-up
type: 'custom:decluttering-card'
variables:
- name: Temp
- entity: sensor.cpu_temperature
- unit: C
- icon: 'mdi:thermometer'
- entity: sensor.temperature
template: dct-bar-card-up
type: 'custom:decluttering-card'
variables:
- name: Minne
- entity: sensor.memory_use_percent
- unit: '%'
- icon: 'mdi:memory'
- entity: sensor.temperature
template: dct-bar-card-up
type: 'custom:decluttering-card'
variables:
- name: CPU
- entity: sensor.processor_use
- unit: '%'
- icon: 'mdi:cpu-64-bit'
- entity: sensor.temperature
template: dct-bar-card-up
type: 'custom:decluttering-card'
variables:
- name: Disk
- entity: sensor.disk_use_percent_home
- unit: '%'
- icon: 'mdi:micro-sd'
style: |
ha-card {
box-shadow: none;
margin: 20px
}
.card-content {
padding: 30px;
background: none;
}
type: horizontal-stack
- cards:
- entity: sensor.ha_uptime
icon: 'mdi:home'
name: HA Uptime
template: bct-panel
type: 'custom:button-card'
- entity: sensor.rpi_uptime
name: PI uptime
template: bct-panel
type: 'custom:button-card'
- entity: sensor.hass_db_size
name: db size
template: bct-panel
type: 'custom:button-card'
- entity: sensor.snapshot_backup
icon: 'mdi:backup-restore'
name: Backup
template: bct-panel
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- label: Nätverk
template: bct-topic-horiontal
type: 'custom:button-card'
type: horizontal-stack
- cards:
- entity: sensor.temperature
template: dct-bar-card-up
type: 'custom:decluttering-card'
variables:
- name: download
- entity: sensor.speedtest_download
- unit: Mb/s
- icon: 'mdi:download'
- entity: sensor.temperature
template: dct-bar-card-up
type: 'custom:decluttering-card'
variables:
- name: upload
- entity: sensor.speedtest_upload
- unit: Mb/s
- icon: 'mdi:upload'
- entity: sensor.temperature
template: dct-bar-card-up
type: 'custom:decluttering-card'
variables:
- name: Ping
- entity: sensor.speedtest_ping
- unit: '%'
- icon: 'mdi:code-tags'
- entity: sensor.temperature
template: dct-bar-card-up
type: 'custom:decluttering-card'
variables:
- name: Down
- entity: sensor.asuswrt_download
- unit: '%'
- icon: 'mdi:arrow-down-bold-box-outline'
type: horizontal-stack
- cards:
- label: Miljö
template: bct-topic-horiontal
type: 'custom:button-card'
type: horizontal-stack
- cards:
- entity: sensor.count_automations
icon: 'mdi:clipboard-play-outline'
name: Automations
template: bct-panel
type: 'custom:button-card'
- entity: sensor.count_scripts
icon: 'mdi:script-text'
name: Scripts
template: bct-panel
type: 'custom:button-card'
- entity: sensor.count_sensors
icon: 'mdi:scale-balance'
name: Sensors
template: bct-panel
type: 'custom:button-card'
- entity: sensor.count_input_booleans
icon: 'mdi:toggle-switch-outline'
name: input booleans
template: bct-panel
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- entity: sensor.count_switches
icon: 'mdi:toggle-switch'
name: Switches
template: bct-panel
type: 'custom:button-card'
- entity: sensor.count_device_trackers
icon: 'mdi:cellphone-link'
name: Devices
template: bct-panel
type: 'custom:button-card'
- entity: sensor.count_lights
icon: 'mdi:lightbulb'
name: lights
template: bct-panel
type: 'custom:button-card'
- entity: sensor.count_lights_on
icon: 'mdi:lightbulb-on'
name: Lights
template: bct-panel
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
type: 'custom:vertical-stack-in-card'
conditions:
- entity: input_boolean.toggle_lovelace_system
state: 'on'
type: conditional
type: 'custom:vertical-stack-in-card'
style: |
ha-card {
box-shadow: none;
background: none;
margin: 20px
}
.card-content {
padding: 10px;
}
type: entities
Declutter card template:
dct-bar-card-up:
card:
align: bottom
animation: 'on'
bar_style:
border-radius: 10px
card_style:
box-shadow: 0 0
color: var(--primary-color)
columns: 1
decimal: 1
direction: up
entity: '[[entity]]'
height: 100px
icon: '[[icon]]'
icon_position: inside
icon_style:
color: white
decoration: none
height: 30%
width: 30%
indicator: 'off'
indicator_style:
border-radius: 10px
padding: 10px 10px 10px 10px
severity:
- color: var(--graph-severity-low-color)
value: 5
- color: var(--graph-severity-normal-color)
value: 33
- color: var(--graph-severity-warning-color)
value: 66
- color: var(--graph-severity-critical-color)
value: 100
title: '[[name]]'
title_position: inside
title_style:
color: white
font-size: 12px
font-weight: normal
padding: 15px
text-decoration: none
text-shadow: 0px 0px 0px black;
text-transform: lowercase
type: 'custom:bar-card'
value_style:
color: white
font-size: 12px
font-weight: normal
text-decoration: none
text-shadow: 0px 0px 0px black;
width: 100%
Button Card Template for the Header. The sub-category works the same way with changes to some paramters. The state segement is not used in Settings view, but used in other cards where I display motion detection in some areas. Se picture below (eye icon changes color on motion).
bct-header:
hold_action:
action: more-info
show_icon: false
show_label: false
show_name: false
show_state: false
size: 20px
state:
- styles:
icon:
- color: white
- filter: opacity(20%)
value: 'off'
- styles:
icon:
- color: white
- filter: opacity(20%)
value: not_home
- styles:
icon:
- color: white
- filter: opacity(100%)
value: 'on'
- styles:
icon:
- color: white
- filter: opacity(20%)
value: No new messages
styles:
card:
- font-family: 'Raleway,sans-serif'
- justify-self: start
- height: 80px
- background-color: var(--app-header-background-color)
- border-radius: 0%
- margin: 0px 0px 0px 0px
icon:
- color: white
- justify-self: start
- padding-right: 30px
label:
- justify-self: center
- color: white
state:
- color: white
- filter: opacity(20%)
- justify-self: end
- padding: 15px
@gregtd How did you find these OID`s? Is there a program you used? Could you please explain how you did it?
Nice! Would you mind sharing the config? thanks
Fixed, had to edit the canvas-gauge-card.js file
Hello
I love the way you have set up the gauges and I am trying the same. Card Mod is working on other cards, but I cannot get it to be transparent on the gauge or any colour to be honest. Any ideas please? I basically used your code and put in my sensor but no joy
- type: 'custom:canvas-gauge-card'
style: |
ha-card {
background-color: transparent; border: none; box-shadow: none;
}
entity: sensor.rennas_system_temperature
card_height: 210
shadow_height: 12%
font_size: 1em
gauge:
type: radial-gauge
title: WAN Inn
width: 200
height: 200
minValue: 0
maxValue: 100
startAngle: 40
ticksAngle: 280
valueBox: true
units: Mb/s
majorTicks:
- '0'
- '10'
- '20'
- '30'
- '40'
- '50'
- '60'
- '70'
- '80'
- '90'
- '100'
minorTicks: 2
strokeTicks: true
highlights:
- from: 70
to: 100
color: 'rgba(200, 50, 50, .5)'
borders: false
colorPlate: transparent
colorNeedle: blue
colorNeedleEnd: blue
colorBorderOuter: blue
colorBorderInner: blue
colorNeedleCircleOuter: blue
colorNeedleCircleOuterEnd: blue
colorNeedleCircleInner: blue
colorNeedleCircleInnerEnd: blue
needleType: arrow
needleShadow: false
needleWidth: 2
needleCircleSize: 7
needleCircleOuter: false
needleCircleInner: true
replacing line 70 in canvas-gauge-card.js: and deleting the canvas-gauge-card.js.gz
background-color: white !important;
with
background-color: var( --ha-card-background, var(--paper-card-background-color, white) ); !important;
2 Likes
I tried your code and wifi signal shows no values for me. Is there any additional documentation for iwconfig? Does this work in Hassio?
3 Likes
Hi bud, I had to edit the card itself, as it has a style of ‘background-color: white !important;’
So I changed it like this (but a bad idea as an update of the card will reverse this):
<style>
:host {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.0), 0 1px 5px 0 rgba(0, 0, 0, 0.0), 0 3px 1px -2px rgba(0, 0, 0, 0.0);
display: block !important;
border-radius: 2px !important;
transition: all 0.30s ease-out !important;
background-color: transparent !important;
}
Normally, I would assume card-mod should handle this using
style |
:host {
background-color: transparent;
}
But for some reason me neither can get it to work.
Perhaps @thomasloven who’s the genius behind card-mod could give us a helping hand…
Thomas; if you read this, it is about the ‘canvas-gauge-card’
1 Like
Could you please share the code for the RPi system monitor?
Could you please share the code for your bars, would like to monitor my nas the same way
sure
cards:
- cards:
- entities:
- sensor.rpi3cpuusage
hours_to_show: 24
line_color: '#2980b9'
line_width: 2
name: CPU
type: 'custom:mini-graph-card'
- entities:
- sensor.rpi3temperature
hours_to_show: 24
line_color: '#2980b9'
line_width: 2
name: Temp
type: 'custom:mini-graph-card'
type: horizontal-stack
- align: split
entity: sensor.rpi3diskuse
max: 22
severity:
- color: '#ff0000'
value: 5
- color: '#00ba6a'
value: 15
show_icon: true
title: HDD
title_position: inside
type: 'custom:bar-card'
- align: split
entity: sensor.rpi3extmedia_use
max: 489
severity:
- color: '#ff0000'
value: 15
- color: '#ff8000'
value: 40
show_icon: true
title: ExtHDD1
title_position: inside
type: 'custom:bar-card'
- align: split
entity: sensor.rpi3extdata_use
max: 444
severity:
- color: '#ff8000'
value: 40
- color: '#40bf40'
value: 60
show_icon: true
title: ExtHDD2
title_position: inside
type: 'custom:bar-card'
- align: split
entity: sensor.rpi3memoryuse
show_icon: true
title: RAM
title_position: inside
type: 'custom:bar-card'
- entities:
- sensor.rpi3lastboot
- sensor.rpi3powerstatus
type: entities
title: RPI3 System Monitor
type: 'custom:vertical-stack-in-card'
2 Likes
@poudenes Would you mind sharing how you get the information for TP-Link Deco M5? As far as I can tell these routers do not support SNMP…
