feat: frontend

This commit is contained in:
Tony Yang 2023-01-09 19:31:44 +08:00
parent e44dd84f33
commit 2b89a4d1fc
4 changed files with 117 additions and 0 deletions

117
index.html Normal file
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
static/photo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

BIN
static/scroll-down.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB