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">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Amogus</title>
|
||||
<title>Nu-mass vacuum measurements</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<button id="measure" type="button" class="myButton">Measure</button>
|
||||
<button id="store" type="button" class="myButton">Store</button>
|
||||
<div class="toolbar">
|
||||
<button id="measure" type="button" class="myButton toolbarButton" onclick="measurement()">Measure</button>
|
||||
<button id="store" type="button" class="myButton toolbarButton" onclick="storage()">Store</button>
|
||||
|
||||
<span class="vl"></span>
|
||||
|
||||
Update interval:
|
||||
<input type="radio" value="1" name="interval" checked />
|
||||
@ -16,17 +19,17 @@
|
||||
<input type="radio" value="10" 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 id="lower">
|
||||
<canvas id="graph"></canvas>
|
||||
<div id="plot">
|
||||
</div>
|
||||
<div id="sidebar">
|
||||
<!--
|
||||
<div class="card">
|
||||
<div class="upperSection">
|
||||
<span>Name</span>
|
||||
<input class="switch" type="checkbox">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="middleSection">
|
||||
<span>Undefined</span>
|
||||
<span>mbar</span>
|
||||
@ -37,6 +40,7 @@
|
||||
<input class="switch" type="checkbox">
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
<script src="/script.js"></script>
|
||||
|
||||
@ -4,12 +4,95 @@ function clickCounter(e) {
|
||||
.then((text) => { document.querySelector("#click1").innerHTML=text } )
|
||||
}
|
||||
|
||||
function measurement(e) {
|
||||
console.log("measure")
|
||||
}
|
||||
|
||||
function storage(e) {
|
||||
console.log("storage")
|
||||
}
|
||||
|
||||
|
||||
function cycle() {
|
||||
console.log("asdffg")
|
||||
|
||||
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)
|
||||
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()
|
||||
@ -1,6 +1,20 @@
|
||||
.myButton {
|
||||
color: bisque;
|
||||
background: crimson;
|
||||
color: white;
|
||||
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 {
|
||||
@ -11,10 +25,11 @@
|
||||
color: magenta;
|
||||
background: cyan;
|
||||
float: right;
|
||||
margin-left: auto;
|
||||
}
|
||||
#graph {
|
||||
background: burlywood;
|
||||
#plot {
|
||||
width: 80%;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
body {
|
||||
height: 100vh;
|
||||
@ -22,21 +37,29 @@ body {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f6e9ff;
|
||||
font-family: Sans-Serif;
|
||||
}
|
||||
#lower {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
.upperSection {
|
||||
background: lightblue
|
||||
background: lightblue;
|
||||
text-align: center;
|
||||
}
|
||||
#sidebar {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 3em);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px black solid;
|
||||
padding: .25em;
|
||||
padding-bottom: 1em;
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
input.switch {
|
||||
@ -51,9 +74,10 @@ input.switch:before {
|
||||
position: absolute;
|
||||
width: 3em;
|
||||
height: 1em;
|
||||
background: gray;
|
||||
background: grey;
|
||||
left: -1em;
|
||||
border-radius: 0.5em;
|
||||
|
||||
}
|
||||
|
||||
input.switch:after {
|
||||
@ -62,7 +86,7 @@ input.switch:after {
|
||||
position: absolute;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background: red;
|
||||
background: #fff;
|
||||
left: -1em;
|
||||
border-radius: 0.5em;
|
||||
transition: .25s ease;
|
||||
@ -70,5 +94,39 @@ input.switch:after {
|
||||
|
||||
input.switch:checked:after {
|
||||
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