updated index2.html to display data
This commit is contained in:
kicap
parent
18671446d3
commit
927d265bd3
56
app.py
56
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 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'])
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in New Issue