Sunday, October 28, 2018

Drive Motor Servo dari GUI HTML pada Raspberry Pi

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 :





at
Labels: , ,