From 20e3fcacf508457dc76bd7039cd3cf9b02b1f20e Mon Sep 17 00:00:00 2001 From: Roel Date: Wed, 20 May 2015 22:46:16 +0200 Subject: [PATCH] added proper alias support (via new json field) and split the js monolith into multiple files --- web/emoji.js | 17 +++ web/index.html | 2 + web/main.js | 259 ++-------------------------------------------- web/photostuff.js | 225 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 253 insertions(+), 250 deletions(-) create mode 100644 web/emoji.js create mode 100644 web/photostuff.js diff --git a/web/emoji.js b/web/emoji.js new file mode 100644 index 0000000..91fbd4c --- /dev/null +++ b/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(''); + } + return inputStr; +} \ No newline at end of file diff --git a/web/index.html b/web/index.html index a245f70..dee72b5 100755 --- a/web/index.html +++ b/web/index.html @@ -65,6 +65,8 @@ + + diff --git a/web/main.js b/web/main.js index d1a0455..c138a9f 100644 --- a/web/main.js +++ b/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 += '
  • '+ '
    On ' + datereadable + ' ' + orderStorage[i].user +' wrote:
    ' + - '
    ' + parseEmoticons( orderStorage[i].message ) + '
    ' + - ' from '+orderStorage[i].node + '' + + '
    ' + parseEmoticons( orderStorage[i].message ) + '
    ' + //parseEmoticons is found in emoji.js + ' from '+orderStorage[i].alias + '' + ' via '+orderStorage[i].hops+' nodes
    • '; } document.getElementById( 'inbox' ).innerHTML = contentString; } -function parseEmoticons( inputStr ){ - //if ( inputStr.indexOf( ' -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(''); - } - 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 =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; -} diff --git a/web/photostuff.js b/web/photostuff.js new file mode 100644 index 0000000..842822e --- /dev/null +++ b/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 =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; +}