begin photo function

web/index.html

@@ -7,7 +7,6 @@
     <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
     <meta http-equiv="pragma" content="no-cache" />
     <meta name="viewport" content="width=device-width, user-scalable=no">
-    <!-- <script src="/web/lib/jquery&#45;2.1.1.min.js"></script> -->
     <link href="/web/style.css" rel="stylesheet" type="text/css">
     <title>meshed up</title>
   </head>
@@ -15,30 +14,53 @@
     <div id="header">
       <h2>Meshenger</h2>
     </div>
-    <!--
-    <form id="message-form" action="">
-      <table width="100%" style="padding :10px;">
-        <tr>
-          <td width="100px">
-              <input style="width:100%" id="new-sender" type="text" placeholder="Your name">
-          </td>
-          <td>
-              <input style="width:100%" id="new-message" type="text" placeholder="Your message">
-          </td>
-          <td width="50px">
-            <input class="send-button" style="width:50px" type="button" value="Send">
-          </td>
-        </tr>
-      </table>
-    </form>
-    -->
 
-    <form id="message-form" action="">
+    <form id="message-form" action="" accept-charset="utf-8">
       <textarea id="name" rows="1" placeholder="Your Name"></textarea>
       <textarea id="message" rows="2"  placeholder="Your Message"></textarea>
+      
+      
+     
+      <!-- removed photo button from here, otherwise triggers sending (empty) messages... TO FIX-->
+       
       <input type="submit" class="send-button" value="Send">
     </form>
 
+ <button id="pop" class="photo-buttons" onclick="document.getElementById('photoEdit').style.display='block';">Add Photo</button>
+
+
+<div id="photoEdit" class="photoBox">
+    <input id="fileInput" accept="image/*" capture="camera" type="file">
+    <br>
+    <p>
+      <span id="progress">--</span> 
+      <span id="total">--</span>
+    </p>
+  
+    <!--Squashed source<br>-->
+    <img id="sourceImage" src="" alt="capture" height="400" width="400">
+  
+    <!--Offset done<br>-->
+    <canvas id="canvas1" width="400" height="400"></canvas>
+    
+    <!--Dithered<br>-->
+    <canvas id="canvas2" width="400" height="400"></canvas>
+    
+    <!--Rotated<br>-->
+    <canvas id="canvas3" width="400" height="400"></canvas>
+    <br>
+
+    <button id="rotLeft">Rotate left</button>
+    <button id="rotRight">Rotate right</button>
+
+    <button id="submitPhoto" class="photo-buttons"  onclick="submitImage();document.getElementById('photoEdit').style.display='none';">submit</button>
+
+
+    <button id="submitPhoto" class="photo-buttons"  onclick="document.getElementById('photoEdit').style.display='none';">cancel</button>
+
+  </div>
+
+
     <div class="messages">
       <ul id="inbox"></ul>
 

web/main.js

