Generator Visual Gelas Kimia 2D

Generator ini adalah alat interaktif untuk mendesain visual 2D gelas kimia (beaker), cocok untuk keperluan presentasi, materi ajar, atau simulasi laboratorium. Pengguna dapat menambahkan beberapa gelas sekaligus, mengatur warna larutan dan gelas, tingkat ketinggian cairan, kapasitas (50 mL – 1000 mL), serta kontrol gelembung (jumlah dan ukuran).

Semua perubahan tampak langsung pada area preview, dan hasil akhir dapat diekspor sebagai kode HTML mandiri atau gambar PNG tanpa latar. Canvas yang digunakan responsif sehingga proporsi gelas tetap terjaga di berbagai ukuran layar.

📖 Petunjuk Penggunaan

1. Tambah gelas
   
   Klik tombol + Tambah Gelas Kimia untuk menambahkan beaker baru. Setiap beaker muncul sebagai kartu kontrol di bagian kiri dan tampil di area preview.
2. Atur properti beaker
   
   Pada setiap kartu, Anda dapat mengubah:
   • Label
     Mendukung format subskrip (_) dan superskrip (^), misalnya Larutan CuSO_4 atau Fe^{2+}.
   • Warna larutan & warna gelas
     
     Pilih warna melalui color picker.
   • Isi (%)
     Slider untuk mengatur ketinggian cairan.
   • Skala
     Memperbesar atau memperkecil ukuran beaker (0.5× – 1.1×).
   • Kapasitas
     Pilih nilai 50, 100, 250, 500, atau 1000 mL; garis skala pada beaker akan menyesuaikan secara otomatis.
   • Opacity cairan
     Mengatur transparansi larutan.
   • Jumlah & ukuran gelembung
     Jika gelembung diaktifkan.
   • Aktifkan gelembung
     Centang untuk menampilkan gelembung naik di dalam cairan.
3. Lihat perubahan real‑time
   Area preview di tengah akan langsung memperbarui tampilan setiap kali Anda mengubah kontrol.
4. Ubah latar belakang
   Pilih warna latar melalui color picker di header; latar juga akan mempengaruhi kode HTML yang diekspor.
5. Salin kode HTML
   Klik 📋 Salin Kode HTML untuk mengambil seluruh halaman mandiri yang dapat disisipkan ke website atau disimpan sebagai file .html.
6. Simpan sebagai gambar
   Klik 🖼️ Simpan Preview sebagai PNG (tanpa latar) untuk menyimpan area preview menjadi file gambar dengan latar belakang transparan.

💡 Cara Pemanfaatan

• Materi pembelajaran:
  
  Guru/dosen/mahasiswa dapat membuat contoh visual gelas kimia dengan berbagai konsentrasi larutan, kapasitas, dan label zat kimia, lalu menampilkannya dalam slide atau LMS.
• Prototype UI/UX:
  
  Desainer dapat dengan cepat membuat komponen beaker yang dapat disesuaikan untuk mockup aplikasi laboratorium.
• Export konten:
  
  Kode HTML yang dihasilkan siap pakai dan dapat di‑embed ke halaman web tanpa ketergantungan eksternal.
• Presentasi interaktif:
  
  Dengan mengubah parameter secara langsung, presentasi menjadi lebih dinamis dan mudah dipahami.

Generator Visual Gelas Kimia 2D
Dirancang oleh Urip.Info

Warna Latar: