Teknik Elektro LinksThermostat, Panel Bel, Board Mikro, Driver Relay.

Nyobain Library GUI FLTK dan UI Designer FLUID

FLTK (The Fast Light Toolkit) adalah library C++ cross-platform yang menyediakan berbagai class dan fungsi untuk memudahkan pemrograman GUI. FLTK bisa digunakan pada Linux, Windows dan MacOS. FLTK juga mendukung pemrograman grafik 3D melalui penggunaan library OpenGL dan GLUT.

FLTK adalah FLTK dibuat oleh Bill Spitzak.  FLTK awalnya dikembangkan untuk mendukung industri perfilman. FLTK pertama kali dikembangkan di studio Digital Domain. Studio ini turut andil dalam pembuatan Iron Man 3, Transformer dan Titanic – jadi dapat kita yakini bahwa FLTK adalah library GUI yang mapan dan bukan library GUI sembarangan. :)

Yang penting juga bagi developer adalah FLTK itu open source dan kita bebas menggunakannya atau memodifikasinya.

Instalasi

Pada komputer wattOS-R8 dengan repository Debian Jessie yang saya gunakan, library FLTK yang saya instal adalah versi 1.1 dan versi 1.3. Anda bisa menggunakan program aplikasi Synaptic untuk melakukan instalasi.

paket_fltk

Atau Anda juga bisa melakukan instalasi melalui terminal menggunakan perintah:

$ sudo apt-get install libfltk1.3 libfltk1.3-dev libfltk-forms1.3 libfltk-gl1.3 libfltk-images1.3

Contoh Program FLTK

Berikut saya berikan contoh program GUI sederhana menggunakan library GUI FLTK. Program ini memiliki sebuah form dengan 2 buah input, 1 buah output dan 2 buah tombol. Perhatikan screenshotnya berikut ini.

fltk_luassegitiga

FLTK GUI – Menghitung Luas Segitiga

Ya, kita akan membuat program untuk menghitung luas segitiga dengan masukan nilai alas dan tinggi segitiga. Sederhana, bukan?

Kode Program

Berikut adalah kode program menghitung luas segitiga versi GUI menggunakan library GUI FLTK.

luas_segitiga.cpp

#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Button.H>
#include <FL/Fl_Input.H>
#include <FL/Fl_Output.H>
#include <cstdlib> 
#include <string.h>
#include <stdio.h>
using namespace std;

void hitung_cb(Fl_Widget* o , void*) {
    float a, t, luas;
    char s[30];

    Fl_Input* in_alas = (Fl_Input*) o->parent()->child(2);
    Fl_Input* in_tinggi = (Fl_Input*) o->parent()->child(3);
    luas = 0.5 * atof(in_alas->value()) * atof(in_tinggi->value());
    sprintf(s, "%.2f", luas);
    Fl_Output* ow = (Fl_Output*) o->parent()->child(4);
    ow->value(s);
}
void close_cb(Fl_Widget* o, void*) {
    exit(0);
}
int main() {
    Fl_Window* win= new Fl_Window(300,200, "Linux Forte - Luas Segitiga FLTK");
    win->begin();      
      Fl_Button* hitung = new Fl_Button(55, 150, 80, 30, "&Hitung");
      Fl_Button* close = new Fl_Button(160, 150, 80, 30, "&Quit"); 
      Fl_Input*  alas = new Fl_Input(100, 20, 140, 30, "Alas: ");
      Fl_Input*  tinggi = new Fl_Input(100, 60, 140, 30, "Tinggi: ");
      Fl_Output* luas = new Fl_Output(100, 100, 140, 30, "Luas: ");
    win->end();
    hitung->callback(hitung_cb);
    close->callback(close_cb);
    win->show();
    return Fl::run();
}

 

Kompilasi Program

Kompilasi program FLTK secara gampang dapat dilakukan dengan perintah:

$ fltk-config --compile luas_segitiga.cpp

Berikut adalah screenshot proses kompilasi kode program luas_segitiga.cpp:

kompilasi_luassegitiga

Gampang, bukan? :)

FLUID

Merancang UI (User Interface) akan lebih nyaman menggunakan Form Designer ketimbang merancang secara langsung melakukan coding dengan membayangkan tampilan dan kemudian melakukan proses compile and run secara berulang-ulang hingga di dapat tampilan GUI yang kita inginkan.

FLTK memiliki User Interface Designer (GUI Builder) yang handal, namanya FLUID (Fast Light User Interface Designer). FLUID mudah dipelajari dan digunakan, jadi dengan FLUID proses perancangan form aplikasi akan menjadi lebih cepat dan menyenangkan.

Btw, untuk menjaga singkatnya postingan, maka pada tulisan ini saya hanya akan memberikan beberapa screenshot FLUID saja. Contoh penggunaan FLUID mungkin saja akan saya tulis pada tulisan yang akan datang. Klik saja link FLUID yang tersedia untuk mencari tahu lebih lanjut mengenai FLUID.

Nah, berikut adalah beberapa screenshot FLUID.

fluid_kontak

FLUID – Merancang GUI Aplikasi Kontak

 

6356_large

Saya dapatkan ini dari apps.ubuntu.com

 

Kesimpulan

Instalasi sekarang juga dan gunakan FLTK + FLUID untuk membuat program GUI Linux Anda.

Selamat belajar dan selamat berkarya.

:)

No Comments

Add a Comment

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