• Hello (again),

    well, i apology for this stupid question, but i'm a bit confused with the use of arraybuffer.

    i'm working with a custom font, a slanted font design that need lot of process to write nicely on a screen.
    i've used a pdc8544 display for testing purpose, and i'm now satisfied by my customdrawString().

    my idea (and that perhaps the problem, i don't know)
    is to draw String (that need some process time) in a quite long arrayBuffer (for a sentence, between 20 and 60 chars) and copy a part of it on a display (a simple led matrix, 20mm with TM1640, or bigger with a max7219)

    my question is about copying a part of an arrayBuffer on the display.

    I saw bufferArrayView.slice but i'm in sort of panic, cause i do not understand any example i saw.
    In the MDN, it's to abstract for me!
    And i don't know how to use it!
    and it said, it produce a simple array... therefor how to transfer it to display (and it is here you laugh)

    if i drawString in a certain arrayBuffer, how to copy a part of this buffer (only 8x8) in an other (the display)?
    I can not do that.
    Sure, many of you will laugh at this, but that's how it is.

    I tried to use graphic.scroll () (as @MaBe, suggest in an other post) but it only scrolls the displayed pixels, so only the 8 pixels of the display.
    Even if I try to create a larger buffer let g = Graphics.createArrayBuffer(64,8,1);. (i suposse the display driver have his own buffer (8x8), that's why)
    It doesn't work.

    i certainly missed something...

    let g;
    function sendData() {
      // reset le buffer, ajoute la font, ecrit la chaine de caractères
      g.clear(); // efface le buffer (TM1640)
      g.setContrast(7); /* val entre 0 et 7 - TM1640*/
      // mise à jour du display
      setTimeout(scroll, 1000);
    function scroll() {
      setTimeout(scroll, 200);
    function onInit() {
      g = require("TM1640").connect({din: B15, clk: B13});
      setTimeout(sendData, 100);

    would you have some compassion to explain to me how to do it?

    i'm able to drw in an arrayBuffer but not copy a part.

    thanks very much.


    1 Attachment

    • slanted.jpg
  • @Mrbpp,

    I assume

    • it is just 1bpp color depth... as in the lcd
    • the display has 8 rows and 8 cosl (16 cols) ?

    If you declare your text buffer to be 64,8,1 and vertical byte and write your text in to it, you just grab 8 bytes from any position and copy it to the display. You can use shift out.

    Was looking at the TM1640 data sheet. It requires to send upfront and at the end some commands:

    For filling the first 16 cols from the first 16 columns of our graphics buffer, you have to send (shift out) 0x40C0 for starters - data with address auto + 1 (0x40) and address (0xC0) - then 8 (16) bytes from text buffer for data (starting with any index, and finally the display control command - on and duty cycle - (I have no TM1640 device at hand - hope it works... no need to send one... (smileyFace) ).

    // scrollTextTM1640.js
    var dev = true // devlopement  / runtime
      , dspDataPin  = B15 // B5 //
      , dspClockPin = B13 // B3 //
      , text        = "   Hi, this is me.   " // leading+trailing spaces intendedy
      , bufColsMax  =  960 // (pixel) max cols 'compose' buf of graphic object g has
      , frameTime   =  100 // [ms] - frame time
      , dspCols     =   16 // (pixel) cols the display shows
      , x           =   -1 // index 'compose' buffer
      , bufColsUsed // (pixel) cols the 'compose' buffer of graphic object g are used
      , bufColStrtX // buffer col start maximum (acutally ...+1)
      , g           // graphics object
      , iId         // 'scroll' intervall id
      , dspBuf      // view port on graphics buffer to output / shift out to display
      , dsp = function() {
          if (++x>=bufColStrtX) x = 0;
          dspBuf = new Uint8Array(g.buffer, x, dspCols);
          // data w/ auto + addr, addr, data bytes, on w/ 11/16 duty (brightness)
          shiftOut(dspDataPin, { clk: dspClockPin, repeat: 8 }, [0x40,0xC0]);
          shiftOut(dspDataPin, { clk: dspClockPin, repeat: 8 }
                             , { data: dspBuf, count: 8} );
          shiftOut(dspDataPin, { clk: dspClockPin, repeat: 8 }, [0x8C]);
      , setup = function() {
          pinMode(dspDataPin ,"output");
          pinMode(dspClockPin,"output"); dspClockPin.set();
          if (iId) iId = clearInterval(iId);
          g = Graphics.createArrayBuffer( bufColsMax, 8, 1
                      ,{ vertical_byte: true } ); // one long text row
          bufColsUsed = g.stringWidth(text);
          bufColStrtX = ((bufColStrtX = bufColsUsed - dspCols) < 0) ? 0 : bufColStrtX;
          iId = setInterval(dsp, frameTime);
      , onInit = function() {
    if (dev) setTimeout(onInit,999);

    1 Attachment

  • Wow - looks like @allObjects has this sorted at a display driver level. Just for others reading there is the http://www.espruino.com/TM1640 display driver, but that wouldn't handle scrolling directly.

    But just as some background though: Graphics.createArrayBuffer(...) will create a graphics instance writing to an ArrayBuffer but there are a whole bunch of options about how the data is stored in that buffer, like vertical_byte you see in @allObjects code above.

    With vertical_byte and 8 pixels deep (as in his example) you can the shift the array just one byte at a time and scroll the display horizontally, however with other pixel formats you're going to have trouble.

    Rather than messing with pixels directly you can also use drawImage:

    let b = Graphics.createArrayBuffer(64,8,1);
    // ... draw to b here
    var img = b.asImage();
    // now to render...
    var x=0;
    setInterval(functiion() {
      g.drawImage(img, -x, 0);
      ix (x>64) x=0;

    However this will be slower than @allObjects solution :)

  • @Mrbbp,

    this https://www.ebay.com/itm/MAX7219-Dot-Mat­rix-Module-4-In-1-LED-Display-MCU-for-Mi­crocontroller/312816019224 I should get tomorrow to also walk and not just talk the facts.

    @Gordon, you are absolutely correct... I just take advantage of the configuration @Mrbbp wants to run. I'm also aware of the issues of drawing strings at the border of the buffer... even though this may be fixed by adding the - slowing down - clipping code. To be transparent: after looking only at the (post #2 attached) datasheet for sketching the solution, I noticed in @Mrbbp's code the use of the TM1640 module and took a peek at it and got the confirmation. I still though want to see it work.

    All came to be when I wanted to understand now the generic Espruino Graphics solution works when trying to drive a horse race board / derby board implemented with neo pixel (see Retro Horse Derby Game Board with Neopixels showing Reaction Game Status and Large Display: x by y w/ 24 bpp Graphics buffer visualized with neopixel string in zig-zag layout). I even went down to the detail of moving stuff around in the buffer w/ embedded C code...(see Efficiently moving things around in zig-zag Graphics buffer visualized w/ 24/32 bpp displays / neopixel strings).

    Last but not least I wanted also to that embedded C feature of Espruino.

    Btw, @Mrbbp, if you think of a art installation with a large display and 'swoofing/swooshing' around text and shapes, messing with the graphics buffer in C is the way to go... (I'm thinking of some thing like that for the Bangle.js, where currently threads are going on with graphics from storage and the challenge of multiple overlaying hands - display layers - quickly presented).

    There are so many options to get something done in Espruino. What a especially liked on this solution is using Espruino platform for the difficult stuff, like drawing shapes, filling shapes, drawing text, and the easy way of high level (game) control. Complemented with a little bit low level code that is easy accessible from Espruino JS level, I get best of both worlds... with that one can even over come the challenges arising from different graphics buffer storage pattern, color reduction, synching a second display, etc. (too bad never heard back from @matencio guy...)

  • Hi allObjects! I'm still around. A lot has happened since last we communicated. My pay was cut to 1/3rd where I taught at the university and I was still teaching the same number of teachers. That led me to resign at the end of the semester and find new work. I was hired to teach middle school and took a position in Florida between Daytona Beach and Orlando. I never had the chance to build the horse race game. It's sad because the files and all were on an external HDD that was damaged in the cross-country move. I've lost hope of getting that ever built due to my lack of knowledge around coding. Something being discussed here. As for the build? I'd really love to build it but... It's nice to know I wasn't forgotten. I haven't forgotten either. Life's circumstances prohibited me from building the project correctly. Mike

  • Hi Mike... I'm relieved that things are 'relatively' ok for you. I'm glad you spoke up. I'm totally aware that life can take turns hat change almost all things. I'm really happy for you that you are still around, 'back' at work teaching, and hope - may be one day - Espruino will will resume happening. As you may have seen from my posts, I built the display board for the light, electronic and code part, and I even added some game paddles - just switches for a reaction game I actually played w/ my grand kids. Being busy with other things I did not make it to other parts of the game board you had mind or any other one yet. But anyway, it was a pleasure to have been inspired by your ideas and challenged to find a solution. I wish you well... and soon kids / adolescents back in school again... - ao

  • To see an running implementation of code like in post #2, see Scrolling text w/ Maxim MAX7219 and stringed 8x8 LED Matrixes.

    1 Attachment

    • scrollingText_MAX7219.jpg
  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

playing with ArrayBuffer and led matrix... i'm confused

Posted by Avatar for Mrbbp @Mrbbp