28 Nov 2014

0
Komentar

Programming AVR dengan Geany


Bismillahirrahmaanirrahiim.

Sebelumnya, saya telah membahas mengenai pemrograman mikrokontroler AVR di linux dengan menggunakan AVRDude. AVRDude adalah barisan perintah yang digunakan untuk dapat mengirim hasil program (.hex) ke dalam mikrokontroler AVR.  Kemudian pada posting kali ini, kita akan mencoba menggunakan Text Editor sebagai pengganti IDE berbayar seperti CodeVision dan semacamnya. Tujuannya adalah agar tidak bergantung pada IDE tertentu, dan memahami bahwa untuk melakukan programming yang dibutuhkan hanyalah teks editor biasa dan sebuah compiler.

Text Editor apapun bisa digunakan, Notepad sekalipun. Tapi disini, saya menggunakan Geany. Selain fungsinya sebagai text editor, Geany memiliki banyak fitur plugin yang bisa digunakan untuk memudahkan development program. Geany dapat mensuport berbagai bahasa pemrograman seperti C, C++, C#, Java, PHP, Python, dan lain sebagainya.

Untuk dapat memprogram Mikrokontroler AVR dengan Geany, caranya sangat mudah. Pastikan AVRDude telah terinstall (bisa dilihat di post saya sebelumnya mengenai pemrograman AVR di Linux dengan AVRDude). Untuk install Geany, silahkan download di link berikut ini : 
(Untuk Pengguna Ubuntu dapat langsung mencarinya di Software Center)
Berikut ini adalah screenshot tampilan dari Geany: 

Setting Build Command
Step berikutnya, untuk memudahkan kita dalam proses compile dan build. kita dapat mensetting Build Command. Berikut ini langkah-langkahnya:


Selanjutnya, ketikkan perintah seperti pada contoh dibawah ini (terdapat di post sebelumnya). Klik kolom pertama untuk merubah nama perintah buildnya.
Build: avr-gcc -w -Os -DF_CPU=1000000UL -mmcu=atmega8 -c -o %e.o %e.c
Link: avr-gcc -w -mmcu=atmega8 %e.o -o %e
Compile: avr-objcopy -O ihex -R .eeprom %e %e.hex


Pada perintah diatas, beberapa parameternya dapat dirubah sesuai dengan kebutuhan. Misal -mmcu, adalah tipe mikrokontroler AVR yang akan diprogram. Kemudian DF_CPU, yaitu kecepatan clock yang sedang digunakan mikrokontroler AVR tersebut.
Kemudian yang terakhir adalah perintah upload hex, pada baris Execute Command, isikan perintah berikut ini:
sudo avrdude -F -V -c usbasp -p ATmega8 -P usb -U flash:w:%e.hex

Parameter yang dapat dirubah adalah usbasp, dimana dapat diganti dengan programmer AVR yang lain, kemudian ATmega8, dapat diganti dengan tipe mikrokontroler AVR yang sedang digunakan. Untuk syntax %e, digunakan sebagai pengganti nama file. Sehingga perintah build akan otomatis mengeksekusi file yang sedang aktif tanpa perlu merubah lagi nama filenya pada Build Command.

Testing
Untuk mencoba apakah setting telah dilakukan dengan benar, maka kita bisa mencobanya langsung dengan menggunakan program sederhana berikut ini:

#include <avr/io.h>
#include <avr/delay.h>
int main(void)
{
     DDRB |= (1 << PB0) | (1 << PB1);
     while(1)
     {
            PORTB |= (1 << PB0);
            _delay_ms(500);
            PORTB = ~(1 << PB0);
            _delay_ms(500);
        }
}

Selanjutnya, buat rangkaian seperti pada gambar berikut ini:


Kemudian kita coba perintah build yang sudah kita buat sebelumnya, di main toolbar klik (Atau bisa juga menggunakan Hotkeys F8 atau F9): 1. Build > Build 2. Build > Link 3. Build > Compile Lalu jika tidak ada pesan error, kita bisa langsung menguploadnya ke mikrokontroler AVR. Jangan lupa pastikan downloader sudah terhubung dengan PC dan mikrokontroler. Klik perintah Excecute command yang sudah kita buat sebelumnya (Atau tekan F5). Akan muncul dialog terminal seperti berikut ini:


Jika tidak ada pesan Error dan LED kedap-kedip tiap setengah detik (_delay_ms(500);), maka proses uploading program berhasil.

Penutup
Sekian tutorial menggunakan text editor Geany untuk memprogram AVR. Selamat mencoba.

31 Okt 2014

0
Komentar

Mengenal AVRDude

