L'API EyeDropper fornisce un meccanismo per creare uno strumento contagocce che consente agli utenti di campionare i colori dai loro schermi, anche al di fuori della finestra del browser. Scopri in che modo l'editor di modelli 3D Blockbench utilizza questa API nel proprio codice di base.
Introduzione
Questo articolo è disponibile anche sotto forma di video.
Blockbench è un editor di modelli moderno e senza costi per modelli low-poly con texture di pixel art. Se hai mai giocato a Minecraft, è probabile che tu abbia visto risorse create con Blockbench, come la capra, aggiunta a Minecraft nell'ambito dell'aggiornamento Caves and Cliffs, Parte 1. Il codice di Blockbench concesso in licenza GPL versione 3 è open source su GitHub.
Per provare Blockbench, avvia l'app visitando web.blockbench.net. Come PWA, puoi installarla sul tuo desktop e avviarla in una finestra autonoma. Se non hai esperienza con la modellazione 3D, puoi iniziare con uno dei molti esempi di file .bbmodel open source che puoi trovare utilizzando la ricerca del codice di GitHub. Ad esempio, prova il modello di treno che puoi vedere nello screenshot seguente.
API EyeDropper
Tra le altre funzionalità, Blockbench offre una funzionalità di pittura, quindi se hai sempre voluto taggare un treno, ora puoi farlo. Non farlo nella vita reale. Puoi vedere che per il tagging ho utilizzato un arancione brillante.
Si tratta di un'arancia che ho estratto direttamente dallo sfondo macOS Ventura tramite l'API EyeDropper. Come puoi vedere nello screenshot seguente, l'applicatore (il cerchio arancione a sinistra della finestra dell'app) può raggiungere l'esterno dell'applicazione direttamente sul mio computer o su qualsiasi altra app che potrei avere aperta.
Poiché Blockbench è open source, puoi scoprire in che modo gli sviluppatori hanno implementato l'API. Il codice in questione si trova in JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench è disponibile anche come app Electron.js. Come puoi vedere dal commento, ha una gestione speciale per un problema in Electron, in cui il selettore dei colori non può scegliere un colore al di fuori della finestra. Con l'API web, che puoi vedere nella parte evidenziata dello snippet di codice, non si tratta di un problema. L'utilizzo dell'API è semplice. Crea una nuova istanza EyeDropper e chiama il relativo metodo open(). Questo metodo si risolve con una stringa sRGBHex che rappresenta il colore selezionato, in formato esadecimale 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);
}
},
});
Conclusioni
I selettori colori sono un software per la creatività piccolo ma importante, come Blockbench. Molto spesso, il colore desiderato non compare nella finestra dell'app, ma si può trovare da qualche parte all'esterno, magari anche su uno schermo diverso. Un selettore colori che non ti consente di scegliere i colori in questi casi può essere quasi inutile. L'API EyeDropper è stata creata esattamente per casi d'uso come questo e funziona perfettamente per Blockbench da quando è stata implementata a novembre 2021. Se usi Blockbench, buon divertimento con la scelta dei colori.