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

CodeGraphicsTotalDrawing result
drawArc543184796239416
drawLine(1deg)813181912137310
drawLine(2deg)41187195697223
drawLine(3deg)27800198383863
drawLine(4deg)21050199577125
drawLine(10deg)8900200664986
drawLine(12deg)7550200663636
drawLine(20deg)4850200860938

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 namejustificationCodeGraphcisTotal
LARGECENTER612445159143
LARGECENTER|VCENTER643445159174
MEDIUMCENTER612372758419
SMALLCENTER612300757699
THAI_HOTCENTER61221684

76376

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

コメント

タイトルとURLをコピーしました