rgb propeller display menggunakan mikrokontroler …

TUGAS AKHIR

RGB PROPELLER DISPLAY MENGGUNAKAN

MIKROKONTROLER ATMEGA8

Diajukan untuk memenuhi salah satu syarat

memperoleh gelar Sarjana Teknik pada

Program Studi Teknik Elektro

Jurusan Teknik Elektro

Fakultas Sains dan Teknologi Universitas Sanata Dharma

Oleh:

SHODIQ FAJAR MASRURI

NIM : 165114067

JURUSAN TEKNIK ELEKTRO

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS SANATA DHARMA

YOGYAKARTA

2018

PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI

ii

FINAL PROJECT

RGB PROPELLER DISPLAY USING

ATMEGA8 MICROCONTROLLER

In partial fulfilment of the requirement

For the degree of Sarjana Teknik

Department of Electrical Engineering

Faculty of Science and Technology, Sanata Dharma University

By:


NIM : 165114067

DEPARTMENT OF ELECTRICAL ENGINEERING

FACULTY OF SCIENCE AND TECHNOLOGY

SANATA DHARMA UNIVERSITY

YOGYAKARTA

2018


iii

LEMBAR PERSETUJUAN

TUGAS AKHIR



Disusun oleh:


NIM : 165114067

Telah disetujui oleh:

Pembimbing I

Djoko Untoro Suwarno, S.Si., M.T. Tanggal : ________________


iv

LEMBAR PENGESAHAN

TUGAS AKHIR



Disusun oleh:


NIM : 165114067

Telah dipertahankan di depan tim penguji

pada tanggal 2 September 2018

dan dinyatakan memenuhi syarat

Susunan Panitia Penguji :

Nama Lengkap Tanda Tangan

Ketua : Petrus Setyo Prabowo, S.T.,M.T. ___________________

Sekretaris : Djoko Untoro Suwarno, S.Si.,M.T. ___________________

Anggota : Ir. Th. Prima Ari Setiyani, M.T. ___________________

Yogyakarta, __________________ 2018

Fakultas Sains dan Teknologi

Universitas Sanata Dharma

Dekan,

Sudi Mungkasi, S.Si., M. Math.Sc., Ph.D


v

PERNYATAAN KEASLIAN KARYA

Saya menyatakan dengan sesungguhnya bahwa tugas akhir ini tidak memuat karya

atau bagian karya orang lain, kecuali yang telah disebutkan dalam kutipan dan daftar

pustaka sebagaimana layaknya karya ilmiah.

Yogyakarta, 20 September 2018

Shodiq Fajar Masruri


vi

HALAMAAN PERSEMBAHAN DAN MOTTO HIDUP

MOTTO :

“Syukuri semua yang ada saat ini, lakukan yang terbaik

untuk besok pagi”

Skripsi ini kupersembahkan kepada ….

Tuhan Yang Maha Suci

Bapak, Ibu dan Keluarga tercinta

Teman-teman Teknik Elektro Sanata Dharma

Semua pihak yang telah membantu

terselesaikannya skripsi ini


vii

LEMBAR PERNYATAAN PERSETUJUAN PUBLIKASI KARYA

ILMIAH UNTUK KEPENTINGAN AKADEMIS

Yang bertanda tangan di bawah ini, saya mahasiswa Universitas Sanata Dharma :

Nama : SHODIQ FAJAR MASRURI

Nomor Mahasiswa : 165114067

Demi pengembangan ilmu pengetahuan, saya memberikan kepada Perpustakaan

Universitas Sanata Dharma karya ilmiah saya yang berjudul :



beserta perangkat yang diperlukan (bila ada). Dengan demikian saya memberikan kepada

Perpustakaan Universitas Sanata Dharma hak untuk menyimpan, mengalihkan dalam

bentuk media lain, mengelolanya dalam bentuk pangkalan data, mendistribusikan secara

terbatas, dan mempublikasikannya di Internet atau media lain untuk kepentingan akademis

tanpa perlu meminta ijin dari saya maupun memberikan royalti kepada saya selama tetap

mencantumkan nama saya sebagai penulis.

Demikian pernyataan ini yang saya buat dengan sebenarnya.




viii

INTISARI

Propeller display merupakan salah satu metode penampil elektronik yang unik

namun masih jarang dan asing bagi kebanyakan orang terutama di Indonesia. Seiring

dengan perkembangan teknologi yang semakin pesat, penggunaan propeller display

dimungkinkan akan semakin banyak diaplikasikan dalam berbagai hal. Oleh karena itu

pemahaman tentang propeller display merupakan hal yang penting. Penelitian ini bertujuan

untuk menghasilkan RGB propeller display menggunakan mikrokontroler ATMega8.

Pada tugas akhir ini terdiri dari 2 bagian penting yaitu aplikasi pengubah file gambar

menjadi kode hex dan perangkat penampil gambar pada propeller. File gambar dipilih dan

diolah menjadi kumpulan kode-kode hex menggunakan aplikasi. Hasil kode dari aplikasi

tersebut kemudian dimasukkan ke program mikrokontroler untuk di tampilkan pada

propeller display. Teknik pengambilan data dilakukan dengan cara kuisioner berdasarkan

hasil pengamatan oleh 10 responden. Selain itu juga dilakukan pengujian terhadap putaran

propeller display, hasil tampilan, warna, dan keseimbangan alat.

Hasil dari penelitian ini adalah dihasilkan suatu penampil elektronik berupa RGB

propeller display dengan kualitas aplikasi pengubah file gambar menjadi kode hex

mempunyai skor 4,15 termasuk kategori baik dan kualitas perangkat penampil gambar

pada propeller mempunyai skor 4,19 termasuk kategori baik. Kecepatan putar propeller

display adalah 714 rpm. Tampilan display sesuai dengan gambar masukan. Warna terdiri

dari 8 jenis dan dapat ditampilkan dengan baik. Alat masih belum seimbang sempurna

dengan persentase keseimbangan sebesar 96,67%.

Kata kunci: led RGB, propeller, display, ATMega8


ix

ABSTRACT

Propeller display is a unique electronic display method, but is still rare and foreign to

most people, especially in Indonesia. Along with the rapid development of technology, the

use of propeller displays will be more widely applied in various ways. Therefore,

understanding of propeller display is important. This study aims to produce RGB display

propeller using ATMega8 microcontroller.

In this final project consists of 2 important parts, namely the application of changing

the image file into hex code and the image viewer device on the propeller. Image files are

selected and processed into a collection of hex codes using the application. The code

results from the application are then inserted into the microcontroller program to be

displayed on the display propeller. Data collection techniques were carried out by means of

questionnaires based on observations by 10 respondents. In addition, testing of the

propeller display rotation, the results of display, color and balance of the equipment is also

carried out.

The result of this research is that an electronic display in the form of RGB propeller

display is produced with the quality of the application of the image file modifier into hex

code having score of 4.15 including the good category and the quality of the image display

device in the propeller has score of 4.19 including good category. Propeller display

rotational speed is 714 rpm. Display in accordance with the input image. Color consists of

8 types and can be displayed properly. The tool is still not perfectly balanced with a

balance percentage of 96.67%.

Kata kunci: led RGB, propeller, display, ATMega8


x

KATA PENGANTAR

Puji syukur kehadirat Tuhan Yang Esa atas segala rahmat dan karunia-Nya sehingga

tugas akhir ini dapat diselesaikan dengan baik. Penelitian yang berupa tugas akhir ini

merupakan salah satu syarat bagi mahasiswa Jurusan Teknik Elektro untuk memperoleh

gelar Sarjana Teknik di Universitas Sanata Dharma Yogyakarta.

Tugas akhir ini dapat diselesaikan dengan baik atas bantuan, gagasan dan dukungan

dari berbagai pihak. Oleh karena itu, pada kesempatan ini penulis ingin mengucapkan

terima kasih kepada :

1. Bapak Sudi Mungkasi, Ph.D., selaku Dekan Fakultas Sains dan Teknologi

Universitas Sanata Dharma Yogyakarta.

2. Bapak Petrus Setyo Prabowo, S.T., M.T., selaku Ketua Program Studi Teknik

Elektro Universitas Sanata Dharma.

3. Bapak Djoko Untoro Suwarno, S.Si., M.T., selaku Dosen Pembimbing tugas akhir

yang telah banyak meluangkan waktu untuk memberikan bimbingan.

4. Ibu Ir. Theresia Prima Ari Setiyani, M.T. dan Bapak Petrus Setyo Prabowo, S.T.,

M.T. selaku dosen penguji yang telah memberikan masukan, bimbingan, dan saran

untuk merevisi laporan tugas akhir ini.

5. Bapak Damar Widjaja, S.T., M.T., selaku dosen pembimbing akademik Program

Studi Teknik Elektro angkatan 2016.

6. Seluruh dosen Teknik Elektro yag telah memberikan ilmu yang bermanfaat kepada

penulis selama proses perkuliahan.

7. Semua pihak yang tidak bisa penulis sebutkan satu per satu atas bantuan,

bimbingan, kritik dan saran.

Penulis menyadari bahwa penulisan tugas akhir ini masih banyak kekurangan,

kelemahan dan jauh dari sempurna. Oleh sebab itu, dengan segala kerendahan hari, penulis

mengharapkan kritik dan saran yang membangun untuk penyempurnaan tugas akhir ini.

Semoga tugas akhir ini dapat bermanfaat bagi semua pihak.




xi

DAFTAR ISI

HALAMAN JUDUL (Bahasa Indonesia) ..................................................................... i

HALAMAN JUDUL (Bahasa Inggris) ......................................................................... ii

HALAMAN PERSETUJUAN ....................................................................................... iii

HALAMAN PENGESAHAN ........................................................................................ iv

PERNYATAAN KEASLIANN KARYA ...................................................................... v

HALAMAN PERSEMBAHAN DAN MOTTO HIDUP ............................................. vi

LEMBAR PERNYATAAN PERSETUJUAN PUBLIKASI KARYA ILMIAH

UNTUK KEPENTINGAN AKADEMIS ...................................................................... vii

INTISARI ........................................................................................................................ viii

ABSTRACT .................................................................................................................... ix

KATA PENGANTAR .................................................................................................... x

DAFTAR ISI ................................................................................................................... xi

DAFTAR GAMBAR ...................................................................................................... xiii

DAFTAR TABEL ........................................................................................................... xv

BAB I. PENDAHULUAN

1.1.Latar Belakang Masalah ...................................................................................... 1

1.2.Tujuan dan Manfaat ............................................................................................. 2

1.3.Batasan Masalah .................................................................................................. 2

1.4.Metodologi Penelitian ......................................................................................... 3

BAB II. DASAR TEORI

2.1.Propeller Display ................................................................................................ 5

2.2.RGB LED ............................................................................................................ 6

2.3.Mikrokontroler AVR ATMega8 ......................................................................... 7

2.3.1. Timer / Counter ...................................................................................... 9

2.3.2. Interupsi .................................................................................................. 10

2.4.EEPROM Eksternal Tipe AT25HP512 ............................................................... 10

2.5.Hall Effect Switch ................................................................................................ 11

2.6.Motor DC tipe RS 775 ......................................................................................... 11

2.7.Shift Register 74HC595 ....................................................................................... 12

2.8.Menggambar Lingkaran dengan Kode Program ................................................. 13


xii

2.9.Rangkaian Pengatur PWM .................................................................................. 13

2.10. Kualitas Perangkat Lunak ................................................................................ 15

2.11. Skala Likert ...................................................................................................... 15

BAB III. RANCANGAN PENELITIAN

3.1.Perancangan Sistem Secara Umum ..................................................................... 17

3.2.Perancangan Aplikasi Pengubah File Gambar ke Kode Hex .............................. 18

3.3.Perancangan Perangkat Penampil Gambar pada Propeller ................................. 21

3.4.Instrumen Penelitian ............................................................................................ 23

BAB IV. HASIL DAN PEMBAHASAN

4.1.Perubahan Perancangan ....................................................................................... 25

4.1.1. Perubahan Proses Penyimpanan Data Hasil Konversi ......................... 25

4.1.2. Perubahan Pengatur Kecepatan Motor ................................................. 26

4.2.Implementasi Pembuatan Alat ............................................................................. 26

4.2.1. Implementasi aplikasi pengubah file gambar menjadi data hex .......... 26

4.2.2. Bentuk fisik perangkatpenampil gambar pada propeller ..................... 27

4.2.3. Keterangan penggunaan alat ................................................................ 29

4.3.Pengujian Kualitas Alat berdasarkan Kuisioner .................................................. 30

4.4.Pengujian Putaran Propeller Display .................................................................. 33

4.5.Pengujian Tampilan Gambar dan Warna pada Propeller Display ...................... 36

4.6.Pengujian Keseimbangan Alat ............................................................................ 39

4.7.Pengujian Waktu konversi Gambar ..................................................................... 40

4.8.Pembahasan Program .......................................................................................... 41

4.5.1. Program HTML ................................................................................... 42

4.5.2. Program CSS ........................................................................................ 43

4.5.3. Program Javascript dan JQuery ........................................................... 44

4.5.4. Program Bahasa C pada Codevision AVR ............................................ 46

BAB V KESIMPULAN DAN SARAN

5.1.Kesimpulan .......................................................................................................... 50

5.2.Saran .................................................................................................................... 51

DAFTAR PUSTAKA ..................................................................................................... 52

LAMPIRAN


xiii

DAFTAR GAMBAR

Gambar 1.1. Blok diagram RGB propeller display menggunakan

mikrokontroler ATMega8 .................................................................. 3

Gambar 2.1. Contoh prinsip persistence of vision .................................................. 5

Gambar 2.2. Tampilan propeller display ketika berputar ....................................... 6

Gambar 2.3. Kombinasi warna dasar pada led RGB .............................................. 6

Gambar 2.4. Gambar dan dimensi SMD 5050 RGB led ........................................ 7

Gambar 2.5. Konfigurasi pin mikrokontroler ATMega8 ........................................ 8

Gambar 2.6. Hall Effect Swicth .............................................................................. 11

Gambar 2.7. Motor DC tipe RS 775 ....................................................................... 12

Gambar 2.8. Bentuk fisik dan konfigurasi pin shift register 74HC5959 ................ 12

Gambar 2.9. Hasil gambar lingkaran menggunakan kode program ....................... 13

Gambar 2.10. Teknik pengaturan lebar pulsa dengan PWM .................................... 14

Gambar 2.11. Rangkaian pengatur kecepatan motor dengan PWM ......................... 15

Gambar 3.1. Blok diagram sistem RGB propeller display ..................................... 17

Gambar 3.2. Antarmuka aplikasi pengubah file gambar ke kode hex .................... 18

Gambar 3.3. Proses pengambilan pixel warna pada gambar .................................. 19

Gambar 3.4. Diagram alir aplikasi pengubah file gambar ke kode hex ................. 20

Gambar 3.5. Rancangan alat tampak samping ........................................................ 21

