[P036][P023] Show current on-display content on Devices page

[tonhuisman]

Resolves #4552

P036 - Display - OLED SSD1306/SH1106 Framed
P023 - Display - OLED SSD1306

Features:

• Show current on-display content on the Devices overview page (Values column)
• Font-size is reduced to 75% for the shown content
• Applied also to P023 - Display - OLED SSD1306
• P023: Manually set content via oled,x,y,<content> is also included on the Devices page
• P023: Trailing empty lines are omitted from the Devices page display to conserve space
• Make Interval optional
• P036: Center- and Right-alignment is applied in preview
• P036: Alignment-feature is excluded from ESP8266 1M builds

Known issue(s):

• P036: During scrolling the content won't update when reloading the page
• The Devices page isn't updated when the on-display content changes (generic 'issue', not related to this plugin or code)
• P036: If the display is turned off (f.e. via the timeout) the content isn't updated

TODO:

• Update documentation
  • P036
  • P023
• Testing by requester local testing done (as the requester hasn't yet responded after several requests)
• Investigate if (some) formatting can be applied: Center- and Right-aligned is applied.

[chromoxdor]

Investigate if (some) formatting can be applied

Proposal:

html:

<td>
    <div class="oled">
        <div style="font-size:75%;padding: 2px;">1: The Framed OLED plugin does allow a bit </div>
        <div style="font-size:75%;padding: 2px;">2: more fancy look and feel compared to P023 OLED.</div>
        <div style="font-size:75%;padding: 2px;">4: OLED SSD1306/SH1106 Framed</div>
        <div style="font-size:75%;padding: 2px;">5: The maximum number of ‘Lines per frame’ depends on the disp</div>
    </div>
</td>

css:

.oled {
    background: black;
    border-radius: 5px;
    padding: 4px;
    overflow: auto;
    white-space: nowrap;
    text-align: left;
    max-width: fit-content;
    margin: auto;
}

Problem is, that the last column is not limited in width anymore when the device is active. More css could maybe help but is not preferred. I f have to think about it a little more....

[chromoxdor]

Or with no extra css:

<td>
    <div class="div_r" style="white-space:nowrap;text-align:left;">
        <div style="font-size:75%;padding: 2px;">1: The Framed OLED plugin does allow a bit </div>
        <div style="font-size:75%;padding: 2px;">2: more fancy look and feel compared to P023 OLED.</div>
        <div style="font-size:75%;padding: 2px;">4: OLED SSD1306/SH1106 Framed</div>
        <div style="font-size:75%;padding: 2px;">5: The maximum number of ‘Lines per frame’ depends on the disp</div>
    </div>
</td>

[tonhuisman]

<div class="div_r" 

I've used div_l on purpose so far, only reduced to 75% font-size, as that doesn't have the white on green text. I've tried to avoid additional css, as IMHO it's not about mimicking the exact display (what to do with those yellow/blue displays...), but to have an indication what's currently on-display.

And adding the line-numbers doesn't really match with what's on-display... though I do see what the advantage could be, but I'm not sure if it is really needed. And I'd number them 1, 2, 3, 4 not 1, 2, 4, 5... 😆 For P023 it would be 1..8.
And it really does need a pre element around the outer div to get any (multiple) spaces in the content rendered similar to on the display.

[tonhuisman]

Investigate if (some) formatting can be applied

I was more thinking about the centered/right aligned text, and possibly the increased font-size, as available per line on P036.

[chromoxdor]

I was more thinking about the centered/right aligned text, and possibly the increased font-size, as available per line on P036.

Oh.. i get it 😳

Anyhow, the formatting looks strange right now... there is a gap between line 2 and 3

[tonhuisman]

Anyhow, the formatting looks strange right now... there is a gap between line 2 and 3

That could be a browser thing, can't tell from here, but if your third line is empty in the configuration, then you should expect an empty line here, again that pre element, but also what you'd want to see here.

[chromoxdor]

That could be a browser thing,

Jep, it was 🙄
Sorry for spamming this conversation with unnecessary stuff...
Go ahead, you´re doing great work here 🙂