feat: frontend
This commit is contained in:
parent
e44dd84f33
commit
2b89a4d1fc
117
index.html
Normal file
117
index.html
Normal file
@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Minified version -->
|
||||
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
|
||||
<title>Automated Garbage Segregation</title>
|
||||
<style>
|
||||
/* strict dark theme from simple.css */
|
||||
/* :root {
|
||||
color-scheme:dark;
|
||||
--bg: #212121;
|
||||
--accent-bg: #2b2b2b;
|
||||
--text: #dcdcdc;
|
||||
--text-light: #ababab;
|
||||
--accent: #ffb300;
|
||||
--code: #f06292;
|
||||
--preformatted: #ccc;
|
||||
--disabled: #111
|
||||
}
|
||||
|
||||
img,video {
|
||||
opacity: .8
|
||||
} */
|
||||
|
||||
body, html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
|
||||
#main > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main" v-scope @mounted="mounted()" @unmounted="unmounted()">
|
||||
<div id="image">
|
||||
<img :src="image" alt="item">
|
||||
</div>
|
||||
<div id="status">
|
||||
<h1>{{ status }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js"></script>
|
||||
<script>
|
||||
let app = PetiteVue.createApp({
|
||||
intervalId: -1,
|
||||
pollingInterval: 500,
|
||||
placeholder: "/static/scroll-down.gif",
|
||||
loader: "/static/loader.gif",
|
||||
imageUrl: "/photo",
|
||||
type: "未知",
|
||||
state: "put",
|
||||
get image() {
|
||||
if (this.state == "put") return this.placeholder;
|
||||
if (this.state == "camera") return this.loader;
|
||||
|
||||
return this.imageUrl;
|
||||
},
|
||||
get status() {
|
||||
let data = {
|
||||
"put": "請放置垃圾",
|
||||
"camera": "拍照中,請勿移動",
|
||||
"identify": "辨識中",
|
||||
"identified": this.type,
|
||||
}
|
||||
return data[this.state];
|
||||
},
|
||||
mounted() {
|
||||
console.log("mounted");
|
||||
if (this.intervalId < 0) this.intervalId = setInterval(() => { this.polling(); }, this.pollingInterval);
|
||||
},
|
||||
unmounted() {
|
||||
console.log("unmounted");
|
||||
if (this.intervalId >= 0) {
|
||||
clearInterval(this.intervalId);
|
||||
}
|
||||
},
|
||||
update(data) {
|
||||
let state = data.state;
|
||||
if (state == "identified") this.type = data.type;
|
||||
if (state == "identify") this.imageUrl = data.imageUrl;
|
||||
|
||||
this.state = state;
|
||||
},
|
||||
async polling() {
|
||||
let res, data;
|
||||
try {
|
||||
res = await fetch("/poll");
|
||||
data = await res.json();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return;
|
||||
}
|
||||
|
||||
this.update(data);
|
||||
}
|
||||
});
|
||||
app.mount("#main");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
BIN
static/loader.gif
Normal file
BIN
static/loader.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.3 KiB |
BIN
static/photo.jpg
Normal file
BIN
static/photo.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 195 KiB |
BIN
static/scroll-down.gif
Normal file
BIN
static/scroll-down.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.6 KiB |
Loading…
x
Reference in New Issue
Block a user