---
id: e55cbf5b5116abf3a5fc62c1af99e19b
author: Yunjin Lee
title: Implementácia prehliadača obrázkov s viacsúborovým zoznamovým poľom založeného na Go a Tcl/Tk 9.0
description: Implementujeme grafickú prehliadačku obrázkov, ktorá pridáva väzby príkazov Tcl listbox a handlery virtuálnych udalostí do modernc.org/tk9.0, čo umožňuje otváranie viacerých súborov obrázkov, prepínanie výberu a odstraňovanie položiek zo zoznamu.
language: sk
date: 2024-11-19T11:51:05.279238471Z
path: /blog/posts/creating-a-image-viewer-with-tk-in-go-z279238471Z
category: gui
---

V minulom príspevku sme stručne predstavili knižnicu CGo-Free Tcl/Tk.
V tomto článku vytvoríme prehliadač obrázkov, pričom vychádzame z príkladu z minulého príspevku.

## Plán prehliadača obrázkov

1. Zobrazovač obrázkov z minulého príspevku nemal funkciu odstránenia obrázkov, preto sa s rastúcim počtom načítaných obrázkov okno stávalo nedostatočne veľkým.
   Odstráňme nepoužívané štítky.
2. Ak chceme zobrazovač obrázkov použiť na zoznam viacerých obrázkov, vytvorme List.
3. Je vhodné načítať viacero obrázkov naraz.
4. Implementujme aj odstránenie obrázkov, ktoré si nechceme pozrieť, zo zoznamu.
5. Vytvorme funkciu, ktorá umožní vybrať a zobraziť konkrétny obrázok z viacerých obrázkov.

## Upravená knižnica Tcl/Tk 9.0

Pôvodná knižnica má nedostatočnú implementáciu Listbox, a preto je ťažké zobraziť zoznam obrázkov.
Stiahnime upravenú knižnicu.
Ak nemáte nainštalované Git CLI, môžete knižnicu stiahnuť aj ako archív tarball alebo zip.

```bash
git clone https://github.com/gg582/tk9.0
```

Najprv si preskúmajme niektoré z pridaných funkcií.

Skôr než preskúmame nové funkcie, pozrime sa stručne na štruktúru existujúcich funkcií na základe funkcie Destroy v riadku 1017 súboru tk.go.

```go
func Destroy(options ...Opt) {
	evalErr(fmt.Sprintf("destroy %s", collect(options...)))
}
```

Táto funkcia je implementovaná tak, že odovzdáva svoju činnosť funkcii evalErr vo forme skriptu Tcl.
Inými slovami, na implementáciu požadovanej funkcie stačí odovzdať príkaz vo formáte zodpovedajúceho skriptu Tcl.

Ako príklad implementujme metódu na pridávanie položiek do Listboxu.
Najprv si pre skriptovanie v Tcl v oficiálnej príručke pozrime príkaz insert, ktorý je dostupný pre listbox.

