Die EyeDropper API bietet einen Mechanismus zur Erstellung einer Pipette, mit der Nutzer Farben von ihren Bildschirmen auch außerhalb des Browserfensters erfassen können. Hier erfährst du, wie der 3D-Modell-Editor Blockbench diese API in seiner Codebasis nutzt.
Einführung
(Dieser Artikel ist auch in Form eines Videos verfügbar.)
Blockbench ist ein kostenloser, moderner Modelleditor für Low-Poly-Modelle mit Pixel-Art-Texturen. Wenn Sie schon einmal Minecraft gespielt haben, haben Sie wahrscheinlich Assets gesehen, die mit Blockbench erstellt wurden, z. B. die Ziege, die im Rahmen des Caves and Cliffs Update (Teil 1) zu Minecraft hinzugefügt wurde. Der GPL Version 3-lizenzierte Blockbench-Code ist Open Source auf GitHub.
Wenn Sie Blockbench ausprobieren möchten, starten Sie die App, indem Sie web.blockbench.net aufrufen. Als PWA können Sie sie auf Ihrem Computer installieren und in einem eigenständigen Fenster starten. Wenn Sie mit der 3D-Modellierung noch nicht vertraut sind, können Sie mit einem der vielen Open-Source-.bbmodel-Dateibeispiele beginnen, die Sie mit der Codesuche von GitHub finden können. Probieren Sie beispielsweise das Trainingsmodell aus, das Sie im folgenden Screenshot sehen können.
Die EyeDropper API
Neben vielen anderen Funktionen bietet Blockbench eine Farbfunktion. Wenn du schon immer einen Zug markieren wolltest, ist das jetzt möglich. Tun Sie das bitte nicht in der realen Welt. Beim Tagging habe ich ein leuchtendes Orange verwendet.
Das ist eine Orange, die ich direkt aus dem macOS Ventura-Hintergrund über die EyeDropper API extrahiert habe. Wie Sie im folgenden Screenshot sehen können, kann die Pipette (der orangefarbene Kreis links vom App-Fenster) außerhalb der Anwendung direkt auf meinen Desktop oder eine andere geöffnete App reichen.
Da Blockbench Open Source ist, können Sie erfahren, wie die Entwickler die API implementiert haben. Der betreffende Code befindet sich in JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench ist auch als Electron.js-App verfügbar. Wie Sie dem Kommentar entnehmen können, wird ein Sonderfall für ein Problem in Electron angewendet, bei dem mit der Farbauswahl keine Farbe außerhalb des Fensters ausgewählt werden kann. Bei der Web API, die Sie im hervorgehobenen Teil des Code-Snippets sehen, stellt dies kein Problem dar. Die Verwendung der API ist unkompliziert. Instanziieren Sie eine neue EyeDropper-Instanz und rufen Sie ihre open()-Methode auf. Diese Methode wird mit einem sRGBHex-String aufgelöst, der die ausgewählte Farbe im Hexadezimal-sRGB-Format darstellt.
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);
}
},
});
Ergebnisse
Farbauswahl ist eine kleine, aber wichtige Kreativitätssoftware wie Blockbench. Meistens ist die gewünschte Farbe nicht Teil des App-Fensters, sondern irgendwo im Freien zu finden, vielleicht sogar auf einem anderen Bildschirm. Eine Farbauswahl, mit der Sie in solchen Fällen keine Farben auswählen können, kann fast nutzlos sein. Die EyeDropper API wurde genau für solche Anwendungsfälle entwickelt und funktioniert seit ihrer Implementierung im November 2021 problemlos für Blockbench. Wenn du mit Blockbench spielst, viel Spaß bei der Farbauswahl!