La API de EyeDropper proporciona un mecanismo para crear una herramienta de cuentagotas que permite a los usuarios tomar muestras de los colores de sus pantallas, incluso fuera de la ventana del navegador. Descubre cómo Blockbench, el editor de modelos 3D, usa esta API en su base de código.
Introducción
(Este artículo también está disponible en formato de video).
Blockbench es un editor de modelos moderno y gratuito para modelos de pocos polígonos con texturas de pixel art. Si alguna vez jugaste Minecraft, es probable que hayas visto elementos que se crearon con Blockbench, como la cabra, que se agregó a Minecraft como parte de la primera parte de la actualización de cuevas y acantilados. El código de Blockbench con licencia versión 3 de GPL es de código abierto en GitHub.
Para probar Blockbench, inicia la app desde web.blockbench.net. Como AWP, puedes instalarla en el escritorio e iniciarla en una ventana independiente. Si es la primera vez que usas el modelado en 3D, puedes comenzar con uno de los numerosos ejemplos de archivos .bbmodel de código abierto que puedes encontrar con 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 tanto, si alguna vez quisiste etiquetar un tren, ahora puedes hacerlo. No hagas esto en el mundo real. Puedes ver que, para el etiquetado, utilicé un color naranja brillante.
En realidad, es una naranja que extraje directamente del fondo de pantalla de macOS Ventura mediante 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 app) puede llegar fuera de la aplicación directamente a mi escritorio o a cualquier otra app que pueda tener abierta.
Como Blockbench es de código abierto, puedes conocer la manera en que los desarrolladores implementaron la API. El código en cuestión se encuentra en JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench también está disponible como una app de Electron.js. En el comentario, puedes ver que tiene un manejo especial de casos para un problema en Electron, en el que el selector de color no puede elegir el color fuera de la ventana. Esto no representa un problema con la API web, que puedes ver en la parte destacada del fragmento de código. 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 sRGB hexadecimal.
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 pieza de software creativo pequeña pero importante, como Blockbench. En la mayoría de los casos, el color deseado no forma parte de la ventana de la app, sino que se encuentra en algún lugar exterior, incluso en otra pantalla. Un selector de color que no te permite elegir colores en esos casos puede ser 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, elige los colores con alegría.