IPP printer sensors with custom button-card

Share your Projects! Dashboards & Frontend
1

I created a decent looking printer ink status using a custom button-card and the IPP integration sensors that seems worth sharing.

printer ink UI for home assistant

To make this work, I have a template for each inkwell, and a main button-card to contain all the inkwells and show current printer status.

The inkwell template handles the ink level display, and will flash when below 10% to catch your attention. It expects an entity for the ink sensor and a color to show.

inkwell template 
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 main card handles the layout and 5 different entities, one for the printer status and 4 for the ink status.

main button card 
type: custom:button-card
entity: sensor.epson_wf_3540_series
name: WF-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.epson_wf_3540_series_black_ink
      variables:
        color: black
  c:
    card:
      type: custom:button-card
      template: inkwell
      entity: sensor.epson_wf_3540_series_cyan_ink
      variables:
        color: cyan
  m:
    card:
      type: custom:button-card
      template: inkwell
      entity: sensor.epson_wf_3540_series_magenta_ink
      variables:
        color: magenta
  y:
    card:
      type: custom:button-card
      template: inkwell
      entity: sensor.epson_wf_3540_series_yellow_ink
      variables:
        color: yellow
16 Likes
2

Hi. This looks exactly what I need, but I’m not too familiar with lovelace templates - how do I install this?

Thanks

3

This uses the custom button card, which is installable via HACS, or can be installed manually. That card supports templating itself, rather than being a Lovelace feature. It’s a very powerful card. I have been able to make some really nice dashboards with it. I highly recommend reading the documentation at that link and experimenting with it.

4

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
6

Thanks, I’m glad you found it useful :slight_smile:

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:

  1. in custom_fields add 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 example k: to k2:)
  2. do the same in the styles:custom_fields: to copy the style
  3. add your custom field name to the grid-template-areas value 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
7

Thanks. With some small modifications I managed to squeeze in the 10 inkwells of my Canon Pro-10.
inkwells

6 Likes
8

Nice! I’ve never seen that many ink cartridges on a printer LOL

4 Likes
9

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

10

@jpdraye,

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.

1 Like
11

@ktownsend-personal!
Thank you so much for your support and the detailed explanation! It works. :partying_face:

1 Like
12

Nice one, got this working after adding all the dependencies via HACS. Using another post that I got working first :slight_smile:

image

image
image519×721 54.3 KB

I might try combining the two!

1 Like
13

@mgguinne I’m glad you like it :slight_smile:
What icon is that you are using?

14

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!

15

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.

17

Oh, that’s just because I merged the two types of methods I think. I really don’t know why:(

18

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'
            ]]]
19

The icon must be coming from your ink sensors. I’ll have to do some icon hunting and see if I can find it.

20

@mgguinne, I found the icon. it’s mdi:printer-3d-nozzle.

21

Thank you, it looks great. I modified it slightly to fit my theme:
image

Thanks!!!

1 Like
22

It looks good in that arrangement :+1:
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. :slight_smile: