e-paper GDE021A1 display

[espruino-discuss2]

Posted at 2016-07-30 by MichaelPralow

for some projects i use a GDE021A1 e-paper display like this one: http://smart-prototyping.com/NOA-Labs/E-ink-E-paper-new-version-display-module-3.3V-2.04-inch-177x72.html

the provided resources - display specification, display driver specification and some arduino example code are really good, combined with the Espruino documentation i was able to get it running fast

i attached the javascript for anyone who wants a quick start

Attachments:

• GDE021A1-testground 2.js

[espruino-discuss2]

Posted at 2016-07-31 by @allObjects

Nice work...!

[gfwilliams]

Posted at 2016-07-31 by @gfwilliams

That's great! Thanks for posting up!

Would you mind if this got made into a proper module and put on the website at some point?

[espruino-discuss2]

Posted at 2016-08-01 by MichaelPralow

module is in the works :-)

[espruino-discuss2]

Posted at 2016-08-02 by Wilberforce

For the sake of brevity - it looks like there are quite a few constants that are not used!

You could also shorten - COMMAND_xx to say C_xxx.

@gordon - does the google closure compiler automatically do this - can the code above get passed through and then re-pretty printed to make it human readable again?

[gfwilliams]

Posted at 2016-08-02 by @gfwilliams

The closure compiler won't shorten any publically available names. Best thing is to make GDE021A1.prototype.C into just var C, and the compiler will then be able to shorten, inline, and even remove unused elements of that array automatically.

That way your could is easy to view and modify, and small. The only downside is that to add to it, you'd have to change the file itself rather than just adding a prototype.

[espruino-discuss2]

Posted at 2016-08-02 by MichaelPralow

i thought to be clear about the attached javascript in the first post, it is not a proper module, just an example which one can use to start, right now i am working on a code version which is more in line with a real module coding-style

For the sake of brevity - it looks like there are quite a few
constants that are not used!

i started with porting the complete SSD1606 diver specification, which provides a lot more than just displaying some values

You could also shorten - COMMAND_xx to say C_xxx.

for a proper module i thought of using

/**
 * ...doc for each command
 */
SSD1606.prototype.C = {
  cmd: new Uint8Array([
                      0x01,
                      0x02 // ... and so on
                      ]);
};

is that ok?

as a newbie i am not aware of e.g.

Best thing is to make GDE021A1.prototype.C into just var C

i started with http://www.espruino.com/Writing+Modules and will - when it's functional - apply http://www.espruino.com/Performance

Are there more places to get hints on best practices for programming Espruino?

[gfwilliams]

Posted at 2016-08-02 by @gfwilliams

I'm not really sure what the plan is with cmd: new Uint8Array?

I think really the goal is to ensure that the minimizer can actually totally inline the constants and then remove C altogether, so a Uint8Array may not help.

Having extra constants doesn't matter at all as long as they can get minimized away, in fact it's probably handy for people later on.

I think the Writing Modules and Performance pages are about all there is right now. To be honest the code you had already looks really good.

Things that'd make it a bit more efficient...

• Change sendCommandAndData to something with a short name, like scd - it's public so the name won't get changed, so the smaller it is the smaller the final code will be.
• There's no need to return; at the end of functions, you can just ditch that
• The var C thing
• Make lutRegisterData a Uint8Array and define it outside the function - that'll make a big difference to memory usage.
• If it's possible to use an arraybuffer Graphics instance, that'll be so much quicker than the callback one. It looks like a 2 bit instance would work fine - if the bytes are the wrong order you can define msb like:

 Graphics.createCallback(
            this.C.DISPLAY_SIZE_X,
            this.C.DISPLAY_SIZE_Y,
            2, {msb:true});

[espruino-discuss2]

Posted at 2016-08-02 by MichaelPralow

I'm not really sure what the plan is with cmd: new Uint8Array?

to change from

this.scd(this.C.CMD_SOMETHING, 0x00);

to

this.scd(this.C.cmd[5], 0x00);

thanks for the hints, i will implement them

Graphics Instance
The (hardware) display buffer needs 3096 bytes, where each byte represents 4 pixels, first pixel to the left. I already refactored the old code to use bitoperations (with bitmasks) instead of working with Strings.(obviously you did not see the old code) It is faster and right now the most time is used for the (hardware) display refresh itself.

Is that possible with the arraybuffer Graphics instance? I will try it at home, last time it did not work for me.

ps: afaik the Graphics instance would work with an Array with size 12384 (172*72) which is 4 times larger than my version with size 3096 and i guess it would send 12384 bytes instead of 3096?

[gfwilliams]

Posted at 2016-08-02 by @gfwilliams

this.scd(this.C.cmd[5], 0x00);

Ahh - I definitely wouldn't do that... it's probably less confusing to just write the actual number in there :) The first option (well, just C.CMD_SOMETHING) works well.

Is that possible with the arraybuffer Graphics instance?

Yes, totally - it's made for exactly this kind of thing. There are even options for some of the really bizarre pixel ordering that some displays use :)

 Graphics.createCallback(
            this.C.DISPLAY_SIZE_X,
            this.C.DISPLAY_SIZE_Y,
            2, {msb:true});

or:

 Graphics.createCallback(
            this.C.DISPLAY_SIZE_X,
            this.C.DISPLAY_SIZE_Y,
            2);

should do it... Then just use g.buffer (which is a standard ArrayBuffer - you may need to use new Uint8Array(g.buffer) on it to get at the data).

Try drawing a diagonal line first (it usually helps to see what's wrong :).

[espruino-discuss2]

Posted at 2016-08-02 by MichaelPralow

here is the code provided as module, after some tests with the 3-wire SPI mode i will write the module.md documentation and create a pull request

major changes

1. uses Graphics.createArrayBuffer, without the need for an extra
   buffer
2. reduced footprint with removing all COMMAND constants, to
   help users, all commands are written into function documentation -
   which afaik is not part of the minified module version
3. shortened function names for those functions a user should not need for normal usage

---

Attachments:

• SSD1606.js

[espruino-discuss2]

Posted at 2016-08-02 by MichaelPralow

and an example for using it

Attachments:

• SSD1606-usage.js

[espruino-discuss2]

Posted at 2016-08-02 by MichaelPralow

@gordon we can now use modules from NPM, what is the preferred way to release and provide modules, NPM or Espruino webpage?

[gfwilliams]

Posted at 2016-08-03 by @gfwilliams

Thanks - looks good! Shame about the constants though - must have taken you ages to inline them, and it's something that the minifier would have done for you just by changing prototype.C to var C :)

Super minor, but it looks like bitMaskArray and pixelBitPosArray are no longer needed now?

A pull request via Espruino's GitHub is still definitely the preferred way... Then people can find stuff just by searching the site for something like 'epaper'.

[espruino-discuss2]

Posted at 2016-08-03 by MichaelPralow

Thanks - looks good! Shame about the constants though - must have
taken you ages to inline them, and it's something that the minifier
would have done for you just by changing prototype.C to var C :)

Javascript IDE Atom to the rescue :-)
in the end private constants wouldn't help module users, e.g. for using display.sendCommand(...), but the documentation helps module maintainers (well i hope so)

Super minor, but it looks like bitMaskArray and pixelBitPosArray are
no longer needed now?

good catch, i already changed that locally

A pull request via Espruino's GitHub is still definitely the preferred
way

ok, but it is definitely worthwile to think about NPM, at least for maintaining a module (test, versioning, own github repo, ...)

[gfwilliams]

Posted at 2016-08-03 by @gfwilliams

it is definitely worthwhile to think about NPM

Yes, we need to come up with a good solution. It's a hard balance between being totally friendly to new users (having a 'curated' list of non-duplicated modules that are searchable, well documented and 'just work') and being totally open for anyone to publish whatever they want, with versions and stuff like that.

There's also this issue of having NPM modules be nicely usable with the Web IDE - things like npm install and minification become way more painful if you're working within the confines of the browser.

@chalkers is working on some tools that should make Espruino easier to use in a more Node-style way (there's also espruino on NPM)... it's just finding a way to have everything work together, as the Node.js/NPM workflow is very different to the 'plug in and go' that many other Espruino users are used to.

[espruino-discuss2]

Posted at 2016-08-31 by MichaelPralow

project keeps going :-) attached to this post is a quick photo from my latest work on a nice looking font for this e-paper display

