HP Printer - List Item Widget

SCR-20220926-eel

Here’s my widget inspired on https://community.openhab.org/t/list-item-widget-for-hp-printer/135067 - an UI List Item Widget to view the HP Printer. It has couple of things fixed and simplified toner state display.

Screenshots
printer_widget

SCR-20220926-ec0

However, it doesn’t limit you to that particular printer binding. All you you need is:

  • Items representing toner levels
  • Items representing the state of the tray and pages counter
  • Item representing printer state

Prerequisites:

  • Use only with List Card (configured to as Accordion and Media List)
  • Network binding to provide network status of the printer

Config params:

  • Printer title string
  • Optionally, icon representing printer
  • Label for the “Total lifetype pages”
  • Label for “Tray Empty/Open”

Network binding items:

  • Printer network state item (online/offline)

Printer binding items:

  • Printer status Item (Idle, Initializing, Online, etc.)
  • Black Toner level item
  • Cyan Toner level item
  • Magenta Toner level item
  • Yellow Toner level item
  • Total lifetype pages item
  • Printer jams counter item
  • Printer missed picks item

Todo

  • Add warnings indicator in case of low toner or tray open/empty
  • Provide standalone version of the widget

Changelog

Version 0.1

  • Initial release

Resources

uid: mcz_hp_printer_list_item_widget
tags:
  - list
  - printer
props:
  parameters:
    - default: HP Printer
      label: Title
      name: printerTitle
      required: false
      type: TEXT
      groupName: header
    - default: f7:printer_fill
      description: Printer Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: IconPrinter
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: Printer Network State item
      label: Item
      name: PrinterNetworkStateItem
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: Printer Status item
      label: Item
      name: PrinterStatusItem
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: Black Toner Level Item
      label: Item
      name: BlackLevelItem
      required: true
      type: TEXT
      groupName: toner
    - context: item
      description: Cyan Toner Level Item
      label: Item
      name: CyanLevelItem
      required: true
      type: TEXT
      groupName: toner
    - context: item
      description: Magenta Toner Level Item
      label: Item
      name: MagentaLevelItem
      required: true
      type: TEXT
      groupName: toner
    - context: item
      description: Yellow Toner Level Item
      label: Item
      name: YellowLevelItem
      required: true
      type: TEXT
      groupName: toner
    - default: Total Lifetime Pages
      description: Total LifeTime pages title
      label: Title
      name: TotalPagesTitle
      required: false
      type: TEXT
      groupName: pages
    - context: item
      description: Total Lifetime Pages item
      label: Item
      name: TotalLifetimePagesItem
      required: false
      type: TEXT
      groupName: pages
    - default: Tray Empty/Open
      description: Tray Empty/Open Title
      label: Title
      name: errors
      required: false
      type: TEXT
      groupName: errors
    - context: item
      description: Tray Empty/Open item
      label: Item
      name: TrayEmtpyOpenItem
      required: false
      type: TEXT
      groupName: errors
    - context: item
      description: Jams item
      label: Item
      name: JamsItem
      required: false
      type: TEXT
      groupName: errors
    - context: item
      description: Missed Picks item
      label: Item
      name: MissedPicksItem
      required: false
      type: TEXT
      groupName: errors
  parameterGroups:
    - name: header
      label: Header
    - name: toner
      label: Toner Level
    - name: pages
      label: Pages
    - name: errors
      label: Tray & Missed Picks
timestamp: Sep 26, 2022, 10:14:28 AM
component: oh-list-item
config:
  icon: =props.IconPrinter
  iconColor: '=(items[props.PrinterNetworkStateItem].state == "OFF") ? "red" : "green"'
  style:
    --f7-list-item-after-font-size: 16px
    --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(80,80,80)'"
  subtitle: '=((items[props.PrinterNetworkStateItem].state == "OFF") ? "Offline - " : "Online - ") + (items[props.PrinterStatusItem].displayState)'
  title: =props.printerTitle
