Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
80 lines (79 sloc) 3.04 KB
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Arduino messages</title>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var ws = new WebSocket("ws://{{ host_port }}/publisher");
var msg_len = 512;
$('#chars-left').html(msg_len);
$('#message').attr('maxlenght', msg_len);
ws.onmessage = function(event) {
var data = event.data.split('\n');
var action = data[0]
var id = data[1];
var ip = data[2];
var msg = data[3];
if (action == 'SENT') {
if (id) {
$('li#' + id).remove();
}
var msg_ip = (ip) ? '(from ' + ip + ')': '';
$('#ip').html(msg_ip);
$('#arduino').html(msg);
} else { // ADDED
var li = $('<li/>', {'id': id});
var span = $('<span/>', {'class': 'ip', 'text': ip})
li.append(span);
li.append(' ' + msg);
$('#queue').append(li);
}
}
$('#sender').submit(function() {
var message = $('#message').val();
if (message.length) {
ws.send(message);
}
$('#message').val('');
return false;
});
$('#message').keyup(function() {
$('#chars-left').html(msg_len - $(this).val().length);
});
});
</script>
<style type="text/css">
body { font-family: 'Ubuntu Mono', sans-serif; color: #555; font-size: 20px; }
h1, h2 { margin-top: 0 }
h1 { font-size: 72px; margin-left: 50px; }
li { color: green }
input { color: #555; border: solid 2px #cacaca; font-size: 24px;
padding: 10px; border-radius: 5px;
font-family: 'Ubuntu Mono'; font-weight: bold;
}
#arduino { color: green }
.help { font-size: 16px }
.box { border: solid 3px #cacaca; background: #fafafa;
padding: 20px; margin-top: 10px; border-radius: 5px; }
.ip { color: gray }
</style>
</head>
<body>
<form id="sender" class="box">
Your message: <input type="text" id="message" style="width:500px">
<span class="help">(<span id="chars-left"></span> chars left)</span>
<div class="help"><br>Only <a href="http://en.wikipedia.org/wiki/ASCII#ASCII_printable_characters">printable ascii chars</a>. For marquee put '~' as first char.</div>
</form>
<div class="box">
<h2>Message in Arduino: <span id="ip"></span></h2>
<h1 id="arduino"></h1>
</div>
<div class="box">
<h2>Messages in queue:</h2>
<ol id="queue"></ol>
</div>
</body>
</html>