sdrninja-client/sdr.js

   1 var canvas = document.getElementById("sdr");
   2 var canvasWidth = canvas.width;
   3 var canvasHeight = canvas.height;
   4 var ctx = canvas.getContext("2d");
   5
   6 ctx.imageSmoothingEnabled = false;
   7 ctx.mozImageSmoothingEnabled = false;
   8 var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
   9
  10 //test
  11 var buffer = document.createElement('canvas');
  12 buffer.width = canvas.width;
  13 buffer.height = canvas.height;
  14
  15
  16 //init pixels
  17 var pixels = new Array(canvasHeight*canvasWidth);
  18
  19 //generate static
  20 var pixelCounter=0;
  21
  22 for (y=0; y<canvasHeight; y++) {
  23   for (x=0; x<canvasWidth; x++) {
  24     //console.log("y:" + y + " x: " + x);
  25     r=Math.floor((Math.random() * 255) + 1);
  26     g=Math.floor((Math.random() * 255) + 1);
  27     b=Math.floor((Math.random() * 255) + 1);
  28     pixels[pixelCounter]={x:x, y:y, r:r, g:g, b:b};
  29     pixelCounter++;
  30   }
  31 }
  32
  33 //convert static to json
  34 var pixelJSON = JSON.stringify(pixels);
  35 var obj = JSON.parse(pixelJSON);
  36 var arr = new Array();
  37
  38 for(var x in obj){
  39   arr.push(obj[x]);
  40 }
  41
  42
  43 var socket = null;
  44 var isopen = false;
  45
  46
  47 socket = new WebSocket("ws://YOURSERVER:9000");
  48 //socket.binaryType = "arraybuffer";
  49
  50 socket.onopen = function() {
  51    console.log("Connected!");
  52    isopen = true;
  53    sendText();
  54 }
  55
  56 socket.onmessage = function(e) {
  57    //console.log(e.data);
  58    if (typeof e.data == "string") {
  59      animate(e.data);
  60    } else {
  61       var arr = new Uint8Array(e.data);
  62       var hex = '';
  63       for (var i = 0; i < arr.length; i++) {
  64          hex += ('00' + arr[i].toString(16)).substr(-2);
  65       }
  66       //console.log("Binary message received: " + hex);
  67    }
  68 }
  69
  70 socket.onclose = function(e) {
  71    console.log("Connection closed.");
  72    socket = null;
  73    isopen = false;
  74 }
  75
  76 function sendText() {
  77   if (isopen) {
  78      //socket.send(canvasWidth);
  79      //console.log("Text message sent.");
  80   } else {
  81      console.log("Connection not opened.")
  82   }
  83 };
  84
  85 startStatic();
  86
  87 function startStatic() {
  88   //draw existing array
  89   for (var x=0; x<((arr.length)); x++) {
  90     drawPixel(arr[x].x, arr[x].y, arr[x].r, arr[x].g, arr[x].b, 255);
  91   }
  92   updateCanvas();
  93 }
  94
  95 function animate(newrowJSON) {
  96   //draw existing array
  97   for (var x=0; x<((arr.length)); x++) {
  98     drawPixel(arr[x].x, arr[x].y, arr[x].r, arr[x].g, arr[x].b, 255);
  99   }
 100   updateCanvas();
 101   //shift everything down
 102   for (var x=(arr.length-1); x>canvasWidth; x--) {
 103     var offset = x-canvasWidth;
 104     arr[x].r = arr[offset].r;
 105     arr[x].g = arr[offset].g;
 106     arr[x].b = arr[offset].b;
 107   }
 108   //insert the new row
 109   var newrow = JSON.parse(newrowJSON);
 110   padding=(canvasWidth-newrow.length)/2;
 111   for (var x=0; x<padding; x++) {
 112     arr[x].r = 0;
 113     arr[x].g = 0;
 114     arr[x].b = 100;
 115   }
 116   for (var x=padding; x<(newrow.length+padding); x++) {
 117     //console.log(padding);
 118     arr[x].r = newrow[x-padding].r;
 119     arr[x].g = newrow[x-padding].g;
 120     arr[x].b = newrow[x-padding].b;
 121   }
 122   for (var x=(newrow.length+padding); x<canvasWidth; x++) {
 123     arr[x].r = 0;
 124     arr[x].g = 0;
 125     arr[x].b = 100;
 126   }
 127 }
 128
 129 function updateCanvas() {
 130   ctx.save();
 131   ctx.putImageData(canvasData, 0, 0);
 132   ctx.restore();
 133 }
 134
 135 //define the value of a pixel
 136 function drawPixel (x, y, r, g, b, a) {
 137   var index = (x + y * canvasWidth) * 4;
 138
 139   canvasData.data[index + 0] = r;
 140   canvasData.data[index + 1] = g;
 141   canvasData.data[index + 2] = b;
 142   canvasData.data[index + 3] = a;
 143 }
 144