Pendahuluan
Untuk membuat aplikasi GUI di Raspberry Pi banyak macamnya, salah satunya bisa menggunakan Python, membuat GUI dengan Python menurut saya sendiri agak merepotkan pertama karena harus mempelajari hal yang baru, kedua tampilannya yang sedikit lebih kaku. agak berbeda jika kita membuat GUI dengan HTML scriptnya lebih mudah, tampilannya bisa dipermanis dengan CSS dan Javascript. Artikel ini dibuat sebagai tutorial membuat aplikasi GUI dari HTML untuk mentrigger script Python sebagai script yang dijalankan secara
background dan mengembalikan nilai balik ke HTML.
Disini saya akan membuat Aplikasi dimana terdapat dua tombol untuk menggerakan motor Servo dan tampilan bar progress yang memperlihatkan nilai sebuah sensor. ya tentu saja untuk urusan GUI kita buat dengan menggunakan HTML dan Bootstrap agar tampilannya eyecatching. dan script Python bertugas sebagai pelaksana untuk mengerakan motor Servo dan mengambil nilai sebuah sensor.
perlu diketahui bahwa sebelum memulai, diperlukan web server nginx dan CGI dengan program uwsg, dimana terdapat pada artikel sebelumnya pada link
http://www.plankton123.info/2018/10/install-web-server-nginx-baca-engine-x.html. web server dan CGI diperlukan agar script Python bisa berjalan dari Web Browser.
GUI HTML
Kita akan membuat GUI sederhana dengan HTML, membuat GUI dengan HTML sangatlah mudah, karena HTML merupakan script pemrograman berbasis Tag, sebagai contoh jika kita membuat tombol mempunyai tag button maka contohnya yaitu <button> Gerak Servo </button>
untuk mempelajari GUI HTML bisa dipelajari terpisah dari artikel ini. baik langsung saja saya membuat GUI HTML sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>GUI HTML</title>
</head>
<body>
<div style="margin-top: 100px; margin-left: 100px;">
<button id="servoKanan">Servo >></button>
</div>
</body>
</html>
simpanlah script HTML diatas difolder baru pada folder web dengan nama
index.html, jika di Raspberry Pi milik saya dengan web server nginx, maka folder webnya berada di
/var/www/html/ kemudian buat folder baru yaitu
guihtml. dan simpan file
index.html tersebut di folder
/var/www/html/guihtml/.
kemudian setting konfigurasi nginx agar supaya folder baru
guihtml dapat dibuka, yaitu dengan mengedit file
/etc/nginx/sites-available/defaut dengan menambahkan location baru dengan perintah
location /guihtml {
try_files $uri $uri/ =404;
}
dan reset service nginx dengan perintah diterminal
sudo service nginx restart dan buka di browser http://ip-raspberry-pi/guihtml dikomputer lain yang satu jaringan dengan raspberry Pi anda. sehingga ketika dibuka akan tampil seperti berikut ini :
Menggunakan Javascript
project ini tidak terlepas dari bantuan javascript, javascript disini menggunakan framework jquery dan ajax. jquery dibutuhkan oleh ajax dalam melakukan tugasnya yaitu merequest sebuah halaman web, mengirimkan data, dan mendapatkan nilai balik dari sebuah halaman yang direquest. dalam hal ini halaman yang direquest merupakan script Python untuk melakukan sesuatu, misalnya menggerakan motor Servo atau mengambil nilai sebuah sensor dan mengirimkan nilai balik ke ajax tersebut.
karena menggunakan jquery maka jquery bisa kamu dapatkan pada link
https://jquery.com/download/ , letakan jquery didalam folder baru yang sudah dibuat tadi (folder
guihtml). kemudian tambahkan baris kode diatas tag </body> file index.html dengan baris kode berikut ini :
<script type="text/javascript" src="http://172.20.10.14/guihtml/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$('#servoKanan').click(function() {
$.ajax({
type:'get',
url:'http://172.20.10.14/cgi-bin/servo.py?pulsa=4.5',
success:function(data){
alert (data);
}
});
});
</script>
kode diatas merupakan perintah untuk mendengarkan
event klik button dengan
id=servoKanan kemudian akan menjalankan
ajax untuk melakukan
request ke sebuah halaman script Python dengan nama
servo.py dengan mengirimkan variable GET bernama
pulsa bernilai
'4.5' kemudian nilai balikan dari hasil
servo.py dikembalikan dalam bentuk parameter
funtion (data) dan ditunjukan berupa alert javascript. jika terdapat alamat
IP address diatas bisa diganti dengan alamat
IP Address Raspberry Pi Anda sendiri, untuk mengetahui IP Address Raspberry Pi dapat melakukan
ifconfig di terminal. berikut adalah kode lengkap untuk file
index.html
<!DOCTYPE html>
<html>
<head>
<title>GUI HTML</title>
</head>
<body>
<div style="margin-top: 100px; margin-left: 100px;">
<button id="servoKanan">Servo >></button>
</div>
<script type="text/javascript" src="http://172.20.10.14/guihtml/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$('#servoKanan').click(function() {
$.ajax({
type:'get',
url:'http://172.20.10.14/cgi-bin/servo.py?pulsa=4.5',
success:function(data){
alert (data);
}
});
});
</script>
</body>
</html>
Servo.py (Script Python)
Dan terakhir kita akan membuat script Python dengan nama servo.py untuk menggerakan motor servo. seperti yang sudah pernah kalian ketahui bahwa motor servo digerakan dengan mengirimkan keluaran sinyal PWM (Pulse Width Modulation), oleh karena itu kita akan membuat keluaran sinyal PWM dengan duty cycle berupa data yang dikirimkan dari javascript menggunakan methode GET. berikut script Python yang sudah saya buat :
#!/usr/bin/env python
import RPi.GPIO as GPIO
import time
import cgi
form = cgi.FieldStorage()
GPIO.setwarnings(False)
GPIO.setmode(GPIO.BCM)
GPIO.setup(18, GPIO.OUT)
pwm = GPIO.PWM(18, 50)
pulsa = form.getvalue('pulsa')
pwm.start(float(pulsa))
time.sleep(1)
pwm.stop()
GPIO.cleanup()
print "Content-type: text/html\n\n"
print form.getvalue('pulsa')
script Python diatas pertama-tama membuat keluaran sinyal PWM dengan frekuensi 50 Hz, duty cycle berupa data yang dikirimkan melalui GET dengan nama
pulsa di Pin 18 BCM GPIO Raspberry Pi. kemudian mengembalikan nilai data variable
pulsa yang dikirimkan melalui GET sebelumnya.
sejak PWM yang dikeluarkan yaitu 50Hz, maka periodenya yaitu 20ms, karena servo bergerak sepanjang 0 - 180 derajat dengan lebar pulsa minimal 0.5ms sampai 2.5ms, maka perhitungan duty cyclenya yaitu :
0.5ms = 0.5/20 x 100% = 2.5%
1.5ms = 1.5/20 x 100% = 7.5%
2.5ms = 2.5/20 x 100% = 12.5%
sehingga untuk duty cycle yang digunakan yaitu dari 2.5 sampai 12.5
script Python diatas disimpan di folder CGI, pada kasus saya sendiri, saya simpan pada
/usr/lib/cgi-bin/servo.py
agar www-data (akses halaman web untuk pada linux) dapat menjalankankan GPIO maka, perlu kita setting permission agar www-data dapat mengakses GPIO. untuk melakukan itu yaitu dapat melakukan perintah
$ sudo usermod -a -G gpio www-data
$ sudo groups www-data
kemudian restart Raspberry Pi. lanjut untuk testing.
Testing
setelah semuanya sudah selesai kita bisa mencoba testing. sebelumnya letakan Servo pin data ke GPIO nomor 18 BCM. kemudian buka web browser dikomputer lain yang satu jaringan dengan Raspberry Pi dan ketikan di Address Bar
http://ip-address-Raspberry-Pi/guihtml/ dalam kasus saya buka
http://172.20.10.14/guihtml/ kemudian tekan button
servo >> maka seharusnya motor servo gerak dengan duty cycle PWM 4.5 % dan pada halaman browser akan ada alert variable GET seperti berikut :
