Update only one element in a dynamic grid?

Question

I've got a grid of buttons that each display an image from an array. When a button is clicked, its image changes.

DynamicModule[{g = Table[Image[RandomReal[{0.5, 1}, {16, 16, 3}]], {19}, {19}]},
  Grid[Table[With[{i = i, j = j},
    Button[Dynamic[g[[i, j]]], g[[i, j]] = Image[RandomReal[1, {16, 16}]],
      ImageSize -> Full, Appearance -> None]],
    {i, 19}, {j, 19}], Spacings -> {0, 0}]]

The problem is that it is very slow. I presume this is because all the buttons get updated when only one is changed. This raises the general question as to how can you dynamically change only the control corresponding to the changed element in the list?

I've already come up with a workaround for my particular problem:

DynamicModule[{g = Table[Image[RandomReal[{0.5, 1}, {16, 16, 3}]], {19}, {19}]},
  Pane[ClickPane[Dynamic[ImageAssemble[g]],
    (g[[19 - Floor[#[[2]]/16], Floor[#[[1]]/16] + 1]] =
      Image[RandomReal[1, {16, 16}]])&],
    ImageSize -> Full]]

This splices together a single image, works out where you clicked on it, then changes the appropriate element in the list. It doesn't answer the original question, but it's lots faster.

Additional note:

I'd quite like g to be available outside the grid. Then you could have multiple grids doing different things. Or some other view of the data.

Answer 1

Studying various parts of the your code I found that having an array hold your images seems to be the main cause of delay for some reason not directly clear to me. Using normal variables (which can be done easily by putting the DynamicModule deeper in the hierarchy) the process gets much quicker:

Grid[
 Table[
  DynamicModule[
   {g = Image[RandomReal[{0.5, 1}, {16, 16, 3}]]},
   Button[
    Dynamic[g],
    g = Image[RandomReal[1, {16, 16}]],
    ImageSize -> Full, Appearance -> None
    ]
   ], {i, 19}, {j, 19}
  ], Spacings -> {0, 0}
 ]

You can still see the ugly white lines that are also in your original code (but not in your alternative). Have to find out how to remove these...

Answer 2

This seems to be a bit faster, still not as fast as Sjoerd's method, that cleverly uses a different variable for each cell. The solution below keeps the original 19 x 19 table g. I also removed the unwanted horizontal lines (by negative spacing) and used EventHandler to get rid of the button-effect.

DynamicModule[{g = 
   Table[Image[RandomReal[{0.5, 1}, {16, 16, 3}]], {19}, {19}], ref},
 Dynamic[Grid[
   MapIndexed[
    EventHandler[#1, {"MouseClicked" :> (g[[Sequence @@ #2]] = 
          Image[RandomReal[1, {16, 16}]])}] &, g, {2}],
   Spacings -> {0, -.05}], TrackedSymbols :> {g}]
 ]