How to determine when native watchface slide animation finishes?

Former Member over 8 years ago

Hi, everyone,
I decided to add outline to symbols in my watchface. Since it's not possible to change font sizes on whim or draw them with outline right away, I did very simple trick of setting color to background and drawing the same text in that color with offsets from -1 to +1 for X and Y coordinates for every string I display. This surely resulted in at least 8 additional drawText clauses per string, but everything looks almost crisp-sharp and works very fast in simulator. But when I start this watch face on actual watch (FR230) there is a native sliding animation when one wants to either start applications or scroll to available widgets. This animation takes barely a second, but watch face is not able to redraw at acceptable speed. The most obvious solution in this case would be not to draw outlines until animation is complete, but there is no callback for this situation or at least I was unable to find one in manual. Also, despite API docs telling that timers are applicable for watch faces, when I try to start a timer with a callback in onShow method, simulator crashes with "Permission required" exception with any possible permission for watchface application type set.

Question is: is it possible to determine when native slide-in animation ends or use timers in watchface type app?
Thanks in advance.

jim_m_58 over 8 years ago

Timers can be started in watchfaces but only when not in Low Power Mode (onExitSleep) and need to be stopped when entering Low Power mode (onEnterSleep)

As far as what's happening, have you looked at what may be happening with onUpdate()? It could be that during this time, it's being called more often.

What I'd try would be to set a counter to 0 in initialize(), and then increment it each time onUpdate() is being called, and display it on the screen. You can see if you're getting more onUpdates() than you expect. If that's the case, in onUpdate(), maybe just do a return if they're coming faster than once a second with (use the ms time from Sys.getTimer())? (you may need to let one run every second and add other "smarts" to this)

travis.vitek over 8 years ago

Since it's not possible to change font sizes on whim or draw them with outline right away

You can definitely do this when using layouts, just get a reference to the text, and change the font size...

hidden var mFonts = [
   Gfx.FONT_SMALL,
   Gfx.FONT_MEDIUM,
   Gfx.FONT_LARGE
];

var mFont = 0;

function onUpdate(dc) {
    var text = findDrawableById("Text");
    if (text != null) {
        text.setFont(mFonts[mFont]);
        mFont = (mFont + 1) % mFonts.size();
    }

    View.onUpdate(dc);
}

As for the animation situation, I think you could do something like Jim described above...

// number of milliseconds that must elapse between `onUpdate()' calls
// for us to consider drawing the outlines.
hidden const cMinDelay = 500;

// the previous timer value, used to decide if enough time has elapsed
// since the previous `onUpdate()' call to draw outlines.
hidden var mPrevTimer;

function onExitSleep() {
    mPrevTimer = null;
    Ui.requestUpdate();
}

functoin onEnterSleep() {
    mPrevTimer = null;
    Ui.requestUpdate();
}

function onUpdate(dc) {

    var now = Sys.getTimer();
    if (mPrevTimer == null || cMinDelay < (now - mPrevTimer)) {
        // do something here to prevent outlines from being drawn
    }
    mPrevTimer = now;

    View.onUpdate(dc);
}

Travis

Former Member over 8 years ago

You can definitely do this when using layouts

Well, considering that these font sizes differ by a very large number of size units, this is not very nice method to display tidy 1-2 pixel outline, I tried to to that via additional symbols in my bitmap font, which I just copied from watchface screenshot and outlined in editor, but the more variable are the strings, the less possible to implement this.

As for the animation, right now I'm testing temporary solution, that starts to draw outlines after either 5 onUpdates has been called in under a second or difference between neighboring updates is more or equal than second:

class DigitalButterflyView extends Ui.WatchFace {
...
	hidden var lastUpdate;
	hidden var updateCount;
...
	function onShow() {
		...
		// I suppose this happens when watchface starts to slide into view
		updateCount = 0;
		lastUpdate = Sys.getTimer();
	}
...
	function onUpdate(dc) {
		updateCount++;
		...
		if (updateCount > 5 || Sys.getTimer() - lastUpdate >= 1000) {
			<draw outlines>
		}
		...
		lastUpdate = Sys.getTimer();
	}
...
}

So far it behaves as expected with the major slowdown happening when user presses Select on watchface to work with applications: this slide still happens very slowly - around couple of seconds.
Pity we don't have neither way to control native animations nor callbacks when they start/finish, this is even more strange since WatchUi.animate contains such callback parameters, question is why it's not implemented for native ones...