Teknik Elektro LinksBarrier-Gate & Turnstile Interface, Thermostat, Relay Driver, Microcontroler Board

Bikin Sendiri Jam Digital Dengan Gambar Bitmap Yang Motivatif-Inspiratif Menggunakan Bahasa C

Selamat berjumpa lagi di blog Teknik Elektro Links. Kali ini saya akan mengajak Anda untuk membuat sebuah program sederhana, yakni program jam digital dengan gambar bitmap yang motivatif dan inspiratif. Program ini berfungsi untuk menampilkan jam digital (hh:mm:ss) dengan gambar yang dapat memberikan motivasi ketika kita melihatnya.

Penasaran? Silakan melihat tampilan program jam digital dengan gambar-gambar bitmap yang motivatif-inspiratif berikut ini.

image image image image image

image image image image image

WOW! WOW! WOW! Sangat menarik, bukan?

Program yang saya beri nama WOW (Words Of Wisdom) Clock ini saya buat menggunakan Pelles C, yakni kompiler bahasa C untuk platfom Windows yang g – r – a – t – i – s. Selain gratis, Pelles C dapat digunakan untuk membuat program komersial tanpa obligasi apapun.

Sekedar info saja, program WOW Clock sudah teruji pada Windows 98, Windows 2000, Windows XP dan Windows 7. Dan berjalan dengan mulus pada platform linux menggunakan Wine. Meskipun saya belum mencoba program ini pada Windows 8 dan Windows 10, tapi saya yakin program akan berjalan dengan normal karena program menggunakan fungsi-fungsi standar Windows API.

Saya menyediakan 10 buah gambar bitmap seperti ditunjukkan oleh deretan gambar diatas. Ukuran lebar dan tinggi masing-masing gambar bitmap adalah 102×121 pixel. Dan untuk memudahkan pemahaman, saya beri nama file-file bitmap tersebut berurutan yakni: clock.bmp, clock1.bmp, clock2.bmp, clock3.bmp, clock4.bmp, clock5.bmp, clock6.bmp, clock7.bmp, clock8.bmp dan clock9.bmp.

Secara visual, program WOW Clock adalah sebuah window popup dengan background gambar bitmap dan memiliki window-style WS_EX_TOPMOST yang artinya window akan selalui berada di atas window-window lain (Always-On-Top). Ukuran window pun disesuaikan dengan ukuran gambar bitmap yakni 102×121. Ketika program dijalankan, tampilan akan terletak pada pojok kanan atas dari layar. Tidak persis di pojok, tapi agak ke kiri seperti ditunjukkan oleh gambar berikut ini.

wow_clock_pojok

Anda dapat memindahkan window program WOW Clock dengan cara click and drag seperti window lain pada umumnya.

Seperti telah saya sampaikan diatas bahwa program WOW Clock yang saya sajikan ini memiliki 10 gambar bitmap. Gambar tampilan window program WOW Clock dapat diganti dengan cara:

  1. menekan tombol 0-9 ketika window menerima fokus
  2. mengklik-kanan pada window dan memilih menu Next Image atau Prev Image
  3. menekan tombol panah-kiri dan panah-kanan

Nah, saya akan menjelaskan secara singkat bagian-bagian program WOW Clock. Kita mulai dari bagian inisialisasi.

Inisialisasi

Program mengupdate tampilan jam setiap 1 detik sekali. Untuk keperluan ini digunakan TIMER. Timer diciptakan pada saat awal program dijalankan. Berikut adalah kode program inisialisasi timer pada event WM_CREATE.

