---
id: e55cbf5b5116abf3a5fc62c1af99e19b
author: Yunjin Lee
title: Implementazione di un visualizzatore di immagini basato su listbox a selezione multipla di file con Go e Tcl/Tk 9.0
description: Implementa un visualizzatore di immagini con interfaccia grafica, aggiungendo a modernc.org/tk9.0 l'associazione dei comandi Tcl listbox e i gestori di eventi virtuali, che consentono l'apertura di più file immagine, il passaggio di selezione e l'eliminazione di voci dall'elenco.
language: it
date: 2024-11-19T11:51:05.279238471Z
path: /blog/posts/creating-a-image-viewer-with-tk-in-go-z279238471Z
category: gui
---

Nel post precedente abbiamo brevemente esaminato la libreria CGo-Free Tcl/Tk.
In questa occasione, partendo dall'esempio della volta scorsa, creeremo un visualizzatore di immagini.

## Piano del visualizzatore di immagini

1. Il visualizzatore di immagini della volta scorsa non disponeva di una funzione di eliminazione delle immagini, quindi all'aumentare del numero di immagini caricate la finestra diventava insufficiente.
   Eliminiamo le etichette non utilizzate.
2. Se intendiamo elencare più immagini nel visualizzatore, creiamo una lista.
3. È consigliabile caricare più immagini in una sola volta.
4. Implementiamo anche la funzione per rimuovere dalla lista le immagini che non intendiamo visualizzare.
5. Creiamo una funzione che permetta di selezionare e visualizzare una specifica immagine tra quelle multiple.

## Libreria Tcl/Tk 9.0 modificata

La libreria originale presenta un'implementazione insufficiente del Listbox, rendendo difficile mostrare l'elenco delle immagini.
Scarichiamo la libreria modificata.
Se Git CLI non è installato, è possibile scaricare il pacchetto come tarball o file zip.

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

Innanzitutto, esaminiamo alcune delle funzionalità aggiunte.

Prima di esaminare le nuove funzioni, cerchiamo di comprendere in modo sintetico la struttura di quelle esistenti, prendendo come riferimento la funzione Destroy alla riga 1017 di tk.go.

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

Questa funzione è implementata passando l'operazione alla funzione evalErr sotto forma di script Tcl.
Ciò significa che, per implementare la funzionalità desiderata, è sufficiente trasmettere il comando nel formato del relativo script Tcl.

A titolo di esempio, implementiamo un metodo che aggiunge una voce a un listbox.
Innanzitutto, per lo scripting Tcl, consultiamo il comando insert tra i comandi disponibili per il listbox nel manuale ufficiale.

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

Nella pagina di descrizione del comando insert, si legge che insert inserisce le voci elencate in un indice specifico.
Pertanto, per implementarlo, possiamo scrivere un codice come il seguente:

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

Ora che abbiamo compreso il principio generale di implementazione, illustriamo le funzionalità aggiuntive per il Listbox.

### Lista: inserimento/eliminazione

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

```

Nel programma precedente, AddItem inserisce in sequenza, a partire dall'indice 0, le diverse voci separate da spazi.
Gli elementi item1-item3 ottengono rispettivamente gli indici 0, 1 e 2.
Eseguiamo l'esempio per osservare come funziona l'eliminazione delle voci.

### Lista: recupero delle voci selezionate

Ora recuperiamo le voci selezionate nel Listbox e verifichiamole.

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

Il metodo Selected recupera gli indici di tutte le voci selezionate nel Listbox corrente.
Il metodo GetOne recupera il valore della voce corrispondente a un dato indice.
Il risultato è visibile nell'output della console.
Si noti che il metodo simile Get riceve un indice iniziale e finale e recupera i valori di tutte le voci nell'intervallo.

Successivamente, proviamo a modificare i colori del listbox.

Esaminiamo innanzitutto il seguente esempio.

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

![색상 적용 결과](/assets/images/go-tk-imageviewer/listbox_color.png)

Come indicato nel codice, l'altezza è aumentata.
Inoltre, si può notare che i colori sono stati applicati correttamente.
Poiché è stata specificata un'opzione di colore per un elemento particolare, si osserva che solo la prima riga presenta un colore diverso.

Inoltre, sebbene la differenza non sia grande, il metodo Relief consente di modificare lo stile del bordo del widget scegliendo tra flat, groove, raise, ridge, solid e sunken.

## Esempio di visualizzatore di immagini

Creiamo ora un visualizzatore di immagini utilizzando i widget appena studiati.
Il programma di esempio è il seguente.

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

```

![이미지 뷰어 실행 결과](/assets/images/go-tk-imageviewer/imageviewer.png)

In questo esempio, per semplificare l'implementazione, tutti i widget delle immagini vengono creati in anticipo al momento del caricamento e non viene effettuato alcun controllo dei file duplicati.
È possibile migliorare i problemi menzionati in precedenza e, decommentando la parte relativa a DefaultTheme, è anche possibile modificare il tema.
Si consiglia di esercitarsi creando un programma migliorato che includa questi aspetti.

## Conclusione

In questo articolo abbiamo esaminato il funzionamento delle chiamate di comando della libreria Tcl/Tk in Go e abbiamo creato un visualizzatore di immagini con l'aggiunta di un listbox.

1. Modalità di chiamata dei comandi della libreria Tcl/Tk
2. Utilizzo del listbox
3. Modifica delle proprietà del widget listbox
4. Realizzazione di un visualizzatore di immagini

Si consiglia di affrontare modifiche ad altre librerie con questo stesso approccio e di scrivere un programma completo utilizzando le funzionalità aggiunte.