Cara membuat "PaintPot" pada Android menggunakan MIT APP Inventor

Nah kali ini saya akan berbagi kepada teman-teman semua Bagaimana caranya mewarnai pada Android kita sendiri atau yang disebut dengan istilah "PaintPot".

Disini saya akan membagikan langkah-langkah pembuatannya, yang mana saya mempelajari cara membuat PaintPot dengan MIT AI2 Companion.

          Pada langkah pertama tentunya teman-teman sudah memiliki aplikasi "MIT AI2 Companion" pada gadget kalian semua, tampilannya dapat dilihat juga pada blog saya sebelumnya yang berjudul "Belajar membuat aplikasi sederhana pada MIT APP Inventor".

Setelah kita mempunyai aplikasi MIT tersebut, selanjutnya kita buka link "MIT APP Inventor" pada PC kita, yang tampilan utamanya seperti dibawah ini.

• Klik "create" untuk membuka aplikasi.

Dengan menekan "create" maka kita akan menuju halaman utama, yaitu:

1. Membuat "New Project", caranya:

• Klik Project, Lalu pilih "start new project".
• Buat nama project yang kalian inginkan.

Selanjutnya dengan tampilan screen diatas, nama "screen" pada layar dapat dirubah dengan,

1. Merubah nama "screen", caranya :

• Klik "Screen" lalu ganti nama pada "Title" yang terdapat di kolom properties.

langkah selanjutnya dapat kita masukkan tombol-tombol yang akan digunakan sebagai warna pada layar.

   

  2. Memasukkan Button ke layar, caranya:

• Tahan, dan geserkan "Button" ke layar yang terdapat pada user interface.

Dengan tampilan diatas terlihat tombol tidak terletak dengan rapi, kita bisa merapikannya dengan meletakkannya secara horizontal atau sejajar dengan cara :

  3. Meletakkan Button dengan Layout Horizontal, caranya:

• Pada kolom Layout hold tahan lalu tarik "HorizontalArrangement" ke layar.
• Masukkan "Button" tadi satu persatu ke dalam kolom horizontal yang tertera pada layar, 
• Lalu tombol-tombol tersebut akan terlihat seperti gambar diatas.

Langkah selanjutnya kita dapat memasukkan gambar tampilan sebagai media "PaintPot".

  4. Memasukkan gambar pada layar, caranya :

• Tahan dan tarik "canvas" pada Drawing and Animation,
• Pada Background Image, Klik Upload File, pilih file (foto).
• Klik OK.

Setelah gambar tertampilkan, kita tambahkan satu buah tombol sebagai tombol Hapus (wipe).

  5. Menambahkan tombol Wipe, caranya:

• Sama seperti memasukkan tombol biasa, 
• Lalu ubah nama tombol pada "text" seperti gambar diatas.

Setelah design sudah selesai kita buat, maka dapat kita buat programnya pada kolom "Block".

  6. Memasukkan program pada canvas, caranya:

• Klik "canvas" lalu pilih program "SetCanvas1, BackgroundColor,to.
• Lalu pada "BackgroundColor" ubah menjadi "PaintColor".
• Masukkan Program pada "button 1, button2, dan button 3" dengan perintah "when, Button1,click".
• Lalu masukkan warna yang kalian inginkan pada "to".
• Warna didapat dari colors di Built-in.
• Lakukan langkah itu pada setiap Button / tombol.
• Pada Button4 / Button Wipe, maka dilakukan perintah "call,Canvas1,Clear" pada saat klik Button4 / Wipe.

 Setelah tombol-tombol kita setting pewarnaannya, yang mana setiap tombol sudah memiliki warna masing-masing untuk mewarnai pada screen, dan tombol wipe juga telah di setting sebagai tombol hapus yang akan menghilangkan lukisan yang telah kita buat, maka langkah selanjutnya yaitu :

    7. Memasukkan program "When, Canvas1,Touched", caranya :

• Klik "Canvas", lalu pilih program "When,Canvas1,Touched".
• Pada do, masukkan perintah "call,Canvas1,Drawcircle.
• Masukkan "getX" pada centerX dan "getY" pada centerY yang didapat dari variable.
• Masukkan juga "radius" yang didapat dari "Math", isi berapa radius yang kita inginkan.
• Dan pilih "true" pada fill.

Setelah kita mengatur semua perintah, yang mana perintah "getX dan getY" digunakan jika canvas disentuh maka akan kita bentuk pola circle yang bisa secara X dan Y, dan radius "5" yang artinya besar diameter warna yang dikeluarkan, langkah selanjutnya yaitu :

   8.  Memasukkan program "When,Canvas1,Dragged", caranya:

• Klik "When,Canvas1,Dragged" pada canvas.
• Lalu masukkan  perintah "call,Canvas1,DrawLine".
• Lalu pada do "x1=prevX", "y1=prevY", "x2=currentX", "y2=currentY" yang didapat dari variable.

Langkah tersebut memiliki fungsi untuk menggambar garis pada screen yang bisa dilakukan secara X dan Y , dengan melakukan semua perintah diatas yang mana langkah terakhir yang dilakukan pada kolom "Block", langkah selanjutnya dapat kita hubungkan ke android yang dapat dilakukan pada kolom "designer" dengan cara :

   9. Mengkoneksikan hasil program dan desain ke Android, caranya :

• Pada gambar pertama yaitu cara menampilkan barcode /  code untuk dikoneksikan ke Android.
• Klik "connect" lalu "A1 companion" lalu akan ditampilkan gambar seperti gambar kedua.
• Setelah barcode dan code keluar pada PC, maka dapat kita scan QR code / connect with code sesuai dengan yang ditampilkan pada PC.

Setelah terkoneksi, maka akan muncul gambar yang seperti di kolom "Designer" pada PC sebelumnya pada layar Android kita, yang dapat dilihat seperti gambar dibawah :

Maka PaintPot siap digunakan pada Android kita. 

Selamat mencoba..