This dashboard looks wicked, love the pie charts for space left, the speed test graphs, just everything.
Can you be so kind and share your lovelace yaml?
Nice monitor!!
Could you share with us your code?
Thanks
Can you share code QNAP card
type: custom:stack-in-card
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 18px;
}
.card-header {
padding-top: 1px;
padding-bottom: 1px;
color: var(--secondary-text-color);
font-weight: bold !important;
}
mode: vertical
keep:
box_shadow: true
border_radius: true
margin: true
outer_padding: true
background: true
cards:
- type: picture
image: /local/pics/qnap1.jpg
tap_action:
action: none
hold_action:
action: none
- type: custom:bar-card
card_mod:
style: |-
ha-card{
--bar-card-border-radius: 5px;
border-radius: 10px;
box-shadow:
}
bar-card-value {
font-size: 13px;
font-weight: bold;
color: var(--secondary-text-color);
}
bar-card-name {
color: var(--secondary-text-color);
font-size: 13px;
font-weight: bold;
}
entities:
- entity: sensor.nas0c6388_cpu_usage
name: CPU
color: rgba(176, 147, 53, 0.7)
- entity: sensor.nas0c6388_memory_usage
name: RAM
color: rgba(176, 147, 53, 0.5)
- entity: sensor.nas0c6388_system_temperature
name: Sys.
icon: hass:thermometer
color: rgba(103, 157, 79, 0.7)
- entity: sensor.nas0c6388_temperature_drive_0_1
icon: hass:thermometer
name: HDD 1.
color: rgba(103, 157, 79, 0.5)
- entity: sensor.nas0c6388_temperature_drive_0_2
name: HDD 2.
icon: hass:thermometer
color: rgba(103, 157, 79, 0.3)
- entity: sensor.nas0c6388_volume_used_datavol1
name: HDD
icon: mdi:harddisk
color: rgba(70, 70, 70, 0.5)
columns: 1
direction: right
positions:
icon: outside
indicator: 'off'
name: outside
value: inside
height: 20px
width: 85%
decimal: '0'
- type: vertical-stack
cards:
- type: grid
cards:
- type: custom:button-card
entity: sensor.nas0c6388_status
name: Status
show_icon: true
show_label: false
show_name: true
show_state: true
state:
- value: good
styles:
img_cell:
- background-color: rgba(77, 163, 100, 0.5)
icon:
- color: var(--card-background-color)
- operator: default
styles:
icon:
- color: var(--card-background-color)
img_cell:
- animation: blink 2s ease infinite
- opacity: 0.7
- background-color: '#bf5e5e'
styles:
icon:
- color: null
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
- color: ''
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 15px
- margin-left: 12px
- color: var(--secondary-text-color)
state:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: '#2e2d2d'
- border-radius: 50%
- place-self: center
- width: 30px
- height: 30px
grid:
- grid-template-areas: '"i n" "i s" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: 15px
- box-shadow: null
- padding: 10px
size: 60%
- type: custom:button-card
name: Network
icon: mdi:lan-connect
entity: sensor.nas0c6388_network_link_eth0
show_icon: true
show_label: false
show_name: true
show_state: true
styles:
icon:
- color: null
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
- color: ''
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 15px
- margin-left: 12px
- color: var(--secondary-text-color)
state:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: '#2e2d2d'
- border-radius: 50%
- place-self: center
- width: 30px
- height: 30px
grid:
- grid-template-areas: '"i n" "i s" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: 15px
- box-shadow: null
- padding: 10px
size: 60%
- type: custom:button-card
name: Status HDD 1.
icon: mdi:harddisk
entity: sensor.nas0c6388_smart_status_drive_0_1
show_icon: true
show_label: false
show_name: true
show_state: true
state:
- value: OK
styles:
img_cell:
- background-color: rgba(77, 163, 100, 0.5)
icon:
- color: var(--card-background-color)
- operator: default
styles:
icon:
- color: var(--card-background-color)
img_cell:
- animation: blink 2s ease infinite
- opacity: 0.7
- background-color: '#bf5e5e'
styles:
icon:
- color: null
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
- color: ''
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 15px
- margin-left: 12px
- color: var(--secondary-text-color)
state:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: '#2e2d2d'
- border-radius: 50%
- place-self: center
- width: 30px
- height: 30px
grid:
- grid-template-areas: '"i n" "i s" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: 15px
- box-shadow: null
- padding: 10px
size: 60%
- type: custom:button-card
name: Status HDD 2.
icon: mdi:harddisk
entity: sensor.nas0c6388_smart_status_drive_0_2
show_label: false
show_name: true
show_state: true
state:
- value: OK
styles:
img_cell:
- background-color: rgba(77, 163, 100, 0.5)
icon:
- color: var(--card-background-color)
- operator: default
styles:
icon:
- color: var(--card-background-color)
img_cell:
- animation: blink 2s ease infinite
- opacity: 0.7
- background-color: '#bf5e5e'
styles:
icon:
- color: null
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
- color: ''
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 15px
- margin-left: 12px
- color: var(--secondary-text-color)
state:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: '#2e2d2d'
- border-radius: 50%
- place-self: center
- width: 30px
- height: 30px
grid:
- grid-template-areas: '"i n" "i s" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: 15px
- box-shadow: null
- padding: 10px
size: 60%
columns: 2
square: false
- type: custom:button-card
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content
- row-gap: 0px
card:
- border-radius: 15px
- box-shadow: null
- padding: 0px
custom_fields:
item1:
card:
type: custom:button-card
entity: sensor.nas0c6388_network_down_eth0
name: Download
show_icon: true
show_label: true
show_name: true
show_state: true
styles:
icon:
- color: null
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 13px
- filter: opacity(50%)
- margin-left: 12px
- color: ''
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 15px
- margin-left: 12px
- color: var(--secondary-text-color)
state:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: '#2e2d2d'
- border-radius: 50%
- place-self: center
- width: 30px
- height: 30px
grid:
- grid-template-areas: '"i n" "i s" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: 15px
- box-shadow: none
- padding: 10px
- z-index: 1
- background: none
size: 60%
item2:
card:
type: custom:mini-graph-card
entities:
- entity: sensor.nas0c6388_network_down_eth0
line_color: rgba(77, 163, 100, 0.3)
line_width: 2
hour24: true
smoothing: true
points_per_hour: 1
height: 57
show:
name: false
icon: false
legend: false
state: false
style: |
ha-card {
box-shadow: none;
margin-top: -100px;
border-radius: 0px;
}
5 Likes
Looks awesome…
Can you share the code? how do you expose the docker updates?
Thanks
Thank you!!! i will study all
What is everyone using to monitor remote machine (windows and/or Linux)?
Great write up I can appreciate the amount of time it takes to do a thorough write up like this well done, your UI is familiar 
I have started a complete revamp on mine not 100% there with it yet but here is a sneak peak of what I’ve been working on. There are a bunch of conditional cards that appear below depending on media playing ect.
10 Likes
As I stated here 
1 Like
Wow - any evolution on this yet ? A finished product ready to display ? ANy chance of a write up like Burningstone did ?
Craig
Wow may I ask you the source?
nice, mind sharing the code for this?
how do you get the individual port info?