Creating a Garmin watch face: performance 3

We examined how the performance changes depending on the implementation.

Survey target

Just displaying a circular gauge when creating a digital watch turned out to be quite time-consuming. Two points were examined to see how the arc display of the gauge display and the parameters at the time of text drawing changed.

Drawing an arc

Drawing using drawArc

Draws a semicircle in the upper half, centered on the center of the screen.

	function useDrawArc(dc) {
    	dc.drawArc(center[0], center[1], center[0] - 3,
    		0.0, 180.0);

Draw using drawLine

With the same specifications as drawArc, vertices are calculated by sin / cos and line segments are drawn.
Line vertices were calculated in units of 1, 2, 3, 4, 10, 12, and 20 degrees.

		var radius = center[0] - 3;
		var prev = [center[0] + radius, center[1]];
		var baseAngle = Math.PI / 180.0;
		for (var i = 1; i < 180; i++) {
			var angle = baseAngle * i;
			var now = [center[0] + radius * Math.cos(angle), center[1] - radius * Math.sin(angle)];
			dc.drawLine(prev[0], prev[1], now[0], now[1]);
			prev = now; 
		dc.drawLine(prev[0], prev[1], 3, center[1]);

Drawing with drawText

drawArc / drawLine draws the same shape, but this time draws text 88:88 in the center of the screen.

	function useDrawText(dc) {
		dc.drawText(center[0], center[1], Graphics.FONT_NUMBER_THAI_HOT, "88:88", Graphics.TEXT_JUSTIFY_CENTER);

I changed the font name and justification, and measured the execution time.

Measurement result

Drawing an arc

The results of drawArc and drawLine show the code time, graphic time, total time, and the contents of the drawing at that time. By the way, all display times are 54080, so they are not shown in the table.

Processing content

Code Graphics Total Drawing result
drawArc 543 184796 239416
drawLine(1deg) 81318 1912 137310
drawLine(2deg) 41187 1956 97223
drawLine(3deg) 27800 1983 83863
drawLine(4deg) 21050 1995 77125
drawLine(10deg) 8900 2006 64986
drawLine(12deg) 7550 2006 63636
drawLine(20deg) 4850 2008 60938

drawArc has an overwhelmingly long graphic time. When drawLine is used, the processing time tends to increase as the number of divisions increases. For the time being, if the division unit is about 12 degrees, the shape with the actual arc is about 1 dot, so that may be the permissible range in use.

Drawing text

Font name justification Code Graphcis Total
LARGE CENTER 612 4451 59143
MEDIUM CENTER 612 3727 58419
SMALL CENTER 612 3007 57699


Regarding “justification”, the code processing time for LEFT / RIGHT was the same as that for CENTER, so it is not shown in the table. Did the OR combination with VCENTER slightly increase the processing time due to OR processing?
As for graphics, the processing time seems to have increased due to the large fonts and the increased actual drawing area. (Is it proportional to the drawing area?)


Copied title and URL