---
id: e55cbf5b5116abf3a5fc62c1af99e19b
author: Yunjin Lee
title: Go és Tcl/Tk 9.0 használatával többfájlos, listadoboz alapú képnézegető megvalósítása
description: A modernc.org/tk9.0-ban Tcl listbox parancsok kötéseit és virtuális esemény-kezelőket adunk hozzá, így egy olyan GUI képnézegetőt valósítunk meg, amely lehetővé teszi több képfájl megnyitását, a kijelölés váltását és a listaelemek törlését.
language: hu
date: 2024-11-19T11:51:05.279238471Z
path: /blog/posts/creating-a-image-viewer-with-tk-in-go-z279238471Z
category: gui
---

Az előző bejegyzésben röviden áttekintettük a CGo-Free Tcl/Tk könyvtárat.
Ezúttal az előző példát továbbfejlesztve egy képnézegetőt fogunk készíteni.

## Képnézegető terv

1. Az előző alkalom képmegjelenítőjében nem volt képtörlési funkció, ezért minél több képet töltöttünk be, annál kevesebb hely maradt az ablakban.
   Töröljük a nem használt címkéket.
2. Ha a képmegjelenítőben több képet szeretnénk listába rendezni, hozzunk létre egy listát.
3. Érdemes egyszerre több képet betölteni.
4. Valósítsuk meg azt is, hogy a már nem szükséges képeket eltávolíthassuk a listából.
5. Készítsünk olyan funkciót, amellyel a több kép közül egy adott képet kiválasztva megtekinthetjük.

## Módosított Tcl/Tk 9.0 könyvtár

A meglévő könyvtárban a Listbox megvalósítása hiányos, ezért nehéz benne képlistát megjeleníteni.
Töltsük le a módosított könyvtárat.
Ha a Git CLI nincs telepítve, a tarball vagy zip fájlként történő letöltés is megfelelő.

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

Nézzük meg először a hozzáadott funkciók néhányat.

Mielőtt az új függvényeket megvizsgálnánk, a tk.go fájl 1017. sorában található Destroy függvény segítségével értsük meg a meglévő függvények felépítését.

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

Ez a függvény a műveletet Tcl szkript formában adja át az evalErr függvénynek.
Ez azt jelenti, hogy a kívánt funkció megvalósításához elegendő a megfelelő Tcl szkript formátumában átadni a parancsot.

Példaként implementáljunk egy metódust, amely elemet ad hozzá a listaelemhez.
Először a Tcl szkripthez nézzük meg a hivatalos kézikönyvben a listbox lehetséges parancsai közül az insert parancsot.

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

Az insert parancs leírásának oldalán látható, hogy az insert a megadott indexre beszúrja a felsorolt elemeket.
Ennek megvalósításához a következő kód írható:

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

Most, hogy nagyjából megértettük a megvalósítás elvét, bemutatjuk a Listbox további funkcióit.

### Lista: beszúrás/törlés

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

```

A fenti programban az AddItem szóközzel elválasztott, különböző elemeket helyez el a 0-s indextől kezdve, sorrendben.
Az item1-item3 elemek sorrendben a 0, 1, 2 indexet kapják.
A példaprogram futtatásával megnézhetjük, hogyan működik az elemek törlése.

### Lista: a kiválasztott elemek lekérdezése

Most a Listboxban kiválasztott elemeket kérjük le, majd ellenőrizzük őket.

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

A Selected metódus a Listboxban jelenleg kiválasztott összes elem indexét adja vissza.
A GetOne metódus a megadott indexhez tartozó elem értékét adja vissza.
Az eredmény a konzolra írt kimenetből látható.
Érdemes megjegyezni, hogy a hasonló Get metódus kezdő és záró indexet kap, és az adott tartományon belüli összes elem értékét lekéri.

Következőként változtassuk meg a listaelem színeit.

Először nézzük meg az alábbi példát.

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

A fenti kódban megadottak szerint a lista magassága megnőtt.
Emellett a színek is helyesen alkalmazódtak.
Itt olyan beállítás is szerepel, amely csak egy adott elem színét módosítja, ezért látható, hogy csak az első sor színe tér el.

Ezenkívül bár nagy különbség nincs, a Relief metódussal a widget szegélyének stílusát módosíthatjuk: flat, groove, raise, ridge, solid vagy sunken közül választhatunk.

## Képnézegető példa

Most a korábban megismert widgetek segítségével készítsünk képnézegetőt.
A példaprogram a következő:

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

Ebben a példában az egyszerűbb megvalósítás érdekében minden képwidgetet már a betöltéskor létrehozunk, és nem ellenőrizzük a duplikált fájlokat.
A fentebb említett problémákat javíthatjuk, és a kommentelt DefaultTheme metódus segítségével is kipróbálhatunk egy másik témát.
Gyakorlásként érdemes olyan programot írni, amely ezeket a részeket javítja.

## Összefoglalás

Ebben a cikkben megnéztük, hogyan működnek a parancshívások a Go nyelvű Tcl/Tk könyvtárban, és elkészítettük a listaelemekkel bővített képnézegetőt.

1. A Tcl/Tk könyvtár parancshívási módja
2. A listbox használata
3. A listbox widget tulajdonságainak módosítása
4. Képnézegető készítése

Ugyanilyen módon érdemes más könyvtárak módosításaival is kísérletezni, és a hozzáadott funkciókkal teljes programot írni.