programming - How to create a multi-selectable setterbar with colored buttons

Background: consider the following code-snippet.

  Dynamic@Grid[

    Table[Setter[Dynamic[idx, (idx = #1) &],
      i*6 + j, 
    Graphics[{Blue, Disk[]}, ImageSize -> 20]], 
    {i, 0, 1}, {j, 6}]]

This code creates two rows of clickable disk images. So if idx=10 is run, the 10th disk looks pressed. I want to make this control multi-selectable. So if idx={1,12} run, the first and last disks look pressed. ( In my application the disks may have different colors, edge properties and opacity. ) - See also: What is an efficient way of selecting multiple colors via Manipulate?

Question: How to create "a multi-selectable setterbar with colored buttons" ? ( preferably based on the snippet above, but not necessarily ).

Answer

Does this provide the functionality you are looking for? Note that a multi-selectable SetterBar is a TogglerBar. The only problem with the latter is that it cannot be partitioned into a multi-row grid. For your particular problem, I would rather use Button instead of Setter:

list = {};

Dynamic@list

Grid[Table[
   DynamicModule[{pressed = False}, With[{idx = i*6 + j},
     Button[Graphics[{Blue, Disk[]}, ImageSize -> 20], 
      pressed = ! pressed; 
      list = If[pressed, Append[list, idx], DeleteCases[list, idx]], 
      Appearance -> Dynamic@If[pressed, "Pressed", Automatic]]]],
   {i, 0, 1}, {j, 6}]]

A somewhat different approach is to concatenate multiple TogglerBars: this has some drawbacks, as the output is always sorted (if not then output order depends on the order of clicks and the order of TogglerBar rows).

TogglerGrid::usage = 
  "TogglerGrid[x, {val.1, val.2, ...}, n] represents a \
TogglerBar-like control (with setting x and with toggler buttons for \
values val.i to include in the list x), but with togglers arranged in \
a grid, with a maximal n elements per row.";

TogglerGrid[var_, ref_] := TogglerGrid[var, ref, Length@ref];
TogglerGrid[Dynamic[var_], list_List, n_] := Module[

   {set, ref = Evaluate@list, temp},
   temp = {} & /@ ref;
   set = TogglerBar[
       Dynamic[temp[[#]], 
        Function[{$x}, temp[[#]] = $x; 
         var = Sort@(Join @@ temp)]], {ref[[#]]}] & /@ 
     Range@Length@ref;
   Grid[
    Partition[set, n, n, {1, 1}, {}],
    Alignment -> {Center, Center},

    Spacings -> {0, 0}]
   ];
TogglerGrid[var_, arg___] := 
  Module[{dummy = var}, TogglerGrid[Dynamic@dummy, arg]];

Test the function:

x = {};
Dynamic@x
TogglerGrid[Dynamic[x], 
 Table[Graphics[{Hue@RandomReal[], Disk[]}, ImageSize -> 20], {10}],

  5]