1. Koneksi ESP32 dengan EasyBuilder Pro

Daftar Isi:


===========================================================================================

1. Toggle Swith EBPro => LED Wokwi  

Berikut ini langkah-langkahnya:

Gambar 1.1 Rangkaian ESP32 dengan sebuah LED di kaki GPIO2 dengan kode program mengikuti contoh program di library PubSubClient

2. Download EasyBuilder Pro (EBPro) yang terbaru di link ini: EasyBuilderPro_download atau di link ini: EasyBuilderPro_unduh
3. Buat project baru di EBPro, dan ikuti langkah-langkah sesuai gambar berikut ini.

Gambar 1.2 Di jendela New Project, pilih Model (semua model bisa MQTT, kecuali IP Series)

Gambar 1.3 Muncul jendela System Parameter Settings, klik OK

Gambar 1.4 Pilih menu Object, klik Toggle Switch, biarkan lokasi memori default = LB-0

Gambar 1.5 Tetap di jendela New Toggle Switch, pilih Shape, klik Picture library, pilih System Control Panel - Toggle Switch, pilih salah satu jenis Toggle Switch

Gambar 1.6 Klik OK, tempatkan objek Toggle Switch pada layar HMI

Gambar 1.7 Pilih menu IIoT/Energy, klik MQTT, centang Enable

Gambar 1.8 Di jendela New MQTT Server, centang use domain name, isi kolom Domain name: mqtt-dashboard.com, kemudian klik OK

Gambar 1.9 Di jendela MQTT, di tab Topic Publisher, klik tombol New, maka muncul jendela New MQTT Topic Publisher

Gambar 1.10 Topic Publisher di jendela MQTT EBpro harus sama seperti Topic yang di-Subscribe ESP32 di Wokwi, yaitu di baris 46, yang Topic subscribe-nya diisi: ebpro_wokwi/led 

Gambar 1.11 Isi Topic: ebpro_wokwi/led, hilangkan tanda centang pada kotak include timestamp dan kotak use top level key ...

Gambar 1.12 Masih di jendela New MQTT Topic Publisher, klik tab Address, klik tombol New   

Gambar 1.13 Di jendela Type/Address, isi kolom Name: led, address: LB-0, beri centang pada Remove JSON array bracket dan klik OK

Gambar 1.14 Muncul nama led di Address LB-0 pada daftar Address, klik OK

Gambar 1.15 Muncul nama Topic: ebpro_wokwi/led pada daftar Topic Publisher, klik Exit

Gambar 1.16 Jalankan simulasi dengan memilih menu Project, klik pada Offline Simulation

Catatan: Pilih Offline Simulation karena simulasi dijalankan tanpa terhubung dengan hardware HMI. Apabila terhubung dengan hardware HMI, maka pilih Online Simulation.

Gambar 1.17 Jalankan simulasi Wokwi dengan menekan tombol Run (berwarna hijau), naikkan tuas Toggle Switch, maka terlihat LED di kaki GPIO2 ESP32 menyala, dan di Serial Monitor menampilkan tulisan: Message arrived [ebpro_wokwi/led] { "led" : true }

Gambar 1.18 Turunkan tuas Toggle Switch, maka terlihat LED di kaki GPIO2 ESP32 padam, dan di Serial Monitor menampilkan tulisan: Message arrived [ebpro_wokwi/led] { "led" : false }

Catatan: Agar bisa mengontrol nyala LED, LED hanya dinyalakan apabila data yang diterima dari MQTT mengandung huruf atau karakter "t", khususnya di indeks ke 14 (lihat baris program 33). Di luar itu, maka LED  padam.

File EasyBuilder Pro yang dibuat di bagian ini dapat diunduh di link ini: projek1 

Agar lebih jelas, berikut ini video singkat pembuatannya mengikuti langkah-langkah di atas:

Video koneksi MQTT untuk menampilkan kondisi Toggle Switch di EBPro pada objek LED di Wokwi

===========================================================================================


2. Slide Switch Wokwi => Bit Lamp EBPro

Berikut ini langkah-langkahnya:

Gambar 2.1 Rangkaian ESP32 dengan Slide Switch dan LED

2. Apabila belum memiliki software EasyBuilder Pro (EBPro), download software yang terbaru di link ini: EasyBuilderPro_download atau di link ini: EasyBuilderPro_unduh
3. Untuk mempercepat pembuatan di bagian ini, gunakan file projek yang telah dibuat sebelumnya, yang dapat diunduh di link ini: projek1. Buka file tersebut dengan software EasyBuilder Pro.

Gambar 2.2 File projek yang telah dibuat di bagian sebelumnya

Gambar 2.3 Pilih menu Object, pilih Bit Lamp, atur lokasi memori = LB-1, klik OK

Gambar 2.4 Tempatkan objek Bit Lamp di samping objek Toggle Switch

Gambar 2.5 Pilih IIoT/Energy, klik MQTT, klik Enable, klik Settings, centang use domain name, isi kolom Domain name: mqtt-dashboard.com, klik OK

Gambar 2.6 Di jendela MQTT, klik tab Topic Subscriber, klik New 

