I use the Mopeka monitoring system with their WiFi bridge and found it to be a solid addition to my HA.
I built a custom:button-card where the color and gas level are reflected in the icon.
Card code
type: custom:button-card
entity: sensor.propane_2
show_state: false
show_name: false
size: 4em
custom_fields:
pct:
card:
type: custom:button-card
entity: sensor.propane_2
name: Grill Propane
tap_action: none
show_state: true
show_name: false
show_icon: false
styles:
card:
- color: white
- font-weight: 600
- font-size: 15px
- background: transparent
- border: none
- opacity: 70%
name:
card:
type: custom:button-card
entity: sensor.propane_2
name: Grill Propane
tap_action: none
show_state: false
show_name: true
show_icon: false
styles:
card:
- color: white
- font-weight: 400
- font-size: 11px
- background: transparent
- border: none
gas:
card:
type: custom:mushroom-template-card
icon: fapro:tank1
icon_color: '#808080'
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: linear-gradient(to top, {{ iif(states('sensor.propane_2') |int >= 50,'lime', iif(states('sensor.propane_2') |int >= 30,'yellow',iif(states('sensor.propane_2') |int >= 0,'red')))}} {{states('sensor.propane_2') |int}}%, #808080 {{states('sensor.propane_2') |int}}%);
border-radius: 8px !important;
width: 34px !important;
height: 38px !important;
--icon-symbol-size: 67px;
}
.: |
ha-state-icon{
margin-top: -7px !important;
stroke: grey;
stroke-width: .2px;
margin-left: 1px;
}
ha-card {
padding: 40px !important;
background: none;
border: none;
}
styles:
custom_fields:
name:
- position: absolute
- top: 85%
- z-index: 0
- opacity: 70%
gas:
- position: absolute
- z-index: 1
- left: 5%
- top: 2%
pct:
- position: absolute
- top: 3%
- left: 75%
- z-index: 2
card:
- background-image: url('/local/pics/circle.png')
- background-size: cover
- padding: 25%
icon:
- color: transparent
card_mod:
style: |
ha-card {
border-radius: 8px !important;
}