I was able to take and combine a few of the cards I have found to make one that I like for my Genmon integration.
type: 'custom:config-template-card'
variables:
- 'states[''sensor.genmon_version''].state'
entities:
- null
card:
type: entities
show_header_toggle: 'off'
style: |
.card-header {
padding: 0px 0px 0px 0px !important;
}
entities:
- type: section
label: '${ ''Generac Evolution - Pi 3 - Raspian - Genmon '' + vars[0] }'
- 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/images/generac.png
- type: vertical-stack
cards:
- 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: 20px
- 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
- font-size: 15px
- justify-self: start
- color: var(--secondary-text-color)
entity: sensor.genmon_mon_uptime
name: Uptime
icon: 'mdi:clock-outline'
- type: horizontal-stack
cards:
- type: 'custom:button-card'
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
grid:
- grid-template-columns: 25px 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.genmon_mon_cpu_temperature
name: Temp
icon: 'mdi:thermometer'
- type: 'custom:button-card'
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
grid:
- grid-template-columns: 25px 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)
- font-size: 13px
entity: sensor.genmon_mon_load
name: Pi CPU
icon: 'mdi:cpu-64-bit'
- type: horizontal-stack
cards:
- type: 'custom:button-card'
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
grid:
- grid-template-columns: 25px 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)
- font-size: 13px
entity: sensor.genmon_wlan_signal_level
name: WiFi
icon: 'mdi:gauge'
- type: 'custom:button-card'
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
grid:
- grid-template-columns: 25px 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.genmon_generator_battery
name: Battery
icon: 'mdi:battery'
- type: horizontal-stack
cards:
- type: 'custom:canvas-gauge-card'
card_height: 100
entity: sensor.genmon_outage_utility_voltage
name: ''
gauge:
type: radial-gauge
title: Pepco
width: 100
height: 100
minValue: 0
maxValue: 280
startAngle: 40
ticksAngle: 280
valueBox: true
units: Vac
majorTicks:
- 0
- 28
- 56
- 84
- 112
- 140
- 168
- 196
- 224
- 252
- 280
minorTicks: 10
strokeTicks: true
highlights:
- from: 0
to: 218
color: 'rgba(234, 51, 36, .75)'
- from: 218
to: 228
color: 'rgba(255, 255, 85, .75)'
- from: 228
to: 252
color: 'rgba(104, 225, 67, .75)'
- from: 252
to: 262
color: 'rgba(255, 255, 85, .75)'
- from: 262
to: 280
color: 'rgba(234, 51, 36, .75)'
borders: 'no'
needleType: arrow
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: linear
valueBoxBorderRadius: 10
colorValueBoxRect: '#222'
colorValueBoxRectEnd: '#333'
valueDec: 0
valueInt: 0
- type: 'custom:canvas-gauge-card'
card_height: 100
entity: sensor.genmon_generator_frequency
name: ''
gauge:
type: radial-gauge
title: Generator
width: 100
height: 100
minValue: 0
maxValue: 70
startAngle: 40
ticksAngle: 280
valueBox: true
units: Hz
majorTicks:
- 0
- 10
- 20
- 30
- 40
- 50
- 60
- 70
minorTicks: 10
strokeTicks: true
highlights:
- from: 0
to: 57
color: 'rgba(234, 51, 36, .75)'
- from: 57
to: 58.5
color: 'rgba(255, 255, 85, .75)'
- from: 58.5
to: 61.5
color: 'rgba(104, 225, 67, .75)'
- from: 61.5
to: 63
color: 'rgba(255, 255, 85, .75)'
- from: 63
to: 70
color: 'rgba(234, 51, 36, .75)'
borders: 'no'
needleType: arrow
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: linear
valueBoxBorderRadius: 10
colorValueBoxRect: '#222'
colorValueBoxRectEnd: '#333'
valueDec: 0
valueInt: 0
- type: 'custom:canvas-gauge-card'
card_height: 100
entity: sensor.genmon_generator_output_voltage
name: ''
gauge:
type: radial-gauge
title: Generator
width: 100
height: 100
minValue: 0
maxValue: 280
startAngle: 40
ticksAngle: 280
valueBox: true
units: Vac
majorTicks:
- 0
- 28
- 56
- 84
- 112
- 140
- 168
- 196
- 224
- 252
- 280
minorTicks: 10
strokeTicks: true
highlights:
- from: 0
to: 218
color: 'rgba(234, 51, 36, .75)'
- from: 218
to: 228
color: 'rgba(255, 255, 85, .75)'
- from: 228
to: 252
color: 'rgba(104, 225, 67, .75)'
- from: 252
to: 262
color: 'rgba(255, 255, 85, .75)'
- from: 262
to: 280
color: 'rgba(234, 51, 36, .75)'
borders: 'no'
needleType: arrow
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: linear
valueBoxBorderRadius: 10
colorValueBoxRect: '#222'
colorValueBoxRectEnd: '#333'
valueDec: 0
valueInt: 0
- type: horizontal-stack
cards:
- type: 'custom:canvas-gauge-card'
card_height: 100
entity: sensor.genmon_generator_output_power
name: ''
gauge:
type: radial-gauge
title: Generator
width: 100
height: 100
minValue: 0
maxValue: 23000
startAngle: 40
ticksAngle: 280
valueBox: true
units: kW
majorTicks:
- 0
- 3
- 6
- 9
- 12
- 15
- 18
- 20
- 23
minorTicks: 10
strokeTicks: true
highlights:
- from: 0
to: 15000
color: 'rgba(104, 225, 67, .75)'
- from: 15000
to: 18500
color: 'rgba(255, 255, 85, .75)'
- from: 18500
to: 23000
color: 'rgba(234, 51, 36, .75)'
borders: 'no'
needleType: arrow
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: linear
valueBoxBorderRadius: 10
colorValueBoxRect: '#222'
colorValueBoxRectEnd: '#333'
valueDec: 0
valueInt: 0
- type: 'custom:canvas-gauge-card'
card_height: 100
entity: sensor.genmon_generator_rpm
name: ''
gauge:
type: radial-gauge
title: Generator
width: 100
height: 100
minValue: 0
maxValue: 4000
startAngle: 40
ticksAngle: 280
valueBox: true
units: RPM
majorTicks:
- 0
- ''
- ''
- ''
- ''
- 2000
- ''
- ''
- ''
- 3600
- 4000
minorTicks: 3
strokeTicks: true
highlights:
- from: 0
to: 3500
color: 'rgba(234, 51, 36, .75)'
- from: 3500
to: 3550
color: 'rgba(255, 255, 85, .75)'
- from: 3550
to: 3650
color: 'rgba(104, 225, 67, .75)'
- from: 3650
to: 3750
color: 'rgba(255, 255, 85, .75)'
- from: 3750
to: 4000
color: 'rgba(234, 51, 36, .75)'
borders: 'no'
needleType: arrow
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: linear
valueBoxBorderRadius: 10
colorValueBoxRect: '#222'
colorValueBoxRectEnd: '#333'
valueDec: 0
valueInt: 0
- type: 'custom:canvas-gauge-card'
card_height: 100
entity: sensor.genmon_generator_battery
name: ''
gauge:
type: radial-gauge
title: Generator
width: 100
height: 100
minValue: 0
maxValue: 16
startAngle: 40
ticksAngle: 280
valueBox: true
units: Volts
majorTicks:
- 1
- 2
- 3
- 4
- 5
- 8
- 10
- 11
- 13
- 14.2
- 16
minorTicks: 5
strokeTicks: true
highlights:
- from: 0
to: 11.6
color: 'rgba(234, 51, 36, .75)'
- from: 11.6
to: 12.6
color: 'rgba(255, 255, 85, .75)'
- from: 12.6
to: 14.5
color: 'rgba(104, 225, 67, .75)'
- from: 14.5
to: 14.9
color: 'rgba(255, 255, 85, .75)'
- from: 15
to: 16
color: 'rgba(234, 51, 36, .75)'
borders: 'no'
needleType: arrow
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: linear
valueBoxBorderRadius: 10
colorValueBoxRect: '#222'
colorValueBoxRectEnd: '#333'
valueDec: 0
valueInt: 0
- type: entities
entities:
- entity: sensor.genmon_generator_exercise_time
name: Exercise
icon: 'mdi:clock'
- entity: sensor.genmon_generator_last_action
name: Last Action
icon: 'mdi:clipboard-edit-outline'
- entity: sensor.genmon_generator_last_alarm_log
name: Last Alarm
icon: 'mdi:alarm-bell'
- entity: sensor.genmon_outage_status
name: Last Outage
icon: 'mdi:power-plug-off'
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';
}