Fenix 6x Pro beta 9.94 (CIQ 3.1.8) WatchUI.TextArea behaviour has changed??

Has the font height changed?

Try something like this in the sim and on the device, to check:

System.println("'+dc.getFontHeight(whatever-font-thats-used));

If you create a <myapp>.txt in the logs directory you can capture the println.

Hi Jim,

It looks like the text height has changed on device (not in sim) by inspection. I also drew a bounding box just to check and it appears partly my fault. The box is larger than I expected and the watch seems to be picking a larger font than before to fill it more completely. This does not happen in the simulator though.

I've fixed by changing the bounding box size and am just testing on a real device. How do I find out which font was chosen by the TextArea(). I pass it an array of font options using :font.

Regards

David

See https://forums.garmin.com/developer/connect-iq/b/news-announcements/posts/using-relative-layouts-and-textarea for info om fonts.

Thanks for the link. I iterated through fixed and relative layouts a number of times before coding it all (the UIs) using relative coordinates to save memory. I also implemented a version of TextArea using Text to support older devices....

Regards, David

There were some recent changes to Graphics.fitTextToArea(). This function is used by TextArea, so it is possible that there would be some changes in behavior.

The fenix6xpro 9.94 beta firmware appears to include these changes but the current ConnectIQ 3.1.8 SDK does not. That said, I've tested this functionality pretty thoroughly and haven't seen any issues like you are describing.

Here is the source code for a test app that I have been using to double-check everything is working like I'd expect. It displays some text and an outline using a text box. If you press up/down it should start/stop animating vertically/horizontally and if you press select it should change the justification. The text should *never* be displayed outside the box.

using Toybox.Application;
using Toybox.Graphics;
using Toybox.Lang;
using Toybox.System;
using Toybox.Timer;
using Toybox.WatchUi;

class TextAreaDelegate extends WatchUi.BehaviorDelegate
{
    hidden var mView;

    function initialize(view) {
        BehaviorDelegate.initialize();
        mView = view;
    }

    function onNextPage() {
        mView.toggleAnimateHorizontal();
        return true;
    }

    function onPreviousPage() {
        mView.toggleAnimateVertical();
        return true;
    }

    function onSelect() {
        mView.nextJustification();
        return true;
    }
}

class TextAreaView extends WatchUi.View
{
    function initialize() {
        View.initialize();
    }

    hidden const JUSTIFY_FLAGS = [
        Graphics.TEXT_JUSTIFY_LEFT,
        Graphics.TEXT_JUSTIFY_CENTER,
        Graphics.TEXT_JUSTIFY_RIGHT,
        Graphics.TEXT_JUSTIFY_VCENTER | Graphics.TEXT_JUSTIFY_LEFT,
        Graphics.TEXT_JUSTIFY_VCENTER | Graphics.TEXT_JUSTIFY_CENTER,
        Graphics.TEXT_JUSTIFY_VCENTER | Graphics.TEXT_JUSTIFY_RIGHT,
    ];

    hidden var mJustificationIdx;
    hidden var mTimer;
    hidden var mMaxTextAreaWidth;
    hidden var mMaxTextAreaHeight;
    hidden var mDeltaX;
    hidden var mDeltaY;
    hidden var mAnimateX;
    hidden var mAnimateY;
    hidden var mTextArea;

    function onShow() {
        mTimer = new Timer.Timer();
        mTimer.start(self.method(:onTimer), 100, true);
    }

    function onHide() {
        mTimer.stop();
        mTimer = null;
    }

    function nextJustification() {
        mJustificationIdx = (mJustificationIdx + 1) % JUSTIFY_FLAGS.size();
        mTextArea.setJustification(JUSTIFY_FLAGS[mJustificationIdx]);
        WatchUi.requestUpdate();
    }

    function previousJustification() {
        mJustificationIdx = (mJustificationIdx + (JUSTIFY_FLAGS.size() - 1)) % JUSTIFY_FLAGS.size();
        mTextArea.setJustification(JUSTIFY_FLAGS[mJustificationIdx]);
        WatchUi.requestUpdate();
    }
    
    function toggleAnimateHorizontal() {
        mAnimateX = !mAnimateX;
        WatchUi.requestUpdate();
    }

    function toggleAnimateVertical() {
        mAnimateY = !mAnimateY;
        WatchUi.requestUpdate();
    }

    function onLayout(dc) {
        // start out shrinking, but at different rates
        mDeltaX = -3;
        mDeltaY = -7;
        mAnimateX = false;
        mAnimateY = false;

        mMaxTextAreaWidth = dc.getWidth();
        mMaxTextAreaHeight = dc.getHeight();

        mTextArea = new WatchUi.TextArea({
            :locX => 0,
            :locY => 0,
            :width => mMaxTextAreaWidth,
            :height => mMaxTextAreaHeight,
            :font => [ Graphics.FONT_LARGE, Graphics.FONT_MEDIUM, Graphics.FONT_SMALL, Graphics.FONT_XTINY ],
            :text => "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
            :justification => JUSTIFY_FLAGS[mJustificationIdx],
            :color => Graphics.COLOR_WHITE,
            :backgroundColor => Graphics.COLOR_DK_GRAY,
        });

//        var layout = Rez.Layouts.MainLayout(dc);
//        mTextArea = layout[0];

        mTextArea.width = mMaxTextAreaWidth * 8 / 10;
        mTextArea.height = mMaxTextAreaHeight * 8 / 10;
        mTextArea.locX = (mMaxTextAreaWidth - mTextArea.width) / 2;
        mTextArea.locY = (mMaxTextAreaHeight - mTextArea.height) / 2;
    }

    function onUpdate(dc) {
        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_BLACK);
        dc.clear();

        mTextArea.draw(dc);

        dc.setColor(Graphics.COLOR_GREEN, Graphics.COLOR_BLACK);
        dc.drawRectangle(mTextArea.locX, mTextArea.locY, mTextArea.width, mTextArea.height);
    }

    function onTimer() {
    
    	var animating = false;
    	
    	if (mAnimateX) {
    		animating = true;

	        mTextArea.width += mDeltaX;
	        if ( (mDeltaX < 0 && mTextArea.width < 0) ||
	             (mDeltaX > 0 && mTextArea.width > mMaxTextAreaWidth))
	        {
	            mDeltaX *= -1;
	            mTextArea.width += mDeltaX;
	        }
	    }

        if (mAnimateY) {
        	animating = true;

	        mTextArea.height += mDeltaY;
	        if ( (mDeltaY < 0 && mTextArea.height < 0) ||
	             (mDeltaY > 0 && mTextArea.height > mMaxTextAreaHeight))
	        {
	            mDeltaY *= -1;
	            mTextArea.height += mDeltaY;
	        }
	    }

		if (animating) {
	        mTextArea.setLocation((mMaxTextAreaWidth - mTextArea.width) / 2, (mMaxTextAreaHeight - mTextArea.height) / 2);
	
	        WatchUi.requestUpdate();
	    }
    }
}

class TextAreaApp extends Application.AppBase {

    function initialize() {
        AppBase.initialize();
    }

    function getInitialView() {
        var view = new TextAreaView();
        return [ view, new TextAreaDelegate(view) ];
    }
}

If you are seeing text display outside the box (in this app or in yours), please let us know what device and fonts are being used. It might also help to know the string and the size of the box.

Hi Travis,

As you say I don't see text outside the box. What seems to be happening is that the font selected on device is one size larger than that either in the simulator or on the watch prior to CIQ3.1.8/beta9.44. The code is making full use of the box I defined which happened to be slightly larger than I had thought. It also looks like the line spacing is slightly greater in CIQ3.1.8.

Thanks for your help.

David