updated index2.html to display data

app.py

@@ -14,9 +14,11 @@ video_list = []
 
 cap = None
 
+videonya = None
 jumlah_kenderaan = 0
 kenderaan_kiri = 0
 kenderaan_kanan = 0
+selesainya= False
 
 MYSQL_HOST = os.getenv('MYSQL_HOST')
 MYSQL_USER = os.getenv('MYSQL_USER')
@@ -60,7 +62,7 @@ async def generate_frames2(video, threshold,stat):
     global jumlah_kenderaan
     global kenderaan_kiri
     global kenderaan_kanan
-    global cap
+    global cap,selesainya
 
     jumlah_kenderaan = 0
     kenderaan_kiri = 0
@@ -387,10 +389,12 @@ async def generate_frames2(video, threshold,stat):
 
         else:  # if video is finished then break loop
             await insert_data(video, str(round(frames_count / fps, 2)),str(round(framenumber / fps, 2)), kenderaan_kiri, kenderaan_kanan, "Selesai")
+            selesainya = True
             cap.release()
             cv2.destroyAllWindows()
             break
     
+    selesainya = True
     cap.release()
     cv2.destroyAllWindows()
 
@@ -403,16 +407,39 @@ def update_video_list():
 
 @app.route('/')
 async def index():
+    global videonya,selesainya
+    selesainya = False
     if (cap != None):
         cap.release()
         cv2.destroyAllWindows()
     update_video_list()
     print("video_list:", video_list)
     video =  request.args.get('video', 'video/video.mp4')
+    videonya = video
     the_threshold =  request.args.get('threshold', 450)
     threshold =   int(the_threshold)
+
+    try:
+        query_select = "SELECT * FROM tb_data WHERE nama = %s "
+
+        conn = await get_db_connection()
+        async with conn.cursor() as cursor:
+            await cursor.execute(query_select, (video,))
+            result = await cursor.fetchall()
+            conn.close()
+            
+            if len(result) == 0:
+                return await render_template('index2.html', video=video, threshold=threshold, video_list=video_list, stat="Belum Ada Data", selesainya=selesainya)
+            else :
+                print(result[0])
+                return await render_template('index2.html', video=video, threshold=threshold, video_list=video_list, stat=result[0], selesainya=selesainya)
+
+        
+    except Exception as e:
+        return jsonify({'message': 'Failed to generate frames!', 'error': str(e)}), 500
+
     # Pass the video file path and threshold value to the template
-    return await render_template('index2.html', video=video, threshold=threshold, video_list=video_list)
+    
 
 async def video_feed():
     # Get the video file path, threshold value, and state from the URL parameters
@@ -440,10 +467,25 @@ app.add_url_rule('/video_feed', 'video_feed', video_feed)
 
 @app.route('/check_jumlah_kenderaan', methods=['GET'])
 async def check_jumlah_kenderaan():
-    global jumlah_kenderaan
+    global jumlah_kenderaan , kenderaan_kiri, kenderaan_kanan ,videonya ,selesainya
-    global kenderaan_kiri
+    if (videonya != None):
-    global kenderaan_kanan
+        conn = await get_db_connection()
-    return jsonify({'jumlah_kenderaan': jumlah_kenderaan, 'kenderaan_kiri': kenderaan_kiri, 'kenderaan_kanan': kenderaan_kanan})
+        async with conn.cursor() as cursor:
+            sql = "SELECT * FROM tb_data WHERE nama = %s"
+            await cursor.execute(sql, (videonya,))
+            result = await cursor.fetchall()
+            conn.close()
+            if len(result) == 0:
+                return jsonify({'jumlah_kenderaan': 0, 'kenderaan_kiri': 0, 'kenderaan_kanan': 0})
+            else:
+                print(result[0])
+                jumlah_kenderaan = result[0][4] + result[0][5]
+                kenderaan_kiri = result[0][4]
+                kenderaan_kanan = result[0][5]
+                waktu_sekarang = result[0][3]
+                return jsonify({'jumlah_kenderaan': jumlah_kenderaan, 'kenderaan_kiri': kenderaan_kiri, 'kenderaan_kanan': kenderaan_kanan, 'waktu_sekarang':waktu_sekarang})
+        
+    # return jsonify({'jumlah_kenderaan': jumlah_kenderaan, 'kenderaan_kiri': kenderaan_kiri, 'kenderaan_kanan': kenderaan_kanan})
 
 UPLOAD_FOLDER = 'video'
 @app.route('/upload', methods=['POST'])

templates/index2.html

@@ -58,11 +58,13 @@
                 <!-- /.title -->
                 <ul class="menu js__accordion">
                     <li class="current">
