EyeDropper API menyediakan mekanisme untuk membuat alat pipet yang memungkinkan pengguna mengambil sampel warna dari layar mereka, termasuk di luar jendela browser. Pelajari cara editor model 3D Blockbench menggunakan API ini di codebase-nya.
Pengantar
(Artikel ini juga tersedia dalam bentuk video.)
Blockbench adalah editor model modern dan gratis untuk model low-poly dengan tekstur seni piksel. Jika Anda pernah memainkan Minecraft, kemungkinan Anda pernah melihat aset yang dibuat dengan Blockbench, misalnya kambing, yang ditambahkan ke Minecraft sebagai bagian dari Caves and Cliffs Update, Bagian 1. Kode Blockbench berlisensi GPL versi 3 bersifat open source di GitHub.
Untuk mencoba Blockbench, luncurkan aplikasi dengan membuka web.blockbench.net. Sebagai PWA, Anda dapat menginstalnya ke desktop dan meluncurkannya di jendela mandiri. Jika Anda baru mengenal pemodelan 3D, Anda dapat memulai dengan salah satu dari banyak contoh file .bbmodel open source yang dapat Anda temukan menggunakan penelusuran kode GitHub. Misalnya, coba model kereta yang dapat Anda lihat di screenshot berikut.
EyeDropper API
Di antara banyak fitur lainnya, Blockbench menawarkan fitur cat, jadi jika Anda ingin memberi tag pada kereta, sekarang Anda dapat melakukannya. Tolong jangan lakukan ini di dunia nyata. Anda dapat melihat bahwa untuk pemberian tag, saya menggunakan warna oranye terang.
Sebenarnya ini adalah jeruk yang telah saya ekstrak langsung dari wallpaper MacOS Ventura melalui EyeDropper API. Seperti yang dapat Anda lihat pada screenshot berikut, pipet (lingkaran oranye di sebelah kiri jendela aplikasi) dapat menjangkau ke luar aplikasi langsung ke desktop saya, atau aplikasi lain yang mungkin saya buka.
Karena Blockbench bersifat open source, Anda dapat mempelajari cara developer menerapkan API. Kode yang dimaksud ada di JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench juga tersedia sebagai aplikasi Electron.js. Anda dapat melihat dari komentar bahwa aplikasi ini memiliki penanganan kasus khusus untuk masalah di Electron, yaitu pemilih warna tidak dapat memilih warna di luar jendela. Dengan API web, yang dapat Anda lihat di bagian yang ditandai pada cuplikan kode, hal ini tidak menjadi masalah. Menggunakan API ini sangat mudah. Buat instance EyeDropper baru dan panggil metode open()-nya. Metode ini di-resolve dengan string sRGBHex yang mewakili warna yang dipilih, dalam format sRGB heksadesimal.
new Action("pick_screen_color", {
icon: "colorize",
category: "color",
condition: () => typeof EyeDropper == "function",
click: async function () {
if (Blockbench.platform == "win32") {
// workaround for https://github.com/electron/electron/issues/27980
ipcRenderer.send("request-color-picker", {
sync: settings.sync_color.value,
});
} else if (typeof EyeDropper == "function") {
let dropper = new EyeDropper();
let { sRGBHex } = await dropper.open();
ColorPanel.set(sRGBHex);
}
},
});
Kesimpulan
Pemilih warna adalah bagian kecil, tetapi penting dari software kreativitas seperti Blockbench. Sering kali, warna yang diinginkan bukan bagian dari jendela aplikasi, tetapi dapat ditemukan di suatu tempat di luar, bahkan mungkin di layar yang berbeda. Pemilih warna yang tidak memungkinkan Anda memilih warna dalam kasus seperti ini bisa jadi hampir tidak berguna. EyeDropper API dibuat khusus untuk kasus penggunaan seperti ini, dan telah berfungsi dengan baik untuk Blockbench sejak diterapkan pada November 2021. Jika Anda bermain dengan Blockbench, selamat memilih warna!