Printer ink levels widget

Add-ons UIs
1

I wanted to create a simple widget to display the ink levels of my printer, also for trying to create a widget without copy/paste from someone else and not knowing what I’m doing :slight_smile:

So I have some additional questions:

  • How can I use the items from the parameters in actionAnalyzerItems, it works when I hardcode items (like I did fot the black color), but no graphs when defining eg =props.yellow
  • How can I remove the (thin) black line under each label?
  • How can I set colors with rgb values? Now I’m limited to the f7 color I think and offcourse I want to set the correct colors :slight_smile:
  • As you see in the screenshots, there is a lot of spacing between the labels (columns), how can I reduce this, or is there a better way to handle this?

I know I have a lot of repetitive code, so I’m sure there’s room for improvements.

Thanks!

image

image

image

uid: ink_levels_card
tags: []
props:
  parameters:
    - context: item
      description: Black ink level item
      label: Black ink level
      name: black
      required: true
      type: TEXT
    - context: item
      description: Yellow ink level item
      label: Yellow ink level
      name: yellow
      required: false
      type: TEXT
    - context: item
      description: Magenta ink level item
      label: Magenta ink level
      name: magenta
      required: false
      type: TEXT
    - context: item
      description: Cyan ink level item
      label: Cyan ink level
      name: cyan
      required: false
      type: TEXT
    - context: item
      description: Waste ink level item
      label: Waste ink level
      name: waste
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 10, 2022, 9:48:12 AM
component: f7-card
config:
  title: Ink levels
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-label-card
                  config:
                    icon: f7:drop
                    iconColor: black
                    item: =props.black
                    action: analyzer
                    actionAnalyzerItems:
                      - epsonWF2880_inkLevelK
                      - epsonWF2880_inkLevelY
                      - epsonWF2880_inkLevelM
                      - epsonWF2880_inkLevelC
          - component: f7-col
            slots:
              default:
                - component: oh-label-card
                  config:
                    icon: f7:drop
                    iconColor: yellow
                    item: =props.yellow
                    action: analyzer
                    actionAnalyzerItems:
                      - =props.yellow
          - component: f7-col
            slots:
              default:
                - component: oh-label-card
                  config:
                    icon: f7:drop
                    iconColor: purple
                    item: =props.magenta
                    action: analyzer
                    actionAnalyzerItems:
                      - =props.magenta
          - component: f7-col
            slots:
              default:
                - component: oh-label-card
                  config:
                    icon: f7:drop
                    iconColor: lightblue
                    item: =props.cyan
                    action: analyzer
                    actionAnalyzerItems:
                      - =props.cyan
          - component: f7-col
            slots:
              default:
                - component: oh-label-card
                  config:
                    icon: f7:trash
                    iconColor: gray
                    item: =props.waste
                    action: analyzer
                    actionAnalyzerItems:
                      - =props.waste