Android-profile-GPU-rendering/apgr.html at master · funorpain/Android-profile-GPU-rendering · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html>
<head>
<title>Profile GPU rendering</title>
<style>
canvas {
	border: 1px solid black;
}
span {
	display: inline-block;
	width: 16px;
	height: 16px;
}
</style>
</head>
<body>
<p>
	<label for="packageName">Package Name</label>
	<input id="packageName" type="text"/>
</p>
<canvas width="640" height="480"></canvas>
<p id="legends">
</p>
<script src="zepto.min.js"></script>
<script>
(function(){
	var packageNamePattern = /^[a-zA-Z][a-zA-Z0-9_]*(\.[a-zA-Z][a-zA-Z0-9_]*)*$/
	var url = 'http://localhost:8002/'
	var interval = 200
	var width = 640
	var height = 480
	var threshold = 16
	var dx = 5
	var dy = 10
	var colors = {
		"threshold": "green",
		"Draw": "blue",
		"Prepare": "purple",
		"Process": "orange",
		"Execute": "yellow"
	}
	var delim = "\r\r\n"
	var n = 128
	var pos = 0
	var hist = []
	for (var i = 0; i < n; i++) {
		hist[i] = 0
	}
	var canvas = $("canvas")[0]
	var ctx = canvas.getContext("2d")

	var handler = function(data){
		var b = data.lastIndexOf(delim + "\tDraw\t")
		if (b == -1) {
			return
		}
		b += delim.length
		var e = data.indexOf(delim + delim, b)
		if (data.indexOf(delim, b) == e) {
			return
		}

		var x = data.substring(b, e).split(delim)
		var titles = x[0].split('\t')
		var html = ''
		for (var i = 1, m = titles.length; i < m; i++) {
			html += '<span style="background-color:' + colors[titles[i]] + '"></span> ' + titles[i] + ' '
		}
		$('#legends').html(html)

		for (var i = 1, m = x.length; i < m; i++) {
			var y = x[i].split('\t')
			var t = 0
			var x1 = dx * pos
			var y1 = height
			for (var j = 1; j < y.length; j++) {
				y[j] = parseFloat(y[j])
				ctx.fillStyle = colors[titles[j]]
				var g = dy * y[j]
				ctx.fillRect(x1, y1, dx, -g)
				t += y[j]
				y1 -= g
			}
			hist[pos] = t
			ctx.clearRect(x1, y1, dx, -y1)
			pos++
			if (pos == n) {
				pos = 0
			}
		}

		{
			var x1 = dx * pos
			var y1 = height
			var g = dy * hist[pos]
			ctx.fillStyle = colors['threshold']
			ctx.fillRect(x1, y1, dx, -g)
			y1 -= g
			ctx.clearRect(x1, y1, dx, -y1)
		}

		ctx.fillStyle = colors['threshold']
		ctx.fillRect(0, height - dy * threshold, width, -1)
		ctx.fillText(threshold + "ms", 0, height - dy * threshold - 4)
	}

	var poll = function() {
		var packageName = $('#packageName').val()
		if (!packageName.match(packageNamePattern)) {
			return
		}
		$.get(url + packageName, handler)
	}

	var timer = function() {
		poll()
		setTimeout(timer, interval)
	}

	Zepto(function($){
		timer()
	})

})()
</script>
</body>
</html>