Gambar 3.6. Rancangan alat tampak depan dan tampak belakang ......................... 21

Gambar 3.7. Diagram alir proses penampil gambar pada propeller ....................... 22

Gambar 4.1. Tampilan aplikasi pengubah file gambar menjadi data hex .............. 27

Gambar 4.2. Bentuk fisik perangkat penampil gambar pada propeller .................. 28

Gambar 4.3. Tampilan propeller tampak atas ........................................................ 28

Gambar 4.4. Tampilan propeller tampak bawah .................................................... 29

Gambar 4.5. Grafik hasil penilaian aplikasi pengubah file gambar menjadi

kode hex ............................................................................................. 31

Gambar 4.6. Grafik hasil penilaian perangkat penampil gambar pada propeller ... 32

Gambar 4.7. Grafik hasil penilaian keseluruhan RGB propeller display

menggunakan mikrokontroler ATMega8 .......................................... 33


xiv

Gambar 4.8. Hasil pengukuran kecepatan putar propeller display dengan

menggunakan tachometer .................................................................. 35

Gambar 4.9. Pengukuran keseimbangan propeller dengan menggunakan busur ... 40

Gambar 4.10. Potongan kode program HTML bagian masukan .............................. 42

Gambar 4.11. Potongan kode program HTML bagian keluaran .............................. 42

Gambar 4.12. Potongan kode program HTML bagian hasil konversi hex ............... 42

Gambar 4.13. Kode CSS pada aplikasi pengubah file gambar menjadi kode hex ... 43

Gambar 4.14. Kode Javascript untuk mengambil gambar dari file yang

tersimpan pada komputer ................................................................... 44

Gambar 4.15. Kode untuk mengkonversi gambar menjadi kode-kode hex ............. 45

Gambar 4.16. Kode untuk mengkonversi gambar menjadi tampilan propeller

display ................................................................................................ 45

Gambar 4.17. Diagram alir penyalaan RGB propeller display ................................. 46

Gambar 4.18. Kode program bahasa C untuk fungsi penampil ................................ 47

Gambar 4.19. Prosedur pengiriman data ke display ................................................. 48

Gambar 4.20. Kode program utama untuk menampilkan penyalaan berjalan led

RGB ................................................................................................... 48

Gambar 4.21. Kode program interupsi untuk menampilkan data gambar ke

display ................................................................................................ 49


xv

DAFTAR TABEL

Tabel 2.1. Interval Skala Likert ............................................................................... 16

Tabel 2.2. Pedoman Interprestasi Skor .................................................................... 16

Tabel 3.1. Kisi-kisi Instrumen Penelitian Aplikasi Pengubah File Gambar ke

Kode Hex ................................................................................................ 23

Tabel 3.2. Kisi-kisi Instrumen Penelitian Perangkat Penampil Gambar pada

Propeller ................................................................................................. 23

Tabel 3.3. Instrummen Penelitian RGB Propeller Display menggunakan

Mikrokontroler ATMega8 ...................................................................... 24

Tabel 4.1. Hasil Penilaian Aplikasi Pengubah File Gambar menjadi Kode Hex .... 30

Tabel 4.2. Hasil Penilaian Perangkat Penampil Gambar pada Propeller ................ 31

Tabel 4.3. Hasil Keseluruhan Penilaian RGB Propeller Display menggunakan

Mikrokontroler ATMega8 ...................................................................... 32

Tabel 4.4. Hasil Percobaan Pengaruh Kecepatan Putar Motor terhadap Bentuk

Tampilan ................................................................................................. 34

Tabel 4.5. Hasil Percobaan Tampilan Konversi Gambar pada Aplikasi dan

Tampilan Propeller Display ................................................................... 36

Tabel 4.6. Hasil Pengujian Waktu Proses Pengubahan File Gambar Pada

Aplikasi ................................................................................................... 41


1

BAB I

PENDAHULUAN

1.1. Latar Belakang Masalah

Perkembangan teknologi yang pesat mempunyai dampak yang positif terhadap

meningkatnya pemanfaatan display elektronik di masyarakat. Seiring dengan berjalannya

waktu, display elektronik telah dirancang dengan berbagai metode dan teknik dalam

fungsinya untuk menampilkan suatu informasi. Pada saat ini terdapat banyak jenis display

elektronik yang telah dibuat, seperti seven segment, dot matrix, LCD, dan propreller

display.

Propeller display adalah display elektronik yang prinsip kerjanya seperti running text

namun hanya terdiri dari 1 deret led yang akan menampilkan gambar ketika berputar

dengan kecepatan tinggi. Led yang disusun berderet tersebut dinyalakan setiap derajat

putar tertentu secara bergantian dan berulang pada putaran berikutnya. Teknik display

tersebut memanfaatkan kelemahan pada batas penglihatan manusia sehingga oleh mata

terlihat led seolah-olah tampil secara bersamaan.

Pada saat ini propeller display masih jarang dan asing bagi kebanyakan orang

terutama di Indonesia. Para engineer di bidang elektro masih belum banyak yang tertarik

dan melakukan pembuatan perangkat display tersebut. Di luar negeri, perancangan

propeller display telah berkembang semakin pesat dan semakin populer. Seiring

berjalannya waktu, kepopuleran propeller display dimungkinkan dapat masuk ke Indonesia

dan para engineer Teknik Elektro dituntut untuk mampu menguasai ilmunya.

Penggunaan propeller display tidak hanya dimanfaatkan sebagai perangkat display

yang statis, namun dapat diaplikasikan untuk berbagai keperluan lain. Pada saat ini,

propeller display telah diterapkan dalam berbagai bentuk dan fungsi antara lain

pemasangan propeller display pada roda sepeda dan mobil, baling-baling yang berfungsi

seperti jam analog, display untuk menampilkan gambar 2 dimensi maupun 3 dimensi,

globe digital, dan beberapa aplikasi lainnya. Karena dapat diterapkan pada banyak hal,

Propeller display masih sangat luas untuk dikembangkan. Meskipun begitu, para engineer

Teknik Elektro di Indonesia masih belum banyak yang mencoba untuk memanfaatkannya

sebagai peluang.


2

Berdasarkan permasalahan di atas, perlu upaya untuk merancang RGB propeller

display menggunakan mikrokontroler ATMega8. Pada penelitian ini, jumlah led yang

digunakan adalah sebanyak 32 buah yang akan dikendalikan oleh mikrokontroler

ATMega8 melalui IC shift register. Penelitian mengenai perancangan propeller display

khususnya dengan penggunaan led RGB belum pernah dilakukan di lingkungan

Universitas Sanata Dharma.

1.2. Tujuan dan Manfaat

Tujuan dari penelitian ini adalah untuk menghasilkan suatu alat display elektronik

berupa RGB propeller display menggunakan mikrokontroler ATMega8.

Manfaat dari penelitian ini adalah sebagai media display alternatif untuk

menampilkan gambar secara elektronik.

1.3. Batasan Masalah

Agar Tugas Akhir ini dapat mengarah pada tujuan dan untuk menghindari terlalu

kompleksnya permasalahan yang muncul, maka perlu adanya batasan-batasan masalah

yang sesuai dengan judul dari Tugas Akhir ini. Adapun batasan masalah adalah:

a. Menggunakan pengendali berupa mikrokontroler ATMega8.

b. Led RGB sebanyak 32 buah yang tersusun secara sejajar.

c. Sensor posisi berupa hall effect sensor.

d. Data gambar tersimpan pada EEPROM eksternal 512 Kbit.

e. Sumber daya dihubungkan secara slip ring.

f. Data dikirim menggunakan IC shift register.

g. Jumlah gambar yang ditampilkan maksimal 10 gambar.

h. Resolusi gambar 25 fps.

i. Jumlah warna minimal 8 jenis.

j. Step penyalaan adalah setiap 1,5 derajat putaran.

k. Kecepatan motor penggerak diatur dengan PWM.

l. Software aplikasi pengolah gambar awal berbentuk website.


3

1.4. Metodologi Penelitian

Berdasarkan pada tujuan yang ingin dicapai maka metode-metode yang digunakan

dalam penyusunan Tugas Akhir ini adalah:

a. Studi Pustaka

Studi pustaka dilakukan dengan mengumpulkan informasi dari berbagai

literatur berupa buku, skripsi, dan datasheet. Selain itu, informasi juga dikumpulkan

dari berbagai artikel di internet. Informasi yang dikumpulkan terkait dengan RGB

propeller display menggunakan mikrokontroler ATMega8.

b. Eksperimen

Eksperimen dilakukan dengan langsung melakukan praktek maupun pengujian

terhadap hasil pembuatan alat dalam pembuatan tugas akhir ini.

c. Perancangan software dan hardware

Perancangan ini bertujuan untuk mencari bentuk model yang dari sistem yang

akan dibuat dengan mempertimbangkan dari berbagai faktor-faktor permasalahan

dan kebutuhan yang telah ditentukan. Gambar 1.1 memperlihatkan blok model yang

akan dirancang.

Gambar 1.1. Blok diagram RGB propeller display menggunakan

mikrokontroler ATMega8

File Gambar

Aplikasi pengolah

gambar di komputer

EEPROM

Mikrokontroler

ATMega8 Sensor Posisi

Display

Pengatur PWM Motor DC


4

d. Pembuatan software dan hardware.

Tahap ini dilakukan dengan pembuatan perangkat lunak dan perangkat keras

yang terdiri dari beberapa bagian seperti blok diagram pada Gambar 1.1. Perangkat

lunak digunakan sebagai media untuk menghasilkan data heksadesimal dari file

sumber gambar yang akan ditampilkan. Data tersebut kemudian dikirim ke dalam

perangkat keras untuk ditampilkan menjadi tampilan berupa display elektronik.

e. Pengambilan Data dan Pengujian.

Teknik pengambilan data dilakukan dengan cara kuisioner berdasarkan hasil

pengamatan yang dilakukan oleh 10 responden. Pada tahap ini dilakukan pengujian

terhadap kualitas aplikasi, ketepatan tampilan, warna yang dihasilkan, kestabilan

tampilan, dan pencahayaan. Tampilan dari RGB propeller display diukur

menggunakan metode skala Likert dengan 5 kriteria, yaitu: sangat setuju, setuju,

cukup setuju, tidak setuju, sangat tidak setuju. Data yang diperoleh dari kuisioner

kemudian dikonversi menjadi nilai dengan skala Likert level 5.

f. Analisis dan Kesimpulan.

Analisis dan pengambilan kesimpulan dirumuskan berdasarkan data yang

diperoleh dari hasil pengujian. Analisa sistem mengacu pada kesesuaian sistem yang

dibuat dengan perancangan sistem yang diharapkan. Berdasarkan hasil analisa data

pengujian dapat disimpulkan tentang kinerja alat yang dibuat. Jika terdapat bagian

tertentu yang bekerja tidak sesuai dengan perancangan maka akan dijelaskan

penyebabnya berdasarkan teori dan data pengujian.


5

BAB II

DASAR TEORI

2.1. Propeller Display

Propeller display didasarkan pada prinsip persistence of vision (POV). Persistence of

vision mengacu pada sebuah ilusi optik yang membuat beberapa gambar yang berbeda

berbaur seolah-olah menjadi satu gambar dalam pikiran manusia. Setiap kali retina mata

terkena cahaya, terdapat kesan masih ada cahaya untuk sepersepuluh detik setelah sumber

cahaya hilang. Oleh karena itu, mata tidak dapat membedakan antara perubahan yang

terjadi lebih cepat daripada periode retensi tersebut. Fenomena serupa juga digunakan pada

gambar gerak atau film. Biasanya film menggunakan laju frame perdetik adalah 24 yang

mengarah ke gambar bebas kedip. Contoh dari persistence of vision dapat dilihat pada

Gambar 2.1. [1]

Gambar 2.1. Contoh prinsip persistence of vision [2]

Propeller adalah istilah yang berhubungan dengan sebuah objek yang berputar

seperti pada motor dan pompa. Propeller display adalah suatu deretan Light Emitting

Diode (LED) untuk menampilkan angka, karakter, dan simbol dengan cara berputar pada

kecepatan sudut tinggi. Beberapa pemanfaatan dari Propeller LED Display antara lain

digunakan sebagai media menampilkan pesan dengan cara yang khas, menampilkan angka

dalam jam analog dan digital, sistem pendingin diri, dan sebagainya. Salah satu contoh

tampilan propeller display terlihat seperti Gambar 2.2 di bawah ini. [3]


6

Gambar 2.2. Tampilan propeller display ketika berputar [3]

2.2. RGB LED

RGB LED adalah gabungan dari 3 buah LED yang berbeda warna terdiri dari merah,

hijau dan biru yang dikemas dalam single package. Pada RGB LED dimungkinkan untuk

membuat beberapa warna tergantung pada kombinasi pengaktifan LED di dalamnya.

Karena terdapat 3 warna, secara aktual dapat dihasilkan 7 warna kombinasi. Pada

kenyataannya RGB LED jauh lebih fleksibel dan dapat dibuat jenis warna yang lebih

beragam daripada 7 warna, tergantung pengaturan pada tingkat kecerahan atau

pencahayaan masing-masing LED di dalamnya. [4]

Mata manusia mempunyai tiga jenis interceptor cahaya (merah, hijau, dan biru).

Mata dan otak memproses sejumlah warna merah, hijau, dan biru kemudian mengubahnya

menjadi warna spektrum. Pencampuran ketiga warna tersebut seperti pada Gambar 2.3. [1]

Gambar 2.3. Kombinasi warna dasar pada led RGB [1]


7

RGB LED di pasaran terdapat banyak jenis, salah satu yang sering digunakan adalah

tipe SMD 5050 RGB dengan fitur sebagai berikut: [5]

a. Dikemas dalam bentuk SMD dan mempunyai 6 pin.

b. Dimensi 5 mm x 5 mm x 1,6 mm.

c. Reverse Voltage (Vr) = 5 V.

d. Forward Voltage (Vf) untuk Red = 1.80 – 2.40 V, Green = 2.80 – 3.60 V, dan Blue =

2.80 – 3.60 V.

e. Forward Current (If) = 20 mA.

f. Temperatur kerja sekitar -250C hingga +85

0C.

Adapun gambar dimensi dari SMD 5050 RGB adalah seperti terlihat pada Gambar

2.4 berikut ini.

Gambar 2.4. Gambar dan dimensi SMD 5050 RGB led [5]

2.3. Mikrokontroler AVR ATMega8

Mikrokontroler adalah suatu IC dengan kepadatan yang sangat tinggi, dimana semua

bagian yang diperlukan untuk suatu kontroler sudah dikemas dalam satu keping, yang

biasanya terdiri dari CPU (Central Processing Unit), RAM (Random Access Memory),

memori EEPROM/EPROM/PROM/ROM, I/O, serial dan paralel, timer, interrupt

controller, RTC(Real Time Clock) dan lain-lain. Mikrokontroler juga dapat dikatakan

sebagai piranti elektronik berupa IC (Integrated Circuit) yang memiliki kemampuan

