Added files, directories and comments.

[sdr-websocket.git] / sdrninja-client / sdr.js

diff --git a/sdrninja-client/sdr.js b/sdrninja-client/sdr.js
new file mode 100644 (file)
index 0000000..236b4e9
--- /dev/null
+++ b/sdrninja-client/sdr.js
@@ -0,0 +1,144 @@
+var canvas = document.getElementById("sdr");
+var canvasWidth = canvas.width;
+var canvasHeight = canvas.height;
+var ctx = canvas.getContext("2d");
+
+ctx.imageSmoothingEnabled = false;
+ctx.mozImageSmoothingEnabled = false;
+var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
+
+//test
+var buffer = document.createElement('canvas');
+buffer.width = canvas.width;
+buffer.height = canvas.height;
+
+
+//init pixels
+var pixels = new Array(canvasHeight*canvasWidth);
+
+//generate static
+var pixelCounter=0;
+
+for (y=0; y<canvasHeight; y++) {
+  for (x=0; x<canvasWidth; x++) {
+    //console.log("y:" + y + " x: " + x);
+    r=Math.floor((Math.random() * 255) + 1);
+    g=Math.floor((Math.random() * 255) + 1);
+    b=Math.floor((Math.random() * 255) + 1);
+    pixels[pixelCounter]={x:x, y:y, r:r, g:g, b:b};
+    pixelCounter++;
+  }
+}
+
+//convert static to json
+var pixelJSON = JSON.stringify(pixels);
+var obj = JSON.parse(pixelJSON);
+var arr = new Array();
+
+for(var x in obj){
+  arr.push(obj[x]);
+}
+
+
+var socket = null;
+var isopen = false;
+
+
+socket = new WebSocket("ws://YOURSERVER:9000");
+//socket.binaryType = "arraybuffer";
+
+socket.onopen = function() {
+   console.log("Connected!");
+   isopen = true;
+   sendText();
+}
+
+socket.onmessage = function(e) {
+   //console.log(e.data);
+   if (typeof e.data == "string") {
+     animate(e.data);
+   } else {
+      var arr = new Uint8Array(e.data);
+      var hex = '';
+      for (var i = 0; i < arr.length; i++) {
+         hex += ('00' + arr[i].toString(16)).substr(-2);
+      }
+      //console.log("Binary message received: " + hex);
+   }
+}
+
+socket.onclose = function(e) {
+   console.log("Connection closed.");
+   socket = null;
+   isopen = false;
+}
+
+function sendText() {
+  if (isopen) {
+     //socket.send(canvasWidth);
+     //console.log("Text message sent.");
+  } else {
+     console.log("Connection not opened.")
+  }
+};
+
+startStatic();
+
+function startStatic() {
+  //draw existing array
+  for (var x=0; x<((arr.length)); x++) {
+    drawPixel(arr[x].x, arr[x].y, arr[x].r, arr[x].g, arr[x].b, 255);
+  }
+  updateCanvas();
+}
+
+function animate(newrowJSON) {
+  //draw existing array
+  for (var x=0; x<((arr.length)); x++) {
+    drawPixel(arr[x].x, arr[x].y, arr[x].r, arr[x].g, arr[x].b, 255);
+  }
+  updateCanvas();
+  //shift everything down
+  for (var x=(arr.length-1); x>canvasWidth; x--) {
+    var offset = x-canvasWidth;
+    arr[x].r = arr[offset].r;
+    arr[x].g = arr[offset].g;
+    arr[x].b = arr[offset].b;
+  }
+  //insert the new row
+  var newrow = JSON.parse(newrowJSON);
+  padding=(canvasWidth-newrow.length)/2;
+  for (var x=0; x<padding; x++) {
+    arr[x].r = 0;
+    arr[x].g = 0;
+    arr[x].b = 100;
+  }
+  for (var x=padding; x<(newrow.length+padding); x++) {
+    //console.log(padding);
+    arr[x].r = newrow[x-padding].r;
+    arr[x].g = newrow[x-padding].g;
+    arr[x].b = newrow[x-padding].b;
+  }
+  for (var x=(newrow.length+padding); x<canvasWidth; x++) {
+    arr[x].r = 0;
+    arr[x].g = 0;
+    arr[x].b = 100;
+  }
+}
+
+function updateCanvas() {
+  ctx.save();
+  ctx.putImageData(canvasData, 0, 0);
+  ctx.restore();
+}
+
+//define the value of a pixel
+function drawPixel (x, y, r, g, b, a) {
+  var index = (x + y * canvasWidth) * 4;
+
+  canvasData.data[index + 0] = r;
+  canvasData.data[index + 1] = g;
+  canvasData.data[index + 2] = b;
+  canvasData.data[index + 3] = a;
+}
+