Drawing

Drawing digunakan untuk meminta pengguna menandai atau membuat sketsa langsung di form, misalnya menandai goresan dan penyok pada mobil, menggambar tata letak ruang, atau melingkari bagian denah. Pengguna menggambar dengan mouse, jari, atau stylus. Hasilnya, latar dan coretan digabung, diunggah sebagai satu file PNG seperti lampiran File Upload. Komponen ini ada di grup Field pada palette.

Mapping ke Engine

• Nama file mengikuti Key, misalnya damage_sketch.png.
• PNG berlatar putih dan dua kali ukuran bidang di layar, misalnya 1200×720 px untuk bidang mobil 600×360 px.
• Bila tidak ada coretan, nilainya kosong. Coretan yang hanya berupa hapusan Eraser tidak dihitung.

Properties

• Name: Label komponen yang ditampilkan ke pengguna. Mendukung dua bahasa (EN & ID). Pesan validasi Required dibuat dari Name ini.
• Key: Mengikat komponen ke process variable yang menyimpan file PNG setelah form disubmit. Default damage_sketch. Key yang berisi spasi atau sudah dipakai field lain membuat Save Changes nonaktif.
• Draw on: Latar bidang gambar. Latar ikut tersimpan di PNG.
  • Blank: kanvas putih kosong.
  • Car outline: mobil dilihat dari atas, depan di kanan, dengan label LEFT, RIGHT, REAR, dan FRONT.
  • Grid: kotak-kotak 24 px.
  • Picture: gambar sendiri (PNG atau JPEG) yang diunggah lewat Choose picture, misalnya denah lantai. Gambar disimpan sebagai aset form, sama seperti sumber Upload pada Image: tidak terhapus saat lampiran draft dibersihkan, dan bisa dilihat semua user di workspace. Tanpa gambar, muncul "Pick the picture to draw on" dan Save Changes nonaktif.
• Pen colours: Warna tinta yang bisa dipilih pengguna: Black, Red, Blue, Green, dan Amber. Default Red, Blue, dan Black. Warna pertama di daftar menjadi warna awal. Tanpa satu warna pun, muncul "Pick at least one colour" dan Save Changes nonaktif.
• Line sizes: Ketebalan garis, Thin 2 px, Medium 4 px, dan Thick 8 px. Medium menjadi ketebalan awal bila aktif. Tanpa satu ukuran pun, muncul "Pick at least one line size" dan Save Changes nonaktif.
• Eraser: Menampilkan tombol penghapus. Eraser hanya menghapus tinta, latar tetap utuh.
• Canvas height: Tinggi bidang gambar, 240 sampai 600 px dengan kelipatan 20. Default 360 px. Nilai di luar batas menampilkan "Use 240–600 px" dan Save Changes nonaktif. Lebar selalu mengikuti form.
• Tooltip: Teks bantuan singkat yang muncul saat kursor diarahkan ke ikon informasi; diaktifkan lewat toggle.
• Disabled: Menonaktifkan komponen sehingga gambar hanya bisa dilihat dan tidak dapat diubah.
• Hide If: Ekspresi FEEL untuk menyembunyikan komponen. Komponen disembunyikan ketika ekspresi bernilai true, dievaluasi ulang saat nilai field lain berubah.
• Validation:
  • Required: Gambar wajib dibuat sebelum form disubmit. Aktif secara default.

Perilaku saat diisi

• Toolbar di atas bidang berisi warna, ketebalan garis, Eraser, Undo, dan Clear.
• Halaman tidak ikut bergulir saat menggambar di bidang ini, jadi menggambar dengan jari di ponsel tetap nyaman.
• Dengan latar mobil atau Picture, bidang menjaga bentuk gambarnya. Di layar sempit bidang mengecil, dan coretan tetap di titik yang sama pada gambar.
• Undo menghapus coretan terakhir. Saat bidang aktif, Ctrl+Z (⌘Z di Mac) melakukan hal yang sama.
• Clear bertanya dulu "Clear the drawing?" dengan keterangan "Every mark is removed. The background stays.". Keep membatalkan, Clear menghapus semua coretan. Esc menutup pertanyaan tanpa menghapus.
• Gambar diunggah sekali, sekitar 0,6 detik setelah pengguna berhenti menggambar, bukan per coretan. Selama unggah tampil "Saving…" dan tombol submit menunggu.
• Bila unggah gagal, muncul "Couldn't save the drawing. Draw again to retry." dan nilainya kosong. Menggambar lagi akan mengulang unggah.
• Pesan Required dibuat dari Name:
  • Name yang sudah berupa perintah dipakai apa adanya, ditambah tempatnya. Contoh: "Mark scratches or dents" menjadi "Mark scratches or dents on the car".
  • Name lain menjadi Name diikuti "is required — draw" dan tempatnya. Contoh: "Damage sketch is required — draw on the car".
  • Tempatnya mengikuti latar: "on the canvas", "on the car", "on the grid", atau "on the picture".
• Saat task dibuka lagi, gambar yang tersimpan tampil sebagai PNG. Clear menghapusnya untuk mulai menggambar ulang.
• Bila Disabled aktif, gambar tampil tanpa toolbar. Bila belum ada gambar, tampil "No drawing". Field yang Disabled tidak menahan submit.
• History menampilkan nama dan ukuran file, misalnya "damage_sketch.png 55 KB".
• Di Studio, kanvas menampilkan latar beserta keterangannya, misalnya "Car outline · seen from above" atau "Grid · 24 px squares". Latar mobil diberi contoh coretan.