manipulasi data (informasi) berdasarkan suatu urutan instruksi (program) yang dbuat oleh

programer. [6]

Mikrokontroler AVR memiliki arsitektur RISC 8 bit, dimana semua instruksin ya

dikemas dalam kode 16-bit (16-bit word) dan sebagian besar instruksi dieksekusi dalam 1

siklus clock, berbeda dengan instruksi CISC yang membutuhkan 12 siklus clock. [7] Secara


8

umum, AVR dapat dikelompokkan dalam 6 kelas. Pada dasarnya yang membedakan

masing-masing kelas adalah memori, peripheral dan fungsinya. Keenam kelas tersebut

adalah keluarga ATTiny, keluarga AT90Sxx, keluarga ATMega, keluarga AT90CAN,

keluarga AT90PWM dan AT86RFxx. Salah satu jenis mikrokontroler AVR keluarga

ATMega yang banyak digunakan adalah ATMega8 dengan konfigurasi pin seperti pada

Gambar 2.5 berikut ini.

Gambar 2.5. Konfigurasi pin mikrokontroler ATMega8 [8]

Penggunaan mikrokontroler A VR keluarga ATMega8 mempunyai beberapa

keunggulan sebagai berikut: [6]

a. ATMEL AVR RISC memiliki fasilitas dan kefungsian yang lengkap dengan harga

yang relatif murah.

b. Kecepatan maksimum eksekusi instruksi mikrokontroler AVR mencapai 16 MPS

(Milion Instruction per Second) serta membutuhkan 1 clock untuk 1 eksekusi

instruksi.

c. Konsumsi daya yang rendah jika dibandingkan dengan kecepatan eksekusi insruksi.

d. Ketersediaan kompiler C seperti CVAVR dan Win AVR yanng memudahkan

pengguna mengembangkan programnya dengan menggunakan bahasa C.


9

Mikrokontroler ATMega8 mempunyai fitur sebagai berikut: [9]

a. Saluran I/O sebanyak 23 buah, yaitu PORT B, PORT C, dan PORT D

b. Memori Flash sebesar 8 KBybe

c. Memori RAM sebesar 1024 Byte

d. Memori EEPROM sebesar 512 Byte

e. Timer/Counter 16 bit dan 8 bit

f. UART

g. PWM

h. ADC 6 kanal 10/8 bit

i. SPI

j. ISP

2.3.1. Timer/Counter

Timer/Counter adalah bagian mikrokontroler yang bersifat independen dari CPU,

atau dengan kata lain tidak terpengaruh oleh kerja dari prosesor. Fungsi utama dari

Timer/Counter adalah seperti dengan namanya, yaitu sebagai pewaktu (timer) atau

penghitung (counter) atau berfungsi untuk menciptakan periode waktu, menghitung waktu

dan menghitung kejadian. [6]

Pada dasarnya Timer/Counter merupakan seperangkat pencacah biner (binary

counter) yang terhubung langsung ke saluran data mikrokontroler, sehingga

mikrokontroler bisa membaca kondisi pencacah dan bila diperlukan mikrokontroler dapat

pula merubah kondisi pencacah tersebut. Pada Timer/Counter, saat sinyal detak (clock)

yang diberikan sudah melebihi kapasitas pencacah, maka pencacah akan memberikan

sinyal overflow atau limpahan. Sinyal ini merupakan hal yang penting dalam pemakaian

pencacah dan terjadinya limpahan pencacah ini dicatat dalam suatu register. [10]

Timer/Counter memiliki berbagai kegunaan yang dapat mempermudah pengerjaan

program yang berhubungan dengan pulsa. Sarana input ini mempermudah mikrokontroler

untuk mengukur lebar pulsa, membangkitkan pulsa dengan lebar pasti, dipakai dalam

pengendalian tegangan secara PWM (Pulse Width Modulaton) dan sangat diperlukan untuk

aplikasi remote control dengan infra merah. [6]


10

2.3.2. Interupsi

Interupsi sering disebut dengan penyelaan, digunakan sebagai sinyal darurat yang

dikirim ke prosesor, kemudian prosesor meminta segera menangguhkan operasi yang saat

itu dilakukan kemudian “melompat” ke lokasi lain untuk melakukan tugas darurat apapun.

Tugas darurat yang dimaksud adalah mengerjakan tugas rutin yang disebut ISR (interrupt

service rutin). Setelah menyelesaikan tugas ISR tersebut, program akan dikembalikan ke

prosesor sebelumnya untuk melakukan tugas kembali yang belum selesai. [6]

Jika pada saat yang sama terjadi lebih dari satu permintaan interupsi, prosesor akan

melayani permintaan interupsi tersebut menurut prioritas. Setelah selesai melayani

interupsi prioritas yang lebih tinggi, prosesor melayani permintaan interupsi berikutnya.

Selanjutnya akan kembali menjalankan program utama. Sebuah chip ATMega8 memiliki 2

interupsi eksternal yaitu INT0 dan INT1 yang dihubungkan dengan masing-masing kaki

PD2 dan PD3. [6]

2.4. EEPROM Eksternal Tipe AT25HP512

Electrically Erasable Programmable Read Only Memory atau sering dikenal dengan

sebutan EEPROM adalah salah satu dari tiga tipe memori pada AVR (dua lainnya adalah

SRAM dan flash). Sifat EEPROM, tetap dapat menyimpan data saat tidak ada suplai dan

juga dapat diubah saat program sedang berjalan. Oleh karena itu EEPROM sangat berguna

jika sistem yang dibangun memerlukan penyimpanan data meskipun suplay dimatikan.[10]

Pemrograman dan penghapusan data pada EEPROM dapat dilakukan dengan cepat

dibandingkan dengan memori ROM. Hal inilah yanng membuat alasan tentang pesatnya

perkembangan EEPROM. Kapasitas memori EEPROM biasanya hanya beberapa kilobyte

saja. Memori ini biasanya digunakan untuk menyimpan informasi atau data sistem,

sehingga ketika listrik terputus, data tidak akan hilang. [6]

EEPROM tipe 25HP512 menyediakan memori sebanyak 524.288 bit yang dapat

dihapus dan ditulis menggunakan program. Perangkat ini dioptimalkan untuk digunakan

dalam banyak aplikasi industri dan komersial dengan operasi berkecepatan tinggi, daya

rendah, dan tegangan rendah sangat penting. [11] Massa dari IC EEPROM AT25HP512

dalam kemasan DIP sekitar 0,9 gram.


11

2.5. Hall Effect Switch

Hall Effect Switch adalah komponen jenis transduser yang dapat mengubah informasi

magnetik menjadi sinyal listrik untuk pemrosesan rangkaian elektronik selanjutnya. Hall

Effect ini sering digunakan sebagai sensor untuk mendeteksi kedekatan (proximity),

mendeteksi posisi (positioning), mendeteksi kecepatan (speed), mendeteksi pergerakan

arah (directional) dan mendeteksi arus listrik (current sensing). Hall Effect Switch ini

merupakan perangkat atau komponen yang diaktifkan oleh medan magnet eksternal. [12]

Hall Effect dihasilkan oleh arus pada konduktor. Arus terdiri atas banyak beban kecil

yang membawa partikel-partikel (biasanya elektron) dan membawa gaya Lorentz pada

medan magnet. Beberapa beban ini berakhir di sisi – sisi konduktor. Hal ini hanya berlaku

pada konduktor besar dimana jarak antara dua sisi cukup besar. Salah satu yang paling

penting dari Hall Effect adalah perbedaan antara beban positif bergerak dalam satu arah

dan beban negatif bergerak pada kebalikannya. Hall Effect memberikan bukti nyata bahwa

arus listrik pada logam dibawa oleh elektron yang bergerak, bukan oleh proton. [13]

Bentuk dari sensor Hall Effect dalam kemasan IC 3 kaki dapat dilihat pada Gambar 2.6 di

bawah ini.

Gambar 2.6. Hall Effect Switch [14]

2.6. Motor DC tipe RS 775

Motor DC adalah suatu motor penggerak yang dikendalikan dengan arus searah

(DC). Motor jenis ini dapat dikelompokkan menjadi 5 macam, yaitu motor DC penguat

terpisah, motor DC seri, motor DC shunt, motor DC kompon panjang, dan motor DC

kompon pendek. Pengontrolan motor DC dapat dilakukan dengan menggunakan resistor

variable, autotransformator, transistor, pulse width modulation (PWM), dan pulse

frequency modulation. [15]


12

Motor DC tipe RS 775 mempunyai kecepatan putar 3500 RPM pada tegangan 12 V

dengan arus 0,14 A, torsi 600 gr-cm. Kinerja motor RS 775 cukup stabil dan memiliki torsi

yang besar. Motor ini telah banyak diterapkan di peralatan mesin CNC , Elektronik

Pemantau tekanan darah, module arduino, monitor dan instrumen peralatan medis lainnya,

kantung udara pijat mata, sabuk pijat , minyak esensial , mesin dupa, dan lain nya. Gambar

fisik dari motor DC tipe RS 775 terlihat seperti pada Gambar 2.7. [16]

Gambar 2.7. Motor DC tipe RS 775 [16]

2.7. Shift Register 74HC595

Sebuah Shift Register 74HC595 dapat digunakan untuk mengubah data 8 bit serial

pada masukan menjadi keluaran paralel. Data masukan 8 bit digeser sebanyak 8 kali clock

hingga menghasilkan keluaran data penuh. Beberapa shift register dapat dirangkai menjadi

satu untuk menghasilkan data keluaran paralel banyak. Masukan pada shift register adalah:

data serial, serial clock, dan lacth clock. Keuntungan penggunaan shift register adalah

hanya diperlukan 3 pin masukan untuk menghasilkan banyak keluaran, namun mengurangi

kinerja sistem yang dirancang. [17] Bentuk dan konfigurasi pin Shift register 74HC959

dalam kemasan SMD dapat dilihat pada Gambar 2.8 di bawah ini.

Gambar 2.8. Bentuk fisik dan konfigurasi pin shift register 74HC595 [18]


13

2.8. Menggambar Lingkaran dengan Kode Program

Menggambar sebuah lingkaran dengan menggunakan kode program secara pixel ke

pixel tidaklah sulit jika menggunakan fungsi yaitu dengan teknik looping. Cara yang dapat

dilakukan untuk menghitung nilai koordinat masing-masing pixel dapat menggunakan

rumus persamaan (2.1) dan persamaan (2.2). [19]

(2.1)

(2.2)

Keterangan:

x = posisi horisontal dari batas kiri bidang ( pixel)

y = posisi vertikal dari batas atas bidang (pixel)

x0 = posisi horisontal titik pusat lingkaran dari batas kiri bidang (pixel)

x0 = posisi horisontal titik pusat lingkaran dari batas kiri bidang (pixel)

r = jari-jari lingkaran (pixel)

angle = sudut (derajat)

Contoh hasil lingkaran dengan kode program dapat dilihat pada Gambar 2.9.

Gambar 2.9. Hasil gambar lingkaran menggunakan kode program [19]


14

2.9. Rangkaian Pengatur PWM

Pulse Width Modulation (PWM) adalah metode untuk menghasilkan tegangan

variabel dengan menyalakan dan mematikan daya yang masuk ke perangkat elektronik

dengan cepat. PWM dapat digunakan untuk mengatur kecepatan motor, yaitu dengan

mengatur lebar pulsa (waktu ON) dari tegangan sumbernya (tegangan DC). Perbandingan

antara waktu ON dan waktu OFF disebut duty cycle (siklus kerja). Semakin besar siklus

kerja maka akan semakin besar keluaran yang dihasilkan sehingga kecepatan motor akan

semakin naik. [20] Gambar pengaturan pulsa menggunnakan PWM dapat dilihat pada

Gambar 2.10.

Gambar 2.10. Teknik pengaturan lebar pulsa dengan PWM

Pengaturan kecepatan motor DC dengan teknik PWM akan memberikan kinerja yang

jauh lebih baik daripada pengontrol kecepatan motor berdasarkan tegangan

variabel. Rangkaian sederhana untuk mengatur kecepatan motor DC dapat dibuat dengan

menggunakan IC NE555. Gambar rangkaian driver motor DC PWM sederhana dapat

dilihat dalam Gambar 2.11 berikut ini. [2]


15

Gambar 2.11. Rangkaian pengatur kecepatan motor dengan PWM [2]

2.10. Kualitas Perangkat Lunak

Pada rekayasa perangkat lunak, kualitas perangkat lunak mencakup di dalamnya

derajat yang membuat perancangan memenuhi fungsi-fungsi dan fitur-fitur yang

dispesifikasikan sehingga sesuai dengan sasaran-sasaran kebutuhan dan kinerja. Pada

pengertian umum, kualitas perangkat lunak memberi tekanan lebih pada titik penting,

yaitu: (1) proses perangkat lunak harus efektif, (2) produk yang bermanfaat, dan (3)

memberikan penambahan nilai bagi produsen maupun pengguna.

Standar ISO 9216 mengidentifikasi atribut-atribut kualitas kunci untuk suatu

perangkat lunak. Berdasarkan standar ISO 9216, atribut kualitas kunci tersebut adalah: [21]

1. Fungsionalitas, merupakan derajat kinerja perangkat lunak dalam memenuhi

kebutuhan yang telah ditetapkan sebelumnya berupa kecocokan, akurasi,

interoperabilitas, kesesuaian, dan keamanan.

2. Keandalan, merupakan jumlah waktu penggunaan perangkat lunak yang tersedia dan

memiliki subatribut-subatribut: kematangan, toleransi kesalahan, dan kemampuan

untuk melakukan pemulihan.

3. Kemudahan penggunaan, yaitu derajat tentang kemudahan perangkat lunak untuk

dipahami, dipelajari, dan dioperasikan.

4. Efisiensi, yaitu derajat penggunaan sumber daya sistem secara optimal.

5. Kemudahan pemeliharaan, yaitu kemampuan untuk dilakukan analisis, perubahan,

dan pengujian.

6. Portabilitas, adalah kemudahan perangkat lunak untuk dipindahkan dari suatu

lingkungan operasional ke lingkungan operasional lain.


16

2.11. Skala Likert

Skala Likert adalah sebuah tipe skala psikometri yang menggunakan angket dan

menggunakan skala yang lebih luas dalam penelitian survei. Skala Likert umumnya

digunakan untuk mengukur sikap atau respons seseorang terhadap suatu objek. Skala

Likert berwujud kumpulan pertanyaan-pertanyaan sikap yang ditulis, disusun dan

dianalisis sedemikian rupa sehingga respons seseorang terhadap pertanyaan tersebut dapat

diberikan angka (skor) dan kemudian dapat diinterpretasikan. [22]

Skala Likert tidak terdiri dari hanya satu stimulus atau satu pernyataan saja

melainkan selalu berisi banyak item (multiple item measure). Bentuk tes pada skala Likert

adalah bentuk pernyataan. Responden mengindikasi tingkat keyakinan mereka dengan

