Membuat TV Slide Show Advanced Menggunakan Python Flask
Pada artikel sebelumnya, kita telah berhasil membuat aplikasi TV Slide Show sederhana menggunakan Python Flask yang menampilkan gambar dari satu folder sharing.
Di artikel lanjutan ini, kita akan meningkatkan aplikasi tersebut ke level ADVANCED dengan beberapa fitur profesional yang sering digunakan di lingkungan perusahaan.
Fitur Advanced yang Akan Dibuat
- 🔄 Auto refresh jika ada file baru (tanpa restart server)
- ⬆️ Halaman admin untuk upload gambar
- 📺 Mode fullscreen khusus TV
- ⏱️ Pengaturan durasi slide
Struktur Folder Versi Advanced
tv-slideshow-advanced/ │ ├── app.py ├── config.py ├── static/ │ ├── slides/ │ └── uploads/ │ ├── templates/ │ ├── index.html │ └── admin.html
Konfigurasi Dasar (config.py)
SLIDE_FOLDER = 'static/slides'
UPLOAD_FOLDER = 'static/uploads'
ALLOWED_EXTENSIONS = {'jpg', 'jpeg', 'png'}
SLIDE_DURATION = 5000
Mengembangkan app.py
from flask import Flask, render_template, request, redirect
import os
from config import SLIDE_FOLDER, UPLOAD_FOLDER, ALLOWED_EXTENSIONS
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
@app.route('/')
def index():
images = os.listdir(SLIDE_FOLDER)
images = [img for img in images if allowed_file(img)]
return render_template('index.html', images=images)
@app.route('/admin', methods=['GET', 'POST'])
def admin():
if request.method == 'POST':
file = request.files['file']
if file and allowed_file(file.filename):
file.save(os.path.join(SLIDE_FOLDER, file.filename))
return redirect('/admin')
images = os.listdir(SLIDE_FOLDER)
return render_template('admin.html', images=images)
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)
Halaman Slide Show (index.html)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>TV Slide Show Advanced</title>
<style>
body {
margin: 0;
background: black;
overflow: hidden;
}
img {
width: 100vw;
height: 100vh;
object-fit: contain;
display: none;
}
img.active {
display: block;
}
</style>
</head>
<body>
{% for img in images %}
<img src="{{ url_for('static', filename='slides/' + img) }}">
{% endfor %}
<script>
let slides = document.querySelectorAll('img');
let index = 0;
function showSlide() {
slides.forEach(slide => slide.classList.remove('active'));
slides[index].classList.add('active');
index = (index + 1) % slides.length;
}
setInterval(showSlide, 5000);
showSlide();
</script>
</body>
</html>
Halaman Admin Upload (admin.html)
<!DOCTYPE html>
<html>
<head>
<title>Admin Upload Slide</title>
</head>
<body>
<h2>Upload Gambar Slide</h2>
<form method="POST" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Upload</button>
</form>
<h3>Daftar Slide</h3>
<ul>
{% for img in images %}
<li>{{ img }}</li>
{% endfor %}
</ul>
</body>
</html>
Mode Fullscreen untuk TV
Untuk TV atau Smart TV, gunakan browser Chrome / Edge dan aktifkan:
- Windows: tekan F11
- Android TV: aktifkan Fullscreen Mode
Aplikasi ini dirancang agar tampilan tetap proporsional di layar besar.
Potensi Pengembangan Selanjutnya
- 🔐 Login admin
- 📂 Multi folder slide
- 📹 Support video MP4
- 📡 Sinkronisasi dengan folder sharing jaringan
Aplikasi ini juga bisa dikembangkan menjadi:
- TV Informasi Perusahaan
- Gallery Dokumentasi
- Digital Signage Pabrik
- Dashboard Monitoring
Penutup
Dengan menambahkan fitur advanced, aplikasi TV Slide Show berbasis Python Flask berubah dari project sederhana menjadi sistem profesional yang siap digunakan di lingkungan kerja nyata.
Di postingan berikutnya, saya akan membahas project lain seperti Gallery Dokumentasi, Sistem Catering, dan Sistem Booking Ruang Meeting.
Posting Komentar