case WM_CREATE: 
  uTimer = SetTimer(hwnd, ID_TIMER, 999, NULL);
  if (uTimer==0)
  {
    MessageBox(hwnd, "Timer gagal diciptakan!", "Timer Error", MB_ICONERROR);
    exit(1);
  }
  _strtime( timeStr );
  m1 = timeStr[3];
  m2 = m1;

  //Create Popup Menu 
  hPopupMenu = CreatePopupMenu();
  InsertMenu(hPopupMenu, 0, MF_BYPOSITION | MF_STRING, ID_ABOUT, "About");
  InsertMenu(hPopupMenu, 1, MF_BYPOSITION | MF_STRING, ID_NEXTIMAGE, "Next Image");
  InsertMenu(hPopupMenu, 2, MF_BYPOSITION | MF_STRING, ID_PREVIMAGE, "Prev Image");
  InsertMenu(hPopupMenu, 3, MF_BYPOSITION | MF_STRING, 0, NULL);
  InsertMenu(hPopupMenu, 4, MF_BYPOSITION | MF_STRING, ID_EXIT, "&Exit");

  break;

Selain menginisialisasi timer, program juga mengeset nilai m2 dengan nilai puluhan menit. Variabel m2 ini nantinya digunakan pada bagian program untuk membunyikan bel (teng.wav) yang dilakukan setiap 10 menit. Dan diciptakan juga menu popup dengan empat menu yakni About, Next Image, Prev Image dan Exit.

Jam Digital

Program WOW CLock menampilkan jam digital dengan format hh:mm:ss di bagian bawah dengan background hitam dan warna teks kuning. Ukuran rectangle untuk tampilan jam adalah 102×20. Setiap kali melakukan update tampilan, program menimpa area tampilan tersebut dengan tampilan baru yang digambar menggunakan fungsi DrawText.

Berikut ini adalah bagian program yang menampilkan jam digital pada area rectangle yang dimaksud.

 _strtime( timeStr );
 rc.left = 0; rc.top = 101; rc.right = 102; rc.bottom = 121;
 hdc = GetDC(hwnd);
 SetTextColor(hdc, RGB(255, 255, 0));
 SetBkColor(hdc, RGB(0,0,0));
 DrawText(hdc, timeStr, 8, &rc, DT_CENTER | DT_VCENTER | DT_SINGLELINE);
 ReleaseDC(hwnd, hdc);

Rectangle dengan koordinat posisi (0, 101) – (102,121) adalah area bagian bawah yang kosong dari tampilan program WOW Clock. Karena proses hapus-gambarnya dilakukan pada event WM_TIMER, maka tampilan jam digital akan kelihatan berkedip (flickering).

Bunyi Bel

Selain tampilan jam digital dengan gambar bitmap motivatif-inspiratif, program juga membunyikan bel (teng.wav) setiap 10 menit, yakni ketika nilai menit menunjukkan bilangan 00, 10, 20, 30, 40 dan 50.

Fungsi bunyi bel ini bukan untuk mengagetkan Anda, tapi untuk mengingatkan bahwa 10 menit telah berlalu – jangan sia-siakan 10 menit yang akan datang. Begitulah kira-kira, hehehe.

Bagaimana programnya? Simak kode program berikut ini.

 m1 = timeStr[3];
 if (m1!=m2)
 {
   PlaySound("teng.wav", 0, SND_ASYNC);
   m2 = m1;
 }

Untuk mengetahui apakah nilai menit saat ini adalah 00, 10, 20, 30 40 atau 50, caranya adalah dengan mengecek nilai puluhan dari menit. Apabila nilai puluhan menit berubah, maka bisa dianggap 10 menit telah berlalu. Perhatikan trik pada program di atas. m1 adalah karakter ke-4 dari string timeStr yang memiliki format hh:mm:ss, sehingga m1 = timeStr[3] adalah nilai puluhan dari menit pada jam. Nilai m1 dibandingkan dengan nilai puluhan menit sebelumnya yang disimpan pada variabel m2. Jika m1 tidak sama dengan m2, maka bel (teng.wav) akan dibunyikan dengan menggunakan fungsi PlaySound. Perhatikan juga bahwa nilai m2 diupdate dengan nilai m1 setelah memanggil fungsi PlaySound.