Gambar 2.7 Di jendela MQTT Topic Subsriber, isi Topic: wokwi_ebpro/sw, hilangkan tanda centang pada kotak include timestamp dan kotak use top level key ...

Gambar 2.8 Di jendela MQTT Topic Subscriber, klik Address, klik New, Di jendela Type/Address, isi kolom Name: sw, address: LB-1, beri centang pada Remove JSON array bracket dan klik OK  

Gambar 2.9 Di jendela MQTT Topic Subscriber, klik OK

Gambar 2.10 Di jendela MQTT, di Tab Topic Subscriber, muncul topic: wokwi_ebpro/sw, klik OK

Gambar 2.11 Jalankan simulasi EasyBuilder Pro, pilih menu Project, klik Offline Simulation

Gambar 2.12 Geser Slide Switch di Wokwi ke kanan, maka objek Bit Lamp di EBPro menyala dan Serial Monitor menampilkan tulisan Publish message: {"sw":true}  

Gambar 2.13 Geser Slide Switch di Wokwi ke kiri, maka objek Bit Lamp di EBPro padam dan Serial Monitor menampilkan tulisan Publish message: {"sw":false}

File EasyBuilder Pro yang dibuat di bagian ini dapat diunduh di link ini: projek2

Agar lebih jelas, berikut ini video singkat pembuatannya mengikuti langkah-langkah di atas:

Video koneksi MQTT untuk menampilkan kondisi Slide Switch di Wokwi pada objek Lamp di EBPro



===========================================================================================

3. Multi-State Switch EBPro => RGB LED Wokwi 

Berikut ini langkah-langkahnya:
1. Mula-mula, buka project Wokwi ini: https://wokwi.com/projects/394770617040047105

Gambar 3.1 Rangkaian ESP32 dengan Slide Switch, LED dan LED RGB

2. Apabila belum memiliki software EasyBuilder Pro (EBPro), download software yang terbaru di link ini: EasyBuilderPro_download atau di link ini: EasyBuilderPro_unduh
3. Untuk mempercepat pembuatan di bagian ini, gunakan file projek yang telah dibuat sebelumnya, yang dapat diunduh di link ini: projek2. Buka file tersebut dengan software EasyBuilder Pro.

Gambar 3.2 File projek yang telah dibuat di bagian sebelumnya

Gambar 3.3 Pilih menu Object, pilih Multi-State Switch, isi address = LW-0, pilih Switch style: JOG+, isi No. of states = 10, Cyclical: Enable, klik OK

Gambar 3.4 Masih di jendela Multi-State Switch, klik Tab Shape, klik Picture Library, pilih System Control Panel, pilih Selector Switch, pilih Selector Switch dengan 10 kondisi (state), klik OK 

4. Karena terkait dengan warna, maka tambahkan kotak warna, yang nantinya akan berubah mengikuti pilihan pada Selector Switch. Untuk membuat kotak warna tersebut, download file ini: Kotak_warna, kemudian Ekstraks file tersebut, maka akan muncul folder color_box yang berisi 10 buah gambar.
5. Berikutnya buka menu Object, pilih Word Lamp. Di jendela Word Lamp, atur lokasi memori (address): LW-0, dan atur jumlah kondisi (No. of states): 10, klik OK.
  
Gambar 3.5 Buka menu Object, pilih object Word Lamp, di jendela Word Lamp, atur address: LW-0, No. of states: 10, klik OK

Gambar 3.6 Masih di jendela Word Lamp, klik tab Shape, klik Picture Library, di jendela Picture Manager, klik tab Project, tekan tombol + (Add a new picture), kemudian tekan tombol New, arahkan pencarian file ke folder color_box, klik OK

Gambar 3.7 Setelah di-klik OK, maka di jendela Word Lamp, di tab Shape, akan muncul objek kotak dengan 10 kondisi warna yang berbeda-beda, mulai dari warna hitam hingga putih

Gambar 3.8 Masih di jendela Word Lamp, klik tab Label, isi Label dari state 0 - 9, sesuaikan dengan nama warnanya, klik OK

Gambar 3.9 Tempatkan objek Word Lamp berupa kotak warna tersebut di samping objek Multi-State Switch

Gambar 3.10 Berikutnya, tambahkan Topic Publisher MQTT, untuk itu buka menu IIoT/Energy, klik MQTT, kemudian di tab Topic Publisher, klik 2 kali topic1, di jendela Topic Publisher, klik tab Address

Gambar 3.11 Di jendela Topic Publisher, di tab Address, isi Name: rgb, pilih Word, isi Address: LW-0, beri centang pada Remove JSON array Bracket ..., dan klik OK

Gambar 3.12 Terakhir, jalankan simulasi EBPro dengan memilih menu Project, klik Offline Simulation

Gambar 3.13 Jalankan simulasi Wokwi dengan menekan tombol Run (berwarna hijau), klik objek Selektor (Multi-State Switch) hingga berputar, perhatikan warna LED RGB dan tampilan Serial Monitor - terlihat ketika Selector di posisi 6, RGB LED warna biru

Gambar 3.14 Ketika Selector di posisi 2, RGB LED warna merah

Gambar 3.15 Ketika Selector di posisi 4, RGB LED warna kuning

