L'API EyeDropper fournit un mécanisme permettant de créer un outil Pipette qui permet aux utilisateurs d'échantillonner des couleurs à partir 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. Vous pouvez donc désormais taguer un train. Veuillez ne pas le faire dans le monde réel. 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 au-delà de l'application directement sur mon bureau ou dans n'importe quelle autre application que j'ai ouverte.
Étant donné que 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 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. Instanciez une nouvelle 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 couleurs sont un élément petit, mais important d'un logiciel de création comme Blockbench. Dans la plupart des cas, la couleur souhaitée ne fait pas partie de la fenêtre de l'application, mais se trouve ailleurs, peut-être même sur un autre écran. Un sélecteur de couleur qui ne vous permet pas de choisir de couleurs dans ce cas peut être presque inutile. L'API EyeDropper a été créée précisément pour des cas d'utilisation comme celui-ci. Elle fonctionne parfaitement avec Blockbench depuis son implémentation en novembre 2021. Si vous jouez avec Blockbench, bon choix de couleur !