forked from NPM/numass-framework
implement dynamic drawing of devices in config
This commit is contained in:
parent
e367bd62f1
commit
2177dd5b42
@ -2,13 +2,16 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Amogus</title>
|
<title>Nu-mass vacuum measurements</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<div class="toolbar">
|
||||||
<button id="measure" type="button" class="myButton">Measure</button>
|
<button id="measure" type="button" class="myButton toolbarButton" onclick="measurement()">Measure</button>
|
||||||
<button id="store" type="button" class="myButton">Store</button>
|
<button id="store" type="button" class="myButton toolbarButton" onclick="storage()">Store</button>
|
||||||
|
|
||||||
|
<span class="vl"></span>
|
||||||
|
|
||||||
Update interval:
|
Update interval:
|
||||||
<input type="radio" value="1" name="interval" checked />
|
<input type="radio" value="1" name="interval" checked />
|
||||||
@ -16,17 +19,17 @@
|
|||||||
<input type="radio" value="10" name="interval" />
|
<input type="radio" value="10" name="interval" />
|
||||||
<input type="radio" value="15" name="interval" />
|
<input type="radio" value="15" name="interval" />
|
||||||
|
|
||||||
<button id="log" type="button" class="logButton">Log</button>
|
<button id="log" type="button" class="logButton toolbarButton">Log</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="lower">
|
<div id="lower">
|
||||||
<canvas id="graph"></canvas>
|
<div id="plot">
|
||||||
|
</div>
|
||||||
<div id="sidebar">
|
<div id="sidebar">
|
||||||
|
<!--
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="upperSection">
|
<div class="upperSection">
|
||||||
<span>Name</span>
|
|
||||||
<input class="switch" type="checkbox">
|
<input class="switch" type="checkbox">
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
|
||||||
<div class="middleSection">
|
<div class="middleSection">
|
||||||
<span>Undefined</span>
|
<span>Undefined</span>
|
||||||
<span>mbar</span>
|
<span>mbar</span>
|
||||||
@ -37,6 +40,7 @@
|
|||||||
<input class="switch" type="checkbox">
|
<input class="switch" type="checkbox">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="/script.js"></script>
|
<script src="/script.js"></script>
|
||||||
|
@ -4,12 +4,95 @@ function clickCounter(e) {
|
|||||||
.then((text) => { document.querySelector("#click1").innerHTML=text } )
|
.then((text) => { document.querySelector("#click1").innerHTML=text } )
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function measurement(e) {
|
||||||
|
console.log("measure")
|
||||||
|
}
|
||||||
|
|
||||||
|
function storage(e) {
|
||||||
|
console.log("storage")
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function cycle() {
|
function cycle() {
|
||||||
console.log("asdffg")
|
console.log("asdffg")
|
||||||
|
|
||||||
setTimeout(cycle, document.querySelector("input[name='interval']:checked").value * 1000)
|
setTimeout(cycle, document.querySelector("input[name='interval']:checked").value * 1000)
|
||||||
}
|
}
|
||||||
|
// Creates device card
|
||||||
|
function drawCard(device_name = "Default", col = "red", measure = "---", power = false) {
|
||||||
|
let card = document.createElement("div")
|
||||||
|
card.classList = "card"
|
||||||
|
|
||||||
|
// Create upper section of a card
|
||||||
|
let upperSection = document.createElement("div")
|
||||||
|
upperSection.classList = "upperSection"
|
||||||
|
let name = document.createElement("span")
|
||||||
|
name.style.fontWeight = "bolder"
|
||||||
|
let p_toggle = document.createElement("input")
|
||||||
|
p_toggle.type= "checkbox"
|
||||||
|
p_toggle.classList = "switch"
|
||||||
|
name.textContent = device_name
|
||||||
|
upperSection.appendChild(name)
|
||||||
|
upperSection.appendChild(p_toggle)
|
||||||
|
card.appendChild(upperSection)
|
||||||
|
|
||||||
|
card.appendChild(document.createElement("hr"))
|
||||||
|
// Create middle section of a card
|
||||||
|
let middleSection = document.createElement("div")
|
||||||
|
middleSection.classList = "middleSection"
|
||||||
|
let measurement = document.createElement("span")
|
||||||
|
measurement.classList = "measure"
|
||||||
|
measurement.textContent = measure
|
||||||
|
measurement.style.color = col
|
||||||
|
let mbar = document.createElement("span")
|
||||||
|
mbar.textContent = "mbar"
|
||||||
|
mbar.style.fontSize = "2.5em"
|
||||||
|
mbar.style.float = "right"
|
||||||
|
middleSection.appendChild(measurement)
|
||||||
|
middleSection.appendChild(mbar)
|
||||||
|
card.appendChild(middleSection)
|
||||||
|
|
||||||
|
card.appendChild(document.createElement("hr"))
|
||||||
|
|
||||||
|
if (power) {
|
||||||
|
let powerSection = document.createElement("div")
|
||||||
|
let power = document.createElement("span")
|
||||||
|
power.textContent = "Power"
|
||||||
|
let power_toggle = document.createElement("input")
|
||||||
|
power_toggle.type= "checkbox"
|
||||||
|
power_toggle.classList = "switch"
|
||||||
|
powerSection.appendChild(power)
|
||||||
|
powerSection.appendChild(power_toggle)
|
||||||
|
card.appendChild(powerSection)
|
||||||
|
}
|
||||||
|
document.querySelector("#sidebar").appendChild(card)
|
||||||
|
}
|
||||||
|
|
||||||
|
var devices = []
|
||||||
|
|
||||||
//document.querySelector("#click1").addEventListener('click', clickCounter)
|
//document.querySelector("#click1").addEventListener('click', clickCounter)
|
||||||
|
fetch("/api/devices")
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((json) => {
|
||||||
|
console.log(json)
|
||||||
|
json.sensor.forEach((device) => {
|
||||||
|
devices.push(device.name)
|
||||||
|
drawCard(device.name, device.color, "---", (device.sensorType == "mks") )
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
var data = []
|
||||||
|
|
||||||
|
var layout = {
|
||||||
|
xaxis: {
|
||||||
|
title: 'timestamp'
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
title: 'pressure (mbar)'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Plotly.newPlot('plot', data, layout, { responsive: true });
|
||||||
|
console.log(devices)
|
||||||
|
//drawCard()
|
||||||
cycle()
|
cycle()
|
@ -1,6 +1,20 @@
|
|||||||
.myButton {
|
.myButton {
|
||||||
color: bisque;
|
color: white;
|
||||||
background: crimson;
|
background-color: #ad0022;
|
||||||
|
border: 1px black solid;
|
||||||
|
padding: 0.2em 1ch;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myButton:hover {
|
||||||
|
background-color: #7b0d23;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myButton:active {
|
||||||
|
background-color: #008a03;
|
||||||
|
transition: 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.testButton {
|
.testButton {
|
||||||
@ -11,10 +25,11 @@
|
|||||||
color: magenta;
|
color: magenta;
|
||||||
background: cyan;
|
background: cyan;
|
||||||
float: right;
|
float: right;
|
||||||
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
#graph {
|
#plot {
|
||||||
background: burlywood;
|
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
padding-right: 0.5em;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
@ -22,21 +37,29 @@ body {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
background: #f6e9ff;
|
||||||
|
font-family: Sans-Serif;
|
||||||
}
|
}
|
||||||
#lower {
|
#lower {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.upperSection {
|
.upperSection {
|
||||||
background: lightblue
|
background: lightblue;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
#sidebar {
|
#sidebar {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: calc(100vh - 3em);
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
border: 1px black solid;
|
border: 1px black solid;
|
||||||
padding: .25em;
|
padding: .25em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
background: #efefef;
|
||||||
}
|
}
|
||||||
|
|
||||||
input.switch {
|
input.switch {
|
||||||
@ -51,9 +74,10 @@ input.switch:before {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
width: 3em;
|
width: 3em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
background: gray;
|
background: grey;
|
||||||
left: -1em;
|
left: -1em;
|
||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input.switch:after {
|
input.switch:after {
|
||||||
@ -62,7 +86,7 @@ input.switch:after {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
background: red;
|
background: #fff;
|
||||||
left: -1em;
|
left: -1em;
|
||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
transition: .25s ease;
|
transition: .25s ease;
|
||||||
@ -70,5 +94,39 @@ input.switch:after {
|
|||||||
|
|
||||||
input.switch:checked:after {
|
input.switch:checked:after {
|
||||||
left: 1em;
|
left: 1em;
|
||||||
background: green;
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.switch:checked:before {
|
||||||
|
background: #bada55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbarButton {
|
||||||
|
border-radius: 1em;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
padding: 0.5em;
|
||||||
|
height: 3em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.vl {
|
||||||
|
border-left: 1px solid grey;
|
||||||
|
height: 100%;
|
||||||
|
padding-right: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.measure {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middleSection {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 1ch;
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user