File EasyBuilder Pro yang dibuat di bagian ini dapat diunduh di link ini: projek3

Agar lebih jelas, berikut ini video singkat pembuatannya mengikuti langkah-langkah di atas:

Video koneksi MQTT untuk mengontrol objek RGB LED di Wokwi dengan Multi-State Switch di EBPro



===========================================================================================

4. Analog Joystick Wokwi => Moving Shape EBPro 

Berikut ini langkah-langkahnya:
1. Mula-mula, buka project Wokwi ini: https://wokwi.com/projects/394911042572079105

Gambar 4.1 Rangkaian ESP32 dengan Analog Joystick, Slide Switch, LED, dan LED RGB

2. Apabila belum memiliki software EasyBuilder Pro (EBPro), download software yang terbaru di link ini: EasyBuilderPro_download atau di link ini: EasyBuilderPro_unduh
3. Untuk mempercepat pembuatan di bagian ini, gunakan file projek yang telah dibuat sebelumnya, yang dapat diunduh di link ini: projek3. Buka file tersebut dengan software EasyBuilder Pro.

Gambar 4.2 File projek yang telah dibuat di bagian sebelumnya

4. Berikutnya, buka menu Object, ambil dan tempatkan 6 buah objek Numeric seperti gambar di bawah ini, dan atur Address memorinya berturut-turut mulai dari LW-1, LW-2, LW-3 untuk 3 objek di atas, sedangkan 3 objek di bawahnya: LW-4, LW-5, LW-6, kemudian klik OK.

Gambar 4.3 Tempatkan 6 buah objek Numeric, beri address mulai dari LW-1 hingga LW-6

5. Berikutnya, di menu Object, klik Animation, pilih Moving-Shape.

Gambar 4.4 Pilih objek Moving Shape di kategori Animation

6. Di jendela Moving Shape, isi Address: LW-4, No. of states: 10, Mode: X & Y axis, Max. X: 800 dan Max. Y: 480 (sesuaikan nilai Max. X dan Max. Y ini dengan ukuran layar).

Gambar 4.5 Isi address: LW-4, No. of states: 10, Mode: X & Y axis, Max. X: 800, Max. Y: 480

Catatan: Objek Moving Shape ini memerlukan 3 lokasi memori Word, yang dimulai dari alamat yang diisikan pada kolom Address. Tiga lokasi memori ini berturut-turut digunakan untuk pengaturan kondisi objek, perpindahan horizontal objek dan perpindahan vertikal objek.

7. Masih di jendela Moving Shape, klik pada tab Shape, diinginkan objeknya diganti dengan kotak warna. Untuk itu, download file ini: Kotak_warna, kemudian ekstraks file tersebut, maka akan muncul folder color_box yang berisi 10 buah gambar. Di tab Shape, klik pada Picture Library. Di jendela Picture Manager, pilih tab Project, klik tombol + (Add new picture), kemudian lanjutkan dengan meng-klik tombol New, arahkan pada lokasi gambar di folder color_box, pilih semua gambar, kemudian klik OK,, maka di jendela Moving Shape akan muncul kotak gambar, yang memiliki 10 kondisi.

Gambar 4.6 Di tab Shape, klik Picture Library, pilih Project, klik Add new picture, klik New, dan isi dengan 10 gambar di folder color_box, klik OK

8. Masih di jendela Moving Shape, klik pada tab Label, centang use label, isi secara berturut-turut, mulai dari State: 0 - 9, dengan label berikut ini:
  • State 0: Black
  • State 1: Brown
  • State 2: Red
  • State 3: Orange
  • State 4: Yellow
  • State 5: Green
  • State 6: Blue
  • State 7: Purple
  • State 8: Grey
  • State 9: White
Catatan: untuk warna yang gelap, buat labelnya berwarna putih, untuk warna yang terang, buat labelnya berwarna hitam.

Gambar 4.7 Beri label untuk semua kondisi (state) sesuai warnanya

9. Masih di jendela Moving Shape, klik pada tab Profile, isi X: 0 dan Y:0. Klik OK.

Gambar 4.8 Di tab Profile, isi X:0 dan Y:0

10. Terlihat objek Moving Shape, dengan 10 state, berada di pojok kiri atas (posisi X:0, Y:0).

Gambar 4.9 Objek Moving Shape dengan 10 state berada di X:0, Y:0 

11. Berikutnya, agar objek Moving Shape ini bisa terhubung dengan Analog Joystick di ESP32 di Wokwi, tambahkan MQTT. Klik pada menu IIoT/Energy, klik MQTT, klik tab Topic Subscriber.

Gambar 4.10 Tambahkan MQTT, klik menu IIoT/Energy, klik MQTT, klik tab Topic Subscriber

12. Di tab Topic Subscriber, klik New. Di jendela MQTT, isi kolom Topic: wokwi_ebpro/joy, kemudian hilangkan centang Verify timestamp, dan juga Use top level key.

Gambar 4.11 Klik tombol New di tab Topic Subscriber, kemudian isi Topic: wokwi_ebpro/joy, hilangkan tanda centang pada 2 opsi di Content format