pernyataan atau evaluasi objektif / subjektif. Biasanya dalam skala Likert terbagi dalam

lima kategori yang digunakan seperti pada Tabel 2.1 berikut ini. [22]

Tabel 2.1. Interval Skala Likert

Alternatif Jawaban Nilai

Sangat Tidak Setuju 1

Tidak Setuju 2

Ragu-ragu 3

Setuju 4

Sangat Setuju 5

Skor rata-rata dibandingkan dengan tabel kriteria interprestasi skor yang bisa dilihat

pada Tabel 2.2.

Tabel 2.2. Pedoman Interprestasi Skor

Rerata jawaban Klasifikasi Penilaian

> 4,2 – 5,0 Sangat Layak

> 3,6 – 4,2 Layak

> 2,6 – 3,4 Cukup Layak

> 1,8 – 2,6 Tidak Layak

1,0 – 1,8 Sangat Tidak Layak

Hasil dari skor yang telah didapatkan kemudian dihitung persentase kelayakan

menggunakan persamaan (2.3) berikut ini:

(2.3)


17

BAB III

RANCANGAN PENELITIAN

3.1. Perancangan Sistem Secara Umum

Perancangan alat ini terdiri dari beberapa bagian utama, yaitu software aplikasi yang

dijalankan pada komputer untuk mengolah file gambar masukan, penyimpanan data pada

EEPROM, dan kontroler untuk menampilkan data ke led RGB. Blok diagram sistem dari

rancangann alat yang dibuat terlihat pada Gambar 3.1 di bawah ini.

Gambar 3.1. Blok diagram sistem RGB propeller display

Pada bagian software aplikasi terjadi beberapa proses untuk mengolah file gambar.

Proses pertama adalah mengambil file gambar (jpg, png, gif, dan sebagainya) dari folder

memori penyimpanan di dalam komputer. Proses kedua adalah melakukan scan gambar

tersebut untuk mengetahui kode warna tiap pixel gambar. Proses selanjutnya adalah

pengambilan pixel warna gambar yang akan diolah menjadi deretan kode hexadesimal

sesuai posisi dan sudut tertentu. Selain itu data pixel kembali disusun sedemikian rupa

untuk menampilkan bentuk gambar jika dinyalakan dengan propeller display.

Pada bagian perangkat penampil propeller display, terdiri dari EEPROM tipe

25HP512, mikrokontroler ATMega8, sensor posisi berupa hall effect sensor, shift register

jenis 74HC595, RGB led smd tipe 5050, dan beberapa komponen pendukung lainnya. Data

gambar dari software aplikasi dimasukkan ke dalam EEPROM kemudian dibaca oleh

File Gambar

Program

File Hex

EEPROM

Mikrokontroler

ATMega8 Hall Effect

Shift Register Led RGB

Pengatur PWM Motor DC Aplikasi pada Komputer


18

mikrokontroler ATMega8 untuk diproses. Hasil pemrosesan pada mikrokontroler

ATMega8 kemudian akan menyalakan RGB led melalui shift register berdasarkan posisi

sudut putar alat yang dibaca oleh sensor posisi. Sensor posisi memberi sinyal interupsi ke

mikrokontroler untuk melakukan proses kembali ke awal penyalaan dan menghitung nilai

error penyalaan pada putaran sebelumnya untuk dikoreksi. Kecepatan motor stabil 1440

RPM diatur menggunakan PWM.

3.2. Perancangan Aplikasi Pengubah File Gambar ke kode Hex

Aplikasi pengubah file gambar ke kode hex dijalankan pada perangkat komputer

menggunakan browser seperti Mozilla Firefox, Google Crome, Opera, dan lain

sebagainya. Aplikasi dirancang untuk mengolah gambar masukan menjadi kumpulan data

yang akan dimasukkan ke dalam IC EEPROM. Masukan adalah berupa file gambar seperti

.jpg, .png, .gif, dan ekstensi gambar lainnya. Hasil keluaran adalah berupa data-data

heksadesimal yang mewakili kode pixel gambar masukan. Selain itu, pada tampilan

aplikasi juga menampilkan bentuk gambar keluaran yang merupakan hasil dari penyusunan

kembali pixel yang telah diambil.

Aplikasi dirancang dalam bentuk website. Jenis bahasa yang digunakan adalah

HTML, CSS, Javascript, dan JQuery. HTML berfungsi untuk membentuk elemen-elemen

utama dalam perangkat lunak, sedangkan CSS sebagai pengatur tata letak dan tampilannya.

Proses pengolahan data input menjadi data output menggunakan Javascript dan JQuery.

Tampilan antar muka dari perangkat lunak adalah seperti pada Gambar 3.2.

Gambar 3.2. Antarmuka aplikasi pengubah file gambar ke kode hex

Gambar berikutnya

Waktu tunda


19

Proses pengambilan pixel warna pada gambar asli dilakukan dengan menentukan

posisi kursor terlebih dahulu. Kursor awal dimulai dari atas dengan koordinat x dan y

seperti pada Gambar 3.3 di bawah. Pada posisi tersebut nilai sudut a ditetapkan sebagai 00.

Data warna RGB dapat diambil dengan kode javascript. Koordinat x dan y selanjutnya

digeser ke bawah mendekat ke titik pusat hingga 32 kali step, kemudian naik lagi ke ujung

atas dengan pergeseran sudut sebesar 1,50 dari posisi sebelumnya. Proses tersebut diulang

hingga mencapai satu putaran penuh atau sebanyak 240 kali pergeseran sudut.

Gambar 3.3. Proses pengambilan pixel warna pada gambar

Rumus untuk mencari koordinat x dan y mengacu pada persamaan (2.1) dan (2.2)

adalah sebagai berikut dengan nilai adalah besar sudut pergeseran dan adalah nomor urut

LED dimulai dari ujung (1 hingga 32).

Diagram alir dari proses kerja aplikasi pengubah file gambar ke kode hex dapat

dilihat pada Gambar 3.4 di bawah ini.


20

Gambar 3.4. Diagram alir aplikasi pengubah file gambar ke kode hex

Start

inisialisasi

i, j, x, y, data = 0

Letakkan gambar pada canvas 1

Periksa ukuran gambar

Apakah panjang <= 640 px

atau lebar <= 640 px?

Resize gambar hingga panjang atau lebar = 640px

𝑥 𝑆𝑖𝑛 𝑖 ,5 𝑗

𝑦 𝐶𝑜𝑠 𝑖 ,5 𝑗

Data = getRGB (x,y)

j = j +1

Tulis data heksadesimalnya

Tampilkan pixel warna di (x,y)

pada canvas 2

j<= 32?

j = 0

Y

i <= 240?

Stop

i = i + 1

A

A

Y

Y

Gambar

Berikutnya

Baca Waktu tunda

Y


21

3.3. Perancangan Perangkat Penampil Gambar pada Propeller

Pada proses penampilan gambar, alat akan diputar menggunakan sebuah motor DC

dengan kecepatan sebesar 24 putaran per detik. Sebuah magnet permanen diletakkan pada

bagian tertentu di atas motor DC yang berfungsi untuk memberikan kode posisi kepada

sensor yang ikut berputar. Sumber tegangan dialirkan dengan teknik slip ring untuk VCC

dan ground. Gambar rancangan alat tampak samping dapat dilihat pada Gambar 3.5.

Gambar 3.5. Rancangan alat tampak samping

Pada bagian hardware yang berputar terdiri dari: sistem minimum mikrokontroler

ATMega8, EEPROM, 12 buah shift register, 32 buah led RGB, 4 buah array resistor 220

Ohm, 64 buah smd resistor 150 Ohm, dan papan PCB. Adapun gambar rancangan alat

tampak depan dan belakang seperti pada Gambar 3.6.

Gambar 3.6. (a) Rancangan alat tampak depan dan (b) tampak belakang


22

Flowchart perangkat penampil gambar pada propeller ditunjukkan pada Gambar 3.7.

Gambar 3.7. Diagram alir proses penampil gambar pada propeller

STAR

T

Inisialisasi PORT ATMega8

x,next,n,n2,m = 0

Baca data status tampilan

n = Jumlah gambar

t = waktu nyala per gambar

n2 = n - 1

Masukkan data ke buffer

Apakah next =1

m = n – n2

Apakah m = n

STOP

Kirim data penyalaan 12 byte ke-x

dari buffer ke shift register

Aktifkan output shift register

tunda

Apakah x > 240

Matikan/reset shift register

tunda

x = x +1

n2 = n2 – 1

next =1

Apakah t = 0

t = t - 1

next = 0

Baca data gambar pertama

Baca data gambar ke-m

Apakah terjadi

interupsi

Y

Y

Y

Y

Y


23

3.4. Instrumen Penelitian

Instrumen yang digunakan dalam penelitian ini yaitu angket (questionnaire) dengan

jumlah responden adalah sebanyak 10 orang. Instrumen ini merupakan instrumen validasi

konstrak berisi kesesuaian kinerja perangkat terhadap perancangan yang telah dilakukan.

Kisi-kisi instrumen disusun berdasarkan kriteria-kriteria kualitas perangkat lunak yang

baik berdasarkan ISO 9216 dan juga berdasarkan kebutuhan pengambilan data. Kisi-kisi

instrumen tercantum dalam Tabel 3.1 dan Tabel 3.2 berikut ini.

Tabel 3.1. Kisi-kisi Instrumen Penelitian Aplikasi Pengubah File Gambar ke Kode Hex

No Indikator Sub Indikator No. Butir

1 Aspek

Fungsionalitas

Aplikasi berfungsi dengan baik 1

Tombol bekerja dengan baik 2

2 Aspek Keandalan Kesesuaian input dan hasil output 3

Tidak adanya eror 4

3 Aspek Kemudahan Aplikasi mudah digunakan 5

Aplikasi mudah dipelajari/dipahami 6

4 Aspek Efisiensi Kecepatan akses 7

Kesesuaian tata letak tampilan 8

5 Aspek Portabilitas Dapat dibuka di berbagai browser 9

Mudah dipindahkan 10

Tabel 3.2. Kisi-kisi Instrumen Penelitian Perangkat Penampil Gambar pada Propeller

No Indikator Sub Indikator No. Butir

1 Aspek Ketepatan

Tampilan

Tampilan display sesuai gambar masukan 11

Bentuk gambar ditampilkan utuh/sempurna 12

2 Aspek Warna Warna terlihat jelas 13

Warna terlihat stabil 14

3 Aspek Kestabilan Display bekerja stabil/ tidak goyang 15

Tampilan terlihat tidak berkedip 16

4 Aspek Pencahayaan

Display

Cahaya yang dihasilkan terlihat jelas/tidak

redup

17

Tampilan terlihat kontras/ tidak blur 18

Berdasarkan kisi-kisi tersebut di atas, instrumen penelitian yang digunakan disusun

dengan menggunakan metode skala Likert. Kuisioner terdiri dari 18 butir pernyataan

seperti terlihat pada Tabel 3.3 berikut ini.


24

Tabel 3.3. Instrumen Penelitian RGB Propeller Display menggunakan Mikrokontroler

ATMega8

No Pernyataan Penilaian

STS TS CS S SS

1 Aplikasi berfungsi dengan baik

2 Tombol pada aplikasi bekerja dengan baik

3 Gambar masukan sesuai dengan hasil output pada

aplikasi

4 Tidak ada eror pada aplikasi

5 Aplikasi mudah digunakan

6 Aplikasi mudah dipelajari/dipahami

7 Aplikasi dapat dijalankan dengan cepat

8 Tata letak tampilan aplikasi sudah benar

9 Aplikasi dapat dibuka di berbagai browser

10 Aplikasi mudah dipindahkan

11 Tampilan display sesuai dengan gambar masukan

12 Bentuk gambar yang ditampilkan utuh/sempurna

13 Warna terlihat jelas

14 Warna terlihat stabil

15 Display bekerja stabil/ tidak goyang

16 Tampilan terlihat tidak berkedip

17 Cahaya yang dihasilkan terlihat jelas/tidak redup

18 Tampilan terlihat kontras/ tidak blur


25

BAB IV

HASIL DAN PEMBAHASAN

Bab ini berisi mengenai hasil pengamatan dari RGB propeller display menggunakan

mikrokontroler ATMega8. Hasil pengamatan berupa pengujian kualitas tampilan RGB

propeller display menggunakan kuisioner, pengujian putaran propeller display, pengujian

tampilan dan warna, pengujian keseimbangan alat, dan pengujian waktu proses konversi

gambar.

4.1. Perubahan Perancangan

Pada pembuatan alat terdapat perubahan pada proses penyimpanan data hasil

konversi dan pengatur kecepatan motor.

4.1.1. Perubahan Proses Penyimpanan Data Hasil Konversi

Pada perancangan BAB III data gambar di simpan ke dalam memori EEPROM

eksternal, sedangkan pada implementasi data hasil konversi gambar disimpan langsung ke

memori flash mikrokontroler. Berdasarkan percobaan awal yang dilakukan, proses

penyalaan gambar secara langsung oleh mikrokontroler tanpa EEPROM untuk membentuk

1 gambar penuh dibutuhkan kecepatan putar 714 rpm atau hampir 12 frame per detik

sedangkan kecepatan minimal agar propeller display dapat terlihat utuh adalah 10 frame

per detik. Kecepatan tersebut masih jauh dari perancangan untuk menampilkan gambar

sebanyak 25 frame per detik yaitu dibutuhkan kecepatan minimal sebesar 1500 rpm. Hasil

tersebut menunjukkan bahwa proses pengiriman data secara langsung dari mikrokontroler

ke led menggunakan shift register masih belum cukup cepat dilakukan.

EEPROM eksternal pada perancangan merupakan tipe serial yang mengirim data bit

per bit sehingga penggunaannya akan menambah waktu proses penyalaan gambar dan

putaran motor yang dibutuhkan untuk menampilkan 1 gambar penuh semakin pelan.

Semakin pelan putaran motor, maka gambar yang dihasilkan semakin tidak jelas. Oleh

karena itu, untuk menghasilkan gambar yang terbaik maka data hasil konversi disimpan

langsung ke flash mikrokontroler.


26

Pada perancangan jumlah gambar yang ditampilkan adalah 10 gambar setiap

beroperasi. Karena keterbatasan memori flash maka hanya dapat ditampilkan 1 gambar.

4.1.2. Perubahan Pengatur Kecepatan Motor

Pada perancangan kecepatan motor diatur menggunakan rangkaian PWM, sedangkan

pada implementasi motor DC dihubungkan langsung dengan sumber tegangan yang tetap.

Perubahan tersebut dilakukan karena keluaran yang dihasilkan rangkaian PWM tidak

cukup kuat untuk menggerakkan motor DC yang dipakai. Pada saat percobaan untuk

menggerakkan motor DC yang dipakai, transistor yang terpasang bersuhu tinggi namun

motor tidak bergerak sama sekali. Nilai arus keluaran pada rangkaian PWM adalah sebesar

