Do-It-Yourself Widget

Curiously, Fyne hides the dimensions of the loaded photo from the program, so the imgDim() function defined as of line 62 simply loads the JPG file again from disk using Decode() and then calls Bounds() to fetch the coordinates of the image's upper left and lower right corners. These x/y values in turn are converted by line 76 into the width and height of the image by simple arithmetic. The resulting coordinates pair is then returned to the calling main program. The latter uses this information to adjust the size of the application window to fit the image exactly.

As before with "Hello World," Listing 2 starts an event loop with ShowAndRun() in line 59, which processes the user's interactions with the GUI – in this case intercepting mouse clicks and executing predefined actions on them.

In the program at hand, I want the displayed image widget to notice where the user clicked with the mouse, in order to draw an arrow there. However, the image loaded and displayed by Fyne is not a real widget, capable of processing mouse clicks. Listing 2 thus resorts to a hack that I learned from a helpful contributor to the Slack #fyne channel. Line 15 defines a structure that, thanks to the widget.Box element, inherits its widget properties from the general purpose Box widget in the Fyne catalog, including its capability of processing mouse clicks in its vicinity. On top of this, the structure saves the image object in the image attribute and the name of the loaded JPG file for later use in filename.

Lines 21 and 28 now define the methods Tapped() and TappedSecondary() for this new DIY widget. Surprisingly, Fyne won't be satisfied with a measly Tapped event to register mouse clicks; it also insists the user define a secondary pointer events handler for Multi-Touch, which is not used in this widget at all. The program leaves TappedSecondary() blank, but it has to be there, because otherwise Tapped() won't work either.

With mouse clicks, Listing 2 will therefore jump to the callback defined in line 23 for the Tapped event, which invokes the imgAddArrow() function from Listing 3. imgAddArrow() draws the arrow into the image and saves the modified file. A subsequent Refresh() on the widget loads the modified photo from disk again and displays it. The user only notices that they clicked on a point in the image and that a horizontal red arrow appears there as if by magic. Line 56 in Listing 2 uses Append() to append the image object to the objects managed by the new DIY clickImage widget. This is done using the image object pointer stored in the clickImage structure in line 17; the image data resides in the struct's image element.

01 package main
02
03 import (
04   "image"
05   "image/color"
06   "image/draw"
07   "image/jpeg"
08   "log"
09   "os"
10 )
11
12 func imgAddArrow(file string, x, y int) {
13   src, err := os.Open(file)
14   if err != nil {
15     log.Fatalf("Can't read %s", file)
16   }
17   defer src.Close()
18
19   jimg, err := jpeg.Decode(src)
20   if err != nil {
21     log.Fatalf("Can't decode %s: %s",
22       file, err)
23   }
24
25   bounds := jimg.Bounds()
26   dimg := image.NewRGBA(bounds)
27   draw.Draw(dimg, dimg.Bounds(), jimg,
28     bounds.Min, draw.Src)
29   arrowDraw(dimg, image.Point{X: x, Y: y})
30
31   dstFileName := file
32   dstFile, err := os.OpenFile(dstFileName,
33     os.O_RDWR|os.O_CREATE, 0644)
34   if err != nil {
35     log.Fatalf("Can't open output")
36   }
37
38   jpeg.Encode(dstFile, dimg,
39     &jpeg.Options{Quality: 80})
40   dstFile.Close()
41 }
42
43 func arrowDraw(dimg draw.Image,
44                start image.Point) {
45   length := 300
46   width := 20
47   tiplength := 80
48   tipwidth := 90
49
50   stem := image.Rectangle{
51     Min: image.Point{X: start.X,
52                      Y: start.Y},
53     Max: image.Point{X: start.X + length,
54                      Y: start.Y + width},
55   }
56   rectDraw(dimg, stem)
57
58   triDraw(dimg,
59     image.Point{X: start.X + length,
60       Y: start.Y + width/2 - tipwidth/2},
61     image.Point{X: start.X + length,
62       Y: start.Y + width/2 + tipwidth/2},
63     image.Point{
64       X: start.X + length + tiplength,
65       Y: start.Y + tipwidth/2},
66   )
67 }
68
69 func rectDraw(dimg draw.Image,
70               bounds image.Rectangle) {
71   red := color.RGBA{255, 0, 0, 255}
72   draw.Draw(dimg, bounds,
73     &image.Uniform{red},
74     bounds.Min, draw.Src)
75 }
76
77 func triDraw(dimg draw.Image,
78              t1, t2, t3 image.Point) {
79   ymiddle := t1.Y + (t2.Y-t1.Y)/2
80
81   for x := t1.X; x < t3.X; x++ {
82     height := int(float64(t2.Y-t1.Y) *
83       (float64(t3.X-x) /
84        float64(t3.X-t2.X)))
85     rect := image.Rectangle{
86       Min: image.Point{X: x,
87         Y: ymiddle - height/2},
88       Max: image.Point{X: x + 1,
89         Y: ymiddle + height/2}}
90
91     rectDraw(dimg, rect)
92   }
93 }