13. Masih di jendela MQTT, klik tab Address, klik tombol New, isi Name: x, pilih Word, isi Address: LW-1, beri centang pada Remove JSON array bracket, dan klik OK.

Gambar 4.12 Di tab Address, klik New, isi Name: x, Word, Address: LW-1, Remove JSON, klik OK 

14. Masih di jendela MQTT, klik tab Address, klik tombol New, isi Name: y, pilih Word, isi Address: LW-2, beri centang pada Remove JSON array bracket, dan klik OK.

Gambar 4.13 Di tab Address, klik New, isi Name: y, Word, Address: LW-2, Remove JSON, klik OK

15. Masih di jendela MQTT, klik tab Address, klik tombol New, isi Name: s, pilih Word, isi Address: LW-3, beri centang pada Remove JSON array bracket, dan klik OK.

Gambar 4.14 Di tab Address, klik New, isi Name: s, Word, Address: LW-3, Remove JSON, klik OK

16. Seharusnya di tab Address akan muncul daftar 3 alamat mulai dari LW-1 hingga LW-3.

Gambar 4.15 Terlihat daftar alamat di tab Address, mulai dari LW-1 sampai LW-3

17. Karena data dari MQTT menggunakan alamat LW-1, LW-2 dan LW-3, sedangkan objek Moving Shape menggunakan alamat LW-4, LW-5 dan LW-6, maka diperlukan penghubung ketiga alamat MQTT tersebut dengan ketiga alamat objek Moving Shape. Penghubung tersebut dapat dibuat dengan fitur Macro. Untuk itu buka menu Project, klik Macro.

Gambar 4.16 Buka menu Project, klik Macro untuk menghubungkan Address LW-1, LW-2 dan LW-3 dari MQTT dengan Address LW-4, LW-5 dan LW-6 yang digunakan oleh objek Moving Shape

18. Di jendela Macro Manager, klik tombol New, maka muncul jendela Work Space.

Gambar 4.17 Di jendela Macro Manager, klik tombol New

19. Di jendela Work Space, copy kode macro berikut ini, dan tempelkan di bagian Editor, seperti terlihat pada gambar di bawah ini. Beri centang pada opsi Periodical Execution, ganti angka pada kolom Time Interval dari 10 menjadi 1. Klik tombol Save & Compile untuk kompilasi program. Apabila tidak ada Error, klik tombol Exit.
      1. macro_command main()
      2. short a[3]
      3. short b[3]
      4. GetDataEx (a[0], "Local HMI", LW, 1, 3) 
      5. GetDataEx (b[0], "Local HMI", LW, 4, 3)
      6. b[0] = a[2]
      7. if a[0] == 2 then 
      8. b[1]=b[1]+8
      9. else if a[0] == 1 then 
      10. b[1]=b[1]-8 
      11. end if
      12. if a[1] == 1 then
      13. b[2]=b[2]-4
      14. else if a[1] == 2 then 
      15. b[2]=b[2]+4 
      16. end if
      17. if b[1] < 0 then
      18. b[1] = 0
      19. end if
      20. if b[1] > 800 then
      21. b[1] = 800
      22. end if
      23. if b[2] < 0 then
      24. b[2] = 0
      25. end if
      26. if b[2] > 480 then
      27. b[2] = 480
      28. end if
      29. SetDataEx(b[0], "Local HMI", LW, 4, 3)
      30. end macro_command

Gambar 4.18 Tempelkan kode macro di kotak Editor, centang opsi Periodical Execution, isi Time Interval 1x100ms, klik Save & Compile, apabila tidak ada Error, klik Exit

20. Terlihat di jendela Macro Manager, di kotak Macro list, sebuah Macro baru (macro_0), dengan jenis eksekusi Periodical (P), klik Exit.

Gambar 4.19 Muncul nama macro_0 pada kotak Macro list, klik Exit

21. Langkah terakhir, jalankan simulasi dengan memilih menu Project, klik Offline Simulation.


Gambar 4.20 Jalankan simulasi EBPro dengan memilih menu Project, klik Offline Simulation

21. Jalankan juga simulasi Wokwi dengan menekan tombol Run (berwarna hijau). Berikut ini berturut-turut gambar simulasi Wokwi dengan EBPro. Gerakkan Joystick ke kiri dan ke kanan, ke atas dan ke bawah, maka seharusnya objek Moving Shape berpindah mengikuti arah gerakan Joystick. Tekan bagian tengah Joystick, maka seharusnya warna dan label pada objek Moving Shape akan berubah, seperti ditunjukkan pada gambar berikut ini.

Gambar 4.21(a) Objek Moving Shape dipindahkan ke posisi X:216, Y:152 dengan state: 6 (Blue)

Gambar 4.21(b) Objek Moving Shape dipindahkan ke posisi X:216, Y:284 dengan state: 7 (Purple)

Gambar 4.21(c) Objek Moving Shape dipindahkan ke posisi X:16, Y:68 dengan state: 2 (Red)

Gambar 4.21(d) Objek Moving Shape dipindahkan ke posisi X:368, Y:212 dengan state: 4 (Yellow)

File EasyBuilder Pro yang dibuat di bagian ini dapat diunduh di link ini: projek4

