10 Dec
Print This Post
‘Tabbed Navigation’ di InTouch

:: Automation :: HMI/Scada :: Wonderware Add comments
icon

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 :
graphics

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:
graphics
gambar 1: header

graphics
gambar 2: tab

graphics
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 :
graphics

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:
graphics

Sedang properti window untuk content sepeti di bawah:
graphics

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

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:
graphics

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

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

Duplikat objek-objek tersebut seperti ini :
graphics

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:
graphics
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:
graphics

Jalankan Window Viewer, dapatkan HMI dengan navigasi ala Website.

4 Responses to “‘Tabbed Navigation’ di InTouch”

  1. elmauz says:

    Thanx..mmberi pencerahan utk bikin HMI yg bagus..

  2. tnt says:

    jan joss temen, hebat3

  3. fathoni says:

    klo project udah banyak, boleh donk bagi2 freelance hehehehe

Leave a Reply