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 
Looks absolutely great, to have it in this “small footprint”.
After some “fumbling around” I got the version on the original post working, but think I am missing some “vital hints” to get this minimal version running.
Because if I take the “easy route” and just copy/paste it into the “raw editor” it clearly states that it is not really happy.
Would it be possible to add couple of hints for the newbie I am 
Thanks,
Well, this card also requires the custom:button-card add-on (but if you have the original post working, you already have that). To be more clear on the two segments of code, the first is pasted in very early on in your raw configuration. It could be right after the “button_card_templates:” line or later, but before the
title: Home
views:
- title: Main
part. (Your config might have a different title or view title.)
The second part goes into one of your views.
As an example, it might look like this:
title: Home
swipe_nav:
wrap: true
animate: swipe
views:
- title: Main
path: main
badges: []
cards:
- type: grid
columns: 1
square: false
cards:
- type: grid
columns: 3
square: false
cards:
- entity: sensor.epson_wf_3829_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
The “grid” bits are because my UI has a “phone screen” aspect to it so I put everything into a single vertical box and then parse out the rows in 2, 3, or 4 subdivisions but the point here is that that second bit of code goes into one of your Lovelace views as a card. Let me know if that helps.