Agar lebih jelas, berikut ini video singkat pembuatannya mengikuti langkah-langkah di atas:

Video koneksi MQTT untuk mengontrol kondisi dan posisi objek Moving Shape di EBPro dengan Analog Joystick di ESP32 di Wokwi



===========================================================================================



5. HX711 Load Cell Wokwi => Meter Display EBPro  

Berikut ini langkah-langkahnya:

Gambar 5.1 Rangkaian ESP32 dengan sebuah OLED I2C dan HX711 Load Cell 50kg

2. Buat project baru di EBPro, dan ikuti langkah-langkah sesuai gambar berikut ini. Apabila belum memiliki software EasyBuilder Pro (EBPro), download software yang terbaru di link ini: EasyBuilderPro_download atau di link ini: EasyBuilderPro_unduh

Gambar 5.2 Di jendela New Project, pilih salah satu Model (semua model bisa MQTT, kecuali IP Series), kemudian klik OK

3. Muncul jendela System Parameter Settings. Klik OK.

Gambar 5.3 Muncul jendela System Parameter Settings, klik OK

4. Buka menu Object, pilih Numeric. Di jendela New Numeric, biarkan Address LW-0.

Gambar 5.4 Buka menu Object, pilih Numeric, biarkan Address LW-0.

5. Di tab Format, pilih Type: Customized, Left of decimal pt.: 5, format: **kg ***g, dan klik OK.

Gambar 5.5 Di tab format, pilih Type: Customized, Left of decimal: 5, format: **kg ***g

6. Berikutnya tambahkan teks di atas objek Numeric, isi kolom Content: Berat:

Gambar 5.6 Tambahkan teks dengan tulisan "Berat:" di atas objek Numeric

7. Berikutnya tambahkan objek Meter Display, di kategori Chart.

Gambar 5.7 Tambahkan objek Meter Display di kategori Chart

8. Di jendela Meter Display, biarkan Address: LW-0.

Gambar 5.8 Di jendela Meter Display, biarkan Address: LW-0

9. Masih di jendela Meter Display, buka tab Shape, klik Picture Library, pilih System Meter, pilih Ribbon, pilih gambar lingkaran penuh.

Gambar 5.9 Di jendela Meter Display, pilih Shape, Picture Library, pilih System Meter, pilih Ribbon, pilih gambar lingkaran penuh

10. Masih di jendela Meter Display, buka tab Outline, klik tombol Angle, pilih 225° - 135°.

Gambar 5.10 Di jendela Meter Display, buka tab Outline, klik tombol Angle, pilih 225° - 135°

11. Masih di tab Outline, isi Main scale: 11, centang Coordinate, isi Sub scale: 9, pilih Arm style yang diinginkan, isi Length: 100.

Gambar 5.11 Isi Main scale: 11, centang Coordinate, isi Sub scale: 9, pilih Arm style, isi Length: 100

12. Masih di tab Outline, buka tab Limits, isi Max: 50000, centang Use scale label, isi Font: Arial, dan isi Size: 10. 

Gambar 5.12 Buka tab Limits, isi Max: 50000, centang Use scale label, isi Font: Arial, dan isi Size: 10 

13. Buka tab Profile, isi Width: 300, kemudian klik OK.

Gambar 5.13 Buka tab Profile, isi Width: 300, kemudian klik OK

14. Berikutnya, buka menu IIoT/Energy, klik MQTT, klik Enable, di jendela MQTT server, centang Use domain name, isi kolom Domain name: mqtt-dashboard.com, klik OK.

Gambar 5.14 Buka menu IIoT/Energy, klik MQTT, klik Enable, centang Use domain name, isi Domain name: mqtt-dashboard.com, klik OK

15. Berikutnya, di jendela MQTT, klik tab Topic Subscriber, klik New, di jendela MQTT Topic Subscriber, isi Topic: wokwi_ebpro/berat, hilangkan tanda centang pada 2 opsi di Content format.

Gambar 5.15 Klik tab Topic Subscriber, klik New, isi Topic: wokwi_ebpro/berat, hilangkan tanda centang pada 2 opsi di Content format.

16. Berikutnya, klik tab Address, klik tombol New, isi Name: gram, pilih Type Word, biarkan Address: LW-0, centang pada opsi Remove JSON array bracket, klik OK.

Gambar 5.16 Klik tab Address, klik tombol New, isi Name: gram, pilih Type Word, biarkan Address: LW-0, centang pada opsi Remove JSON array bracket, klik OK.

17. Terlihat muncul nama gram dengan address LW-0 di jendela MQTT Topic Subscriber. Klik OK untuk menutup jendela.

Gambar 5.17 Muncul nama gram dengan address LW-0 di jendela MQTT Topic Subscriber, klik OK

18. Di jendela MQTT, muncul Topic-1: wokwi_ebpro/berat di tab Topic Subcriber. Klik Exit.

Gambar 5.18 Di jendela MQTT, muncul topic wokwi_ebpro/berat di tab Topic Subcriber, klik Exit.

19. Jalankan EasyBuilder Pro dengan membuka menu Project, pilih Offline Simulation. 

