# Seek advice on displaying clickable N by N images

**URL:** <https://discourse.julialang.org/t/seek-advice-on-displaying-clickable-n-by-n-images/56709>\
**Category:** New to Julia\
**Created:** [March 8, 2021, 2:35am UTC](https://discourse.julialang.org/t/seek-advice-on-displaying-clickable-n-by-n-images/56709 "2021-03-08T02:35:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hpw](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hpw/32/22300_2.png) [@hpw](https://discourse.julialang.org/u/hpw)\
**Post date:** [March 8, 2021, 2:35am UTC](https://discourse.julialang.org/t/seek-advice-on-displaying-clickable-n-by-n-images/56709/1 "2021-03-08T02:35:12Z")

</div>

I would like to build an N by N squares laid out in a grid form.  
Each square has a background color and an image at the center.  
No distance between two squares.  
If one of the images is clicked, an event signal is emitted and processed  
(for example to change the image being clicked).

Initially, I thought of using N by N Gtk buttons. But I still have trouble with finding  
the most recent coding examples.

I am wondering if there is a ‘high level’ package which can help set up such  
a form.

Thanks  
HP

---

<div class="post-metadata">

**Author:** ![lobingera](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/lobingera/32/211_2.png) [@lobingera](https://discourse.julialang.org/u/lobingera)\
**Post date:** [March 8, 2021, 9:43am UTC](https://discourse.julialang.org/t/seek-advice-on-displaying-clickable-n-by-n-images/56709/2 "2021-03-08T09:43:06Z")

</div>

If you don’t need focus (highlighted area which you can click on) and don’t need click-action (change of rendering when mouse button is pressed), the simplest way is to put the images on a Canvas and pack it into an EventBox, so you’re program gets ‘raw’ events. Then just use the coordinates of ‘click-event’ and match it back to your selection.

---

<div class="post-metadata">

**Author:** ![hpw](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hpw/32/22300_2.png) [@hpw](https://discourse.julialang.org/u/hpw)\
**Post date:** [March 8, 2021, 10:48pm UTC](https://discourse.julialang.org/t/seek-advice-on-displaying-clickable-n-by-n-images/56709/3 "2021-03-08T22:48:36Z")

</div>

Thank you for the suggestion. I agree that the ‘simplest’ way is DIY.  
I cooked up below code to get started. It displayed a window on screen. The top left  
canvas is supposed to be painted with light gray color. THE REPL prints out “canvas name= 1” as expected. (Later, each canvas’ drawing will depend on the name.)  
BUT no drawing occurred in this case. I must have missed something ?

Btw, do you know of any example usage of EventBox that you suggested ?

Thanks, HP

* * *

using Gtk

function mydraw(widget)  
ctx = Gtk.getgc(widget)  
println("canvas name= ", get\_gtk\_property(widget, :name, AbstractString))  
# background color  
set\_source\_rgb(ctx,0.8,0.8,0.8); # light gray  
rectangle(ctx,0.0,0.0,100.0,100.0); # background  
fill(ctx)  
end

win = GtkWindow(“A new window”, 200, 200)  
g = GtkGrid()

a = GtkCanvas()  
set\_gtk\_property!(a, :name, “1”)  
a.draw = mydraw

b = GtkCanvas()  
set\_gtk\_property!(b, :name, “2”)  
c = GtkCanvas()  
set\_gtk\_property!(c, :name, “3”)  
d = GtkCanvas()  
set\_gtk\_property!(d, :name, “4”)

g[1,1] = a  
g[2,1] = b  
g[1,2] = c  
g[2,2] = d

set\_gtk\_property!(g, :column\_homogeneous, true)  
set\_gtk\_property!(g, :column\_spacing, 0)  
set\_gtk\_property!(g, :row\_spacing, 0)  
push!(win, g)

draw(a)  
showall(win)

---

<div class="post-metadata">

**Author:** ![hpw](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hpw/32/22300_2.png) [@hpw](https://discourse.julialang.org/u/hpw)\
**Post date:** [March 9, 2021, 4:36am UTC](https://discourse.julialang.org/t/seek-advice-on-displaying-clickable-n-by-n-images/56709/4 "2021-03-09T04:36:22Z")

</div>

I found the problem. I need to specify the size!  
a = GtkCanvas(100,100)

And I use this scheme to get the result of mouse click:  
callback(w,evt) = println("name= ", get\_gtk\_property(w, :name, AbstractString))

and then I assign  
signal\_connect(callback, a, “button-press-event”)  
for all 4 canvas (a, b,c,d) in this case.

The callback indicates the canvas’ name to identify which canvas needs to be  
worked on. So, proof of concept…

* * *

As far as you can see, when the number of canvas reaches 64 (a chess board),  
will this scheme cause any issue ?  
[I can see that there will be a LOT of typing to do if I do not use macro to help.].  
Can Julia. handle large amount of signal\_connect ? I have no idea if 64 is considered  
tiny or …

thanks  
HP