600 mA namun tegangan yang mengalir pada motor 0 Volt. Oleh karena itu, penggunaan

rangkaian PWM sebagai pengatur kecepatan motor tidak dapat dilakukan. Pada

implementasi digunakan sumber tetap dengan tegangan 12 Volt dan arus maksimal 1

Ampere.

4.2. Implementasi Pembuatan Alat

Pembuatan alat terdiri dari 2 bagian utama yaitu aplikasi pengubah file gambar

menjadi data heksadesimal dan perangkat untuk menampilkan gambar pada propeller.

4.1.1. Implementasi aplikasi pengubah file gambar menjadi data hex

Aplikasi pengubah file gambar menjadi data hex dibuat dalam bentuk website dengan

format HTML dan file pendukung yaitu CSS, Javascript, dan JQuery. HTML merupakan

elemen utama pembentuk aplikasi. CSS digunakan untuk mengatur tampilan seperti layout

dan warna. File Javascript dan JQuery berfungsi untuk melakukan proses pengambilan

gambar, konversi gambar dan menyalin kode hasil konversi. Gambar 4.1 menunjukkan

tampilan awal aplikasi pengubah file gambar menjadi data hex menggunakan browser.


27

Gambar 4.1. Tampilan aplikasi pengubah file gambar menjadi data hex

Gambar yang akan ditampilkan pada propeller display dapat diambil dari file yang

tersimpan di komputer dengan menekan tombol “Browse”. File gambar dapat berbentuk

jpg, png, dan gif. Tombol “Lihat Gambar” akan menampilkan gambar asli yang dipilih

pada kotak biru sebelah kiri dengan menyesuaikan ukuran gambar. Gambar yang

berukuran kecil akan diperbesar dan gambar berukuran besar akan dikecilkan sesuai

ukuran kotak. Selanjutnya untuk mengkonversi gambar menjadi bentuk kode-kode

heksadesimal dilakukan dengan tombol “Kode Hex”. Gambar juga dikonversi ke bentuk

tampilan propeller display menggunakan tombol “Tampilkan”. Hasil dari tampilan tersebut

akan dapat dilihat pada lingkaran sebelah kanan sedangkan kode heksadesimal di kotk

putih bagian bawah. Hasil kode heksadesimal kemudian disalin ke program mikrokontroler

menggunakan tombol “Salin Kode”. Proses konversi gambar tersebut membutuhkan waktu

beberapa detik.

4.1.2. Bentuk fisik perangkat penampil gambar pada propeller

Perangkat untuk menampilkan gambar pada propeller terdiri dari bagian penopang,

motor DC, propeller, dan sumber tegangan. Gambar 4.2 memperlihatkan bentuk fisik

perangkat penampil gambar pada propeller.


28

Gambar 4.2. Bentuk fisik perangkat penampil gambar pada propeller

Pada perangkat penampil terdiri dari bagian propeller, magnet permanen, motor DC,

sumber tegangan DC 12 Volt dan 5 Volt, penyangga, dan landasan. Motor DC berfungsi

untuk memutar propeller display dengan kecepatan tertentu hingga membentuk sebuah

gambar penuh sesuai dengan gambar masukan. Magnet permanen digunakan untuk

menentukan posisi awal penyalaan sehingga tampilan gambar dapat konsisten pada

posisinya. Penyangga terbuat dari aluminium dan landasan berupa kayu. Sumber tegangan

DC untuk mikrokontroler berasal dari luar dengan cara slip ring sehingga tidak diperlukan

baterai pada propeller saat beroperasi.

Pada bagian propeller terdiri dari berbagai komponen penyusun yang dirangkai

dalam sebuah PCB double layer. Gambar 4.3 merupakan tampilan dari propeller display

tampak atas dan Gambar 4.4 merupakan tampilan propeller display tampak bawah.

Gambar 4.3. Tampilan propeller tampak atas


29

Gambar 4.4. Tampilan propeller tampak bawah

Pada Gambar 4.3 dan Gambar 4.4 di atas terdapat beberapa bagian pada perangkat

penampil gambar pada propeller yaitu mikrokontroler ATMega8, potensiometer, led RGB,

resistor smd, shift register, resistor pack, sensor magnet dan pulley. Mikrokontroler

ATMega8 merupakan pengontrol keseluruhan dari propeller display serta menjadi

penyimpan data hasil konversi gambar pada aplikasi. Potensiometer merupakan pemberat

untuk menyeimbangkan propeller display. Led RGB berjumlah 32 buah dengan susunan

secara sejajar mulai dari pusat hingga ujung. Masing-masing led RGB dihubungkan

dengan tiga buah resistor limiter yaitu dua resistor 150 ohm untuk warna biru dan hijau

serta sebuah resistor 220 ohm untuk warna merah. Pengiriman data penyalaan ke led

dilakukan dengan bantuan shift register secara serial yang terdiri dari dua belas buah.

Sensor magnet digunakan untuk mengaktifkan interupsi pada mikrokontroler saat posisi

berada dekat magnet permanen.

4.1.3. Keterangan penggunaan alat

RGB propeller display ini dapat menampilkan gambar dari file gambar yang

tersimpan di komputer. Pada aplikasi, pengguna dapat menekan tombol “browse” untuk

memilih file gambar yang akan ditampilkan. Gambar yang sudah dipilih akan tampil

setelah tombol “lihat gambar” ditekan. Tombol “tampilkan” akan memproses gambar awal

menjadi gambar tampilan pada propeller display. Proses selanjutnya adalah mengkonversi

bentuk gambar menjadi kode-kode yang akan dibaca oleh mikrokontroler dengan cara

menekan tombol “kode hex”.

Kumpulan kode hasil konversi kemudian dimasukkan ke CVAVR yang telah

dirancang untuk mengolah kode-kode tersebut kemudian di-compile. Mikrokontroler

ATMega8 diisi dengan hasil compile dengan menggunakan downloader. Gambar akan

ditampilkan pada propeller display ketika diputar dengan kecepatan tertentu menggunakan

motor DC.


30

4.3. Pengujian Kualitas Alat berdasarkan Kuisioner

Pengujian dilakukan untuk mengetahui kualitas alat berdasarkan pengamatan 10

orang responden menggunakan instrumen penelitian berupa kuisioner. Pengambilan data

dilakukan pada hari Senin tanggal 17 September 2018 di lingkungan Kampus 3 Universitas

Sanata Dharma. Pernyataan-pernyataan yang terdapat pada kuisioner mewakili beberapa

aspek penilaian tentang kelayakan produk.

Pada kuisioner terdiri dari 18 pernyataan yang terbagi menjadi 2 target penilaian

yaitu 10 pernyataan untuk menilai aplikasi pengubah gambar menjadi kode hex dan 8

pernyataan untuk menilai perangkat penampil gambar pada propeller. Penilaian Aplikasi

pengubah file gambar menjadi kode hex berdasarkan aspek fungsionalitas, aspek

keandalan, aspek kemudahan, aspek efisiensi, dan aspek portabilitas. Penilaian perangkat

penampil gambar pada propeller meliputi aspek ketepatan tampilan, aspek warna, aspek

kestabilan, dan aspek pencahayaan display.

Hasil penilaian dari aplikasi pengubah file gambar menjadi kode hex dapat dilihat

pada Tabel 4.1 berikut ini.

Tabel 4.1. Hasil Penilaian Aplikasi Pengubah File Gambar menjadi Kode Hex

No

. Indikator

No.

Butir

Penilaian Responden ke- Rata-rata per-

1 2 3 4 5 6 7 8 9 10 Nomor Indikator

1 Aspek

Fungsionalitas

1 4 4 4 5 4 5 5 4 4 5 4.4 4.5

2 4 4 5 4 5 5 5 4 5 5 4.6

2 Aspek

Keandalan

3 4 3 4 5 4 4 4 3 5 5 4.1 4.2

4 4 4 4 4 5 5 4 3 5 5 4.3

3 Aspek

Kemudahan

5 3 4 4 4 5 4 3 4 4 5 4 4.05

6 3 4 4 4 5 4 4 4 5 4 4.1

4 Aspek Efisiensi 7 2 3 4 5 5 5 4 4 4 4 4

4.1 8 4 3 4 4 5 5 4 3 5 5 4.2

5 Aspek

Portabilitas

9 4 3 4 3 5 4 4 4 5 5 4.1 3.9

10 4 3 5 3 5 2 5 3 2 5 3.7

Rata-Rata Keseluruhan 4.15

Berdasarkan data hasil penilaian pada Tabel 4.1 di atas maka dapat diperjelas dengan

grafik seperti pada Gambar 4.5 di bawah ini.


31

Gambar 4.5. Grafik hasil penilaian aplikasi pengubah file gambar menjadi kode hex

Berdasarkan hasil data yang diperoleh sesuai grafik pada Gambar 4.5 di atas dapat

diketahui bahwa aspek fungsionalitas mempunyai skor 4,5 termasuk dalam kategori sangat

baik, aspek keandalan mempunyai skor 4,2 termasuk kategori baik, aspek kemudahan

mempunyai skor 4,05 termasuk kategori baik, aspek efisiensi mempunyai skor 4,1

termasuk kategori baik, dan aspek portabilitas mempunyai skor 3,9 termasuk kategori

baik. Secara keseluruhan aplikasi pengubah file gambar menjadi kode hex mempunyai

skor rata-rata sebesar 4,15 termasuk kategori baik.

Hasil penilaian dari perangkat penampil gambar pada propeller dapat dilihat pada

Tabel 4.2 berikut ini.

Tabel 4.2. Hasil Penilaian Perangkat Penampil Gambar pada Propeller

No. Indikator No.

Butir

Penilaian Responden ke- Rata-rata per-

1 2 3 4 5 6 7 8 9 10 Nomor Indikator

1 Aspek Ketepatan

Tampilan 11 5 5 5 5 5 5 4 4 5 5 4.8

4.4 12 4 4 4 5 5 4 4 3 3 4 4

2 Aspek Warna 13 3 4 5 5 5 5 3 3 5 5 4.3

4.35 14 4 4 4 5 4 5 5 3 5 5 4.4

3 Aspek

Kestabilan 15 3 4 4 4 4 4 4 3 4 5 3.9

3.75 16 4 4 4 4 5 3 4 3 1 4 3.6

4

Aspek

Pencahayaan

Display

17 3 4 4 5 5 5 4 3 4 5 4.2 4.25

18 2 4 4 5 5 5 5 3 5 5 4.3

Rata-Rata Keseluruhan 4.19

4.5

4.2

4.05 4.1

3.9

4.15

3.63.73.83.9

44.14.24.34.44.54.6

Sko

r

Hasil Penilaian Aplikasi


32

Berdasarkan data hasil penilaian pada Tabel 4.2 di atas maka dapat diperjelas dengan

grafik seperti pada Gambar 4.6 di bawah ini.

Gambar 4.6. Grafik hasil penilaian perangkat penampil gambar pada propeller

Berdasarkan hasil data yang diperoleh sesuai grafik pada Gambar 4.6 di atas dapat

diketahui bahwa aspek ketepatan tampilan mempunyai skor 4,4 termasuk dalam kategori

sangat baik, aspek warna mempunyai skor 4,3 termasuk kategori sangat baik, aspek

kestabilan mempunyai skor 3,75 termasuk kategori baik, dan aspek pencahayaan display

mempunyai skor 4,25 termasuk kategori sangat baik. Secara keseluruhan penilaian

perangkat penampil gambar pada propeller mempunyai skor rata-rata sebesar 4,19

termasuk kategori baik.

Secara keseluruhan, hasil pengujian pada RGB propeller display menggunakan

mikrokontroler ATMega8 diperoleh nilai rata-rata akhir seperti Tabel 4.3 berikut ini.

Tabel 4.3. Hasil Keseluruhan Penilaian RGB Propeller Display menggunakan

Mikrokontroler ATMega8

No. Nama Skor

1 Aplikasi pengubah file gambar menjadi kode hex 4.15

2 Perangkat penampil gambar pada propeller 4.19

Rata-rata Keseluruhan 4.17

4.4 4.35

3.75

4.25 4.19

3.4

3.6

3.8

4

4.2

4.4

4.6

Sko

r

Hasil Penilaian Propeller Display


33

Berdasarkan data hasil penilaian keseluruhan pada Tabel 4.3 di atas maka dapat

diperjelas dengan grafik seperti pada Gambar 4.7 di bawah ini.

Gambar 4.7. Grafik hasil penilaian keseluruhan RGB propeller display menggunakan

mikrokontroler ATMega8

Berdasarkan hasil pengujian keseluruhan terhadap RGB propeller display

menggunakan mikrokontroler ATMega8 seperti grafik di atas didapatkan skor rata-rata

sebesar 4,17 termasuk ke dalam kategori baik. Presentase tingkat kelayakan alat secara

keseluruhan berdasarkan rumus (2.3) pada Bab 2 adalah sebesar 83,5 %.

4.4. Pengujian Putaran Propeller Display

Pengujian dilakukan untuk mengetahui kecepatan putar propeller display, waktu

yang diperlukan display pada saat awal pengoperasian untuk mencapai gambar penuh serta

nilai tegangan dan arus motor DC. Sumber tegangan untuk menjalankan motor DC terpisah

dengan sumber tegangan untuk mikrokontroler.

Pengujian kecepatan putar propeller display dilakukan dengan menggunakan alat

ukur kecepatan berupa tachometer. Pengujian ini dilakukan untuk mengetahui pengaruh

kecepatan putar terhadap tampilan pada propeller display. Hasil pengujian dapat dilihat

pada Tabel 4.4 berikut ini.

4.15

4.19 4.17

4

4.03

4.06

4.09

4.12

4.15

4.18

4.21

4.24

4.27

Aplikasi Perangkat Display Rata-Rata Keseluruhan

Sko

r

Hasil Penilaian Keseluruhan


34

Tabel 4.4. Hasil Percobaan Pengaruh Kecepatan Putar Motor terhadap Bentuk Tampilan

Gambar Awal Kecepatan Putar Motor

(RPM) Tampilan pada Propeller

328

550

660

714

780


35

Berdasarkan hasil pengujian pada Tabel 4.4 di atas didapatkan perbedaan antara

kecepatan putar dengan tampilan propeller display. Pada kecepatan putar 328 rpm, hasil

tampilan hanya menampilkan gambar sebesar setengah lingkaran. Pada kecepatan putar

550 rpm dan 660 rpm, bentuk gambar masih belum bisa tampil dengan sempurna.

Tampilan gambar terbentuk sempurna ketika putaran motor berada pada kecepatan putar

714 rpm. Putaran motor dipercepat hingga kecepatan 780 rpm menghasilkan tampilan

gambar yang berputar dan terbalik. Berdasarkan hasil pengukuran didapatkan nilai

kecepatan putar propeller display untuk membentuk gambar sempurna adalah sebesar 714

rpm seperti terlihat pada Gambar 4.8.

Gambar 4.8. Hasil pengukuran kecepatan putar propeller display dengan

