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

new UIyayayayay \o/\o/\o/

Browse Source
This commit is contained in:
jngrt 2014-11-07 16:21:10 +01:00
parent d19179cbf8
commit 3b07132282
6 changed files with 249 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
main.py
View File

@ -22,6 +22,8 @@ class Meshenger:
os.chdir(os.path.dirname(__file__)) # change present working directory to the one where this file is os.chdir(os.path.dirname(__file__)) # change present working directory to the one where this file is
self.own_ip = self.get_ip_adress().strip() self.own_ip = self.get_ip_adress().strip()
# this hash is needed in clientserve, so client can generate color
self.own_hash = self.hasj(self.own_ip)
if not os.path.exists(self.msg_dir): if not os.path.exists(self.msg_dir):
os.mkdir(self.msg_dir) os.mkdir(self.msg_dir)

15
meshenger_clientserve.py
View File

@ -24,6 +24,14 @@ Serve index and messages
if self.path == '/index' or self.path.startswith( "/"+self.messageDir ): if self.path == '/index' or self.path.startswith( "/"+self.messageDir ):
return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self) return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)
elif self.path == '/id':
if meshenger and meshenger.own_hash:
self.send_response(200)
self.send_header('Content-type', 'text-html')
self.end_headers()
self.wfile.write(meshenger.own_hash)
else:
self.send_error(404,'Id not yet available')
elif self.path == '/log': elif self.path == '/log':
self.send_response(200) self.send_response(200)
self.send_header('Content-type', 'text-html') self.send_header('Content-type', 'text-html')
@ -39,8 +47,7 @@ Serve index and messages
self.path = '/'+f self.path = '/'+f
return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self) return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)
elif self.path == '/old':
else:
self.send_response(200) #serve the webapp on every url requested self.send_response(200) #serve the webapp on every url requested
self.send_header('Content-type', 'text/html') self.send_header('Content-type', 'text/html')
self.end_headers() self.end_headers()
@ -48,6 +55,10 @@ Serve index and messages
with open( f, 'r') as the_file: with open( f, 'r') as the_file:
self.wfile.write(the_file.read()) self.wfile.write(the_file.read())
else:
self.path = '/' + os.path.join('web', 'index.html')
return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)
def do_POST(self): def do_POST(self):
""" """

BIN
web/.index.html.swo
View File

Binary file not shown.

36
web/index.html
View File

@ -15,19 +15,35 @@
<div id="header"> <div id="header">
<h2>Meshenger</h2> <h2>Meshenger</h2>
</div> </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>
-->
<textarea id="name" rows="1" placeholder="Your Name (leave empty for anonymous)"></textarea> <form id="message-form" action="">
<textarea id="message" rows="3" placeholder="Your Message"></textarea> <textarea id="name" rows="1" placeholder="Your Name"></textarea>
<button style="width:100%" id="send">Send</button> <textarea id="message" rows="2" placeholder="Your Message"></textarea>
<input type="submit" class="send-button" value="Send">
</form>
<select id="messagesort" name="messageSort"> <div class="messages">
<option value="dateReceived">Sort by Date Received</option> <ul id="inbox"></ul>
<option value="dateSend">Sort by Date Send</option>
</select>
<ul id="inbox"></ul>
<ul id="outbox"></ul>
<ul id="outbox"></ul>
</div>
<script src="/web/main.js"></script> <script src="/web/main.js"></script>
</body> </body>
</html> </html>

219
web/main.js
View File