@@ -39,70 +39,70 @@ document.getElementById('message-form').onsubmit = function(){
 
 function checkOutbox() {
         var outStr = localStorage.getItem( 'outbox' );
-	if ( ! outStr ) {
+  if ( ! outStr ) {
-		return;
+    return;
-	}
+  }
-	var lines = outStr.split( /\n/ );
+  var lines = outStr.split( /\n/ );
-	for ( var i in lines ) {
+  for ( var i in lines ) {
-		if ( lines[i].length === 0 ) {
+    if ( lines[i].length === 0 ) {
-			continue;
+      continue;
-		}
+    }
-		var obj = JSON.parse(lines[i]);
+    var obj = JSON.parse(lines[i]);
-		var ts = obj.message.time;
+    var ts = obj.message.time;
-		delete obj.message.time;
+    delete obj.message.time;
-		var msg = JSON.stringify(obj.message);
+    var msg = JSON.stringify(obj.message);
-		sendMessage( ts, msg );
+    sendMessage( ts, msg );
-	}
+  }
 }
 function sendMessage( timestamp, message ) {
-	var xhr = new XMLHttpRequest();
+  var xhr = new XMLHttpRequest();
-	var data = 'time=' + encodeURIComponent( timestamp ) +
+  var data = 'time=' + encodeURIComponent( timestamp ) +
-		'&message=' + encodeURIComponent( message );
+    '&message=' + encodeURIComponent( message );
 
-	xhr.onreadystatechange = function(){
+  xhr.onreadystatechange = function(){
-	 	if ( xhr.readyState == 4){
+    if ( xhr.readyState == 4){
-	  		if ( xhr.status == 200 ) {
+        if ( xhr.status == 200 ) {
-	   			removeOutboxItem( timestamp );
+          removeOutboxItem( timestamp );
-	  		}
+        }
- 		}
+    }
-	};
+  };
 
-	xhr.open('POST', 'send', true);
+  xhr.open('POST', 'send', true);
-	xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-	xhr.setRequestHeader('If-Modified-Since', 'Sat, 1 Jan 2005 00:00:00 GMT');
+  xhr.setRequestHeader('If-Modified-Since', 'Sat, 1 Jan 2005 00:00:00 GMT');
-	xhr.send(data);
+  xhr.send(data);
 }
 function removeOutboxItem( timestamp ) {
-	var outStr = localStorage.getItem( 'outbox' ) || '';
+  var outStr = localStorage.getItem( 'outbox' ) || '';
-	var lines = outStr.split( /\n/ );
+  var lines = outStr.split( /\n/ );
-	for ( var i in lines ) {
+  for ( var i in lines ) {
                 var obj = JSON.parse(lines[i]);
-		var ts = obj.message.time;
+    var ts = obj.message.time;
-		if ( ts === timestamp ) {
+    if ( ts === timestamp ) {
-			lines.splice( i, 1 );
+      lines.splice( i, 1 );
-			break;
+      break;
-		}
+    }
-	}
+  }
-	var newOutStr = lines.join('\n');
+  var newOutStr = lines.join('\n');
-	localStorage.setItem('outbox', newOutStr);
+  localStorage.setItem('outbox', newOutStr);
-	updateOutboxView();
+  updateOutboxView();
 }
 function updateOutboxView() {
-	var contentString = '';
+  var contentString = '';
-	var outStr = localStorage.getItem( 'outbox' ) || '';
+  var outStr = localStorage.getItem( 'outbox' ) || '';
-	var lines = outStr.split( /\n/ );
+  var lines = outStr.split( /\n/ );
-	for ( var i in lines ) {
+  for ( var i in lines ) {
-		if ( lines[ i ].length === 0 ) {
+    if ( lines[ i ].length === 0 ) {
-			continue;
+      continue;
-		}
+    }
                var obj = JSON.parse(lines[i]);
                 var ts = obj.message.time;
                 delete obj.message.time;
                 var msg = JSON.stringify(obj.message);
 
-		contentString += '<li><b>' + ts + ' </b>' + msg + '</li>';
+    contentString += '<li><b>' + ts + ' </b>' + msg + '</li>';
-	}
+  }
-	document.getElementById( 'outbox' ).innerHTML = contentString;
+  document.getElementById( 'outbox' ).innerHTML = contentString;
 }
 
 /*
@@ -175,53 +175,53 @@ function getNodeColor( nodeId ) {
 }
 function colorLuminance(hex, lum) {
 
-	// validate hex string
+  // validate hex string
-	hex = String(hex).replace(/[^0-9a-f]/gi, '');
+  hex = String(hex).replace(/[^0-9a-f]/gi, '');
-	if (hex.length < 6) {
+  if (hex.length < 6) {
-		hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
+    hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
-	}
+  }
-	lum = lum || 0;
+  lum = lum || 0;
 
-	// convert to decimal and change luminosity
+  // convert to decimal and change luminosity
-	var rgb = "#", c, i;
+  var rgb = "#", c, i;
-	for (i = 0; i < 3; i++) {
+  for (i = 0; i < 3; i++) {
-	  c = parseInt(hex.substr(i*2,2), 16);
+    c = parseInt(hex.substr(i*2,2), 16);
-	  c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
+    c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
-	  rgb += ("00"+c).substr(c.length);
+    rgb += ("00"+c).substr(c.length);
-	}
+  }
 
-	return rgb;
+  return rgb;
 }
 
 function onMessageDownload( msg, filename ) {
-	if ( localStorage.getItem( filename ) === null ) {
+  if ( localStorage.getItem( filename ) === null ) {
-		localStorage.setItem( filename, msg );
+    localStorage.setItem( filename, msg );
-	}
+  }
-	updateInboxView();
+  updateInboxView();
 }
 function onIndex( index ) {
         var lines = index.split( /\n/ );
 
-	for(var k in localStorage){
+  for(var k in localStorage){
-		var l = 1;
+    var l = 1;
-		for ( var i in lines ) {
+    for ( var i in lines ) {
-			var f = lines[i];
+      var f = lines[i];
-			if (f == k){ l = 0; }
+      if (f == k){ l = 0; }
-		}
+    }
-	if (l == 1){
+  if (l == 1){
-	localStorage.removeItem(k);
+  localStorage.removeItem(k);
-	}
+  }
-	}
+  }
 updateInboxView();
 
-	for ( var i in lines ) {
+  for ( var i in lines ) {
-		var fname = lines[i];
+    var fname = lines[i];
-		if ( localStorage.getItem( fname ) === null ) {
+    if ( localStorage.getItem( fname ) === null ) {
-			//localStorage.setItem( ts, lines[i].substr(lines[i].indexOf(' ')) );
+      //localStorage.setItem( ts, lines[i].substr(lines[i].indexOf(' ')) );
-			downloadMessage( fname );
+      downloadMessage( fname );
-		}
+    }
 
-	}
+  }
 
 }
 function downloadMessage(filename) {
@@ -234,7 +234,6 @@ function downloadMessage(filename) {
   xhr.open( "GET", 'msg/'+filename, true);
   xhr.send();
 
-
 }
 function checkInbox() {
   var xhr = new XMLHttpRequest();
@@ -259,16 +258,251 @@ function getOwnId() {
 }
 
 function getOwnAlias() {
-  var xhr = new XMLHttpRequest();
+ var xhr = new XMLHttpRequest();
-  xhr.onreadystatechange = function(){
+ xhr.onreadystatechange = function(){
-    if (xhr.readyState == 4 && xhr.status == 200){
+ if (xhr.readyState == 4 && xhr.status == 200){
-      ownAlias = xhr.responseText;
+ ownAlias = xhr.responseText;
-    }
+ }
-  }
+ }
-  xhr.open( "GET", 'alias', true);
+ xhr.open( "GET", 'alias', true);
-  xhr.send();
+ xhr.send();
 }
 
+/*
+ * PHOTO STUFF
+ */
+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');
+
+
+document.addEventListener('DOMContentLoaded', function(){
+    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('rotLeft').onclick = onRotateLeft;
+    document.getElementById('rotRight').onclick = onRotateRight;
+},false);
+
+  
+function submitImage(){
+
+    // convert canvas to html/base64 image
+    var image = new Image(); //create new image holder
+    image.id = "outputImage" //id it
+
+    var canvas = document.getElementById('canvas3'); // choose canvas element to convert
+    var dataURL = canvas.toDataURL(); // convert cabvas to data url we can handle
+
+    //console.log(dataURL);
+
+    var outputImg = document.createElement("img"); // create img tag
+    outputImg.src = dataURL // assign dataurl to image tag 'src' option
+    document.body.appendChild(outputImg); // append img to body (to be assigned to place holder div)
+    
+// append data to text area...not working yet..
+    var photo = document.getElementById('message'); // add data url to message field... not working yet
+    //outputImg.src = "<img src='"+ outputImg.src; +"'/>" // construct image tag + img data...
+        //photo += outputImg.src;
+    photo.innerHTML += outputImg.src;
+
+   // sendMessage( "10  ", "outputImg.src" ); << breaks vereything ;) and is  an bad idea: TODO: append data stringto message field, or url whatever and preview it locally (append to body) before submitting, but textarea is refreshing or something ugh...aka find clean solution, add url parameter instead of dirty innerhtml hacking
+//TEST INNNETHTML ADD TO TEXATAREA QUICKYYYYY
+
+    console.log(photo.innerHTML);
+}
+
+function initCanvas(context){
+    // Debug filling
+    context.fillStyle ="#dbbd7a";
+    context.fill()
+    context.beginPath();
+    context.rect(0,0, 400, 400);
+    context.fillStyle = 'yellow';
+    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 = 400;
+      w = 400 * imgObj.width / imgObj.height;
+      xOffset = (400 - w) / 2;
+    } else {
+      w = 400;
+      h = 400 * imgObj.height / imgObj.width;
+      yOffset = (400 - 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 (var 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;
+}
+
+
 
 /*
  * INIT
@@ -279,7 +513,7 @@ function update(){
     getOwnId();
   }
   if ( !ownAlias){
-    getOwnAlias();
+ getOwnAlias();
   }
   checkInbox();
   // also check for outbox items on interval,
@@ -294,4 +528,3 @@ update();
 
 //check for new messages every 7 seconds
 window.setInterval( update, 7000 );
-

web/style.css

@@ -13,6 +13,37 @@ body{
   padding:20px;
 }
 
+img{
+  width:50%;
+  /* disable anti aliasing */
+  image-rendering: optimizeSpeed;            
+  image-rendering: -moz-crisp-edges;          
+  image-rendering: -o-crisp-edges;           
+  image-rendering: -webkit-optimize-contrast; 
+  image-rendering: pixelated; 
+  image-rendering: optimize-contrast;      
+  -ms-interpolation-mode: nearest-neighbor;   
+}
+
+/* hide calculation canvases */
+#sourceImage{
+  display: none;
+}
+#canvas1{
+  display: none;
+}
+#canvas2{
+  display: none;
+}
+
+#progress{
+  display: none;
+}
+
+#total{
+  display: none;
+}
+
 
 #message-form textarea{
   -webkit-appearance: none;