menggunakan tachometer

Pada saat kecepatan putar di bawah 714 rpm, tampilan gambar pada propeller

display tidak penuh karena proses penyalaan kolom demi kolom led RGB untuk

membentuk 1 gambar utuh selesai lebih cepat sebelum sensor magnet mengaktifkan

interupsi untuk memulai penyalaan kembali. Kecepatan yang melebihi 714 rpm membuat

tampilan gambar pada propeller display berputar dengan percepatan tertentu karena proses

penyalaan kolom demi kolom led RGB untuk menghasilkan 1 gambar utuh belum selesai

tapi terjadi interupsi untuk memulai lagi penyalaan.

Tampilan pada propeller display saat pertama kali dinyalakan memerlukan waktu

hingga dapat mencapai 1 putaran penuh. Berdasarkan hasil pengujian, waktu yang

dibutuhkan oleh RGB propeller display dari awal penyalaan hingga membentuk satu

gambar penuh adalah 17 detik.

Pengujian terhadap nilai tegangan dilakukan dengan menggunakan multimeter ketika

gambar tampil secara penuh. Berdasarkan hasil pengujian didapatkan nilai tegangan

sebesar 1,65 Volt. Pengujian terhadap arus masukan didapatkan nilai sebesar 600 mA.


36

4.5. Pengujian Tampilan Gambar dan Warna pada Propeller Display

Pengujian dilakukan untuk mengetahui perbandingan bentuk tampilan antara gambar

asli, gambar hasil konversi dan tampilannya pada propeller display serta tampilan warna

yang dihasilkan. Pada pengujian ini dilakukan percobaan terhadap 10 gambar. Hasil dari

pengujian disajikan dalam tabel 4.5 berikut ini.

Tabel 4.5. Hasil Percobaan Tampilan Konversi Gambar pada Aplikasi dan Tampilan

Propeller Display

No. Gambar Asli Gambar Hasil Konversi Tampilan Propeller Display

1

2

3


37


Propeller Display (Lanjutan)


4

5

6

7


38


Propeller Display (Lanjutan)


8

9

10

Proses pengambilan gambar dengan kamera memiliki kendala pada intensitas cahaya

yang diterima sehingga hasil foto menjadi lebih terang jika dibandingkan dengan

penglihatan langsung dengan mata. Berdasarkan hasil pengujian seperti pada Tabel 4.5 di

atas didapatkan hasil berupa tampilan gambar yang sama dengan bentuk aslinya baik pada

hasil konversi maupun pada propeller display. Bentuk pada gambar asli dapat dikonversi

dengan baik oleh aplikasi pengubah file gambar menjadi kode hex dan dapat ditampilkan

pada propeller display dengan baik.


39

Warna pada gambar asli hanya dikonversi ke 8 jenis warna yang mendekati sehingga

ada perubahan pada beberapa jenis warna. Pada hasil di atas, warna jingga diubah menjadi

warna kuning dan warna coklat menjadi warna merah. Hal itu terjadi karena keterbatasan

jumlah kombinasi warna pada RGB propeller display yang dibuat.

Warna yang ditampilkan terdiri dari 8 warna kombinasi warna dasar RGB yaitu

merah, hijau, biru, kuning, magenta atau pink, cyan atau biru muda, putih dan hitam. Hasil

konversi warna dan warna tampilan pada propeller display dapat dilihat pada Tabel 4.5.

Pada gambar pertama dan kedua masing-masing terdiri dari 5 warna yaitu putih, merah,

cyan, kuning dan hitam. Gambar ketiga, keempat, kedelapan dan kesembilan terdiri dari 4

warna yaitu putih, merah, kuning, dan hitam. Gambar kelima dan kesepuluh terdiri dari 7

warna yaitu merah, biru, hijau, cyan, kuning, hitam dan putih. Gambar keenam terdiri dari

5 warna yaitu putih, merah, biru, kuning, dan hitam. Gambar ketujuh terdiri dari 3 warna

yaitu merah, putih dan hitam. Berdasarkan hasil pengujian warna tersebut, aplikasi

pengubah file gambar menjadi kode hex dapat mengubah warna pada gambar asli menjadi

warna tampilan propeller display dengan baik.

4.6. Pengujian Keseimbangan Alat

Pengujian dilakukan untuk mengetahui tingkat keseimbangan propeller pada

perangkat penampil gambar. Keseimbangan propeller merupakan salah satu hal yang

sangat penting dalam perancangan alat RGB propeller display menggunakan

mikrokontroler ATMega8 ini. Ketidakseimbangan propeller akan mengakibatkan getaran

yang dapat membuat alat menjadi tidak stabil.

Pengujian keseimbangan dilakukan dengan menggunakan seuntas benang yang

ditarik tepat pada tengah poros propeller hingga menggantung. Pengukuran dilakukan

mengggunakan busur dengan pedoman sebuah gantungan pemberat sehingga tepat posisi

vertikal dan horisontalnya berdasarkan arah gravitasi bumi. Propeller yang digantung

tersebut kemudian di letakkan tepat di depan busur sehingga dapat diamati pergeseran

sudut horisontalnya. Proses pengujian dapat dilihat seperti pada Gambar 4.9 berikut ini.


40

Gambar 4.9. Pengukuran keseimbangan propeller dengan menggunakan busur

Berdasarkan hasil pengukuran yang telah dilakukan, bagian sisi yang terpasang

mikrokontroler ATMega8 lebih berat daripada bagian sisi yang terpasang susunan led.

Nilai penyimpangan keseimbangan pada propeller display adalah sebesar 30. Presentase

penyimpangan keseimbangan terhadap sudut siku-siku adalah sebesar 3,33 %. Oleh karena

itu persentase keseimbangan alat adalah sebesar 96,67 %. Nilai tersebut masih belum

seimbang sempurna sehingga mengakibatkan perangkat propeller display mengalami

sedikit getaran ketika kecepatan putar lebih dari 700 rpm.

4.7. Pengujian Waktu Konversi Gambar

Pada aplikasi pengubah file gambar menjadi kode hex terdapat 2 proses konversi

gambar, yaitu menjadi bentuk tampilan gambar pada display dan bentuk kode hex. Kedua

proses tersebut mengambil titik demi titik pixel warna gambar sebanyak 32x240 kali

sehingga membutuhkan waktu tertentu. Pengujian ini adalah untuk menghitung waktu

proses pengkonversian file gambar dengan menggunakan beberapa jenis browser, seperti

Mozilla Firefox, Google Crome, Opera, dan Interet Explorer. Keempat browser tersebut

dipilih karena merupakan browser yang paling sering dipakai. Hasil pengujian waktu pada

proses konversi gambar menjadi tampilan display dan menjadi kode hex terlihat seperti

pada Tabel 4.6.


41

Tabel 4.6. Hasil Pengujian Waktu Proses Pengubahan File Gambar Pada Aplikasi

No. Browser Waktu proses konversi gambar menjadi

tampilan display (detik) kode hex (detik)

1 Mozilla Firefox 16.87 8.91

2 Google Crome 20.22 9.65

3 Opera 23.02 11.17

4 Internet Explorer - -

Berdasarkan hasil pengujian seperti pada Tabel 4.6 di atas, proses pengubahan

gambar menjadi bentuk tampilan display membutuhkan waktu proses paling cepat adalah

dengan menggunakan browser Mozilla Firefox yaitu sebesar 16,87 detik. Opera

mempunyai waktu proses yang paling lama dengan waktu 23,02 detik. Pada browser

Internet Explorer tidak dapat dilakukan proses konversi gambar ke tampilan display. Hal

itu terjadi karena kode script pada Javascript yang dipakai tidak kompatibel terhadap

browser Internet Explorer.

Proses konversi gambar menjadi kode hex paling cepat juga terjadi pada browser

Mozilla Firefox dengan waktu 8,91 detik sedangkan proses paling lama terjadi pada

browser Opera dengan waktu 11,17 detik. Internet Explorer juga tidak bisa terjadi proses

konversi karena tidak kompatibel terhadap kode script pada Javascript yang dipakai.

Berdasarkan data tersebut penggunaan aplikasi pengubah file gambar menjadi kode

hex lebih cepat dijalankan pada browser Mozilla Firefox daripada browser lainnya.

Penggunaan browser Internet Explorer tidak bisa melakukan proses konversi gambar. Oleh

karena itu, browser yang paling kompatibel dalam menjalankan aplikasi ini adalah Mozilla

FireFox.

4.8. Pembahasan Program

Pemrograman yang menyusun keseluruhan alat terbagi menjadi 4 bagian, yaitu

HTML, CSS, Javascript/JQuery, dan bahasa C Codevision AVR. Software yang digunakan

untuk penulisan program adalah Notepad++ dan Codevision AVR.


42

4.5.1. Program HTML

HTML merupakan komponen utama pembentuk aplikasi pengubah file gambar

menjadi kode hex. Terdapat 3 bagian penting pada aplikasi yaitu bagian masukan, bagian

keluaran dan kode hasil konversi. Pada Gambar 4.10 terlihat kode HTML untuk

menampilkan bagian masukan.

Gambar 4.10. Potongan kode program HTML bagian masukan

Bagian masukan merupakan bagian untuk mengambil file gambar dan

menampilkannya. Kode di atas mendeklarasikan sebuah input tipe file, 3 buah tombol, dan

sebuah canvas. File yang dipilih kemudian diolah dan ditampilkan pada bagian keluaran

dengan kode seperti pada Gambar 4.11 berikut ini.

Gambar 4.11. Potongan kode program HTML bagian keluaran

Bagian keluaran hanya terdiri dari sebuah kode yaitu deklarasi canvas untuk

menampilkan tampilan hasil konversi. File gambar juga dikonversi ke dalam bentuk kode-

kode hex pada sebuah frame. Deklarasi frame dibuat dengan sintaks div seperti pada

Gambar 4.12.

Gambar 4.12. Potongan kode program HTML bagian hasil konversi hex

Bagian hasil konversi ke dalam kode hex akan menampilkan 2880 baris yang

mewakili masing-masing pixel warna dari gambar. Format kode menyesuaikan dengan

pemrograman mikrokontroler yang dirancang untuk menampilkan gambar pada propeller

display.


43

4.5.2. Program CSS

CSS merupakan komponen pendukung yang tidak bisa berdiri sendiri tanpa HTML.

Fungsi CSS adalah untuk mengatur tata letak tampilan, warna dan background. Pada

Gambar 4.13 di bawah ini menunjukkan kode CSS sebagai pengaturan tampilan HTML

pada aplikasi.

Gambar 4.13. Kode CSS pada aplikasi pengubah file gambar menjadi kode hex

Gambar 4.13 dia atas tertulis tanda # pada awal kata yang merupakan instruksi untuk

mengatur properti dengan nama id sesuai dengan penamaan pada HTML. Pengaturan

properti seperti lebar, tinggi, jarak margin, warna background, dan lain-lain ditulis di

antara kurung kurawal. Penentuan nilai properti pada CSS disesuaikan dengan tampilan

yang diinginkan.


44

4.5.3. Program Javascript dan JQuery

Javascript dan JQuery merupakan file program yang membuat aplikasi pengubah file

gambar menjadi kode hex dapat bekerja sesuai fungsinya. Kedua program ini digunakan

untuk membuat sebuah website menjadi interaktif. JQuery merupakan bentuk javascript

yang telah disederhanakan. Penggunaan kedua program ini dalam aplikasi pengubah file

gambar menjadi kode hex dapat dilihat pada Gambar 4.14, Gambar 4.15, dan Gambar 4.16.

Gambar 4.14. Kode Javascript untuk mengambil gambar dari file yang tersimpan

pada komputer

Kode javascript pada Gambar 4.14 di atas mendeskripsikan tentang fungsi

loadImageFile() yang dapat dipanggil oleh tombol browse pada tampilan aplikasi. Fungsi

kode tersebut adalah untuk mengambil gambar dari file yang tersimpan di dalam komputer

untuk dikonversi pada aplikasi. Kode tersebut akan memfilter jenis file yang dapat

dipanggil yaitu hanya file gambar.


45

Gambar 4.15. Kode untuk mengkonversi gambar menjadi kode-kode hex

Kode pada Gambar 4.15 di atas mendeskripsikan tentang proses pengambilan pixel

warna pada gambar sesuai dengan koordinat yang telah ditentukan dengan memanfaatkan

teknik Phytagoras yaitu sinus dan cosinus. Pergeseran sudut terjadi sebanyak 240 kali

yang masing-masing sudut dilakukan pengambilan pixel warna sebanyak 32 kali yang

merupakan jumlah RGB led. Instruksi getImageData() akan secara otomatis mengambil

informasi pixel warna pada gambar sesuai dengan koordinat yang telah ditentukan dan

diletakkan dalam sebuah array kemudian ditulis ke aplikasi dengan instruksi append.

Gambar 4.16. Kode untuk mengkonversi gambar menjadi tampilan propeller display


46

Kode pada Gambar 4.16 di atas mendeskripsikan tentang proses pengambilan pixel

warna pada gambar sesuai dengan koordinat yang telah ditentukan kemudian

menampilkannya kembali sesuai dengan koordinat pixel aslinya ke canvas 2. Warna yang

diambil kemudian dilogika ke warna dasar RGB dan gabungannya sehingga jumlah warna

yang dihasilkan adalah 8 jenis. Bentuk penyusunan kembali pixel hingga menjadi gambar

satu putaran penuh merupakan preview dari tampilan RGB propeller display.

4.5.4. Program Bahasa C pada Codevision AVR

Mikrokontroler ATMega8 sebagai pengendali penyalaan RGB led diprogram

menggunakan bahasa C dengan memanfaatkan software Codevision AVR. Bahasa C yang

dibuat dirancang sedemikian rupa hingga mampu mengolah data-data hex dari hasil

konversi dan mengirimkannya ke masing-masing RGB led sesuai bentuk penyalaan

gambar. Alur pemrograman pada implementasi terdapat perubahan dari yang telah

dirancang seperti dijelaskan pada awal Bab 4 ini. Diagram alir pemrograman yang telah

dibuat seperti pada Gambar 4.17 berikut ini.

Gambar 4.17. Diagram alir penyalaan RGB propeller display

STAR

T

Inisialisasi PORT ATMega8

x = 0

Eksekusi program utama

yaitu penyalaan Led geser kanan kiri

STOP

Kirim data penyalaan 12 byte data ke

shift register

Aktifkan output shift register

tunda

Apakah x < 240

Matikan/reset shift register

x = x +1

Apakah terjadi

interupsi Y

Y


47

Kode program pada Codevision AVR yang telah dirancang sesuai dengan diagram

alir tersebut terdiri dari fungsi penampil, fungsi utama dan fungsi interupsi. Pertama kali

mikrokontroler melakukan inisialisasi terhadap PORT yang dipakai dan variabel yang akan

digunakan. Program akan mengeksekusi rutin utama yang ada pada fungsi main hingga

