JSignage:TextTutorial7

Description

Displaying text of unknown length by scrolling

• The second method to display text of unknown length is to use the scrollingTextArea layer.
• It will automatically scroll line by line so that it is possible to read all the text.
• Scrolling starts after the reader has had the time to read the first lines, after 7.5s in our example.
• Note that, like the fitTextArea, the scrollingTextArea's text cannot be modified once it has been added to the document, which is why the textLayer is added only after the text content has been set in the get handler.

Source code

$.image({ href: 'media/Corbeau.jpg', top: 100, left: 90, width: 464.2, height: 519.2, frame: { softEdge:true, screenColor: 'white' } }).addTo('svg');

var textLayer = $.scrollingTextArea({
        top: '20%',
        height: '60%',
        left: '45%',
        right: '8%',
        textAlign: 'end',
        fontFamily: 'Georgia',
        lines: 10,
        lineDur: 0.75,
        scrollDur: 0.25,
        repeatCount: 'indefinite'
});

$.get( 'media/Corbeau.txt', function( text ) {
        var lines = text.split( '\n' );
        var txt = $.tspan();
        for ( var i=0; i<lines.length; i++ )
          txt.tspan( lines[i] ).tbreak();
        textLayer.text( txt );
        textLayer.setFillFreeze();
        textLayer.addTo( 'svg' )
}, 'text' );