Explore Fyne, a GUI framework for Go

Programming Snapshot – Fyne

Article from Issue 229/2019
Author(s):

With the Fyne framework, Go offers an easy-to-use graphical interface for all popular platforms. As a sample application, Mike uses an algorithm to draw arrows onto images.

My new favorite language, Go, impresses with its image processing routines, manipulating the pixels in an image just as quickly as ordinary numbers or text [1]. I often paint arrows in digital images, either for illustration purposes or to point out something funny in a snapshot, and I wondered how hard it would be to automate this task. Thus far, I have always had to fire up Gimp, select a path with the Path tool, and then place an arrow in the image with an Arrow plugin that I downloaded from somewhere on the Internet. With Go, there's got to be an easier way!

GUI Preferred

Actually, I prefer command-line tools, but sometimes a traditional graphical interface is just more practical, for example, to select a place in a photo where I want the program to draw a red arrow.

The arrow in Figure 1 illustrates, for example, that the tape measure in the photo, which I found while rummaging through my dusty desk drawers, is an age-old tchotchke from the once thriving company Netscape. Remember them? Yes, the browser manufacturer, where I worked for a few years during the 1990s, shortly after I left Munich and escaped to Silicon Valley "for a year" but somehow never found my way back.

Figure 1: The algorithm has drawn an arrow on the image at the position selected in the application.

This tape measure is thus more than 20 years old and was my antique contribution to the recent 25th anniversary celebrations of the German edition of Linux Magazine. I fondly remember the day when a young lady from Netscape's own ergonomics department presented it to me so that I could adjust my desk chair to a height that was gentle on my back and hand tendons. Talk about traveling down memory lane!

Spoiled for Choice

For mouse-driven input on graphical interfaces, Go provides about half a dozen different GUI frameworks, described by Andrew Williams' excellent book [2] with rewarding examples, and all more or less run across platforms (i.e., on Linux, the Mac, and even Windows, Remember them?) All based on a single codebase, and one of the frameworks is even supposed to run on mobile phones at some point, a real marvel of technology!

Another alternative for the problem solved today would have been the Electron GUI, which runs with JavaScript and made its debut in this column at the end of last year [3].

Williams also published a Go-based GUI package named Fyne [4] that looked very appealing to me aesthetically, so I used it for the arrow software that had popped into my head. A simple "Hello World" program in Fyne is created with just a few lines of Go code, as illustrated by Listing 1 [5]. It sets a text label and a button one below the other and then waits for the user to click the Exit button with the mouse. As always in Go, Listing 1 compiles with a two-liner:

go mod init hello
go build

Listing 1

hello.go

01 package main
02
03 import "fyne.io/fyne/app"
04 import "fyne.io/fyne/widget"
05
06 func main() {
07   app := app.New()
08
09   win := app.NewWindow("Hello World")
10   win.SetContent(widget.NewVBox(
11     widget.NewLabel("Hello World"),
12     widget.NewButton("Quit", func() {
13       app.Quit()
14     }),
15   ))
16
17   win.ShowAndRun()
18 }

The new Go module created with go mod init hello causes the compiler in the build statement to fetch all the packages not yet installed from the GitHub repositories specified in the code, making them available to the current and future builds requiring them.

The result is a binary file hello that doesn't need anything else to run and looks almost exactly the same on every target platform after recompiling. However, in order for Go to find the correct libraries for Ubuntu during compilation, the following packages must be installed:

sudo apt-get install libgl1-mesa-dev xorg-dev

On the Mac, the whole thing works without further ado.

Hello World

Listing 1 first creates an app, and then its one and only window. The SetContent() method adds a VBox widget to the window in line 10, which in turn arranges two widgets stacked on top of each other: The first one is a label reading "Hello World," and the second is a button that invites users to exit the program with Quit.

The click action assigned to the button is accepted by the NewButton() constructor in line 12 as a callback function. The callback in this case just invokes app.Quit() and removes the GUI, leaving the user with a clean shell prompt.

Now that all widgets and their potential interactions are defined, it is up to line 17 to jump into the event loop with ShowAndRun(), which will be waiting for user input while refreshing the UI continuously.

Now, let's move on to something more challenging – how to pop up a GUI that draws an arrow on a displayed photo at a location picked by the user. Listing 2 shows the UI application that opens a window and uses NewImageFromFile() to prepare a JPG file specified by the user on the command line for loading it later on.

Listing 2

picker.go

01 package main
02
03 import (
04   "flag"
05   "fmt"
06   "fyne.io/fyne"
07   "fyne.io/fyne/app"
08   "fyne.io/fyne/canvas"
09   "fyne.io/fyne/widget"
10   "image/jpeg"
11   "log"
12   "os"
13 )
14
15 type clickImage struct {
16   widget.Box
17   image *canvas.Image
18   filename    string
19 }
20
21 func (ci *clickImage) Tapped(
22     pe *fyne.PointEvent) {
23   imgAddArrow(ci.filename,
24             pe.Position.X, pe.Position.Y)
25   canvas.Refresh(ci)
26 }
27
28 func (ci *clickImage) TappedSecondary(
29     *fyne.PointEvent) {
30   // empty, but required for Tapped to work
31 }
32
33 func main() {
34   flag.Parse()
35   flag.Usage = func() {
36     fmt.Printf("usage: %s imgfile\n",
37       os.Args[0])
38   }
39
40   if len(flag.Args()) != 1 {
41     flag.Usage()
42     os.Exit(2)
43   }
44
45   file := flag.Arg(0)
46
47   os.Setenv("FYNE_SCALE", ".25")
48   win := app.New().NewWindow("Pick Arrow")
49   img := canvas.NewImageFromFile(file)
50
51   width, height := imgDim(file)
52   clickimg := clickImage{image: img,
53                         filename: file}
54   clickimg.image.SetMinSize(
55       fyne.NewSize(width, height))
56   clickimg.Append(clickimg.image)
57   win.SetContent(&clickimg)
58   win.Resize(fyne.NewSize(width, height))
59   win.ShowAndRun()
60 }
61
62 func imgDim(file string) (int, int) {
63   src, err := os.Open(file)
64   if err != nil {
65     log.Fatalf("Can't read %s", file)
66   }
67   defer src.Close()
68
69   jimg, err := jpeg.Decode(src)
70   if err != nil {
71     log.Fatalf("Can't decode %s: %s",
72       file, err)
73   }
74
75   bounds := jimg.Bounds()
76   return (bounds.Max.X - bounds.Min.X),
77          (bounds.Max.Y - bounds.Min.Y)
78 }

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy Linux Magazine

SINGLE ISSUES
 
SUBSCRIPTIONS
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • Wheat and Chaff

    If you want to keep only the good photos from your digital collection, you have to find and delete the fails. Mike Schilli writes a graphical application with Go and the Fyne framework to help you cull your photo library.

  • GUI Apps with Fyne

    The Fyne toolkit offers a simple way to build native apps that work across multiple platforms. We show you how to build a to-do list app to demonstrate Fyne's power.

  • Chip Shot

    We all know that the Fyne framework for Go can be used to create GUIs for the desktop, but you can also write games with it. Mike Schilli takes on a classic from the soccer field.

  • Treasure Hunt

    A geolocation guessing game based on the popular Wordle evaluates a player's guesses based on the distance from and direction to the target location. Mike Schilli turns this concept into a desktop game in Go using the photos from his private collection.

  • Programming Snapshot – Go Racing Game

    The fastest way through a curve on a racetrack is along the racing line. Instead of heading for Indianapolis, Mike Schilli trains his reflexes with a desktop application written in Go, just to be on the safe side.

comments powered by Disqus