Download - Topic 3 Animation

Transcript
  • 7/24/2019 Topic 3 Animation

    1/33

    I

    ANIMASI

    Laporan ini disusun untuk memenuhi salah satu syarat kelulusan mata

    kuliah HMI Scada pada semester V di Program Studi D3 Teknik

    Elektronika Jurusan Teknik Elektro

    Oleh:

    Regina Tamara

    NIM : 131311024

    POLITEKNIK NEGERI BANDUNG

    2015

  • 7/24/2019 Topic 3 Animation

    2/33

    1

    DAFTAR ISI

    DAFTAR ISI ........................................................................................................... 1

    DAFTAR GAMBAR .............................................................................................. 2

    TUJUAN ................................................................................................................. 4

    ALAT DAN BAHAN ............................................................................................. 4

    DASAR TEORI ...................................................................................................... 4

    HASIL PRAKTIKUM ............................................................................................ 8

    1. Animasi Diskrit ............................................................................................ 8

    2. Animasi Analog ......................................................................................... 28

    KESIMPULAN ..................................................................................................... 22

  • 7/24/2019 Topic 3 Animation

    3/33

    2

    DAFTAR GAMBAR

    Gambar 1.1 Animasi objek dari wizard .................................................................. 5

    Gambar 1.2 Animasi objek yang dibuat sendiri ...................................................... 5

    Gambar 1.3 Jenis-jenis animasi .............................................................................. 6

    Gambar 1.4 Tampilan Application Manager .......................................................... 8

    Gambar 1.5 Tampilan New Window pada InTouch MovieMaker ......................... 9

    Gambar 1.6 Animasi Diskrit ................................................................................... 9

    Gambar 1.7 Tampilan Symbol Factory by Reichard Software ............................. 10

    Gambar 1.8 Animation Link pada Symbol Factory by Reichard Software .......... 10

    Gambar 1.9 Mengisi Expression pada Fill Color .................................................. 11

    Gambar 1.10 Objek Round Rectangle .................................................................. 11

    Gambar 1.11 Animasi pada objek Round Rectangle ............................................ 11

    Gambar 1.12 Mengisi Expression pada Line Color .............................................. 12

    Gambar 1.13 Objek Text ....................................................................................... 12

    Gambar 1.14 Animasi pada objek Text................................................................. 13

    Gambar 1.15 Mengisi Expression pada Text Color .............................................. 13

    Gambar 1.16 Objek Rectangle .............................................................................. 14

    Gambar 1.17 Animasi pada objek Rectangle ........................................................ 14

    Gambar 1.18 Mengisi Expression pada Rectangle ............................................... 14

    Gambar 1.19 Objek Ellipse ................................................................................... 15

    Gambar 1.20 Mengisi Expression pada Ellipse .................................................... 15

    Gambar 1.21 Mengisi Expression pada Blink....................................................... 16

    Gambar 1.22 Objek Light ..................................................................................... 16Gambar 1.23 Mengisi Expression pada objek Light ............................................. 17

    Gambar 1.24 Objek Round Rectagle .................................................................... 17

    Gambar 1.25 Mengisi Expression pada objek Round Rectangle .......................... 17

    Gambar 1.26 Mengisi Action pada objek Round Rectangle ................................. 18

    Gambar 1.27 Objek Light ..................................................................................... 18

    Gambar 1.28 Mengisi Expression pada objek Light ............................................. 19

    Gambar 1.29 Objek Discrete Switch ..................................................................... 19

  • 7/24/2019 Topic 3 Animation

    4/33

    3

    Gambar 1.30 Mengisi Tagname pada objek Discrete Switch ............................... 20

    Gambar 1.31 Objek User Input ............................................................................. 20

    Gambar 1.32 Animasi pada objek Text................................................................. 21

    Gambar 1.33 Mengisi Tagname pada objek User Input ....................................... 21

    Gambar 1.34 Objek Text Value Display ............................................................... 22

    Gambar 1.35 Animasi pada objek Text................................................................. 22

    Gambar 1.36 Mengisi Expression pada objek Text Value Display ...................... 23

    Gambar 1.37 Tampilan Window menuju Window Script .................................... 23

    Gambar 1.38 Window Script ................................................................................ 24

    Gambar 1.39 Keadaan saat Animasi Diskrit di Runtime ...................................... 25

    Gambar 1.40 Keadaan saat Animasi Diskrit ON .................................................. 25

    Gambar 1.41 Keadaan saat Animasi Diskrit OFF ................................................. 26

    Gambar 1.42 Keadaan saat Animasi Diskrit OFF ................................................. 26

    Gambar 1.43 Pada saat Saklar 1 ditekan ............................................................... 27

    Gambar 1.44 Pilihan Saklar 1 pada saat OFF dan ON .......................................... 27

    Gambar 1.45 Keadaan saat Animasi Diskrit ON .................................................. 27

    Gambar 1.46 Animasi Analog............................................................................... 28

    Gambar 1.47 Tampilan Window menuju Window Script .................................... 28

    Gambar 1.48 Window Script Animasi Analog ..................................................... 29

    Gambar 1.49 Keadaan saat Animasi Analog di Runtime ..................................... 29

    Gambar 1.50 Keadaan saat Animasi Analog Switch ON ..................................... 30

    Gambar 1.51 Keadaan saat Animasi Analog Switch OFF .................................... 30

    Gambar 1.52 User Input untuk mengatur Slider ................................................... 31

    Gambar 1.53 Key Untuk mengatur Slider ............................................................ 31

    Gambar 1.54 Tampilan User Input........................................................................ 31

  • 7/24/2019 Topic 3 Animation

    5/33

    4

    TUJUAN

    Tujuan dari praktikum pada percobaan Animasiyaitu :

    1. Membuat animasi diskrit dari objek wizard.

    2.

    Membuat animasi diskrit dari objek yang dibuat sendiri.

    3. Dapat membuat animasifill color, line color, text color, visibility, blink, value

    display, dan user inputdiskrit.

    4. Membuat animasi analogdari objek wizard.

    5. Membuat animasi analogdari objek yang dibuat sendiri.

    6. Dapat membuat animasi percentage fill move horizontal/vertikal, value

    display, dan user input analog.

    ALAT DAN BAHAN

    1.

    Laptop.

    2. Wonderware Intouch Application.

    DASAR TEORI

    Animasi adalah proses memberi nyawa dari objek-objek yang telah digambar

    dan diberi tagname. Proses membuat animasi pada Wonderware InTouch terbagi

    menjadi dua, yaitu jika objek dari wizarddan jika objek dibuat sendiri.

    Animasi objek dari wizard adalah sebuah proses dimana kita membuat suatu

    animasi dari template yang sudah disediakan oleh Wonderware InTouch dengan

    berbagai pilihan gambar yang akan dianimasikan dengan berbagai perintah yang

    sudah tersedia.

  • 7/24/2019 Topic 3 Animation

    6/33

    5

    Gambar 1.1 Animasi objek dari wizard

    Ref : PRAKTIKUM SKTTUnit 3. Animasi.mp4

    Sementara apabila kita membuat animasi dengan objek yang dibuat sendiri

    kita dapat mengklik dua kali pada objek yang kita buat lalu kita pilih animasi apa

    yang kita inginkan.

    Gambar 1.2 Animasi objek yang dibuat sendiriRef : PRAKTIKUM SKTTUnit 3.Animasi.mp4

  • 7/24/2019 Topic 3 Animation

    7/33

    6

    Jenis-jenis animasi

    Gambar 1.3 Jenis-jenis animasi

    Ref : PRAKTIKUM SKTTUnit 3.Animasi.mp4

    Pada touch link operator atau pengguna dapat menyentuh atau memberi

    instruksi pada animasi tersebut. Sementara pada display link animasi hanya

    ditampilkan saja. Pada display link pilihan-pilihan yang ada adalah line coloruntuk

    mengubah garis luar objek, fill coloruntuk mengubah warna isi objek, text color

    untuk mengubah warna huruf, object sizeuntuk mengubah ukuran objek, location

    untuk mengubah lokasi objek,percent filluntuk mengubah presentase isian objek,

    visibilityuntuk mengubah visibilitas, blinkuntuk mengatur kedipan, disable untuk

    mengatur disabilitas.

  • 7/24/2019 Topic 3 Animation

    8/33

    7

    Jenis animasi yang digunakan

    Animasi diskrit

    Hanya ada dua kondisi dari objek yang dimanipulasi yaitu 0, atau 1. Objek yang

    dimanipulasi tentunya merupakan peralatan diskrit. Misalnya : tombol, status

    ON-OFF motor dan limit switch.

    Animasi analog

    Merupakan animasi yang dilakukan dalam suatu range nilai tertentu. Objek yang

    ditampilkan kondisinya maupun diubah statusnya adalah peralatan analog

    seperti : potensiometer, sensor suhu analog.

    Animasi value display

    Pada window makeranimasi value displaymenggunakan tanda # . Saat dilihat

    di window viewertanda # akan diganti dengan nilai yang kita inginkan.

    Animasi user input

    User dapat memasukkan input pada program untuk melakukan suatu aksi

    tertentu padaplant.

  • 7/24/2019 Topic 3 Animation

    9/33

    8

    HASIL PRAKTIKUM

    1. Animasi Diskrit

    Membuat animasi diskrit dengan animasi objek yang dibuat sendiri dan objek

    Wizard dengan cara:

    1. Buka aplikasi Wonderware InTouch dan membuat Application Manager

    yang baru

    Start > InTouch > InTouch Application Manager > New >(InTouch

    Application Manager) > Create Application Manager > Next > (nama

    Application) > Next > Finish.

    2.

    MembukaApplication Manageryang telah dibuat dan klik 2 kali.

    Gambar 1.4 TampilanApplication Manager

    3. Munculah tampilanInTouchWindowMaker. Kemudian membuat halaman

    baru dengan mengklik icon atau File > New Window (Ctrl +N).

    Setelah memilih Window Type,Kemudian memilih tombol OK.

  • 7/24/2019 Topic 3 Animation

    10/33

    9

    Gambar 1.5 TampilanNew WindowpadaInTouch MovieMaker

    4. Kemudian memasukkan objek yang terdapat pada kanan Window dan juga

    dapat memasukkan objek pada wizarddan menggunakan gambar

    ISA.Buat objek seperti yang terlihat pada gambar 1.6.

    Gambar 1.6 Animasi Diskrit

    5. Pada gambar 1.6 untuk membuat AnimasiFill Color, mendouble klik objek

    ISA dan muncul tampilan Symbol Factory by Reichard Software.

    Kemudian klik tombol Animation> Fill Color Discrete> isi Expression

    seperti pada gambar dan klik tombol OK.

  • 7/24/2019 Topic 3 Animation

    11/33

    10

    Gambar 1.7 Tampilan Symbol Factory by Reichard Software

    Gambar 1.8Animation Linkpada Symbol Factory by Reichard Software

  • 7/24/2019 Topic 3 Animation

    12/33

    11

    Gambar 1.9 MengisiExpressionpadaFill Color

    6. Pada gambar 1.6, untuk membuat AnimasiLine Colormendouble klik objek

    Round Rectangle dan muncul tampilan Animasi, kemudian pada Line

    Colorklik tombolDiscrete > isiExpressionseperti pada gambar 1000 dan

    klik tombol OK.

    Gambar 1.10 Objek Round Rectangle

    Gambar 1.11 Animasi pada objekRound Rectangle

  • 7/24/2019 Topic 3 Animation

    13/33

    12

    Gambar 1.12 MengisiExpressionpadaLine Color

    7.

    Pada gambar 1.6, untuk membuat Text Colormendouble klik objek Text

    dan muncul tampilan Animasi, kemudian pada Text Color klik tombol

    Discrete > isiExpressionseperti pada gambar 1000 dan klik tombol OK.

    Gambar 1.13 Objek Text

  • 7/24/2019 Topic 3 Animation

    14/33

    13

    Gambar 1.14 Animasi pada objek Text

    Gambar 1.15 MengisiExpressionpada Text Color

    8. Pada gambar 1.6, untuk membuat Visibility mendouble klik objek

    Rectangle dan muncul tampilan Animasi,kemudian padaMiscellaneous

    klik tombol Visibility > isiExpressionseperti pada gambar 1000 dan klik

    tombol OK.

  • 7/24/2019 Topic 3 Animation

    15/33

    14

    Gambar 1.16 Objek Rectangle

    Gambar 1.17 Animasi pada objekRectangle

    Gambar 1.18 MengisiExpressionpadaRectangle

  • 7/24/2019 Topic 3 Animation

    16/33

    15

    9.

    Pada gambar 1.6, untuk membuat Animasi Blink mendouble klik objek

    Ellipse dan muncul tampilan Animasi,kemudian padaMiscellaneousklik

    tombol Blink > isi Expression dan men-klik Enable Visible seperti pada

    gambar 1.21 dan klik tombol OK.

    Gambar 1.19 ObjekEllipse

    Gambar 1.20 MengisiExpressionpadaEllipse

  • 7/24/2019 Topic 3 Animation

    17/33

    16

    Gambar 1.21 MengisiExpressionpadaBlink

    Selanjutnya untuk membuat Animasi Blinkmenggunakan Light, mendouble

    klik objek Light kemudianisiExpressiondan men-klikEnable Blink seperti

    pada gambar 1.23 dan klik tombol OK.

    Gambar 1.22 ObjekLight

  • 7/24/2019 Topic 3 Animation

    18/33

    17

    Gambar 1.23 MengisiExpressionpada objekLight

    10.Pada gambar 1.6, untuk membuat AnimasiDisable, mendouble klik objek

    Round Rectangle dan muncul tampilan Animasi, kemudian pada

    Miscellaneousklik tombol Disable > isi Expression seperti pada gambar

    1000 dan klik tombol OK.

    Gambar 1.24 ObjekRound Rectagle

    Gambar 1.25 MengisiExpressionpada objekRound Rectangle

  • 7/24/2019 Topic 3 Animation

    19/33

    18

    Kemudian pada Touch Pushbuttonsklik tombolAction > isi Condition seperti

    pada gambar 1000 dan klik tombol OK.

    Gambar 1.26 MengisiActionpada objekRound Rectangle

    Selanjutnya untuk membuat Animasi Blinkmenggunakan Light, mendouble

    klik objek Light kemudianisiExpressionseperti pada gambar 1.28 dan klik

    tombol OK.

    Gambar 1.27 ObjekLight

  • 7/24/2019 Topic 3 Animation

    20/33

    19

    Gambar 1.28 MengisiExpressionpada objekLight

    11.Selanjutnya untuk membuat Switch, mendouble klik objek Discrete

    Switch kemudianisi Tagnameseperti pada gambar 1.30 dan klik tombol

    OK.

    Gambar 1.29 ObjekDiscrete Switch

  • 7/24/2019 Topic 3 Animation

    21/33

    20

    Gambar 1.30 Mengisi Tagnamepada objekDiscrete Switch

    12.

    Pada gambar 1.6, untuk membuat User Inputmendouble klik objek Text

    dan muncul tampilan Animasi, kemudian pada User Inputs klik tombol

    Discrete > isi Tagnamedan mengisiMessage yang akan ditampilkan seperti

    pada gambar 1.33 dan klik tombol OK.

    Gambar 1.31 Objek User Input

  • 7/24/2019 Topic 3 Animation

    22/33

    21

    Gambar 1.32 Animasi pada objek Text

    Gambar 1.33 Mengisi Tagnamepada objek User Input

  • 7/24/2019 Topic 3 Animation

    23/33

    22

    13.

    Pada gambar 1.6, untuk membuat User Inputmendouble klik objek Text

    dan muncul tampilan Animasi, kemudian pada User Inputs klik tombol

    Discrete > isi Tagnamedan mengisiMessage yang akan ditampilkan seperti

    pada gambar 1.36 dan klik tombol OK.

    Gambar 1.34 Objek Text Value Display

    Gambar 1.35 Animasi pada objek Text

  • 7/24/2019 Topic 3 Animation

    24/33

    23

    Gambar 1.36 MengisiExpressionpada objek Text Value Display

    14.

    Pada Window, klik kanan dan memilih menu WindowScript.

    Gambar 1.37 Tampilan Windowmenuju Window Script

    15.

    Kemudian muncul tampilan WindowScriptdan mengisikanscriptdengan

    kondisi seperti gambar 1.38.

  • 7/24/2019 Topic 3 Animation

    25/33

    24

    Gambar 1.38 Window Script

    16.

    Jalankan animasi yang telah dibuat dengan menekanRuntimeyang berada

    pada bagian ujung halaman. Kemudian muncul tampilan WindowViewer.

  • 7/24/2019 Topic 3 Animation

    26/33

    25

    Gambar 1.39 Keadaan saat Animasi Diskrit di Runtime

    Gambar 1.40 Keadaan saat Animasi Diskrit ON

    Pada saat animasi tersebut pada kondisi ON, line coloruntuk mengubah garis luar

    objek,fill colormengubah warna rectangle, text coloruntuk mengubah warna

    huruf text color , visibilityuntuk mengubah objek berlabel visibilitymenjadi

    hilang, blinkuntuk mengatur kedipan berlabel blink, disable untuk mengatur

    objek berlabel disableyang mengontrol lampu yang diletakkan disebelah objek

    tersebut, apabila cursor ditempatkan pada objek tersebut maka lampu akan

    menyala dan apabila kita meng-klik kiri maka lampu akan mati, kondisi

    tersebut hanya dapat dioperasikan saat tombol pada keadaan ON. Keadaan

    mati dan hidup merupakan aplikasi animasi value displayyang menandakan

    logic1 untuk hidup dan logic0 untuk mati. Animasi user input, user dapat

  • 7/24/2019 Topic 3 Animation

    27/33

    26

    memasukkan input pada program untuk melakukan suatu aksi tertentu pada

    plant.

    Gambar 1.41 Keadaan saat Animasi Diskrit OFF

    Pada saat animasi tersebut pada saat Saklar 1 kondisi ON. Keadaan Animasi sama

    seperti awal namun pada keadaan disable tidak bisa digunakan untuk mengatur

    objek berlabel disable.

    Gambar 1.42 Keadaan saat Animasi Diskrit OFF

  • 7/24/2019 Topic 3 Animation

    28/33

    27

    Gambar 1.43 Pada saat Saklar 1 ditekan

    Gambar 1.44 Pilihan Saklar 1 pada saat OFF dan ON

    Gambar 1.45 Keadaan saat Animasi Diskrit ON

  • 7/24/2019 Topic 3 Animation

    29/33

    28

    2. Animasi Analog

    Gambar 1.46 AnimasiAnalog

    1. Pada Window, klik kanan dan memilih menu WindowScript.

    Gambar 1.47 Tampilan Windowmenuju Window Script

    2. Kemudian muncul tampilan WindowScriptdan mengisikanscriptdengan

    kondisi seperti gambar 1.48.

  • 7/24/2019 Topic 3 Animation

    30/33

    29

    Gambar 1.48 Window Script AnimasiAnalog

    3. Jalankan animasi yang telah dibuat dengan menekan Runtimeyang berada

    pada bagian ujung halaman. Kemudian muncul tampilan WindowViewer.

    Gambar 1.49 Keadaan saat AnimasiAnalogdiRuntime

  • 7/24/2019 Topic 3 Animation

    31/33

    30

    Gambar 1.50 Keadaan saat AnimasiAnalogSwitch ON

    Gambar 1.51 Keadaan saat AnimasiAnalogSwitch OFF

  • 7/24/2019 Topic 3 Animation

    32/33

    1

    Gambar 1.52 User Inputuntuk

    mengatur SliderGambar 1.53 Tampilan User Input

    Gambar 1.54Key Untuk mengatur Slider

    3

  • 7/24/2019 Topic 3 Animation

    33/33

    KESIMPULAN

    Kesimpulan dari praktikum ini didapat:

    1.

    Pembuatan animasi merupakan salah satu komponen penting yang dapat

    menampilkan sebuah gambar yang memiliki kesamaan dengan plant yang

    sedang diamati pengukuran atau prosesnya secara realtime.

    2. Line colorberfungsi untuk mengubah garis luar objek.

    3. Fill colormengubah warna isi pada objek yang dipilih.

    4. Text coloruntuk mengubah warna huruf .

    5.

    Visibilityuntuk mengubah objek berlabel visibilitymenjadi hilang,

    6. Blinkuntuk mengatur kedipan berlabel blink.

    7. Disable untuk mengatur objek berlabel disableyang mengontrol lampu yang

    diletakkan disebelah objek tersebut, apabila cursor ditempatkan pada objek

    tersebut maka lampu akan menyala dan apabila kita meng-klik kiri maka lampu

    akan mati, kondisi tersebut hanya dapat dioperasikan saat tombol pada keadaan

    ON. Keadaan mati dan hidup merupakan aplikasi animasi

    8. Value display yang menandakan logic 1 untuk hidup dan logic 0 untuk

    mati.


Top Related