added proper alias support (via new json field) and split the js monolith into multiple files

web/emoji.js

@@ -0,0 +1,17 @@
+function parseEmoticons( inputStr ){
+
+  var emoticons = [
+    {
+      text: ':)',
+      image: '1.png'
+    },
+    {
+      text:';)',
+      image: '2.png'
+    }
+  ];
+  for ( var i = 0; i < emoticons.length; i++ ){
+    inputStr = inputStr.split(emoticons[i].text).join('<img class="emo" src="/web/emoticons/'+emoticons[i].image+'">');
+  }
+  return inputStr;
+}

web/index.html

@@ -65,6 +65,8 @@
   </div>
 
   <script src="/web/main.js"></script>
+  <script src="/web/emoji.js"></script>
+  <script src="/web/photostuff.js"></script>
   </body>
 </html>
 

web/main.js

@@ -33,7 +33,7 @@ document.addEventListener('DOMContentLoaded', function(){
   window.setInterval( update, 7000 );
 
   initState();
-  initPhotoStuff();
+  initPhotoStuff(); //all photostuff is found in photostuff.js
 });
 
 /*
@@ -96,7 +96,8 @@ function addOutboxItem( namm, message ){
     "time" : ddata,
     "message" : message,
     "name" : namm,
-    "node" : alias,
+    "node" : "local",
+    "alias": alias,
     "hops" : "0"
   };
   newMsgs.message = contento;
@@ -186,7 +187,8 @@ var localStorageArray = [];
         user:elementj.name,
         message:elementj.message,
         node:elementj.node,
-        hops:elementj.hops
+        hops:elementj.hops,
+        alias:elementj.alias
       };
     }
   }
@@ -196,37 +198,19 @@ var localStorageArray = [];
     if ( i.length === 0 || i === 'outbox' ) {
             continue;
     }
+
     var datereadable = getReadableDate( new Date(parseInt(orderStorage[i].time)) );
     var color = getNodeColor( orderStorage[i].node );
     contentString += '<li><div class="message-block" style="background-color:'+color+'">'+
       '<div class="date-sender">On ' + datereadable +
       ' <b>' + orderStorage[i].user +'</b> wrote:</div>' +
-      '<div class="message-text">' + parseEmoticons( orderStorage[i].message ) + '</div>' +
+      '<div class="message-text">' + parseEmoticons( orderStorage[i].message ) + '</div>' + //parseEmoticons is found in emoji.js
-      ' <span class="node '+orderStorage[i].node+'">from '+orderStorage[i].node + '</span>' +
+      ' <span class="node '+orderStorage[i].node+'">from '+orderStorage[i].alias + '</span>' +
       ' <span class="hops '+orderStorage[i].hops+'">via '+orderStorage[i].hops+' nodes</span></div></li>';
   }
   document.getElementById( 'inbox' ).innerHTML = contentString;
 }
-function parseEmoticons( inputStr ){
-  //if ( inputStr.indexOf( '<img' ) > -1 ) {
-  //  return inputStr;
-  //}
 
-  var emoticons = [
-    {
-      text: ':)',
-      image: '1.png'
-    },
-    {
-      text:';)',
-      image: '2.png'
-    }
-  ];
-  for ( var i = 0; i < emoticons.length; i++ ){
-    inputStr = inputStr.split(emoticons[i].text).join('<img class="emo" src="/web/emoticons/'+emoticons[i].image+'">');
-  }
-  return inputStr;
-}
 function getReadableDate( date ) {
   var day = date.getDate();
   if (day < 10) day = '0' + day;
@@ -341,228 +325,3 @@ function getOwnAlias() {
   xhr.send();
 }
 
-/*
- * PHOTO STUFF
- */
-var imgDim = 200;
-var canvas1;
-var context1;
-var canvas2;
-var context2;
-var imgObj;
-var fileReader;
-var rotation = 0;
-
-var sourceImage = document.getElementById('sourceImage'); // get reference to img
-var fileInput = document.getElementById('fileInput'); // get reference to file select
-var progressEl = document.getElementById('progress');
-var totalEl = document.getElementById('total');
-
-
-function initPhotoStuff(){
-    canvas1 = document.getElementById('canvas1');
-    context1 = canvas1.getContext('2d');
-    canvas2 = document.getElementById('canvas2');
-    context2 = canvas2.getContext('2d');
-    canvas3 = document.getElementById('canvas3');
-    context3 = canvas3.getContext('2d');
-    initCanvas(context1);
-    initCanvas(context2);
-    initCanvas(context3);
-
-    fileInput.onchange = onFileInputChange;
-
-    document.getElementById('rot-left').onclick = onRotateLeft;
-    document.getElementById('rot-right').onclick = onRotateRight;
-    document.getElementById('submit-photo').onclick = submitImage;
-
-}
-
-
-function submitImage(){
-    var image = new Image(); //create new image holder
-
-    var canvas = document.getElementById('canvas3'); // choose canvas element to convert
-    var dataURL = canvas.toDataURL(); // convert cabvas to data url we can handle
-    image.src = dataURL;
-    image.className = 'photo-message';
-    if ( !image.src || image.src === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAACEUlEQVR4nO3TMQEAIAzAsPk3DQrWF45EQZ/OAVbzOgB+ZhAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBcAEODrNzcVUZ+gAAAABJRU5ErkJggg==" ) { /* prevent sending of empty messages (data url of blank, thus white, canvas)*/
-      return false;
-    }
-
-    var namm = document.getElementById('photo-name').value;
-    if( !namm || namm == "" ){
-      namm = "anonymous";
-    }
-    addOutboxItem( namm, image.outerHTML );
-
-    showOverview();
-    return false;
-}
-
-function initCanvas(context){
-    // Debug filling
-    context.fillStyle ="#dbbd7a";
-    context.fill();
-    context.beginPath();
-    context.rect(0,0, imgDim, imgDim);
-    context.fillStyle = 'white';
-    context.fill();
-    // context.lineWidth = 7;
-    // context.strokeStyle = 'black';
-    // context.stroke();
-}
-
-// create file reader
-function onFileInputChange(){
-    var file = fileInput.files[0]; // get selected file (camera capture)
-    fileReader = new FileReader();
-    fileReader.onload = onFileReaderLoad; // add onload listener
-    fileReader.onprogress = onFileReaderProgress; // add progress listener
-    fileReader.readAsDataURL( file ); // get captured image as data URI
-}
-
-function onFileReaderProgress(e) {
-  if (e.lengthComputable) {
-    var progress = parseInt( ((e.loaded / e.total) * 100), 10 );
-    console.log(progress);
-    progressEl.innerHTML = e.loaded;
-    totalEl.innerHTML = e.total;
-  }
-}
-function onFileReaderLoad() {
-    imgObj = new Image();
-    imgObj.src = fileReader.result;
-    imgObj.onload = onImageLoad;
-
-    //for debugging: show image on screen, will be squashed
-    sourceImage.src = fileReader.result;
-}
-
-function onImageLoad() {
-    var w,h;
-    var xOffset = 0;
-    var yOffset = 0;
-    if ( imgObj.width > imgObj.height ) {
-      h = imgDim;
-      w = imgDim * imgObj.width / imgObj.height;
-      xOffset = (imgDim - w) / 2;
-    } else {
-      w = imgDim;
-      h = imgDim * imgObj.height / imgObj.width;
-      yOffset = (imgDim - h) / 2;
-    }
-    context1.drawImage(imgObj, xOffset, yOffset, w, h);
-    var imageData  = context1.getImageData( 0, 0, canvas1.width, canvas1.height);
-    context2.putImageData( monochrome(imageData,128,"atkinson"), 0, 0);
-    drawRotated();
-}
-
-function onRotateRight(){
-  rotation += 90;
-  drawRotated();
-}
-function onRotateLeft(){
-  rotation -= 90;
-  drawRotated();
-}
-function drawRotated(){
-
-    context3.clearRect(0,0,canvas3.width,canvas3.height);
-    context3.save();
-    context3.translate(canvas3.width/2,canvas3.height/2);
-    context3.rotate(rotation * Math.PI / 180);
-    context3.translate(-canvas3.width/2,-canvas3.height/2);
-    context3.drawImage( canvas2, 0, 0 );
-    context3.restore();
-}
-
-
-
-var bayerThresholdMap = [
-  [  15, 135,  45, 165 ],
-  [ 195,  75, 225, 105 ],
-  [  60, 180,  30, 150 ],
-  [ 240, 120, 210,  90 ]
-];
-
-var lumR = [];
-var lumG = [];
-var lumB = [];
-for (var i=0; i<256; i++) {
-  lumR[i] = i*0.299;
-  lumG[i] = i*0.587;
-  lumB[i] = i*0.114;
-}
-
-function monochrome(imageData, threshold, type){
-
-  var imageDataLength = imageData.data.length;
-
-  // Greyscale luminance (sets r pixels to luminance of rgb)
-  for (var i = 0; i <= imageDataLength; i += 4) {
-    imageData.data[i] = Math.floor(lumR[imageData.data[i]] + lumG[imageData.data[i+1]] + lumB[imageData.data[i+2]]);
-
-
-  }
-  var w = imageData.width;
-  var newPixel, err;
-
-  for (var currentPixel = 0; currentPixel <= imageDataLength; currentPixel+=4) {
-
-    if (type === "none") {
-      // No dithering
-      imageData.data[currentPixel] = imageData.data[currentPixel] < threshold ? 0 : 255;
-    } else if (type === "bayer") {
-      // 4x4 Bayer ordered dithering algorithm
-      var x = currentPixel/4 % w;
-      var y = Math.floor(currentPixel/4 / w);
-      var map = Math.floor( (imageData.data[currentPixel] + bayerThresholdMap[x%4][y%4]) / 2 );
-      imageData.data[currentPixel] = (map < threshold) ? 0 : 255;
-    } else if (type === "floydsteinberg") {
-      // Floyd–Steinberg dithering algorithm
-      newPixel = imageData.data[currentPixel] < 129 ? 0 : 255;
-      err = Math.floor((imageData.data[currentPixel] - newPixel) / 16);
-      imageData.data[currentPixel] = newPixel;
-
-      imageData.data[currentPixel       + 4 ] += err*7;
-      imageData.data[currentPixel + 4*w - 4 ] += err*3;
-      imageData.data[currentPixel + 4*w     ] += err*5;
-      imageData.data[currentPixel + 4*w + 4 ] += err*1;
-    } else {
-      // Bill Atkinson's dithering algorithm
-      newPixel = imageData.data[currentPixel] < 129 ? 0 : 255;
-      err = Math.floor((imageData.data[currentPixel] - newPixel) / 8);
-      imageData.data[currentPixel] = newPixel;
-
-      imageData.data[currentPixel       + 4 ] += err;
-      imageData.data[currentPixel       + 8 ] += err;
-      imageData.data[currentPixel + 4*w - 4 ] += err;
-      imageData.data[currentPixel + 4*w     ] += err;
-      imageData.data[currentPixel + 4*w + 4 ] += err;
-      imageData.data[currentPixel + 8*w     ] += err;
-    }
-
-    // Set g and b pixels equal to r
-    imageData.data[currentPixel + 1] = imageData.data[currentPixel + 2] = imageData.data[currentPixel];
-  }
-  // Alpha: make white pixels transparent!
-  var newColor = {r:0,g:0,b:0, a:0};
-
-  for ( i = 0, n = imageData.data.length; i <n; i += 4) {
-  var r = imageData.data[i],
-          g = imageData.data[i+1],
-          b = imageData.data[i+2];
-
-      // If its white, or close to white then change it
-      if(r >=200 && g >= 200 && b >= 200){
-          // Change the white to whatever.
-          imageData.data[i] = newColor.r;
-          imageData.data[i+1] = newColor.g;
-          imageData.data[i+2] = newColor.b;
-          imageData.data[i+3] = newColor.a;
-      }
-   }
-
-  return imageData;
-}

