No time to continue tonight.
Be careful, these are the old names.
It is necessary to adapt the ‘generic’ template to finish the job…
To share work already done
Left card
#left card
type: custom:button-card
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 0px
grid:
- grid-template-areas: '"item1" "item2" "item3" "item4" "item5" "item6"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
custom_fields:
item1:
card:
entity: sensor.canon_mg5700_series
name: Canon MG5750
template:
- icon_info
- generique
styles:
card:
- padding: 12px
type: custom:button-card
item2:
card:
type: custom:bar-card
name: BK
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: black
entities:
- entity: sensor.canon_mg5700_series_black_bk
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item3:
card:
type: custom:bar-card
name: B
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: black
entities:
- entity: sensor.canon_mg5700_series_black_pgbk
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item4:
card:
type: custom:bar-card
name: 'Y'
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(250,179,0)
entities:
- entity: sensor.canon_mg5700_series_yellow
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item5:
card:
type: custom:bar-card
name: M
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(248,75,122)
entities:
- entity: sensor.canon_mg5700_series_magenta
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item6:
card:
type: custom:bar-card
name: C
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(66,126,222)
entities:
- entity: sensor.canon_mg5700_series_cyan
style: |
bar-card-currentbar{
border: 0.01rem solid rgb(226,226,226);
}
bar-card-backgroundbar{
display: none;
}
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px 16px 16px;
}
animation:
state: 'off'
Right Card
type: custom:button-card
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 0px
grid:
- grid-template-areas: '"item1" "item2" "item3" "item4" "item5" "item6"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
custom_fields:
item1:
card:
entity: sensor.canon_mg5700_series
name: Canon MG5750
template:
- icon_info
- generique
styles:
card:
- padding: 12px
type: custom:button-card
item2:
card:
type: custom:bar-card
name: BK
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: black
entities:
- entity: sensor.canon_mg5700_series_black_bk
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item3:
card:
type: custom:bar-card
name: B
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: black
entities:
- entity: sensor.canon_mg5700_series_black_pgbk
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item4:
card:
type: custom:bar-card
name: 'Y'
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(250,179,0)
entities:
- entity: sensor.canon_mg5700_series_yellow
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item5:
card:
type: custom:bar-card
name: M
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(248,75,122)
entities:
- entity: sensor.canon_mg5700_series_magenta
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px;
}
animation:
state: 'off'
item6:
card:
type: custom:bar-card
name: C
height: 20px
positions:
name: outside
value: outside
icon: 'off'
indicator: 'off'
minmax: 'off'
color: rgb(66,126,222)
entities:
- entity: sensor.canon_mg5700_series_cyan
style: |
bar-card-name{
width: 2rem;
margin-right: 40px !important;
}
bar-card-value{
width: 2rem;
margin-left: 40px !important;
justify-content: center;
display: flex;
}
bar-card-background{
margin: 4px 0 4px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 5px;
border-radius: 0px;
box-shadow: none;
}
#states{
padding: 0 16px 16px 16px;
}
animation:
state: 'off'