I'm working on a plasmoid for KDE Plasma and can't figure out how to implement a scrolling header bar, similar to ones you see at the bottom of the screen on news channels. I want to have a line of text which horizontally scrolls inside a colored box at a fixed speed, looping forever and seamlessly starting over once it reaches the end. I figured out the basic part of the looping transition, allowing the text to move outside of its box then come out the other end:

Code: Select all

Rectangle {
    width: myItem.width
    height: myItem.height
    color: myColor

    Text {
        width: myItem.width
        wrapMode: "NoWrap"
        maximumLineCount: 1
        color: theme.textColor
        text: "Whatever goes here."

        SequentialAnimation on x {
            running: true
            loops: Animation.Infinite
            NumberAnimation { from: -myItem.width; to: myItem.width; duration: 1000; easing.type: Easing.InOutQuad }
            PauseAnimation { duration: 250 }
        }
    }
}

But this doesn't take into account the length of the text string in order to adjust the start / end position and duration to its real width. It also requires moving the text completely out of bounds then back in, leaving the box empty for one frame... I wonder if there's a way to make it connect seamlessly. It also doesn't notice when I resize the plasmoid and adapt the animation range, only the scale detected at the start is taken into account. How do you suggest redoing that definition to work around scale issues and get consistent results with any box size and text length?

Made some limited progress: I'm seemingly able to extract the real width of the string using TextMetrics and use that in the scroll animation. The applet still won't adjust itself when being resized, and this doesn't help in making the text loop seamlessly without a gap in between.