• Hi,

    I am looking for a JS library or JS code to animate text or numbers on a matrix display like on the Espruino Pixel. I am thinking about the following kinds of animations:

    1. scrolling horizontal text in a section of the matrix display
    2. Digits sliding in/out vertically in a section of the matrix display
    3. Digits/text fading in/out
    4. Other funny or artistic transition effects

    Does such a library or code already exist?
    Where can I get inspriration for funny or artistic transition effects?

    The cool thing would be, that such a JS library could not only be used on a LCD matrix display, but also on large LED displays or even within web applications running in the web browser. That opens a wide range of opportunities ...

    Just share some ideas with me please.

    Best regards,

  • Some of that is built in and other parts can be done in JS. In JS you can do it only to a certain extent and it becomes also slow, depending on the type of communication and the amount of data involved with display.

    To overcome this, I used inline C. If you know the internal structure of your Espruino Graphics buffer - if there is - you can modify that. If the display holds on to the display buffer, you may extend the drivers module with code that manipulates the displays buffer. Some drivers are powerful and provide command for copying areas around, for some you have to read from one area and write to the other... and with serially connected devices and color depth other than black-and-white this can become a bit tedious.

    Some of this kind of my applications are published in the forum and some not.

    Most recent activities dealing w/ matrix display and shoving things around in Espruino Graphics buffer in Espruino is this Derby Race display board.

  • Thanks.

    To overcome this, I used inline C

    Actually, I have no experience with animations on this kind of matrix displays, I just hoped it would be fast enough. I just ordered a Espruino Pixel. We will see how this works out.

  • Sat 2019.03.30

    Wolfgang @wklenk although there isn't a demo video, this working solution might give an idea on something similar using animation:


    There are several within this community, including the wealth of snippets that @allObjects posts regularly, that finding an animation solution shouldn't be an issue.

    Link from #2 for allObjects inline C and Graphics buffer example

    IDEA: As you have stumbled on a topic that needs to be expanded on, to provide others with a starting point for their efforts also, what about building your vision in parts inside this thread, thus allowing others to provide their contributions towards your eventual goal? We would all learn as each step is built, and who knows, might make for an entire tutorial when complete!

  • I just hoped it would be fast enough

    In pretty much all cases it is! There's no reason why there couldn't be a general purpose all JavaScript library to do text animations.

    One or two displays (like the full RGB ones with SPI interfaces) are a bit slow and require big hacks to get decent speed animations, but I don't think they are anything you should be worried about catering for.

    As you say, using the Graphics library would allow you to use it on all displays, and also allows you to take advantage of speed improvements made for specific display types.

    As @allObjects notes, some graphics drivers don't allow for reading data back from the display (or are slow at it) so using g.scroll(x,y) can be difficult - but usually simply drawing the text you want to scroll fresh for each frame is more than fast enough.

    The only two examples on the Espruino site I'm aware of are:


    but there may be one or two others and I have some things I've done here that aren't published. There are also some games which do animation that could be worth looking at: http://www.espruino.com/Search?kw=game

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

JS library for animation of text on matrix display?

Posted by Avatar for wklenk @wklenk