x/PointCloudWeb
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Python server gracefully shutdown and send scan data to converter

Browse Source
This commit is contained in:
Lukas Droste
2021-08-16 20:52:35 +02:00
parent e45f0312e0
commit de049999ee
5 changed files with 200 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
PointCloudWeb.Web/src/views/Scanner.vue
View File

@@ -1,19 +1,21 @@
<template>
<div class="ui">
<h1>Welcome to PointCloudWeb</h1>
<div v-if="connection_status && !scan_status">
<div v-if="connection_status && !scan_status && scanner_status">
<button class="button" v-on:click="sendMessage('<start><0>')" >Start Scan: low</button>
<button class="button button2" v-on:click="sendMessage('<start><1>')" >Start Scan: medium</button>
<button class="button button3" v-on:click="sendMessage('<start><2>')" >Start Scan: high</button>
</div>
<div class="progressbar" v-if="connection_status">
<div :style="{width: progress + '%'}"></div>
<button v-if="scan_status && connection_status" class="button button4" v-on:click="sendMessage('<stop>')" >cancel</button>
<button v-if="!scanner_status && connection_status" class="button button4" v-on:click="sendMessage('<init>')" >Init. Scanner</button>
<div class="progressbar" v-if="connection_status && scanner_status">
<div :style="{width: progress + '%', 'background-color': progress_color}"></div>
</div>
<p v-if="connection_status">{{progress}} %</p>
<p v-if="connection_status && scanner_status">{{progress}} %</p>
<div>
<h1 v-if="!connection_status">status: disconnected</h1>
<h1 v-if="connection_status">status: connected</h1>
<button v-if="!connection_status" v-on:click="connectWS" >Connect</button>
<h1 v-if="!connection_status">Scan Server: disconnected</h1>
<h1 v-if="connection_status">Scan Server: connected</h1>
<button v-if="!connection_status" v-on:click="connectWS">Connect to Scan Server</button>
<ul>
<div class="value" v-for="(item, index) in logs" :key="item.id">
<li>{{logs[index]}}</li>
@@ -21,7 +23,7 @@
</ul>
</div>
<!--<button v-on:click="connection_status = !connection_status" >test</button>-->
<button v-on:click="logs = []" >clear logs</button>
<button v-on:click="progress = 0, logs = []" >clear logs</button>
</div>
</template>
@@ -33,7 +35,9 @@ export default {
logs: [],
connection_status: false,
scan_status: false,
scanner_status: false,
progress: 0,
progress_color: "yellow",
command: "",
value: ""
};
@@ -54,13 +58,20 @@ export default {
if(event.data)
that.msgFilter(event.data)
}
this.wsConnection.onclose = function(){
that.connection_status = false
that.scanner_status = false
that.scan_status = false
that.logs.push("Websocket Connection closed");
}
},
msgFilter(message){
let that = this
if(message.search("<") != -1){
that.command = message.substr(message.search("<")+1, message.search(">")-1)
that.value = message.substr(message.search(">")+1)
console.log("command: " + that.command + " / value: " + that.value)
//console.log("command: " + that.command + " / value: " + that.value)
this.action(that.command, that.value)
}
else{
@@ -78,13 +89,29 @@ export default {
that.logs.push(value);
}
else if(command == "scan"){
if(value == "running")
if(value == "running"){
that.scan_status = true
that.progress_color = "yellow"
}
else if(value == "finished"){
that.scan_status = false
that.progress_color = "greenyellow"
}
else{
that.scan_status = false
that.progress_color = "red"
that.progress = "canceld"
}
}
else if(command == "connection"){
if(value == "true")
that.scanner_status = true
else
that.scanner_status = false
that.scan_status = false
}
else
that.logs.push("Unknow command: " + value);
that.logs.push("Unknow command: " + value)
}
},
@@ -122,7 +149,6 @@ li {
}
.progressbar>div {
background-color: greenyellow;
/* Adjust with JavaScript */
height: 20px;
border-radius: 4px;
@@ -141,7 +167,12 @@ li {
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button:hover{
background-color: #e9962a;
}
.button2 {background-color: #00ba9b;}
.button3 {background-color: #008cff}
.button4 {background-color: #f44336;} /* Red */
</style>