type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: 'NUC : Versione Hassio {{states(''sensor.hass_version'')}}'
secondary: '- {{states(''sensor.ha_start'')}}'
icon: mdi:cpu-64-bit
fill_container: true
entity: sensor.processor_use
layout: vertical
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
card_mod:
style: |
ha-card {
height: 102px;
background: url('/local/images/nuc10-hero.jpg') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.8);
{% if is_state('light.geekroom', 'on') %}
box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
{% endif %}
}
tap_action:
action: more-info
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.disk_use_percent
color: rgb(247, 222, 0)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 33
- 66
- 100
legend:
show: false
chart:
height: 240
- type: custom:mushroom-entity-card
entity: sensor.disk_use_percent
primary_info: state
secondary_info: name
name: DISCO
icon_color: yellow
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -90px;
width: 140px;
margin-left: auto;
margin-right: auto;
background: transparent !important;
}
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
mini-media-player-background-opacity: 0
--ha-card-box-shadow: none; }
- type: custom:stack-in-card
cards:
- square: false
columns: 3
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.memory_use_percent
color: rgb(247, 8, 0)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 33
- 66
- 100
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
primary_info: state
secondary_info: name
name: RAM
icon_color: red
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: 140px;
margin-left: -4px;
margin-right: auto;
background: transparent !important;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.processor_use
color: rgb(0, 82, 247)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 33
- 66
- 100
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.processor_use
primary_info: state
secondary_info: name
name: CPU
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: 140px;
margin-left: -4px;
margin-right: auto;
background: transparent !important;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.temperatura_processore_nuc
color: rgb(247, 124, 0)
max: 120
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 40
- 80
- 120
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.temperatura_processore_nuc
primary_info: state
secondary_info: name
name: TEMP
icon_color: orange
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: 140px;
margin-left: -4px;
margin-right: auto;
background: transparent !important;
}
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
mini-media-player-background-opacity: 0
--ha-card-box-shadow: none; }
- type: horizontal-stack
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.cpu_speed
color: rgb(255, 87, 34)
max: 5
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 1
- 2.5
- 4
legend:
show: false
chart:
height: 240
- type: custom:mushroom-entity-card
entity: sensor.cpu_speed
primary_info: state
secondary_info: name
name: CPU SPEED
icon_color: deep-orange
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -90px;
width: 140px;
margin-left: auto;
margin-right: auto;
background: transparent !important;
}
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
mini-media-player-background-opacity: 0
--ha-card-box-shadow: none; }
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.mariadb_database_size
color: rgb(66, 245, 96)
max: 5000
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 1500
- 3000
- 5000
legend:
show: false
chart:
height: 240
- type: custom:mushroom-entity-card
entity: sensor.mariadb_database_size
primary_info: state
secondary_info: name
name: HASSIO DB
icon_color: light-green
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -90px;
width: 140px;
margin-left: auto;
margin-right: auto;
--ha-card-background: rgba(0, 0, 0, 0);
mini-media-player-background-opacity: 0
--ha-card-box-shadow: none;
background: transparent !important;
}
card_mod:
style: |
ha-card { --ha-card-background: rgba(0, 0, 0, 0);
mini-media-player-background-opacity: 0
--ha-card-box-shadow: none; }
- type: entities
entities:
- entity: binary_sensor.backups_stale
name: Stato Backup
secondary_info: last-changed
- entity: sensor.home_assistant_log_last_updated
name: Ultimo Aggiornamento
secondary_info: last-changed
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: RIAVVIO
secondary: ''
icon: mdi:restart
layout: vertical
icon_color: red
tap_action:
action: call-service
service: homeassistant.restart
data: {}
target: {}
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: SPEGNIMENTO
secondary: ''
icon: mdi:power
layout: vertical
icon_color: blue
tap_action:
action: call-service
service: hassio.host_shutdown
data: {}
target: {}
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: LOGS
secondary: ''
icon: mdi:alert-circle-check-outline
layout: vertical
icon_color: orange
tap_action:
action: url
url_path: https://https://tarohomeassistant.duckdns.org:8123/config/logs
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
Hi, I am trying to set up this card but in case I paste code I see nothing in card only message: No visual editor available for type 'custom:config-template-card'
Many thanks for your help.
This card is 100% yaml only.
I understand, many thanks. But I had a problem that card was plain, nothing on it, but when I deleted all variables it is working:
- states[''sensor.disk_use_percent''].state
- states[''sensor.homeassistant_version''].state
- states[''sensor.disk_total''].state
- states[''sensor.disk_use''].state
- states[''sensor.memory_use_percent''].state
- states[''sensor.processor_use''].state
- states[''sensor.cpu_temperature''].state
Should I define it somewhere? Many thanks!
Can somebody help me to setup the background image >?
This is my config type: custom:hui-entities-card
title: ‘Gigabite Brix OS: Ubuntu 20.04.1 LTS’
show_header_toggle: ‘off’
style: |
ha-card { border-radius: 20px; }
entities:
- type: custom:hui-vertical-stack-card
cards:- type: horizontal-stack
cards:- type: picture
style: |
ha-card {
–paper-card-background-color: ‘rgba(0, 0, 0, 0.0)’;
–ha-card-background: “rgba(0, 0, 0, 0.0)”;
–ha-card-box-shadow: ‘none’;
}
image: /local/NUC.specs.jpg - type: custom:button-card
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
grid:
- grid-template-columns: 50px auto
icon:
- padding: 20px 10px
- height: 30px
- width: 30px
card:
- ‘–ha-card-background’: rgba(0, 0, 0, 0.0)
- ‘–ha-card-box-shadow’: none
state:
- padding: 0px 10px
- justify-self: start
- font-family: Roboto, sans-serif
- font-size: 15px
name:
- padding: 0px 10px
- justify-self: start
- color: var(–secondary-text-color)
entity: sensor.cpu_temp
name: CPU Temperature
icon: mdi:fire
- type: picture
- type: custom:mini-graph-card
entities:- entity: sensor.processor_use
name: CPU Usege
height: 50
line_width: 2
font_size: 80
hours_to_show: 4
points_per_hour: 90
show:
icon: false
extrema: true
color_thresholds: - value: 28
color: ‘#e74c3c’ - value: 15
color: ‘#1db954’ - value: 0
color: ‘#3498db’
style: |
ha-card {
–paper-card-background-color: ‘rgba(0, 0, 0, 0.0)’;
–ha-card-background: “rgba(0, 0, 0, 0.0)”;
–ha-card-box-shadow: ‘none’;
}
- entity: sensor.processor_use
- type: custom:bar-card
title_position: inside
name: ‘Disk usage: 500Gb’
show_icon: true
align: split
columns: 1
max: 100
unit_of_measurement: ‘%’
severity:- value: 50
color: ‘#3498db’ - value: 75
color: ‘#f39c12’ - value: 100
color: ‘#e45e65’
style: |
ha-card {
–paper-card-background-color: ‘rgba(0, 0, 0, 0.0)’;
–ha-card-background: “rgba(0, 0, 0, 0.0)”;
–ha-card-box-shadow: ‘none’;
}
entity: sensor.disk_use_percent
- value: 50
- type: horizontal-stack
cards:- type: custom:bar-card
title_position: inside
show_icon: true
align: split
columns: 1
max: 100
unit_of_measurement: ‘%’
severity:- value: 50
color: ‘#3498db’ - value: 75
color: ‘#f39c12’ - value: 100
color: ‘#e45e65’
style: |
ha-card {
–paper-card-background-color: ‘rgba(0, 0, 0, 0.0)’;
–ha-card-background: “rgba(0, 0, 0, 0.0)”;
–ha-card-box-shadow: ‘none’;
}
entity: sensor.memory_use_percent
name: RAM usage
- value: 50
- type: custom:bar-card
title_position: inside
show_icon: true
align: split
columns: 1
max: 100
unit_of_measurement: ‘%’
severity:- value: 50
color: ‘#3498db’ - value: 75
color: ‘#f39c12’ - value: 100
color: ‘#e45e65’
style: |
ha-card {
–paper-card-background-color: ‘rgba(0, 0, 0, 0.0)’;
–ha-card-background: “rgba(0, 0, 0, 0.0)”;
–ha-card-box-shadow: ‘none’;
}
entity: sensor.processor_use
name: CPU usage
- value: 50
- type: custom:bar-card
- type: custom:mini-graph-card
height: 20
line_width: 2
font_size: 70
hours_to_show: 168
points_per_hour: 1
show:
extrema: true
fill: true
style: |
ha-card {
–ha-card-background: “rgba(0, 0, 0, 0.0)”;
–ha-card-box-shadow: ‘none’;
border-radius: 5px;
}
entities:- sensor.cpu_temp
name: Temperature
color_thresholds: - value: 90
color: ‘#3498db’ - value: 120
color: ‘#f39c12’ - value: 150
color: ‘#E45E65’
- sensor.cpu_temp
- entities:
- entity: sensor.time_of_day
name: HA Docker herstart - entity: sensor.versie
name: Home Assisten version - entity: sensor.last_boot
name: System herstart
show_header_toggle: false
type: entities
style: |
ha-card {
–paper-card-background-color: ‘rgba(0, 0, 0, 0.0)’;
–ha-card-background: “rgba(0, 0, 0, 0.0)”;
–ha-card-box-shadow: ‘none’;
}
- entity: sensor.time_of_day
- type: horizontal-stack
It would be a bit easier if you post the code in code tags as described in this post at the top of each forum.
I have exactly the same problem do you find a solution ?
Tell me please. Is it possible to get process download data for individual applications installed from Home Assistant.
I’m hoping someone can help me troubleshoot getting my ProxMox sensors to show up. It seems pretty strange that they worked initially, but then some kind of update stop them from being discovered. I’ve even uninstall mqtt and the mosquitto broker addon, and reinstalled both yet they still do not report.
I setup the monitor from post 42 by Hs82H, and after few tweaks for python3 got it working. The script seems to run, no errors. And I then check with mqtt explorer and see the sensor results showing. But homeassistant still won’t show them
This what I see with mqtt explorer.
I see the sensors, but it is also reporting a status of offline? The mosquitto broker is running and I see the connections from Proxmox. And the mqtt integration is also running. Both the mqtt integration and proxmox are both set for topic prefix of homeassistant as well. And the mqtt integration has discovery turned on.
From my understanding the mqtt should be picking up the devices automatically?
Any help or trouble shooting is greatly welcomed.
Thanks,
PT
slight change of tack, but I spotted this today, added to my system, and 5 minutes later have everythingg working perfectly. Super easy way to pull all your proxmox stats, and your VM/LXC stats.
dougiteixeira/proxmoxve: Proxmox VE Custom Integration Home Assistant (github.com)
1 Like
Well, I couldn’t get HACS to find the repository. But a quick manual install and up and running with that integration in 5 minutes. And its great that I can see all system stats and also the VMs. I also run HomeAssistant on the ProxMox as a VM and can even see that information there.
But I would still like to try and troubleshoot why the MQTT script is sending the data, but not showing up in HA.
Could you share the yaml for this view? I like how the bar and graph look combined!
Hello, really nice, please can you post your code for the “Synology” ?
I’m sorry, not using this anymore and think my code has gone
Hi guys, can anyone help me to adjust this card? I can not put the cpu temperature sensor, UPTIME and HA Version.
When I delete the variables the card works, when I put the variables the card does not work.
id: nuc_status
type: custom:config-template-card
variables: null
entities:
- sensor.disk_use_percent
- sensor.homeassistant_version
- sensor.disk_total
- sensor.disk_use
- sensor.memory_use_percent
- sensor.processor_use
- sensor.processor_temperature
card:
type: entities
show_header_toggle: 'off'
style: |
.card-header {
padding: 0px 0px 0px 0px !important;
}
entities:
- type: section
label: ${ 'Debian 11 --- HA Version ' + vars[1] }
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: picture
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--ha-card-box-shadow: 'none';
}
image: /local/images/intel-nuc.png
- type: custom:button-card
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
grid:
- grid-template-columns: 50px auto
icon:
- padding: 0px 0px
- height: 30px
- width: 30px
card:
- '--ha-card-background': rgba(0, 0, 0, 0.0)
- '--ha-card-box-shadow': none
state:
- padding: 0px 10px
- justify-self: start
- font-family: Roboto, sans-serif
- font-size: 15px
name:
- padding: 0px 10px
- justify-self: start
- color: var(--secondary-text-color)
entity: sensor.homeassistant_uptime
name: Uptime
icon: mdi:clock-outline
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 100
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: '%'
severity:
- from: 0
to: 50
color: '#018304'
- from: 50
to: 75
color: '#f39c12'
- from: 75
to: 100
color: '#e45e65'
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color';
--ha-card-box-shadow: 'none';
}
entities:
- entity: sensor.disk_use_percent
name: ${ 'Disk (' + vars[3] + 'Gb/' + vars[2] + 'Gb)' }
entity_row: true
- type: horizontal-stack
cards:
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 100
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: '%'
severity:
- from: 0
to: 50
color: '#018304'
- from: 50
to: 75
color: '#f39c12'
- from: 75
to: 100
color: '#e45e65'
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color';
--ha-card-box-shadow: 'none';
}
entity: sensor.memory_use_percent
name: RAM
entity_row: true
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 100
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: '%'
severity:
- from: 0
to: 50
color: '#018304'
- from: 50
to: 75
color: '#f39c12'
- from: 75
to: 100
color: '#e45e65'
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color';
--ha-card-box-shadow: 'none';
}
entity: sensor.processor_use
name: CPU
entity_row: true
- type: custom:mini-graph-card
height: 30
line_width: 2
font_size: 70
hours_to_show: 168
points_per_hour: 1
show:
extrema: true
fill: true
style: |
ha-card {
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--ha-card-box-shadow: 'none';
border-radius: 5px;
}
.info.flex {
font-size: 12px !important;
}
entities:
- sensor.processor_temperature
name: Temperature
color_thresholds:
- value: 30
color: '#3498db'
- value: 50
color: '#f39c12'
- value: 80
color: '#ff0000'
Hi guys,
Is it no longer possible to have uptime information in HA?? Are these the only resources available right now?
https://www.home-assistant.io/integrations/systemmonitor
# Example configuration.yaml entry with all entry types (delete/comment out as necessary)
sensor:
- platform: systemmonitor
resources:
- type: disk_use_percent
arg: /config
- type: disk_use
- type: disk_free
- type: memory_use_percent
- type: memory_use
- type: memory_free
- type: swap_use_percent
- type: swap_use
- type: swap_free
- type: load_1m
- type: load_5m
- type: load_15m
- type: network_in
arg: eth0
- type: network_out
arg: eth0
- type: throughput_network_in
arg: eth0
- type: throughput_network_out
arg: eth0
- type: packets_in
arg: eth0
- type: packets_out
arg: eth0
- type: ipv4_address
arg: eth0
- type: ipv6_address
arg: eth0
- type: processor_use
- type: processor_temperature
- type: last_boot
last_boot will give you the uptime of your system. The uptimes in this guide were manually created by me for the most part. They have since been made obsolete with the new timestamp device class as well as duration sensors.
1 Like
would you help me to get the information “Last Boot” and “HA Version undefined” right. Last boot information is coming out of the template.
is it possible to do decimal point rounding within the card?
The Synology integration now reports disk usage to 12 decimal points, wondering if I can round it down to 2 decimal points without creating another entity using a sensor or not
IF you are using the Synology integration go to:
Settings → integration-> Synology → Volume 1
Choose the entity you want to amend and go into the “cog” …it will allow you to amend the “Display precision” of the entity.