L'API EyeDropper fournit un mécanisme permettant de créer un outil Pipette permettant aux utilisateurs d'échantillonner les couleurs de leur écran, y compris en dehors de la fenêtre du navigateur. Découvrez comment l'éditeur de modèles 3D Blockbench utilise cette API dans son codebase.
Introduction
(Cet article est également disponible sous forme de vidéo).
Blockbench est un éditeur de modèles moderne et sans frais destiné aux modèles low poly avec textures pixel art. Si vous avez déjà joué à Minecraft, vous avez probablement déjà vu des assets créés avec Blockbench, par exemple la chèvre, qui a été ajoutée à Minecraft dans le cadre de la partie 1 de la mise à jour des grottes et des falaises. Le code Blockbench sous licence de GPL version 3 est Open Source sur GitHub.
Pour essayer Blockbench, lancez l'application en accédant à web.blockbench.net. En tant que PWA, vous pouvez l'installer sur votre ordinateur et la lancer dans une fenêtre autonome. Si vous débutez en modélisation 3D, vous pouvez commencer par l'un des nombreux exemples de fichiers .bbmodel Open Source que vous pouvez trouver à l'aide de la recherche de code de GitHub. Par exemple, essayez le modèle d'entraînement que vous pouvez voir dans la capture d'écran suivante.
API EyeDropper
Blockbench propose, entre autres, une fonction de peinture. Ainsi, si vous voulez taguer un train, c'est désormais possible. Veuillez ne pas le faire dans la vie réelle. Comme vous pouvez le voir, j'ai utilisé une couleur orange vif pour le taggage.
Il s'agit en fait d'une orange que j'ai extraite directement du fond d'écran macOS Ventura via l'API EyeDropper. Comme vous pouvez le voir sur la capture d'écran suivante, la pipette (le cercle orange à gauche de la fenêtre de l'application) peut atteindre l'extérieur de l'application directement sur mon bureau ou toute autre application que j'ai ouverte.
Comme Blockbench est Open Source, vous pouvez découvrir comment les développeurs ont implémenté l'API. Le code en question se trouve dans JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench est également disponible en tant qu'application Electron.js. Comme vous pouvez le voir dans le commentaire, il offre un traitement spécial pour un problème dans Electron, où le sélecteur de couleur ne peut pas choisir la couleur en dehors de la fenêtre. Avec l'API Web, que vous pouvez voir dans la partie en surbrillance de l'extrait de code, ce problème ne se pose pas. L'utilisation de l'API est simple. Instanciez une nouvelle instance EyeDropper et appelez sa méthode open(). Cette méthode se résout avec une chaîne sRGBHex représentant la couleur sélectionnée, au format sRVB hexadécimal.
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);
}
},
});
Conclusions
Les sélecteurs de couleur sont un logiciel de créativité petit mais important comme Blockbench. La plupart du temps, la couleur souhaitée ne fait pas partie de la fenêtre de l'application, mais doit être trouvée quelque part à l'extérieur, peut-être même sur un autre écran. Un sélecteur de couleur qui ne vous permet pas de choisir des couleurs dans de tels cas peut s'avérer presque inutile. L'API EyeDropper a été créée exactement pour ce type de cas d'utilisation et fonctionne très bien pour Blockbench depuis son implémentation en novembre 2021. Si vous jouez avec Blockbench, profitez du choix des couleurs !