ciq-scrolling-text

//v3
using Toybox.WatchUi;
using Toybox.Graphics;

class testappView extends WatchUi.View {
    var updateTimer;
    var scrollableText, scrollableText2;

    var screenWidth, screenHeight, screenShape;
    function initialize() {
        View.initialize();

        var settings = System.getDeviceSettings();
        screenWidth = settings.screenWidth;
        screenHeight = settings.screenHeight;
        screenShape = settings.screenShape;

        updateTimer = new Timer.Timer();

        // scroll across the full screen wdith
        scrollableText = new ScrollableText(
            0, // x
            screenHeight/2, //y
            Graphics.FONT_LARGE, // font
            "the quick brown fox jumps over the lazy dog", //text
            screenWidth //scrollableWidth
        );

        // scroll across approximately half the screen width
        scrollableText2 = new ScrollableText(
            screenWidth/3, // x
            screenHeight/4, //y
            Graphics.FONT_LARGE, // font
            "the quick brown fox jumps over the lazy dog", //text
            getWidth(screenHeight/4)/2 //scrollableWidth
        );
    }

    // this example only works properly with rectangular and round devices
    function getWidth(y) {
        if (screenShape == System.SCREEN_SHAPE_RECTANGLE) {
            return screenWidth;
        } else { // semiround and round
            // this isn't quite right for semiround watches

            var radius = screenWidth / 2;
            //var angle = 2 * Math.toDegrees(Math.acos(1 - (y.toFloat() / radius))); // Angle = 2 * arccos(1 - height(y) / radius)
            //return (2 * radius * Math.sin(Math.toRadians(angle) / 2)).toNumber();
            return (2 * radius * Math.sin(Math.toRadians(2 * Math.toDegrees(Math.acos(1 - (y.toFloat() / radius)))) / 2)).toNumber();
        }
    }

    function triggerUpdate() {
        WatchUi.requestUpdate();
    }

    // Update the view
    function onUpdate(dc) {
        dc.setColor(0xffffff, 0);
        dc.clear();

        scrollableText.onUpdate(dc);
        scrollableText2.onUpdate(dc);

        // 50 ms is the minimum timer interval for most (all?) devices
        updateTimer.start(method(:triggerUpdate), 50 /* ms */, false);
    }
}

// this example only works with left justified and vertically centred text
// TODO: support non-vertically centred text
// TODO: support shortening text with ellipses ("...")
class ScrollableText {
    var screenHeight;
    var currentPos = 0;

    var x, y, font, text, scrollableWidth;
    var textWidth = null;
    var fontHeight = null;
    // See Graphics.drawText
    function initialize(x, y, font, text, scrollableWidth) {
        self.x = x;
        self.y = y;
        self.font = font;
        self.text = text;
        self.scrollableWidth = scrollableWidth;

        var settings = System.getDeviceSettings();
        screenHeight = settings.screenHeight;
    }

    function onUpdate(dc) {
        if (textWidth == null) {
            textWidth = dc.getTextWidthInPixels(text, font);
        }
        if (fontHeight == null) {
            fontHeight = dc.getFontHeight(font);
        }

        dc.setClip(x, 0, scrollableWidth, screenHeight); //only available in CIQ 2.3.0 and higher

        dc.drawText(x + currentPos, y, font, text, Graphics.TEXT_JUSTIFY_LEFT|Graphics.TEXT_JUSTIFY_VCENTER);

        // scroll by 2 pixels. (1 is smoother, but a bit too slow)
        currentPos = currentPos - 2;
        if (currentPos < -textWidth) {
            currentPos = scrollableWidth-1;
        }

        dc.clearClip();  //only available in CIQ 2.3.0 and higher

        // draw rectangle to demonstrate bounds of scrolling region
        dc.drawRectangle(x, y - fontHeight/2, scrollableWidth, fontHeight + 2);
    }
}