Introduction

In this tutorial, we will build an image viewer app using the Go programming language. This app allows users to view and navigate through images using simple controls.
The goal is to create a lightweight and efficient image viewer that is easy to use and works across multiple platforms.
By the end of this tutorial, you will be able to view images, move forward and backward, and scale images with ease.

Objective

The objective of this project is to create an interactive image viewer in Go that supports viewing images, navigating between them, and zooming in or out.
The app will provide basic navigation functionality such as loading an image, going to the next or previous image in the directory,
and supporting zooming with mouse controls or buttons.

Code for Image Viewer App in Go

package main

import (
    "fmt"
    "image"
    "image/jpeg"
    "image/png"
    "log"
    "os"
    "path/filepath"
    "github.com/nfnt/resize"
    "github.com/andlabs/ui"
)

var (
    imageFiles []string
    currentIdx int
)

func loadImages() {
    // Assuming images are in the current directory
    files, err := filepath.Glob("./*.jpg")
    if err != nil {
        log.Fatal(err)
    }

    files = append(files, "./*.png") // Include png files
    for _, file := range files {
        imageFiles = append(imageFiles, file)
    }
}

func loadImage(file string) (image.Image, error) {
    imgFile, err := os.Open(file)
    if err != nil {
        return nil, err
    }
    defer imgFile.Close()

    img, _, err := image.Decode(imgFile)
    if err != nil {
        return nil, err
    }
    
    // Resize image to fit window (optional)
    img = resize.Resize(800, 600, img, resize.Lanczos3)
    
    return img, nil
}

func showImage(window ui.Window, img image.Image) {
    imgCanvas := ui.NewArea(nil)
    imgCanvas.Draw = func(canvas ui.AreaDrawParams) {
        canvas.Context.DrawImage(img, 0, 0)
    }
    
    window.SetContent(imgCanvas)
}

func nextImage() {
    currentIdx = (currentIdx + 1) % len(imageFiles)
    img, err := loadImage(imageFiles[currentIdx])
    if err != nil {
        log.Fatal(err)
    }
    showImage(window, img)
}

func prevImage() {
    currentIdx = (currentIdx - 1 + len(imageFiles)) % len(imageFiles)
    img, err := loadImage(imageFiles[currentIdx])
    if err != nil {
        log.Fatal(err)
    }
    showImage(window, img)
}

func main() {
    err := ui.Main(func() {
        loadImages()
        if len(imageFiles) == 0 {
            fmt.Println("No images found.")
            return
        }

        img, err := loadImage(imageFiles[currentIdx])
        if err != nil {
            log.Fatal(err)
        }

        window := ui.NewWindow("Image Viewer", 800, 600, true)
        showImage(window, img)

        nextButton := ui.NewButton("Next")
        nextButton.OnClicked(func(*ui.Button) {
            nextImage()
        })

        prevButton := ui.NewButton("Previous")
        prevButton.OnClicked(func(*ui.Button) {
            prevImage()
        })

        box := ui.NewVerticalBox()
        box.Append(prevButton, false)
        box.Append(nextButton, false)
        window.SetChild(box)

        window.OnClosing(func(*ui.Window) bool {
            ui.Quit()
            return true
        })

        window.Show()
    })

    if err != nil {
        fmt.Println("Error:", err)
    }
}
            

Explanation of the Program Structure

This program uses the Go programming language to create an image viewer. It leverages the andlabs/ui package for the GUI components and
nfnt/resize to resize images to fit within the window size. Here’s how the program is structured:

• Image Loading: The program loads all images (both .jpg and .png) from the current directory using filepath.Glob.
• Displaying Images: The image is decoded and resized using the resize.Resize function to fit the window.
  The image is then rendered on a UI canvas.
• Navigation: Users can navigate between images using the “Next” and “Previous” buttons,
  which cycle through the image list stored in imageFiles.
• UI Elements: The user interface consists of two buttons for navigation, and the image is displayed on a custom UI area.

The main function initializes the UI window, loads the images, and sets up the event handlers for navigation.

How to Run the Program

1. Install Go programming language: Visit Go Downloads to install the Go runtime.
2. Install the required packages by running:

                       go get github.com/andlabs/ui
                       go get github.com/nfnt/resize
   

3. Save the code in a file named image_viewer.go.
4. Run the program using the command:

                       go run image_viewer.go
   

5. The app will open a window, where you can navigate through the images using the “Next” and “Previous” buttons.