Habpanel PrinterStatus widget

widget
widgetgallery
Tags: #<Tag:0x00007fd316e48130> #<Tag:0x00007fd316e4ff20>

(Max1968) #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:

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 ?


(Yannick Schaus) #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.


(Max1968) #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:


(Johannes) #4

Hi Max,

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

Thank you

Johannes


(Dezito) #5

Can you plz share this widget


(M Z) #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">
[...]

(Yannick Schaus) #7

Good to know, thanks :thumbsup:


(Sandor) #8

hi,

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

thx