Is there a way to get the size of a text element?

[dimasah901]

I tried to create a client for a messanger on zepp os 3 but got stuck on a problem - I can't figure out the size of a text element. I want to draw a rounded rectangle underneath the text and properly display the messages based on their side. I want to be able to do something like this:

function addMessage (list, text, y) {
	target.createWidget(widget.TEXT, {
        x: px(17),
        y: 5,
        w: DEVICE_WIDTH - px(20),
        h: DEVICE_HEIGHT,
        text_size: px(36),
        text: message,
        text_style: text_style.WRAP,
        line_space: px(-30),
        color: THEME.TEXT_PRIMARY
    });
	return someSystemAPI.getTextSize(text).height
}

const viewContainer = createWidget(widget.VIEW_CONTAINER, {
	x: px(0),
	y: px(0),
	w: DEVICE_WIDTH,
	h: DEVICE_HEIGHT
})

let y = 5;
y += addMessage(list, text[0], y) + 5;
y += addMessage(list, text[1], y) + 5;
y += addMessage(list, text[2], y) + 5;

Where the next message's y is the sum of the previous messages' heights.

[silver-zepp]

Here: https://docs.zepp.com/docs/reference/device-app-api/newAPI/ui/getTextLayout

[dimasah901]

It seems to be a bit broken. When the text takes more then 2 lines the height stops growing and the width stops growing very early. Do you know how to fix it?

function buildMessage(who, message, in_, target, y) {
    let layout = getTextLayout(message, { text_size: px(36), text_width: DEVICE_WIDTH - px(60) })
    layout.height *= 1.5;
    target.createWidget(widget.FILL_RECT, {
        x: px(20),
        y: y - 2,
        w: px(layout.width),
        h: px(layout.height + 4),
        radius: px(10),
        color: THEME.BUTTON_COLOR
    });
    target.createWidget(widget.TEXT, {
        x: px(30),
        y: y,
        w: DEVICE_WIDTH - px(60),
        h: DEVICE_HEIGHT,
        text_size: px(36),
        text: message,
        text_style: text_style.WRAP,
        line_space: px(-30),
        color: THEME.TEXT_PRIMARY
    });
    return layout.height + 10;
}

[silver-zepp]

I believe this doesn't calculate multiline text properly as the height of it, is not uniform. So whatever the number of characters you have, the text field still sees it as a single line. I mean, the first line starts with the word "Hello" and the second one "friends" so they already aren't the same size. Try using the wrapped flag and see if it works better.

Also, check what DEVICE_WIDTH - px(60) and px(36) returns. It's possible that you haven't imported the px method, or it doesn't work well with the getTextLayout. Try without it; just raw numbers.

[dimasah901]

px just returns what i gave it, it is imported, tried wrapped: 1, nothing changed. The text is not multiline, it gets wrapped.