Scroll text

General
1

Good morning, I need some advice on animated text on my local tv station. Text on a white bar, located at the bottom of the screen, movement - from right to left. Of course, as an html page. There are several solutions on the net, but here I have a problem because the text has to be read from the txt file. I do not know how to solve it :frowning: maybe the solution is ready. Thank you for your help and best regards.

2

I used this code to read the text-file and animate it using a Greensock Timeline:

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                var parts = allText.split("\n");
                var text = "";
                for (var i=0; i < parts.length; i++) {
                    text += "<li>" + parts[i] + "</li>";
                }
                var scroller = document.getElementById("crawl");
                scroller.innerHTML = text;
                tickerWidth = gsap.getProperty("#crawl", "width");
                scroller.innerHTML += text;
                gsap.set("#crawl", {x: 1920});

                tl = gsap.timeline();
                tl.to("#crawl", 1920 / speed, {x: 0, ease: Linear.easeNone});
                tl.to("#crawl", tickerWidth / speed, {x: tickerWidth * -1, ease: Linear.easeNone, repeat: -1, onRepeat: countRepeats});

                readyToPlay = true;
                if (wantsToPlay) {
                    doPlay();
                }
            }
        }
    }
    rawFile.responseType = "text";
    rawFile.send(null);
}

function countRepeats() {

    repeats -= 1;
    if (repeats == 0) {
        stop()
    }
}

The variables file and repeats are set inside the update code, to let the user decide what file to use and how many repeats there shall be. You can also set fixed values in code, if you don’t need that functionality.
The relevant HTML looks like that:

<div id="container">
    <div id="ticker">
        <ul id="crawl"></ul>
    </div>
</div>

You need to use the following comand-line to start CasparCG to let it load the textfile:
"C:\Program Files\CasparCG_Server_2.0.7\casparcg.exe" casparcg.config --disable-web-security

Of course you need to set the path correctly for your installation.

3 Likes
3

thank you very much :grinning: