BAB III

ANIMASI
3.1 Pendahuluan
1. Animasi
Animasi adalah proses memberi "nyawa" dari objek-
objek yang telah digambar dan diberi tagname. Animasi ini
penting karena akan sangat mempermudah operator dalam
memahami, mengawasi, dan mengendalikan proses-proses
yang terjadi pada plant.
Cara yang mudah untuk memberikan efek animasi
pada gambar ialah dengan melakukan klik kiri objek dua kali
atau mengklik kanan dan memilih Animation Link, dan akan
muncul jendela berikut:

Touch Display
Link Link

Gambar 3.1 Windos Animation Link Lengkap

Berikut ini overview dari display link.
 Line Color ➔Mengubah warna garis luar objek
 Fill Color ➔Mengubah warna isi objek

35
 Text Color ➔Mengubah warna huruf
 Object Size ➔Mengubah ukuran objek
 Location ➔Mengubah lokasi objek
 Percent Fill ➔Mengubah persentase isian objek
 Visibility ➔Mengatur visibilitas objek
 Blink ➔Mengatur kedipan objek
 Orientation ➔Mengatur arah objek
 Disable ➔Mengatur objek "digunakan" atau tidak
Ada 4 jenis animasi yang akan dibahas, yaitu animasi diskrit,
animasi analog, value display dan user input.
1.1 Animasi Diskrit

Animasi yang paling mudah dilakukan ialah animasi

diskrit, yang berarti hanya ada dua kondisi dari objek yang
dimanipulasi. Misalnya, warna isi objek berpindah dari merah
ke hijau dan sebaliknya. Peralatan yang statusnya dapat
ditampilkan (maupun diubah) dengan jenis animasi ini
tentunya juga peralatan diskrit (contoh: tombol, status on-off
motor, limit switch). Berikut ini pembahasan fitur yang
berhubungan dengan animasi diskrit.

Display Link - Fill Color berguna untuk memberi

warna objek berdasarkan dua kondisi yaitu True (1) dan False
(0) dari ekspresi yang digunakan. Kotak Expression bisa diisi
dengan Tagname atau rumus logika tertentu yang memiliki
kondisi discrete.

Pada fitur Line Color prinsip kerjanya sama dengan

fill color hanya saja pada line color yang berubah-ubah adalah
garis pembatas objek, bukan isinya. Demikian juga halnya
dengan fitur Text Color, dimana yang berubah-ubah adalah
warna teksnya.

36
 Display Link - Miscellanous terdiri dari Blink (untuk
mengatur efek kedipan), visibility (untuk membantu proses
animasi dan security), serta disable (untuk kepentingan
security).

Display Link - Visibility digunakan untuk

menampilkan atau menghilangkan suatu objek berdasarkan
nilai pada expression. Visibility state mengatur apakah objek
akan tampil (on) atau hilang (off) saat nilai pada expression
benar.

1.2 Animasi Analog

Animasi analog ialah animasi yang dilakukan dalam

suatu range nilai tertentu. Jangkauannya jauh lebih luas
daripada animasi diskrit. Peralatan yang ditampilkan
kondisinya ataupun diubah statusnya ialah peralatan analog
(contoh: potensiometer, pengaturan kecepatan motor, sensor
suhu analog). Contoh animasi analog misalnya ialah animasi
gerakan barang dari satu tempat ke tempat lain pada conveyor.

Display Link - Percent Fill - Vertical digunakan untuk

mengisi objek secara vertical berdasarkan expression yang
diberikan. Berikut ini beberapa isian yang perlu diberikan.
 Parameter: nilai saat berada pada posisi terendah (Value
at Min Fill) dan tertinggi (Value at Max Fill).
 Persentase isian objek ditentukan oleh Min dan Max %
Fill.
 Warna lata pengisian (background color) dan arah
pengisian (direction) dapat diatur.

Display Link - Location - Horizontal digunakan untuk

