You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

550 lines
15 KiB

localStorage.clear();
//These need to be obtained from the node
var ownId, ownColor, ownAlias;
/*
* INIT
*/
document.addEventListener('DOMContentLoaded', function(){
function update(){
if ( !ownId ){
getOwnId();
}
if ( !ownAlias){
getOwnAlias();
}
checkInbox();
// also check for outbox items on interval,
// necessary in case connection is lost and messages are not yet sent
checkOutbox();
}
document.getElementById('message-form').onsubmit = onSubmitMessage;
//update everything to initialize
updateInboxView();
update();
//check for new messages every 7 seconds
window.setInterval( update, 7000 );
10 years ago
initState();
initPhotoStuff();
});
/*
* STATE CHANGES
*/
10 years ago
function initState(){
showOverview();
10 years ago
document.getElementById('new-photo').onclick = showNewPhoto;
document.getElementById('new-message').onclick = showNewMessage;
document.getElementById('message-back').onclick = showOverview;
document.getElementById('photo-back').onclick = showOverview;
}
function showNewPhoto(){
document.getElementById('photo-page').style.display = "block";
document.getElementById('overview-page').style.display = "none";
document.getElementById('message-page').style.display = "none";
document.getElementById('fileInput').click();
}
function showNewMessage(){
document.getElementById('photo-page').style.display = "none";
document.getElementById('overview-page').style.display = "none";
document.getElementById('message-page').style.display = "block";
}
function showOverview(){
document.getElementById('photo-page').style.display = "none";
document.getElementById('overview-page').style.display = "block";
document.getElementById('message-page').style.display = "none";
}
/*
* OUTBOX STUFF
*/
function onSubmitMessage(){
var msg = document.getElementById('message').value.replace(/\r?\n/g, "<br />");
var namm = document.getElementById('name').value || "anonymous";
addOutboxItem( namm, msg );
};
function addOutboxItem( name, message ){
var outStr = localStorage.getItem( 'outbox' ) || '';
var newMsgs = {};
var ddata = new Date().getTime();
var alias = ownAlias;
if ( alias === ownId ) {
alias = "local";
}
var contento = {
"time" : ddata,
"message" : mess,
"name" : namm,
"node" : alias,
"hops" : "0"
};
newMsgs.message = contento;
localStorage.setItem( 'outbox', JSON.stringify(newMsgs) );
checkOutbox();
document.getElementById('message').value = '';
showOverview();
return false;
}
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 );
}
}
function sendMessage( timestamp, 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.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 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);
}
/*
* INBOX STUFF
*/
function updateInboxView() {
var localStorageArray = new Array();
var contentString = '';
if (localStorage.length>0) {
for (i=0;i<localStorage.length;i++){
element=localStorage.getItem(localStorage.key(i));
if ( localStorage.key(i).length < 10 || element === 'outbox' ) {
continue;
}
try {
elementj = JSON.parse(element);
} catch (e) {
continue;
}
localStorageArray[i] = {
time:localStorage.key(i),
user:elementj.name,
message:elementj.message,
node:elementj.node,
hops:elementj.hops
};
}
}
orderStorage = localStorageArray.sort(function(a,b) { return b.time - a.time } );
for(var i in orderStorage) {
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">' + orderStorage[i].message + '</div>' +
' <span class="node '+orderStorage[i].node+'">from '+orderStorage[i].node + '</span>' +
' <span class="hops '+orderStorage[i].hops+'">via '+orderStorage[i].hops+' nodes</span></div></li>';
}
document.getElementById( 'inbox' ).innerHTML = contentString;
}
function getReadableDate( date ) {
var day = date.getDate();
if (day < 10) day = '0' + day;
var month = date.getMonth()+1;
if (month < 10) month = '0' + month;
var year = date.getFullYear();
var hrs = date.getHours();
if (hrs < 10) hrs = '0' + hrs;
var min = date.getMinutes();
if (min < 10) min = '0' + min;
return day + '/' + month + '/' + year + ' ' + hrs + ':' + min;
}
function getNodeColor( nodeId ) {
if( nodeId === 'local' ) {
return ownColor || '#fff';
}
return colorLuminance(nodeId.substr(0,6), 0.5);
}
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;
// 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;
}
function onMessageDownload( msg, filename ) {
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);
}
}
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 );
}
}
}
function downloadMessage(filename) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
onMessageDownload( xhr.responseText, filename );
}
};
xhr.open( "GET", 'msg/'+filename, true);
xhr.send();
}
function checkInbox() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
onIndex( xhr.responseText );
}
};
xhr.open( "GET", 'index', true);
xhr.send();
}
function getOwnId() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
ownId = xhr.responseText;
ownColor = getNodeColor( ownId );
}
};
xhr.open( "GET", 'id', true);
xhr.send();
}
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();
}
/*
* 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(){
// 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
image.src = 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( new Date().getTime(), dataURL );
//sendMessage( new Date().getTime(), "random "+Math.random()*1000 );
var namm = document.getElementById('photo-name').value || "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 = '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 = 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 (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;
}