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 codebase.
Introduzione
Questo articolo è disponibile anche sotto forma di video.
Blockbench è un editor di modelli moderno e senza costi per modelli low-poly con texture in pixel art. Se hai mai giocato a Minecraft, è probabile che tu abbia visto risorse create con Blockbench, ad esempio la capra, che è stata aggiunta a Minecraft nell'ambito dell'aggiornamento Caves and Cliffs, Parte 1. Il codice Blockbench concesso in licenza da GPL versione 3 è open source su GitHub.
Per provare Blockbench, avvia l'app visitando web.blockbench.net. Come PWA, puoi installarla sul computer e avviarla in una finestra autonoma. Se non hai mai utilizzato 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 addestramento che puoi vedere nello screenshot seguente.
API EyeDropper
Tra le tante altre caratteristiche, Blockbench offre una funzionalità di colorazione: se vuoi taggare un treno, ora puoi farlo. Non farlo nel mondo reale. Come puoi vedere, per i tag ho usato un arancione acceso.
Questa è in realtà un'arancia che ho estratto direttamente dallo sfondo MacOS Ventura tramite l'API EyeDropper. Come vedi nello screenshot seguente, il contagocce (il cerchio arancione a sinistra della finestra dell'app) può raggiungere l'esterno dell'applicazione direttamente sul desktop o in qualsiasi altra app aperta.
Poiché Blockbench è open source, puoi scoprire in che modo gli sviluppatori hanno implementato l'API. Il codice in questione è 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 delle maiuscole per un problema in Electron, in cui il selettore colori non può scegliere il colore all'esterno della finestra. Con l'API web, visibile nella parte evidenziata dello snippet di codice, questo non è un problema. L'utilizzo dell'API è semplice. Crea l'istanza di una nuova istanza EyeDropper e chiama il relativo metodo open(). Questo metodo risolve il problema con una stringa sRGBHex che rappresenta il colore selezionato, in formato sRGB esadecimale.
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 del colore sono un piccolo ma importante strumento per la creatività come Blockbench. Molto spesso il colore desiderato non fa parte della finestra dell'app, ma si trova all'esterno, magari anche su uno schermo diverso. Un selettore colori che non ti permette di scegliere i colori in questi casi potrebbe risultare inutile. L'API EyeDropper è stata creata esattamente per casi d'uso come questo e funziona perfettamente per Blockbench sin da quando è stata implementata nel novembre 2021. Se giochi con Blockbench, scegli i colori per te!