L'API EyeDropper fournit un mécanisme de création d'un outil de pipette qui permet aux utilisateurs d'échantillonner les couleurs de leurs écrans, 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 code.
Introduction
(Cet article est également disponible sous forme de vidéo.)
Blockbench est un éditeur de modèles moderne et sans frais pour les modèles low-poly avec des textures pixel art. Si vous avez déjà joué à Minecraft, il est probable que vous ayez vu des éléments créés avec Blockbench, comme la chèvre, qui a été ajoutée à Minecraft dans le cadre de la mise à jour Caves and Cliffs, partie 1. Le code Blockbench sous licence GPL 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 dans la 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 GitHub. Par exemple, essayez le modèle de train que vous pouvez voir dans la capture d'écran suivante.
API EyeDropper
Blockbench propose, entre autres, une fonctionnalité de peinture. Si vous avez toujours voulu taguer un train, vous pouvez le faire maintenant. Veuillez ne pas le faire dans la vraie vie. Vous pouvez voir que j'ai utilisé un orange vif pour mon taggage.
Il s'agit en fait d'une orange que j'ai extraite directement du fond d'écran macOS Ventura à l'aide de l'API EyeDropper. Comme vous pouvez le voir dans la capture d'écran suivante, le pipette (cercle orange à gauche de la fenêtre de l'application) peut s'étendre en dehors de l'application directement sur mon bureau ou dans n'importe quelle autre application que j'ai ouverte.
Blockbench étant un outil 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 gère un cas particulier pour un problème dans Electron, où le sélecteur de couleur ne peut pas sélectionner de 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 n'est pas un problème. L'utilisation de l'API est simple. Créez une instance EyeDropper et appelez sa méthode open(). Cette méthode résout une chaîne sRGBHex représentant la couleur sélectionnée, au format hexadécimal sRVB.
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. Le plus souvent, la couleur souhaitée ne fait pas partie de la fenêtre de l'application, mais doit être trouvée ailleurs, 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é conçue spécialement pour ce type de cas d'utilisation et fonctionne parfaitement pour Blockbench depuis son implémentation en novembre 2021. Si vous jouez avec Blockbench, bon choix de couleur !