Event WM_CHAR

Pada event ini, program mendeteksi penekanan tombol angka 0-9. Jika salah satu tombol ditekan, maka program akan mengganti gambar bitmap sesuai dengan angka tombol yang ditekan. Untuk angka 0, maka file gambarnya adalah clock.bmp. Untuk angka 1, filenya adalah clock1.bmp, dan seterusnya. Program juga mendeteksi penekanan tombol ESCAPE (karakter 27) yang berfungsi untuk mengakhiri program.

Kode program yang meng-handle event WM_CHAR adalah sebagai berikut.

case WM_CHAR:
  if (wParam==27)
  {
    KillTimer(hwnd, ID_TIMER);
    DestroyMenu(hPopupMenu);
    PostQuitMessage(0);
  }
  else if (wParam>=48 && wParam<=57)
  {
    ImageIndex = wParam-48;
    ChangeBitmap(imagestr[ImageIndex]);
  }
  break;

ChangeBitmap adalah fungsi untuk mengupdate background window program WOW Clock dengan gambar bitmap yang baru. Kode program fungsi ChangeBitmap adalah sebagai berikut.

void ChangeBitmap(char *bitmap)
{
  if (image!=NULL) DeleteObject(image);
  image = (HBITMAP)LoadImage(0, bitmap, IMAGE_BITMAP, 0, 0, LR_LOADFROMFILE);
  if (image)
    SendMessage(imagewnd, STM_SETIMAGE, IMAGE_BITMAP, (LPARAM)image);
  else
    MessageBox(hwnd, "File bitmap tidak ditemukan!", bitmap, MB_ICONERROR);
 }

Adapun variabel imagestr adalah variabel array yang menyimpan nama-nama file gambar bitmap yang disusun secara berurutan.

static char *imagestr[10] = {"clock.bmp", "clock1.bmp", "clock2.bmp", "clock3.bmp", "clock4.bmp", "clock5.bmp", "clock6.bmp",
 "clock7.bmp", "clock8.bmp", "clock9.bmp"};

Untuk mendapatkan nilai index dari file gambar yang sesuai dengan tombol angka yang ditekan, caranya adalah dengan mengurangi data karakter tombol angka yang dideteksi (wParam) dengan 48.

ImageIndex = wParam - 48;

Nilai 48 adalah kode ascii untuk karakter ‘0’. Dengan demikian, ketika user menekan tombol angka 0-9, maka akan didapatkan nilai wParam 48-57. Dengan mengurangi wParam dengan 48, maka akan diperoleh index file gambar bitmap yang sesuai.

Event WM_KEYDOWN

Event WM_KEYDOWN digunakan untuk mendeteksi penekanan tombol panah-kanan dan panah-kiri. Nah, berikut adalah kode program event-handler untuk event WM_KEYDOWN.

case WM_KEYDOWN:
  if (wParam==VK_LEFT)
  {
    if (ImageIndex>0)
    ImageIndex--;
  else
    ImageIndex = 9;
    ChangeBitmap(imagestr[ImageIndex]);
  }
  else if (wParam==VK_RIGHT)
  {
    if (ImageIndex<9)
    ImageIndex++;
  else
    ImageIndex = 0;
    ChangeBitmap(imagestr[ImageIndex]);
  }
  break;

Ketika user menekan tombol panah-kanan, maka program akan menaikkan nilai ImageIndex dan mengupdate background window program WOW Clock dengan gambar bitmap selanjutnya. Jika ImageIndex melebihi 9, maka nilainya akan diset menjadi 0 (kembali ke clock.bmp).

Sebaliknya, jika user menekan tombol panah-kiri, program akan menurunkan nilai ImageIndex dan mengupdate background window program dengan gambar bitmap sebelumnya. Jika nilai ImageIndex sudah mencapai nol, maka nilai ImageIndex akan diset menjadi 9 (clock9.bmp).

Popup Menu

