Finally managed to knock up a dashboard for my ESXi server and a few other devices …
1 Like
Posting over Iridium ? Expensive posts 
VSAT terminal. Still not cheap but I’m not paying 
1 Like
Hi @Djal I have just followed some steps in another post in this forum: Get notified of Available Hassio Addon Updates
Then to show them in the dashboard I made a vertical stack inside a grid-layout for every addon like this:
- type: vertical-stack
view_layout:
grid-column: 3/3
grid-row: 1/1
cards:
- type: markdown
content: >-
<center><img src="/local/Pictures/addons/duckdns-ico.png"
width="52"/> <center>DuckDNS</center> <center>Installed: {{
state_attr('sensor.duckdns', 'version') }}</center> <center>Newest:
{{ state_attr('sensor.duckdns', 'version_latest') }}</center>
style: |
ha-card{
background: none;
box-shadow: none;
font-size: 11px;
}
- color: green
decimal: '1'
entity_row: true
height: 12px
name: CPU Temperature
positions:
icon: 'off'
indicator: 'off'
name: 'off'
value: 'off'
type: 'custom:bar-card'
width: 50%
tap_action:
action: navigate
navigation_path: >-
https://bloomassistant.duckdns.org:8123/hassio/addon/core_duckdns/info
min: 0
max: 50
severity:
- color: '#ff4d4d'
from: 0
to: 50
- color: '#00e64d'
from: 51
to: 100
style: |
ha-card {
top: -10px;
width: 80%;
left: 10%;
}
entities:
- entity: sensor.duckdns_update_available
Hope this helps.
Thxs a lot will give it a look.
Looking nice and clean! How did you do that with te blue bars on the left and right side of each header with the title in the middle of each card? Can you post your config from your “Energie vebruik” as an example?
Hi @the_cyberspace,
Here’s the config for my “Energy Verbruik” card
type: entities
entities:
- type: 'custom:text-divider-row'
text: Energie Verbruik
- entity: sensor.kosten
- entity: sensor.energy_cost_today
- entity: sensor.gas_cost_today
- entity: sensor.total_cost_today
- entity: sensor.energy_cost_this_month
- entity: sensor.gas_cost_this_month
- entity: sensor.total_cost_this_month
- type: divider
- entity: sensor.daily_usage
- entity: sensor.daily_energy_low
name: Energie Vandaag Laag
- entity: sensor.daily_energy_high
name: Energie Vandaag Hoog
- entity: sensor.daily_gas
name: Gas Vandaag
- type: divider
- entity: sensor.monthly_usage
- entity: sensor.monthly_energy_low
name: Energie deze maand Laag
- entity: sensor.monthly_energy_high
name: Energie deze maand Hoog
- entity: sensor.monthly_gas
name: Gas deze maand
- type: divider
- entity: sensor.toon_p1_power_use_cnt_low
name: Meterstand Elektra Laag
icon: 'mdi:counter'
- entity: sensor.toon_p1_power_use_cnt_high
name: Meterstand Elektra Hoog
icon: 'mdi:counter'
- entity: sensor.toon_gas_used_cnt
name: Meterstand Gas
icon: 'mdi:counter'
- type: 'custom:fold-entity-row'
head:
type: section
label: Tarieven
entities:
- entity: input_number.energy_cost_daily
- entity: input_number.energy_cost
- entity: input_number.gas_cost_daily
- entity: input_number.gas_cost
style: |
:host div#items {
margin: 0px 0px 0px -25px
}
style:
.: |
#states > * {
margin: -5px 0px !important;
}
ha-card {
border: solid 2px var(--primary-color);
background-color: var(--ha-card-background);
}
The colors of these lines are set in my theme.
Sick config. Can you share your Afvalwijzer yaml?
1 Like
How are you monitoring ESXi? exsi_stats integration?
Thanks for your answer!
Sure thing! This is the card:
entities:
- type: 'custom:text-divider-row'
text: Afvalwijzer
- card_type: markdown
content: >
<ha-icon icon= {{'mdi:delete-alert' if
states('sensor.circulus_berkel_afval_vandaag') != 'Geen' else
'mdi:delete-outline'}}> </ha-icon> Vandaag,
{{states('sensor.simple_date')}}: <font color = {% if
states('sensor.circulus_berkel_afval_vandaag') == 'pmd' %}'#ff944d'
{% elif states('sensor.circulus_berkel_afval_vandaag') == 'gft' %}'#00e64d'
{% elif states('sensor.circulus_berkel_afval_vandaag') == 'papier' %}'#3399ff'
{% else %}'grey'
{% endif %}> **{{states('sensor.circulus_berkel_afval_vandaag')}}</font>**
<ha-icon icon= {{'mdi:delete-alert' if
states('sensor.circulus_berkel_afval_morgen') != 'Geen' else
'mdi:delete-outline'}}> </ha-icon> Morgen,
{{states('sensor.simple_tomorrow')}}: <font color = {% if
states('sensor.circulus_berkel_afval_morgen') == 'pmd' %}'#ff944d'
{% elif states('sensor.circulus_berkel_afval_morgen') == 'gft' %}'#00e64d'
{% elif states('sensor.circulus_berkel_afval_morgen') == 'papier' %}'#3399ff'
{% else %}'grey'
{% endif %}> **{{states('sensor.circulus_berkel_afval_morgen')}}</font>**
style: |
ha-card {
box-shadow: none;
border-radius: 10px;
background: none;
}
type: 'custom:hui-element'
- type: divider
- card: null
card_type: glance
entities:
- entity: sensor.circulus_berkel_afval_gft
name: GFT
- entity: sensor.circulus_berkel_afval_papier
name: Papier
- entity: sensor.circulus_berkel_afval_pmd
name: PMD
style: |
ha-card {
box-shadow: none;
border-radius: 10px;
background: none;
}
type: 'custom:hui-element'
style:
.: |
#states > * {
margin: 2px 0px !important;
}
ha-card {
border: solid 2px var(--primary-color);
background-color: var(--ha-card-background);
}
type: entities
It is the HACS “Afvalbeheer” intergration. And this is the config for it:
#================================
# Afvalkalender
#================================
- platform: afvalbeheer
wastecollector: Circulus-Berkel
resources:
- gft
- papier
- pmd
postcode: 7327GD
streetnumber: 111
upcomingsensor: 1
dateformat: '%d %B %Y'
dateonly: 1
name: "afval"
nameprefix: 1
builtinicons: 0
dutch: 1
disableicons: 0
- platform: template
sensors:
trash_color:
friendly_name: afvalkleur
value_template: >-
{% if (states.sensor.circulus_berkel_afval_vandaag == "gft") %}
green
{% elif (states.sensor.circulus_berkel_afval_vandaag == "papier") %}
blue
{% elif (states.sensor.circulus_berkel_afval_vandaag == "pmd") %}
orange
{% else %}
grey
{% endif %}
- platform: template
sensors:
trash_color_tomorrow:
friendly_name: afvalkleur
value_template: >-
{% if (states.sensor.circulus_berkel_afval_morgen == "gft") %}
green
{% elif (states.sensor.circulus_berkel_afval_morgen == "papier") %}
blue
{% elif (states.sensor.circulus_berkel_afval_morgen == "pmd") %}
orange
{% else %}
grey
{% endif %}
The pictures I set in my customize.yaml
That is actually all there is.
@cdrom1028 No problem here it is ( I left some vertical stacks out for the addons, since the total characters is more than allowed in 1 post. But you will get the idea.:
- panel: true
type: 'custom:grid-layout'
badges: []
cards:
- type: 'custom:layout-card'
layout: vertical
column_width: 100%
cards:
- type: 'custom:stack-in-card'
mode: horizontal
cards:
- type: picture
image: \local\Pictures\home-assistant.png
style: |
ha-card{
width: 200px;
background: none;
box-shadow: none;
top: 20px;
left: 20px;
}
- type: markdown
content: >-
**HOMEASSISTANT SERVER
RESOURCES
RASPBERRY PI 4B
Hassio Cli:** {{ state_attr('sensor.version_available', 'cli')
}}
**Uptime:** {{ states('sensor.rpi_uptime')}}
style: |
ha-card{
left: -80px;
top: 20px;
background: none;
box-shadow: none;
}
- type: entities
entities:
- decimal: '1'
entity: sensor.processor_use
entity_row: true
height: 20px
max: '100'
min: '0'
name: CPU Load
icon: 'mdi:memory'
positions:
icon: outside
indicator: outside
name: outside
value: outside
severity:
- color: '#00e64d'
from: 0
to: 30
- color: '#ff944d'
from: 30
to: 50
- color: '#ff4d4d'
from: 50
to: 100
type: 'custom:bar-card'
width: 70%
- color: green
decimal: '1'
entity: sensor.cpu_temperature
entity_row: true
height: 20px
max: '110'
min: '0'
name: CPU Temp
icon: 'mdi:thermometer'
positions:
icon: outside
indicator: outside
name: outside
value: outside
severity:
- color: '#00e64d'
from: 0
to: 66
- color: '#ff944d'
from: 66
to: 80
- color: '#ff4d4d'
from: 80
to: 100
type: 'custom:bar-card'
width: 70%
- color: green
decimal: '1'
entity: sensor.memory_use_percent
entity_row: true
height: 20px
max: '100'
min: '0'
name: Memory
icon: 'mdi:memory'
positions:
icon: outside
indicator: outside
name: outside
value: outside
severity:
- color: '#00e64d'
from: 0
to: 75
- color: '#ff944d'
from: 80
to: 90
- color: '#ff4d4d'
from: 90
to: 100
type: 'custom:bar-card'
width: 70%
- color: green
decimal: '1'
entity: sensor.disk_use_percent
entity_row: true
height: 20px
max: '100'
min: '0'
name: Disk Usage
icon: 'mdi:harddisk'
positions:
icon: outside
indicator: outside
name: outside
value: outside
severity:
- color: '#00e64d'
from: 0
to: 65
- color: '#ff944d'
from: 65
to: 90
- color: '#ff4d4d'
from: 90
to: 100
type: 'custom:bar-card'
width: 70%
- color: green
decimal: '1'
entity: sensor.swap_use_percent
entity_row: true
height: 20px
max: '100'
min: '0'
name: Swap
icon: 'mdi:file-swap-outline'
positions:
icon: outside
indicator: outside
name: outside
value: outside
severity:
- color: '#00e64d'
from: 0
to: 65
- color: '#ff944d'
from: 65
to: 90
- color: '#ff4d4d'
from: 90
to: 100
type: 'custom:bar-card'
width: 70%
style:
.: |
#states > * {
margin: -8px 0px !important;
}
ha-card {
bar-card-border-radius: 5px;
left: -135px;
width: 120%;
background: none;
box-shadow: none;
}
- align_icon: right
align_state: left
name: Server Throughput
icon: 'mdi:upload-network-outline'
entities:
- color: '#00e64d'
entity: sensor.network_throughput_in_eth0
name: Download
- color: '#3399ff'
entity: sensor.network_throughput_out_eth0
name: Upload
font_size: 75
font_size_header: 14
hour24: true
hours_to_show: 24
line_width: 2
points_per_hour: 4
height: 100
show:
extrema: false
icon: true
labels: false
name: true
points: false
legend: false
average: false
state: false
style: |
ha-card {
border-radius: 5px;
box-shadow: none;
background: none;
left: -30px;
}
type: 'custom:mini-graph-card'
style: |
ha-card {
border: solid 2px var(--primary-color);
height: 100%;
}
- type: 'custom:mod-card'
style: |
ha-card {
border: solid 2px var(--primary-color);
background-color: var(--ha-card-background);
}
card:
type: 'custom:layout-card'
layout_type: grid
layout: {}
cards:
- type: vertical-stack
view_layout:
grid-column: 1/1
grid-row: 1/3
cards:
- type: picture
image: /local/Custom_Icons/home-assistant-ico.png
style: |
ha-card {
width: 150px;
left: 10px;
top:10%;
background: none;
box-shadow: none;
}
- type: markdown
content: >-
**BLOOMASSISTANT**
**RESOURCES**
**Uptime:** {{states('sensor.ha_uptime')}}
**Database Size:** {{states('sensor.database_size')}} MB
**Local Backups:** {{states('sensor.local_snapshots')}}
**Remote Backups:**
{{states('sensor.remote_snapshots')}}
**Latest Backup:** {{states('sensor.latest_snapshot')}}
**Certificate Expiration:**
{{states('sensor.cert_expiry_days_bloomassistant')}}
Days
style: |
ha-card{
background: none;
box-shadow: none;
}
- type: vertical-stack
view_layout:
grid-column: 2/2
grid-row: 1/1
cards:
- type: markdown
content: >-
<center><img
src="/local/Pictures/addons/core_check_config-ico.png"
width="52"/> <center>Check HA Config</center>
<center>Installed: {{
state_attr('sensor.check_home_assistant_configuration',
'version') }}</center> <center>Newest: {{
state_attr('sensor.check_home_assistant_configuration',
'version_latest') }}</center>
style: |
ha-card{
background: none;
box-shadow: none;
font-size: 11px;
}
- color: green
decimal: '1'
entity_row: true
height: 12px
name: CPU Temperature
positions:
icon: 'off'
indicator: 'off'
name: 'off'
value: 'off'
type: 'custom:bar-card'
width: 50%
min: 0
max: 50
tap_action:
action: navigate
navigation_path: >-
https://homeassistant/hassio/addon/core_check_config/info
severity:
- color: '#ff4d4d'
from: 0
to: 50
- color: '#00e64d'
from: 51
to: 100
style: |
ha-card {
top: -10px;
width: 80%;
left: 10%;
}
entities:
- entity: sensor.check_config_update_available
- type: vertical-stack
view_layout:
grid-column: 3/3
grid-row: 1/1
cards:
- type: markdown
content: >-
<center><img
src="/local/Pictures/addons/duckdns-ico.png"
width="52"/> <center>DuckDNS</center>
<center>Installed: {{ state_attr('sensor.duckdns',
'version') }}</center> <center>Newest: {{
state_attr('sensor.duckdns', 'version_latest')
}}</center>
style: |
ha-card{
background: none;
box-shadow: none;
font-size: 11px;
}
- color: green
decimal: '1'
entity_row: true
height: 12px
name: CPU Temperature
positions:
icon: 'off'
indicator: 'off'
name: 'off'
value: 'off'
type: 'custom:bar-card'
width: 50%
tap_action:
action: navigate
navigation_path: >-
https://homeassistant/hassio/addon/core_duckdns/info
min: 0
max: 50
severity:
- color: '#ff4d4d'
from: 0
to: 50
- color: '#00e64d'
from: 51
to: 100
style: |
ha-card {
top: -10px;
width: 80%;
left: 10%;
}
entities:
- entity: sensor.duckdns_update_available
- type: vertical-stack
view_layout:
grid-column: 4/4
grid-row: 1/1
cards:
- type: markdown
content: >-
<center><img
src="/local/Pictures/addons/glances-ico.png"
width="52"/> <center>Glances</center>
<center>Installed: {{ state_attr('sensor.glances',
'version') }}</center> <center>Newest: {{
state_attr('sensor.glances', 'version_latest')
}}</center>
style: |
ha-card{
background: none;
box-shadow: none;
font-size: 11px;
}
- color: green
decimal: '1'
entity_row: true
height: 12px
name: CPU Temperature
positions:
icon: 'off'
indicator: 'off'
name: 'off'
value: 'off'
type: 'custom:bar-card'
width: 50%
tap_action:
action: navigate
navigation_path: >-
https://homeassistant/hassio/addon/a0d7b954_glances/info
min: 0
max: 50
severity:
- color: '#ff4d4d'
from: 0
to: 50
- color: '#00e64d'
from: 51
to: 100
style: |
ha-card {
top: -10px;
width: 80%;
left: 10%;
}
entities:
- entity: sensor.duckdns_update_available
##Vertical stacks removed here
- type: vertical-stack
view_layout:
grid-column: 8/8
grid-row: 1/1
cards:
- type: markdown
content: >-
<center><img
src="/local/Pictures/addons/mosquitto_broker-ico.png"
width="52"/> <center>Mosquitto</center>
<center>Installed: {{ state_attr('sensor.mosquitto',
'version') }}</center> <center>Newest: {{
state_attr('sensor.mosquitto', 'version_latest')
}}</center>
style: |
ha-card{
background: none;
box-shadow: none;
font-size: 11px;
}
- color: green
decimal: '1'
entity: sensor.mosquitto_update_available
entity_row: true
height: 12px
name: CPU Temperature
positions:
icon: 'off'
indicator: 'off'
name: 'off'
value: 'off'
type: 'custom:bar-card'
width: 50%
min: 0
max: 50
tap_action:
action: navigate
navigation_path: >-
https://homeassistant/hassio/addon/core_mosquitto/info
severity:
- color: '#ff4d4d'
from: 0
to: 50
- color: '#00e64d'
from: 51
to: 100
style: |
ha-card {
top: -10px;
width: 80%;
left: 10%;
}
- type: vertical-stack
view_layout:
grid-column: 9/9
grid-row: 1/1
cards:
- type: markdown
content: >-
<center><img
src="/local/Pictures/addons/nodered-ico.png"
width="52"/> <center>Node-Red</center>
<center>Installed: {{ state_attr('sensor.node_red',
'version') }}</center> <center>Newest: {{
state_attr('sensor.node_red', 'version_latest')
}}</center>
style: |
ha-card{
background: none;
box-shadow: none;
font-size: 11px;
}
- color: green
decimal: '1'
entity: sensor.nodered_update_available
entity_row: true
height: 12px
name: CPU Temperature
positions:
icon: 'off'
indicator: 'off'
name: 'off'
value: 'off'
type: 'custom:bar-card'
width: 50%
tap_action:
action: navigate
navigation_path: >-
https://homeassistant/hassio/addon/a0d7b954_nodered/info
min: 0
max: 50
severity:
- color: '#ff4d4d'
from: 0
to: 50
- color: '#00e64d'
from: 51
to: 100
style: |
ha-card {
top: -10px;
width: 80%;
left: 10%;
}
- type: vertical-stack
view_layout:
grid-column: 2/2
grid-row: 2/2
cards:
- type: markdown
content: >-
<center><img
src="/local/Pictures/addons/phpmyadmin-ico.png"
width="52"/> <center>PHP MyAdmin</center>
<center>Installed: {{ state_attr('sensor.phpmyadmin',
'version') }}</center> <center>Newest: {{
state_attr('sensor.phpmyadmin', 'version_latest')
}}</center>
style: |
ha-card{
background: none;
box-shadow: none;
font-size: 11px;
}
- color: green
decimal: '1'
entity: sensor.phpmyadmin_update_available
entity_row: true
height: 12px
name: CPU Temperature
positions:
icon: 'off'
indicator: 'off'
name: 'off'
value: 'off'
type: 'custom:bar-card'
width: 50%
min: 0
max: 50
tap_action:
action: navigate
navigation_path: >-
https://homeassistant/hassio/addon/a0d7b954_phpmyadmin/info
severity:
- color: '#ff4d4d'
from: 0
to: 50
- color: '#00e64d'
from: 51
to: 100
style: |
ha-card {
top: -10px;
width: 80%;
left: 10%;
}
- type: vertical-stack
view_layout:
grid-column: 3/3
grid-row: 2/2
cards:
- type: markdown
content: >-
<center><img
src="/local/Pictures/addons/samba_backup-ico.png"
width="52"/> <center>Samba Backup</center>
<center>Installed: {{
state_attr('sensor.samba_backup_version', 'version')
}}</center> <center>Newest: {{
state_attr('sensor.samba_backup_version',
'version_latest') }}</center>
style: |
ha-card{
background: none;
box-shadow: none;
font-size: 11px;
}
- color: green
decimal: '1'
entity: sensor.samba_backup_update_available
entity_row: true
height: 12px
name: CPU Temperature
positions:
icon: 'off'
indicator: 'off'
name: 'off'
value: 'off'
type: 'custom:bar-card'
width: 50%
min: 0
max: 50
tap_action:
action: navigate
navigation_path: >-
https://homeassistant/hassio/addon/15d21743_samba_backup/info
severity:
- color: '#ff4d4d'
from: 0
to: 50
- color: '#00e64d'
from: 51
to: 100
style: |
ha-card {
top: -10px;
width: 80%;
left: 10%;
}
##vertical stacks removed here
- type: vertical-stack
view_layout:
grid-column: 8/8
grid-row: 2/2
cards:
- type: markdown
content: >-
<center><img
src="/local/Pictures/addons/visual_studio-ico.png"
width="52"/> <center>Visual Studio</center>
<center>Installed: {{
state_attr('sensor.visualstudiocode', 'version')
}}</center> <center>Newest: {{
state_attr('sensor.visualstudiocode', 'version_latest')
}}</center>
style: |
ha-card{
background: none;
box-shadow: none;
font-size: 11px;
}
- color: green
decimal: '1'
entity: sensor.visualstudiocode_update_available
entity_row: true
height: 12px
name: CPU Temperature
positions:
icon: 'off'
indicator: 'off'
name: 'off'
value: 'off'
type: 'custom:bar-card'
width: 50%
min: 0
max: 50
tap_action:
action: navigate
navigation_path: >-
https://homeassistant/hassio/addon/a0d7b954_vscode/info
severity:
- color: '#ff4d4d'
from: 0
to: 50
- color: '#00e64d'
from: 51
to: 100
style: |
ha-card {
top: -10px;
width: 80%;
left: 10%;
}
- type: vertical-stack
view_layout:
grid-column: 9/9
grid-row: 2/2
cards:
- type: markdown
content: >-
<center><img src="/local/Pictures/addons/zwave-ico.png"
width="52"/> <center>Z-Wave JS</center>
<center>Installed: {{ state_attr('sensor.zwavejs',
'version') }}</center> <center>Newest: {{
state_attr('sensor.zwavejs', 'version_latest')
}}</center>
style: |
ha-card{
background: none;
box-shadow: none;
font-size: 11px;
}
- color: green
decimal: '1'
entity: sensor.zwavejs_update_available
entity_row: true
height: 12px
name: CPU Temperature
positions:
icon: 'off'
indicator: 'off'
name: 'off'
value: 'off'
type: 'custom:bar-card'
width: 50%
min: 0
max: 50
tap_action:
action: navigate
navigation_path: >-
https://homeassistant/hassio/addon/core_zwave_js/info
severity:
- color: '#ff4d4d'
from: 0
to: 50
- color: '#00e64d'
from: 51
to: 100
style: |
ha-card {
top: -10px;
width: 80%;
left: 10%;
}
layout_options:
grid-tempalte-columns: 250px auto auto
grid-template-rows: 250px 250px
view_layout: {}
- type: 'custom:stack-in-card'
mode: horizontal
cards:
- type: picture
image: /local/Custom_Icons/HACS-3d-icon.png
style: |
ha-card {
width: 150px;
left: 10px;
top: 10px;
background: none;
box-shadow: none;
}
- type: markdown
content: >-
### HACS updates available: {{ states.sensor.hacs.state }} {%
for repo in states.sensor.hacs.attributes.repositories %}
**{{repo.display_name }}** {{ repo["installed_version"] }} ->
{{ repo["available_version"] }} {% endfor %}
style: |
ha-card{
background: none;
box-shadow: none;
font-size: 12px;
left: -75%;
}
style: |
ha-card {
border: solid 2px var(--primary-color);
height: 100%;
}
layout_options: {}
layout_type: grid
view_layout: vertical
How does the YAML look for the other variables i.e. Up Time, CPU load etc?
it really depends on a lot of thjings like where you get the data and what internal integrations you use. Also what platform you use, like NUC vs RPi vs Docker. You can get a lot from the Glances integration and Uptime is a native integration. You really need to get to know your system to know where to get the most accurate data.
Here’s my Server Monitoring overview so far. Please leave me any feedback or tips that can help me improve it!
Normal view:
Some of the detail information expanded:
11 Likes
This looks great. Please post the code for your “Server Info” card. I like the expansion to gain additional details.
We need more details 
(the yaml code)