TM1640 Matrix + ArrayBuffer first column of letter does not appear in scrolling text

[espruino-discuss]

Posted at 2020-05-17 by Mrbbp

Sorry long title...

I'm working with Chrome app (cause i've got custom font) with last firmware (2.05) on Pico board.
I discovered a strange behavior (not seen before)

I'm scrolling a text on a 8x8 led matrix with a TM1640 driver (a wemos matrix shield, chip and easy to drive)

I reuse an early script ( that was working, and working with this driver, not the first time i use it), this time i found the scroll jerky, so i slowed down the scroll and i identified what i was feeling...

the first column of a char is never seen, the buffer (i suppose) saw only the char with 2 column and more (not only one).
There is no missing column on the buffer, i have 8 column lighted

it happens on every letter (even if I delete my custom font) appearing from the right side.

It looks like the drawString does not draw the char if it is on the boarder...

in my code i use a setRotation() , i' tried without it, same pb.

any help?

frame 1 |frame 2 |frame 3
00000000|00000000|00000000
00000000|000000x0|00000x00
00000000|000000xx|00000xxx
00000000|000000x0|00000x00
00000000|000000x0|00000x00
00000000|000000x0|00000x00
00000000|0000000x|000000xx
00000000|00000000|00000000

i give my durty code to test

// sur la matrice TM1640:
/*
  pour TM1640
  CLK D5 -> B13
  DIN D7 -> B15
     3V3 -> 3V3
      5V -> Vout
     GND -> GND
  */
require("Font4x6").add(Graphics);

// crée le buffer graphique 8x8 en 1 bit
let g = Graphics.createArrayBuffer(8,8,1);

const phrases = ["Sourire aux cons","Aquiescer aux injonctions d'un supérieur","Mourir de honte","Mourir d'envie","Sourire aux jolies femmes","s'endormir devant la télévision"];

let phraseTot;
let compteur = 8;
let compteurTable = 0;
let longPhrase;
let first = true;

let verif = [];

function ecrit(){
  digitalPulse(LED2, true, 20);
  phraseTot = "À quoi bon, ";
  // tire la phrase une seule fois.
  let tirage;
  do { tirage = Math.floor(Math.random()*phrases.length);} while ( verif[tirage]== true );
  compteurTable++;
  verif[tirage] = true;
  phraseTot += phrases[tirage].toLowerCase()+".";
  longPhrase = g.stringWidth(phraseTot);
  if (compteurTable == phrases.length) {
    // reset de la table de verif
     verif = [];
    compteurTable = 0;
    console.log("reset verif[]");
  }
  console.log(phraseTot, longPhrase);
  compteur = 8;
  if (first) {
    setTimeout(envoieMatrice,500);
    first = false;
  }
}

function envoieMatrice() {
  // raccorde le bout de ligne suivant
  if (compteur < -longPhrase){
    // si au bout du texte
    ecrit();
  }
  // reset le buffer, ajoute la font, ecrit la chaine de caractères
  g.clear();
  g.setFont4x6();
  /* une fois font utilisée, on connait la longueur de la chaine*/
  longPhrase = g.stringWidth(phraseTot);
  compteur--;
  // ecrit la phrase
  g.drawString(phraseTot,compteur,0);
  console.log(compteur, longPhrase);
  g.setContrast(7); /* val entre 0 et 7 - TM1640*/
  g.setRotation(2,true); // TM1640
  // mise à jour du display
  g.flip();
  setTimeout(envoieMatrice, 500);
}

function onInit() {
  // importe font
  require("Font4x6").add(Graphics);
  require('Storage').eraseAll();
  USB.setConsole();
  // spi mosi=DIN, sck=CLOCK
  g = require("TM1640").connect({din: B15, clk: B13});
}

USB.setConsole();

best regards

éric

[espruino-discuss]

Posted at 2020-05-17 by Mrbbp

I tried with a larger arrayBuffer createArrayBuffer(9,8,1);
and an other matrix...

same problem!

---

Posted at 2020-05-17 by @allObjects