Bismillaahirrahmaanirrahiim.

Curhat sedikit: Saya mulai mengenal GNU/Linux sejak SMK. Berawal dari saran seorang sahabat saya, GNU/Linux pertama saya adalah OpenSUSE. Seiring waktu, ketertarikan mengenai GNU/Linux semakin besar. Sampai sekarang, saya sudah menggunakan GNU/Linux lebih dari 3 tahun.

Kebetulan saat itu saya sedang asik-asiknya mempelajari mikrokontroler AVR. Dan sudah terlanjur terbiasa dengan CodeVision. Singkatnya, saya mencoba menjalankan CodeVision di GNU/Linux dengan bantuan Wine.

Saya dapat membuat program dan melakukan compile dengan Codevision + Wine. Hanya saja karena keterbatasan pemahaman dan pengalaman, saya tidak tahu bagaimana cara burning file hasil compile (*.hex) ke mikrokontroler AVR di GNU/Linux. Setelah mencoba mempelajari dari berbagai macam sumber, saya mengenal AVRDude.

screenshot-codevision-linux
Running Codevision dengan Wine
Apa itu AVRDude?
Secara sederhana adalah software/tool untuk memprogram memory Flash maupun EEPROM pada Mikrokontroler AVR. Juga dapat digunakan untuk program Fuse dan Lock Bits yang biasa digunakan untuk clock setting.

Jadi untuk melakukan flashing file *.hex ke mikrokontroler AVR, bisa menggunakan AVRDude.
Langkah-langkahnya akan dijabarkan di poin selanjutnya.

1. Install AVRDUDE
Dibawah ini adalah perintah untuk melakukan instalasi AVRDude di GNU/Linux. 
sudo apt-get install gcc-avr avr-libc uisp avrdude

Untuk pengguna Windows, bisa melakukan instalasi dengan download executable filenya disini:

Dan untuk memastikan bahwa AVRDude telah terinstall, ketikkan perintah "avrdude" di terminal/cmd. Harusnya akan tampil pesan seperti berikut ini :

Avrdude telah terinstall
2. Cara Burn/Upload File .hex
Disini saya menggunakan USBASP sebagai downloader, dan ATmega8 sebagai target. File hasil kompilasi saya namakan file.hex. Untuk mengupload hasil program ke AVR, dapat menggunakan perintah dibawah :
sudo avrdude -F -V -c usbasp -p ATmega8 -P usb -U flash:w:file.hex

Proses upload file hex ke MCU sukses

Penutup
Sekian post singkat kali ini. Apabila ada kesulitan, silahkan tinggalkan pesan di kolom komentar.
Semoga kita selalu diberi kesehatan oleh Allah agar dapat terus menuntut ilmu dan mengamalkannya.

</zep>

26 Jan 2013

10
Komentar

Masih Inget Harvest Moon ?

download ost harvest moon

Masih ingat Harvest Moon: Back To Nature? Masa kecil nggak lengkap rasanya kalo belum main game ini, haha. Game RPG yang menceritakan tentang seorang yang ditakdirkan menjadi petani ini dulu sempat jadi trend waktu masih jamannya PS1. Jaman saya masih SMP. Sayang sudah nggak eksis lagi, sekarang kalah eksis sama sinetron cinta-cintaan... ups.



Berbeda halnya dengan game bergenre  FPS (First Person Shooter), berantem2an, dan game2 lainnya. Di Game ini banyak sekali hal-hal yang bisa kita pelajari, mulai dari mengatur waktu, menyusun strategi, cara berinteraksi, banyak deh. Karena game ini menyerupai kehidupan sehari-hari. Buat yang dulu udah pernah main, pasti kangen deh. Apalagi versi PS1nya.

download ROM harvest moon back to nature

Nah, buat mengobati rasa kangen sama Harvest Moon, ini saya punya link download Original Soundtrack (OST) nya Harvest Moon (Back To Nature). Iramanya khas, enak didengerin, haha. Silahkan di download :



OST Harvest Moon

Buat yang pengen main Harvest Moon lagi, nih cari aja di http://coolrom.com. Disini kamu bisa cari ROM plus Emulatornya dari berbagai game dari berbagai platform. Buat yang belum tau, ROM itu seperti kaset game, sedangkan Emulator itu mesinnya. Jadi game yang semestinya buat PS, Nintendo, Xbox, bisa kamu mainkan di PC. Yang mau nostalgia sama game-game lainnya, bisa dicoba :D

NB: Gambar diambil dari google, klik untuk menuju sumbernya.

</zep>

8 Nov 2012

18
Komentar

Custom 404 Untuk Blogspot

