Sebarapa baguskah aplikasi HMI/Scada yang anda buat ? Wah, jawabannya pasti beragam. Banyak sekali aspek yang mempengaruhi kualitas sebuah aplikasi HMI/Scada diantaranya adalah fungsi-nya sudah sesuai dengan kebutuhan end-user, mudah navigasi-nya, stabil dan yang tak kalah penting adalah tampilan yang baik. Memang beberapa programer menomer duakan soal tampilan, yang penting fungsi sudah memenuhi permitaan end-user. Tapi menurut saya, tampilan tetap merupakan aspek penting. Jadi tidak salah jika Wonderware bersusah payah untuk membuat ‘object graphic’ yang ciamik di InTouch™ 10.0, untuk apa ? Ya, agar pengguna tertarik dan nyaman mengoprasikan mesin HMI/Scada buatan Wonderware ini.

Tip kali ini akan membahas cara membuat navigasi yang tidak umum di terapkan di aplikasi HMI, navigasi seperti ini lebih banyak diterapkan di aplikasi Web, yaitu ‘tabbed navigation’ seperti ini :

Tidak perlu menggunakan InTouch 10.0 untuk membuat navigasi seperti di atas, InTouch 7.0 pun bisa. Sedikit keahlian menggunakan software pengolah gambar seperti Photoshop, Illustrator, CorelDraw, Firework akan memudahkan membuat variasi tab-tab yang cantik.

Mula-mula buatlah gambar header, tab dan tab-selected di bawah, simpan dalam format JPG:

gambar 1: header


gambar 2: tab


gambar 3: tab selected

Selanjutnya jalankan Window Maker. Aplikasi akan dibagi kedalam dua window yaitu header dan content. Untuk resolusi layar 1024 x 768 pixel kira-kira ukuran header 1024 x 96 pixel dan content 1024 x 762 pixel seperti gambar dibawah :

Window header hanya ada satu, biasanya memuat informasi date/time, logo, nama window aktif, nama node. Sedangkan di area content bisa di tempati banyak window disesuaikan dengan aplikasi yang ditampilkan secara bergantian. Buat satu window header dengan nama “Common_frame_header”, buat empat window content dengan nama “Networking”, “Scrubber-3″, “Common_alarm” dan “Common_Trend”.

Atur properti window untuk header sepeti di bawah:

Sedang properti window untuk content sepeti di bawah:

Jangan lupa atur juga properti Window Viewer agar title bar tidak ditampilkan :

Langkah selanjutnya, buat tag memory integer, beri nama ‘zWindow_Id’. Tag ini digunakan sebagai id masing-masing window ‘content’. Buatlah sebuah QuickFunction dengan nama ‘OpenNewWindow’ isi dengan skrip berikut:

Buka window “Common_frame_header”, buat objek Bitmap isi dengan gambar 1 yang yang telah dibuat sebelumnya, kemudian seting ke ‘Bitmap - Original Size’ :

Buat dua objek Bitmap lagi isi dengan gambar 2 dan 3 serta 1 objek Text, atur posisi seperti di bawah ini:

Duplikat objek-objek tersebut seperti ini :

Buat action skrip pada objek gambar 2 (tab putih/background) :
Untuk tombol paling kanan :

CALL OpenNewWindow( 1 );

Dengan cara yang sama lengkapi action skrip tombol yang lain:

CALL OpenNewWindow( 2 );
CALL OpenNewWindow( 3 );
CALL OpenNewWindow( 4 );

Pada masing-masing objek gambar 3 (foreground) buat visibility script, untuk tab paling kanan adalah:

Dengan cara yang sama, lengkapi tiga objek gambar sisanya.

Atur posisi objek-objek gambar 2 (tab kuning/foreground) sehingga tepat di atas objek gambar 1 tapi di bawah text seperti ini:

Jalankan Window Viewer, dapatkan HMI dengan navigasi ala Website.