La API de EyeDropper proporciona un mecanismo para crear una herramienta de cuentagotas que permite a los usuarios tomar muestras de colores de sus pantallas, incluso fuera de la ventana del navegador. Descubre cómo el editor de modelos 3D Blockbench usa esta API en su base de código.
Introducción
(Este artículo también está disponible en forma de video).
Blockbench es un editor de modelos moderno y gratuito para modelos de baja poligonización con texturas de pixel art. Si alguna vez jugaste Minecraft, es probable que hayas visto recursos creados con Blockbench, por ejemplo, la cabra, que se agregó a Minecraft como parte de la actualización de Cuevas y acantilados, parte 1. El código de Blockbench con licencia GPL versión 3 es de código abierto en GitHub.
Para probar Blockbench, inicia la app navegando a web.blockbench.net. Como AWP, puedes instalarla en tu escritorio e iniciarla en una ventana independiente. Si eres nuevo en el modelado 3D, puedes comenzar con uno de los numerosos ejemplos de archivos .bbmodel de código abierto que puedes encontrar usando la búsqueda de código de GitHub. Por ejemplo, prueba el modelo de entrenamiento que puedes ver en la siguiente captura de pantalla.
La API de Eyedropper
Entre muchas otras funciones, Blockbench ofrece una función de pintura, por lo que si alguna vez quisiste etiquetar un tren, ahora puedes hacerlo. No lo hagas en el mundo real. Puedes ver que, para mi etiquetado, usé un naranja brillante.
En realidad, es una naranja que extraje directamente del fondo de pantalla de macOS Ventura a través de la API de EyeDropper. Como puedes ver en la siguiente captura de pantalla, el cuentagotas (el círculo naranja a la izquierda de la ventana de la aplicación) se puede extender fuera de la aplicación directamente a mi escritorio o a cualquier otra aplicación que tenga abierta.
Como Blockbench es de código abierto, puedes aprender cómo los desarrolladores implementaron la API. El código en cuestión está en JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench también está disponible como una app de Electron.js. Como puedes ver en el comentario, tiene un manejo de casos especiales para un problema en Electron, en el que el selector de color no puede elegir un color fuera de la ventana. Con la API web, que puedes ver en la parte destacada del fragmento de código, esto no es un problema. Usar la API es sencillo. Crea una instancia nueva de EyeDropper y llama a su método open(). Este método se resuelve con una cadena sRGBHex que representa el color seleccionado, en formato hexadecimal sRGB.
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);
}
},
});
Conclusiones
Los selectores de color son una herramienta pequeña, pero importante, de software de creatividad, como Blockbench. Por lo general, el color deseado no forma parte de la ventana de la app, sino que se encuentra en algún lugar fuera de ella, incluso en una pantalla diferente. Un selector de color que no te permite elegir colores en esos casos puede resultar casi inútil. La API de EyeDropper se creó exactamente para casos de uso como este y ha funcionado muy bien para Blockbench desde que se implementó en noviembre de 2021. Si juegas con Blockbench, ¡feliz selección de colores!