start working on webUI

This commit is contained in:
Sabina Abdiganieva 2024-01-15 04:52:50 +03:00
parent 2baf583473
commit 650e789fc5
7 changed files with 227 additions and 1 deletions

42
numass-web-control/.gitignore vendored Normal file
View File

@ -0,0 +1,42 @@
.gradle
build/
!gradle/wrapper/gradle-wrapper.jar
!**/src/main/**/build/
!**/src/test/**/build/
### IntelliJ IDEA ###
.idea/modules.xml
.idea/jarRepositories.xml
.idea/compiler.xml
.idea/libraries/
*.iws
*.iml
*.ipr
out/
!**/src/main/**/out/
!**/src/test/**/out/
### Eclipse ###
.apt_generated
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache
bin/
!**/src/main/**/bin/
!**/src/test/**/bin/
### NetBeans ###
/nbproject/private/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/
### VS Code ###
.vscode/
### Mac OS ###
.DS_Store

View File

@ -0,0 +1,25 @@
plugins {
application
}
group = "inr.numass"
repositories {
mavenCentral()
}
dependencies {
testImplementation(platform("org.junit:junit-bom:5.9.1"))
testImplementation("org.junit.jupiter:junit-jupiter")
implementation("io.ktor:ktor-server-core:2.3.7")
implementation("io.ktor:ktor-server-netty:2.3.7")
}
tasks.test {
useJUnitPlatform()
}
application {
mainClass.set("inr.numass.webcontrol.ServerKt")
}

View File

@ -0,0 +1,26 @@
package inr.numass.webcontrol
import io.ktor.server.routing.*
import io.ktor.http.*
import io.ktor.server.application.*
import io.ktor.server.response.*
import io.ktor.server.request.*
import io.ktor.server.engine.*
import io.ktor.server.netty.*
import java.nio.file.Paths
import io.ktor.server.http.content.*
fun main() {
var clickNumber = 0
embeddedServer(Netty, port = 8000) {
routing {
staticFiles("/", Paths.get(this.javaClass.classLoader.getResource("index.html").toURI()).toFile().parentFile)
get ("/api") {
call.respondText(call.parameters.toString())
}
get ("/api/clicker") {
call.respondText(clickNumber++.toString())
}
}
}.start(wait = true)
}

View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Amogus</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<button id="measure" type="button" class="myButton">Measure</button>
<button id="store" type="button" class="myButton">Store</button>
Update interval:
<input type="radio" value="1" name="interval" checked />
<input type="radio" value="5" name="interval" />
<input type="radio" value="10" name="interval" />
<input type="radio" value="15" name="interval" />
<button id="log" type="button" class="logButton">Log</button>
</div>
<div id="lower">
<canvas id="graph"></canvas>
<div id="sidebar">
<div class="card">
<div class="upperSection">
<span>Name</span>
<input class="switch" type="checkbox">
</div>
<hr>
<div class="middleSection">
<span>Undefined</span>
<span>mbar</span>
</div>
<hr>
<div class="powerSection">
<span>Power</span>
<input class="switch" type="checkbox">
</div>
</div>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>

View File

@ -0,0 +1,15 @@
function clickCounter(e) {
fetch("/api/clicker")
.then((response) => response.text())
.then((text) => { document.querySelector("#click1").innerHTML=text } )
}
function cycle() {
console.log("asdffg")
setTimeout(cycle, document.querySelector("input[name='interval']:checked").value * 1000)
}
//document.querySelector("#click1").addEventListener('click', clickCounter)
cycle()

View File

@ -0,0 +1,74 @@
.myButton {
color: bisque;
background: crimson;
}
.testButton {
color: magenta;
background: cyan;
}
#log {
color: magenta;
background: cyan;
float: right;
}
#graph {
background: burlywood;
width: 80%;
}
body {
height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
#lower {
flex: 1;
display: flex;
}
.upperSection {
background: lightblue
}
#sidebar {
flex: 1;
}
.card {
border: 1px black solid;
padding: .25em;
}
input.switch {
position: relative;
float: right;
left: -1em;
}
input.switch:before {
content: ' ';
display: block;
position: absolute;
width: 3em;
height: 1em;
background: gray;
left: -1em;
border-radius: 0.5em;
}
input.switch:after {
content: ' ';
display: block;
position: absolute;
width: 1em;
height: 1em;
background: red;
left: -1em;
border-radius: 0.5em;
transition: .25s ease;
}
input.switch:checked:after {
left: 1em;
background: green;
}

View File

@ -53,4 +53,4 @@ include("numass-core:numass-data-proto")
include("numass-core:numass-signal-processing")
include(":numass-viewer")
include("numass-web-control")