EyeDropper API menyediakan mekanisme untuk membuat alat pipet yang memungkinkan pengguna mengambil sampel warna dari layar, termasuk dari luar jendela browser. Pelajari cara editor model 3D Blockbench menggunakan API ini di codebase mereka.
Pengantar
(Artikel ini juga tersedia dalam bentuk video.)
Blockbench adalah editor model modern dan gratis untuk model poli rendah 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 Update Caves and Cliffs, Bagian 1. Kode Blockbench berlisensi GPL versi 3 adalah 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 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 pelatihan yang dapat Anda lihat di screenshot berikut.
EyeDropper API
Di antara banyak fitur lainnya, Blockbench menawarkan fitur cat, jadi jika Anda ingin menandai kereta api, kini Anda dapat melakukannya. Jangan lakukan ini di dunia nyata. Anda bisa lihat bahwa untuk pemberian tag saya, saya menggunakan warna oranye terang.
Ini sebenarnya oranye yang telah saya ekstrak langsung dari wallpaper macOS Ventura melalui EyeDropper API. Seperti yang dapat Anda lihat di screenshot berikut, dropper (lingkaran oranye di sebelah kiri jendela aplikasi) dapat menjangkau bagian luar aplikasi langsung ke desktop, atau aplikasi lain yang mungkin terbuka.
Dengan Blockbench sebagai open source, Anda dapat mempelajari bagaimana developer menerapkan API ini. Kode yang dimaksud ada di JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench juga tersedia sebagai aplikasi Electron.js. Dari komentar, Anda dapat melihat bahwa fitur 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 cuplikan kode yang ditandai, hal ini tidak menjadi masalah. Menggunakan API sangat mudah. Buat instance EyeDropper baru dan panggil metode open()-nya. Metode ini me-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
Pemetik warna adalah perangkat lunak kreativitas yang kecil tapi penting, seperti Blockbench. Sering kali, warna yang diinginkan bukan bagian dari jendela aplikasi, tetapi ditemukan di suatu tempat di luar, bahkan mungkin di layar yang berbeda. Pemilih warna tidak memungkinkan Anda memilih warna dalam kasus seperti itu 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. Kalau kamu main Blockbench, selamat memilih warna!