Hi,
Is it possible to add a bar-card to vertical stack card. If I look at this link I think it is. Just want to add some color to my HA which has almost none
I really liked the idea of your custom component, but as I use hassio I dont think it will work since ink needs to be installed in the homeassistant docker container.
So instead I took the approach to create a hassio addon that will run ink periodically, parse the output into JSON and sent it to HA via MQTT.
Its very much a hack job (esp the shell script that calls ink and mosquitto client for MQTT) but it works great for my Canon Pixma 5300, and supports HA MQTT autodiscovery - albeit in a ve…
I want the direction not to be up though
type: vertical-stack
cards:
- type: markdown
card_mod:
style: |
ha-card {
font-size: 15px;
margin-bottom: -10px;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
content: '{{ states(''sensor.hp_m118dw_modelno'') }}'
- type: entities
card_mod:
style: |
ha-card {
border-top: none;
border-radius: 0px 0px 10px 10px;
entities:
- entity: sensor.hp_laserjet_pro_m118_m119
name: Status
- entity: sensor.hp_laserjet_pro_m118_m119_uptime
name: Uptime
- entity: sensor.hp_m118dw_serialno
name: Serial Number
- entity: sensor.hp_m118dw_totalpagesprint
name: Total Pages Printed
- entity: sensor.hp_laserjet_pro_m118_m119_imaging_drum_hp_cf232a
name: Imaging Drum
- entity: sensor.hp_laserjet_pro_m118_m119_black_cartridge_hp_cf294a
name: Black
There is no bar-card in your code? Have you done any testing?
Here is an example in a vertical-stack
type: vertical-stack
cards:
- type: custom:bar-card
direction: right
entities:
- color: MediumTurquoise
entity: sensor.your_sensor
- color: MediumOrchid
entity: sensor.your_sensor
- color: Gold
entity: sensor.your_sensor
- color: Black
entity: sensor.your_sensor
- color: Black
entity: sensor.your_sensor
height: 30px
max: 100
min: 0
padding: 2px
target: 20
title_position: bottom
icon_position: inside
unit_of_measurement: '%'
width: 100%
Couple things I’d like to clean up.
I don’t like the fade look on the bar or the entity name
Can I get the entity name out of the bar? No name would be fine
Can I somehow make this look like one card?
type: vertical-stack
cards:
- type: markdown
card_mod:
style: |
ha-card {
font-size: 15px;
margin-bottom: -10px;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
content: '{{ states(''sensor.lexmark_mc3224i_modelno'') }}'
- type: entities
card_mod:
style: |
ha-card {
border-top: none;
border-radius: 0px 0px 10px 10px;
entities:
- entity: sensor.lexmark_mc3224i
name: Status
- entity: sensor.lexmark_mc3224i_uptime
name: Uptime
- entity: sensor.lexmark_mc3224i_serialno
name: Serial Number
- entity: sensor.lexmark_mc3224i_firmwarever
name: Firmware Version
- type: custom:bar-card
direction: right
entities:
- color: Magenta
entity: sensor.lexmark_mc3224i_magenta
- color: Yellow
entity: sensor.lexmark_mc3224i_yellow
- color: Cyan
entity: sensor.lexmark_mc3224i_cyan
- color: Black
entity: sensor.lexmark_mc3224i_black
height: 30px
max: 100
min: 0
padding: 2px
target: 20
title_position: bottom
icon_position: inside
unit_of_measurement: '%'
width: 100%
Removing the target line cleaned things up to my own liking. Now if just to make it look like one card vs two.
Replace the vertical stack with a custom: vertical-stack-in card
type: custom:vertical-stack-in-card
cards:
You can remove the name by using a blank name:' '
I added some controls for the fade if you want to play with them
type: custom:bar-card
direction: right
entities:
- color: Magenta
entity: sensor.lexmark_mc3224i_magenta
name: ' '
height: 30px
max: 100
min: 0
padding: 2px
target: 20
title_position: bottom
icon_position: inside
unit_of_measurement: '%'
width: 100%
card_mod:
style: |
bar-card-backgroundbar {
opacity: 85%;
filter: brightness(1);
}
thanks for the tip to remove the name. looks much better.
But as far as
type: custom:vertical-stack-in-card
cards:
If I do that at the top I get nothing. Should that be placed somewhere else?
type: custom:vertical-stack-in-card
cards:
- type: markdown
card_mod:
style: |
ha-card {
font-size: 15px;
margin-bottom: -10px;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
content: '{{ states(''sensor.lexmark_mc3224i_modelno'') }}'
- type: entities
card_mod:
style: |
ha-card {
border-top: none;
border-radius: 0px 0px 10px 10px;
entities:
- entity: sensor.lexmark_mc3224i
name: Status
- entity: sensor.lexmark_mc3224i_uptime
name: Uptime
- entity: sensor.lexmark_mc3224i_serialno
name: Serial Number
- entity: sensor.lexmark_mc3224i_firmwarever
name: Firmware Version
- type: custom:bar-card
direction: right
entities:
- color: Magenta
entity: sensor.lexmark_mc3224i_magenta
- color: Yellow
entity: sensor.lexmark_mc3224i_yellow
- color: Cyan
entity: sensor.lexmark_mc3224i_cyan
- color: Black
entity: sensor.lexmark_mc3224i_black
height: 30px
max: 100
min: 0
padding: 2px
target: 20
title_position: bottom
icon_position: inside
unit_of_measurement: '%'
width: 100%
All good – should be able to use this code with other cards.
Much appreciated
