sync UI buttons

This commit is contained in:
Sabina Abdiganieva 2024-01-27 20:35:39 +03:00
parent 9f60c14bd9
commit b0154ac187
4 changed files with 50 additions and 19 deletions

View File

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

View File

@ -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"))
}

View File

@ -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")
})

View File

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