added sc_comm_singleton to coordinate interaction with clients (e.g. web
browser)
This commit is contained in:
33
html/app.js
Normal file
33
html/app.js
Normal file
@ -0,0 +1,33 @@
|
||||
var ws;
|
||||
|
||||
$(function() {
|
||||
ws = new WebSocket('ws://' + document.location.host + '/ws');
|
||||
ws.onopen = function() {
|
||||
console.log('onopen');
|
||||
};
|
||||
ws.onclose = function() {
|
||||
$('#message').text('Lost connection.');
|
||||
console.log('onclose');
|
||||
};
|
||||
ws.onmessage = function(message) {
|
||||
console.log("got '" + message.data + "'");
|
||||
eval(message.data);
|
||||
};
|
||||
ws.onerror = function(error) {
|
||||
console.log('onerror ' + error);
|
||||
console.log(error);
|
||||
};
|
||||
$('#count').click(function() {
|
||||
ws.send($('#count').val());
|
||||
});
|
||||
$('#close').click(function() {
|
||||
ws.send('close');
|
||||
});
|
||||
$('#die').click(function() {
|
||||
ws.send('die');
|
||||
});
|
||||
});
|
||||
|
||||
set = function(value) {
|
||||
$('#count').val(value)
|
||||
}
|
||||
14
html/index.html
Normal file
14
html/index.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hello, world</title>
|
||||
<script src='lib/jquery.min.js'></script>
|
||||
<script src='app.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<input id="count" type="button" value="..."></input>
|
||||
<input id="close" type="button" value="Close"></input>
|
||||
<input id="die" type="button" value="Die"></input>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
16
html/lib/jquery.min.js
vendored
Normal file
16
html/lib/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
105
html/ws.html
Normal file
105
html/ws.html
Normal file
@ -0,0 +1,105 @@
|
||||
<!doctype html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||
<title>system output</title>
|
||||
<style>
|
||||
h1 { font-family: helvetica, sans-serif; margin: 0; }
|
||||
h1+p { margin: 0; }
|
||||
li { font-family: Courier; list-style-type: '>';}
|
||||
pre { margin-top:0; margin-bottom:0;}
|
||||
.term { background-color:black; color:white; font-weight:bold;padding-top:10px; padding-bottom:10px; max-height:400px; overflow: scroll;}
|
||||
span.timestamp { font-family: monospace; white-space: pre;width: 50px;}
|
||||
span.value_1 { background-color: green;}
|
||||
span.value_0 { background-color: blue;}
|
||||
span.value_x { background-color: red;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>system output</h1>
|
||||
<div id="top">
|
||||
</div>
|
||||
<script>
|
||||
String.format = function() {
|
||||
// The string containing the format items (e.g. "{0}")
|
||||
// will and always has to be the first argument.
|
||||
var theString = arguments[0];
|
||||
// start with the second argument (i = 1)
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
// "gm" = RegEx options for Global search (more than one instance)
|
||||
// and for Multiline search
|
||||
var regEx = new RegExp("\\{" + (i - 1) + "\\}", "gm");
|
||||
theString = theString.replace(regEx, arguments[i]);
|
||||
}
|
||||
|
||||
return theString;
|
||||
}
|
||||
String.prototype.paddingLeft = function (paddingValue) {
|
||||
return String(paddingValue + this).slice(-paddingValue.length);
|
||||
};
|
||||
var log = function (n, m) {
|
||||
console.log(m);
|
||||
var data = JSON.parse(m);
|
||||
if( data.hasOwnProperty("message") ) {
|
||||
var ul = document.getElementById(n);
|
||||
var li = document.createElement('li');
|
||||
var p = document.createElement('pre');
|
||||
// i.innerText = new Date().toISOString()+': '+m;
|
||||
p.innerText = '['+data.time.paddingLeft(' ')+'] '+ data.message;
|
||||
li.appendChild(p);
|
||||
ul.appendChild(li);
|
||||
var objDiv = document.getElementById(n + '_container');
|
||||
objDiv.scrollTop = objDiv.scrollHeight;
|
||||
} else if(data.hasOwnProperty("data")){
|
||||
var ul = document.getElementById(n);
|
||||
var li = document.createElement('li');
|
||||
var span = document.createElement('span');
|
||||
span.className="timestamp";
|
||||
span.innerText='['+data.time.paddingLeft(' ')+']'
|
||||
li.appendChild(span);
|
||||
var s = data.data;
|
||||
for ( var i = 0; i < s.length; i++ ){
|
||||
var spani = document.createElement('span');
|
||||
if(s.charAt(i) == 'Z')
|
||||
spani.className="value_z";
|
||||
else if(s.charAt(i) == '1')
|
||||
spani.className="value_1";
|
||||
else if(s.charAt(i) == '0')
|
||||
spani.className="value_0";
|
||||
else if(s.charAt(i) == 'X')
|
||||
spani.className="value_x";
|
||||
spani.appendChild(document.createTextNode('\u00A0'));
|
||||
li.appendChild(spani);
|
||||
}
|
||||
ul.appendChild(li);
|
||||
var objDiv = document.getElementById(n + '_container');
|
||||
objDiv.scrollTop = objDiv.scrollHeight;
|
||||
}
|
||||
}
|
||||
var open_connection = function(name){
|
||||
var s = new WebSocket('ws://'+window.location.host+'/ws/i_simple_system.i_'+name);
|
||||
s.addEventListener('error', function (m) { log(name, new Date().toISOString()+': ===connection error ==='); });
|
||||
s.addEventListener('open', function (m) { log(name, new Date().toISOString()+': ===connection opened==='); });
|
||||
s.addEventListener('message', function (m) { log(name, m.data); });
|
||||
s.addEventListener('close', function (m) { log(name, new Date().toISOString()+': ===connection closed==='); });
|
||||
}
|
||||
var createElem = function(n){
|
||||
var top = document.getElementById('top');
|
||||
var p = document.createElement('p');
|
||||
p.innerText="Component " + n;
|
||||
var div = document.createElement('div');
|
||||
div.className = "term";
|
||||
div.id= n + '_container';
|
||||
var ul = document.createElement('ul');
|
||||
ul.id= n;
|
||||
div.appendChild(ul);
|
||||
top.appendChild(p);
|
||||
top.appendChild(div);
|
||||
open_connection(n);
|
||||
}
|
||||
createElem("uart0");
|
||||
createElem("gpio0");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user