menggerakkan objek secara horizontal. lsian-isian yang perlu
diberikan:
 Besar pergerakan sesuai dengan nilai pada expression.

37
 Value mendefinisikan nilai pada posisi paling kiri (At
Left End) dan kanan (At Right End)
 Horizontal Movement digunakan untuk mendefinisikan
jauh-
 dekatnya gerakan objek.
o Semakin besar selisih To Left dan To Right, semakin
cepat gerakannya.
o Arah gerakan diatur dengan memberi pertambahan
nilai positif pada objek.

Display Link-Object Size (Height) digunakan untuk

mengubah besarnya ukuran ketinggian objek berdasarkan nilai
yang diberikan. Anchor dipakai untuk menentukan darimana
objek tersebut mulai berada.

1.3 Value Display

Value display ialah fitur untuk menampilkan

nilai/kondisi suatu instrumen (misal: sensor suhu, status nyala
mati motor) ataupun nama operator pada aplikasi
Wonderware lnTouch. Hal ini tentu sangat membantu
operator dalam mengamati berbagai peralatan dan proses yang
terjadi pada plant. Untuk mewujudkan hal di atas digunakan
link berikut.

Display Link - Value Display digunakan untuk

menampilkan nilai suatu tagname di layar, dengan keterangan:
 Discrete: untuk objek tipe diskrit (0 atau 1)
 Analog: untuk objek tipe analog (berupa range)
 String: untuk objek berupa huruf (misal: nama operator)

38
1.4 User Input

Dengan InTouch juga dapat dibuat suatu fitur user input,

di mana pengguna dapat memasukkan input pada program
untuk melakukan suatu aksi tertentu pad a plant. Berikut ini
fitur-fitur yang berguna.

Pada kelompok fitur Touch Links terdapat fitur User

Input yang terdiri dari:
 Discrete: untuk inputan bilangan diskrit
 Analog: untuk inputan biangan analog
o Misal: penentuan kecepatan, posisi, suhu yang
diinginkan
 String: untuk inputan huruf
o Misal: untuk pembuatan fasilitas password

User Input - Discrete berguna untuk memberikan input

nilai diskrit tertentu (0 atau 1) dari Tagname atau hasil yang
terdapat pada expression. Sedang Msg to user, Set Prompt,
Reset Prompt berguna untuk mengatur tampilan window yang
muncul saat area diskrit ditekan.

Slider-Horizontal berguna untuk memberikan nilai

analog dengan menggeser slider ke arah horizontal. Berikut
isian-isian yang harus diberikan:

 At left dan At right berisi minimal dan maksimal pada

objek;
 Jarak pergeseran dapat diatur dengan mengubah nilai
pada To left dan To right;
 Reference location menunjukkan lokasi awal sebelum
slider digeser.

Fitur yang lain pada Touch Links ialah Touch Pushbutton

dengan keterangan pilihan sebagai berikut:

39
 Discrete Value: memberikan nilai diskrit tertentu;
 Action: jika tombol ditekan, script yang ditulis di layar
tombol tersebut akan dikerjakan;
o Contoh: pengenalan alarm pada demo reaktor
 Show Window: untuk menampilkan window tertentu
o Contoh: penampilan halaman batch % Conc. dan
maintenance pada demo reaktor;
 Hide Window: untuk menyembunyikan window tertentu.

Penjelasan khusus untuk discrete value akan diberikan

pada bagian berikut.

Touch Pushbutton - Discrete Value biasanya digunakan

dalam penekanan tombol. Saat tombol ditekan, hasilnya bisa
nyala atau mati berdasarkan Action:
 Direct: memberi kondisi on sesaat (push-on)
 Reverse: memberi kondisi off sesaat (push-off)
 Toggle: memberi kondisi on-off bergantian jika tombol
ditekan lebih dari satu kali
 Set: memberi kondisi on terus menerus
 Reset: memberi kondisi off terus menerus