terjadi interupsi. Ketika terjadi interupsi, program utama berhenti sementara untuk

mengeksekusi program pada interupsi. Interupsi berisi program untuk mengirim data ke led

RGB melalui shift register sebanyak 12 byte setiap kolom hingga 240 kolom. Setelah

selesai maka led RGB direset atau dimatikan kemudian program kembali ke rutin utama

pada posisi terakhir dijalankan. Proses tersebut akan berlangsung terus menerus hingga alat

dimatikan.

Fungsi penampil dapat dilihat seperti pada Gambar 4.18 berikut ini.

Gambar 4.18. Kode program bahasa C untuk fungsi penampil

Kode program pada Gambar 4.18 di atas terdapat fungsi proses() untuk menampilkan

tampilan sesuai data gambar tersimpan dan fungsi proses2() untuk menampilkan penyalaan

led berjalan pada program utama. Nilai hexadesimal yang dimasukkan akan dikonversi ke

bentuk bit-bit data yang kemudian dikirim ke dalam shift register satu persatu hingga 12

byte data. Proses pengiriman data bisa dilihat pada Gambar 4.19.


48

Gambar 4.19. Prosedur pengiriman data ke display

Fungsi utama adalah membuat penyalaan led RGB secara bergantian dan secara rutin

menampilkan penyalaan ping pong led dengan warna-warna dasar led. Kode program

dalam bahasa C utuk fungsi utama adalah seperti pada Gambar 4.20 berikut ini.

Gambar 4.20. Kode program utama untuk menampilkan penyalaan berjalan led RGB


49

Berdasarkan listing program pada Gambar 4.20 di atas, penyalaan led dilakukan

perulangan awal sebanyak 6 kali dengan dengan warna yang berbeda. Pada setiap

perulangan tersebut terdapat instruksi pergeseran penyalaan sebanyak 31 kali ke kanan dan

31 kali ke kiri dengan delay waktu sebesar 40 ms. Program akan berhenti sementara ketika

terjadi interupsi dan akan kembali ke proses terakhir setelah interupsi selesai dieksekusi.

Kode program interupsi dapat dilihat pada Gambar 4.21 di bawah ini.

Gambar 4.21. Kode program interupsi untuk menampilkan data gambar ke display

Berdasarkan listing program pada Gambar 4.21 di atas, program interupsi hanya

memanggil fungsi proses() dengan nilai heksadesimal di dalam kurung yang diset sesuai

warna pixel gambar hingga sebanyak 2880 baris kode. Shift Register kemudian direset

setelah semua kode ditampilkan dan program kembali ke rutin utama. Proses penampilan

gambar ini pada implementasinya memakan waktu yang cukup lama untuk sebuah proses

propeller display sehingga untuk satu gambar penuh dengan delay 1 us per kolom led

dibutuhkan kecepatan motor hanya sebesar 714 rpm. Nilai tersebut masih jauh dari standar

kecepatan yang diharapkan yaitu 1500 rpm atau setara 25 putaran per detik sehingga

tampilan masih terlihat berkedip.


50

BAB V

KESIMPULAN DAN SARAN

5.1. Kesimpulan

Alat terbagi menjadi 2 bagian yaitu aplikasi pengubah file gambar menjadi kode hex

dan perangkat penampil gambar pada propeller. Berdasarkan pengujian aplikasi pengubah

file gambar menjadi kode hex dapat diambil kesimpulan sebagai berikut:

1. Kualitas dari aplikasi pengubah file gambar menjadi kode hex mempunyai skor 4,15

dengan kategori baik.

2. Aplikasi dapat mengkonversi gambar sesuai dengan bentuk aslinya. Warna yang

ditampilkan berjumlah 8 jenis warna yaitu merah, biru, hijau, cyan, magenta, kuning,

putih dan hitam.

3. Browser yang paling cepat dalam menjalankan aplikasi adalah Mozilla FireFox

dengan waktu konversi ke tampilan propeller 16,87 detik dan waktu konversi ke kode

hex 8,91 detik.

Berdasarkan pengujian perangkat penampil gambar pada propeller dapat diambil

kesimpulan sebagai berikut:

1. Kualitas perangkat penampil gambar pada propeller mempunyai skor 4,19 dengan

kategori baik.

2. Kecepatan putaran RGB propeller display ketika membentuk satu gambar penuh

adalah 714 rpm. Kecepatan tersebut masih jauh dari standar display yaitu sebesar 1500

rpm.

3. Propeller display dapat menampilkan gambar sesuai dengan bentuk gambar aslinya.

4. Jumlah gambar yang ditampilkan propeller display setiap beroperasi adalah 1 gambar.

5. Keseimbangan propeller pada display adalah sebesar 96,67 % sehingga masih

menyebabkan getaran pada kecepatan putar lebih dari 700 rpm.


51

5.2. Saran

Penelitian ini masih memiliki banyak kekurangan. Oleh karena itu, saran untuk

pengembangan penelitian selanjutnya antara lain:

1. Proses penampilan gambar masih perlu dipercepat.

2. Mikrokontroler sebaiknya menggunakan jenis mikrokontroler yang memorinya lebih

besar daripada ATMega8 seperti ATMega168 atau ATMega328 sehingga gambar

yang dihasilkan setiap kali beroperasi lebih banyak.

3. Propeller display perlu diseimbangkan lagi agar getaran bisa diminimalkan.


52

DAFTAR PUSTAKA

[1] Boloor, A.J., Shah, S., Shah, U., Schwartz, M., 2016, Arduino: Building exciting

LED based projects and espionage device, Packt Publishing, Birmingham.

[2] Anonim, 2013, Rangkaian Driver Motor DC PWM Sederhana,

http://schematiccircuit.com/pwm-dc-motor-driver-with-ic-ne555/ diakses 15 April

2018.

[3] Agarwal, T., 2015, Introduction to Propeller LED Display and Its Working,

https://www.elprocus.com/basic-idea-of-rotating-or-moving-message-propeller-led-

display-system/ diakses 13 November 2017.

[4] Dossis, N., 2012, Brilliant LED Projects, 20 Electronic Designs for Artists,

Hobbyists, and Experimenters, McGraw-Hill Companies, United States.

[5] -----, Data Sheet SMD 5050 RGB, Dreamland.

[6] Suprapto, 2012, Aplikasi dan Pemrograman Mikrokontroler AVR, UNY Press,

Yogyakarta.

[7] Iswanto, 2008, Design dan Implementasi Sistem Embedded Mikrokontroller

ATMega8535 Bahasa Basic, Gava Media, Yoyakarta.

[8] -----, 2013, Data Sheet Microcontroller ATMega8, Atmel.

[9] Putra, A.E., 2010, Tip dan Trik Mikrokontroler AT89 dan AVR: Tingkat Pemula

hingga Lanjut, Gava Media, Yogyakarta.

[10] Putra, A.E., 2010, Belajar mikrokontroler AT89C51/52/55 Yeori dan Aplikasi, 2nd

ed, Gava Media, Yoyakarta.

[11] -----, 2006, Data Sheet AT25HP256 and AT25HP512, Atmel.

[12] Kho, D., 2017, Pengertian Sensor Efek Hall (Hall Effect Sensor) dan Prinsip

Kerjanya, http://teknikelektronika.com/pengertian-sensor-efek-hall-hall-effect-

sensor-prinsip-kerja-efek-hall/ diakses 13 November 2017.

[13] Purnama, A., 2012, Definisi Dan Fungsi Sensor Efek Hall, http://elektronika-

dasar.web.id/definisi-dan-fungsi-sensor-efek-hall/ diakses 13 November 2017.

[14] -----, 2010, Data Sheet Hall Effect Sensor A1324, A1325, and A1326, Allegro

MicroSystems.

[15] Heryanto, M.A., Adi, W., 2008, Pemrograman Bahasa C untuk Mikrokontroler

ATMega8535, C.V. Andi Offset, Yogyakarta.


http://schematiccircuit.com/pwm-dc-motor-driver-with-ic-ne555/

https://www.elprocus.com/basic-idea-of-rotating-or-moving-message-propeller-led-display-system/

https://www.elprocus.com/basic-idea-of-rotating-or-moving-message-propeller-led-display-system/

http://teknikelektronika.com/pengertian-sensor-efek-hall-hall-effect-sensor-prinsip-kerja-efek-hall/

http://teknikelektronika.com/pengertian-sensor-efek-hall-hall-effect-sensor-prinsip-kerja-efek-hall/

http://elektronika-dasar.web.id/definisi-dan-fungsi-sensor-efek-hall/

http://elektronika-dasar.web.id/definisi-dan-fungsi-sensor-efek-hall/

53

[16] -----, Data Sheet RS-775 DC Motor Series, Sgmada

[17] Gandre, D.V., Gupta, S., 2018, Getting Started with Tiva ARM Cortex M4

Microcontrollers, Springer, India.

[18] -----, 2017, Data Sheet SN74HC595, Texas Instruments Incorporated.

[19] Kathir, 2015, C# - Drawing Circles using Pixel by Pixel, http://www.

softwareandfinance.com/CSharp/Draw_Circle_Pixel.html diakses 15 Maret 2018.

[20] Iswanto, 2009, Belajar Sendiri Mikrokontroler AT90S2313 dengan BASIC

Compiler, C.V. Andi Offset, Yoyakarta.

[21] Pressman, R.S., 2012, Rekayasa Perangkat Lunak, C.V. Andi Offset, Yoyakarta.

[22] Risnita, 2012, Pengembangan Skala Model Likert, Jurnal Pendidikan Biologi IAIN

Jambi, vol. 3, no. 9.


LAMPIRAN


L-1

Rangkaian RGB Propeller Display


L-2

Layout PCB


L-3

Listing Program HTML

<!Doctype HTML>

<html>

<head>

<title>Konversi Gambar ke RGB Propeller Display</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"

/>

<link rel="stylesheet" href="AturLangsung.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="CVAVR_Langsung.js"></script>

</head>

<body>

<div id="atas"><b>PENGOLAH FILE GAMBAR MENJADI TAMPILAN PROPELLER

DISPLAY</b>

</div>

<div id="wrapper">

<div id="menu">

<input style="float:left;" id="uploadImage" name="myPhoto"

onchange="loadImageFile();" type="file">

<button onclick="nampil()"> Lihat Gambar </button>

<button id="kodenya" onclick="kodehex()"

style="left:600px"> Kode Hex </button>

<button id="proses" onclick="myFunction()"

style="left:600px"> Tampilan </button>

</div>

<div id="input">

<canvas id="cekCanvas" width="480" height="480">Your browser

does not support the HTML5 canvas tag.

<img id="scream" src=# alt="Image preview"></canvas>

<div id="bingkai"></div>

</div>

<div id="output">

<canvas id="Canvasfix" width="480" height="480">Your browser

does not support the HTML5 canvas tag.

</canvas>

<script>

var canvas = document.getElementById('Canvasfix');

var context = canvas.getContext('2d');

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 236;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.lineWidth = 5;

context.strokeStyle = '#1463A5';

context.stroke();

context.font = "180px Arial";

context.fillStyle = "#98D8F3";

context.textAlign = "center";

context.fillText("?",240,295);

</script>

</div>

<div id="kode">

L-4

<script>

function CopyToClipboard(containerid) {

if (document.selection) {

var range = document.body.createTextRange();

range.moveToElementText(document.getElementById(containerid));

range.select().createTextRange();

document.execCommand("copy");

} else if (window.getSelection) {

var range = document.createRange();

range.selectNode(document.getElementById(containerid));

window.getSelection().addRange(range);

document.execCommand("copy");

alert("Data Berhasil Disalin")

}}

</script>

<div id="tengah"><b>   Data Kode Hex dari Gambar di

atas:</b> <button id="button1" class="menyalin"

onclick="CopyToClipboard('kodewarna')">  Salin

kode  </button>

</div>

<div id="frame1" class="frame" style="margin-left:0px;

margin-right:0px; height:400px; width:956px;

overflow:auto; padding:0px; border:2px solid #1463A5;">

<div id="kodewarna" style="margin-left:0px; margin-

top:0px;"></div> 

</div>

</div>

</div>

</body>

</html>

L-5

Listing Program CSS

*{

margin:0;

padding:0;

font-family:calibbri, "segoe ui", arial, tahoma, sans-serif;

}

body{

background:url(BG.jpg);

}

#atas{

position:fixed;

top:0;

left:0;

right:0;

margin:0 auto;

z-index:6;

max-width:1410px;

height:32px;


text-align:center;

color:#FFFFFF;

background-color:#00004f;

padding-top:8px;

}

#wrapper{

width:960px;

height:100%;

margin:50px auto;

overflow:hidden;

}

#menu{

margin-top:5px;

width:960px;

height:35px;

}

#uploadImage{

max-width:226px;

margin-right:17px;

}

#input{

width:480px;

height:480px;

float:left;

position: relative;

background-color:#1463A5;

}

#output{

width:480px;

height:480px;

float:right;

margin-top:0px;

}

#kode{

margin:10px auto;

width:960px;


L-6

height:433px;

float:left;

background-color:#ffffff;

}

#cekCanvas{

position: absolute;

z-index: 0;

}

#kodewarna{

padding-left:10px;

width:925px;

}

#jumlah{

margin-left:30px;

}

#jeda{

margin-left:30px;

}

#bingkai{

position: absolute;

z-index: 5;

width:468px;

height:468px;

border:6px solid #1463A5;"

}

.menyalin{

float:right;

margin-top:4px;

margin-right:4px;

}

#tengah{

margin:0 auto;

max-width:960px;

height:30px;


text-align:left;

color:#FFFFFF;

background-color:#1463A5;

}

#scream{

display:none;

}


L-7

Listing Program Javascript dan JQuery

// variable

var ev=0;

var cnvHeight;

var cnvWidth;

var mousePos;

var c;

var ctx;

var cPix;

var ctxPix;

var img;

var imgHeight;

var imgWidth;

var ambildata;

var hor;

var ver;

var merah;

var hijau;

var biru;

var kursorx;

var kursory;

var datatabel;

oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-

cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipe

g|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-

cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-

bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-

rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {

document.getElementById("scream").src = oFREvent.target.result;

};

