NetLogo Web Color Picker: Soliciting Feedback

Announcements
1

Introducing the Color Picker Feature for NetLogo Web

This is a guide to the Color Picker feature for NetLogo Web. The Color Picker is a user interface that allows a user to explore and experiment with different colors, and finally select one. The selected color can then be provided to the program using the Color Picker in the form of a callback function. The Color Picker is still in the experimental stage, all feedback is welcome.

Demo

Here is a demo link to the standalone color picker. The color picker will be integrated both in NetLogo Web’s color input widget and in the code editor (e.g. when your code has set color red, a picker should be available there.)

Feature Overview

The Color Picker consists of three modes, Grid, Wheel, and Slider. Each mode provides a different way of selecting colors.

  • Grid: Grid mode provides the standard NetLogo grid for selecting NetLogo colors. The grid contains cells of NetLogo colors from 0 - 139.9, moving up by a default of increment 1, which a user can change in the increment bar at the bottom of the feature.

  • Wheel: Wheel mode provides another way to select NetLogo colors, but with an inner and outer wheel. The outer wheel selects the base color for the outer wheel, and the outer wheel allows you to change the brightness of the base color. This provides a more intuitive way to select colors, especially on touch screens and mobile.

  • Slider: Slider mode comes in two sub-modes, RGB and HSL. This mode provides the traditional way of choosing a color by adjusting three sliders. You can choose an RGB color by specifying each individual value in the corresponding slider. Likewise you can choose an HSL color in HSL mode in the same way.

Additionally, you can access the saved colors tab in the Slider mode. The saved colors tab allows you to “save” a color by pressing the button with a + sign. This color is saved in one of the squares, and you can set the color back to this color by pressing on it.

Limitations

There are many limitations as this project is still in experimental stage. As such, all feedback and contributions are welcome.

Usage

To integrate the Color Picker into your NetLogo Web project, start by installing the Color Picker npm package:

npm i @netlogo/netlogo-color-picker

After importing it into your project, you can create a Color Picker by calling the constructor.

The ColorPicker class constructor requires several parameters for initialization:

  • parent: The HTML element that will host the Color Picker. This ensures the picker is embedded in the correct location in your UI.
  • initColor: The initial color selected in the Color Picker, expressed as an RGB array (e.g., [255, 0, 0] for red).
  • onColorSelect: A callback function that is invoked when a color is selected. This function should handle the selected color data. The returned color data is an array, where the first element is the selected color, and the second element is an array of the saved colors.
  • savedColors: An optional array of colors that the user can save for later use. Each color is also represented as an RGB array.

Here is a basic example of how to instantiate the Color Picker:

const colorPicker = new ColorPicker(
  document.getElementById('color-picker-container'),
  [255, 255, 255], // Initial color as rgb (white)
  (colorData) => {
    console.log('Selected color:', colorData);
  },
  [[255, 0, 0], [0, 255, 0]] // Optional saved colors
);
2

Thanks! I wonder if you can edit the post so that people have a live testing page. Most people are probably not going to integrate the repo into their projects. Instead, they will use it through NetLogo Web - and before @andrechen integrates it, they can test it through our current GitHub page.

3

Makes sense! Taking a preliminary look, I don’t immediately see a way to edit the post . Is there a way to edit it or should I just try to delete and post a new updated version?

4

image
Click on the “…” button below the first post. Then, you should see the “edit” button.

5

Hi Acero,

Can you help edit this thread so it stays up to date? Please try to add some screenshots and a link to the live demo (experimental branch of NetLogo Web).

Thanks

6

Sorry, for some reason, I didn’t get a digest e-mail about this thread and had to find it manually on the forum.

There’s a lot about this demo that is visually nice, and brings new functionality to NetLogo Web. I’ll give some feedback on issues that I ran into while using it:

  • Firefox: Your slider elements are not showing up correctly in Firefox. Other than the circular knob, there is no actual slider visible. This applies to “Alpha”, as well as to the three component sliders in the “Slider” pane.
  • Firefox: In the “Slider” pane, the numbers next to the sliders display as number pickers, but I cannot interact with the number pickers. I view this as two bugs:
    • Visually: Something looks interactable, but I can’t interact with it
    • User experientially: It would be useful to me to be able to set the numbers directly, and the UI is capable of that, but forbids me from doing it (for, I guess, some design reason that I don’t understand)
  • The “RGBA” UI element (in the bottom-right) has a downward-facing arrow that makes me think it’s a dropdown. Upon clicking it, the UI element is actually some combination of a button and a carousel. I don’t know the best way to indicate the nature of this element (maybe a rightward-facing arrow), but the current icon sends the wrong message and led to me being surprised when clicking it.
  • The bottom-right-most element doesn’t change labels as you click through the carousel. This, to me, tells me that it either needs better labels, or (if we cannot think of a good way to describe the difference) is doing something that isn’t truly useful.
  • In the “Wheel” pane, if I click and drag the selection circle, it behaves as expected. If I click in the color space, the circle does not jump to my cursor until I release my mouse button. This feels weird. I would expect the circle to immediately jump to my mouse cursor’s location on mouse-down.
  • The text of the “Model Color Selected” is ungrammatical; I had no idea what that was going to do until I started clicking it
  • Double-clicking “Model Color Selected” briefly selects the text; use the CSS property user-select: none; to avoid this effect
  • The “0.1” increment should be selected by default. Thinking about colors as "1"s and "0.5"s only makes sense if you think in the NetLogo color model (which literally no human being does). I think it’s objectionable that we even care about the “coarse” color spaces shown by the “0.5” and “1” options, but if we demand high fidelity to the original NetLogo color picker and its weird way of representing colors, we should at least default to a level of granularity that guides people to the color that they want, not just colors that have neat, round numbers that NetLogo likes.
  • The “Increment” options shouldn’t be called “1” and “0.5” and “0.1”. Again: These concepts only make sense if you think in the NetLogo color model. It should just be called something like “Granularity”, with options “Coarse”, “Normal”, and “Fine”.
  • “Slider” pane: I find basically everything about the bottom row of 5 squares unintuitive. I have all sorts of suggestions that I could get into, in terms of being clear that the user is about to save a color, being able to lock/unlock colors in the row, and being clear that you’re about to re-load a color. But, really, I don’t understand the use case that is being solved by these 5 squares. In the other two panes, you just pick one color. In this pane, you pick four. I don’t think this functionality needs to exist, and I don’t know who it is helping, or how. My first reaction is that I think those 5 squares could simply be removed.
7

I did change the text to be “Editing Foreground Color” vs. “Editing Background Color”.

8

For this part, since it is a NetLogo color picker, shouldn’t we keep those concepts? That’s how it is shown now on the desktop. Or should we change what it is on the desktop?

9

I guess my phrasing made it sound like this was an error. But you are correct that this is how things are in desktop NetLogo. I simply think that this is not the ideal way to present those options . I would be perfectly happy to see it changed from numbers to descriptive words in desktop, as well.

1 Like
10

That makes sense. Maybe with a label:

Coarse (1), Fine (0.1), Finer (0.01)

We can update the desktop as well.

11

@andrechen Can we update the experimental branch NetLogo Web so that people can try the in-editor color picker?

12

There are some strange behaviors:mp4
As can be seen from the video, my cursor movement and selection operations are often interrupted;
Even though I didn’t adjust the Alpha channel, 255 was automatically filled in [r g b] to become rgba.
When I want to move the cursor near the displayed color block, I can’t move the cursor successfully because I triggered the color selector.

13

@coloshword