Bismillah.

Pernah mengakses web tapi menemui Page 404 ?
Page 404 adalah halaman khusus yang akan ditampilkan apabila halaman web yang dituju tidak ada. Bisa jadi karena broken link, atau salah dalam mengetik URL-nya. Nah, saat ini Blogger juga memiliki fitur seperti itu. Cukup buka BloggerSettings - Search Preferences - Custom Page Not Found (klik edit).



Namun, kekurangannya adalah keterbatasan pengeditan, karena memanfaatkan layout halaman utama. Tapi hal ini tetap bisa 'diakalin' dengan memanfaatkan syntax b:if, jadi kita membuat styling CSS khusus hanya untuk halaman 404.


Untuk mencobanya, ketik saja alamat blog dengan sub-halaman yang tidak ada di blogmu  http://urlblogmu.blogspot.com/cobacoba
Bagaimana? hehe.

Berikut ini adalah halaman 404 versi saya, silahkan klik link berikut ini :



7 Okt 2012

11
Komentar

CSS3: Balloon Style Navigation Menu

UPDATE!!!
Terdapat bug di bagian segitiga ketika menggunakan browser Mozilla. Untuk pengguna Chrome situasi tetep aman. Keep using updated browser Masbro :)
Berhubung kemarin habis ngutak-ngatik blog lama, ternyata nemu sesuatu yang bagus nih. Hasil eksperimen CSS dulu :) Namanya Balloon Style Navigation Menu. Sesuai namanya, ini adalah menu navigasi yang bentuk tiap menunya dibikin menyerupai balon, dan dibuat dengan 100% CSS. Beneran tanpa gambar!

Sebelumnya, tiap koding akan dipisah untuk mempermudah pemahaman, jadi tinggal ngikutin alur yang ada. Oke, ini dia:



Kerangka Dasar
Seperti menu pada umumnya, kita buat kerangka dasarnya dulu pake HTML. Biasanya tag navigasi ditaruh diatasnya header, tapi terserah mau taruh disebelah mana, nanti tinggal diatur posisinya :)


<div id='navwrap'>
<div id='bubnav'>
<ul>
<li class='ho'><a href='/'>Home <span>Halaman utama</span></a></li>
<li class='fo'><a href='/'>Info <span>Tentang</span></a></li>
<li class='co'><a href='/'>Contact <span>Hubungi</span></a></li>
<li class='po'><a href='/'>Portofolio <span> kerjaanku</span></a></li>
<li class='si'><a href='/'>Sitemap <span>Daftar Isi</span></a></li>
</ul>
</div>
</div>

Wrapping Style
Disini maksudnya pembungkus utama menu, biar nggak acak-acakan, kita jadiin satu di dalam satu wrap. Jangan lupa dipisah, ini kan CSS. Taruh aja diatasnya </b:skin>

/* Wrapping */
#navwrap {
height: 200px;
margin: 10px auto;
width: auto;
position: absolute;
}
#bubnav {
height: 200px;
margin: auto;
width: 700px;
}

List Style
Nah kita masuk ke styiling untuk list/daftar menunya.

/* List Navigasi */
#bubnav ul {
list-style: none;
}
#bubnav li {
background: lightgreen;
position: relative;
border-radius: 400px;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
-o-border-radius: 400px;
display: inline-block;
float: left;
height: 100px;
margin: 10px;
text-align: center;
width: 150px;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}

Link Navigasi
Nah disini link dilengkapi juga dengan deskripsi. Misalnya link "Home" dengan deskripsi "Halaman utama", dan sebagainya. Contohnya seperti ini:

/* link navigasi */
#bubnav li a {
color: #8F8F8F;
display: block;
font-size: 20px;
font-weight: bold;
padding: 30px;
text-decoration: none;
text-shadow: gray 1px 1px 3px;
}

/* untuk tulisan deskripsi di bawah link navigasinya */
#bubnav li a span {
color: #7D7D7D;
display: block;
font-family: serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
margin-top: -5px;
text-decoration: none;
text-shadow: gray 0px 0px 3px;
}