function loadImageFile() { // fungsi memasukkan file

gambar

if (document.getElementById("uploadImage").files.length === 0) {

return; }

var oFile = document.getElementById("uploadImage").files[0];

if (!rFilter.test(oFile.type)) { alert("You must select a valid image

file!"); return; }

oFReader.readAsDataURL(oFile);

}

function nampil(){ // menampilkan gambar pada canvas 1

$('#kodewarna').html(''); // kodewarna dikosongkan

cnvWidth=480;

cnvHeight=480;

c=document.getElementById("cekCanvas"); // deklarasi kanvas

"cekCanvas"

ctx=c.getContext("2d");

// cPix=document.getElementById("pixCanvas");

// ctxPix=cPix.getContext("2d");


L-8

// ctxPix.mozImageSmoothingEnabled = false;

// ctxPix.webkitImageSmoothingEnabled = false;

img=document.getElementById("scream"); // ambil gambar

dari kanvas

imgHeight = img.height; // ukuran

tinggi = ukuran tinggi gambar

imgWidth = img.width; // ukuran

panjang = ukuran panjang gambar

if (imgHeight<cnvHeight && imgWidth<cnvWidth){

ctx.mozImageSmoothingEnabled = false;

ctx.webkitImageSmoothingEnabled = false;

}

if ((imgWidth/imgHeight)<1.56667){

cnvWidth=imgWidth/imgHeight*cnvHeight;

}else{

cnvHeight=cnvWidth/(imgWidth/imgHeight);

}

ctx.clearRect(0, 0, c.width, c.height);

ctx.drawImage(img,0,0,cnvWidth,cnvHeight);

// var onmoveListener = function(evt) {

// ev=1;

// mousePos = getMousePos(c, evt);

// drawPix(cPix, ctxPix, img,

Math.round(mousePos.x*(imgWidth/cnvWidth)),

Math.round(mousePos.y*(imgHeight/cnvHeight)));

// };

// c.addEventListener('mousemove', onmoveListener, false);

// c.addEventListener('mousedown', onclickListener, false);

}

// var onclickListener = function(evt) {

// menampilkan kode warna dalam hexadesimal

// imageData = ctxPix.getImageData(0,0,150,150);

// var

barva='#'+d2h(imageData.data[45300+0])+d2h(imageData.data[45300+1])+d2h(i

mageData.data[45300+2]);

// document.getElementById("pixcolor").value = barva;

// document.getElementById("pixcolor").select();

// document.getElementById("barvadiv").style.backgroundColor=barva;

// };

function kodehex() // fungsi klik Kode Hex

{

/* ================== Mulai tampilkan POV rgb 255

==================== */

var i,j,k,m2,m3,m5;

// deklarasi variabel yang akan

dipakai

var databin=[0,0,0,0,0,0,0,0];


L-9

// i=posisi putar,

j=posisi led ke pusat, k=mengatur penulisan data,

var m4=0;

// m1=cek

ganjil genap urutan led, m2=cek ganjil genap k

var lx=4;

var l=1;

var m1=0;

var kt=0;

var ac=0;

// $('#kodewarna').append('unsigned char Data0[]={');

// menuliskan no urut dan "==>"

for(i=0;i<240;i++){

// Perulangan sebanyak 240 kali

(penyalaan satu putaran penuh)

for(j=0;j<32;j++){

// perulangan 32 kali (jumlah

led)

kursorx=240+(Math.sin((1.5*i)/180*Math.PI)*(17+(j*7)));

// Mengambil posisi mendatar (horisontal) untuk

data hex

kursory=240-(Math.cos((1.5*i)/180*Math.PI)*(17+(j*7)));

// Mengambil posisi menurun (vertikal) untuk data

hex

datatabel=ctx.getImageData(kursorx, kursory, 1, 1);

// Mengambil nilai RGB

if (m1>=8){

m1=0;

m2=(databin[7]*128)+(databin[6]*64)+(databin[5]*32)+(databin[4]*16)

+(databin[3]*8)+(databin[2]*4)+(databin[1]*2)+databin[0];

m3=m2.toString(16).toUpperCase();

$('#kodewarna').append('proses(0x'+d2h(m2)+');<br>');

ac=ac+1;

m4=m2+m4;

}

databin[m1]=Math.floor(datatabel.data[2]/128);

m1=m1+1;

// menambah nilai m1 dengan 1. penanda jumlah bit per data

if (m1>=8){

// jika m1 lebih besar atau sama dengan 8 maka :

m1=0;


+(databin[3]*8)+(databin[2]*4)+(databin[1]*2)+databin[0]; // hitung

jumlah nilai desimalnya

m3=m2.toString(16).toUpperCase(); //

jadikan bentuk heksadesimal


ac=ac+1;

m4=m2+m4;

// m4 adalah total angka desimalnya

}


L-10

kt=kt+1; // penanda jumlah

memasukkan data bit per baris

// if(kt>=128){ // jika kt sudah 128 bit

atau 16 data byte maka:

// kt=0; // ulang kt

// m4=m4+l+16; // m4 ditambah

penanda dan 16 ???

// m5=256-(m4%256); // m5 adalah

sisa bagi dari m4/256

// m4=0; // atur ulang m4

// cz=l%4;

// td=l/4;

// if(cz==0){

// $('#kodewarna').append('}; //

'+l+'<br>unsigned char Data'+td+'[]={'); // menuliskan

ganti baris dan dimulai dengan 1000 + nilai l + 00

// }

// else{

// $('#kodewarna').append(' // '+l+'<br>');

// menuliskan ganti baris dan dimulai dengan 1000

+ nilai l + 00

// }

// l=l+1; // penanda jumlah

baris

// }


m1=m1+1;


if (m1>=8){


m1=0;







ac=ac+1;

m4=m2+m4;


}







penanda dan 16 ???

// m5=256-(m4%256); // m5 adalah



// cz=l%4;

// td=l/4;

// if(cz==0){


L-11




// }

// else{


// menuliskan ganti baris dan dimulai dengan 1000

+ nilai l + 00

// }


baris

// }


m1=m1+1;


if (m1>=8){


m1=0;







ac=ac+1;

m4=m2+m4;


}



// if (l==60){

// lx=0;

// l=0;

// pm=0;

// td=0;

// }





penanda dan 16 ???

// m5=256-(m4%256); // m5 adalah



// if(lx!=0){

// cz=l%4;

// td=l/4;

// if(cz==0){




// }// else{


// menuliskan ganti baris dan dimulai dengan 1000 + nilai l + 00


L-12

// }

// }

// else if(lx==0){


'+l+'<br>alamat=0x00;<br>');

// menuliskan no urut dan "==>"

// lx=1;

// }


baris

// }

}

}

}

function myFunction() // fungsi klik tampil

{

/* ========== Akhir dari tampilan POV rgb 255 ======*/

/* ========== Mulai tampilkan POV red green blue x2 ====== */

var canvasfix = document.getElementById('Canvasfix');

var i,j;

for(i=0;i<240;i++){

// Perulangan sebanyak 240 kali

(penyalaan satu putaran penuh)

for(j=0;j<32;j++){

// perulangan 32 kali (jumlah

led)

hor=240-(Math.sin((-(1.5*i)/180*Math.PI)-(1/2*Math.PI))*(190-

(j*5))); // Mengambil posisi mendatar (horisontal) untuk gambar

ulang

ver=240+(Math.cos((-(1.5*i)/180*Math.PI)-(1/2*Math.PI))*(190-

(j*5))); // Mengambil posisi menurun (vertikal) untuk gambar

ulang

ambildata=ctx.getImageData(hor, ver, 1, 1);

// Mengambil nilai RGB

}}

for(i=0;i<240;i++){

// Lingkaran pertama dari terluar

var contextfix = canvasfix.getContext('2d');

contextfix.beginPath();

contextfix.moveTo(240, 240);

contextfix.arc(240, 240, 234, 0, (240-i)/120 * Math.PI, false);

j=255-i;

hor=240-(Math.sin((-(1.5*i)/180*Math.PI)-(1/2*Math.PI))*234);

ver=240+(Math.cos((-(1.5*i)/180*Math.PI)-(1/2*Math.PI))*234);


merah=Math.floor(ambildata.data[0]/128)*255;

hijau=Math.floor(ambildata.data[1]/128)*255;

biru=Math.floor(ambildata.data[2]/128)*255;

contextfix.fillStyle = 'rgb('+merah+','+hijau+','+biru+')';

contextfix.fill();

}


L-13

for(i=0;i<240;i++){

// Lingkaran Ke-2 dari terluar





j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;


L-14








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








L-15


contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){





L-16



j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;





L-17





contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}


L-18

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;


L-19








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








L-20


contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){





L-21



j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;





L-22





contextfix.fill();

}

for(i=0;i<240;i++){






j=255-i;








contextfix.fill();

}

/* ================== Akhir dari tampilan POV red green blue x2

=============================*/

}

function drawPix(cPix, ctxPix, img, x, y) {

ctxPix.clearRect(0, 0, cPix.width, cPix.height);

ctxPix.drawImage(img,x-5,y-5,9,9,0,0,cPix.width,cPix.height);

}

function getMousePos(canvas, evt) {

var rect = canvas.getBoundingClientRect();

return { x: evt.clientX - rect.left, y: evt.clientY - rect.top

};

}

function d2h(d){

return ("0"+d.toString(16)).slice(-2).toUpperCase();

}

function d2h2(d){


}

function d2hx(d){


}

function greenbox(c, x, y){

c.beginPath();

c.rect(x-5, y-5, 9, 9);

c.lineWidth = 1;

c.strokeStyle = '#00FF00';

c.stroke();

}


L-23

Listing Program Bahasa C pada Codevision AVR

/*****************************************************

This program was produced by the

CodeWizardAVR V2.05.0 Professional

Automatic Program Generator

© Copyright 1998-2010 Pavel Haiduc, HP InfoTech s.r.l.

http://www.hpinfotech.com

Project :

Version :

Date : 03-09-2018

Author : NeVaDa

Company :

Comments:

Chip type : ATmega8

Program type : Application

AVR Core Clock frequency: 16.000000 MHz

Memory model : Small

External RAM size : 0

Data Stack size : 256

*****************************************************/

#include <mega8.h>

#include <delay.h>

// SPI functions

#include <spi.h>

// Declare your global variables here

unsigned char j,k,w,y,z,xx,op,rgb;

// unsigned int tunda=25;

unsigned char gsr[]={0x01,0x02,0x04,0x03,0x05,0x06};

void proses(unsigned char x){

for(j=0;j<8;j++){

PORTD.1=x>>j&0x01;

PORTC.3=1;

PORTC.3=0;

}

k=k+1;

if(k==12){

PORTD.0=1;

PORTD.0=0;

k=0;

// if(tunda==0){

delay_us(1);

// }

}

}

void proses2(unsigned char pp){

for(j=0;j<3;j++){


L-24

PORTD.1=pp>>j&0x01;

PORTC.3=1;

PORTC.3=0;

}

}

// External Interrupt 0 service routine

interrupt [EXT_INT0] void ext_int0_isr(void)

{

// Place your code here

// if(TCNT1H==0x00 && TCNT1L<0xFF){

// tunda=1;

// }

// kode hexadesimal hasil konversi gambar pada aplikasi

// akhir dari kode hexadesimal

PORTC.2=0;

PORTC.2=1;

// tunda=0;

// TCNT1H=0x00;

// TCNT1L=0x00;

}

void main(void)

{

// Declare your local variables here

// Input/Output Ports initialization

// Port B initialization

// Func7=Out Func6=Out Func5=Out Func4=Out Func3=Out Func2=Out Func1=Out

Func0=Out

// State7=0 State6=0 State5=0 State4=0 State3=0 State2=0 State1=0

State0=0

PORTB=0x00;

DDRB=0xFF;

// Port C initialization

// Func6=Out Func5=Out Func4=Out Func3=Out Func2=Out Func1=Out Func0=Out

// State6=0 State5=0 State4=0 State3=0 State2=0 State1=0 State0=0

PORTC=0x00;

DDRC=0x7F;

// Port D initialization

// Func7=Out Func6=Out Func5=Out Func4=Out Func3=In Func2=In Func1=Out

Func0=Out

// State7=0 State6=0 State5=0 State4=0 State3=T State2=T State1=0

State0=0

PORTD=0x00;

DDRD=0xF3;

// Timer/Counter 0 initialization


L-25

// Clock source: System Clock

// Clock value: Timer 0 Stopped

TCCR0=0x00;

TCNT0=0x00;



// Clock value: 16000.000 kHz

// Mode: Normal top=0xFFFF

// OC1A output: Discon.

// OC1B output: Discon.

// Noise Canceler: Off

// Input Capture on Falling Edge

// Timer1 Overflow Interrupt: Off

// Input Capture Interrupt: Off

// Compare A Match Interrupt: Off

// Compare B Match Interrupt: Off

TCCR1A=0x00;

TCCR1B=0x03; // prescaler 64

TCNT1H=0x00;

TCNT1L=0x00;

ICR1H=0x00;

ICR1L=0x00;

OCR1AH=0x00;

OCR1AL=0x00;

OCR1BH=0x00;

OCR1BL=0x00;



// Clock value: Timer2 Stopped

// Mode: Normal top=0xFF

// OC2 output: Disconnected

ASSR=0x00;

TCCR2=0x00;

TCNT2=0x00;

OCR2=0x00;

// External Interrupt(s) initialization

// INT0: On

// INT0 Mode: Falling Edge

// INT1: Off

GICR|=0x40;

MCUCR=0x02;

GIFR=0x40;

// Timer(s)/Counter(s) Interrupt(s) initialization

TIMSK=0x00;

// USART initialization

// USART disabled

UCSRB=0x00;

// Analog Comparator initialization

// Analog Comparator: Off

// Analog Comparator Input Capture by Timer/Counter 1: Off

ACSR=0x80;

SFIOR=0x00;


L-26

// ADC initialization

// ADC disabled

ADCSRA=0x00;

// SPI initialization

// SPI Type: Master

// SPI Clock Rate: 4000.000 kHz

// SPI Clock Phase: Cycle Start

// SPI Clock Polarity: Low

// SPI Data Order: MSB First

SPCR=0x50;

SPSR=0x00;

// TWI initialization

// TWI disabled

TWCR=0x00;

// Global enable interrupts

#asm("sei")

PORTC.2=0;

PORTC.2=1;

for(rgb=0;rgb<32;rgb++){

proses2(2);

}

PORTD.0=1;

PORTD.0=0;

delay_ms(1000);

PORTC.2=0;

PORTC.2=1;


proses2(4);

}

PORTD.0=1;

PORTD.0=0;

delay_ms(1000);

PORTC.2=0;

PORTC.2=1;


proses2(1);

}

PORTD.0=1;

PORTD.0=0;

delay_ms(1000);

PORTC.2=0;

PORTC.2=1;

while (1)

{

// Place your code here

for(op=0;op<6;op++){

for(w=0;w<31;w++){

z=31-w;

for(xx=0;xx<3;xx++){

proses2(gsr[op]);


L-27

}

for(y=0;y<z;y++){

proses2(0);

}

PORTD.0=1;

PORTD.0=0;

delay_ms(40);

PORTC.2=0;

PORTC.2=1;

}

for(w=0;w<31;w++){

for(xx=0;xx<3;xx++){

proses2(gsr[op]);

}

for(y=0;y<w;y++){

proses2(0);

}

PORTD.0=1;

PORTD.0=0;

delay_ms(40);

PORTC.2=0;

PORTC.2=1;

}

}

}

}


L-28

Dokumentasi Pengambilan Data Kuisioner

Proses Pengisian Kuisioner oleh Responden 1




L-29


Salah Satu Responden Angkatan 2014


rgb propeller display menggunakan mikrokontroler …

Documents