Thanks for sharing this great looking solution.
One question how do I add a extra color my printer uses 3 collor and 2 black cardridges
1 Like
Thanks, I’m glad you found it useful 
I’m assuming the line through your question means you figured it out, but for the benefit of anyone else wondering how to do that:
- in
custom_fieldsadd another custom field for the extra ink type (simply copy one of the existing and change the custom field name, color variable and entity appropriately, for examplek:tok2:) - do the same in the
styles:custom_fields:to copy the style - add your custom field name to the
grid-template-areasvalue in the1st row, and add another s to the 2nd row to balance the columns
example:'"i c m y k k2" "n s s s s s"'
If you aren’t familiar with grid-template-areas, this page may help.
1 Like
Thanks. With some small modifications I managed to squeeze in the 10 inkwells of my Canon Pro-10.
8 Likes
Nice! I’ve never seen that many ink cartridges on a printer LOL
5 Likes
Hi Keith,
Thank you for very good post. Really usefull!
I am currently reading the documentatin on custom button card but can you describe the implemantation of the button card template? Not really clear for me.
Kr,
JP
The button card templates need to go in your raw dashboard config, typically at the top. If you use the UI to design your dashboards, first get into edit mode in the UI, then click the same 3-dot menu icon again and choose Raw configuration editor. I usually put it right below the title property. Just add a new property button_card_templates: and below it you define your named templates.
You define the template the same as you would if you were using the element in your dashboard, but you leave out the settings that would change (like entity). Then, when you use a custom button card in your dashboard you simply refer to your template by name in the template setting and add the unique settings for that button.
Hopefully that is helpful. I remember when I was getting it figured out I was a bit confused where to put the templates as well.
2 Likes
@ktownsend-personal!
Thank you so much for your support and the detailed explanation! It works. 
1 Like
Nice one, got this working after adding all the dependencies via HACS. Using another post that I got working first 
I might try combining the two!
1 Like
Oh do you mean my avatar? that’s just a photo of the Las Vegas sign that took while on a trip there back in 2009, have been back twice since!
I meant the icon on your ink color. It’s different than the standard water droplet icon that I’m getting on my ink level sensors. Your icon looks more like an ink jet and I like it.
Oh, that’s just because I merged the two types of methods I think. I really don’t know why:(
Here’s my Lovelace raw config:
- title: Test
badges: []
cards:
- type: entities
entities:
- sensor.mfc_j6930dw_b_w_counter
- sensor.mfc_j6930dw_black_ink_remaining
- sensor.mfc_j6930dw_color_counter
- sensor.mfc_j6930dw_cyan_ink_remaining
- sensor.mfc_j6930dw_duplex_unit_pages_counter
- sensor.mfc_j6930dw_magenta_ink_remaining
- sensor.mfc_j6930dw_page_counter
- sensor.mfc_j6930dw_status
- sensor.mfc_j6930dw_yellow_ink_remaining
- title: Office
path: office
badges: []
cards:
- cards:
- cards:
- entities:
- entity: sensor.mfc_j6930dw_status
type: glance
- entity: sensor.mfc_j6930dw_status
type: entity
type: horizontal-stack
- cards:
- cards:
- columns: 4
direction: up
entities:
- color: MediumTurquoise
entity: sensor.mfc_j6930dw_cyan_ink_remaining
name: Cyan
- color: MediumOrchid
entity: sensor.mfc_j6930dw_magenta_ink_remaining
name: Magenta
- color: Gold
entity: sensor.mfc_j6930dw_yellow_ink_remaining
name: Yellow
- color: Black
entity: sensor.mfc_j6930dw_black_ink_remaining
name: Black
height: 200px
max: 100
min: 0
padding: 2px
type: 'custom:bar-card'
unit_of_measurement: '%'
width: 100%
title: Brother Printer Ink Levels
type: 'custom:vertical-stack-in-card'
type: horizontal-stack
- entities:
- entity: sensor.mfc_j6930dw_page_counter
name: Pages Printed
- entity: sensor.mfc_j6930dw_b_w_counter
name: B/W Printed
- entity: sensor.mfc_j6930dw_color_counter
name: Color Printed
type: glance
type: vertical-stack
- type: entities
entities:
- switch.aceswitch01
- type: entities
entities:
- fan.acefan34
- type: 'custom:button-card'
entity: sensor.mfc_j6930dw_status
name: MFC J6930DWWF-3540
color: gray
show_state: true
styles:
card:
- padding: 0 0 5px 0
icon:
- width: 100%
state:
- text-align: left
- width: 100%
grid:
- grid-template-areas: '"i c m y k" "n s s s s"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: auto 1em
custom_fields:
k:
- width: 80%
- margin: auto
c:
- width: 80%
- margin: auto
m:
- width: 80%
- margin: auto
'y':
- width: 80%
- margin: auto
custom_fields:
k:
card:
type: 'custom:button-card'
template: inkwell
entity: sensor.mfc_j6930dw_black_ink_remaining
variables:
color: black
c:
card:
type: 'custom:button-card'
template: inkwell
entity: sensor.mfc_j6930dw_cyan_ink_remaining
variables:
color: cyan
m:
card:
type: 'custom:button-card'
template: inkwell
entity: sensor.mfc_j6930dw_magenta_ink_remaining
variables:
color: magenta
'y':
card:
type: 'custom:button-card'
template: inkwell
entity: sensor.mfc_j6930dw_yellow_ink_remaining
variables:
color: yellow
button_card_templates:
inkwell:
show_name: false
show_state: true
extra_styles: |
[[[ return `
@keyframes pulse {
5% {
background-color: ${variables.color};
}
}
`]]]
styles:
icon:
- opacity: 0.7
- color: '[[[ return variables.color ]]]'
- filter: 'drop-shadow( 0 0 2px rgba(0, 0, 0, .7))'
state:
- font-size: 1.5em
- font-weight: bold
- text-shadow: 0 0 6px black
- overflow: visible
card:
- border: solid 3px gray
- border-top: none
- background: |
[[[
var level = entity.state;
var color = variables.color;
return `linear-gradient(to top, ${color}, ${color} ${level}%, rgba(255,255,255,0.12) ${level}%)`
]]]
- animation: |
[[[
return (0 + entity.state) < 10
? 'pulse ease-in-out 1s infinite'
: 'none'
]]]
The icon must be coming from your ink sensors. I’ll have to do some icon hunting and see if I can find it.
Thank you, it looks great. I modified it slightly to fit my theme:
Thanks!!!
1 Like
It looks good in that arrangement 
It occurs to me that the black ink icon and label could use a gray drop-shadow so it is visible when the ink is full. Perhaps a gray shadow would look good for all the colors. My black ink has been nearly empty for a long time, so I hadn’t noticed that before.
I agree
I would do it but my CSS is not so proficient as yours. If you add it please let me know 
With the possibility of having more than one printer, I tried to create a template based on your printer card (so there wouldn’t be so much duplicated code). Either I lack the necessary skills at abstraction (a distinct possibility) or Lovelace/JavaScript/CSS/HTML is allergic to “entity inception.” Whatever the case, I couldn’t get the sub-entities (ink level sensors) to work through a card calling a printer-tile template which in turn calls an inkwell template.
So, instead of your very elegant code for inkwells, I went with a more basic text color coding. The result you can see below, nestled snugly within my UI (which you have been instrumental in helping me create).
Here's the coding:
printer-tile:
color_type: card
aspect_ratio: 3/2
variables:
m1_entity: sensor.epson_wf_3820_series_black_ink
m2_entity: sensor.epson_wf_3820_series_cyan_ink
m3_entity: sensor.epson_wf_3820_series_magenta_ink
m4_entity: sensor.epson_wf_3820_series_yellow_ink
styles:
card:
- background-color: |
[[[
if (entity.state == 'idle') return 'grey';
else return 'yellow';
]]]
- border-radius: 0%
- padding: 1%
- color: ivory
- font-size: 10px
- text-transform: capitalize
grid:
- grid-template-areas: '"n n n m1 m1" "i i i m2 m2" "i i i m3 m3" "stat stat stat m4 m4"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 0px
img_cell:
- justify-content: start
- align-items: start
- margin: 0%
icon:
- color: darkSlateGrey
- width: 70%
- margin-top: 0%
custom_fields:
stat:
- font-size: 13px
- align-self: middle
- width: 70%
- justify-self: middle
m1:
- align-self: middle
- justify-self: start
m2:
- align-self: middle
- justify-self: start
m3:
- align-self: middle
- justify-self: start
m4:
- align-self: middle
- justify-self: start
custom_fields:
stat: '[[[ return `<span>${entity.state}</span>` ]]]'
m1: |
[[[
var level = states[variables.m1_entity].state;
var color = 'crimson';
if (level > 10) color = 'yellow';
if (level > 25) color = 'lightGreen';
if (level > 50) color = 'white';
return `<ha-icon icon="mdi:water"
style="width: 14px; height: 14px; color: black;">
</ha-icon><span style="color: ${color};">${level}%</span>`
]]]
m2: |
[[[
var level = states[variables.m2_entity].state;
var color = 'crimson';
if (level > 10) color = 'yellow';
if (level > 25) color = 'lightGreen';
if (level > 50) color = 'white';
return `<ha-icon icon="mdi:water"
style="width: 14px; height: 14px; color: cyan;">
</ha-icon><span style="color: ${color};">${level}%</span>`
]]]
m3: |
[[[
var level = states[variables.m3_entity].state;
var color = 'crimson';
if (level > 10) color = 'yellow';
if (level > 25) color = 'lightGreen';
if (level > 50) color = 'white';
return `<ha-icon icon="mdi:water"
style="width: 14px; height: 14px; color: magenta;">
</ha-icon><span style="color: ${color};">${level}%</span>`
]]]
m4: |
[[[
var level = states[variables.m4_entity].state;
var color = 'crimson';
if (level > 10) color = 'yellow';
if (level > 25) color = 'lightGreen';
if (level > 50) color = 'white';
return `<ha-icon icon="mdi:water"
style="width: 14px; height: 14px; color: yellow;">
</ha-icon><span style="color: ${color};">${level}%</span>`
]]]
…and here’s how it’s used as a card:
- entity: sensor.epson_wf_3820_series
name: WF-3820
template: printer-tile
type: 'custom:button-card'
variables:
m1_entity: sensor.epson_wf_3820_series_black_ink
m2_entity: sensor.epson_wf_3820_series_cyan_ink
m3_entity: sensor.epson_wf_3820_series_magenta_ink
m4_entity: sensor.epson_wf_3820_series_yellow_ink
2 Likes
That’s a nice looking compact printer display
I may have to add that to my templates 