@Mariusthvdb Thank you! I’ll give it a try.
Hi, here is mine for SysMon, where I’ve split them in two views - one for HA and another for the crucial HW on my LAN. I Build my HA in the way that it will look pretty on the tablet mounted on the wall in the living room, without scrolling.
PS; just realized I forgot to make the needles blue on my speedometer for internet 
9 Likes
Wow!! Beautiful!
Can you share your lovelace conf?
1 Like
nice, i’m also interested, if possible, in sharing the “lovelace conf” but in particular i’m curious about how you configured the “custom: canvas-gauge-card” because i’m weeks of crazy wind i couldn’t make it transparent the background of the quadrant always remains white to me, I see that from your background the background is gray as in the background. I’d be happy to see that part of the code.
1 Like
Awesome stuff. Also very interested in the yaml for this if you’d be willing to share.
1 Like
Looks great…
How do you have the CPU and GPU side by side in the same card?
Cheers
Hi bud,
Use colorPlate: transparent
This is the entire card:
- type: custom:canvas-gauge-card
<<: *card_mod_transparent
entity: sensor.cisco_rv320_internet_in_mbps
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 # Skrur på digital verdi i bunnen
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
borders: false
needleType: "arrow"
needleShadow: false
needleWidth: 2
needleCircleSize: 7
needleCircleOuter: false
needleCircleInner: true
2 Likes
Hi bud,
Here the are the two pages:
#############################################################################################################################################
# #
# VIEW 3 - SYSTEM #
# #
#############################################################################################################################################
- id: 3
name: HASSIO
icon: mdi:home-assistant
cards:
#################################################################
# #
# Rad 1 #
# #
#################################################################
- type: vertical-stack
cards:
- <<: *cb_header
name: Internett
- <<: *cb_spacer
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
<<: *card_mod_transparent
entity: device_tracker.ping_internett
show_state: false
show_name: false
show_label: false
styles:
card:
- height: 90px
- width: 90px
- color: '#639cf9'
icon:
- width: 90px
- height: 90px
state:
- value: "not_home"
icon: mdi:earth
styles:
card:
- animation: blink 2s ease infinite
icon:
- color: red
- operator: default
color: green
icon: mdi:earth
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
color_type: blank-card
- type: custom:mini-graph-card
<<: *card_mod_transparent
show_header_toggle: false
entities:
- entity: sensor.speedtest_ping
name: PING
height: 50
line_width: 2
font_size: 70
hours_to_show: 168
points_per_hour: 1
show:
extrema: true
fill: true
color_thresholds:
- value: 0
color: "#FFFF00"
- value: 40
color: "#3498db"
- <<: *cb_spacer
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
<<: *card_mod_transparent
show_header_toggle: false
entities:
- entity: sensor.speedtest_download
name: NEDLASTING
height: 50
line_width: 2
font_size: 70
hours_to_show: 168
points_per_hour: 1
show:
extrema: true
fill: true
color_thresholds:
- value: 0
color: "#FFFF00"
- value: 40
color: "#3498db"
- type: custom:mini-graph-card
<<: *card_mod_transparent
show_header_toggle: false
entities:
- entity: sensor.speedtest_upload
name: OPPLASTING
height: 50
line_width: 2
font_size: 70
hours_to_show: 168
points_per_hour: 1
show:
extrema: true
fill: true
color_thresholds:
- value: 0
color: "#FFFF00"
- value: 40
color: "#3498db"
#################################################################
# #
# Rad 2 #
# #
#################################################################
- <<: *cb_header
name: Hass.io
- type: vertical-stack
cards:
- type: entities
<<: *card_mod_transparent
show_header_toggle: false
style: |
ha-card {
color: #639cf9
}
entities:
- entity: sensor.linux_versjon
name: Ubuntu versjon
icon: mdi:ubuntu
- entity: sensor.installert_versjon
name: Hassio gjeldende versjon
- entity: sensor.ny_versjon
name: Hassio ny versjon tilgjengelig
style: |
:host {
color: {% if is_state('binary_sensor.updater', 'on') %} #fbcd41 {% endif %};
--paper-item-icon-color: {% if is_state('binary_sensor.updater', 'on') %} #fbcd41 {% endif %};
}
icon: mdi:home-assistant
- entity: sensor.potential_breaking_changes
- entity: sensor.hacs
name: HACS
- type: divider
#################################################################
# #
# Rad 3 #
# #
#################################################################
- type: vertical-stack
cards:
- <<: *cb_header
name: Automatisjoner
- type: entities
<<: *card_mod_transparent
style: |
:host {
--primary-text-color: #639cf9
}
show_header_toggle: false
entities:
- entity: automation.01_daglig_backup_via_hassio_backup
name: Ta daglig backup til NAS
- entity: automation.02_sett_theme_til_midnight
name: Sett Theme til Midnight ved oppstart
- entity: automation.03_send_melding_om_device_er_offline
name: Send melding til Notify når device er offline
- entity: automation.04_low_lux_warning
name: TEST - Utfør noe når det er lav LUX styrke
- entity: automation.05_high_lux_warning
name: TEST - Utfør noe når det er høy LUX styrke
- entity: automation.06_timer_test_motion_delay_venter_30_minutter
name: TEST - Vent 30 minutter etter at Motion er registrert
- entity: automation.07_delay_motion_stue_for_en_action
name: TEST - Delay Motion for en handling
- entity: automation.08_oppdater_openuv_pr_time_mellom_solopp_og_nedgang
name: Oppdater OpenUV pr time mellom solopp- og nedgang
- entity: automation.09_send_melding_om_motion_hik_kontor
name: Send leding til Notify ved bevegelse fra HIK
- entity: automation.10_skru_pa_kontorlys_ved_bevegelse
name: Skru på kontorlys ved bevelgelse fra Multisensor
- entity: automation.11_skru_av_kontorlys_ved_ingen_bevegelse_i_10_minutter
name: Skru av kontorlys ved ingen bevegelse i 10 minutter
- entity: automation.12_skru_pa_nattlys_i_stue
name: Skru på nattlys i stue mellom 01.30 og 07.00
- entity: automation.13_skru_av_nattlys_i_stue_etter_15_minutter
name: Skru av nattlys i stue ved ingen bevegelse i 15 minutter
#############################################################################################################################################
# #
# VIEW 6 - HARDWARE #
# #
#############################################################################################################################################
- id: 6
name: HARDWARE
icon: mdi:desktop-tower-monitor
cards:
#################################################################
# #
# Rad 1 #
# #
#################################################################
- type: vertical-stack
cards:
- <<: *cb_header
name: Cisco RV320 Router
- type: horizontal-stack
cards:
- type: custom:canvas-gauge-card
<<: *card_mod_transparent
entity: sensor.cisco_rv320_internet_in_mbps
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 # Skrur på digital verdi i bunnen
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
borders: false
needleType: "arrow"
needleShadow: false
needleWidth: 2
needleCircleSize: 7
needleCircleOuter: false
needleCircleInner: true
- type: custom:canvas-gauge-card
<<: *card_mod_transparent
entity: sensor.cisco_rv320_internet_out_mbps
card_height: 210
shadow_height: 12%
font_size: 1em
gauge:
type: "radial-gauge"
title: WAN Ut
width: 200
height: 200
minValue: 0
maxValue: 100
startAngle: 40
ticksAngle: 280
valueBox: true # Skrur på digital verdi i bunnen
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
borders: false
needleType: "arrow"
needleShadow: false
needleWidth: 2
needleCircleSize: 7
needleCircleOuter: false
needleCircleInner: true
- <<: *cb_spacer
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
#<<: *card_mod_transparent
show_header_toggle: false
icon: mdi:download-network-outline
entities:
- entity: sensor.cisco_rv320_internet_in_mbps
name: Nedlasting siste 24t
height: 50
line_width: 2
font_size: 70
hours_to_show: 24
points_per_hour: 1
show:
state: false
extrema: true
fill: true
color_thresholds:
- value: 0
color: '#07f51b'
- value: 40
color: '#f5d607'
- value: 70
color: '#f50707'
- type: custom:mini-graph-card
<<: *card_mod_transparent
show_header_toggle: false
icon: mdi:upload-network-outline
entities:
- entity: sensor.cisco_rv320_internet_out_mbps
name: Opplasting siste 24t
height: 50
line_width: 2
font_size: 70
hours_to_show: 24
points_per_hour: 1
show:
state: false
extrema: true
fill: true
color_thresholds:
- value: 0
color: '#07f51b'
- value: 40
color: '#f5d607'
- value: 70
color: '#f50707'
- type: entities
<<: *card_mod_transparent
show_header_toggle: false
style: |
ha-card {
color: #639cf9
}
entities:
- entity: sensor.cisco_rv320_model
name: Cisco Firewall
icon: mdi:shield-home-outline
- entity: sensor.cisco_rv320_firmware
name: Firmware versjon
icon: mdi:cellphone-settings-variant
- entity: sensor.cisco_rv320_revision
name: Model revisjon
icon: mdi:unfold-more-vertical
- entity: sensor.cisco_rv320_serial
name: 'Serie #'
icon: mdi:numeric
- entity: sensor.cisco_rv320_uptime
name: Sist restartet
icon: mdi:counter
#################################################################
# #
# Rad 2 #
# #
#################################################################
- type: vertical-stack
cards:
- <<: *cb_header
name: Intel NUC i7
- type: entities
<<: *card_mod_transparent
show_header_toggle: false
entities:
- entity: sensor.nuc_system
name: Intel System
icon: mdi:cpu-64-bit
- entity: sensor.nuc_hovedkort
name: Hovedkort
icon: mdi:unfold-more-vertical
- entity: sensor.nuc_bios_versjon
name: BIOS versjon
icon: mdi:cellphone-settings-variant
- entity: sensor.nuc_cpu_temperature
name: CPU Temperatur
- entity: sensor.processor_use
name: CPU bruk i %
icon: mdi:memory
- entity: sensor.memory_use_percent
name: Minnebruk i %
- entity: sensor.memory_use
name: Minnebruk
- entity: sensor.memory_free
name: Minne ledig
#- entity: sensor.swap_use_percent
# name: Swap i %
- entity: sensor.disk_use_percent_home
name: Diskbruk i %
#- entity: sensor.disk_use_home
# name: Diskbruk
#- entity: sensor.disk_free_home
# name: Disk ledig
- entity: sensor.mariadb_database
name: MariaDB Database
icon: mdi:database
- entity: sensor.last_boot
name: Hassio sist restartet
- entity: sensor.ipv4_address_eno1
name: Lokal IP
- entity: sensor.offentlig_ip
name: Public IP
#################################################################
# #
# Rad 3 #
# #
#################################################################
- type: vertical-stack
cards:
- <<: *cb_header
name: NAS 12 Tb
- <<: *cb_spacer
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:canvas-gauge-card
entity: sensor.nas_volume_used
card_height: 120
gauge:
type: "linear-gauge"
title: Diskbruk %
#Units: %
width: 400
height: 140
minValue: 0
maxValue: 100
startAngle: 90
ticksAngle: 180
data-number-side: left
data-needle-side: left
majorTicks: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
minorTicks: 0
strokeTicks: true
highlights: [{"from": 0, "to": 100,"color": "rgba(200, 50, 50, .0)"}]
colorPlate: transparent
colorBar: transparent
colorBarProgress: green
colorNeedle: transparent
borders: false
barBeginCircle: 0
needleSide: left
animationDuration: 1500
- <<: *cb_spacer
- <<: *cb_spacer
- type: horizontal-stack
cards:
- type: custom:canvas-gauge-card
entity: sensor.nas_temperatur
card_height: 120
gauge:
type: "radial-gauge"
title: Temperatur °C
width: 200
height: 200
minValue: 0
maxValue: 100
startAngle: 90
ticksAngle: 180
valueBox: false
majorTicks: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
minorTicks: 2
strokeTicks: true
#highlights: [{"from": 0, "to": 50, "color": "rgba(13, 160, 53, .75)" }, {"from": 50, "to": 70, "color": "rgba(244, 206, 102, .75)" }, {"from": 70, "to": 100, "color": "rgba(200, 50, 50, .75)" }]
highlights: [{"from": 70, "to": 100, "color": "rgba(200, 50, 50, .75)" }]
colorPlate: transparent
colorNeedle: blue
colorNeedleEnd: blue
colorBorderOuter: blue
colorBorderInner: blue
colorNeedleCircleOuter: blue
colorNeedleCircleOuterEnd: blue
colorNeedleCircleInner: blue
colorNeedleCircleInnerEnd: blue
borders: false
needleType: "arrow"
needleShadow: false
needleWidth: 2
needleCircleSize: 7
needleCircleOuter: false
needleCircleInner: true
animationDuration: 1500
- type: custom:canvas-gauge-card
entity: sensor.nas_vifte_rpm
card_height: 120
gauge:
type: "radial-gauge"
title: Vifte RPM
width: 200
height: 200
minValue: 0
maxValue: 2000
startAngle: 90
ticksAngle: 180
valueBox: false
majorTicks: ["0", "200", "400", "600", "800", "1000", "1200", "1400", "1600", "1800", "2000"]
minorTicks: 2
strokeTicks: true
#highlights: [{"from": 0, "to": 1000,"color": "rgba(13, 160, 53, .75)"}, {"from": 1000, "to": 1400,"color": "rgba(244, 206, 102, .75)"}, {"from": 1400, "to": 2000,"color": "rgba(200, 50, 50, .75)"}]
highlights: [{"from": 1400, "to": 2000,"color": "rgba(200, 50, 50, .75)"}]
colorPlate: transparent
colorNeedle: blue
colorNeedleEnd: blue
colorBorderOuter: blue
colorBorderInner: blue
colorNeedleCircleOuter: blue
colorNeedleCircleOuterEnd: blue
colorNeedleCircleInner: blue
colorNeedleCircleInnerEnd: blue
borders: false
needleType: "arrow"
needleShadow: false
needleWidth: 2
needleCircleSize: 7
needleCircleOuter: false
needleCircleInner: true
animationDuration: 1500
- <<: *cb_spacer
- <<: *cb_spacer
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.nas_hdd_1_status
label: Status HDD 1
show_label: true
styles:
card:
- font-size: 12px
- color: '#2F7EFD'
- background-color: rgba(0, 0, 0, 0.0)
- box-shadow: 'none'
grid:
- grid-template-areas: '"l" "i" "n" "s"'
- grid-template-rows: min-content 1fr min-content min-content
- grid-template-columns: 1fr
confirmation: true
state:
- value: 'ONLINE'
name: " "
icon: mdi:harddisk
color: green
- value: 'OFFLINE'
name: " "
color: red
styles:
icon:
- animation: blink 2s ease infinite
icon: mdi:harddisk
- type: custom:button-card
entity: sensor.nas_hdd_2_status
label: Status HDD 2
show_label: true
styles:
card:
- font-size: 12px
- color: '#2F7EFD'
- background-color: rgba(0, 0, 0, 0.0)
- box-shadow: 'none'
grid:
- grid-template-areas: '"l" "i" "n" "s"'
- grid-template-rows: min-content 1fr min-content min-content
- grid-template-columns: 1fr
confirmation: true
state:
- value: 'ONLINE'
name: " "
icon: mdi:harddisk
color: green
- value: 'OFFLINE'
name: " "
color: red
styles:
icon:
- animation: blink 2s ease infinite
icon: mdi:harddisk
- type: custom:button-card
entity: sensor.nas_hdd_3_status
label: Status HDD 3
show_label: true
styles:
card:
- font-size: 12px
- color: '#2F7EFD'
- background-color: rgba(0, 0, 0, 0.0)
- box-shadow: 'none'
grid:
- grid-template-areas: '"l" "i" "n" "s"'
- grid-template-rows: min-content 1fr min-content min-content
- grid-template-columns: 1fr
confirmation: true
state:
- value: 'ONLINE'
name: " "
icon: mdi:harddisk
color: green
- value: 'OFFLINE'
name: " "
color: red
styles:
icon:
- animation: blink 2s ease infinite
icon: mdi:harddisk
- type: custom:button-card
entity: sensor.nas_hdd_4_status
label: Status HDD 4
show_label: true
styles:
card:
- font-size: 12px
- color: '#2F7EFD'
- background-color: rgba(0, 0, 0, 0.0)
- box-shadow: 'none'
grid:
- grid-template-areas: '"l" "i" "n" "s"'
- grid-template-rows: min-content 1fr min-content min-content
- grid-template-columns: 1fr
confirmation: true
state:
- value: 'ONLINE'
name: " "
icon: mdi:harddisk
color: green
- value: 'OFFLINE'
name: " "
color: red
styles:
icon:
- animation: blink 2s ease infinite
icon: mdi:harddisk
3 Likes
Should be available a few post below the one you replied.
Hi TheStigh, I really like your Sysmon. Thank you for sharing your config files.
1 Like
thanks for your interest, the difficulties I am experiencing are in the background, the palte I was able to change the color. in my opinion the solution is inside your code “<<: * card_mod_transparent”.
this is what I have right now:
yes it is installed, but if I insert the line:
- type: custom: canvas-gauge-card
<<: * card_mod_transparent
gives me the following error …
unidentified alias "card_mod_transparent" at line 903, column 48:
... <<: *card_mod_transparent
^
I’m using ‘anchors’ which is the reason for <<: *
Replace:
- type: custom:canvas-gauge-card
<<: *card_mod_transparent
entity: sensor.cisco_rv320_internet_in_mbps
card_height: 210
shadow_height: 12%
with:
- type: custom:canvas-gauge-card
style: |
ha-card {
background-color: transparent; border: none; box-shadow: none;
}
entity: sensor.cisco_rv320_internet_in_mbps
card_height: 210
shadow_height: 12%
3 Likes
Got lots of good ideas from this thread. Thanks to all for the inspiration and code.
Using the iOS app most of the time so fairly compact UI. Using collapsing cards to keep the views simple and digestible.
3 Likes
Hi @johga, did really like your cards being ‘filled’.
What card did you use for this?
Fint å ha noen ‘lokale’ også med HA - Heia Sverige
The entire interface is built using ‘Button Card’ These are then places within several horizontal stack cards within a vertical stack. Using Card Mod to apply some margins and padding.
Minimizing the view is done by clicking the header, which is a button card connected to a input Boolean. The IB is then controlling a conditional card that displays or hides the content depending on status.