From 3b07132282a2cb3c860c390ae18a4032266c8981 Mon Sep 17 00:00:00 2001 From: jngrt Date: Fri, 7 Nov 2014 16:21:10 +0100 Subject: [PATCH] new UIyayayayay \o/\o/\o/ --- main.py | 2 + meshenger_clientserve.py | 15 ++- web/.index.html.swo | Bin 12288 -> 12288 bytes web/index.html | 36 +++++-- web/main.js | 219 ++++++++++++++++++++++++++------------- web/style.css | 93 ++++++++++------- 6 files changed, 247 insertions(+), 118 deletions(-) diff --git a/main.py b/main.py index a903cb8..67e9ac8 100755 --- a/main.py +++ b/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) diff --git a/meshenger_clientserve.py b/meshenger_clientserve.py index d5ae680..579bb46 100644 --- a/meshenger_clientserve.py +++ b/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) - - else: + elif self.path == '/old': 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): """ diff --git a/web/.index.html.swo b/web/.index.html.swo index d158c505b46faf6b610a86ed893176020747387e..aa83ec3f98e994ec0f9bffd6e48fdbe70b5366c1 100644 GIT binary patch literal 12288 zcmeI2O^D<~6vu1lpsu2$ZVxXvU4q9O|84m!KAuqc(JraNO&$tIQl z@Sx~r@gN?>tB8171VIpFZ-O^(p1p~nq9R^g(0}Elr_gFTJo$pKPrYd>$g?+Lu>$ukZc6^4imc?2BG1RsWKYpAPm~Arni?$eV>jYbTBO zxhFF#;#q$$PF*IfH1i_Y6+Kh+ana+cHRP@p2%nEyeHn$zeCu&dKoeL%AeVdQ`BUVH zZl|rR&Kj%q^ureyOwdD`fF_^`XabsmCZGvu0-As(@P8v9lN01EENZ1%Sf~0vG4owD z^_M1~31|YEfF_^`XabsmCZGvu0-As(pb7j32{50K@9rVwi<3wm|NpQ5{{QtsLVkq4 zhdzb^XcPMV0YYv-5^6y|og(C0=xgXJ=o9EY=pASby$n(4H1y~FgnS6S3%voIflfj{ z-$%#?&^2fb?L)6Zm!OMK3;N++%!RH%JJ1Da9XbO&0^LOZzd_$XHz2j1Pay%VL4RS5 zpFuaFU!d#I`_S8v0j)rP+>IE}2znIy=q|*9K8N&26VL=S0Zm{r0ozh=sA$-=6K;2w7D}b7r%32-7TuBUD*qPZrdKsuvtoYNJl67qTpK47{_Mu^vY; zm!)J|c&js-RB<4ZTv9nsxMO6w8wJv+XJ%aZrkhI{3xf_=n8V~1^udz~f-sVgBuhEN zjbIYUplLir+^#`s5;BkXeFJDV-(Y-BO;@j3??}=;&s~X$BY7m;6wG|t~vyD0t)>+rnOlkU^CwB z#aCQ-x-5LL=QFWu5LgcY9t_$C8)FxnHf4x~S1c0d`+?}ujSgmSR@0AgMv7fnHBC}n zG#-2X?iLPl`5H7Ty<4VKRGg}UK4)sBs@JX`u`ok#WheuQ69&?K?$bO0&!VG@6b9mT z+E4jj_53K7(eknkrNBc}s5(-Z$+3N9&8n@mltJYlNzZwphk=0o?{DM*si- delta 673 zcmc(ZK}#D^5Xaw|UaAR=C@2MSvIn)RaSIiC@MS?N1t}I$TPS$Q%kHR=-F?gMOURz0 z{R;1xeuMT>axUK5Yr#toJ=71N2tC(!Hd{eNygHBH9R6?SKmWt}VSS?U^zGU@JYQU5 zRAt6i$~)V~KQBK|{3sZ2`WFQ#8kPQN`S+vJ_hH7Ok$kG6N8#1xQHil>;-tvf2ckzD z5Oc&iP5vUj5nqW<#7E*i(IGOYmqe9VAm)ksNZ)wy_hFaY_w@LnR;k~XAQSgh;5!U} z+YRZZ4&#X%HzNf}?AFX{-&}9ZEE`Op&W`CnGetdZJ?`2G`sk``Ju5CF)s!K$h2O%O z=?R5f7<#6&C1VAR6jn)rOyYJvddKD_y4Y;v&Fw2Wb9j+m%Pn}G1e#vW3@}N=9wv0u zgir(&<-e5WFdfDQVH+)_WT>kPljBLAau6(+9j1F$#dxN_Sd041np%O#7cTBg-@~|O tzLTvOUXwM<`6${57(^`Uf4tw@&~7 diff --git a/web/index.html b/web/index.html index f708dae..c0313c4 100644 --- a/web/index.html +++ b/web/index.html @@ -15,19 +15,35 @@ + - - - +
+ + + +
- -
    - -
      +
      +
        +
          +
          diff --git a/web/main.js b/web/main.js index bbfd3cd..03363a3 100644 --- a/web/main.js +++ b/web/main.js @@ -1,35 +1,43 @@ 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"; + } + else{ + var namm = document.getElementById('name').value; + } + var mess = document.getElementById('message').value.replace(/\r?\n/g, "
          "); + var newMsgs = {}; + var ddata = new Date().getTime(); + var contento = { + "time" : ddata, + "message" : mess, + "name" : namm, + "node" : "local", + "hops" : "0" + } + newMsgs.message = contento; + + localStorage.setItem( 'outbox', JSON.stringify(newMsgs) ); + updateOutboxView(); + checkOutbox(); + document.getElementById('message').value = ''; + + return false; +} - var outStr = localStorage.getItem( 'outbox' ) || ''; - if (document.getElementById('name').value == ""){ - var namm= "anonymous"; - } - else{ - var namm= document.getElementById('name').value; - } - var mess = document.getElementById('message').value.replace(/\r?\n/g, "
          "); - var newMsgs ={}; - var ddata= new Date().getTime(); - var contento = { - "time" : ddata, - "message" : mess, - "name" : namm, - "node" : "local", - "hops" : "0" - } - newMsgs.message = contento; - - localStorage.setItem( 'outbox', JSON.stringify(newMsgs) ); - updateOutboxView(); - checkOutbox(); - document.getElementById('message').value = ''; -}; function checkOutbox() { - var outStr = localStorage.getItem( 'outbox' ); + var outStr = localStorage.getItem( 'outbox' ); if ( ! outStr ) { return; } @@ -102,40 +110,86 @@ function updateOutboxView() { function updateInboxView() { - var localStorageArray = new Array(); - var contentString = ''; +var localStorageArray = new Array(); + var contentString = ''; - if (localStorage.length>0) { - for (i=0;i0) { + for (i=0;i'+ + '
          On ' + datereadable + + ' ' + orderStorage[i].user +' wrote:
          ' + + '
          ' + orderStorage[i].message + '
          ' + + ' from '+orderStorage[i].node + '' + + ' via '+orderStorage[i].hops+' nodes'; + } + 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]; } - orderStorage = localStorageArray.sort(function(a,b) { return b.time - a.time } ); + lum = lum || 0; - for(var i in orderStorage) - { - if ( i.length === 0 || i === 'outbox' ) { - continue; - } - var date = new Date(parseInt(orderStorage[i].time)); -// date.setHours(date.getHours() + 2); - var datereadable = date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear()+" "+date.getHours()+":"+date.getMinutes(); - contentString += '
        • ' + datereadable + ' ' + ' '+ orderStorage[i].user +'
          '+orderStorage[i].message+' '+orderStorage[i].node+' '+orderStorage[i].hops+'
          • '; + // 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); } - document.getElementById( 'inbox' ).innerHTML = contentString; + + return rgb; } function onMessageDownload( msg, filename ) { @@ -170,35 +224,58 @@ updateInboxView(); } 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(); + 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 ); - } + 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", 'index', true); - xhr.send(); + } + xhr.open( "GET", 'id', true); + xhr.send(); } + /* * 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(); updateOutboxView(); -window.setInterval( function(){ - checkInbox(); - checkOutbox(); -}, 7000 ); +update(); + +//check for new messages every 7 seconds +window.setInterval( update, 7000 ); diff --git a/web/style.css b/web/style.css index 367d2c4..3a9cd93 100644 --- a/web/style.css +++ b/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; - margin-right: auto; - width: 90%; height: 50px; - line-height: 40px; font-size: 17px; - border: 1px solid #bbb; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - //background-image: url(css/aqua.jpg); + display: block; + outline:none; + width: 98%; + margin: 0 auto; + line-height: 40px; + border:none; + -webkit-border-radius: 13px; + -moz-border-radius: 13px; + 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;