3.2 Peralatan dan Komponen

o Personal komputer
o Software Wonderware InTouch

3.3 Langkah Percobaan

3.3.1 Membuat Animasi Diskrit
1. Buat gambar kurva sembarang (missal : rectangle)

40
 Gambar 3.2 Contoh bentuk rectangle

2. Klik kiri dua kali sehingga tampil jendela AnimationLink,

lihat Fill Color dan tandai Discrete.

Gambar 3.3 Windows Animation link

3. Klik pada Fill Color → Discrete, lalu pada Expression
isikan nama objek yang dibuat → kotak1.

41
 Gambar 3.4 Window property objek
4. Pada bagian Colors, True: warna merah saat True (1),
False: warna hitam saat False (0).
5. Jika sudah klik semua OK.
6. Jika variabel kotak1 belum pernah dideklarasikan
sebelumnya, akan muncul jendela pada Gambar 2.8 yang
meminta Pengguna mendefinisikan tagname.

Gambar 3.5 Permintaan definisi tagname

7. Maka jendela untuk inisialisasi tag berikut akan muncul da
nisi tipe tag yang anda butuhkan dengan menekan Type.
Gambar 2.3 akan muncul. Pilih tipe tag yang sesuai dan
tekan OK. Jika sudah pilih Save lalu Close.
8. Kemudian tambahkan tombol sebagai pemicu, bisa dari
respon sensor, namun karena plant belum online, kita

42
 menggunakan tombol sebagai pengganti sensor. Buat
tombol dengan icon button dari windowmaker.

Gambar 3.6 Penambahan Button

9. Klik kiri 2 kali pada tombol, pilih Touch Pushbuttons,

lalu pilih Discrete Value kemudian klik.

Gambar 3.7 Windows Animation Link

43
10. Maka akan muncul jendela Discrete Value, pada bagian
tagname, isikan nama sesuai yang di isikan pada rectangle
tadi, yaitu : kotak1. Kemudian pilih tipe tompol Toggle.
Kemudian klik OK pada semua jendela.

Gambar 3.8 Pengisian tagname pada button

11. Jika sudah maka klik runtime pada pojok kanan atas,
kemudian pilih ignore dan silahkan klik button.

Gambar 3.9 Letak tombol Runtime

44
3.3.2 Membuat Animasi Analog
1. Buat window baru dengan nama Animasi Analog
2. Kemudian ambil Slider dari Wizard.

Gambar 3.10 Menambah slider pada windowmaker

3. Lalu klik 2 kali pada slider dan isi Tagname: Geser1,

kemudian klik OK.

Gambar 3.11 Konfigurasi slider

4. Jika muncul Tagname Undefined maka klik OK dan isi

seperti gambar berikut.

45
 Gambar 3.12 Pengaturan Tagname untuk slider

5. Kemudian klik Save lalu close, maka slider sudah

memiliki tagname dengan data integer.
6. Langkah berikutnya tambahkan Rounded rectangle, lalu
klik 2 kali maka akan muncul jendela animation link,
kemudian lihat dibagian Location → klik Vertical.

Gambar 3.13 Penambahan pada windowmaker

7. Klik vertical dan isikan Tagname dengan Geser1 yang

dibuat tadi. Lalu klik OK.

46
 Gambar 3.14 Tagname pada rounded rectangle

8. Jika sudah maka klik runtime pada pojok kanan atas,

kemudian pilih ignore, lalu OK dan silahkan geser slider
yang dibuat tadi.

3.4 Tugas

Buat dan kerjakan tampilan seperti digambar diatas

dengan perinsip kerja " ketika slider digeser keatas maka tank
akan bergeser dari kiri kekanan sedangkan kipas berputar CW
saat slider digeser keatas dan akan berputas CCW saat slider
digeser kebawah kipas berhenti jika slider tidak bergerak".

47