How the 3D model editor Blockbench uses the EyeDropper API to let users choose colors from everywhere

The EyeDropper API provides a mechanism for creating an eyedropper tool that lets users sample colors from their screens, including outside of the browser window. Learn how the 3D model editor Blockbench uses this API in their codebase.

Thomas Steiner

Jannis Petersen

Introduction

(This article is also available in form of a video.)

Blockbench is a free, modern model editor for low-poly models with pixel art textures. If you have ever played Minecraft, chances are you have seen assets that were created with Blockbench, for example the goat, which was added to Minecraft as part of the Caves and Cliffs Update, Part 1. The GPL version 3 licensed Blockbench code is open source on GitHub.

To try Blockbench, launch the app by navigating to web.blockbench.net. As a PWA, you can install it to your desktop and launch it in a standalone window. If you are new to 3D modeling, you can start with one of the many open source .bbmodel file examples that you can find using GitHub's code search. For example, try the train model that you can see in the following screenshot.

The EyeDropper API

Among many other features, Blockbench offers a paint feature, so if you ever wanted to tag a train, now you can. Please don't do this in the real world. You can see that for my tagging, I used a bright orange.

This is actually an orange that I have extracted directly from the macOS Ventura wallpaper through the EyeDropper API. As you can see in the following screenshot, the eye dropper (the orange circle left of the app window) can reach outside of the application straight into my desktop, or any other app that I may have open.

With Blockbench being open source, you can learn how the developers have implemented the API. The code in question is in JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench is also available as an Electron.js app. You can see from the comment, it has special case handling for an issue in Electron, where the color picker can't pick color outside of the window. With the web API, which you can see in the highlighted part of the code snippet, this is not an issue. Using the API is straightforward. Instantiate a new EyeDropper instance and call its open() method. This method resolves with an sRGBHex string representing the selected color, in hexadecimal sRGB format.

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

Color pickers are a small, but important piece of creativity software like Blockbench. More often than not, the desired color is not part of the app window, but is to-be-found somewhere outside, maybe even on a different screen. A color picker that doesn't let you pick colors in such cases can be close to useless. The EyeDropper API was created exactly for use cases like this, and has been working great for Blockbench ever since it was implemented in November 2021. If you play with Blockbench, happy color picking!