[Príkaz insert](https://www.tcl.tk/man/tcl8.6/TkCmd/listbox.htm#M29)

Z popisu príkazu insert vyplýva, že insert vkladá zadané položky na určený index.
Na jeho implementáciu teda

```go
func (l *ListboxWidget) AddItem(index int, items string) {
	evalErr(fmt.Sprintf("%s insert %d %s", l.fpath, index, items))
}
```

Môžeme napísať napríklad takýto kód.

Keď už poznáme približný princíp implementácie, vysvetlíme najprv ďalšie funkcie pre Listbox.

### Zoznam: vkladanie/odstraňovanie

```go
package main
import . "modernc.org/tk9.0"

func main() {
    length := 3
    l := Listbox()
    l.AddItem(0, "item1 item2 item3")
    b1 := TButton(Txt("Delete Multiple Items, index (0-1)"), Command( func(){
        if length >= 2 {
            l.DeleteItems(0,1)
            length-=2
        }
    }))
    b2 := TButton(Txt("Delete One Item, index (0)"), Command( func () {
        if length > 0 {
            l.DeleteOne(0)
            length-=1
        }
    }))
    Pack(TExit(),l,b1,b2)
    App.Wait()
}

```

V uvedenom programe AddItem vkladá od indexu 0 po poradí rôzne položky oddelené medzerníkom.
Položky item1 až item3 tak získajú po rade indexy 0, 1 a 2.
Ako funguje odstraňovanie položiek, zistíme spustením príkladu.

### Zoznam: získanie vybraných položiek

Teraz získame vybrané položky z Listboxu a overíme ich.

```go
package main

import . "modernc.org/tk9.0"

func main() {
    l := Listbox()
    l.SelectMode("multiple")
    l.AddItem(0, "item1 item2 item3")
    btn := TButton(Txt("Print Selected"), Command( func() {
        sel := l.Selected()
        for _, i := range sel {
            println(l.GetOne(i))
        }
    }))

    Pack(TExit(), l, btn)
    App.Wait()
}
```

Metóda Selected získava indexy všetkých položiek vybraných v aktuálnom Listboxe.
Metóda GetOne získava hodnotu položky zodpovedajúcej danému indexu.
Túto skutočnosť je možné overiť na výstupe vypísanom do konzoly.
Pre úplnosť, podobná metóda Get prijíma počiatočný a koncový index a získava hodnoty všetkých položiek v rozsahu.

Ďalej zmeníme farby Listboxu.

Najprv si pozrime nasledujúci príklad.

```go
package main

import . "modernc.org/tk9.0"

func main() {
    l := Listbox()
    l.Background("blue")
    l.Foreground("yellow")
    l.SelectBackground("black")
    l.SelectForeground("white")
    l.Height(20)
    l.Width(6)
    l.AddItem(0, "item1 item2 item3")
    l.ItemForeground(0,"red")
    l.ItemBackground(0,"green")
    l.ItemSelectBackground(0,"white")
    l.ItemSelectForeground(0,"black")
    l.Relief("ridged")
    Pack(TExit(),l)
    App.Wait()
}
```

![Výsledok použitia farieb](/assets/images/go-tk-imageviewer/listbox_color.png)

Ako je vidieť v uvedenom kóde, výška sa zväčšila.
Okrem toho je vidieť, že farby sa správne uplatnili.
Keďže tu je nastavená možnosť, ktorá mení farbu iba pre konkrétne položky,
vidíme, že iba prvý riadok má inú farbu.

Hoci rozdiel nie je veľký, metódou Relief môžeme zmeniť štýl okraja widgetu medzi hodnotami flat, groove, raise, ridge, solid a sunken.

## Príklad prehliadača obrázkov

Teraz vytvoríme prehliadač obrázkov pomocou widgetov, ktorých použitie sme si práve ukázali.
Príklad programu je nasledujúci.

```go
package main

import (
    "fmt"
    "log"
    "os"
    "runtime"
    "strings"
    "path"

    . "modernc.org/tk9.0"
)

var pbuttons []*TButtonWidget
var extensions []FileType
var pbutton *TButtonWidget = nil
var listbox, listbox2 *ListboxWidget
var cur *LabelWidget = nil
var imagesLoaded []*LabelWidget
func PhotoName(fileName string) string {
        fileName = path.Base(fileName)
        return fileName[:len(fileName)-len(path.Ext(fileName))]
}

func handleFileOpen() {
    res := GetOpenFile(Multiple(true),Filetypes(extensions)) //Povoľuje viacnásobný výber a zapína filter.
    s := make([]string,0,1000)
    for _, itm := range res {
        if itm != "" {
            tmp := strings.Split(itm," ")
            s = append(s,tmp...)
        }
    }

    for _, photo := range s {
        formatCheck := strings.Split(photo, ".")
        format := formatCheck[len(formatCheck)-1]

        if (strings.Compare(format, "png") == 0) || (strings.Compare(format, "ico") == 0) {
            picFile, err := os.Open(photo)
            if err != nil {
                log.Println("Error while opening photo, error is: ", err)
            }

            pictureRawData := make([]byte, 10000*10000)
            picFile.Read(pictureRawData)

            imageLabel := Label(Image(NewPhoto(Data(pictureRawData))))
                        imagesLoaded = append(imagesLoaded,imageLabel)
            var deleteTestButton *TButtonWidget
            deleteTestButton = TButton(
                Txt("Unshow Image"),
            Command(func() {
                GridForget(imageLabel.Window)
                GridForget(deleteTestButton.Window)
            }))

            pbuttons = append(pbuttons,deleteTestButton)

                        listbox.AddItem(len(imagesLoaded)-1,PhotoName(photo))
                        listbox2.AddItem(len(imagesLoaded)-1,PhotoName(photo))
            picFile.Close()
        }
    }
}

func DeleteSelected () {
    s:=listbox.Selected()
    if len(s) == 0 {
        return
        }
    for _, i := range s {
        listbox.DeleteOne(i)
        listbox2.DeleteOne(i)
        if len(imagesLoaded)-1>i {
            continue
        }
        if cur == imagesLoaded[i] {
            pbutton = nil
            cur = nil
        }
        Destroy(imagesLoaded[i])
        Destroy(pbuttons[i])
                imagesLoaded = append(imagesLoaded[:i],imagesLoaded[i+1:]...)
        pbuttons = append(pbuttons[:i], pbuttons[i+1:]...)
    }
}

func SelectImage() {
        s:=listbox2.Selected()
        if len(s) == 0 {
                return
        }

    if len(imagesLoaded) -1 < s[0] {
        return
    }
    if imagesLoaded[s[0]] == nil {
        return
    }
    if cur != nil {
            GridForget(cur.Window)
    }
    if pbutton != nil {
        GridForget(pbutton.Window)
    }

        Grid(imagesLoaded[s[0]], Row(0), Column(2))
    Grid(pbuttons[s[0]], Row(0), Column(3))
    cur = imagesLoaded[s[0]]
    pbutton = pbuttons[s[0]]
}

func SelectIndex(index int) {

    if len(imagesLoaded) -1 <index {
        return
    }
    if imagesLoaded[index] == nil {
        return
    }
    if cur != nil {
            GridForget(cur.Window)
    }
    if pbutton != nil {
        GridForget(pbutton.Window)
    }

        Grid(imagesLoaded[index], Row(0), Column(2))
    Grid(pbuttons[index], Row(0), Column(3))
    cur = imagesLoaded[index]
    pbutton = pbuttons[index]
}

func main() {
    menubar := Menu()
    //DefaultTheme("awdark","themes/awthemes-10.4.0")
    //Ak chcete použiť tému, zadajte jej názov a cestu.
    fileMenu := menubar.Menu()
    extensions = make([]FileType,0,1)
    extensions = append(extensions, FileType{ "Supported Images", []string {".png",".ico"}, "" } )
    //Do filtra pridáme png a ico.
    fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(func () {
        handleFileOpen()
        SelectIndex(len(imagesLoaded)-1)
    } ))
    Bind(App, "<Control-o>", Command(func() { fileMenu.Invoke(0) }))
    fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler())
    Bind(App, "<Control-q>", Command(func() { fileMenu.Invoke(1) }))
    menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu))
        imagesLoaded = make([]*LabelWidget, 0, 10000)
    pbuttons = make([]*TButtonWidget,0,10000)
    var scrollx, scroll, scroll2, scrollx2 *TScrollbarWidget
        listbox = Listbox(Yscrollcommand(func(e *Event) { e.ScrollSet(scroll)}) , Xscrollcommand( func(e *Event) { e.ScrollSet(scrollx)}))
        listbox2 = Listbox(Yscrollcommand(func(e *Event) { e.ScrollSet(scroll2)}), Xscrollcommand(func(e *Event) { e.ScrollSet(scrollx2)}))
        listbox.SelectMode("multiple")
        listbox2 = Listbox()
        listbox.Background("white")
        listbox.SelectBackground("blue")
        listbox.SelectForeground("yellow")
        listbox2.Background("grey")
        listbox2.SelectBackground("green")
    listbox2.SelectForeground("blue")
    listbox2.SelectBackground("brown")
        listbox.Height(5)
        listbox.Width(4)
        listbox2.Height(5)
        listbox2.Width(4)
        delBtn := Button(Txt("Delete"), Command(func () { DeleteSelected() }))
        selBtn := Button(Txt("Select"), Command(func () { SelectImage() }))
        scroll = TScrollbar(Command(func(e *Event) { e.Yview(listbox) }))
        scrollx = TScrollbar(Orient("horizontal"),Command(func(e *Event) { e.Xview(listbox) }))
    scroll2 = TScrollbar(Command(func(e *Event) { e.Yview(listbox2) }))
        scrollx2 = TScrollbar(Orient("horizontal"),Command(func(e *Event) { e.Xview(listbox2) }))
        Grid(listbox,Row(1),Column(0), Sticky("nes"))
        Grid(scroll,Row(1),Column(1), Sticky("nes"))
    Grid(scrollx,Row(2),Column(0),  Sticky("nes"))
        Grid(delBtn,Row(3),Column(0), Sticky("nes"))
        Grid(listbox2,Row(1),Column(2), Sticky("nes"))
        Grid(scroll2,Row(1),Column(3), Sticky("nes"))
    Grid(scrollx2,Row(2),Column(2), Sticky("nes"))
        Grid(selBtn,Row(3),Column(2), Sticky("nes"))
    App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS))
    App.Configure(Mnu(menubar), Width("80c"), Height("60c")).Wait()
}

```

![Výsledok spustenia prehliadača obrázkov](/assets/images/go-tk-imageviewer/imageviewer.png)

V tomto príklade, aby bola implementácia jednoduchšia, vytvárame všetky widgety obrázkov už pri ich načítaní a neoverujeme duplicitné súbory.
Spomenuté problémy môžete tiež odstrániť a tému môžete zmeniť pomocou metódy DefaultTheme, ktorej časť je zakomentovaná.
Odporúčame vám precvičiť sa tak, že vytvoríte nový program, ktorý tieto časti vylepší.

## Zhrnutie

V tomto článku sme sa oboznámili s tým, ako funguje volanie príkazov knižnice Tcl/Tk v jazyku Go, a vytvorili sme prehliadač obrázkov s pridaným Listboxom.

1. Spôsob volania príkazov knižnice Tcl/Tk
2. Spôsob použitia Listboxu
3. Zmena atribútov widgetu Listbox
4. Vytvorenie prehliadača obrázkov

Týmto spôsobom sa pokúste upraviť aj iné knižnice a na základe pridaných funkcií napíšte dokončený program.