major rework
- modified chartjs for better zoom on touchpad - flexible number of charts - handle bool as checkbox - handle enum as select (pull down menu) - disable swiper where not needed and many more
This commit is contained in:
@ -21,7 +21,7 @@
|
||||
<!-- JS-Files -->
|
||||
<script src="externalFiles/alertify.js"></script>
|
||||
<script src="externalFiles/eventsource.js"></script>
|
||||
<script src="externalFiles/d3.min.js"></script>
|
||||
<!-- <script src="externalFiles/d3.min.js"></script> -->
|
||||
<script src="externalFiles/swiper.min.js"></script>
|
||||
<script src="externalFiles/Chart.bundle.min.js"></script>
|
||||
<script src="externalFiles/hammer.js"></script>
|
||||
@ -30,7 +30,7 @@
|
||||
<script src="jsFiles/SEAWebClientSwiper.js"></script>
|
||||
<script src="jsFiles/SEAWebClientGroup.js"></script>
|
||||
<script src="jsFiles/SEAWebClientConsole.js"></script>
|
||||
<script src="jsFiles/SEAWebClientGraph.js"></script>
|
||||
<script src="jsFiles/SEAWebClientGraphics.js"></script>
|
||||
<script src="jsFiles/SEAWebClientCommunication.js"></script>
|
||||
<script src="jsFiles/SEAWebClientMain.js"></script>
|
||||
</head>
|
||||
|
||||
@ -87,7 +87,9 @@
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
background-color: rgb(255,255,255,0.8);
|
||||
/* background-color: rgb(255,255,255,0.7); */
|
||||
background-color: white;
|
||||
opacity: 0.7;
|
||||
color: #000000;
|
||||
padding: 0.3em;
|
||||
/*transition: left 0.5s, top 0.5s;*/
|
||||
@ -96,22 +98,39 @@
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: grab;
|
||||
border: 1px solid black;
|
||||
border: 1px solid #777777;
|
||||
}
|
||||
|
||||
.legend:active{
|
||||
cursor: grabbing;
|
||||
}
|
||||
.legend:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.legendanchor {
|
||||
border: solid black;
|
||||
border-width: 0 1px 1px 0;
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 7px;
|
||||
transform: rotate(-45deg) translate(-7px, -3px);
|
||||
-webkit-transform: rotate(-45deg) translateX(-7px, -3px);
|
||||
}
|
||||
|
||||
|
||||
body.black .legend{
|
||||
background-color: rgb(0,0,0,0.8);
|
||||
/*background-color: rgb(0,0,0,0.8);*/
|
||||
background-color: black;
|
||||
opacity: 0.7;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.legend .controls{
|
||||
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.legend .control{
|
||||
@ -119,32 +138,53 @@ body.black .legend{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*
|
||||
.legend .vcontrol{
|
||||
clear: both;
|
||||
float: left;
|
||||
border-bottom: 1px solid black;
|
||||
padding-bottom: 0.1em;
|
||||
padding-top: 0.1em;
|
||||
}
|
||||
*/
|
||||
|
||||
.legend .subcontrol{
|
||||
.legend .spacer {
|
||||
width: 0.5em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hidebox{
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding-bottom: 0.1em;
|
||||
padding-top: 0.1em;
|
||||
color: #777777;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.legend .subcontrol:hover{
|
||||
color: #000000;
|
||||
.dselect{
|
||||
/*display: flex; */
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
background-color: #dddddd;
|
||||
padding: 2px;
|
||||
/*z-index: 10; */
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.legend .subspacer{
|
||||
display: inline-block;
|
||||
width: 0.2em;
|
||||
.dselect:hover{
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.legend .vcontrol:hover{
|
||||
.cursorline{
|
||||
display: none;
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 100px;
|
||||
width: 2px;
|
||||
height: 1000px;
|
||||
}
|
||||
|
||||
.legend .control:hover{
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
@ -153,33 +193,32 @@ body.black .legend{
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.legendel{
|
||||
.legendrow{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.legendel:hover{
|
||||
.legendrow:hover{
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.legendel .color{
|
||||
.legendrow .colorline{
|
||||
width: 2em;
|
||||
height: 0.1em;
|
||||
margin-top: 0.45em;
|
||||
height: 2px;
|
||||
margin-bootom: 0.45em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.legendel .value{
|
||||
.value{
|
||||
margin-left: 1em;
|
||||
min-width: 3em
|
||||
}
|
||||
|
||||
.legendel.hidden .value{
|
||||
/*
|
||||
.legendrow.hidden .value{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*.legendel.hidden:before{
|
||||
.legendel.hidden:before{
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 0.05em;
|
||||
@ -187,12 +226,13 @@ body.black .legend{
|
||||
margin-top: -0.025em;
|
||||
background-color: #FFF;
|
||||
position: absolute;
|
||||
}*/
|
||||
}
|
||||
|
||||
.legendel.hidden{
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.legendel.hidden .color{
|
||||
.legendel.hidden .colorline{
|
||||
opacity: 0;
|
||||
}
|
||||
*/
|
||||
@ -14,6 +14,10 @@
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.swiper-button-prev.swiper-button-disabled,
|
||||
.swiper-button-next.swiper-button-disabled {
|
||||
opacity: 0;
|
||||
}
|
||||
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
||||
/* PANEL */
|
||||
.panel {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -94,7 +94,7 @@ function handleUpdateMessage(src, message) {
|
||||
document.title = "SEA "+clientTitle + " " + message.title;
|
||||
}
|
||||
var header = document.getElementById("header");
|
||||
header.setAttribute("style", "width: auto;");
|
||||
header.style.width = 'auto';
|
||||
header.innerHTML = clientTitle;
|
||||
console.log('ID', initCommands);
|
||||
nextInitCommand();
|
||||
@ -137,6 +137,7 @@ function handleUpdateMessage(src, message) {
|
||||
break;
|
||||
// graph-message: Evokes redraw of graphics.
|
||||
case "graph":
|
||||
alert('obsolete code "graph" called')
|
||||
console.log("graph");
|
||||
createCharts2(message.graph);
|
||||
break;
|
||||
@ -169,6 +170,7 @@ function handleUpdateMessage(src, message) {
|
||||
}
|
||||
|
||||
function htmlEscape(str) {
|
||||
str = "" + str;
|
||||
if (!str) return "";
|
||||
return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g,
|
||||
''').replace(/</g, '<').replace(/>/g, '>');
|
||||
@ -196,8 +198,9 @@ function updateValues(message, src) {
|
||||
var component = message.updates[i];
|
||||
var value = component.value;
|
||||
var matches = document.getElementsByName(component.name);
|
||||
|
||||
for (var j = 0; j < matches.length; j++) {
|
||||
var type = matches[j].getAttribute("__ctype__");
|
||||
var type = matches[j].__ctype__;
|
||||
if (type == "rdonly") {
|
||||
var text = htmlEscape(value);
|
||||
if (text) {
|
||||
@ -207,8 +210,7 @@ function updateValues(message, src) {
|
||||
var row = matches[j].parentNode.parentNode.parentNode;
|
||||
row.style.backgroundColor = "white";
|
||||
var mval = matches[j].value;
|
||||
var oldValue = matches[j].getAttribute("oldValue");
|
||||
if (oldValue === null) oldValue = mval;
|
||||
var oldValue = ('oldValue' in matches[j]) ? matches[j].oldValue : mval;
|
||||
if (value != mval && parseFloat(value) != parseFloat(mval) && value != oldValue) {
|
||||
if (matches[j] == document.activeElement
|
||||
|| oldValue != mval) {
|
||||
@ -217,12 +219,13 @@ function updateValues(message, src) {
|
||||
matches[j].value = value;
|
||||
}
|
||||
}
|
||||
matches[j].setAttribute("actualValue", value);
|
||||
matches[j].actualValue = value;
|
||||
resizeTextfield(matches[j]);
|
||||
} else if (type == "checkbox") {
|
||||
var row = matches[j].parentNode.parentNode;
|
||||
row.style.backgroundColor = "white";
|
||||
matches[j].checked = value == 1 && value == "1";
|
||||
console.log('CBX', matches[j].name, message, Boolean(value && value != 'false'));
|
||||
matches[j].checked = Boolean(value && value != 'false');
|
||||
} else if (type == "enum") {
|
||||
matches[j].style.display = "block";
|
||||
var row = matches[j].parentNode.parentNode;
|
||||
@ -277,14 +280,16 @@ function successHandler(s, message) {
|
||||
}
|
||||
if (message.path == "main") {
|
||||
// Happens only initially or at device change.
|
||||
for (var sLocal = 0; sLocal < MAXBLOCK; sLocal++) {
|
||||
for (var sLocal = 0; sLocal < 2; sLocal++) { // was up to MAXBLOCK
|
||||
insertSlide(sLocal, message.title, "main", createContent(
|
||||
sLocal, message));
|
||||
}
|
||||
insertSlide(2, "", "parameters", createContent(2, {components:[]}));
|
||||
} else {
|
||||
if (s < 0) { // redraw: check for slides in all swiper instances
|
||||
for (var isw = 0; isw < MAXBLOCK; isw ++) {
|
||||
var slide = findSlide(isw, message.path);
|
||||
var isl = findSlide(isw, message.path);
|
||||
var slide = swiper[isl].slides[i];
|
||||
if (slide) {
|
||||
console.log("redraw", isw);
|
||||
replaceSlideContent(slide, message.title,
|
||||
@ -292,8 +297,10 @@ function successHandler(s, message) {
|
||||
}
|
||||
}
|
||||
} else {
|
||||
insertSlide(s, message.title, message.path, createContent(s,
|
||||
message));
|
||||
// insertSlide(s, message.title, message.path, createContent(s, message));
|
||||
let sLocal = paramSlider[s];
|
||||
isl = insertSlide(sLocal, message.title, "parameters", createContent(sLocal, message));
|
||||
swiper[sLocal].slideTo(isl); /* go to found slide */
|
||||
}
|
||||
}
|
||||
nextInitCommand();
|
||||
@ -360,6 +367,7 @@ function successHandler(s, message) {
|
||||
if (debugCommunication) {
|
||||
console.log("graph-draw", message);
|
||||
}
|
||||
alert('obsolete code graph-draw called')
|
||||
createCharts2(message.graph);
|
||||
nextInitCommand();
|
||||
// Request for updates.
|
||||
|
||||
@ -9,8 +9,8 @@ function createContentConsole(s) {
|
||||
// Creates input-textfield and texarea showing console-history.
|
||||
|
||||
var commandline = document.createElement('input');
|
||||
commandline.setAttribute("type", "text");
|
||||
commandline.setAttribute("class", "row commandline");
|
||||
commandline.type = "text";
|
||||
commandline.classList.add("row", "commandline");
|
||||
|
||||
commandline.onkeydown = function (e) {
|
||||
//console.log(histIndex);
|
||||
@ -38,10 +38,10 @@ function createContentConsole(s) {
|
||||
}
|
||||
};
|
||||
|
||||
commandline.setAttribute("autocomplete", "on");
|
||||
commandline.autocomplete = "on";
|
||||
|
||||
var wrapper = document.createElement('form');
|
||||
wrapper.setAttribute("class", "commandline-wrapper");
|
||||
wrapper.classList.add("commandline-wrapper");
|
||||
|
||||
wrapper.onsubmit = function (e) {
|
||||
e.preventDefault();
|
||||
@ -53,14 +53,14 @@ function createContentConsole(s) {
|
||||
commandline.value = "";
|
||||
};
|
||||
|
||||
wrapper.setAttribute("method", 'GET');
|
||||
wrapper.method = "GET";
|
||||
wrapper.appendChild(commandline);
|
||||
|
||||
var history = document.createElement('div');
|
||||
history.setAttribute("class", "history");
|
||||
history.classList.add("history");
|
||||
|
||||
var content = document.createElement('div');
|
||||
content.setAttribute("class", "content-console");
|
||||
content.classList.add("content-console");
|
||||
content.appendChild(wrapper);
|
||||
content.appendChild(history);
|
||||
return content;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -13,7 +13,7 @@ function getGroup(s, name) {
|
||||
return;
|
||||
}
|
||||
for (var i = 0; i < swiper[s].slides.length; i++) {
|
||||
var slideType = swiper[s].slides[i].getAttribute("slide-type");
|
||||
var slideType = swiper[s].slides[i].slideType;
|
||||
if (slideType == name) {
|
||||
found = true;
|
||||
swiper[s].slideTo(i);
|
||||
@ -33,56 +33,20 @@ function sendCommand(s, command) {
|
||||
|
||||
function createContent(s, message) {
|
||||
// Depending on the message received from the server the content of the
|
||||
// group
|
||||
// is created dynamically. Handles draw-message.
|
||||
// group is created dynamically. Handles draw-message.
|
||||
|
||||
var content = document.createElement('div');
|
||||
content.setAttribute("class", "content");
|
||||
content.classList.add("content");
|
||||
// Process components of the message
|
||||
for (var i = 0; i < message.components.length; i++) {
|
||||
var component = message.components[i];
|
||||
var name = component.name;
|
||||
var type = component.type;
|
||||
var title = name;
|
||||
if ("title" in component)
|
||||
title = component.title;
|
||||
var info = component.info;
|
||||
switch (type) {
|
||||
case "group":
|
||||
content.appendChild(createLink(s, name, title));
|
||||
break;
|
||||
case "rdonly":
|
||||
if ("link" in component) {
|
||||
content.appendChild(createReadOnlyInstrLink(s, name, title,
|
||||
component.link, info));
|
||||
} else {
|
||||
content.appendChild(createReadOnly(s, name, title, info));
|
||||
}
|
||||
break;
|
||||
case "rdlink":
|
||||
content.appendChild(createReadOnlyGroupLink(s, name, title, info));
|
||||
break;
|
||||
case "input":
|
||||
content.appendChild(createInput(s, name, title,
|
||||
info));
|
||||
break;
|
||||
case "checkbox":
|
||||
content.appendChild(createCheckbox(s, name, title,
|
||||
info));
|
||||
break;
|
||||
case "enum":
|
||||
content.appendChild(createSelection(s, name, title,
|
||||
component.enum_names, info));
|
||||
break;
|
||||
case "pushbutton":
|
||||
console.log(component);
|
||||
console.log(component.info);
|
||||
content.appendChild(createPushButton(s, name, title,
|
||||
info));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (!("title" in component))
|
||||
component.title = name;
|
||||
if (!("command" in component))
|
||||
component.command = name;
|
||||
createFunc = window['create_' + component.type + '_row']
|
||||
if (createFunc)
|
||||
content.appendChild(createFunc(s, component))
|
||||
}
|
||||
return content;
|
||||
}
|
||||
@ -96,84 +60,50 @@ function gotoGroups(slideNames) {
|
||||
}
|
||||
}
|
||||
|
||||
function createLink(s, name, title) {
|
||||
function create_group_row(s, component) {
|
||||
// Creates row-element containing link.
|
||||
var title = component.title;
|
||||
|
||||
var row = document.createElement('row');
|
||||
row.setAttribute("id", name);
|
||||
row.setAttribute("name", title);
|
||||
row.setAttribute("class", "interactive row link");
|
||||
row.setAttribute("tabindex", 0);
|
||||
row.id = component.name;
|
||||
row.name = title;
|
||||
row.classList.add("interactive", "row", "link");
|
||||
row.tabIndex = "0";
|
||||
|
||||
row.onclick = function () {
|
||||
var slideNames = getSlideNames();
|
||||
slideNames[s] = name;
|
||||
slideNames[s] = component.name;
|
||||
document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
|
||||
history.pushState({func: "gotoGroups", funarg: slideNames.join("%20")}, document.title, "#" + slideNames.join("%20"));
|
||||
getGroup(s, name);
|
||||
}
|
||||
|
||||
if (title === "console" || title === "device config") {
|
||||
row.setAttribute("class", "interactive row link link-static");
|
||||
row.classList.add("interactive", "row", "link", "link-static");
|
||||
row.innerHTML = "console";
|
||||
}
|
||||
row.innerHTML = title;
|
||||
return row;
|
||||
}
|
||||
|
||||
function createReadOnly(s, name, title, info) {
|
||||
// Creates row-element containing read-only-item.
|
||||
|
||||
var left = createTitle(title, info);
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right");
|
||||
right.setAttribute("name", name);
|
||||
right.setAttribute("__ctype__", "rdonly");
|
||||
|
||||
return appendToContent(info, left, right);
|
||||
}
|
||||
|
||||
function createReadOnlyGroupLink(s, name, title, info) {
|
||||
// Creates row-element containing link AND read-only-item.
|
||||
// for secop
|
||||
|
||||
var left = createTitle(title, info);
|
||||
|
||||
left.setAttribute("id", name);
|
||||
left.setAttribute("name", title);
|
||||
left.setAttribute("class", "interactive link");
|
||||
|
||||
left.onclick = function () {
|
||||
getGroup(s, title);
|
||||
}
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right");
|
||||
right.setAttribute("name", name);
|
||||
right.setAttribute("__ctype__", "rdonly");
|
||||
|
||||
return appendToContent(info, left, right);
|
||||
}
|
||||
|
||||
function createReadOnlyInstrLink(s, name, title, link, info) {
|
||||
function create_rdonly_row(s, component) {
|
||||
// Creates row-element containing link AND read-only-item.
|
||||
|
||||
// var left = createTitle(title, info);
|
||||
var link = component.link;
|
||||
if (!link) // simple rdonly
|
||||
return appendToContent(component, createTitle(component),
|
||||
createParElement(component));
|
||||
|
||||
// with link
|
||||
var left = document.createElement('a');
|
||||
left.setAttribute("class", "col-left");
|
||||
left.innerHTML = title;
|
||||
left.classList.add("col-left");
|
||||
left.innerHTML = component.title;
|
||||
|
||||
left.setAttribute("id", name);
|
||||
left.setAttribute("name", title);
|
||||
left.setAttribute("class", "interactive link");
|
||||
left.id = component.name;
|
||||
left.name = component.title;
|
||||
left.classList.add("interactive", "link");
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right");
|
||||
right.setAttribute("name", name);
|
||||
right.setAttribute("__ctype__", "rdonly");
|
||||
|
||||
row = appendToContent(info, left, right);
|
||||
row = appendToContent(component, left, createParElement(component));
|
||||
row.onclick = function () {
|
||||
this.style.backgroundColor = "orangered";
|
||||
left.click();
|
||||
@ -184,31 +114,46 @@ function createReadOnlyInstrLink(s, name, title, link, info) {
|
||||
left.href = link;
|
||||
}
|
||||
|
||||
row.setAttribute("class", "row clickable");
|
||||
row.classList.add("row", "clickable");
|
||||
return row;
|
||||
}
|
||||
|
||||
function createPushButton(s, name, title, info) {
|
||||
function create_rdlink_row(s, component) {
|
||||
// Creates row-element containing link AND read-only-item.
|
||||
var name = component.name;
|
||||
|
||||
var left = createTitle(component);
|
||||
left.id = component.name;
|
||||
left.name = component.title; // or setAttribute('name'.. ?
|
||||
left.classList.add("interactive", "link");
|
||||
|
||||
left.onclick = function () {
|
||||
getGroup(s, component.title);
|
||||
}
|
||||
return appendToContent(component, left, createParElement(component));
|
||||
}
|
||||
|
||||
function create_pushbutton_row(s, component) {
|
||||
// Creates row-element containing a push button
|
||||
|
||||
var left = createTitle(title, info);
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
var left = createTitle(component);
|
||||
console.log(info);
|
||||
|
||||
left.setAttribute("id", name);
|
||||
left.setAttribute("name", title);
|
||||
left.id = component.name;
|
||||
left.name = component.title;
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right clickable push-button");
|
||||
right.setAttribute("name", name);
|
||||
right.setAttribute("__ctype__", "rdonly");
|
||||
var right = createParElement(component);
|
||||
right.classList.add("clickable", "push-button");
|
||||
|
||||
row = appendToContent(info, left, right);
|
||||
row = appendToContent(component, left, right);
|
||||
right.onclick = function () {
|
||||
if (writePermission) {
|
||||
var row = left.parentNode;
|
||||
right.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name);
|
||||
sendCommand(s, command);
|
||||
} else {
|
||||
prompt = true;
|
||||
alertify.confirm("", "You are connected with <b>" + clientTitle
|
||||
@ -223,7 +168,7 @@ function createPushButton(s, name, title, info) {
|
||||
var row = left.parentNode;
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name);
|
||||
sendCommand(s, command);
|
||||
prompt = false;
|
||||
}, function () {
|
||||
// User decided to cancel
|
||||
@ -232,23 +177,23 @@ function createPushButton(s, name, title, info) {
|
||||
}
|
||||
}
|
||||
|
||||
row.setAttribute("class", "row");
|
||||
row.classList.add("row");
|
||||
return row;
|
||||
}
|
||||
|
||||
function createInput(s, name, title, info) {
|
||||
function create_input_row(s, component) {
|
||||
// Creates row-element containing input-item.
|
||||
|
||||
if (info) {
|
||||
var infoBox = createInfo(title, info);
|
||||
}
|
||||
var left = createTitle(title, info);
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
|
||||
var input = document.createElement('input');
|
||||
input.setAttribute("type", "text");
|
||||
input.setAttribute("class", "input-text");
|
||||
input.setAttribute("name", name);
|
||||
input.setAttribute("__ctype__", "input");
|
||||
if (info) {
|
||||
var infoBox = createInfo(component);
|
||||
}
|
||||
var left = createTitle(component);
|
||||
|
||||
var input = createParElement(component, 'input', 'input-text');
|
||||
input.type = "text";
|
||||
input.style.width = "100px";
|
||||
input.addEventListener("focus", function(evt) {
|
||||
let elm = evt.target;
|
||||
@ -258,7 +203,7 @@ function createInput(s, name, title, info) {
|
||||
input.onkeydown = function (e) {
|
||||
if (e.which === 27 || e.key == "Escape") {
|
||||
// User decided to cancel
|
||||
input.value = input.getAttribute("oldValue");
|
||||
input.value = intput.oldValue;
|
||||
resizeTextfield(input);
|
||||
var row = left.parentNode;
|
||||
row.style.backgroundColor = "white";
|
||||
@ -266,9 +211,9 @@ function createInput(s, name, title, info) {
|
||||
}
|
||||
|
||||
input.onfocus = function () {
|
||||
input.setAttribute("oldValue", input.value);
|
||||
input.oldValue = input.value;
|
||||
|
||||
if (isTouchDevice())
|
||||
if (isTouchDevice)
|
||||
setTimeout(function () {
|
||||
posTextfield(s, left);
|
||||
}, 1);
|
||||
@ -280,11 +225,9 @@ function createInput(s, name, title, info) {
|
||||
}
|
||||
var row = left.parentNode;
|
||||
var value = input.value;
|
||||
var oldValue = input.getAttribute("oldValue") || value;
|
||||
if (!input.hasAttribute("actualValue")) {
|
||||
input.setAttribute("actualValue", oldValue);
|
||||
}
|
||||
var actualValue = input.getAttribute("actualValue");
|
||||
let oldValue = 'oldValue' in input ? input.oldValue : value;
|
||||
if (!('actualValue' in input)) input.actualValue = oldValue;
|
||||
actualValue = input.actualValue;
|
||||
if (value == actualValue || value == oldValue ||
|
||||
parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
|
||||
input.value = actualValue;
|
||||
@ -306,12 +249,12 @@ function createInput(s, name, title, info) {
|
||||
}, 3600000);
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + value);
|
||||
sendCommand(s, command + " " + value);
|
||||
resizeTextfield(input);
|
||||
prompt = false;
|
||||
}, function () {
|
||||
// User decided to cancel
|
||||
input.value = input.getAttribute("actualValue");
|
||||
input.value = input.actualValue;
|
||||
resizeTextfield(input);
|
||||
row.style.backgroundColor = "white";
|
||||
prompt = false;
|
||||
@ -321,16 +264,12 @@ function createInput(s, name, title, info) {
|
||||
var form = document.createElement('form');
|
||||
form.onsubmit = function (e) {
|
||||
e.preventDefault();
|
||||
// remove following check: sometimes we want to send a command even with an unchanged value
|
||||
//if (input.value === input.getAttribute("oldValue")) {
|
||||
// // nothing to do.
|
||||
// return false;
|
||||
//}
|
||||
if (writePermission) {
|
||||
var row = left.parentNode;
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + input.value);
|
||||
input.blur();
|
||||
} else {
|
||||
var value = input.value
|
||||
prompt = true;
|
||||
@ -346,23 +285,21 @@ function createInput(s, name, title, info) {
|
||||
var row = left.parentNode;
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + value);
|
||||
sendCommand(s, command + " " + value);
|
||||
resizeTextfield(input);
|
||||
prompt = false;
|
||||
}, function () {
|
||||
// User decided to cancel
|
||||
input.value = input.getAttribute("oldValue");
|
||||
input.value = input.oldValue;
|
||||
resizeTextfield(input);
|
||||
prompt = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
form.appendChild(input);
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right");
|
||||
var right = createParElement(component);
|
||||
right.appendChild(form);
|
||||
return appendToContent(info, left, right);
|
||||
return appendToContent(component, left, right);
|
||||
}
|
||||
|
||||
function posTextfield(s, left) {
|
||||
@ -383,16 +320,14 @@ function resizeTextfield(input) {
|
||||
}
|
||||
}
|
||||
|
||||
function createCheckbox(s, name, title, info) {
|
||||
function create_checkbox_row(s, component) {
|
||||
// Creates row-element containing checkbox-item
|
||||
var command = component.command;
|
||||
|
||||
var left = createTitle(title, info);
|
||||
var left = createTitle(component);
|
||||
|
||||
var input = document.createElement('input');
|
||||
input.setAttribute("type", "checkbox");
|
||||
input.setAttribute("name", name);
|
||||
input.setAttribute("__ctype__", "checkbox");
|
||||
input.setAttribute("class", "parameter-checkbox");
|
||||
var input = createParElement(component, 'input', 'parameter-checkbox');
|
||||
input.type = "checkbox";
|
||||
|
||||
input.onkeyup = function (e) {
|
||||
if (e.keyCode === 32) {
|
||||
@ -401,8 +336,8 @@ function createCheckbox(s, name, title, info) {
|
||||
}
|
||||
|
||||
var label = document.createElement('label');
|
||||
label.setAttribute("for", input);
|
||||
label.setAttribute("class", "parameter-label");
|
||||
label.for = input;
|
||||
label.classList.add("parameter-label");
|
||||
|
||||
label.onclick = function () {
|
||||
handleCheckbox();
|
||||
@ -420,7 +355,7 @@ function createCheckbox(s, name, title, info) {
|
||||
input.checked = true;
|
||||
}
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + value);
|
||||
sendCommand(s, command + " " + value);
|
||||
} else {
|
||||
alertify.confirm("", "You are connected with <b>" + clientTitle
|
||||
+ "</b>. <br>"
|
||||
@ -441,7 +376,7 @@ function createCheckbox(s, name, title, info) {
|
||||
input.checked = true;
|
||||
}
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + value);
|
||||
sendCommand(s, command + " " + value);
|
||||
}, function () {
|
||||
// User decided to cancel
|
||||
});
|
||||
@ -449,32 +384,32 @@ function createCheckbox(s, name, title, info) {
|
||||
};
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right");
|
||||
right.classList.add("col-right");
|
||||
right.appendChild(input);
|
||||
right.appendChild(label);
|
||||
return appendToContent(info, left, right);
|
||||
return appendToContent(component, left, right);
|
||||
}
|
||||
|
||||
function createSelection(s, name, title, buttons, info) {
|
||||
function create_enum_row(s, component) {
|
||||
// Creates row-element containing dropdown-selection.
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
var buttons = component.enum_names;
|
||||
|
||||
var left = createTitle(title, info);
|
||||
var left = createTitle(component);
|
||||
|
||||
var select = document.createElement('select');
|
||||
select.setAttribute("name", name);
|
||||
select.setAttribute("__ctype__", "enum");
|
||||
select.setAttribute("class", "select-params");
|
||||
var select = createParElement(component, 'select', 'select-params');
|
||||
|
||||
select.onfocus = function () {
|
||||
select.setAttribute("oldIndex", select.selectedIndex);
|
||||
select.oldIndex = select.selectedIndex;
|
||||
}
|
||||
|
||||
select.oninput = function () {
|
||||
if (writePermission && title != "device config") {
|
||||
if (writePermission && component.title != "device config") {
|
||||
var row = left.parentNode;
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + this.value);
|
||||
sendCommand(s, command + " " + this.value);
|
||||
} else {
|
||||
alertify.confirm("", "You are connected with <b>" + clientTitle
|
||||
+ "</b>. <br>"
|
||||
@ -488,38 +423,37 @@ function createSelection(s, name, title, buttons, info) {
|
||||
var row = left.parentNode;
|
||||
row.style.backgroundColor = "orangered";
|
||||
// Request for command
|
||||
sendCommand(s, name + " " + select.value);
|
||||
sendCommand(s, command + " " + select.value);
|
||||
}, function () {
|
||||
// User decided to cancel
|
||||
select.value = select.options[select
|
||||
.getAttribute("oldIndex")].value;
|
||||
select.value = select.options[select.oldIndex].value
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
var option = document.createElement('option');
|
||||
option.setAttribute("type", "enum");
|
||||
option.setAttribute("class", "option-params");
|
||||
option.setAttribute("value", buttons[i].value);
|
||||
option.type = "enum";
|
||||
option.classList.add("option-params");
|
||||
option.value = buttons[i].value;
|
||||
option.appendChild(document.createTextNode(buttons[i].title));
|
||||
select.add(option);
|
||||
}
|
||||
select.style.display = "none";
|
||||
|
||||
var right = document.createElement('span');
|
||||
right.setAttribute("class", "col-right");
|
||||
right.classList.add("col-right");
|
||||
right.appendChild(select);
|
||||
return appendToContent(info, left, right);
|
||||
return appendToContent(component, left, right);
|
||||
}
|
||||
|
||||
function createTitle(title, info) {
|
||||
function createTitle(component) {
|
||||
// Creates left side of row-tag containing title. Title may hold additional
|
||||
// information, which is shown, when title-tag is clicked.
|
||||
|
||||
var left = document.createElement('span');
|
||||
if (info) {
|
||||
left.setAttribute("class", "col-left event-toggle-info");
|
||||
if (component.info) {
|
||||
left.classList.add("col-left", "event-toggle-info");
|
||||
|
||||
left.onclick = function () {
|
||||
var infoBox = left.parentNode.childNodes[0];
|
||||
@ -530,41 +464,48 @@ function createTitle(title, info) {
|
||||
}
|
||||
}
|
||||
|
||||
left.innerHTML = title + "<sup><b>(i)</b></sup>";
|
||||
left.innerHTML = component.title + "<sup><b>(i)</b></sup>";
|
||||
} else {
|
||||
left.setAttribute("class", "col-left");
|
||||
left.innerHTML = title;
|
||||
left.classList.add("col-left");
|
||||
left.innerHTML = component.title;
|
||||
}
|
||||
return left;
|
||||
}
|
||||
|
||||
function createInfo(info) {
|
||||
function createParElement(component, tag='span', cls='col-right') {
|
||||
var right = document.createElement(tag);
|
||||
if (cls)
|
||||
right.classList.add(cls);
|
||||
// right.name = is not sufficient, getElementsByName would not work
|
||||
right.setAttribute('name', component.name);
|
||||
right.__ctype__ = component.type;
|
||||
return right;
|
||||
}
|
||||
|
||||
function createInfo(component) {
|
||||
// Creates info-box, which isn't visible by default but can be displayed.
|
||||
|
||||
var infoBox = document.createElement('div');
|
||||
infoBox.setAttribute("class", "info-box");
|
||||
infoBox.classList.add("info-box");
|
||||
|
||||
infoBox.onclick = function () {
|
||||
infoBox.style.display = "none";
|
||||
}
|
||||
|
||||
infoBox.innerHTML = info;
|
||||
infoBox.innerHTML = component.info;
|
||||
return infoBox;
|
||||
}
|
||||
|
||||
function appendToContent(info, left, right) {
|
||||
// Cretees row-tag containing infoBox (not visible by default), left side
|
||||
// (span)
|
||||
// and right side (span).
|
||||
function appendToContent(component, left, right) {
|
||||
// Creates row-tag containing infoBox (not visible by default), left side
|
||||
// (span) and right side (span).
|
||||
|
||||
var row = document.createElement('div');
|
||||
row.setAttribute("class", "row");
|
||||
if (info) {
|
||||
row.appendChild(createInfo(info));
|
||||
row.classList.add("row");
|
||||
if (component.info) {
|
||||
row.appendChild(createInfo(component));
|
||||
}
|
||||
for (var i = 1; i < arguments.length; i++)
|
||||
if (arguments[i]) {
|
||||
row.appendChild(arguments[i]);
|
||||
}
|
||||
row.appendChild(left);
|
||||
row.appendChild(right);
|
||||
return row;
|
||||
}
|
||||
|
||||
@ -2,31 +2,18 @@
|
||||
// % INIT
|
||||
|
||||
var MAXBLOCK = 4; // max number of blocks
|
||||
|
||||
var elements = []; // grid elements
|
||||
|
||||
var swiper = []; // This array contains main-swiper-Instances.
|
||||
|
||||
var hostPort = ""; // Address and port of static html-file.
|
||||
|
||||
var clientID = ""; // ID given by server when SSE-connection is established.
|
||||
|
||||
var clientTitle = ""; // Contains name of instrument and device.
|
||||
|
||||
var getUpdates = true;
|
||||
|
||||
var getUpdatesGraphics = true;
|
||||
|
||||
var initCommands = [];
|
||||
|
||||
var loadingShown = true;
|
||||
|
||||
var writePermission = false;
|
||||
|
||||
var menuMode = false;
|
||||
|
||||
var panelOn = true;
|
||||
|
||||
var firstState = 0;
|
||||
|
||||
function Settings() {
|
||||
@ -188,11 +175,11 @@ function toggleHeader() {
|
||||
panelOn = !panelOn;
|
||||
if (panelOn) {
|
||||
header.innerHTML = clientTitle
|
||||
/* header.setAttribute("style", "width: auto;"); */
|
||||
main_panel.setAttribute("style", "display: block;");
|
||||
/* header.style.width = "auto;"; */
|
||||
main_panel.style.display = "block";
|
||||
} else {
|
||||
/* header.setAttribute("style", "width: 30px;"); */
|
||||
main_panel.setAttribute("style", "display: none;");
|
||||
/* header.style.width = "30px"; */
|
||||
main_panel.style.display = "none";
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -2,14 +2,12 @@
|
||||
// % RESPONSIVITY
|
||||
|
||||
var nColumns = 1; // Viewport is subdivided in nColumns columns.
|
||||
|
||||
var nRows = 1; // Viewport is subdivided in nRows rows.
|
||||
|
||||
var gridCountGraphics = 2; // Number of displayed graphics-swipers.
|
||||
|
||||
var MINWIDTH = 400; // Minimal width of block.
|
||||
|
||||
var MINHEIGHT = 700; // Minimal height of block.
|
||||
let paramSlider = [0,1,2,3]; // the number of the parameter slider to open
|
||||
let prevActiveSlider = 0;
|
||||
|
||||
function createGrid() {
|
||||
// Creates grid-elements. By default only the first one is shown
|
||||
@ -18,7 +16,7 @@ function createGrid() {
|
||||
var elements = [];
|
||||
for (var i = 0; i < 4; i++) {
|
||||
var element = document.createElement('div');
|
||||
element.setAttribute("class", "grid-element");
|
||||
element.classList.add("grid-element");
|
||||
document.getElementById("center").appendChild(element);
|
||||
elements.push(element);
|
||||
}
|
||||
@ -66,6 +64,8 @@ function adjustGrid() {
|
||||
|| document.body.clientWidth;
|
||||
var height = window.innerHeight || document.documentElement.clientHeight
|
||||
|| document.body.clientHeight;
|
||||
paramSlider = [0,1,2,3];
|
||||
prevActiveSlider = 0;
|
||||
|
||||
switch (nColumns) {
|
||||
case 1:
|
||||
@ -134,6 +134,8 @@ function adjustGrid() {
|
||||
|
||||
function style(s, width, height) {
|
||||
if (width) {
|
||||
paramSlider[prevActiveSlider] = s;
|
||||
prevActiveSlider = s;
|
||||
elements[s].style.display = "inline-block";
|
||||
elements[s].style.width = width;
|
||||
} else {
|
||||
@ -145,7 +147,4 @@ function style(s, width, height) {
|
||||
elements[s].style.float = "left";
|
||||
}
|
||||
|
||||
function isTouchDevice() {
|
||||
return !!('ontouchstart' in window)
|
||||
|| !!('msmaxtouchpoints' in window.navigator);
|
||||
};
|
||||
let isTouchDevice = !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator);
|
||||
@ -6,54 +6,63 @@ function insertSwiper(s) {
|
||||
// 'grid-element' s.
|
||||
|
||||
var container = document.createElement('div');
|
||||
container.setAttribute("class", "swiper-container swiper-container-main");
|
||||
container.classList.add("swiper-container", "swiper-container-main");
|
||||
elements[s].appendChild(container);
|
||||
|
||||
var swiperwrapper = document.createElement('div');
|
||||
swiperwrapper.setAttribute("class", "swiper-wrapper swiper-wrapper-main");
|
||||
swiperwrapper.setAttribute("s", s);
|
||||
swiperwrapper.classList.add("swiper-wrapper", "swiper-wrapper-main");
|
||||
swiperwrapper.s = s;
|
||||
container.appendChild(swiperwrapper);
|
||||
|
||||
var paginationWrapper = document.createElement('div');
|
||||
paginationWrapper.setAttribute("class", "swiper-pagination");
|
||||
paginationWrapper.classList.add("swiper-pagination");
|
||||
container.appendChild(paginationWrapper);
|
||||
|
||||
var buttonPrev = document.createElement("div");
|
||||
buttonPrev.setAttribute("class", "swiper-button-prev swiper-button-black");
|
||||
buttonPrev.classList.add("swiper-button-prev", "swiper-button-black");
|
||||
|
||||
var buttonNext = document.createElement("div");
|
||||
buttonNext.setAttribute("class", "swiper-button-next swiper-button-black");
|
||||
buttonNext.classList.add("swiper-button-next", "swiper-button-black");
|
||||
|
||||
var swiper = new Swiper(container, {
|
||||
direction : 'horizontal',
|
||||
pagination: {
|
||||
el: paginationWrapper,
|
||||
clickable: true
|
||||
clickable: true,
|
||||
},
|
||||
watchOverflow: true,
|
||||
spaceBetween : 0,
|
||||
navigation:{
|
||||
prevEl: buttonPrev,
|
||||
nextEl: buttonNext
|
||||
}
|
||||
},
|
||||
noSwiping: true, // this activates the noSwipingClass functionality
|
||||
});
|
||||
//console.log(swiper);
|
||||
|
||||
|
||||
if (!isTouchDevice()) {
|
||||
// Add swiper-button.
|
||||
// the graphics slide will disable swiping (use hide box instead)
|
||||
if (isTouchDevice) {
|
||||
function enableSwiping(allow) {
|
||||
swiper.params.noSwipingClass = allow ? null : "swiper-slide-main";
|
||||
}
|
||||
} else {
|
||||
function enableSwiping(allow) {
|
||||
buttonPrev.style.display = allow ? 'block' : 'none';
|
||||
buttonNext.style.display = allow ? 'block' : 'none';
|
||||
}
|
||||
swiper.params.noSwipingClass = "swiper-slide-main";
|
||||
container.appendChild(buttonPrev);
|
||||
container.appendChild(buttonNext);
|
||||
}
|
||||
|
||||
swiper.enableSwiping = enableSwiping;
|
||||
return swiper;
|
||||
}
|
||||
|
||||
function findSlide(s, type) {
|
||||
var i;
|
||||
for (i = 0; i < swiper[s].slides.length; i++) {
|
||||
if (swiper[s].slides[i].getAttribute("slide-type") === type) {
|
||||
return swiper[s].slides[i];
|
||||
if (swiper[s].slides[i].slideType === type) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
@ -66,66 +75,67 @@ function replaceSlideContent(slide, title, content) {
|
||||
}
|
||||
|
||||
function insertSlide(s, title, type, content) {
|
||||
// Inserts new group to instance s of Swiper.
|
||||
// Inserts new group to instance s of Swiper. return inserted position
|
||||
|
||||
var slide = findSlide(s, type);
|
||||
var isl = findSlide(s, type);
|
||||
var slide = swiper[s].slides[isl];
|
||||
if (slide) { // slide already exists
|
||||
replaceSlideContent(slide, title, content);
|
||||
return
|
||||
return isl;
|
||||
}
|
||||
var panel = document.createElement('div');
|
||||
panel.setAttribute("class", "panel");
|
||||
panel.classList.add("panel");
|
||||
|
||||
titlewrapper = document.createElement('span');
|
||||
titlewrapper.innerHTML = title;
|
||||
panel.appendChild(titlewrapper);
|
||||
/*
|
||||
if (type == "_overview" || type == "main") {
|
||||
//panel.appendChild(createHomeButton(s));
|
||||
} else if (type != "graphics" && type != "_inst_select" && type != "console") {
|
||||
panel.appendChild(createCloseButton(s));
|
||||
}
|
||||
*/
|
||||
|
||||
/*if (type === "graphics") {
|
||||
panel.appendChild(createUpdateButton(s));
|
||||
}*/
|
||||
|
||||
slide = document.createElement('div');
|
||||
slide.setAttribute("class", "swiper-slide swiper-slide-main");
|
||||
slide.classList.add("swiper-slide", "swiper-slide-main");
|
||||
// Store type so it can be found easiely later.
|
||||
slide.setAttribute("slide-type", type);
|
||||
slide.slideType = type;
|
||||
slide.appendChild(panel);
|
||||
slide.appendChild(content);
|
||||
// Graphics-slide is put at mostleft position.
|
||||
if (type == "graphics" || type == "_overview") {
|
||||
// Remove old graphics-slide.
|
||||
/* see above
|
||||
if(swiper[0].slides[0].getAttribute("slide-type") === "graphics"){
|
||||
swiper[0].removeSlide(0);
|
||||
}
|
||||
*/
|
||||
swiper[s].prependSlide(slide);
|
||||
swiper[s].slideTo(0);
|
||||
} else if (type == "console") {
|
||||
swiper[s].appendSlide(slide);
|
||||
return 0;
|
||||
}
|
||||
swiper[s].appendSlide(slide);
|
||||
if (type == "console") {
|
||||
if (s === 3) {
|
||||
// Slide mostright swiper-instance to last position (console)
|
||||
swiper[3].slideNext();
|
||||
}
|
||||
} else {
|
||||
swiper[s].appendSlide(slide);
|
||||
if (swiper[s].slides.length > 1) {
|
||||
var consoleslide = swiper[s].slides[swiper[s].slides.length - 2];
|
||||
if (consoleslide.getAttribute["slide-type"] == "console") {
|
||||
// shift Console-slide to mostright position.
|
||||
swiper[s].removeSlide(swiper[s].slides.length - 2);
|
||||
swiper[s].appendSlide(consoleslide);
|
||||
// Slide to position of new slide
|
||||
swiper[s].slideTo(swiper[s].slides.length - 2);
|
||||
} else {
|
||||
swiper[s].slideTo(swiper[s].slides.length - 1);
|
||||
}
|
||||
return swiper[s].slides.length - 1;
|
||||
}
|
||||
let pos = 0;
|
||||
if (swiper[s].slides.length > 1) {
|
||||
var consoleslide = swiper[s].slides[swiper[s].slides.length - 2];
|
||||
if (consoleslide.slideType == "console") {
|
||||
// shift Console-slide to mostright position.
|
||||
swiper[s].removeSlide(swiper[s].slides.length - 2);
|
||||
swiper[s].appendSlide(consoleslide);
|
||||
// Slide to position of new slide
|
||||
pos = swiper[s].slides.length - 2;
|
||||
} else {
|
||||
pos = swiper[s].slides.length - 1;
|
||||
}
|
||||
}
|
||||
swiper[s].slideTo(pos);
|
||||
return pos;
|
||||
}
|
||||
|
||||
function createCloseButton(s) {
|
||||
@ -143,7 +153,7 @@ function createCloseButton(s) {
|
||||
function createUpdateButton(s){
|
||||
// Creates 'span'-element containing update-button (Should be removed later!)
|
||||
var button = document.createElement('span');
|
||||
button.setAttribute("class","interactive toggle-updates-graphics")
|
||||
button.classList.add("interactive", "toggle-updates-graphics")
|
||||
button.onclick = function () {
|
||||
getUpdatesGraphics = ! getUpdatesGraphics;
|
||||
button.innerHTML = "updates = "+getUpdatesGraphics;
|
||||
@ -162,7 +172,7 @@ function getSlideNames() {
|
||||
var sw = swiper[s];
|
||||
var name = "";
|
||||
if (sw.activeIndex != defaultSlidePos(s)) {
|
||||
name = sw.slides[sw.activeIndex].getAttribute("slide-type");
|
||||
name = sw.slides[sw.activeIndex].slideType;
|
||||
}
|
||||
names.push();
|
||||
}
|
||||
|
||||
38
histgraph.py
38
histgraph.py
@ -117,31 +117,28 @@ def get_vars(main, time):
|
||||
|
||||
time, = get_abs_time(time)
|
||||
# get last value only
|
||||
curves = main.get_curves(['$vars'], (time, time))
|
||||
for _, value in curves['$vars'].get():
|
||||
for var in value.split():
|
||||
vars = var.split("|")
|
||||
if len(vars) == 1:
|
||||
vars.append("")
|
||||
if len(vars) == 2:
|
||||
vars.append(vars[0])
|
||||
if len(vars) == 3:
|
||||
vars.append("")
|
||||
if len(vars) == 4:
|
||||
vars.append("") # exact flag
|
||||
name, unit, label, color, continuous = vars
|
||||
continuous = int(continuous) if continuous else 0
|
||||
if not unit in result:
|
||||
result[unit] = dict(tag=unit, unit=unit.split("_")[0], curves=Dict())
|
||||
result[unit]["curves"][name] = dict(name=name, label=label, color=color, continuous=continuous)
|
||||
curves = main.get_curve_options((time, time))
|
||||
for key, opts in curves.items():
|
||||
if not opts.get('show', False):
|
||||
continue
|
||||
print(key, opts)
|
||||
opts = dict(name=key, **opts)
|
||||
unit = opts.pop('unit', '*')
|
||||
tag = opts.pop('tag', unit)
|
||||
if not tag in result:
|
||||
result[tag] = dict(tag=tag, unit=unit, curves=Dict())
|
||||
if 'label' not in opts:
|
||||
opts['label'] = opts['name']
|
||||
result[tag]["curves"][key] = opts
|
||||
|
||||
for unit, curvegroup in result.items():
|
||||
# determine colors
|
||||
for _, curvegroup in result.items():
|
||||
color_set = set()
|
||||
auto_curves = []
|
||||
curve_list = list(curvegroup["curves"].values())
|
||||
curvegroup['curves'] = curve_list
|
||||
for curve in curve_list:
|
||||
col = curve["color"].strip()
|
||||
col = curve.get("color", '').strip()
|
||||
c = ColorMap.to_code(col)
|
||||
if c < 0:
|
||||
valid = ColorMap.check_hex(col)
|
||||
@ -166,8 +163,9 @@ def get_vars(main, time):
|
||||
|
||||
def get_curves(main, keys, timerange, cut_begin=True):
|
||||
curves = main.get_curves(keys, get_abs_time(*timerange), maxpoints=500, cut_begin=cut_begin)
|
||||
opts = main.get_curve_options(timerange, keys)
|
||||
#if 'tt:target' in curves:
|
||||
# print('---')
|
||||
# print(curves['tt:target'].fmtm())
|
||||
# print('TT', curves['tt:target'].for_json()[-5:])
|
||||
return {k: c.for_json() for k, c in curves.items()}
|
||||
return {k: c.for_json(opts.get(k, {}).get('period', 0)) for k, c in curves.items()}
|
||||
|
||||
@ -25,8 +25,8 @@ import circularlog
|
||||
import os
|
||||
import signal
|
||||
from histgraph import get_vars, get_curves, get_abs_time
|
||||
from histreader import MainCache
|
||||
from frappyreader import FrappyReader
|
||||
from histreader.histreader import MainCache
|
||||
from histreader.frappyreader import FrappyReader
|
||||
|
||||
try: import simplejson as json
|
||||
except ImportError: import json
|
||||
@ -668,7 +668,7 @@ class DummyClient(SeaGraph):
|
||||
self.syncreply = []
|
||||
SeaGraph.__init__(self)
|
||||
|
||||
def cmd_reply(self, command, replytype, tmo=5):
|
||||
def cmd_reply(self, command, replytype=None, tmo=5):
|
||||
self.linesocket.send_line(json.dumps(command))
|
||||
t = 0
|
||||
while True:
|
||||
@ -689,7 +689,7 @@ class DummyClient(SeaGraph):
|
||||
raise Exception("timeout")
|
||||
gevent.sleep(0.1)
|
||||
t += 0.1
|
||||
if msg.type != replytype:
|
||||
if replytype and msg.type != replytype:
|
||||
logging.error('REPLY MISMATCH %s %s <> %s', command, replytype, msg.type)
|
||||
return msg
|
||||
|
||||
@ -788,8 +788,14 @@ def SecopEncode(cmd, par=None, value=None):
|
||||
def convert_par(module, name, par):
|
||||
result = dict(type='input', name=module+":"+name, title=name)
|
||||
if par.get('readonly', True):
|
||||
result['type']='rdonly'
|
||||
#print result
|
||||
result['type'] = 'rdonly'
|
||||
else:
|
||||
result['command'] = 'change %s:%s' % (module, name)
|
||||
if par['datainfo']['type'] == 'enum':
|
||||
result['enum_names'] = [dict(title=k, value=v) for k, v in par['datainfo']['members'].items()]
|
||||
result['type'] = 'enum'
|
||||
elif par['datainfo']['type'] == 'bool':
|
||||
result['type'] = 'checkbox'
|
||||
return result
|
||||
|
||||
|
||||
@ -799,7 +805,8 @@ def convert_event(messages):
|
||||
updates = []
|
||||
for msg in messages:
|
||||
if msg.type == 'update':
|
||||
updates.append(dict(name=msg.par, value=str(msg.value[0])))
|
||||
updates.append(dict(name=msg.par, value=msg.value[0]))
|
||||
# updates.append(dict(name=msg.par, value=str(msg.value[0])))
|
||||
return [dict(type='update', updates=updates)]
|
||||
|
||||
|
||||
@ -822,7 +829,7 @@ class SecopClient(SeaGraph):
|
||||
self.idn = idn.value
|
||||
self.description = self.cmd_reply("describe", "describing").value
|
||||
|
||||
def cmd_reply(self, command, replytype, tmo=5):
|
||||
def cmd_reply(self, command, replytype=None, tmo=5):
|
||||
logging.info('COMMAND %r', command)
|
||||
self.replytype = replytype
|
||||
if self.out: self.out.write(">"+command+"\n")
|
||||
@ -855,7 +862,7 @@ class SecopClient(SeaGraph):
|
||||
logging.info('REPLY %r', msg)
|
||||
if msg.type.startswith('error_'):
|
||||
return {}
|
||||
if not replytype.startswith(msg.type):
|
||||
if replytype and not replytype.startswith(msg.type):
|
||||
logging.error('REPLY MISMATCH %s <> %s', replytype, repr(msg))
|
||||
self.replytype = ""
|
||||
return msg
|
||||
@ -872,7 +879,7 @@ class SecopClient(SeaGraph):
|
||||
return dict(type='draw', path='main', title='modules', components=components)
|
||||
else:
|
||||
module = self.description['modules'][path]
|
||||
parameters = module["accessibles"]
|
||||
parameters = dict(module["accessibles"])
|
||||
components = []
|
||||
for name in SecopClient.skip_par:
|
||||
if name in parameters:
|
||||
@ -900,8 +907,7 @@ class SecopClient(SeaGraph):
|
||||
def w_sendcommand(self, command):
|
||||
if not command:
|
||||
return dict(type='accept-command')
|
||||
cmd = "change " + command
|
||||
self.cmd_reply(cmd, 'changed ' + command.split(' ')[0])
|
||||
self.cmd_reply(command)
|
||||
return dict(type='accept-command')
|
||||
|
||||
def poll(self):
|
||||
@ -1006,8 +1012,8 @@ if __name__ == '__main__':
|
||||
|
||||
instrument_config = instrument_list[inst_name]
|
||||
|
||||
frd = FrappyReader('/Users/zolliker/frappyhist/%s' % inst_name, gevent=gevent)
|
||||
main_cache = MainCache('/Users/zolliker/frappyhist/%s_hist' % inst_name, frd, gevent=gevent)
|
||||
frd = FrappyReader('/Users/zolliker/frappyhist/%s' % inst_name)
|
||||
main_cache = MainCache('/Users/zolliker/frappyhist/%s_hist' % inst_name, frd, spawn_worker=False)
|
||||
|
||||
# logging.basicConfig(filename=inst_name+".log", filemode='w', level=logging.INFO, format='%(asctime)s %(levelname)s %(message)s')
|
||||
logging.basicConfig(level=logging.INFO, format='%(asctime)s %(levelname)s %(message)s')
|
||||
|
||||
Reference in New Issue
Block a user