187 lines
5.5 KiB
HTML
187 lines
5.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Web socket test</title>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
var ws;
|
||
|
|
var msg;
|
||
|
|
|
||
|
|
function sendMessage(){
|
||
|
|
var message = document.getElementById('message').value;
|
||
|
|
ws.send(message);
|
||
|
|
}
|
||
|
|
|
||
|
|
// this displays a standard frame
|
||
|
|
function connection() {
|
||
|
|
ws = new WebSocket('ws://localhost:1234', 'echo-protocol');
|
||
|
|
|
||
|
|
ws.addEventListener("message", function(e) {
|
||
|
|
|
||
|
|
// TO DO
|
||
|
|
// check size of data
|
||
|
|
// if 800 then update both windows and 7-segment display
|
||
|
|
// if only window data is sent, redraw only that
|
||
|
|
// if only segment..
|
||
|
|
// if unexpected size...
|
||
|
|
|
||
|
|
// header: 12 bytes.
|
||
|
|
// 10 first bytes must be "s2l\n<8<18 "
|
||
|
|
// z buffer: 1 byte
|
||
|
|
// CR \n: 1 byte
|
||
|
|
var headersize = 12;
|
||
|
|
|
||
|
|
// The data is the message from stdin of the server
|
||
|
|
var frame = e.data;
|
||
|
|
msg = frame;
|
||
|
|
console.log("Data length received: " + frame.length);
|
||
|
|
|
||
|
|
// we got a frame here
|
||
|
|
// the header is skipped (headersize)
|
||
|
|
// we should test here if it's correct header
|
||
|
|
// first the windows 8*(12*4+1) (8 rows of 12 windows with 4 valus plus a \n per row)
|
||
|
|
//console.log(frame);
|
||
|
|
|
||
|
|
var width = 12;
|
||
|
|
var height = 8;
|
||
|
|
|
||
|
|
for(y=0;y<height;y++) {
|
||
|
|
for(x=0;x<width;x++) {
|
||
|
|
// Determine r g b for this window x,y
|
||
|
|
r = frame[headersize + (y * (width * 4 + 1)) + (x * 4 + 0)];
|
||
|
|
g = frame[headersize + (y * (width * 4 + 1)) + (x * 4 + 1)];
|
||
|
|
b = frame[headersize + (y * (width * 4 + 1)) + (x * 4 + 2)];
|
||
|
|
|
||
|
|
//console.log("RGB val=" + r.charCodeAt(0) + "," + g.charCodeAt(0) + "," + b.charCodeAt(0))
|
||
|
|
lightWindow(x,y,r.charCodeAt(0),g.charCodeAt(0),b.charCodeAt(0));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// now the 7 segment (8 actually) display
|
||
|
|
// it contains 12*(8*4+1) bytes for the 8 segments
|
||
|
|
// bytes012: color of segment0, display0
|
||
|
|
// bytes456: color of segment1, display0
|
||
|
|
// bytes89a: color of segment2, display0
|
||
|
|
var segments = 8;
|
||
|
|
|
||
|
|
// add all the display windows/frame data to header
|
||
|
|
headersize += height * (width * 4 + 1);
|
||
|
|
|
||
|
|
for(d=0;d<width;d++) {
|
||
|
|
for(s=0;s<segments;s++) {
|
||
|
|
|
||
|
|
//console.log(headersize + d * (segments * 4 + 1) + s * 4 + 0)
|
||
|
|
// Determine r g b for this window d, segment s
|
||
|
|
r = frame[headersize + d * (segments * 4 + 1) + s * 4 + 0];
|
||
|
|
g = frame[headersize + d * (segments * 4 + 1) + s * 4 + 1];
|
||
|
|
b = frame[headersize + d * (segments * 4 + 1) + s * 4 + 2];
|
||
|
|
//console.log("Window " + d + ", segment " + s + "=" + r.charCodeAt(0) + "," + g.charCodeAt(0) + "," + b.charCodeAt(0));
|
||
|
|
lightSegment(d, s, r.charCodeAt(0), g.charCodeAt(0), b.charCodeAt(0));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body onload=connection()>
|
||
|
|
<canvas id="myCanvas" width="1437" height="1051"></canvas>
|
||
|
|
<script>
|
||
|
|
var canvas = document.getElementById('myCanvas');
|
||
|
|
var context = canvas.getContext('2d');
|
||
|
|
var imageObj = new Image();
|
||
|
|
imageObj.src = 'building-isometric_night.jpg';
|
||
|
|
// windowTab[0][0]={x:488,y:265};
|
||
|
|
// windowTab[1][0]={x:528,y:265};
|
||
|
|
function lightWindowBW(x,y,r,g,b) {
|
||
|
|
luminance = 0.299*r + 0.587*g + 0.114*Bb
|
||
|
|
context.beginPath();
|
||
|
|
context.rect(488+40.3*x, 265+87.4*y, 23, 34);
|
||
|
|
context.fillStyle = 'rgb('+luminance+','+luminance+','+luminance+')';
|
||
|
|
context.fill();
|
||
|
|
}
|
||
|
|
function lightWindow(x,y,r,g,b) {
|
||
|
|
//console.log(r + ',' + g + ',' + b);
|
||
|
|
context.beginPath();
|
||
|
|
context.rect(488+40.3*x, 265+87.4*y, 23, 34);
|
||
|
|
context.fillStyle = 'rgb('+r+','+g+','+b+')';
|
||
|
|
context.fill();
|
||
|
|
}
|
||
|
|
function lightSegment(display,segment,r,g,b) {
|
||
|
|
context.beginPath();
|
||
|
|
segx=488+40.3*display;
|
||
|
|
segy=176
|
||
|
|
switch(segment) {
|
||
|
|
case 0: //segment 0
|
||
|
|
context.moveTo(segx,segy);
|
||
|
|
context.lineTo(segx+23,segy);
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
context.moveTo(segx+23,segy);
|
||
|
|
context.lineTo(segx+23,segy+17);
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
context.moveTo(segx+23,segy+18);
|
||
|
|
context.lineTo(segx+23,segy+34);
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
context.moveTo(segx,segy+34);
|
||
|
|
context.lineTo(segx+23,segy+34);
|
||
|
|
break;
|
||
|
|
case 4:
|
||
|
|
context.moveTo(segx,segy+18);
|
||
|
|
context.lineTo(segx,segy+34);
|
||
|
|
break;
|
||
|
|
case 5:
|
||
|
|
context.moveTo(segx,segy);
|
||
|
|
context.lineTo(segx,segy+17);
|
||
|
|
break;
|
||
|
|
case 6:
|
||
|
|
context.moveTo(segx,segy+17);
|
||
|
|
context.lineTo(segx+23,segy+17);
|
||
|
|
break;
|
||
|
|
case 7:
|
||
|
|
context.moveTo(segx+23,segy+38);
|
||
|
|
context.lineTo(segx+23,segy+42);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
context.lineWidth=5;
|
||
|
|
context.strokeStyle = 'rgb('+r+','+g+','+b+')';
|
||
|
|
context.stroke();
|
||
|
|
}
|
||
|
|
var ascii2segments = new Array (
|
||
|
|
0x00, 0x80, 0x80, 0x80, 0x80, 0x80, 0x80, 0x02,
|
||
|
|
0x80, 0x0f, 0x80, 0x80, 0x04, 0x40, 0x80, 0x80,
|
||
|
|
0x3F, 0x06, 0x5B, 0x4F, 0x66, 0x6D, 0x7D, 0x07,
|
||
|
|
0x7F, 0x6F, 0x80, 0x80, 0x80, 0x48, 0x80, 0x27,
|
||
|
|
0x80, 0x77, 0x7c, 0x39, 0x5e, 0x79, 0x71, 0x3d,
|
||
|
|
0x76, 0x30, 0x1E, 0x76, 0x38, 0x15, 0x37, 0x3f,
|
||
|
|
0x73, 0x67, 0x31, 0x6d, 0x78, 0x3e, 0x1C, 0x2A,
|
||
|
|
0x76, 0x6e, 0x5b, 0x39, 0x80, 0x0F, 0x80, 0x08,
|
||
|
|
0x80, 0x5f, 0x7c, 0x58, 0x5e, 0x7b, 0x71, 0x6F,
|
||
|
|
0x74, 0x30, 0x0E, 0x76, 0x06, 0x15, 0x54, 0x5c,
|
||
|
|
0x73, 0x67, 0x50, 0x6d, 0x78, 0x1c, 0x1c, 0x2A,
|
||
|
|
0x76, 0x6e, 0x5b, 0x39, 0x80, 0x0F, 0x80, 0x08
|
||
|
|
);
|
||
|
|
|
||
|
|
imageObj.onload = function() {
|
||
|
|
context.drawImage(imageObj, 0, 0);
|
||
|
|
|
||
|
|
for(x=0;x<12;x++)
|
||
|
|
for(y=-1;y<8;y++)
|
||
|
|
lightWindow(x,y,0,0,0);
|
||
|
|
|
||
|
|
};
|
||
|
|
// delete segment s on display d (0=left, 11=right)
|
||
|
|
// lightSegment(d,s,0,0,0);
|
||
|
|
// color r g b of segment s on display d
|
||
|
|
// lightSegment(d,s,r,g,b);
|
||
|
|
// windows light
|
||
|
|
// lightWindow(i,j,0) // switch off window i (0=left) in row j (0=top)
|
||
|
|
// lightWindow(i,j,w) // switch on new window with brightness w
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|