Explore Fyne, a GUI framework for Go
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.
Listing 3
arrow-draw.go
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.
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.
Infos
- "Programming Snapshot – Go" by Mike Schilli, Linux Magazine, Issue 221, April 2019, pg. 46-49
- Williams, Andrew. Hands-On GUI Application Development in Go, Packt Publishing, 2019
- "Programming Snapshot – Electron" by Mike Schilli, Linux Magazine, Issue 216, November 2018, pg. 46-50, http://www.linux-magazine.com/Issues/2018/216/Clever-Sampling/
- Fyne: https://fyne.io
- Listings for this article: ftp://ftp.linux-magazine.com/pub/listings/linux-magazine.com/229/
« Previous 1 2
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Direct Download
Read full article as PDF:
Price $2.95
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Find SysAdmin Jobs
News
-
MNT Seeks Financial Backing for New Seven-Inch Linux Laptop
MNT Pocket Reform is a tiny laptop that is modular, upgradable, recyclable, reusable, and ships with Debian Linux.
-
Ubuntu Flatpak Remix Adds Flatpak Support Preinstalled
If you're looking for a version of Ubuntu that includes Flatpak support out of the box, there's one clear option.
-
Gnome 44 Release Candidate Now Available
The Gnome 44 release candidate has officially arrived and adds a few changes into the mix.
-
Flathub Vying to Become the Standard Linux App Store
If the Flathub team has any say in the matter, their product will become the default tool for installing Linux apps in 2023.
-
Debian 12 to Ship with KDE Plasma 5.27
The Debian development team has shifted to the latest version of KDE for their testing branch.
-
Planet Computers Launches ARM-based Linux Desktop PCs
The firm that originally released a line of mobile keyboards has taken a different direction and has developed a new line of out-of-the-box mini Linux desktop computers.
-
Ubuntu No Longer Shipping with Flatpak
In a move that probably won’t come as a shock to many, Ubuntu and all of its official spins will no longer ship with Flatpak installed.
-
openSUSE Leap 15.5 Beta Now Available
The final version of the Leap 15 series of openSUSE is available for beta testing and offers only new software versions.
-
Linux Kernel 6.2 Released with New Hardware Support
Find out what's new in the most recent release from Linus Torvalds and the Linux kernel team.
-
Kubuntu Focus Team Releases New Mini Desktop
The team behind Kubuntu Focus has released a new NX GEN 2 mini desktop PC powered by Linux.