new UIyayayayay \o/\o/\o/

main.py

@@ -22,6 +22,8 @@ class Meshenger:
     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()
+    # 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):
       os.mkdir(self.msg_dir)

meshenger_clientserve.py

@@ -24,6 +24,14 @@ Serve index and messages
 
     if self.path == '/index' or self.path.startswith( "/"+self.messageDir ):
       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':
       self.send_response(200)
       self.send_header('Content-type', 'text-html')
@@ -39,8 +47,7 @@ Serve index and messages
 
       self.path = '/'+f
       return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)
-
+    elif self.path == '/old':
-    else:
       self.send_response(200) #serve the webapp on every url requested
       self.send_header('Content-type', 'text/html')
       self.end_headers()
@@ -48,6 +55,10 @@ Serve index and messages
       with open( f, 'r') as the_file:
         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):
     """

web/index.html

@@ -15,19 +15,35 @@
     <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>
+    -->
 
-    <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>
-      <option value="dateSend">Sort by Date Send</option>
-    </select>
       <ul id="inbox"></ul>
 
       <ul id="outbox"></ul>
-
+    </div>
     <script src="/web/main.js"></script>
   </body>
 </html>

web/main.js

@@ -1,10 +1,15 @@
 localStorage.clear();
+
+
+//These need to be obtained from the node
+var ownId, ownColor;
+
 /*
  * OUTBOX STUFF
  */
-document.getElementById( 'send' ).onclick = function() {
+document.getElementById('message-form').onsubmit = function(){
-
   var outStr = localStorage.getItem( 'outbox' ) || '';
+
   if (document.getElementById('name').value == ""){
     var namm = "anonymous";
   }
@@ -27,7 +32,10 @@ document.getElementById( 'send' ).onclick = function() {
   updateOutboxView();
   checkOutbox();
   document.getElementById('message').value = '';
-};
+
+  return false;
+}
+
 function checkOutbox() {
         var outStr = localStorage.getItem( 'outbox' );
 	if ( ! outStr ) {
@@ -113,30 +121,76 @@ function updateInboxView() {
       if ( localStorage.key(i).length < 10 || element === 'outbox' ) {
         continue;
       }
-//	alert(element);
       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,
+        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' ) {
             continue;
     }
-		var date = new Date(parseInt(orderStorage[i].time));
+    var datereadable = getReadableDate( new Date(parseInt(orderStorage[i].time)) );
-//		date.setHours(date.getHours() + 2);
+    var color = getNodeColor( orderStorage[i].node );
-		var datereadable = date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear()+" "+date.getHours()+":"+date.getMinutes();
+    contentString += '<li><div class="message-block" style="background-color:'+color+'">'+
-		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>';
+      '<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 ) {
@@ -190,15 +244,38 @@ function checkInbox() {
   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
  */
 
-updateInboxView();
+function update(){
-updateOutboxView();
+  if ( !ownId ){
-window.setInterval( function(){
+    getOwnId();
+  }
   checkInbox();
+  // also check for outbox items on interval,
+  // necessary in case connection is lost and messages are not yet sent
   checkOutbox();
-}, 7000 );
+}
+
+//update everything to initialize
+updateInboxView();
+updateOutboxView();
+update();
+
+//check for new messages every 7 seconds
+window.setInterval( update, 7000 );
 

web/style.css

@@ -5,42 +5,60 @@ body, html{
 
 body{
   font-size:20px;
-  text-shadow: 1px 1px orange;
+  text-shadow: 1px 1px #ddd;
   font-family: times, 'times new roman', helvetica,serif;
   line-height:1.5em;
   color:#444;
   background:#fff;
-  //background-image: url(css/marble.jpg);
+  padding:20px;
 }
 
-textarea{
+
+#message-form textarea{
   -webkit-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-size: inherit;
   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;
-  margin-left: auto;
-  margin-right: auto;
-  margin: 1.5em 0;
   font-family: inherit;
-  font-size: 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;
+
 }
 
 select{
@@ -55,10 +73,10 @@ select{
 
 }
 
-
-
 h2{
+  margin: 0 0 20px;
   font-size: 40px;
+  text-shadow: 0px 0px 23px #bbb;
 }
 
 hr{
@@ -68,16 +86,19 @@ hr{
   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;
-  overflow: visible;
+  width:100%;
+}
+.messages .message-block {
   padding:30px;
+  word-wrap:break-word;
+  overflow: visible;
   -moz-box-shadow:0 0 23px #bbb;
   -webkit-box-shadow:0 0 23px #bbb;
   box-shadow:0 0 23px #bbb;
@@ -93,14 +114,16 @@ li{
   border-top-right-radius:123px;
   border-bottom-right-radius:123px;
   border-bottom-left-radius:123px;
-  left:-35px;
-
-  width:100%;
-  //overflow:hidden;
-  position:relative;
   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{
   display:none;