sync UI buttons

numass-control/src/main/kotlin/inr/numass/control/FXExtensions.kt

@@ -112,6 +112,7 @@ fun EventTarget.deviceStateIndicator(connection: DeviceDisplayFX<*>, state: Stri
 fun Node.deviceStateToggle(connection: DeviceDisplayFX<*>, state: String, title: String = state) {
     if (connection.device.stateNames.contains(state)) {
         togglebutton(title) {
+            this.id = title
             selectedProperty().addListener { _, oldValue, newValue ->
                 if (oldValue != newValue) {
                     connection.device.states[state] = newValue

numass-web-control/src/main/java/inr/numass/webcontrol/Server.kt

@@ -12,7 +12,9 @@ import io.ktor.server.routing.*
 import io.ktor.server.websocket.*
 import io.ktor.websocket.*
 import javafx.application.Application
+import javafx.scene.control.ToggleButton
 import javafx.stage.Stage
+import kotlinx.coroutines.runBlocking
 import java.io.ByteArrayOutputStream
 import java.nio.file.Paths
 import java.util.*
@@ -29,29 +31,49 @@ class ReadVacSvr : ReadVac() {
     var server : NettyApplicationEngine? = null
     override fun start(stage: Stage) {
         super.start(stage)
-
+        val measureButton = stage.scene.lookup("#Measure") as ToggleButton
+        val storeButton = stage.scene.lookup("#Store") as ToggleButton
         this.server = embeddedServer(Netty, port = 8000) {
             install(WebSockets)
             routing {
                 staticFiles("/", Paths.get(this.javaClass.classLoader.getResource("index.html").toURI()).toFile().parentFile)
                 val connections = Collections.synchronizedSet<Connection?>(LinkedHashSet())
+                measureButton.selectedProperty().addListener { _, oldValue, newValue ->
+                    if (oldValue != newValue) {
+                        connections.forEach {
+                            runBlocking {
+                                it.session.send("{ \"measurement\": {\"value\": ${newValue}}}")
+                            }
+                        }
+                    }
+                }
+                storeButton.selectedProperty().addListener { _, oldValue, newValue ->
+                    if (oldValue != newValue) {
+                        connections.forEach {
+                            runBlocking {
+                                it.session.send("{ \"storing\": {\"value\": ${newValue}}}")
+                            }
+                        }
+                    }
+                }
                 webSocket("/echo")  {
                     val thisConnection = Connection(this)
                     connections += thisConnection
                     try {
-                        // Sending device list
+                        // Sending device list and initial UI state
                         val stream = ByteArrayOutputStream()
                         JSONMetaWriter.write(stream, this@ReadVacSvr.getDeviceMeta(this@ReadVacSvr.getDeviceConfig()))
-                        send("{ \"devices\": $stream }")
+                        send("{ \"devices\": $stream, \"storing\": {\"value\": ${storeButton.selectedProperty().get()}}, \"measurement\": {\"value\": ${measureButton.selectedProperty().get()}} }")
+
                         for (frame in incoming) {
                             frame as? Frame.Text ?: continue
                             val receivedText = frame.readText()
                             when (receivedText) {
-                                "" -> {
-                                    println("button was pressed")
-                                    connections.forEach {
-                                        it.session.send("{ \"measurement\" : true}")
+                                "measurePressed" -> {
+                                    measureButton.fire()
                                 }
+                                "storePressed" -> {
+                                    storeButton.fire()
                                 }
                                 "bye" ->  close(CloseReason(CloseReason.Codes.NORMAL, "Client said BYE"))
                             }

numass-web-control/src/main/resources/script.js

@@ -58,7 +58,18 @@ nuWebSocket.onmessage = (event) => {
             drawCard(device.name, device.color, "---", (device.sensorType == "mks") )
         })
     }
-//    if (msg.)
+    if (msg.measurement) {
+        if (msg.measurement.value) {
+            document.querySelector("#measure").classList.add("pressedButton")
+        }
+        else document.querySelector("#measure").classList.remove("pressedButton")
+    }
+    if (msg.storing) {
+        if (msg.storing.value) {
+            document.querySelector("#store").classList.add("pressedButton")
+        }
+        else document.querySelector("#store").classList.remove("pressedButton")
+    }
 }
 /*
 fetch("/api/devices")
@@ -85,14 +96,11 @@ var layout = {
 Plotly.newPlot('plot', data, layout, { responsive: true });
 
 document.querySelector("#measure").addEventListener("click", (e) => {
-    nuWebSocket.send("pressed")
-    console.log("pressed")
+    nuWebSocket.send("measurePressed")
+    console.log("measurePressed")
 })
 
-let onClick = null
-let click   = () -> { ... onClick("myBotton") }
-
-onClick = (name) => { console.log("Button " + name + " pressed") };
-click() // Button myButton pressed
-onClick = (name) => { console.log("Button " + name + " pressed!!!") };
-click() // Button myButton pressed!!!
+document.querySelector("#store").addEventListener("click", (e) => {
+    nuWebSocket.send("storePressed")
+    console.log("storePressed")
+})

numass-web-control/src/main/resources/styles.css

@@ -12,7 +12,7 @@
     transition: 0.5s;
 }
 
-.myButton:active {
+.pressedButton {
     background-color: #008a03;
     transition: 0.5s;
 }