Styling Balloon Menu
Oke, disini kita mulai Balloonizing-nya. Disini balonnya pake background gradient, CSS3 (warna bisa di dapat dari sini: http://www.colorzilla.com/gradient-editor/). Disini juga ada pengkondisian sesuai browsernya, termasuk browser lama yang nggak mendukung CSS3 gradient. Oiya, margin disini berfungsi biar tiap menu posisinya nggak sama, jadi style balonnya lebih berasa :P

#bubnav .ho {
background: #9FF276; /* old browsers */
background: -moz-linear-gradient(top, #C3FFBA 24%, #9FF276 65%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(24%,#C3FFBA), color-stop(65%,#9FF276)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C3FFBA', endColorstr='#9FF276',GradientType=0 ); /* ie */
margin: 40px -15px 0px -40px; z-index: 1;
}
#bubnav .fo {
background: #BAD7DE; /* old browsers */
background: -moz-linear-gradient(top, #DBFBFF 13%, #BAD7DE 74%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#DBFBFF), color-stop(74%,#BAD7DE)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DBFBFF', endColorstr='#BAD7DE',GradientType=0 ); /* ie */
margin: 0px 20px 0px 0px; z-index: 3;
}
#bubnav .co {
background: #E7EB86; /* old browsers */
background: -moz-linear-gradient(top, #F9FFD1 13%, #E7EB86 74%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#F9FFD1), color-stop(74%,#E7EB86)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9FFD1', endColorstr='#E7EB86',GradientType=0 ); /* ie */
margin: 70px 0px 0px -80px;
}
#bubnav .po {
background: #FAB6B6; /* old browsers */
background: -moz-linear-gradient(top, #FFE5E5 13%, #FAB6B6 76%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#FFE5E5), color-stop(76%,#FAB6B6)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFE5E5', endColorstr='#FAB6B6',GradientType=0 ); /* ie */
margin: 30px 0px 0px -40px; z-index: 2;
}
#bubnav .si {
background: #EBBA86; /* old browsers */
background: -moz-linear-gradient(top, #FFE5C6 13%, #EBBA86 76%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#FFE5C6), color-stop(76%,#EBBA86)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFE5C6', endColorstr='#EBBA86',GradientType=0 ); /* ie */
margin: 50px 0px 0px -20px;
}

Pseduo :after
Pernah dengen Pseduo :after? Biasanya digunakan untuk membuat item tambahan tanpa ngebuat tag html baru, jadi lebih praktis dan simpel. Kalo di tutorial ini, pseduo :after ditambahkan untuk membuat segitiga.


/* balloon effect */
#bubnav .ho:after {
border-color: #9FF276 transparent;
border-style: solid;
border-width: 30px 30px 0px;
bottom: -10px;
content: '';
display: block;
height: 0px;
left: 15px;
position: absolute;
width: 0px;
z-index: -2;
}
#bubnav .fo:after {
border-color: #BAD7DE transparent;
border-style: solid;
border-width: 30px 30px 0px;
bottom: -10px;
content: '';
display: block;
height: 0px;
left: 15px;
position: absolute;
width: 0px;
z-index: -2;
}
#bubnav .co:after {
border-color: #E7EB86 transparent;
border-style: solid;
border-width: 30px 30px 0px;
bottom: -10px;
content: '';
display: block;
height: 0px;
left: 15px;
position: absolute;
width: 0px;
z-index: -2;
}
#bubnav .po:after {
border-color: #FAB6B6 transparent;
border-style: solid;
border-width: 30px 30px 0px;
bottom: -10px;
content: '';
display: block;
height: 0px;
left: 15px;
position: absolute;
width: 0px;
z-index: -2;
}
#bubnav .si:after {
border-color: #EBBA86 transparent;
border-style: solid;
border-width: 30px 30px 0px;
bottom: -10px;
content: '';
display: block;
height: 0px;
left: 15px;
position: absolute;
width: 0px;
z-index: -2;
}

Hover State
Ini adalah efek menu kalau dihover (pada saat mouse berada diatas menu). Rencana awalnya sih tiap menu ganti warna sesuai warna awalnya. Tapi karena agak ribet, sementara cuma bisa 1 warna. Terus di baris ini juga terdapat styling untuk merubah posisi menu (agak keatas) kalo dihover.


/* hover state */
#bubnav li:hover {
background: #BFFFE8; /* old browsers */
background: -moz-linear-gradient(top, #BFFFE8 13%, #86E3C7 76%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#BFFFE8), color-stop(76%,#86E3C7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BFFFE8', endColorstr='#86E3C7',GradientType=0 ); /* ie */
}

#bubnav li:hover:after {border-color: #86E3C7 transparent;}
#bubnav li a:hover {color: #636363;}
#bubnav .ho:hover {margin-top: 35px;}
#bubnav .fo:hover {margin-top: -5px;}
#bubnav .co:hover {margin-top: 65px}
#bubnav .po:hover {margin-top: 25px;}
#bubnav .si:hover {margin-top: 45px;}

---------------
Nah, itu dia tutorial Balloon Style Navigation Menu. Kesulitan? Saya siap membantu :D Wassalamu'alaykum :)  </zep>