• 2 bit per pixel, grayscale 4 colors, font-size roughly 36, kerning included
• created with LCD Image Converter (free)
• converted to suitable array for Graphics.drawImage by myself

---

Attachments:

• FullSizeRender.jpg

[espruino-discuss2]

Posted at 2016-09-01 by @allObjects

Looking great.

Question: when you you have to update the display, do you need to update always the whole display, or can you choose an area? - Rectangle?

Like your Kickstarter number 0288! (I know, it is not your Kickstarter ID or 'Rang', but the Pico looks like to be from Kickstarter.

[espruino-discuss2]

Posted at 2016-09-01 by MichaelPralow

Question: when you you have to update the display, do you need to
update always the whole display, or can you choose an area? -
Rectangle?

technically you always need to send the complete display data (3096 bytes for GDE021A1) (see Page 35 of GDE021A1 specification

afaik when you take the power off the internal ram looses all data, maybe you could work without powering off (using deep sleep and SW reset or no reset at all)
if you combine that with an own driving circuit which provides the I2C connection from the controller you can even read out the ram

for me it is not worth the hassle... but i saw a circular wearable e-paper which looks perfect for an own Espruino low power smartwatch, maybe i try to create my own driving circuit

Kickstarter number 0288

i got my Picos via Gordons Tindie storefront :-)

[espruino-discuss2]

Posted at 2016-09-01 by @allObjects

Picos via... Tindie...

...so it was one if the first kickstarter batches that had 'physically' broken corners... for a great deal with no issues though... and your's is looking pretty good... from what I can tell from the pic.

always need to send the complete display data

This puts additional stress on the memory of Espruino... On the other hand, it is well supported by the Graphics object... and constraints usage to static display (not much interactive ui flavor).

May be later model will come up with a partial refresh... because that would be cool...

[espruino-discuss2]

Posted at 2016-09-02 by ClearMemory041063

Great work!
I've always wanted to use this kind of display ever since the Kindle came out.
A bit disappointed on the lower end of it's temperature range.

You might use this module to store the fonts in EEROM on the chip.

http://www.espruino.com/FlashEEPROM

Some code examples using arrays are discussed here.
http://forum.espruino.com/conversations/292062/

[gfwilliams]

Posted at 2016-09-05 by @gfwilliams

Looks great! If you're happy to play around in C, another option might be to add antialiasing to the existing Graphics library? You could then use the vector fonts?

[espruino-discuss2]

Posted at 2016-09-05 by MichaelPralow

This puts additional stress on the memory of Espruino...

as in problems with size or problems with overall usage (frequency of read/write processes)?

A bit disappointed on the lower end of it's temperature range.

according to http://www.pervasivedisplays.com/FAQRetrieve.aspx?ID=43359 :

The storage temperature range for E Ink’s newest e-paper film is now
at -25℃ to 70 ℃

.

another option might be to add antialiasing to the existing Graphics
library? You could then use the vector fonts?

hmm i am not sure that would be a good move, if we add anti-aliasing (4 colours or 16? just in time calculations?) it will be bigger and afaik nobody asked for anti aliasing until now

what i am after is a better documentation for creating own fonts (in the works) and maybe one additional bitmap font with a greater size

[gfwilliams]

Posted at 2016-09-06 by @gfwilliams

Well, it could antialias in whatever the bit depth is - it wouldn't actually be noticeably slower when working off arraybuffer graphics. It's not a big deal but I thought that was one of the reasons you wanted the custom font (>1 bit colour?).

To create your own font, you could use this and an image containing the characters in a grid: https://github.com/espruino/Espruino/blob/master/scripts/create_custom_font.js

The process isn't well documented, but basically you have one array of bytes which is the widths, and the other array is just a series of 1 bit bitmaps one after the other (not aligned)

[espruino-discuss2]

Posted at 2016-09-29 by Vanderlin

I am trying to get this example working the espruino WiFi board - has anyone had any luck?

[gfwilliams]

Posted at 2016-09-29 by @gfwilliams

There shouldn't be any big differences - you've got all the wiring correct?

The only gotcha with that example is that you have to type save() on the left-hand side after uploading to save the code into flash memory and call the init event. (or you can do E.emit('init')) if you don't want to do that.

[espruino-discuss2]

Posted at 2016-09-29 by Vanderlin

N/M - got it working :)

