avatarDisplayServer/personalAvatars.html at master · PIELab/avatarDisplayServer · 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
128
129
130
131
132
133
134
135
<html>
<head>
	<!-- auto-refresh: n = seconds -->
	<meta http-equiv="refresh" content="30" />

	<!-- load libraries -->
	<script type="text/javascript" src="JS/jquery-1.9.1.min.js"></script>

	<!-- load globals -->
	<script type="text/javascript" src="JS/globals.js"></script>

	<!-- load countly JSON  -->
	<script type="text/javascript">
		function fps2delay(fps){
		// converts given fps value and converts it to a delay time in ms
			delay = 1000.0/fps
			if(delay <= 0 || delay == Infinity){
				return 300;	//slowest fps
			}else{
				return delay;
			}
		}

		// get all data for today
		//http://testsubdomain.socialvinesolutions.com/o?api_key=f9260de6b6495ee559b8f951109d3959&app_id=510892b53f3f90f302000001&method=events&event=physicalActivity&action=refresh
		var JSONurl="http://testsubdomain.socialvinesolutions.com/o"+
			"?api_key=f9260de6b6495ee559b8f951109d3959"+
			"&app_id=510892b53f3f90f302000001"+
			"&method=events"+
			"&event=physicalActivity"+
			"&action=refresh";

		$.ajax({
			type: 'GET',
			dataType: "JSONP",
			url: JSONurl,
			success: function(data){
				var dt = new Date();
				var hr  = dt.getHours();	//this can be any hour so far today, but the rest (y,m,d) MUST be today only
				var day =  dt.getDate();
				var mon = dt.getMonth()+1;
				var yr  = dt.getFullYear();

				console.log("all data:");
				console.log(data);

				function getTableN(dataObj,tableName){
				// finds the table index for the given tableName in data object
					var N_TABLES = 2 // number of tables in data object
					for (tableN = 0; tableN < N_TABLES; tableN++){
						if ( dataObj[tableN]._id == tableName){
							return tableN
						}
					} // else:
					console.log("unknown table id '"+data[tableN]._id+"'")
				}

				var no_seg_index = getTableN(data,"no-segment")
				var UID_index    = getTableN(data,"UID")

				console.log("using data from _id="+data[UID_index]._id)

				//print out current population activity summary
 				console.log("current day ("+yr+'-'+mon+'-'+day+' '+hr+":00) data:");
				console.log(data[no_seg_index][yr][mon][day]);

				//print out each UID
				console.log("found "+data[UID_index]._id+"s are:");	//this should print "found UIDs are"
				var i = 0;
				for (uid in data[UID_index][yr][mon][day]){
					console.log('\t'+uid);

					var sum   = data[UID_index][yr][mon][day][uid].s;
					var count = data[UID_index][yr][mon][day][uid].c;
					if(sum==undefined){
						sum=0;
						ACTIVITY_LEVEL[i] = 0;
					}else{
						var scaler = 140;
						ACTIVITY_LEVEL[i] = sum/count*scaler;
					}
					console.log("\t\tactiveLevel="+sum+"/"+count+"="+ACTIVITY_LEVEL[i]);


					var avatarName = uid;
					//set global stuff
					ANIMATION_SPEED[i] = Math.floor(fps2delay(ACTIVITY_LEVEL[i]));
					console.log("\t\tanim_speed="+ANIMATION_SPEED[i]);
					CURRENT_FRAME[i] = 0;
					ANIMATION_ACTIVITY[i] = getAnimationName(i);
					FACE_IMAGE[i] = 'http://testsubdomain.socialvinesolutions.com:8787/'+uid+'.png';
					insertAvatarCanvas(avatarName, i);
					i+=1;
				}
			}
		});
	</script>

	<!-- load javascript functions -->
	<script src="JS/avatarEmbiggener.js"></script>
	<script src="JS/avatarInserter.js"></script>
	<script src="JS/animateAvatar.js"></script>

	<!-- define what the page does onload -->
	<script type="text/javascript">
		function startup(){

		}
	</script>

</head>

<body onload="startup()"  bgcolor="#C4C4C0">

	<h1>People using USF PIE avatars4change app today:</h1>
	<div id="avatars">
		<!-- will look something like:
		<canvas id="avatar0" height="300" width="300" onclick="drawAvatarAnim()"></canvas>
			in older versions:
		<canvas id="avatar1" height="100" width="100"></canvas>
			even older:
		<image id='avatar2' src='images/animations/running/0.png' /> -->
	</div>

<!--
	<button type="button" onclick="insertImage(animationSize)">add avatar</button>
-->
<!--
	<button type="button" onclick="oneFrameAll()">animate avatars</button>
-->
<!--
<input type="submit" name="increment" value="Increment" />
-->
</body>
</html>