From 2177dd5b423a61d49a53543c561749a0fdaf2db5 Mon Sep 17 00:00:00 2001 From: Sabina Abdiganieva Date: Thu, 18 Jan 2024 03:48:12 +0300 Subject: [PATCH] implement dynamic drawing of devices in config --- .../src/main/resources/index.html | 20 +++-- .../src/main/resources/script.js | 83 +++++++++++++++++++ .../src/main/resources/styles.css | 74 +++++++++++++++-- 3 files changed, 161 insertions(+), 16 deletions(-) diff --git a/numass-web-control/src/main/resources/index.html b/numass-web-control/src/main/resources/index.html index fbc62cf..1753ee2 100644 --- a/numass-web-control/src/main/resources/index.html +++ b/numass-web-control/src/main/resources/index.html @@ -2,13 +2,16 @@ - Amogus + Nu-mass vacuum measurements + -
- - +
+ + + + Update interval: @@ -16,17 +19,17 @@ - +
- +
+
diff --git a/numass-web-control/src/main/resources/script.js b/numass-web-control/src/main/resources/script.js index b6c5703..3a210eb 100644 --- a/numass-web-control/src/main/resources/script.js +++ b/numass-web-control/src/main/resources/script.js @@ -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() \ No newline at end of file diff --git a/numass-web-control/src/main/resources/styles.css b/numass-web-control/src/main/resources/styles.css index ac41072..7782537 100644 --- a/numass-web-control/src/main/resources/styles.css +++ b/numass-web-control/src/main/resources/styles.css @@ -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; } \ No newline at end of file