slots:
  accordion:
    - component: f7-list
      config:
        mediaList: true
        style:
          background-color: "=themeOptions.dark === 'dark' ? 'rgb(35, 35, 35)' : 'rgb(247, 247, 247)'"
      slots:
        default:
          - component: f7-list-item
            config:
              class:
                - black-toner-level
              style:
                - margin-right: -25px
            slots:
              content:
                - component: f7-list-item-row
                  slots:
                    default:
                      - component: f7-list-item-cell
                        config:
                          style:
                            width: 10px
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: "=themeOptions.dark === 'dark' ? 'gray' : 'black'"
                                icon: f7:drop_fill
                                height: 32px
                                width: 32px
                                font-size: 32px
                      - component: f7-list-item-cell
                        config:
                          style:
                            margin-left: 32px
                            width: 100%
                        slots:
                          default:
                            - component: f7-progressbar
                              config:
                                progress: =Number(items[props.BlackLevelItem].state.split(' ')[0])
                                style:
                                  --f7-progressbar-height: 26px
                                  --f7-theme-color: rgb(0, 0, 0)
                      - component: f7-list-item-cell
                        config:
                          style:
                            width: 0px
                        slots:
                          default:
                            - component: f7-list-item
                              config:
                                title: =items[props.BlackLevelItem].state
                                class:
                                  - float-right
                                style:
                                  --f7-list-item-title-font-size: 13px
                                  margin-top: 5px
                                  margin-right: 13px
          - component: f7-list-item
            config:
              class:
                - cyan-toner-level
              style:
                - margin-right: -25px
            slots:
              content:
                - component: f7-list-item-row
                  slots:
                    default:
                      - component: f7-list-item-cell
                        config:
                          style:
                            width: 10px
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: blue
                                icon: f7:drop_fill
                                height: 32px
                                width: 32px
                                font-size: 32px
                      - component: f7-list-item-cell
                        config:
                          style:
                            margin-left: 32px
                        slots:
                          default:
                            - component: f7-progressbar
                              config:
                                progress: =Number(items[props.CyanLevelItem].state.split(' ')[0])
                                style:
                                  --f7-progressbar-height: 26px
                                  --f7-theme-color: rgb(0, 100, 200)
                      - component: f7-list-item-cell
                        config:
                          style:
                            width: 0px
                        slots:
                          default:
                            - component: f7-list-item
                              config:
                                title: =items[props.CyanLevelItem].state
                                class:
                                  - float-right
                                style:
                                  --f7-list-item-title-font-size: 13px
                                  margin-top: 5px
                                  margin-right: 13px
          - component: f7-list-item
            config:
              class:
                - magenta-toner-level
              style:
                - margin-right: -25px
            slots:
              content:
                - component: f7-list-item-row
                  slots:
                    default:
                      - component: f7-list-item-cell
                        config:
                          style:
                            width: 10px
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: purple
                                icon: f7:drop_fill
                                height: 32px
                                width: 32px
                                font-size: 32px
                      - component: f7-list-item-cell
                        config:
                          style:
                            margin-left: 32px
                        slots:
                          default:
                            - component: f7-progressbar
                              config:
                                progress: =Number(items[props.MagentaLevelItem].state.split(' ')[0])
                                style:
                                  --f7-progressbar-height: 26px
                                  --f7-theme-color: rgb(255, 0, 255)
                      - component: f7-list-item-cell
                        config:
                          style:
                            width: 0px
                        slots:
                          default:
                            - component: f7-list-item
                              config:
                                title: =items[props.MagentaLevelItem].state
                                class:
                                  - float-right
                                style:
                                  --f7-list-item-title-font-size: 13px
                                  margin-top: 5px
                                  margin-right: 13px
          - component: f7-list-item
            config:
              class:
                - yellow-toner-level
              style:
                - margin-right: -25px
            slots:
              content:
                - component: f7-list-item-row
                  slots:
                    default:
                      - component: f7-list-item-cell
                        config:
                          style:
                            width: 10px
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: yellow
                                icon: f7:drop_fill
                                height: 32px
                                width: 32px
                                font-size: 32px
                      - component: f7-list-item-cell
                        config:
                          style:
                            margin-left: 32px
                        slots:
                          default:
                            - component: f7-progressbar
                              config:
                                progress: =Number(items[props.YellowLevelItem].state.split(' ')[0])
                                style:
                                  --f7-progressbar-height: 26px
                                  --f7-theme-color: rgb(255, 255, 0)
                      - component: f7-list-item-cell
                        config:
                          style:
                            width: 0px
                        slots:
                          default:
                            - component: f7-list-item
                              config:
                                title: =items[props.YellowLevelItem].state
                                class:
                                  - float-right
                                style:
                                  --f7-list-item-title-font-size: 13px
                                  margin-top: 5px
                                  margin-right: 13px
          - component: oh-label-item
            config:
              icon: f7:doc_on_doc
              iconColor: gray
              item: =props.TotalLifetimePagesItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              title: =props.TotalPagesTitle
          - component: oh-label-item
            config:
              icon: f7:exclamationmark_circle
              iconColor: gray
              item: =props.TrayEmtpyOpenItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-subtitle-font-size: 14px
                --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              subtitle: ="Jams:" + " " + items[props.JamsItem].state + " / " + "Missed Picks:" + " " + items[props.MissedPicksItem].state
              title: =props.errors

4 Likes