finished code

2023-01-20 02:05:55 +09:00
parent b61d514910
commit 24f3baa65d
3 changed files with 93 additions and 19 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,16 +2,51 @@
 <html>

    <head>
-        <title>🔴 Streaming...</title>
+        <title>T.REx</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style.css') }}">
-    </head>
+        <style>
+            body {
+                background-image: url({{ url_for('static', filename='dinosaur_face.png') }} );
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+            background-position: center;
+            }
+        
+            h1 {
+                font-size: 72px;
+                font-family: Arial, Helvetica, sans-serif;
+                color: #F0F8FF;
+            }
+        </style>
+        </head>
+        
+        <body>
+            <div class="container">
+                <div id="camera" align="center">
+                    <img id="camera_feed" src="/camera_stream">
+                    <h1 id="message"></h1>
+                    <script>
+                        var latest = document.getElementById('message');

-    <body>
-        <div id="title">Camera Feed</div>
-        <div id="camera">
-            <img id="camera_feed" src="/stream_feed">
-        </div>
+                        var xhr = new XMLHttpRequest();
+                        xhr.open('GET', '/trash_category_stream');
+
+                        xhr.onreadystatechange = function () {
+                            var all_lines = xhr.responseText.split('\\n');
+                            last_line = all_lines.length - 2
+                            latest.textContent = all_lines[last_line]
+
+                            if (xhr.readyState == XMLHttpRequest.DONE) {
+                                /*alert("The End of Stream");*/
+                                latest.textContent = "The End of Stream"
+                            }
+                        }
+
+                        xhr.send();
+                    </script>
+                </div>
+            </div>
    </body>

 </html>