-                        <a class="waves-effect" href="{{ url_for('index') }}"><i class="menu-icon fa fa-home"></i><span>Halaman
+                        <a class="waves-effect" href="{{ url_for('index') }}"><i
+                                class="menu-icon fa fa-home"></i><span>Halaman
                                 Utama</span></a>
                     </li>
                     <li>
-                        <a class="waves-effect" href="{{ url_for('video_list') }}"><i class="menu-icon fa fa-home"></i><span>Video
+                        <a class="waves-effect" href="{{ url_for('video_list') }}"><i
+                                class="menu-icon fa fa-home"></i><span>Video
                                 Data</span></a>
                     </li>
 
@@ -108,11 +110,7 @@
                                     {% endfor %}
                                 </select>
                             </div>
-                            <!-- <div class="form-group">
+
-                                <label for="video">Threshold</label>
-                                <input type="text" class="form-control" id="threshold" name="threshold"
-                                    value="{{ threshold }}">
-                            </div> -->
                             <div class="form-group text-center">
                                 <button type="button" class="btn btn-primary" onclick="olah_video()">Proses
                                     Video</button>
@@ -135,11 +133,43 @@
                 <div class="col-lg-8 col-md-10 col-xs-12">
 
                     <div class="box-content">
-                        <h4 class="box-title">Hasil Pengolahan Video</h4>
+                        <h4 class="box-title">Hasil Pengolahan Video {% if stat != "Belum Ada Data" %} <i>({{ stat[6] }}) </i>{% endif %}</h4>
-                        <div class="card-content">
+                        <div class="card-content" id="div-ini-data">
-                            <h4>Input</h4>
+                            <div id="data-video" style="display: none;"></div>
-                            <img src="{{ url_for('video_feed', video=video, threshold=threshold, stat='original') }}"
+                            {% if stat == "Belum Ada Data" %}
-                                alt="Warna">
+                            <div class="form-group">
+                                <p id="p-ket">{{ stat }}</p>
+                                <button type="button" class="btn btn-primary" onclick="proses_video('{{ video }}')" id="btn-proses">Proses</button>
+                            </div>
+                            {% else %}
+                            <div class="form-group text-center">
+                                <table id="example" class="table table-striped table-bordered" style="width:100%">
+                                    <thead>
+                                        <tr>
+                                            <th>Video</th>
+                                            <th>Waktu</th>
+                                            <th>Last Scan</th>
+                                            <th>Kiri</th>
+                                            <th>Kanan</th>
+                                            <th>Jumlah</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>{{ stat[1] }}</td>
+                                            <td>{{ stat[2] }} detik</td>
+                                            <td id="td-waktu-sekarang">{{ stat[3] }} detik</td>
+                                            <td id="td-kiri">{{ stat[4] }}</td>
+                                            <td id="td-kanan">{{ stat[5] }}</td>
+                                            <td id="td-jumlah">{{ stat[4] + stat[5] }}</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="form-group text-center">
+                                <button type="button" class="btn btn-primary" onclick="proses_video('{{ video }}')" id="btn-proses">Proses</button>
+                            </div>
+                            {% endif %}
                         </div>
 
                     </div>
@@ -226,15 +256,41 @@
                 type: "GET",
                 url: "/check_jumlah_kenderaan",
                 success: function (data) {
-                //    console.log(data)
+                    //    console.log(data)
 
                     document.getElementById('kiri').innerHTML = data.kenderaan_kiri
                     document.getElementById('kanan').innerHTML = data.kenderaan_kanan
                     document.getElementById('total').innerHTML = data.jumlah_kenderaan
+
+                    if(document.getElementById('example')){
+                        $("#td-waktu-sekarang").text(data.waktu_sekarang);
+                        $("#td-jumlah").text(data.jumlah_kenderaan);
+                        $("#td-kiri").text(data.kenderaan_kiri);
+                        $("#td-kanan").text(data.kenderaan_kanan);
+                    }
+
+                    if(data.selesainya == true){
+                        // reload page
+                        window.location.reload();
+                    }
+
                 }
             });
         }
 
+        function proses_video(video) {
+            console.log(video)
+            // open url in new tab but stay in current tab and dont redirect or reload this page
+            let html = "<iframe src='/video_feed?video=" + video + "' width='100%' height='100%' frameborder='0' allowfullscreen></iframe>"
+            $("#data-video").html(html)
+            $("#btn-proses").attr("disabled", true)   
+            $("#btn-proses").html("Memproses ....")
+
+            if(document.getElementById('p-ket')){
+                $("#p-ket").html("Window pengolahan video sedang berjalan....")
+            }
+        }
+
         // run check_jumlah_kenderaan every 1.5 seconds\
         setInterval(check_jumlah_kenderaan, 1500);
         // check_jumlah_kenderaan();