Suggestion: 'ghost mode'

[johnhorner]

Hi, I did something like this a few years ago, see:

http://johnhorner.info/dot-matrix/

not nearly as modern as yours. However I also came up with 'ghost mode' which uses disabled checkboxes instead of checked ones for a muted effect. You could also have inverted ghost mode, where the background boxes were disabled and the foreground enabled? Possibly even very crude anti-aliasing.

Anyway, love your work, just a suggestion.

[bryanbraun]

@johnhorner, hey I like your demo. Great minds!

The disabled checkboxes thing is interesting. I could see that being a feature of Checkboxland. I think the way we'd want to implement it is assigning it to the value 3 in our data matrix, making the possible values look like this:

• 0 = (unchecked)
• 1 = (checked)
• 2 = (indeterminate)
• 3 = (disabled)

That one change should allow support for both the "ghost mode" and "inverted ghost mode", since people could then place disabled checkboxes however they wanted.

[johnhorner]

Looks good, that should do it. But a checkbox can be disabled at the same time as being checked, giving you a fourth state.

[bryanbraun]

Oh! good point. For that matter, it looks like indeterminate checkboxes can be disabled too. So if all of these were their own visual state, it would have to look something like this (images are from Safari):

• 0 = (unchecked)
• 1 = (checked)
• 2 = (indeterminate)
• 3 = (disabled unchecked)
• 4 = (disabled checked)
• 5 = (disabled indeterminate)

The alternative is to treat "disabled" as a separate attribute, but that would likely add quite a bit of complexity to the API.

Either way, this feature is a bit bigger than I originally thought. 😅 It's a neat idea though!

[johnhorner]

Oh good point! So now there are six 'colours' in the palette, and if we add 'no checkbox at all' that's a seventh. Pity we can't make it eight! I might try to come up with some concept art using them.

[johnhorner]

Here's a quick Mona Lisa rendered in checkboxes in the different 'colours' — the fact that Chrome makes the checked ones that bright blue kind of ruins it. But if you zoom way, way out…

http://johnhorner.info/mona-lisa-checkbox-overdrive/

[bryanbraun]

Cool! The "checked" state looks better in Edge, which uses gray instead of blue:

You know, if I ended up adding all these states to checkboxland, it would totally be possible for a developer to create a "Paint" app for drawing other things like this. It's too bad that the colors themselves are so different across browsers.

[KonradLinkowski]

I'm a little late to that party but I think using a binary encoding of "color" could be more extensible:

1st bit - checked / unchecked
2nd bit - indeterminate
3rd bit - disabled

Examples:

• 0 - 0b000 - unchecked
• 1 - 0b001 - checked
• 2 - 0b010 - indeterminate
• 4 - 0b100 - disabled unchecked
• 5 - 0b101 - disabled checked
• 6 - 0b110 - disabled indeterminate

There is an ambiguity about 3 but it could be treated like indeterminate state.

Advantage of this would be that bit flags could be used:

const State = {
  Checked: 1 << 0,
  Indeterminate: 1 << 1,
  Disabled: 1 << 2,
}

// checking examples
const indeterminateVal = cellData & State.Indeterminate;
const checkedVal = indeterminateVal ? false : cellData & State.Checked;
const disabledVal = cellData & State.Disabled;

// setting examples
cbl.setCheckboxValue(x, y, State.Checked);
cbl.setCheckboxValue(x, y, State.Checked | State.Disabled);
cbl.setCheckboxValue(x, y, State.Indeterminate | State.Disabled);