Text in circular shape

Former Member over 10 years ago

Hi,

Is it possible to display text that follows a curved line like say a circle with coding so not bitmapped ?
Now I'm using a dc.drawText command but that is only horizontally.

Kind regards,

Dirkvd001

Top Replies

ftrimboli over 6 years ago in reply to PlayItLoud +5

Here's a quick proof of concept.
Former Member over 10 years ago +3

You can't rotate the letters, but you can do this:

A sample of the code I used:

function onUpdate(dc) { dc.setColor(Gfx.COLOR_BLUE, Gfx.COLOR_BLACK); //Draw line var offset = 70;…
Former Member over 5 years ago in reply to ftrimboli +3

What's the point of a proof of concept without sharing an explanation? Even the gif could be fake.

All Replies

Former Member over 10 years ago

You can't rotate the letters, but you can do this:

A sample of the code I used:

function onUpdate(dc) {

    	dc.setColor(Gfx.COLOR_BLUE, Gfx.COLOR_BLACK);

    	

    	//Draw line

	var offset = 70;

    	for (var i = 0; i < dc.getWidth(); ++i) {

    		dc.drawPoint(i, offset + formula(i));

    	}

    	

    	dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);

    	var text = "Just some text";

    	var font = Gfx.FONT_MEDIUM;

    	var x = (dc.getWidth() - (dc.getTextWidthInPixels(text, font) + text.length() - 1)) / 2;

    	offset -= dc.getFontAscent(font);

    	

    	//Draw text

    	for (var i = 0; i < text.length(); ++i) {

    		var symbol = text.substring(i, i + 1);

    		dc.drawText(x, offset + formula(x), font, symbol, Gfx.TEXT_JUSTIFY_CENTER);

    		x += dc.getTextWidthInPixels(symbol, font) + 1;

    	}

    }

    

    //Formula for your curved line

    function formula(x) {

    	var y = 20 * Math.sin(x / 30f);

    	return y;

    }

Former Member over 10 years ago

Text in circular shape

Too bad we cannot rotate the letters. But I will try your code, thx !

travis.vitek over 10 years ago

If you really wanted this, you could create the glyphs you need as point arrays, and then you could transform the points (as is done for the watch hand in the analog watch face example) and render them. It would likely take up a bit of memory, but it could be done.

Travis

Former Member over 8 years ago

Has there been any update to this functionality?

Has there been any update to this functionality since it was originally posted back in 2014?

I too would like to draw text around the edges of a circle, and have the characters rotated to match the circle radius.

Former Member over 8 years ago

Thanks for the feedback. While we try to get to all feature requests eventually, it's clear that this one got a little lost in the mix. I've added this thread as part of the request so hopefully we can get a little movement on it moving forward.

Thanks so much,
Coleman

Former Member over 8 years ago

No such luck

Individual characters placed on a circular shape are only possible if you make a font for every position on that shape.
If you don't like to use fonts, you can use bitmaps that you reload every time you update (memory saving).

If you know what combinations of characters (words) to display, you can make bitmaps of them and use the same reloading technique.
Look at my Hamilton watchface to see what I mean.

https://apps.garmin.com/en-US/apps/19f6df1d-b818-4f8a-9649-3e1f03c70858

D.

onmyfeetoutside over 7 years ago

Anyone know if rotated text is moving any closer to being in the SDK?

topcaser over 6 years ago

Wondering how Garmin could rotate their text in the watchfaces of the new F6 ??? Any hints?

Shent-Aurkhan (SHN) over 6 years ago in reply to topcaser

I think the native one dont use iq sdk or May be it is not a text but a bitmap.

jim_m_58 over 6 years ago in reply to topcaser

Those are not CIQ.

But it is possible in CIQ (and probably a lot of work)

See: https://apps.garmin.com/en-US/apps/2abcf23e-f82d-4157-857d-cc61025943e7