Yes, drawing text at or straddling the border has their fare share of challenges. If it worked before I could attribute the not working anymore to somer performance (and space) increasing changes within Espruino - if their were actually changes (rendering test algorithm).

I like the approach of choosing a larger buffer.... but I would not directly write out of that buffer w/ flip and then redraw at a new position. Since it is monochrome you have plenty of memory. Write to an even larger buffer - one that hold ALL your text, and then move the view port (view) over the buffer for display... then you do not have the issue with jerky render text into the buffer. You deal only w/ transferring frame by frame to the display. Since it is one byte per column, you can easily increment thru the buffer with the view: first bytes 0..7, then 1..8, then 2..9, etc.

If you have changing text you can even rolling changing it... Define a just one (long) line. Update the line accordingly (by shift and write new text and have the transfer to the display shift its line start in the buffer as well.

---

Posted at 2020-05-17 by Mrbbp

Hello @allObjects,

I think I understood the idea of a large ArrayBuffer with the entire line of text and display only part of it. Unfortunately, I am not comfortable with ArrayBuffers nor dataView
The idea is to measure the size of my sentence written in a buffer and generate the correct size Arraybuffer once (between 20 and 60 characters), then go and copy the useful portion to display on the matrix.
Did i well understood?

I read on MDN that there was an arrayBuffer.slice (start, end) but on espruino, the function does not return an arrayBuffer but just an array so I remain skeptical about the solution.
Any help would be great for a starting point to explore.
regards

the basic writing program

const phrases = ["Sourire aux cons","Aquiescer aux injonctions d'un supérieur","Mourir de honte","Mourir d'envie","Sourire aux jolies femmes","s'endormir devant la télévision"]; //it contains more sentence

function ecris() {
  phrase = "À quoi bon, ";
  tirage = Math.floor(Math.random()*phrases.length);
  phrase += phrases[tirage].toLowerCase()+".";
  return phrase;
}
console.log(ecris());

a try as you said

let bitIndex = 0;
let phraseAB;
g = Graphics.createArrayBuffer(8,8,1);

const phrases = ["Sourire aux cons","Aquiescer aux injonctions d'un supérieur","Mourir de honte","Mourir d'envie","Sourire aux jolies femmes","s'endormir devant la télévision"];

function ecris() {
  phrase = "À quoi bon, ";
  tirage = Math.floor(Math.random()*phrases.length);
  phrase += phrases[tirage].toLowerCase()+".";
  const width = g.stringWidth(phrase);
  phraseAB = Graphics.createArrayBuffer(width,8,1);
  phraseAB.drawString(laPhrase, 0, 0);
  sendDatas();
}

function sendDatas() {
  g = phraseAB.slice(bitIndex, bitIndex+8);
  g.setContrast(7); /* val entre 0 et 7 - TM1640*/
  g.setRotation(2,true); // TM1640
  // mise à jour du display
  g.flip();
  bitIndex++;
  setTimeout(sendDatas, 50);
  // do it til the end of phraseAB + ecris() + reset bitIndex
}

Am i on the good way?

regards
é.

---

Posted at 2020-05-17 by @MaBecker

Don’t miss to check

http://www.espruino.com/Reference#l_Graphics_scroll

---

Posted at 2020-05-17 by @MaBecker

this is how it was possible before having g.scroll

https://gist.github.com/MaBecker/b7a7bf082274b69c53a8b92b5d7b85e4

---

Posted at 2020-05-17 by Mrbbp

@MaBecker :) thanks

---

Posted at 2020-05-18 by @gfwilliams

It looks like the drawString does not draw the char if it is on the boarder...

This could be possible - there is some code now which tries to clip offscreen chars to improve rendering speed.

Do you have a really simple example where this fails? For example if you run this code in the IDE:

var g = Graphics.createArrayBuffer(32,8,1);
g.clear();
g.setFont("4x6");
g.drawString("ABCDEFG",0,0);
g.dump();

You should see ABCDEFG in an image in the terminal... But maybe some other font/X/Y can cause it not to render the first characters properly?