@@ -116,6 +147,70 @@ hr{
   border-bottom-left-radius:123px;
   background:#fff;
 }
+
+.photoBox {
+  display: none;
+  position: absolute;
+  top: 25%;
+  left: 25%;
+  width: 50%;
+  height: 50%;
+  padding: 16px;
+  background-color:#fff;
+  z-index:1002;
+  overflow: auto;
+
+
+
+  padding:30px;
+  
+  overflow: visible;
+  -moz-box-shadow:0 0 23px #bbb;
+  -webkit-box-shadow:0 0 23px #bbb;
+  box-shadow:0 0 23px #bbb;
+  -webkit-border-top-left-radius:123px;
+  -webkit-border-top-right-radius:123px;
+  -webkit-border-bottom-right-radius:123px;
+  -webkit-border-bottom-left-radius:123px;
+  -moz-border-radius-bottomright:123px;
+  -moz-border-radius-bottomleft:123px;
+  -moz-border-top-left-radius:123px;
+  -moz-border-top-right-radius:123px;
+  border-top-left-radius:123px;
+  border-top-right-radius:123px;
+  border-bottom-right-radius:123px;
+  border-bottom-left-radius:123px;
+  background:#fff;
+}
+
+
+.photo-buttons {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  outline: none;
+  //border: 1px solid #bbb;
+  border:0;
+  -webkit-border-radius: 13px;
+  -moz-border-radius: 13px;
+  border-radius: 13px;
+  height:40px;
+  width:100%;
+  display: block;
+  font-family: inherit;
+  font-size: 20px;
+  font-weight:bold;
+  text-shadow: 0 0 23px #888;
+  background-color:#fff;
+
+  -moz-box-shadow:0 0 23px #bbb;
+  -webkit-box-shadow:0 0 23px #bbb;
+  box-shadow:0 0 23px #bbb;
+
+}
+
+
+
+
 .node, .hops {
   font-size:10px;
 }