How to scroll text horizontally

How to scroll text horizontally

Someone has asked us this week how to scroll a text horizontally on a Yocto-MiniDisplay or a Yocto-Display, to catch attention or just in case the text is wider than the display. As the answer may be of interest to many, here is the answer with a few variants...

The most generic way to create animations is to use double buffering. This technique makes it possible to animate almost anything, without making visible artifacts linked to the creation of the graphics. It consists in working on two layers, one visible, the other one hidden. The images are created in the hidden layer, and once the image is complete, the two layers are switched.

In order to scroll text in this way, we create multiple "images" by sliding progressively the text position, and we display them one after the other by switching the content of the visible layer and the hidden layer:

def scrollText_by_doubleBuffering(disp,text):
    # Layer 1 is the hidden drawing layer
    for x in range (0, 128):
        # draw in the hidden layer
        # swap contents with the visible layer (layer 2)
        # wait a bit

# demo: scroll text by double-buffering
disp = YDisplay.FirstDisplay()
scrollText_by_doubleBuffering(disp,"You've got mail !")

This animation technique makes it possible to do almost everything, even if you are looking for something more fancy to catch attention. However, it requires a constant drive from the host machine.


If you are rather looking for something simpler, we can do better by leveraging the ability of Yoctopuce displays to handle autonomously the move of a display layer:

def scrollText_autonomously(disp,text):
    # move layer right of visible area
    # write text
    l1.drawText(0, 0, YDisplayLayer.ALIGN.TOP_LEFT, text)
    # animate layer to left of visible area in 3 seconds

# demo: scroll text automatically
scrollText_autonomously(disp,"Oh my tweets !")


The display will handle scrolling itself, without any help from the host machine. However, as is, this method has an important limitation: the text must fit within a single layer, which is 128 pixels wide. However as displays have 5 layers, the principle can easily be extended to moving multiple layers put side by side. This makes it possible to scroll a text (or an image) of 640 pixels wide.

def scrollLargeText_autonomously(disp,text,nLayers):
    # stack layers right of visible area and
    # write text across all layers
    for i in range(0,nLayers):
        l = disp.get_displayLayer(i)
        l.drawText(-128*i, 0, YDisplayLayer.ALIGN.TOP_LEFT, text)
    # animate layers to left of visible area, in 5 seconds
    for i in range(0,nLayers):

# demo: scroll text automatically
scrollLargeText_autonomously(disp,"Don't forget to buy milk on the way home",3)


Last, what if you want to start the message scrolling not using a python program but from a simple command line, when a compilation is finished for instance ? This is easy: just create a sequence in the display once for all, using the python program. You can then replay it using a single command line:

# save scrolling message as an animation for further use
scrollLargeText_autonomously(disp,"Last build failed, please check logs and fix it.",3)

You can then add to your automated build check sequence:

YDisplay any playSequence "buildFailed.seq"


As you have probably guessed, the same technique can be used to scroll in any direction... including diagonal scrolling, in case you find a need for it.

Add a comment No comment yet
Back to blog

Yoctopuce, get your stuff connected.