Tutorial Membuat Aplikasi TV Slide Show dari Folder Sharing Menggunakan Python Flask
Di era digital saat ini, penggunaan TV Informasi atau Digital Signage sudah menjadi kebutuhan di banyak perusahaan, pabrik, sekolah, hingga ruang publik. Salah satu kebutuhan paling umum adalah menampilkan slide show gambar atau video yang diambil langsung dari satu folder sharing.
Pada artikel ini, saya akan membagikan pengalaman sekaligus tutorial lengkap membuat aplikasi TV Slide Show berbasis web menggunakan Python Flask, mulai dari struktur folder hingga aplikasi siap dijalankan.
Mengapa Menggunakan Python Flask untuk TV Slide Show?
Flask adalah framework web Python yang ringan, fleksibel, dan sangat cocok untuk aplikasi internal seperti:
- TV Slide Show kantor / pabrik
- Gallery dokumentasi kegiatan
- TV pengumuman internal
- Display ruang tunggu
Kelebihan Flask:
- Ringan dan cepat
- Mudah dipelajari
- Bisa berjalan di jaringan lokal (LAN)
- Mudah dikembangkan ke project lain
Konsep Aplikasi TV Slide Show
Konsep aplikasi yang akan kita buat:
- Mengambil gambar dari satu folder sharing
- Menampilkan gambar secara slide show otomatis
- Berjalan di browser (Chrome, Edge, Smart TV Browser)
- Auto refresh jika ada file baru
Struktur Folder Project
Buat struktur folder seperti berikut:
tv-slideshow/
│
├── app.py
├── static/
│ └── slides/
│ ├── image1.jpg
│ ├── image2.png
│ └── image3.jpg
│
└── templates/
└── index.html
Folder static/slides bisa diarahkan ke folder sharing jaringan atau disinkronkan dengan folder sharing server.
Install Library yang Dibutuhkan
Pastikan Python sudah terinstall, lalu install Flask:
pip install flaskMembuat File app.py
Isi file app.py dengan kode berikut:
from flask import Flask, render_template
import os
app = Flask(__name__)
SLIDE_FOLDER = 'static/slides'
@app.route('/')
def index():
images = os.listdir(SLIDE_FOLDER)
images = [img for img in images if img.lower().endswith(('jpg', 'png', 'jpeg'))]
return render_template('index.html', images=images)
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000, debug=True)
Penjelasan singkat:
- Membaca semua file gambar di folder slides
- Filter hanya file gambar
- Mengirim daftar gambar ke halaman HTML
Membuat File index.html
Buat file templates/index.html dan isi dengan kode berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>TV Slide Show</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
Menjalankan Aplikasi
Jalankan aplikasi dengan perintah:
python app.pyBuka browser dan akses:
http://IP-SERVER:5000Jika TV dan server berada di jaringan yang sama, slide show akan tampil otomatis.
Pengembangan Project ke Depan
Project TV Slide Show ini adalah awal dari beberapa project yang akan saya kembangkan ke depan, seperti:
- 📺 Project TV Slide Show (lanjutan)
- 🖼️ Gallery Dokumentasi berbasis web
- 🍱 Sistem Catering internal
- 📅 Sistem Booking Ruang Meeting
- 📊 Dashboard Informasi Perusahaan
Dengan Python Flask, semua project tersebut bisa dikembangkan secara bertahap dan saling terintegrasi.
Penutup
Membangun aplikasi menggunakan Python Flask selalu memberikan perasaan yang menyenangkan: sederhana, fleksibel, dan powerful. Project kecil seperti TV Slide Show ini bisa menjadi fondasi untuk sistem yang lebih besar di masa depan.
Semoga tutorial ini bermanfaat dan bisa menjadi inspirasi untuk project teknologi kamu selanjutnya 🚀
Posting Komentar