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

added proper alias support (via new json field) and split the js monolith into multiple files

master
Roel 10 years ago
parent
61c33d2993
commit
20e3fcacf5
4 changed files with 253 additions and 250 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      web/emoji.js
  2. 2
      web/index.html
  3. 257
      web/main.js
  4. 225
      web/photostuff.js

17
web/emoji.js
View File

@ -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('<img class="emo" src="/web/emoticons/'+emoticons[i].image+'">');
}
return inputStr;
}

2
web/index.html
View File

@ -65,6 +65,8 @@
</div>
<script src="/web/main.js"></script>
<script src="/web/emoji.js"></script>
<script src="/web/photostuff.js"></script>
</body>
</html>

257
web/main.js
View File

@ -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 += '<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">' + parseEmoticons( orderStorage[i].message ) + '</div>' +
' <span class="node '+orderStorage[i].node+'">from '+orderStorage[i].node + '</span>' +
'<div class="message-text">' + parseEmoticons( orderStorage[i].message ) + '</div>' + //parseEmoticons is found in emoji.js
' <span class="node '+orderStorage[i].node+'">from '+orderStorage[i].alias + '</span>' +
' <span class="hops '+orderStorage[i].hops+'">via '+orderStorage[i].hops+' nodes</span></div></li>';
}
document.getElementById( 'inbox' ).innerHTML = contentString;
}
function parseEmoticons( inputStr ){
//if ( inputStr.indexOf( '<img' ) > -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('<img class="emo" src="/web/emoticons/'+emoticons[i].image+'">');
}
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 <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;
}

225
web/photostuff.js
View File

@ -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 <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;
}
Write Preview
Loading…
Cancel
Save