rra/meshenger
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

begin photo function

Browse Source
This commit is contained in:
dennisdebel 2015-05-19 20:24:39 +02:00
parent d6f081f8b0
commit aba8149226
4 changed files with 468 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
web/index.html Normal file → Executable file
View File

@ -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>

4
web/lib/jquery-2.1.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

431
web/main.js
View File

@ -16,7 +16,7 @@ document.getElementById('message-form').onsubmit = function(){
else{
var namm = document.getElementById('name').value;
}
var mess = document.getElementById('message').value.replace(/\r?\n/g, "<br />");
var mess = document.getElementById('message').value.replace(/\r?\n/g, "<br />");
var newMsgs = {};
var ddata = new Date().getTime();
var alias = ownAlias //to do: build a check to see if ownAlias == ownId, if so, alias should become 'local'
@ -29,7 +29,7 @@ document.getElementById('message-form').onsubmit = function(){
}
newMsgs.message = contento;
localStorage.setItem( 'outbox', JSON.stringify(newMsgs) );
localStorage.setItem( 'outbox', JSON.stringify(newMsgs) );
updateOutboxView();
checkOutbox();
document.getElementById('message').value = '';
@ -39,70 +39,70 @@ document.getElementById('message-form').onsubmit = function(){
function checkOutbox() {
var outStr = localStorage.getItem( 'outbox' );
if ( ! outStr ) {
return;
}
var lines = outStr.split( /\n/ );
for ( var i in lines ) {
if ( lines[i].length === 0 ) {
continue;
}
var obj = JSON.parse(lines[i]);
var ts = obj.message.time;
delete obj.message.time;
var msg = JSON.stringify(obj.message);
sendMessage( ts, msg );
}
if ( ! outStr ) {
return;
}
var lines = outStr.split( /\n/ );
for ( var i in lines ) {
if ( lines[i].length === 0 ) {
continue;
}
var obj = JSON.parse(lines[i]);
var ts = obj.message.time;
delete obj.message.time;
var msg = JSON.stringify(obj.message);
sendMessage( ts, msg );
}
}
function sendMessage( timestamp, message ) {
var xhr = new XMLHttpRequest();
var data = 'time=' + encodeURIComponent( timestamp ) +
'&message=' + encodeURIComponent( message );
var xhr = new XMLHttpRequest();
var data = 'time=' + encodeURIComponent( timestamp ) +
'&message=' + encodeURIComponent( message );
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4){
if ( xhr.status == 200 ) {
removeOutboxItem( timestamp );
}
}
};
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4){
if ( xhr.status == 200 ) {
removeOutboxItem( timestamp );
}
}
};
xhr.open('POST', 'send', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('If-Modified-Since', 'Sat, 1 Jan 2005 00:00:00 GMT');
xhr.send(data);
xhr.open('POST', 'send', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('If-Modified-Since', 'Sat, 1 Jan 2005 00:00:00 GMT');
xhr.send(data);
}
function removeOutboxItem( timestamp ) {
var outStr = localStorage.getItem( 'outbox' ) || '';
var lines = outStr.split( /\n/ );
for ( var i in lines ) {
var outStr = localStorage.getItem( 'outbox' ) || '';
var lines = outStr.split( /\n/ );
for ( var i in lines ) {
var obj = JSON.parse(lines[i]);
var ts = obj.message.time;
if ( ts === timestamp ) {
lines.splice( i, 1 );
break;
}
}
var newOutStr = lines.join('\n');
localStorage.setItem('outbox', newOutStr);
updateOutboxView();
var ts = obj.message.time;
if ( ts === timestamp ) {
lines.splice( i, 1 );
break;
}
}
var newOutStr = lines.join('\n');
localStorage.setItem('outbox', newOutStr);
updateOutboxView();
}
function updateOutboxView() {
var contentString = '';
var outStr = localStorage.getItem( 'outbox' ) || '';
var lines = outStr.split( /\n/ );
for ( var i in lines ) {
if ( lines[ i ].length === 0 ) {
continue;
}
var contentString = '';
var outStr = localStorage.getItem( 'outbox' ) || '';
var lines = outStr.split( /\n/ );
for ( var i in lines ) {
if ( lines[ i ].length === 0 ) {
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>';
}
document.getElementById( 'outbox' ).innerHTML = contentString;
contentString += '<li><b>' + ts + ' </b>' + msg + '</li>';
}
document.getElementById( 'outbox' ).innerHTML = contentString;
}
/*
@ -175,53 +175,53 @@ function getNodeColor( nodeId ) {
}
function colorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
return rgb;
return rgb;
}
function onMessageDownload( msg, filename ) {
if ( localStorage.getItem( filename ) === null ) {
localStorage.setItem( filename, msg );
}
updateInboxView();
if ( localStorage.getItem( filename ) === null ) {
localStorage.setItem( filename, msg );
}
updateInboxView();
}
function onIndex( index ) {
var lines = index.split( /\n/ );
for(var k in localStorage){
var l = 1;
for ( var i in lines ) {
var f = lines[i];
if (f == k){ l = 0; }
}
if (l == 1){
localStorage.removeItem(k);
}
}
for(var k in localStorage){
var l = 1;
for ( var i in lines ) {
var f = lines[i];
if (f == k){ l = 0; }
}
if (l == 1){
localStorage.removeItem(k);
}
}
updateInboxView();
for ( var i in lines ) {
var fname = lines[i];
if ( localStorage.getItem( fname ) === null ) {
//localStorage.setItem( ts, lines[i].substr(lines[i].indexOf(' ')) );
downloadMessage( fname );
}
for ( var i in lines ) {
var fname = lines[i];
if ( localStorage.getItem( fname ) === null ) {
//localStorage.setItem( ts, lines[i].substr(lines[i].indexOf(' ')) );
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();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
ownAlias = xhr.responseText;
}
}
xhr.open( "GET", 'alias', true);
xhr.send();
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
ownAlias = xhr.responseText;
}
}
xhr.open( "GET", 'alias', true);
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,
@ -293,5 +527,4 @@ updateOutboxView();
update();
//check for new messages every 7 seconds
window.setInterval( update, 7000 );
window.setInterval( update, 7000 );

95
web/style.css Normal file → Executable file
View File

@ -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;
}