-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (110 loc) · 3.31 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> ES6 compiled Web App</title>
</head>
<link ref="stylesheet" href="./src/pure.css" >
<link ref="stylesheet" href="./src/styles.css" >
<body>
<!--<img src="RealShadow_flight.png" class="lowPoly">-->
<!--<img src="" id="lpImg">-->
<h3> ES6 Drone Module Example </h3>
<canvas id="canv"></canvas>
<canvas id="avator"></canvas>
<div id="board"></div>
</body>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- load App with SystemJS -->
<!--<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>-->
<!--load App with webpacked bundle.js-->
<script src="dist/bundle.js"></script>
<script>
var img = new Image();
// load img async..
img.src = './drone.png';
document.querySelector("#avator").getContext("2d").drawImage(img, 0,0,44,44);
var drone = new Alex.Drone({});
var canv = document.querySelector("#canv");
var board = document.querySelector("#board");
canv.getContext('2d').translate(0.5, 0.5);
Alex.Canvas.init(canv);
var dronelayer = new Alex.Chart({
ele: canv,
data: drone.point.coordinates,
// url: './drone.png'
});
setInterval(function(){
drone.updateDrone();
dronelayer.setData({
'coords': drone.point.coordinates,
'rotate': drone.direction,
'name': drone.name,
});
}, 40);
// register game controller bind with drone
Alex.Controllers.gameControl(drone);
Alex.Controllers.dashBoard(drone, board);
Alex.Util.getJSON("./package.json").then( data => {
console.log("got data: " + data)
}).catch( err => {
console.error(err);
})
/**
* getJSON("somedata.json").then((data) => {
* console.log("got data: " + data);
* })
* .catch((err) => {
* console.error("encounter error..");
* })
*/
</script>
<!--<script>
// 方便调试。。应用层面的代码不放到 bundle 中
var canv = document.querySelector("#canv");
// canv.getContext('2d').translate(0.5, 0.5);
Alex.Canvas.init(canv);
Alex.Canvas.setWidth(2);
Alex.Canvas.setStroke('rgba(255,0,0,0.6)');
var data = [100,40,140,30,80,120,40,55,122,14,90,11,11,23];
var ldata = null, sinline = null;
var timer = 50; // start with X = 50 pixel.
var dronelayer = new Alex.Chart({
ele: canv,
data: data,
// url: './drone.png'
});
setInterval(function(){
data.shift();
data.push(Math.random()*150);
ldata = statMean(data);
// Alex.Canvas.drawBars(data); // timer/1.20
Alex.Canvas.clearCanv();
sinline = dronelayer.generateSinLine('cos', timer, 20.0, timer/1.20);
Alex.Canvas.drawLine(sinline, null, null, 1);
Alex.Canvas.drawPoint(sinline[sinline.length-1], 2);
// Alex.Canvas.drawLine(ldata);
Alex.Canvas.drawLine([[0, 50], [1000, 50]]);
timer++;
}, 20);
function statMean(data) {
var mean = 0, ldata = [];
data.forEach(function(val){
mean += val;
});
mean = mean/data.length;
ldata[0] = [0, mean];
ldata[1] = [canv.width, mean];
return ldata;
}
</script>-->
</html>