Gambar 5.19 Jalankan EasyBuilder Pro dengan membuka menu Project, pilih Offline Simulation 

20. Jalankan juga Wokwi, klik pada komponen HX711 Load Cell Sensor, geser Slider secara sembarang, dan amati nilai yang ditampilkan di OLED dan di Serial Monitor, serta di objek HMI EasyBuilder Pro (objek Meter Display dan objek Numeric). Gambar berikut ini menunjukkan bahwa keempatnya menampilkan nilai yang sama.

Gambar 5.20(a) Nilai berat di OLED, Serial Monitor, Meter Display dan Numeric menampilkan hasil yang sama, yaitu 34600, atau 34kg 600g

Gambar 5.20(b) Nilai berat di OLED, Serial Monitor, Meter Display dan Numeric menampilkan hasil yang sama, yaitu 47000, atau 47kg 0g

Gambar 5.20(c) Nilai berat di OLED, Serial Monitor, Meter Display dan Numeric menampilkan haisl yang sama, yaitu 13700, atau 13kg 700g

File EasyBuilder Pro yang dibuat di bagian ini dapat diunduh di link ini: projek5  

Agar lebih jelas, berikut ini video singkat pembuatannya mengikuti langkah-langkah di atas:

Video koneksi MQTT untuk menghubungkan sensor Load Cell (simulasi Wokwi) dengan HMI Weintek (simulasi EasyBuilder Pro)



===========================================================================================


6. Slider EBPro => Servo Wokwi  

Berikut ini langkah-langkahnya:

Gambar 6.1 Rangkaian ESP32 dengan sebuah OLED I2C, HX711 Load Cell 50kg dan Motor Servo

2. Untuk mempercepat pembuatan di bagian ini, gunakan file projek yang telah dibuat sebelumnya, yang dapat diunduh di link ini: projek5. Buka file tersebut dengan software EasyBuilder Pro. Apabila belum memiliki software EasyBuilder Pro (EBPro), download software yang terbaru di link ini: EasyBuilderPro_download.

Gambar 6.2 File projek yang telah dibuat di bagian sebelumnya

3. Berikutnya, buka menu Object, pilih objek Slider. Di jendela Slider, isi High limit: 180, dan Address: LW-1.

Gambar 6.3 Buka menu Object, pilih objek Slider, isi High limit: 180, dan Address: LW-1

4. Buka tab Outline, pilih Slider button, warna pada Frame, Background dan Slot, klik OK.

Gambar 6.4 Buka tab Outline, pilih Slider button, warna pada Frame, Background dan Slot, klik OK

5. Tempatkan objek Slider di layar HMI.

Gambar 6.5 Tempatkan objek Slider di layar HMI.

6. Setelah objek Slider berhasil ditambahkan, berikutnya tambahkan objek Meter Display yang akan menampilkan posisi poros yang dihasilkan Motor Servo. Untuk itu buka menu Object, pilih Chart, pilih Meter Display.

Gambar 6.6 Di menu Object, pilih Chart, klik pada Meter Display

7. Di jendela Meter Display, di tab Limit, atur Max: 180, beri centang pada opsi Enable di Range limits, isi Low limit: 60 dan High limit: 120.

Gambar 6.7 Buka tab Limit, atur Max: 180, centang opsi Enable di Range limits, isi Low limit: 60 dan High limit: 120

8. Berikutnya, buka tab General, atur Address: LW-1

Gambar 6.8 Buka tab General, atur Address: LW-1

9. Berikutnya, buka tab Outline, klik pada tombol Angle, pilih sudut 270° - 90°.

Gambar 6.9 Buka tab Outline, klik pada tombol Angle, pilih sudut 270° - 90°.

10. Setelah pengaturan sudut, berikutnya isi Main scale: 11, Sub-scale: 9, pilih Arm style, atur width: 10 dan Length: 110.

Gambar 6.10 Isi Main scale: 11, Sub-scale: 9, pilih Arm style, atur width: 10 dan Length: 110

11. Berikutnya, buka tab Shape, hilangkan tanda centang pada opsi Use picture, klik OK.

Gambar 6.11 Buka tab Shape, hilangkan tanda centang pada opsi Use picture, klik OK

12. Berikutnya, atur lebar Meter Display yang baru menjadi 300, dengan meng-klik 2 kali Meter Display, di tab Profile, isi Width: 300.

Gambar 6.12 Klik 2 kali objek Meter Display yang baru, di tab Profile, isi Width: 300.

13. Tempatkan objek Slider tepat di bawah objek Meter Display yang baru.

Gambar 6.13 Tempatkan objek Slider tepat di bawah objek Meter Display yang baru.

14. Agar sama seperti Meter Display Sensor Berat, tambahkan objek Numeric untuk Meter Display Servo. Untuk itu copy-paste objek Numeric Berat beserta teks di atasnya.

Gambar 6.14 Duplikasi objek Numeric Berat beserta teks di atasnya

15. Ganti tulisan "Berat" menjadi "Sudut", ubah Format tampilan datanya menjadi ***°.

Gambar 6.15 Ganti tulisan "Berat" menjadi "Sudut", ubah Format menjadi ***°.