PINS are...

// run following code onInit
E.on('init', function() {
  
  // SPI configuration
  var spi = SPI1;
  spi.setup({
    mosi: B5,
    sck:  B3
  });
  
  // create display instance
  var display = require('SSD1606').connect({
    displayType: 'GDE021A1',
    spi        : spi,
    cs1Pin     : B6,    
    dcPin      : B7,
    resetPin   : A5,
    busyPin    : A4,
    bs1Pin     : A6, // optional, but if not provided, you need to set the correct SPI mode 4-wire by yourself
    //powerPin   : B9  // optional, just do not use the on() or off() function if you do not provide it
  });
  // activate the power to run the display, just a comfort function, 
  // you can control the power by yourself as well

  display.hwReset(function(){

    display.init(
      function(err){
            console.log(err);
         // (optional) fill the internal buffer for all pixels with color white, 
        // without this the default color will be black
        display.g.clear(0xFF);
        // not optional - rotate the display x and y coordinates 90 degrees to the right
        display.g.setRotation(1);
        // from here it shows the normal usage
        // set color black for subsequent uses
        display.g.setColor(0x00);
        // set fontsize, see Graphics and Fonts modules for further options
        display.g.setFontVector(20);
        display.g.drawString('Hello World!', 22, 22);
        // from here it shows the needed part
        // (needed) copy internal buffer to display buffer
        display.g.flip();
        // run the display update
        display.refreshScreen(function(err){
          // do whatever you like here, e.g. turn it off when the update is done
          // again just a comfort function
          display.off();
        });
      },
      // clearScreenColor is optional, but prevents e-paper ghosting
      // shadow of an image may be visible after refreshing (only) parts of the screen
      { clearScreenColor: 0x00 }
    );
  });
  
  
});

[espruino-discuss2]

Posted at 2016-10-26 by MichaelPralow

i couldn't work further until now - we got a new family member - a daughter :-)

i would like to take a look into

If you're happy to play around in C, another option might be to add
antialiasing to the existing Graphics library? You could then use the
vector fonts?

after some hours of Google "research" i did not found resources to start into programming (or better understanding) anti-aliased vector fonts

do you have any hints where to start?

[gfwilliams]

Posted at 2016-10-26 by @gfwilliams

Congratulations!

On Espruino the fonts are just stored as polygons, and are rendered with code like this: https://github.com/espruino/Espruino/blob/master/libs/graphics/graphics.c#L394

Basically you'd want to modify graphicsFillPoly in that same file to antialias the edges. You should be able to google some polygon algorithms, but right now it:

• 'sketches' out the polygon and finds its minimum and maximum X values for each line
• fills each scan line in turn

What you'd need to do is store the minimum and maximum values fractionally (maybe just by multiplying by 16), and then when you went to draw the scan line, you'd draw the points you needed to the beginning and end in the correct colour. In fact you might want to make sure the polygon fill algorithm take arguments of 16x size as well.

The gotcha is that at the moment Espruino isn't aware of colour at all - it just takes a number and copies it into the next pixel so it doesn't know what R,G and B are. Since you only care about greyscale you could just treat the colour as a number though.

Having said all that, your display is 72x172 pixels right? It might be easier to just use a 1 bit graphics buffer of twice that size in each direction, and to then scale it down by half - making each 2x2 square into single 2 bit pixel.

You could do that with JS initially and see what it looks like. You could probably get it relatively quick using some hacky binary arithmetic to work on groups of pixels at once - or you could look at adding some convenience function in C that would take an ArrayBuffer and then squish it down in 2D.

[espruino-discuss2]

Posted at 2016-10-27 by MichaelPralow

big thanks for the hints

[gfwilliams]

Posted at 2016-10-27 by @gfwilliams

No problem - to be honest the double-size image is probably going to provide you with the best image quality, and it'll be a bit easier too.