web/photostuff.js

@@ -0,0 +1,225 @@
+/*
+ * PHOTO STUFF
+ */
+var imgDim = 200;
+var canvas1;
+var context1;
+var canvas2;
+var context2;
+var imgObj;
+var fileReader;
+var rotation = 0;
+
+var sourceImage = document.getElementById('sourceImage'); // get reference to img
+var fileInput = document.getElementById('fileInput'); // get reference to file select
+var progressEl = document.getElementById('progress');
+var totalEl = document.getElementById('total');
+
+
+function initPhotoStuff(){
+    canvas1 = document.getElementById('canvas1');
+    context1 = canvas1.getContext('2d');
+    canvas2 = document.getElementById('canvas2');
+    context2 = canvas2.getContext('2d');
+    canvas3 = document.getElementById('canvas3');
+    context3 = canvas3.getContext('2d');
+    initCanvas(context1);
+    initCanvas(context2);
+    initCanvas(context3);
+
+    fileInput.onchange = onFileInputChange;
+
+    document.getElementById('rot-left').onclick = onRotateLeft;
+    document.getElementById('rot-right').onclick = onRotateRight;
+    document.getElementById('submit-photo').onclick = submitImage;
+
+}
+
+
+function submitImage(){
+    var image = new Image(); //create new image holder
+
+    var canvas = document.getElementById('canvas3'); // choose canvas element to convert
+    var dataURL = canvas.toDataURL(); // convert cabvas to data url we can handle
+    image.src = dataURL;
+    image.className = 'photo-message';
+    if ( !image.src || image.src === "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAACEUlEQVR4nO3TMQEAIAzAsPk3DQrWF45EQZ/OAVbzOgB+ZhAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBYBAIBoFgEAgGgWAQCAaBcAEODrNzcVUZ+gAAAABJRU5ErkJggg==" ) { /* prevent sending of empty messages (data url of blank, thus white, canvas)*/
+      return false;
+    }
+
+    var namm = document.getElementById('photo-name').value;
+    if( !namm || namm == "" ){
+      namm = "anonymous";
+    }
+    addOutboxItem( namm, image.outerHTML );
+
+    showOverview();
+    return false;
+}
+
+function initCanvas(context){
+    // Debug filling
+    context.fillStyle ="#dbbd7a";
+    context.fill();
+    context.beginPath();
+    context.rect(0,0, imgDim, imgDim);
+    context.fillStyle = 'white';
+    context.fill();
+    // context.lineWidth = 7;
+    // context.strokeStyle = 'black';
+    // context.stroke();
+}
+
+// create file reader
+function onFileInputChange(){
+    var file = fileInput.files[0]; // get selected file (camera capture)
+    fileReader = new FileReader();
+    fileReader.onload = onFileReaderLoad; // add onload listener
+    fileReader.onprogress = onFileReaderProgress; // add progress listener
+    fileReader.readAsDataURL( file ); // get captured image as data URI
+}
+
+function onFileReaderProgress(e) {
+  if (e.lengthComputable) {
+    var progress = parseInt( ((e.loaded / e.total) * 100), 10 );
+    console.log(progress);
+    progressEl.innerHTML = e.loaded;
+    totalEl.innerHTML = e.total;
+  }
+}
+function onFileReaderLoad() {
+    imgObj = new Image();
+    imgObj.src = fileReader.result;
+    imgObj.onload = onImageLoad;
+
+    //for debugging: show image on screen, will be squashed
+    sourceImage.src = fileReader.result;
+}
+
+function onImageLoad() {
+    var w,h;
+    var xOffset = 0;
+    var yOffset = 0;
+    if ( imgObj.width > imgObj.height ) {
+      h = imgDim;
+      w = imgDim * imgObj.width / imgObj.height;
+      xOffset = (imgDim - w) / 2;
+    } else {
+      w = imgDim;
+      h = imgDim * imgObj.height / imgObj.width;
+      yOffset = (imgDim - h) / 2;
+    }
+    context1.drawImage(imgObj, xOffset, yOffset, w, h);
+    var imageData  = context1.getImageData( 0, 0, canvas1.width, canvas1.height);
+    context2.putImageData( monochrome(imageData,128,"atkinson"), 0, 0);
+    drawRotated();
+}
+
+function onRotateRight(){
+  rotation += 90;
+  drawRotated();
+}
+function onRotateLeft(){
+  rotation -= 90;
+  drawRotated();
+}
+function drawRotated(){
+
+    context3.clearRect(0,0,canvas3.width,canvas3.height);
+    context3.save();
+    context3.translate(canvas3.width/2,canvas3.height/2);
+    context3.rotate(rotation * Math.PI / 180);
+    context3.translate(-canvas3.width/2,-canvas3.height/2);
+    context3.drawImage( canvas2, 0, 0 );
+    context3.restore();
+}
+
+
+
+var bayerThresholdMap = [
+  [  15, 135,  45, 165 ],
+  [ 195,  75, 225, 105 ],
+  [  60, 180,  30, 150 ],
+  [ 240, 120, 210,  90 ]
+];
+
+var lumR = [];
+var lumG = [];
+var lumB = [];
+for (var i=0; i<256; i++) {
+  lumR[i] = i*0.299;
+  lumG[i] = i*0.587;
+  lumB[i] = i*0.114;
+}
+
+function monochrome(imageData, threshold, type){
+
+  var imageDataLength = imageData.data.length;
+
+  // Greyscale luminance (sets r pixels to luminance of rgb)
+  for (var i = 0; i <= imageDataLength; i += 4) {
+    imageData.data[i] = Math.floor(lumR[imageData.data[i]] + lumG[imageData.data[i+1]] + lumB[imageData.data[i+2]]);
+
+
+  }
+  var w = imageData.width;
+  var newPixel, err;
+
+  for (var currentPixel = 0; currentPixel <= imageDataLength; currentPixel+=4) {
+
+    if (type === "none") {
+      // No dithering
+      imageData.data[currentPixel] = imageData.data[currentPixel] < threshold ? 0 : 255;
+    } else if (type === "bayer") {
+      // 4x4 Bayer ordered dithering algorithm
+      var x = currentPixel/4 % w;
+      var y = Math.floor(currentPixel/4 / w);
+      var map = Math.floor( (imageData.data[currentPixel] + bayerThresholdMap[x%4][y%4]) / 2 );
+      imageData.data[currentPixel] = (map < threshold) ? 0 : 255;
+    } else if (type === "floydsteinberg") {
+      // Floyd–Steinberg dithering algorithm
+      newPixel = imageData.data[currentPixel] < 129 ? 0 : 255;
+      err = Math.floor((imageData.data[currentPixel] - newPixel) / 16);
+      imageData.data[currentPixel] = newPixel;
+
+      imageData.data[currentPixel       + 4 ] += err*7;
+      imageData.data[currentPixel + 4*w - 4 ] += err*3;
+      imageData.data[currentPixel + 4*w     ] += err*5;
+      imageData.data[currentPixel + 4*w + 4 ] += err*1;
+    } else {
+      // Bill Atkinson's dithering algorithm
+      newPixel = imageData.data[currentPixel] < 129 ? 0 : 255;
+      err = Math.floor((imageData.data[currentPixel] - newPixel) / 8);
+      imageData.data[currentPixel] = newPixel;
+
+      imageData.data[currentPixel       + 4 ] += err;
+      imageData.data[currentPixel       + 8 ] += err;
+      imageData.data[currentPixel + 4*w - 4 ] += err;
+      imageData.data[currentPixel + 4*w     ] += err;
+      imageData.data[currentPixel + 4*w + 4 ] += err;
+      imageData.data[currentPixel + 8*w     ] += err;
+    }
+
+    // Set g and b pixels equal to r
+    imageData.data[currentPixel + 1] = imageData.data[currentPixel + 2] = imageData.data[currentPixel];
+  }
+  // Alpha: make white pixels transparent!
+  var newColor = {r:0,g:0,b:0, a:0};
+
+  for ( i = 0, n = imageData.data.length; i <n; i += 4) {
+  var r = imageData.data[i],
+          g = imageData.data[i+1],
+          b = imageData.data[i+2];
+
+      // If its white, or close to white then change it
+      if(r >=200 && g >= 200 && b >= 200){
+          // Change the white to whatever.
+          imageData.data[i] = newColor.r;
+          imageData.data[i+1] = newColor.g;
+          imageData.data[i+2] = newColor.b;
+          imageData.data[i+3] = newColor.a;
+      }
+   }
+
+  return imageData;
+}