Restored some HTML-Debugging-tools
This commit is contained in:
Daniel
150
client/console.html
Normal file
150
client/console.html
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
|
<style>
|
||||||
|
.footer {
|
||||||
|
background: #ccc;
|
||||||
|
padding:5px;
|
||||||
|
overflow: auto;
|
||||||
|
height:30px;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="console" class=code>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<div class=footer>
|
||||||
|
<form id="command_form" method="GET">
|
||||||
|
<input type=input id=commandline size=80>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
function getJSON(url, successHandler, errorHandler) {
|
||||||
|
var xhr = typeof XMLHttpRequest != 'undefined'
|
||||||
|
? new XMLHttpRequest()
|
||||||
|
: new ActiveXObject('Microsoft.XMLHTTP');
|
||||||
|
console.log("fired JSON request", url)
|
||||||
|
xhr.open('get', url, true);
|
||||||
|
xhr.onreadystatechange = function() {
|
||||||
|
console.log(xhr)
|
||||||
|
var status;
|
||||||
|
var data;
|
||||||
|
// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
|
||||||
|
if (xhr.readyState == 4) { // `DONE`
|
||||||
|
status = xhr.status;
|
||||||
|
if (status == 200) {
|
||||||
|
data = JSON.parse(xhr.responseText);
|
||||||
|
successHandler && successHandler(data);
|
||||||
|
} else {
|
||||||
|
errorHandler && errorHandler(status);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
};
|
||||||
|
|
||||||
|
var historyElement = document.getElementById("console")
|
||||||
|
// copy query
|
||||||
|
var evtSrc = new EventSource("http://localhost:5000/update");
|
||||||
|
|
||||||
|
function htmlEscape(str) {
|
||||||
|
return str
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/'/g, ''')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>');
|
||||||
|
}
|
||||||
|
|
||||||
|
var our_id=""
|
||||||
|
var oldtop = -1
|
||||||
|
|
||||||
|
evtSrc.onmessage = function(e) {
|
||||||
|
var message = JSON.parse(e.data)
|
||||||
|
console.log(message)
|
||||||
|
if (message.type == "id") {
|
||||||
|
our_id = message.id
|
||||||
|
var test = "xxx"
|
||||||
|
getJSON(
|
||||||
|
"http://localhost:5000/console?id="+our_id,
|
||||||
|
function(message) { console.log('msg', message, test); },
|
||||||
|
function(status) { console.log('stat', status); }
|
||||||
|
);
|
||||||
|
} else if (message.type == 'command' || message.type == 'reply') {
|
||||||
|
pre = ""
|
||||||
|
post = ""
|
||||||
|
if (message.type == 'command') {
|
||||||
|
pre += "<font color='blue'><br>"
|
||||||
|
post += "</font>"
|
||||||
|
}
|
||||||
|
if (message.origin == 'self') {
|
||||||
|
pre += "<b>"
|
||||||
|
post = "</b>" + post
|
||||||
|
}
|
||||||
|
historyElement.innerHTML += pre + htmlEscape(message.line) + post + "<br>\n"
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
var doc = document.documentElement
|
||||||
|
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
|
||||||
|
var h = window.innerHeight || window.clientHeight
|
||||||
|
var d = document.body.scrollHeight
|
||||||
|
*/
|
||||||
|
window.scrollTo(0,document.body.scrollHeight)
|
||||||
|
/*
|
||||||
|
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
|
||||||
|
var h = window.innerHeight
|
||||||
|
var d = document.body.scrollHeight
|
||||||
|
console.log(oldtop + oldh, top + h)
|
||||||
|
*/
|
||||||
|
};
|
||||||
|
|
||||||
|
evtSrc.onerror = function(e) {
|
||||||
|
historyElement.innerHTML += "connection lost"
|
||||||
|
evtSrc.close()
|
||||||
|
};
|
||||||
|
|
||||||
|
function do_command() {
|
||||||
|
celm = document.getElementById("commandline")
|
||||||
|
cmd = encodeURI(celm.value);
|
||||||
|
celm.value = ""
|
||||||
|
oldtop = -1
|
||||||
|
if (our_id != "") {
|
||||||
|
cmd += "&id=" + our_id
|
||||||
|
}
|
||||||
|
console.log("http://localhost:5000/sendcommand?command="+cmd)
|
||||||
|
getJSON(
|
||||||
|
"http://localhost:5000/sendcommand?command="+cmd,
|
||||||
|
function(message) { console.log('message', message); },
|
||||||
|
function(status) { console.log('status', status); }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handle_submit(evt) {
|
||||||
|
evt.preventDefault()
|
||||||
|
do_command()
|
||||||
|
}
|
||||||
|
|
||||||
|
command_form = document.getElementById("command_form")
|
||||||
|
if (command_form.addEventListener) {
|
||||||
|
command_form.addEventListener("submit", handle_submit, true);
|
||||||
|
} else {
|
||||||
|
command_form.attachEvent('onsubmit', handle_submit);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onbeforeunload = closingCode;
|
||||||
|
function closingCode(){
|
||||||
|
console.log("CLOSE")
|
||||||
|
evtSrc.close()
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
190
client/cssFiles/SEAWebClientStart.css
Normal file
190
client/cssFiles/SEAWebClientStart.css
Normal file
@ -0,0 +1,190 @@
|
|||||||
|
@CHARSET "UTF-8";
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
meta, body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
||||||
|
/* PANEL */
|
||||||
|
.start-panel {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
z-index: 1;
|
||||||
|
color: white;
|
||||||
|
background: #303030;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-text-wrapper {
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
||||||
|
/* CONTENT */
|
||||||
|
.start-content {
|
||||||
|
padding: 60px 40px 30px 40px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-row-links {
|
||||||
|
padding: 4px 0px 4px 0px;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 24px;
|
||||||
|
display: block;
|
||||||
|
border-bottom: dotted darkgray 2px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* %%%%%%%%%% links %%%%%%%%%%*/
|
||||||
|
.start-link {
|
||||||
|
transition: 0.4s;
|
||||||
|
cursor: pointer;
|
||||||
|
color: steelblue;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-link:focus {
|
||||||
|
color: orangered;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-link:hover {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-link:active {
|
||||||
|
color: orangered;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* %%%%%%%%%% settings %%%%%%%%%%*/
|
||||||
|
.start-settings {
|
||||||
|
color: white;
|
||||||
|
background: #303030;
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 10px 20px 10px 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-settings-label {
|
||||||
|
border-bottom: solid darkgray 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-settings-show-hide {
|
||||||
|
float: right;
|
||||||
|
color: lightgray;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-settings-show-hide:focus {
|
||||||
|
color: orangered;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-settings-show-hide:hover {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-settings-show-hide:active {
|
||||||
|
color: orangered;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-settings-checkboxes {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-row-checkboxes {
|
||||||
|
border-bottom: dotted darkgray 2px;
|
||||||
|
height: 28px;
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-left {
|
||||||
|
min-height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-right {
|
||||||
|
min-height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
||||||
|
/* CHECKBOX */
|
||||||
|
.start-checkbox {
|
||||||
|
opacity: 0;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-checkbox + .start-label {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-checkbox:focus+.start-label {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-checkbox+.start-label::before {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
left: -24px;
|
||||||
|
top: 2px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: block;
|
||||||
|
background: lightgray;
|
||||||
|
border: 2px solid dimgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-checkbox+.start-label::after {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
left: -19px;
|
||||||
|
top: 7px;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
display: block;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: dimgray;
|
||||||
|
-ms-transition: all .2s ease;
|
||||||
|
-webkit-transition: all .2s ease;
|
||||||
|
transition: all .3s ease;
|
||||||
|
-ms-transform: scale(0);
|
||||||
|
-webkit-transform: scale(0);
|
||||||
|
transform: scale(0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-checkbox:checked+.start-label::after {
|
||||||
|
-ms-transform: scale(1);
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
149
client/group.html
Normal file
149
client/group.html
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
</head>
|
||||||
|
<body style='width:400px;'>
|
||||||
|
<div id="event"></div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var blockElement = document.getElementById("event");
|
||||||
|
// copy query
|
||||||
|
query = window.location.search;
|
||||||
|
if (query == "") {
|
||||||
|
query = "?path=main";
|
||||||
|
}
|
||||||
|
var evtSrc = new EventSource("http://localhost:5000/update");
|
||||||
|
|
||||||
|
function getJSON(url, successHandler, errorHandler) {
|
||||||
|
var xhr = typeof XMLHttpRequest != 'undefined'
|
||||||
|
? new XMLHttpRequest()
|
||||||
|
: new ActiveXObject('Microsoft.XMLHTTP');
|
||||||
|
console.log("fired JSON request", url)
|
||||||
|
xhr.open('get', url, true);
|
||||||
|
xhr.onreadystatechange = function() {
|
||||||
|
var status;
|
||||||
|
var data;
|
||||||
|
// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
|
||||||
|
if (xhr.readyState == 4) { // `DONE`
|
||||||
|
status = xhr.status;
|
||||||
|
if (status == 200) {
|
||||||
|
data = JSON.parse(xhr.responseText);
|
||||||
|
successHandler && successHandler(data);
|
||||||
|
} else {
|
||||||
|
errorHandler && errorHandler(status);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function htmlEscape(str) {
|
||||||
|
return str
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/'/g, ''')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>');
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw(message) {
|
||||||
|
var blk = "<h3>" + message.title + "</h3><table>\n"
|
||||||
|
for (var i=0; i < message.components.length; i++) {
|
||||||
|
var component = message.components[i]
|
||||||
|
var name = component.name
|
||||||
|
var type = component.type
|
||||||
|
if ("title" in component) {
|
||||||
|
var title = component.title
|
||||||
|
} else {
|
||||||
|
var title = name
|
||||||
|
}
|
||||||
|
if (type == "group") {
|
||||||
|
blk += "<tr><td>link</td><td><a href='?path=" + encodeURI(message.path + "," + name) + "'>"+ title + "</a></td></tr>\n"
|
||||||
|
} else if (type == "rdonly") {
|
||||||
|
blk += "<tr><td >" + title + "</td><td id='"+ name +"' __ctype__=rdonly></td></tr>\n"
|
||||||
|
} else if (type == "input") {
|
||||||
|
blk += "<tr><td>" + title + "</td><td><input type=input id='"+ name +"' __ctype__=input></td></tr>\n"
|
||||||
|
} else if (type == "checkbox") {
|
||||||
|
blk += "<tr><td>" + title + "</td><td><input type=checkbox id='"+ name +"' __ctype__=checkbox></td></tr>\n"
|
||||||
|
} else if (type == "radio") {
|
||||||
|
blk += "<tr><td>" + title + "</td><td id='" + name + "' __ctype__=radio>\n"
|
||||||
|
for (var j = 0; j < component.buttons.length; j++) {
|
||||||
|
button = component.buttons[j]
|
||||||
|
var rbname = name + ":" + button.value
|
||||||
|
if (j != 0) blk+= "<br>"
|
||||||
|
blk += "<input type=radio name='" + name + "' id='"+rbname+"' value='" + button.value + "'>" + button.title + "\n"
|
||||||
|
}
|
||||||
|
blk += "</td></tr>\n"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
blk += "</table>\n"
|
||||||
|
blockElement.innerHTML = blk
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateblock(id) {
|
||||||
|
getJSON("http://localhost:5000/updateblock"+query+"&id="+id,
|
||||||
|
function(message) { console.log(message); },
|
||||||
|
function(status) { console.log('stat', status); }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
evtSrc.onmessage = function(e) {
|
||||||
|
var message = JSON.parse(e.data)
|
||||||
|
if (message.type == "id") {
|
||||||
|
var id = message.id
|
||||||
|
getJSON("http://localhost:5000/getblock"+query+"&id="+id,
|
||||||
|
function(message) { draw(message); updateblock(id); },
|
||||||
|
function(status) { console.log('stat', status); }
|
||||||
|
);
|
||||||
|
} else if (message.type == "draw") {
|
||||||
|
draw(message);
|
||||||
|
} else if (message.type == "update") {
|
||||||
|
for (var i=0; i < message.updates.length; i++) {
|
||||||
|
var component = message.updates[i]
|
||||||
|
var name = component.name
|
||||||
|
var value = component.value
|
||||||
|
var elm = document.getElementById(name)
|
||||||
|
if (!elm) continue
|
||||||
|
var type = elm.getAttribute("__ctype__")
|
||||||
|
if (type == "rdonly") {
|
||||||
|
elm.innerHTML = htmlEscape(value)
|
||||||
|
} else if (type == "input") {
|
||||||
|
elm.value = value
|
||||||
|
} else if (type == "checkbox") {
|
||||||
|
elm.checked = (value != 0) && (value != "0")
|
||||||
|
} else if (type == "radio") {
|
||||||
|
var elm = document.getElementById(name + ":" + value)
|
||||||
|
if (elm) {
|
||||||
|
elm.checked = true // this will uncheck all radio buttons with the same name
|
||||||
|
} else { // no element with this value: we have to go through all radio buttons
|
||||||
|
var elms = document.getElementsByName(name)
|
||||||
|
for (var j; j < elms.length; j++) {
|
||||||
|
if (elms[j].checked) {
|
||||||
|
elms[j].checked = false
|
||||||
|
break // we have found the victim, we can leave
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (message.type == "close") {
|
||||||
|
evtSrc.close()
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
evtSrc.onerror = function(e) {
|
||||||
|
blockElement.innerHTML = "connection lost"
|
||||||
|
evtSrc.close()
|
||||||
|
};
|
||||||
|
|
||||||
|
window.onbeforeunload = closingCode;
|
||||||
|
function closingCode(){
|
||||||
|
console.log("CLOSE")
|
||||||
|
evtSrc.close()
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -360,17 +360,19 @@ function successHandler(s, message) {
|
|||||||
} else {
|
} else {
|
||||||
// In the module-block a parameter was selected
|
// In the module-block a parameter was selected
|
||||||
// -> write parameter-block to grid-element2
|
// -> write parameter-block to grid-element2
|
||||||
// If nColumns < 3, hide modules (grid-element1) and show parameters (grid-element2)
|
|
||||||
|
|
||||||
// Set flag showParams (-> if there are only three columns, hide modules, not parameters)
|
|
||||||
// See also SEAWebClientMain.js
|
|
||||||
|
|
||||||
showParams = 1;
|
|
||||||
console.log ('col',nColumns);
|
console.log ('col',nColumns);
|
||||||
isl = insertSlide(2, message.title, 'parameters', createContent(sLocal, message));
|
isl = insertSlide(2, message.title, 'parameters', createContent(sLocal, message));
|
||||||
if(nColumns < 2) {
|
if (nColumns < 2) {
|
||||||
elements[1].style.display = "none"; // show modules
|
elements[1].style.display = "none"; // hide modules
|
||||||
elements[2].style.display = "inline-block"; // hide parameters
|
elements[2].style.display = "inline-block"; // show parameters
|
||||||
|
} else if (nColumns == 2 || nColumns == 3) {
|
||||||
|
elements[1].style.display = "none"; // hide modules
|
||||||
|
elements[2].style.display = "inline-block"; // show parameters
|
||||||
|
elements[2].style.width = "50vw"; //
|
||||||
|
if (nRows > 1) {
|
||||||
|
elements[2].style.height = "50vh"; //
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -18,7 +18,6 @@ var writePermission = false;
|
|||||||
var menuMode = false;
|
var menuMode = false;
|
||||||
var panelOn = true;
|
var panelOn = true;
|
||||||
var firstState = 0;
|
var firstState = 0;
|
||||||
var showParams = 0;
|
|
||||||
|
|
||||||
function Settings() {
|
function Settings() {
|
||||||
if (debug_main_daniel) {
|
if (debug_main_daniel) {
|
||||||
|
|||||||
42
client/jsFiles/SEAWebClientStart.js
Normal file
42
client/jsFiles/SEAWebClientStart.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
var showSettings = false;
|
||||||
|
|
||||||
|
function toggleSettings() {
|
||||||
|
// Shows and hides settings.
|
||||||
|
|
||||||
|
console.log("toggle settings");
|
||||||
|
if (showSettings) {
|
||||||
|
document.getElementsByClassName("start-settings-checkboxes")[0].style.display = "none";
|
||||||
|
document.getElementsByClassName("start-settings-show-hide")[0].innerHTML = "show";
|
||||||
|
showSettings = false;
|
||||||
|
} else {
|
||||||
|
document.getElementsByClassName("start-settings-checkboxes")[0].style.display = "inline";
|
||||||
|
document.getElementsByClassName("start-settings-show-hide")[0].innerHTML = "hide";
|
||||||
|
showSettings = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function followLink(destination) {
|
||||||
|
// Build query string and load new page.
|
||||||
|
|
||||||
|
var checkboxes = document.getElementsByClassName("start-checkbox");
|
||||||
|
var query = "";
|
||||||
|
// Loop through settings-checkboxes.
|
||||||
|
for (var i = 0; i < checkboxes.length; i++) {
|
||||||
|
if (checkboxes[i].checked != checkboxes[i].defaultChecked) {
|
||||||
|
if (query === "") {
|
||||||
|
query = "?";
|
||||||
|
} else {
|
||||||
|
query += "&";
|
||||||
|
}
|
||||||
|
query += checkboxes[i].name + "=";
|
||||||
|
if (checkboxes[i].checked) {
|
||||||
|
query += "1";
|
||||||
|
} else {
|
||||||
|
query += "0";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
destination += query;
|
||||||
|
console.log(destination);
|
||||||
|
window.location = destination;
|
||||||
|
}
|
||||||
68
client/main.html
Normal file
68
client/main.html
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<a href="/console.html" target=console>console</a>
|
||||||
|
<a href="/group.html?path=/nv" target=group>group</a>
|
||||||
|
<button onclick="action.value='getblock?path=/nv&id=*';">?getblock</button>
|
||||||
|
<button onclick="action.value='updateblock?path=/nv&id=*';">?updateblock</button>
|
||||||
|
<button onclick="action.value='console?id=*';">?console</button>
|
||||||
|
<button onclick="action.value='gettime?time=-1800,0&id=*';">?gettime</button>
|
||||||
|
<button onclick="action.value='getvars?time=-1800,0&id=*';">?getvars</button>
|
||||||
|
<button onclick="action.value='graph?time=-1800,0&variables=t_mix&id=*';">?graph</button><br>
|
||||||
|
<input type=text value="console?id=*" size=120 id=action>
|
||||||
|
<button onclick='act();'>Send</button>
|
||||||
|
<div id=result>
|
||||||
|
</div><p>
|
||||||
|
<textarea rows=50 cols=132 id=t>
|
||||||
|
</textarea>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var myid = 0
|
||||||
|
var result = document.getElementById("result")
|
||||||
|
var action = document.getElementById("action")
|
||||||
|
|
||||||
|
function getJSON(url, successHandler, errorHandler) {
|
||||||
|
var xhr = typeof XMLHttpRequest != 'undefined'
|
||||||
|
? new XMLHttpRequest()
|
||||||
|
: new ActiveXObject('Microsoft.XMLHTTP');
|
||||||
|
console.log("fired JSON request", url)
|
||||||
|
xhr.open('get', url, true);
|
||||||
|
xhr.onreadystatechange = function() {
|
||||||
|
var status;
|
||||||
|
var data;
|
||||||
|
// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
|
||||||
|
if (xhr.readyState == 4) { // `DONE`
|
||||||
|
status = xhr.status;
|
||||||
|
if (status == 200) {
|
||||||
|
data = JSON.parse(xhr.responseText);
|
||||||
|
successHandler && successHandler(data);
|
||||||
|
} else {
|
||||||
|
errorHandler && errorHandler(status);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
};
|
||||||
|
|
||||||
|
function insert(link) {
|
||||||
|
action.value = link
|
||||||
|
}
|
||||||
|
|
||||||
|
function act() {
|
||||||
|
getJSON("/" + action.value.split("*").join(myid),
|
||||||
|
function(message) { result.innerHTML = JSON.stringify(message); },
|
||||||
|
function(status) { console.log(status); }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
var evtSrc = new EventSource("/update");
|
||||||
|
|
||||||
|
evtSrc.onmessage = function(e) {
|
||||||
|
var message = JSON.parse(e.data);
|
||||||
|
if (message.type == "id") {
|
||||||
|
myid = message.id
|
||||||
|
}
|
||||||
|
t.value = t.value + e.data + "\n";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
70
client/plotex.html
Normal file
70
client/plotex.html
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<script src="externalFiles/mjs_plot_0_3_n.js"></script>
|
||||||
|
</head>
|
||||||
|
<!body>
|
||||||
|
<body onresize="draw_graphs()" onload="draw_graphs()">
|
||||||
|
<canvas id="democanvas" width="600" height="400"></canvas>
|
||||||
|
<script>
|
||||||
|
//make a graph object
|
||||||
|
time = [0,1,2,3,4,5];
|
||||||
|
pot = [2,4,3,4,null,1];
|
||||||
|
still = [9,8,7,6,5,4];
|
||||||
|
var pressure_graph = mjs_plot.new_graph("pressure_graph","democanvas");
|
||||||
|
//give it data
|
||||||
|
pressure_graph.set_data([[time,pot],[time,still]]);
|
||||||
|
pressure_graph.set_captions(['pot','still']);
|
||||||
|
//set up some graphics styling (optional)
|
||||||
|
pressure_graph.default_graphics_style.title = "Pressures";
|
||||||
|
pressure_graph.default_graphics_style.x_axis_title = "Hours";
|
||||||
|
pressure_graph.default_graphics_style.y_axis_title = "pressure mbar";
|
||||||
|
pressure_graph.default_graphics_style.color_bg = '#fff';
|
||||||
|
//plot the graph
|
||||||
|
pressure_graph.reset();
|
||||||
|
pressure_graph.mjs_plot();
|
||||||
|
tim = 5;
|
||||||
|
saved_time = 5;
|
||||||
|
live = true;
|
||||||
|
function addPoint() {
|
||||||
|
pot.push(pot[tim]+0.1);
|
||||||
|
still.push(still[tim]+0.1);
|
||||||
|
tim += 1;
|
||||||
|
time.push(tim);
|
||||||
|
if (pressure_graph.busy()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (live) {
|
||||||
|
if (saved_time > pressure_graph.graphics_style.x_auto_max) {
|
||||||
|
live = false;
|
||||||
|
console.log("live", live);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (tim > pressure_graph.graphics_style.x_auto_max) {
|
||||||
|
pressure_graph.graphics_style.x_scale_auto_max = false;
|
||||||
|
pressure_graph.graphics_style.x_manual_max = tim;
|
||||||
|
}
|
||||||
|
} else if (tim < pressure_graph.graphics_style.x_auto_max) {
|
||||||
|
live = true;
|
||||||
|
console.log("live", live);
|
||||||
|
}
|
||||||
|
saved_time = tim;
|
||||||
|
pressure_graph.set_data([[time,pot],[time,still]]);
|
||||||
|
pressure_graph.mjs_plot();
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(addPoint, 1000);
|
||||||
|
|
||||||
|
|
||||||
|
function draw_graphs(){
|
||||||
|
pressure_graph.canvas.width = window.innerWidth - 20;
|
||||||
|
pressure_graph.canvas.height = window.innerHeight - 20;
|
||||||
|
//tell the graph to plot
|
||||||
|
pressure_graph.mjs_plot();
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
61
client/select.html
Normal file
61
client/select.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<table>
|
||||||
|
<tr><td>
|
||||||
|
<a href='http://samenv.psi.ch:8850/'>DMC</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8851/'>HRPT</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8852/'>ZEBRA</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8853/'>POLDI</a>
|
||||||
|
</td></tr><tr><td>
|
||||||
|
<a href='http://samenv.psi.ch:8854/'>FOCUS</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8855/'>TASP</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8856/'>RITA2</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8857/'>EIGER</a>
|
||||||
|
</td></tr><tr><td>
|
||||||
|
<a href='http://samenv.psi.ch:8854/'>SANS 1</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8855/'>SANS 2</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8856/'>AMOR</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8857/'>BOA</a>
|
||||||
|
</td></tr><tr><td>
|
||||||
|
<a href='http://samenv.psi.ch:8801/'>PREP1</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8802/'>PREP2</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8803/'>PREP3</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8804/'>PREP4</a>
|
||||||
|
</td></tr><tr><td>
|
||||||
|
<a href='http://samenv.psi.ch:8805/'>PREP5</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8806/'>PREP6</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8807/'>PREP7</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8808/'>PREP8</a>
|
||||||
|
</td></tr><tr><td>
|
||||||
|
<a href='http://samenv.psi.ch:8809/'>PREP9</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8800/'>PREP0</a>
|
||||||
|
</td></tr><tr><td>
|
||||||
|
<a href='http://samenv.psi.ch:8810/'>LAB0</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8811/'>LAB1</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8812/'>LAB2</a>
|
||||||
|
</td><td>
|
||||||
|
<a href='http://samenv.psi.ch:8813/'>LAB3</a>
|
||||||
|
</td></tr><tr><td>
|
||||||
|
<a href='http://samenv.psi.ch:8814/'>LAB4</a>
|
||||||
|
</td></tr>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
84
client/touchtest.html
Normal file
84
client/touchtest.html
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style"
|
||||||
|
content="black-translucent" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id=inp width='300' height='500' style="border:1px solid #000000;"></canvas>
|
||||||
|
<div id=out style="width: 300px;"></div>
|
||||||
|
<script>
|
||||||
|
var canvas=document.getElementById("inp");
|
||||||
|
var rect = canvas.getBoundingClientRect();
|
||||||
|
console.log(rect);
|
||||||
|
// Setup canvas and expose context via ctx variable
|
||||||
|
ctx=canvas.getContext("2d");
|
||||||
|
function strt(touch) {
|
||||||
|
return {i:touch.identifier,x:touch.pageX,y:touch.pageY}
|
||||||
|
}
|
||||||
|
function stre(event) {
|
||||||
|
if (event.touches) {
|
||||||
|
t = {};
|
||||||
|
for (var i=0; i<event.touches.length;i++) {
|
||||||
|
id=event.touches[i].identifier.toString();
|
||||||
|
t[id] = strt(event.touches[i]);
|
||||||
|
}
|
||||||
|
tc = [];
|
||||||
|
for (var i=0; i<event.changedTouches.length;i++) {
|
||||||
|
id=event.touches[i].identifier.toString();
|
||||||
|
t[id]['changed'] = 1;
|
||||||
|
}
|
||||||
|
for (var i=0; i<event.targetTouches.length;i++) {
|
||||||
|
id=event.touches[i].identifier.toString();
|
||||||
|
t[id]['target'] = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {type:event.type,x:event.pageX,y:event.pageY,t:t};
|
||||||
|
}
|
||||||
|
|
||||||
|
var styles=["rgba(0, 0, 200, 1)", "rgba(0, 255, 0, 1)", "rgba(255, 0, 0, 1)"]
|
||||||
|
canvas.addEventListener('touchstart', function(event) {
|
||||||
|
for (var i = 0; i < event.touches.length; i++) {
|
||||||
|
var touch = event.touches[i];
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 5, 0, 2*Math.PI, true);
|
||||||
|
ctx.lineWidth = 2.0;
|
||||||
|
ctx.strokeStyle = styles[i];
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
canvas.addEventListener('touchmove', function(event) {
|
||||||
|
document.getElementById("out").innerHTML = JSON.stringify(stre(event));
|
||||||
|
event.preventDefault();
|
||||||
|
for (var i = 0; i < event.touches.length; i++) {
|
||||||
|
var touch = event.touches[i];
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 1, 0, 2*Math.PI, true);
|
||||||
|
ctx.lineWidth = 2.0;
|
||||||
|
ctx.strokeStyle = styles[i];
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
canvas.addEventListener('touchend', function(event) {
|
||||||
|
for (var i = 0; i < event.changedTouches.length; i++) {
|
||||||
|
var touch = event.changedTouches[i];
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 50, 0, 2*Math.PI, true);
|
||||||
|
ctx.lineWidth = 2.0;
|
||||||
|
ctx.strokeStyle = styles[i];
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
canvas.addEventListener('click', function(event) {
|
||||||
|
console.log(event);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(event.clientX-rect.left, event.clientY - rect.top, 2, 0, 2*Math.PI, true);
|
||||||
|
ctx.lineWidth = 2.0;
|
||||||
|
ctx.strokeStyle = "rgba(0, 0, 200, 0.8)";
|
||||||
|
ctx.stroke();
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
Reference in New Issue
Block a user