16. Berikutnya, buka menu IIoT/Energy, klik tombol MQTT, centang Enable, di Tab Topic Publisher, tekan tombol New, dan di jendela Topic Publisher, isi Topic: ebpro_wokwi/servo, di Content Format, hilangkan centang pada kedua opsi.

Gambar 6.16 Enable MQTT, klik New Topic Publisher, isi Topic: ebpro_wokwi/servo, sederhanakan Format data dengan menghilangkan centang pada kedua opsi di Content Format

17. Masih di jendela Topic Publisher, buka tab Address, isi Name: sudut, Type: Word, Address: LW-1, beri centang pada opsi Remove JSON array bracket, klik OK, klik Exit untuk menutup jendela MQTT.

Gambar 6.17 Buka tab Address, isi Name: sudut, Type: Word, Address: LW-1, centang opsi Remove JSON array bracket, klik OK.

18. Berikutnya, jalankan EasyBuilder Pro dengan membuka menu Project, klik Offline Simulation.

Gambar 6.18 Jalankan EasyBuilder Pro dengan membuka menu Project, pilih Offline Simulation

19. Jalankan juga simulasi Wokwi, kemudian geser knob Slider di EasyBuilder Pro, dan amati posisi lengan Motor Servo serta tampilan OLED dan Serial Monitor, seharusnya keduanya mengikuti nilai Slider. Juga lakukan pengubahan nilai berat pada Load Cell, klik pada komponen Load Cell di Wokwi, geser slider yang muncul di simulasi Wokwi.

Gambar 6.19(a) Ketika simulasi EBPro dan Wokwi dijalankan, terlihat posisi lengan Motor Servo di Wokwi, mengikuti nilai Slider di EBPro, begitu pula nilai Meter Display Berat di EBPro, mengikuti nilai Load Cell di Wokwi

Gambar 6.19 (b) Ketika simulasi EBPro dan Wokwi dijalankan, terlihat posisi lengan Motor Servo di Wokwi, mengikuti nilai Slider di EBPro, begitu pula nilai Meter Display Berat di EBPro, mengikuti nilai Load Cell di Wokwi

Gambar 6.19(c) Ketika simulasi EBPro dan Wokwi dijalankan, terlihat posisi lengan Motor Servo di Wokwi, mengikuti nilai Slider di EBPro, begitu pula nilai Meter Display Berat di EBPro, mengikuti nilai Load Cell di Wokwi

File EasyBuilder Pro yang dibuat di bagian ini dapat diunduh di link ini: projek6  

Agar lebih jelas, berikut ini video singkat pembuatannya mengikuti langkah-langkah di atas:



Video koneksi MQTT untuk menghubungkan objek Slider di EasyBuilder Pro dengan Motor Servo yang terhubung dengan ESP32 (simulasi Wokwi)


===========================================================================================


7. HC-SR04 Wokwi => Tank EBpro  

Berikut ini langkah-langkahnya:

Gambar 7.1 Rangkaian ESP32 dengan sebuah sensor ultrasonik dan LCD I2C 16x2

2. Buat project baru di EBPro, dan ikuti langkah-langkah sesuai gambar berikut ini.

Gambar 7.2 Di jendela New Project, pilih salah satu Model (semua model bisa MQTT, kecuali IP Series)

Gambar 7.3 Muncul jendela System Parameter Settings, klik OK

Gambar 7.4 Di Tab Home, klik tombol Browse libraries di pojok kanan

Gambar 7.5 Di jendela Browse libraries, pilih picture, pilih Tanks

Gambar 7.6 Di kategori Tanks, pilih Tanks_2.flbx, klik Add to Project, kemudian klik Close

Gambar 7.7 Ambil salah satu tipe Tank, tarik dan tempatkan di tengah halaman layar

Gambar 7.8 Masih di Tab Home, klik tombol dropdown di kotak object, pilih Bar Graph

Gambar 7.9 Pastikan alamat memori yang digunakan LW-0 (Local Word di indeks ke 0)

Gambar 7.10 Di Tab Range, ubah Max value dan High limit dari 10 menjadi 400, klik OK

Gambar 7.11 Perbesar ukuran kotak Bar Graph sehingga menutupi bagian kosong dari Tank 

Gambar 7.12 Pindahkan Bar Graph di belakang Tank, pilih Bar Graph, tekan tombol Move to Back

Gambar 7.13 Tampak Bar Graph berada di belakang Tank, membuat Tank seolah-olah terisi air

Gambar 7.14 Klik Tab IIoT/Energy, klik MQTT, di jendela yang muncul, klik Enable

Gambar 7.15 Ketika Enable di-klik, muncul jendela New MQTT Server, beri centang pada kotak Use domain name, di kolom Domain name ketik mqtt-dashboard.com, klik OK 

Gambar 7.16 Di jendela MQTT, klik Tab Topic Subscriber, kemudian klik New

Gambar 7.17 Di jendela New MQTT Topic Subscriber, isi kolom Topic: level, dan hilangkan centang pada Verify timestamp dan Use top level key "d" ...