@ -1,35 +1,43 @@
localStorage.clear(); localStorage.clear();
//These need to be obtained from the node
var ownId, ownColor;
/* /*
* OUTBOX STUFF * OUTBOX STUFF
*/ */
document.getElementById( 'send' ).onclick = function() { document.getElementById('message-form').onsubmit = function(){
var outStr = localStorage.getItem( 'outbox' ) || '';
var outStr = localStorage.getItem( 'outbox' ) || ''; if (document.getElementById('name').value == ""){
if (document.getElementById('name').value == ""){ var namm = "anonymous";
var namm= "anonymous"; }
} else{
else{ var namm = document.getElementById('name').value;
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 newMsgs ={}; var ddata = new Date().getTime();
var ddata= new Date().getTime(); var contento = {
var contento = { "time" : ddata,
"time" : ddata, "message" : mess,
"message" : mess, "name" : namm,
"name" : namm, "node" : "local",
"node" : "local", "hops" : "0"
"hops" : "0" }
} newMsgs.message = contento;
newMsgs.message = contento;
localStorage.setItem( 'outbox', JSON.stringify(newMsgs) );
updateOutboxView();
checkOutbox();
document.getElementById('message').value = '';
return false;
}
localStorage.setItem( 'outbox', JSON.stringify(newMsgs) );
updateOutboxView();
checkOutbox();
document.getElementById('message').value = '';
};
function checkOutbox() { function checkOutbox() {
var outStr = localStorage.getItem( 'outbox' ); var outStr = localStorage.getItem( 'outbox' );
if ( ! outStr ) { if ( ! outStr ) {
return; return;
} }
@ -102,40 +110,86 @@ function updateOutboxView() {
function updateInboxView() { function updateInboxView() {
var localStorageArray = new Array(); var localStorageArray = new Array();
var contentString = ''; var contentString = '';
if (localStorage.length>0) { if (localStorage.length>0) {
for (i=0;i<localStorage.length;i++){ for (i=0;i<localStorage.length;i++){
element=localStorage.getItem(localStorage.key(i)); element=localStorage.getItem(localStorage.key(i));
if ( localStorage.key(i).length < 10 || element === 'outbox' ) { if ( localStorage.key(i).length < 10 || element === 'outbox' ) {
continue;
}
// alert(element);
try {
elementj = JSON.parse(element);
} catch (e) {
continue; 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 }; localStorageArray[i] = {
} time:localStorage.key(i),
} user:elementj.name,
orderStorage = localStorageArray.sort(function(a,b) { return b.time - a.time } ); 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) for(var i in orderStorage) {
{ if ( i.length === 0 || i === 'outbox' ) {
if ( i.length === 0 || i === 'outbox' ) { continue;
continue; }
} var datereadable = getReadableDate( new Date(parseInt(orderStorage[i].time)) );
var date = new Date(parseInt(orderStorage[i].time)); var color = getNodeColor( orderStorage[i].node );
// date.setHours(date.getHours() + 2); contentString += '<li><div class="message-block" style="background-color:'+color+'">'+
var datereadable = date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear()+" "+date.getHours()+":"+date.getMinutes(); '<div class="date-sender">On ' + datereadable +
contentString += '<li><b>' + datereadable + ' </b>' + ' <i>'+ orderStorage[i].user +'</i><br/> '+orderStorage[i].message+' <span class="node '+orderStorage[i].node+'">'+orderStorage[i].node+'</span> <span class="hops '+orderStorage[i].hops+'">'+orderStorage[i].hops+'</span></li>'; ' <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];
} }
document.getElementById( 'inbox' ).innerHTML = contentString; 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 ) { function onMessageDownload( msg, filename ) {
@ -170,35 +224,58 @@ updateInboxView();
} }
function downloadMessage(filename) { function downloadMessage(filename) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){ xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){ if (xhr.readyState == 4 && xhr.status == 200){
onMessageDownload( xhr.responseText, filename ); onMessageDownload( xhr.responseText, filename );
} }
} }
xhr.open( "GET", 'msg/'+filename, true); xhr.open( "GET", 'msg/'+filename, true);
xhr.send(); xhr.send();
} }
function checkInbox() { function checkInbox() {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){ xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){ if (xhr.readyState == 4 && xhr.status == 200){
onIndex( xhr.responseText ); onIndex( xhr.responseText );
}
} }
xhr.open( "GET", 'index', true); }
xhr.send(); 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();
}
/* /*
* INIT * INIT
*/ */
function update(){
if ( !ownId ){
getOwnId();
}
checkInbox();
// also check for outbox items on interval,
// necessary in case connection is lost and messages are not yet sent
checkOutbox();
}
//update everything to initialize
updateInboxView(); updateInboxView();
updateOutboxView(); updateOutboxView();
window.setInterval( function(){ update();
checkInbox();
checkOutbox(); //check for new messages every 7 seconds
}, 7000 ); window.setInterval( update, 7000 );

93
web/style.css
View File

@ -5,42 +5,60 @@ body, html{
body{ body{
font-size:20px; font-size:20px;
text-shadow: 1px 1px orange; text-shadow: 1px 1px #ddd;
font-family: times, 'times new roman', helvetica,serif; font-family: times, 'times new roman', helvetica,serif;
line-height:1.5em; line-height:1.5em;
color:#444; color:#444;
background:#fff; background:#fff;
//background-image: url(css/marble.jpg); padding:20px;
} }
textarea{
#message-form textarea{
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
display: block;
margin-left: auto; display: block;
margin-right: auto; outline:none;
width: 90%; height: 50px; width: 98%;
line-height: 40px; font-size: 17px; margin: 0 auto;
border: 1px solid #bbb; line-height: 40px;
-webkit-border-radius: 3px; border:none;
-moz-border-radius: 3px; -webkit-border-radius: 13px;
border-radius: 3px; -moz-border-radius: 13px;
//background-image: url(css/aqua.jpg); border-radius: 13px;
font-family: inherit; font-family: inherit;
font-size: inherit;
font-size: 20px; font-size: 20px;
-moz-box-shadow:0 0 23px #bbb;
-webkit-box-shadow:0 0 23px #bbb;
box-shadow:0 0 23px #bbb;
} }
button { #message-form .send-button {
-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; display: block;
margin-left: auto;
margin-right: auto;
margin: 1.5em 0;
font-family: inherit; font-family: inherit;
font-size: inherit;
font-size: 20px; 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;
} }
select{ select{
@ -55,10 +73,10 @@ select{
} }
h2{ h2{
margin: 0 0 20px;
font-size: 40px; font-size: 40px;
text-shadow: 0px 0px 23px #bbb;
} }
hr{ hr{
@ -68,16 +86,19 @@ hr{
background-image: url(css/bg1.gif); background-image: url(css/bg1.gif);
} }
ul{
width:95%;
padding-left:30px;
}
li{
word-wrap:break-word; .messages ul{
width:100%;
padding:0px;
}
.messages li{
list-style: none; list-style: none;
overflow: visible; width:100%;
}
.messages .message-block {
padding:30px; padding:30px;
word-wrap:break-word;
overflow: visible;
-moz-box-shadow:0 0 23px #bbb; -moz-box-shadow:0 0 23px #bbb;
-webkit-box-shadow:0 0 23px #bbb; -webkit-box-shadow:0 0 23px #bbb;
box-shadow:0 0 23px #bbb; box-shadow:0 0 23px #bbb;
@ -93,14 +114,16 @@ li{
border-top-right-radius:123px; border-top-right-radius:123px;
border-bottom-right-radius:123px; border-bottom-right-radius:123px;
border-bottom-left-radius:123px; border-bottom-left-radius:123px;
left:-35px;
width:100%;
//overflow:hidden;
position:relative;
background:#fff; background:#fff;
//background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); }
//background:-moz-linear-gradient(top, #fff, #eee); .node, .hops {
font-size:10px;
}
.message-text {
font-size: 25px;
}
.date-sender {
font-size: 15px;
} }
#outbox{ #outbox{
display:none; display:none;