Program WOW Clock memiliki menu popup yang diaktifkan dengan melakukan klik-kanan pada window program WOW Clock. Tampilannya adalah seperti screenshot berikut ini.

wow_clock_popup

Menu popup terdiri dari menu About, Next Image, Prev Image dan Exit. Menu About digunakan untuk menampilkan dialog about. Menu Next Image digunakan untuk mengganti gambar bitmap dengan gambar selanjutnya. Menu Prev Image digunakan untuk mengganti gambar bitmap dengan gambar sebelumnya. Dan menu Exit digunakan untuk keluar dari program.

Setiap kali menu popup dipilih oleh user, maka window program WOW Clock akan menerima pesan WM_COMMAND. Pada event inilah program menyeleksi menu pengirim pesan dengan cara seperti berikut ini.

case WM_COMMAND:
  switch (GET_WM_COMMAND_ID(wParam, lParam))
  {
  case ID_ABOUT:
    MessageBox(hwnd, about, "About", MB_ICONINFORMATION);
    break;

  case ID_NEXTIMAGE:
    if (ImageIndex<9)
      ImageIndex++;
    else
      ImageIndex = 0;
    ChangeBitmap(imagestr[ImageIndex]);
    break;

  case ID_PREVIMAGE:
    if (ImageIndex>0)
      ImageIndex--;
    else
      ImageIndex = 9;
    ChangeBitmap(imagestr[ImageIndex]);
    break;

  case ID_EXIT:
    KillTimer(hwnd, ID_TIMER);
    PostQuitMessage(0);
    break;
  }
  break;

Memindah Window Dengan Click-n-Drag

Window program WOW Clock adalah borderless, tidak mempunyai window-caption. Pada sistem operasi Windows, untuk memindahkan window, user melakukan click-n-drag pada window-caption. Karena program WOW Clock tidak memiliki caption, maka perlu ditambahkan rutin untuk mengalihkan pesan ketika user mengklik-kiri area window program WOW Clock. Dialihkan kemana? tentu saja kepada caption. Jadi ketika window menerima pesan WM_LBUTTONDOWN, maka pesan ini dikirimkan kepada caption dengan perintah:

SendMessage(hwnd, WM_NCLBUTTONDOWN, HTCAPTION, lParam);

Dengan demikian, user dapat melakukan click-n-drag untuk memindahkan lokasi window program WOW Clock.

Dialog About

Dialog ini tentunya digunakan untuk menampilkan judul program dan pembuatnya. Selain itu dapat juga digunakan untuk menampilkan informasi petunjuk penggunaan program. Tampilan dialog About program WOW Clock adalah sebagai berikut.

wow_clock_about

Pada program WOW Clock ini, About dibuat dengan fungsi MessageBox.

MessageBox(hwnd, about, "About", MB_ICONINFORMATION);

Dengan about adalah variabel string dengan deklarasi sebagai berikut.

char about[256] = "Words of Wisdom Clock (Simple Bitmap Clock)\nVersi 1\n\nTekan tombol 0-9 atau tombol panah-kanan/kiri\natau Klik Kanan --> Next/Prev Image untuk mengubah gambar.\n\nChandra MDE\nchandra@teknikelektrolinks.com\nhttp://blog.teknikelektrolinks.com";

Download Source Code

Anda dapat mengunduh program aplikasi WOW Clock lengkap dengan source-codenya. Semoga bermanfaat.

Ke Halaman Download WisdomClock.rar

Akhir Kata

Dengan membuat program sederhana seperti WOW Clock ini, kita dapat belajar beberapa hal antara lain:

  • timer
  • menu popup
  • mendeteksi penekanan tombol
  • menggunakan bitmap sebagai background window
  • memainkan file wav
  • membuat dialog about

Cukup banyak bukan? Semoga tulisan yang amburadul ini dapat digunakan sebagai bahan latihan pemrograman bahasa C pada platform Windows.

Selamat berkarya.

 

3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>