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

@@ -234,7 +234,6 @@ function downloadMessage(filename) {
   xhr.open( "GET", 'msg/'+filename, true);
   xhr.send();
 
-
 }
 function checkInbox() {
   var xhr = new XMLHttpRequest();
@@ -269,6 +268,241 @@ function getOwnAlias() {
  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
@@ -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;
 }