Gambar 7.18 Masih di jendela New MQTT Topic Subscriber, klik Tab Address, klik tombol New, muncul jendela Type/Address, isi kolom Name: level, pilih Word, pastikan Address: LW-0, beri centang pada Remove JSON array bracket '[' and ']' dan klik OK

Gambar 7.19 Di jendela New MQTT Topic Subscriber, di Tab Address, terlihat sebuah topik dengan nama level pada daftar, klik OK 

Gambar 7.20 Di jendela MQTT, di Topic Subscriber, terlihat sebuah topic dengan nama level, klik OK

Gambar 7.21 Jalankan simulasi EasyBuilder Pro dengan memilih Tab Project, klik Offline Simulation

Gambar 7.22 Muncul jendela Save As, beri nama dan kemudian klik tombol Save

Gambar 7.23 Jalankan juga Wokwi dengan menekan tombol Run, klik pada sensor ultrasonik, geser slider Distance ke kiri dan ke kanan, dan perhatikan level air dalam tangki

Gambar 7.24 Dinginkan nilai level juga ditampilkan dalam bentuk angka di EasyBuilder Pro, untuk itu klik Tab Object, pilih Numeric, pastikan Address di LW-0, kemudian klik Tab Format 

Gambar 7.25 Di Tab Format, di kolom Format, pilih Type: Customized, kemudian tambahkan " cm" di samping 4 tanda bintang, kemudian klik OK

Gambar 7.26 Jalankan kembali simulasi EasyBuilder Pro dengan meng-klik Tab Project, pilih Offline Simulation

Gambar 7.27 Jalankan juga Wokwi, geser slider Distance sensor Ultrasonik, perhatikan EasyBuilder Pro menampilkan nilai level yang sama seperti pada tampilan LCD

File EasyBuilder Pro yang dibuat di bagian ini dapat diunduh di link ini: https://drive.google.com/file/d/1c3o90QZWB0kqxxSODh1SYNB7d576vaPn/view?usp=sharing

Agar lebih jelas, berikut ini video singkat pembuatannya mengikuti langkah-langkah di atas:

Video simulasi level tangki di EasyBuilder Pro dengan sensor ultrasonik dan ESP32



===========================================================================================


8. Simulasi proses Sorting Warna  

Berikut ini langkah-langkahnya:

Gambar 8.1 Rangkaian ESP32 dengan LCD I2C 16x2, Relay, Motor Servo, 5 LED dan 2 tombol

2. Buat project baru di EBPro, dan tambahkan objek-objek sesuai daftar dalam Tabel 8.1 berikut ini:

Tabel 8.1 Objek yang digunakan untuk simulasi proses sorting warna

Gambar guide rail (ada 21 gambar) dapat diunduh di sini: 

Gambar conveyor (ada 2 gambar) dapat diunduh di sini: 

3. Gunakan objek Word Lamp untuk membuat animasi guide rail (rel pemandu) dan animasi konveyor. Gunakan objek Moving Shape untuk membuat barang yang bisa berubah warna dan bergerak. Untuk lebih jelasnya, silahkan melihat video pembuatan berikut ini:

Video pembuatan simulasi sorting warna

4. Agar animasi di EasyBuilder Pro di atas dapat berjalan sesuai dengan proses yang diinginkan, tambahkan program Macro. Untuk membuat kondisi mula-mula, buat program macro yang hanya dijalankan sekali di awal. Untuk membuat semua objek dapat mengikuti alur proses yang diinginkan, buat program macro yang berjalan terus-menerus secara periodik setiap 100 milidetik sekali. Kedua program macro tersebut dapat diunduh di link ini: https://drive.google.com/file/d/1c7v9q-HqcTzzmn3DMime8PQ8LGhC4O-0/view?usp=sharing
5. Berikutnya, agar aplikasi di EasyBuilder Pro di atas dapat terhubung dengan ESP32, aktifkan MQTT. Gunakan Server broker: mqtt-dashboard.com. Buat Topic Publisher: ebpro/wokwi/output, dengan 11 buah Tag, yang nama-namanya terdiri dari: lb0, lb1, lb2, lb3, lb4, lb5, lb6, lw1, lw2, lw3 dan lw4.
6. Buat Topic Subscriber: wokwi/ebpro/input1, dengan nama Tag: lb5. Buat Topic Subscriber kedua: wokwi/ebpro/input2, dengan nama Tag: lb6.
7. Jalankan simulasi EBPro dengan memilih menu Project, klik Offline Simulation. Tekan tombol S1, seharusnya sebuah item muncul di atas konveyor. Tekan tombol S2, seharusnya, item tersebut dibawa konveyor, dan oleh rel pemandu, item tersebut dimasukkan ke wadah sesuai warnanya.
8. Jalankan rangkaian Wokwi dengan link di atas, tunggu hingga muncul tulisan MQTT Connected. Tekan tombol S1 di Wokwi, seharusnya di EasyBuilder Pro muncul item di atas konveyor. Tekan tombol S2 di Wokwi, seharusnya item dibawa konveyor, dan oleh rel pemandu, item tersebut dimasukkan ke wadah sesuai warnanya.

File EasyBuilder Pro yang dibuat di bagian ini dapat diunduh di link ini: 

No comments:

Post a Comment

Subscribe to: Posts (Atom)