updated index2.html to display data

This commit is contained in:
kicap 2024-06-10 16:24:58 +08:00
parent 18671446d3
commit 927d265bd3
2 changed files with 119 additions and 21 deletions

54
app.py
View File

@ -14,9 +14,11 @@ video_list = []
cap = None cap = None
videonya = None
jumlah_kenderaan = 0 jumlah_kenderaan = 0
kenderaan_kiri = 0 kenderaan_kiri = 0
kenderaan_kanan = 0 kenderaan_kanan = 0
selesainya= False
MYSQL_HOST = os.getenv('MYSQL_HOST') MYSQL_HOST = os.getenv('MYSQL_HOST')
MYSQL_USER = os.getenv('MYSQL_USER') MYSQL_USER = os.getenv('MYSQL_USER')
@ -60,7 +62,7 @@ async def generate_frames2(video, threshold,stat):
global jumlah_kenderaan global jumlah_kenderaan
global kenderaan_kiri global kenderaan_kiri
global kenderaan_kanan global kenderaan_kanan
global cap global cap,selesainya
jumlah_kenderaan = 0 jumlah_kenderaan = 0
kenderaan_kiri = 0 kenderaan_kiri = 0
@ -387,10 +389,12 @@ async def generate_frames2(video, threshold,stat):
else: # if video is finished then break loop 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") await insert_data(video, str(round(frames_count / fps, 2)),str(round(framenumber / fps, 2)), kenderaan_kiri, kenderaan_kanan, "Selesai")
selesainya = True
cap.release() cap.release()
cv2.destroyAllWindows() cv2.destroyAllWindows()
break break
selesainya = True
cap.release() cap.release()
cv2.destroyAllWindows() cv2.destroyAllWindows()
@ -403,16 +407,39 @@ def update_video_list():
@app.route('/') @app.route('/')
async def index(): async def index():
global videonya,selesainya
selesainya = False
if (cap != None): if (cap != None):
cap.release() cap.release()
cv2.destroyAllWindows() cv2.destroyAllWindows()
update_video_list() update_video_list()
print("video_list:", video_list) print("video_list:", video_list)
video = request.args.get('video', 'video/video.mp4') video = request.args.get('video', 'video/video.mp4')
videonya = video
the_threshold = request.args.get('threshold', 450) the_threshold = request.args.get('threshold', 450)
threshold = int(the_threshold) 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 # 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(): async def video_feed():
# Get the video file path, threshold value, and state from the URL parameters # 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']) @app.route('/check_jumlah_kenderaan', methods=['GET'])
async def check_jumlah_kenderaan(): 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' UPLOAD_FOLDER = 'video'
@app.route('/upload', methods=['POST']) @app.route('/upload', methods=['POST'])

View File

@ -58,11 +58,13 @@
<!-- /.title --> <!-- /.title -->
<ul class="menu js__accordion"> <ul class="menu js__accordion">
<li class="current"> <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> Utama</span></a>
</li> </li>
<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> Data</span></a>
</li> </li>
@ -108,11 +110,7 @@
{% endfor %} {% endfor %}
</select> </select>
</div> </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"> <div class="form-group text-center">
<button type="button" class="btn btn-primary" onclick="olah_video()">Proses <button type="button" class="btn btn-primary" onclick="olah_video()">Proses
Video</button> Video</button>
@ -135,11 +133,43 @@
<div class="col-lg-8 col-md-10 col-xs-12"> <div class="col-lg-8 col-md-10 col-xs-12">
<div class="box-content"> <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>
</div> </div>
@ -231,10 +261,36 @@
document.getElementById('kiri').innerHTML = data.kenderaan_kiri document.getElementById('kiri').innerHTML = data.kenderaan_kiri
document.getElementById('kanan').innerHTML = data.kenderaan_kanan document.getElementById('kanan').innerHTML = data.kenderaan_kanan
document.getElementById('total').innerHTML = data.jumlah_kenderaan 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\ // run check_jumlah_kenderaan every 1.5 seconds\
setInterval(check_jumlah_kenderaan, 1500); setInterval(check_jumlah_kenderaan, 1500);
// check_jumlah_kenderaan(); // check_jumlah_kenderaan();