Fyne is designed to dynamically adapt its appearance to the display being used like a T-1000 Terminator. However, this conflicts with some of the requirements of the arrow software, mainly to display the window in such a way that the image pixels are shown 1:1, to make sure mouse click coordinates can easily be converted into image pixels.

If the call to SetMinSize() were left out in line 54 in Listing 2, Fyne would shrink the image beyond recognition. Line 58 makes sure that the application window assumes exactly the same dimensions as the image. Thus, nothing is compressed, the width to height ratio remains overall.

Line 47 with the FYNE_SCALE environment variable reduces the size of the application window by a factor of four (to 0.25) so that even a relatively large image, for example from a modern mobile phone, will fit on a reasonably sized PC screen.

Anatomy of an Arrow

How does the algorithm paint the arrow? The arrow's thin trunk can be easily painted as a horizontal rectangle. The tip of the arrow pointing to the right is a triangle with the coordinates T1, T2, and T3 (each stated as x- and y-values), which must also be filled with red color (Figure 2). It's not as trivial as you'd think at first glance. However, if we dismantle the triangular shape into narrow vertical rectangles of descending height, things fall into place. The rectangles' height is at a maximum for x values near T1 and T2, and decreases linearly until it reaches zero at T3.

Figure 2: Simple algorithm for a filled arrow.

The imgAddArrow() function from line 12 of Listing 3 implements the necessary steps. Line 19 decodes the loaded JPG image and calls the internal arrowDraw() function, which draws the arrow, converts the image back into JPG format and saves it under the same name on disk.

The arrow is painted with a slender horizontal rectangle and a lateral triangle at its right end. The tip points to the right. The numerical values in lines 45 to 48 define the shape and size of the arrow. Graphics libraries like image/draw from Go's core package can paint rectangles of any kind and even fill them in with an appealing color, so that's easy.

One caveat: They don't specify a rectangle's corner coordinates as four x/y values, but – as the method Bounds() reveals – with only two: the Min and the Max point, that is, the upper left corner and the lower right corner, since x coordinates run from left to right and y coordinates from top to bottom.

Both bounds points are available as x/y pairs. The logic between lines 51 and 54 calculates the Bounds() values of the desired rectangle, given the x/y coordinates of a starting point, and the desired length and thickness of the arrow's trunk.

The rectDraw() function from line 69 draws a specified rectangle in red on the image using Go's images/draw library. The triangular tip of the arrow comes courtesy of triDraw() in line 77. Besides the handle on the draw image, it accepts the coordinates of the points T1, T2, and T3 in Figure 2. The formula for the height of the triangle at different x-values is determined by line 82. It divides the distance between the current x-value and the end point T3 by the total x-spacing between T2 and T3, thus reporting the maximum height of the triangle near T2, and a height of zero pixels near T3. These many triangular parts in turn consist of narrow vertical rectangles with a width of one pixel. The whole thing looks surprisingly convincing for such a simple algorithm.

Listings 2 and 3 divide the program into two parts for the sake of clarity, but both define the package main. This is why

go build picker.go arrow-draw.go

generates a binary picker that starts the user interface, displaying the specified image. It lets the user select a point with the mouse and then quickly draws an arrow there. None of this is rocket science; any algorithm ultimately boils down to a few simple, reproducible steps.