Habpanel PrinterStatus widget

Apps & Services HABPanel
,
1

I’m trying to create a printer status widget, supposed to show ink levels as well as general status.

EDIT: @yes corrected my version of the widget, see

below - Exactly what I intended. Use the version from his post instead of my “draft” here :slight_smile:

What I have so far is this, two instances of the widget here showing two printers:

Pasted image468×527 11.1 KB

And here is my template:

PrinterStatus.widget.json (2.8 KB)

I’m struggling in several areas here:

  1. The height of the table in total should match the total size of the widget, something like 10% for the first line, about 20% for the last two lines and the remaining for the ink level diagrams - My table either gets too short or too tall, depending on what i try ?

  2. I’m not able to use my defined variables (values are shown in the first row) to size the ink bars. When I enter the values directly in my template it works fine, either as % or px, but when i try to reference the variables I only get these full size bars. I think I’ve tried almost all combinations of (curly) braces and such, to no avail

  3. I’d like to color the value of the last row of the table based on the setting of printer_status. In case it is “Warning” it should be yellow, in case of “Error” it should be red, and in all other case it should look like above. As above, i think I’ve tried many ways to achieve this, but again i didnt manage to reference my variables

  4. Last but not least i’d like to add a printer icon somewhere, preferably in the lower left corner. How can I make this configurable as with the predefined widgets ?

I need some push into the right direction, but would like to solve these issues myself and learn from it. I thought I had some (old) basic knowledge of html and css, but this seems insufficient. Any hint on where to start to get some better understanding ?

2 Likes
2

Good start! Interesting use case and a nice showcase of the possibilities offered by this feature. I played a little bit with it & ended up fixing a few things for you:

<style>
  .printer-table {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      text-align: center;
  }

  .ink {
      float: left;
      width: 100%;
      height: 100%;
  }

  .bar {
      height: calc(100%);
      vertical-align: bottom;
  }

  .black {
      background: black;
  }

  .yellow {
      background: yellow;
  }

  .cyan {
      background: cyan;
  }

  .magenta {
      background: magenta;
  }

  .printer-table table, th, td {
      border: 1px solid white;
  }

  .printer-table th, td {
      padding: 5px;
  }

  .printer-status-Warning {
      color: yellow;
  }

  .printer-status-Error {
      color: red;
  }
</style>

<table class="printer-table">
  <tr>
    <td colspan="4" style="text-align: left">
      {{config.printer_name}}
      </td>
  </tr>

  <tr>
    <td>
      	B
      {{itemValue(config.printer_ink_black) }}
    </td>
    <td>
      	Y
      {{itemValue(config.printer_ink_yellow) }}
    </td> 
    <td>
      	C
      {{itemValue(config.printer_ink_cyan) }}
    </td>
    <td>
      	M
      {{itemValue(config.printer_ink_magenta) }}
    </td>
  </tr>
  
  <tr class="bar">
    <td>
      	<div class="ink black" ng-style="{ height: itemValue(config.printer_ink_black) + '%' }"></div>
    </td>
    <td>
      	<div class="ink yellow" ng-style="{ height: itemValue(config.printer_ink_yellow) + '%' }"></div>
    </td>
    <td>
      	<div class="ink cyan" ng-style="{ height: itemValue(config.printer_ink_cyan) + '%' }"></div>
    </td>
    <td>
      	<div class="ink magenta" ng-style="{ height: itemValue(config.printer_ink_magenta) + '%' }"></div>
    </td>
  </tr>
  
  <tr>
    <td colspan="4" ng-class="'printer-status-' + itemValue(config.printer_status)" style="text-align: right">
      <widget-icon style="float: left" iconset="'freepik-gadgets'" icon="'printing-document'" size="40" colorize="false"></widget-icon>
      <div>{{itemValue(config.printer_status)}}</div>
      <div>{{itemValue(config.printer_status_text)}}</div>
    </td> 
  </tr>
</table>

PrinterStatus.widget.json (3.3 KB)

(would be cool if you could update your original post with the updated version ;))

Currently you cannot put icon pickers like the standard widgets in your own configuration screens, but I’m considering it.

3

Perfect, thats exactly what I wanted :slight_smile:

I’ve some other ones in the pipeline, similar to the one I published here for the Nuki Lock, but for multiple sensors. I will try to find some time to optimize them during the weekend and publish them too, and also your corrected version of the printer status.

I also have a 3 row version for 6 devices, I use these for my Aeon Multisensors, Netatmo Stations as well as some Server stats. I will try to understand what you chnaged with the printer widget as these have some similar issues, furthermore I want to make the text somehow “sprintfable” so there is eg “°C” after the temperature or “mm” after the rain or such.
Thx again, habpanel is really cool :slight_smile:

1 Like
4

Hi Max,

You multisensor widget looks very cool. Could you provide the widget file to us?

Thank you

Johannes

5

Can you plz share this widget

6

Hi Yannick, thanks for sharing. In order to have the same result in Firefox (v.52) I had to add a 100% height class to the td elements of the “bar” row as well, i.e.

<style> 
  .full-height {
  	height: 100%;
  }
</style>
[...]
  <tr class="bar">
    <td class="full-height">
[...]
1 Like
7

Good to know, thanks :thumbsup:

8

hi,

It is working but colors are not populated in table.
What can be a problem?

thx

9

Hello, I would like to install this widget, but I cannot find any instructions. My network printer is Epson WF-3520. Where can I find installation instructions? thx

10

Welcome to openHAB.
Please always look at the docs first:

11

I did that, but I didn’t find it!

12

I need installation instructions for Habpanel PrinterStatus widget! Unfortunately, this cannot be found under the link provided. Why is the widget printer status recommended by openhab in the gallery? So it is useless.

thx

13

Hold your breath, man.

The link provided shows how to add a custom widget. So download the widget from the post above, go to your dashboard and import that widget:

grafik

grafik

14

why are you annoyed? I thought I would be helped here. The link is not my problem, it’s the settings.

pic
pic1025×746 32.6 KB

15

Can’t help with that as I am not using that widget.
But putting weather items in a printer status widget can’t be right.

16

I don’t want to insert weather elements either, they are displayed automatically. Any reference to the printer is missing. Therefore I ask for instructions.

PS. Items are usually selected where the weather elements can be seen. But there are no such for a printer. Maybe the developer has an explanation.

thx

17

You need to find a binding which is able to read your printer data/status/whatever.
Then you need to create Things (for V2 bindings, V1 bindings are a different story), connect the available Channels to Items and those Items need to be selected in the widget.

Usually there is no need to ask the developer for configuring any bindings. What binding are we talking about?

18

Sorry, I have already installed a complicated widget, but there were also instructions. Too bad I didn’t know it was that complicated. But I notice that you are not familiar with it either. So we forget the whole thing.

thx