-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
109 lines (98 loc) · 3.34 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
<!DOCTYPE html>
<html>
<head>
<script src="include/util.js"></script>
<script src="include/webutil.js"></script>
<script src="include/base64.js"></script>
<script src="include/websock.js"></script>
<script type="text/javascript">
/* Precompute colormap */
var colormap = [];
for (i = 0; i < 256; i++) {
if( (i<43) )
colormap[i] = new Uint8ClampedArray([0, 0, Math.round(255*(i/43)), 255]);
if( (i>=43) && (i<87) )
colormap[i] = new Uint8ClampedArray([0, Math.round(255*(i-43)/43), 255, 255]);
if( (i>=87) && (i<120) )
colormap[i] = new Uint8ClampedArray([0, 255, Math.round(255-(255*(i-87)/32)), 255]);
if( (i>=120) && (i<154) )
colormap[i] = new Uint8ClampedArray([Math.round((255*(i-120)/33)), 255, 0, 255]);
if( (i>=154) && (i<217) )
colormap[i] = new Uint8ClampedArray([255, Math.round(255-(255*(i-154)/62)), 0, 255]);
if( (i>=217) )
colormap[i] = new Uint8ClampedArray([255, 0, Math.round(128*(i-217)/38), 255]);
}
</script>
<style type="text/css">
body {
background-color: #4A4A4A;
}
</style>
</head>
<body>
<canvas id="linegraph" width="1024" height="256" style="border: 1px solid grey; background-color: #333333;"></canvas>
<canvas id="waterfall" width="1024" height="384" style="border: 1px solid grey;"></canvas>
<fieldset>
<legend>Frequency</legend>
<input type="text" value="99.4" id="freq">MHz <button onclick="set_freq(document.getElementById('freq').value * 1e6);">SET</button>
</fieldset>
<fieldset>
<legend>Websocket</legend>
<button onclick="ws.close();">CLOSE</button>
</fieldset>
<script type="text/javascript">
var linectx = document.getElementById('linegraph').getContext("2d");
var context = document.getElementById('waterfall').getContext("2d");
var cid = context.createImageData(1,1);
linectx.strokeStyle = '#5EFF00';
linectx.linewidth = 1;
function drawpixel(xpos, amplitude) {
window.cid.data.set(window.colormap[amplitude]);
window.context.putImageData(cid, xpos, 0);
}
function shift_canvas() {
var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height-1);
window.context.putImageData(imageData, 0, 1);
}
function set_freq(num) {
var str = num + '';
//var bytes = [];
ws.send(0x00);
for (var i = 0; i < str.length; ++i) {
ws.send(str.charCodeAt(i));
//bytes.push(str.charCodeAt(i));
}
ws.send(0xFF);
//return bytes;
}
var ws = new Websock();
ws.open('ws://localhost:8080');
ws.on('open', function(){
console.log('Connection open!');
});
ws.on('close', function(){
console.log('Connection closed');
});
ws.on('error', function(error){
console.log('Error detected: ' + error);
});
ws.on('message', function(e){
//while(ws.rQlen()) {
// var server_message = ws.rQshift8();
// console.log('MSG: ' +server_message);
//}
shift_canvas();
//window.context.clearRect(0, 0, window.context.canvas.width, 1);
window.linectx.clearRect(0, 0, window.linectx.canvas.width, window.linectx.canvas.height);
window.linectx.beginPath();
window.linectx.moveTo(0, 255 - ws.rQpeek8());
for (i = 0; i < 1024; i++) {
var a = ws.rQshift8();
window.linectx.lineTo(i, 255 - a);
drawpixel(i, a);
}
window.linectx.stroke();
});
</script>
</body>
</html>