---
id: e55cbf5b5116abf3a5fc62c1af99e19b
author: Yunjin Lee
title: Implementarea unui vizualizator de imagini bazat pe listbox cu suport pentru fișiere multiple, folosind Go și Tcl/Tk 9.0
description: Se implementează un vizualizator grafic de imagini, capabil să deschidă mai multe fișiere de imagine, să comute selecția și să șteargă elemente din listă, prin adăugarea de legături (bindings) pentru comenzile Tcl listbox și de handlere de evenimente virtuale în modernc.org/tk9.0.
language: ro
date: 2024-11-19T11:51:05.279238471Z
path: /blog/posts/creating-a-image-viewer-with-tk-in-go-z279238471Z
category: gui
---

În postarea anterioară am analizat pe scurt biblioteca CGo-Free Tcl/Tk.
În această ocazie, vom aplica exemplul din data trecută pentru a crea un vizualizator de imagini.

## Planul vizualizatorului de imagini

1. Indicatorul de imagini din ultima dată nu avea o funcție de ștergere a imaginilor, prin urmare, pe măsură ce se încărcau mai multe imagini,
   fereastra devenea insuficientă.
   Să eliminăm etichetele care nu mai sunt utilizate.
2. Dacă dorim să listăm mai multe imagini în indicatorul de imagini, să creăm o listă.
3. Este recomandabil să încărcăm mai multe imagini simultan.
4. Să implementăm și posibilitatea de a elimina din listă imaginile pe care nu mai dorim să le vedem.
5. Să creăm o funcție care permite selectarea și vizualizarea unei anumite imagini dintre mai multe imagini.

## Biblioteca Tcl/Tk 9.0 modificată

Biblioteca existentă nu are o implementare suficientă a Listbox, ceea ce face dificilă afișarea listei de imagini.
Să descărcăm biblioteca modificată.
Dacă Git CLI nu este instalat, puteți descărca și fișierul tarball sau zip.

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

Mai întâi, să examinăm câteva dintre funcțiile adăugate.

Înainte de a analiza noile funcții, să vedem cum sunt structurate funcțiile existente, parcurgând pe scurt structura prin funcția Destroy de la linia 1017 din tk.go.

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

Această funcție este implementată prin transmiterea acțiunii către funcția evalErr sub forma unui script Tcl.
Aceasta înseamnă că, pentru a implementa funcționalitatea dorită, este suficient să transmitem comanda în formatul scriptului Tcl corespunzător.

Ca exemplu, să implementăm o metodă care adaugă elemente într-un listbox.
Mai întâi, pentru scripting-ul Tcl, să examinăm insert, una dintre comenzile disponibile pentru listbox din manualul oficial.

[insert 명령어](https://www.tcl.tk/man/tcl8.6/TkCmd/listbox.htm#M29)

Din pagina de descriere a comenzii insert reiese că insert inserează elementele enumerate la un anumit index.
Prin urmare, pentru a o implementa, putem scrie un cod de forma:

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

Acum că am înțeles principiul general de implementare, să explicăm funcțiile suplimentare pentru Listbox.

### Listă: inserare/ștergere

```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()
}

```

În programul de mai sus, AddItem introduce, începând cu indexul 0, elementele diferite separate prin spațiu.
item1-item3 primesc, în ordine, indexurile 0, 1 și 2.
Vom executa exemplul pentru a vedea cum funcționează ștergerea elementelor.

### Listă: obținerea elementelor selectate

Acum vom obține elementele selectate din Listbox și le vom verifica.

```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()
}
```

Metoda Selected obține indexurile tuturor elementelor selectate în prezent din Listbox.
Metoda GetOne obține valoarea elementului corespunzător acelui index.
Acest lucru se poate observa din rezultatul afișat în consolă.
De remarcat că metoda similară Get primește indexul de început și de sfârșit și obține valorile tuturor elementelor din interval.

În continuare, să schimbăm culorile listbox-ului.

Mai întâi, să analizăm exemplul de mai jos.

```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()
}
```

![Rezultatul aplicării culorilor](/assets/images/go-tk-imageviewer/listbox_color.png)

După cum s-a scris în codul de mai sus, înălțimea a crescut.
De asemenea, se poate observa că culorile au fost aplicate corect.
Aici a fost specificată o opțiune care setează culori diferite doar pentru anumite elemente,
de aceea se observă că doar primul rând are culori diferite.

Pe lângă aceasta, deși diferența nu este mare, cu metoda Relief se poate modifica stilul marginii widget-ului, alegând dintre flat, groove, raise, ridge, solid și sunken.

## Exemplu de vizualizator de imagini

Acum, folosind widget-urile învățate, să creăm un vizualizator de imagini.
Programul exemplu este următorul.

```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)) //다중 선택을 활성화하고 필터를 켭니다.
    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")
    //테마를 사용하고 싶을 때에는 테마 명과 경로를 지정해 줍니다.
    fileMenu := menubar.Menu()
    extensions = make([]FileType,0,1)
    extensions = append(extensions, FileType{ "Supported Images", []string {".png",".ico"}, "" } )
    //필터에 png와 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()
}

```

![Rezultatul executării vizualizatorului de imagini](/assets/images/go-tk-imageviewer/imageviewer.png)

În acest exemplu, pentru a simplifica implementarea, toate widget-urile de imagine sunt create în avans, la încărcarea acestora,
iar fișierele duplicate nu sunt verificate.
Puteți îmbunătăți problemele menționate mai sus
sau puteți modifica tema folosind metoda DefaultTheme, a cărei linie este comentată.
Vă recomandăm să exersați creând un program nou care include aceste îmbunătățiri.

## Rezumat

În acest articol, am analizat modul în care funcționează apelurile de comenzi din biblioteca Tcl/Tk pentru Go
și am creat un vizualizator de imagini la care am adăugat un listbox.

1. Modul de apelare a comenzilor din biblioteca Tcl/Tk
2. Utilizarea listbox-ului
3. Modificarea proprietăților widget-ului listbox
4. Crearea unui vizualizator de imagini

Vă recomandăm să aplicați această abordare și pentru modificarea altor biblioteci și să creați un program complet cu funcțiile adăugate.