100 lines
3.0 KiB
HTML
100 lines
3.0 KiB
HTML
<!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>
|
|
body {
|
|
grid-template-columns: 1fr min(75rem, 90%) 1fr;
|
|
}
|
|
|
|
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 v-if="state =='put'" :src="placeholder" alt="placeholder">
|
|
<img v-else-if="state =='camera'" :src="loader" alt="loader">
|
|
<img v-else :src="imageUrl" 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 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 = `/photo?${Date.now()}`
|
|
|
|
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> |