NPM/numass-framework
4
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implement dynamic drawing of devices in config

Browse Source
This commit is contained in:
Sabina Abdiganieva 2024-01-18 03:48:12 +03:00
parent e367bd62f1
commit 2177dd5b42
3 changed files with 161 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
numass-web-control/src/main/resources/index.html
View File

@ -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>

83
numass-web-control/src/main/resources/script.js
View File

@ -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()

74
numass-web-control/src/main/resources/styles.css
View File

@ -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;
} }