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