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,
    		Graphics.ARC_COUNTER_CLOCKWISE,
    		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

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?)