Saya membutuhkan developer untuk memodifikasi sebuah webapp animasi motor listrik berbasis three.js.
Tujuan modifikasi adalah
1. Membuat webapp tersebut dapat menerima data secara streaming dari sebuah file json atau csv dari sebuah server.
2. Membuat webapp tersebut memiliki tampilan data, teks, dan grafik yang berubah seiring dengan perubahan nilai data streaming
3. Membuat animasi pada webapp tersebut dapat berubah seiring perubahan nilai data streaming.
Pekerjaan dianggap selesai apabila:
1. Server streaming data json atau csv dapat mengirimkan data streaming [15%]
2. Webapp dapat menerima streaming data dari server streaming [15%]
3. Tampilan data, teks, grafik, dan animasi webapp berubah seiring perubahan nilai streaming, meliputi:
3.a. Grafik terdiri dari 5 canvas: canvas current (untuk current_u, current_v, current_w), canvas voltage (untuk voltage_u, voltage_v, voltage_w), canvas vibration (untuk vibration_x, vibration_y, vibration_z), canvas speed, dan canvas temperature. Tipe grafik adalah line graph. Sumbu x dari grafik adalah `timestamp` [15%]
3.b. Canvas memilik menu show/hide canvas yang dapat menampilkan/menghilangkan tampilan canvas current, voltage, vibration, speed, temperature [3%]
3.c. Line memiliki menu show/hide masing-masing line pada canvas current, voltage, vibration [3%]
3.d. Teks terdiri dari 1 canvas: canvas motor condition yang memiliki 4 nilai: NORMAL, FAULT 1, FAULT 2, FAULT 3 [2%]
3.e. Animasi warna rangka motor berubah mengikuti perubahan data temperature (biru tua ke merah untuk rentang 10-60C) [10%]
3.f. Animasi warna kabel berubah mengikuti perubahan voltage rerata dari (voltage_u, voltage_v, voltage_w) dengan perubahan warna (hijau muda ke kuning tua untuk rentang 0-50V) [10%]
3.g. Animasi gerakan partikel yang saat ini mengikut perubahan nilai `sineAmplitude` berubah mengikuti perubahan current rerata dari (current_u, current_v, current_w) [10%]
3.h. Menghilangkan lingkaran krem pada bagian bawah motor [2%]
3.i. Pada panel GUI control, telah ditambahkan satu folder GUI yang menampilkan semua data dalam bentuk angka [5%]
3.j. Worker mendemonstrasikan dalam bentuk video/live stream dan mengirimkan berkas webapp dan server kepada Owner [5%]
Berkas untuk proyek ini dapat diunduh pada link sbb:
1. Berkas webapp animasi motor listrik
2. Berkas data streaming measurement.json
3. Berkas data streaming measurement.csv
Keterangan:
1. Server streaming data dapat dibuat tetapi tidak terbatas dengan menggunakan fetch API, express js, atau koa js.
2. Grafik dapat dibuat tapi tidak terbatas dengan menggunakan chart.js, atau plotly.js
3. Data terdiri dari 12 variabel, meliputi 3-phase current (U,V,W), speed, 3-phase voltage (U,V,W), 3-phase vibration (X,Y,Z), temperature, dan motor condition (semua dalam format float kecuali kondisi motor dalam format string)
4. Satuan dari variabel adalah current (A), voltage (V), vibration (g), speed (rpm), temperature (C)
5. Fitur yang telah ada berkas webapp animasi:
- animasi putaran motor telah berubah seiring perubahan variabel `speed` secara manual dengan slider
- animasi arus listrik (current) telah berubah seiring dengan perubahan variabel `sineAmplitude` secara manual dengan slider
Loading ...
