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

56
app.py
View File

@ -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 kenderaan_kiri
global kenderaan_kanan
return jsonify({'jumlah_kenderaan': jumlah_kenderaan, 'kenderaan_kiri': kenderaan_kiri, 'kenderaan_kanan': kenderaan_kanan})
global jumlah_kenderaan , kenderaan_kiri, kenderaan_kanan ,videonya ,selesainya
if (videonya != None):
conn = await get_db_connection()
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'])

View File

@ -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,17 +110,13 @@
{% 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>
</div>
</div>
@ -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>
<div class="card-content">
<h4>Input</h4>
<img src="{{ url_for('video_feed', video=video, threshold=threshold, stat='original') }}"
alt="Warna">
<h4 class="box-title">Hasil Pengolahan Video {% if stat != "Belum Ada Data" %} <i>({{ stat[6] }}) </i>{% endif %}</h4>
<div class="card-content" id="div-ini-data">
<div id="data-video" style="display: none;"></div>
{% if stat == "Belum Ada Data" %}
<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();