GoSuda

Implementación de un visor de imágenes basado en un cuadro de lista para múltiples archivos con Go y Tcl/Tk 9.0

By Yunjin Lee views ...

En la publicación anterior, examinamos brevemente la biblioteca CGo-Free Tcl/Tk. En esta ocasión, aplicaremos el ejemplo de la vez pasada para crear un visor de imágenes.

Plan del visor de imágenes

  1. El indicador de imágenes de la vez anterior carecía de una función para eliminar imágenes, por lo que, a medida que se cargaban varias imágenes, el tamaño de la ventana resultaba insuficiente. Eliminemos las etiquetas que no se utilizan.
  2. Si vamos a enumerar varias imágenes en el indicador de imágenes, creemos una lista.
  3. Conviene cargar varias imágenes a la vez.
  4. También implementemos la función de quitar de la lista las imágenes que no se van a ver.
  5. Creemos una función que permita seleccionar y ver una imagen específica entre varias imágenes.

Biblioteca Tcl/Tk 9.0 modificada

La biblioteca existente tiene una implementación insuficiente de Listbox, por lo que resulta difícil mostrar la lista de imágenes. Descarguemos la biblioteca modificada. Si Git CLI no está instalado, también puede descargar el archivo tarball o zip.

1git clone https://github.com/gg582/tk9.0

Primero, veamos algunas de las funciones añadidas.

Antes de examinar las nuevas funciones, comprendamos brevemente la estructura de las funciones existentes a través de la función Destroy, en la línea 1017 de tk.go.

1func Destroy(options ...Opt) {
2	evalErr(fmt.Sprintf("destroy %s", collect(options...)))
3}

Esta función se implementa pasando la acción a la función evalErr en forma de script de Tcl. Esto significa que, para implementar la funcionalidad deseada, basta con pasar el comando en el formato del script de Tcl correspondiente.

A modo de ejemplo, implementemos un método que agregue elementos a un listbox. Primero, para el scripting de Tcl, veamos insert, uno de los comandos disponibles para listbox en el manual oficial.

insert 명령어

Si consultamos la página de descripción del comando insert, insert inserta los elementos enumerados en un índice específico. Entonces, para implementarlo, podemos escribir código como el siguiente:

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

Ahora que conocemos el principio general de implementación, explicaremos las funciones adicionales para Listbox.

Lista: inserción/eliminación

 1package main
 2import . "modernc.org/tk9.0"
 3
 4func main() {
 5    length := 3
 6    l := Listbox()
 7    l.AddItem(0, "item1 item2 item3")
 8    b1 := TButton(Txt("Delete Multiple Items, index (0-1)"), Command( func(){
 9        if length >= 2 {
10            l.DeleteItems(0,1)
11            length-=2
12        }
13    }))
14    b2 := TButton(Txt("Delete One Item, index (0)"), Command( func () {
15        if length > 0 {
16            l.DeleteOne(0)
17            length-=1
18        }
19    }))
20    Pack(TExit(),l,b1,b2)
21    App.Wait()
22}
23

En el programa anterior, AddItem inserta, desde el índice 0 y en orden, los distintos elementos separados por espacios. item1-item3 ocupan, en orden, los índices 0, 1 y 2. Ejecutemos el ejemplo para ver cómo funciona la eliminación de elementos.

Lista: obtener los elementos seleccionados

Ahora obtendremos los elementos seleccionados en Listbox y los verificaremos.

 1package main
 2
 3import . "modernc.org/tk9.0"
 4
 5func main() {
 6    l := Listbox()
 7    l.SelectMode("multiple")
 8    l.AddItem(0, "item1 item2 item3")
 9    btn := TButton(Txt("Print Selected"), Command( func() {
10        sel := l.Selected()
11        for _, i := range sel {
12            println(l.GetOne(i))
13        }
14    }))
15
16    Pack(TExit(), l, btn)
17    App.Wait()
18}

El método Selected obtiene los índices de todos los elementos seleccionados en el Listbox actual. El método GetOne obtiene el valor del elemento correspondiente a ese índice. Podemos verificarlo mediante el resultado que se imprime en la consola. Como referencia, el método similar Get recibe un índice inicial y uno final y obtiene los valores de todos los elementos dentro de ese rango.

A continuación, cambiemos los colores del listbox.

Primero, veamos el siguiente ejemplo.

 1package main
 2
 3import . "modernc.org/tk9.0"
 4
 5func main() {
 6    l := Listbox()
 7    l.Background("blue")
 8    l.Foreground("yellow")
 9    l.SelectBackground("black")
10    l.SelectForeground("white")
11    l.Height(20)
12    l.Width(6)
13    l.AddItem(0, "item1 item2 item3")
14    l.ItemForeground(0,"red")
15    l.ItemBackground(0,"green")
16    l.ItemSelectBackground(0,"white")
17    l.ItemSelectForeground(0,"black")
18    l.Relief("ridged")
19    Pack(TExit(),l)
20    App.Wait()
21}

색상 적용 결과

Tal como se escribió en el código anterior, la altura ha aumentado. Además, se puede ver que los colores se han aplicado correctamente. Aquí se especificó una opción que asigna colores distintos solo a determinados elementos, por lo que se puede observar que únicamente la primera línea tiene un color diferente.

Asimismo, aunque la diferencia no es grande, con el método Relief se puede cambiar el estilo del borde del widget entre flat, groove, raise, ridge, solid y sunken.

Ejemplo del visor de imágenes

Ahora, utilizando los widgets que acabamos de aprender, creemos un visor de imágenes. El programa de ejemplo es el siguiente.

  1package main
  2
  3import (
  4    "fmt"
  5    "log"
  6    "os"
  7    "runtime"
  8    "strings"
  9    "path"
 10
 11    . "modernc.org/tk9.0"
 12)
 13
 14var pbuttons []*TButtonWidget
 15var extensions []FileType
 16var pbutton *TButtonWidget = nil
 17var listbox, listbox2 *ListboxWidget
 18var cur *LabelWidget = nil
 19var imagesLoaded []*LabelWidget
 20func PhotoName(fileName string) string {
 21        fileName = path.Base(fileName)
 22        return fileName[:len(fileName)-len(path.Ext(fileName))]
 23}
 24
 25func handleFileOpen() {
 26    res := GetOpenFile(Multiple(true),Filetypes(extensions)) //다중 선택을 활성화하고 필터를 켭니다.
 27    s := make([]string,0,1000)
 28    for _, itm := range res {
 29        if itm != "" {
 30            tmp := strings.Split(itm," ")
 31            s = append(s,tmp...)
 32        }
 33    }
 34
 35    for _, photo := range s {
 36        formatCheck := strings.Split(photo, ".")
 37        format := formatCheck[len(formatCheck)-1]
 38
 39        if (strings.Compare(format, "png") == 0) || (strings.Compare(format, "ico") == 0) {
 40            picFile, err := os.Open(photo)
 41            if err != nil {
 42                log.Println("Error while opening photo, error is: ", err)
 43            }
 44
 45            pictureRawData := make([]byte, 10000*10000)
 46            picFile.Read(pictureRawData)
 47
 48            imageLabel := Label(Image(NewPhoto(Data(pictureRawData))))
 49                        imagesLoaded = append(imagesLoaded,imageLabel)
 50            var deleteTestButton *TButtonWidget
 51            deleteTestButton = TButton(
 52                Txt("Unshow Image"),
 53            Command(func() {
 54                GridForget(imageLabel.Window)
 55                GridForget(deleteTestButton.Window)
 56            }))
 57
 58            pbuttons = append(pbuttons,deleteTestButton)
 59
 60                        listbox.AddItem(len(imagesLoaded)-1,PhotoName(photo))
 61                        listbox2.AddItem(len(imagesLoaded)-1,PhotoName(photo))
 62            picFile.Close()
 63        }
 64    }
 65}
 66
 67func DeleteSelected () {
 68    s:=listbox.Selected()
 69    if len(s) == 0 {
 70        return
 71        }
 72    for _, i := range s {
 73        listbox.DeleteOne(i)
 74        listbox2.DeleteOne(i)
 75        if len(imagesLoaded)-1>i {
 76            continue
 77        }
 78        if cur == imagesLoaded[i] {
 79            pbutton = nil
 80            cur = nil
 81        }
 82        Destroy(imagesLoaded[i])
 83        Destroy(pbuttons[i])
 84                imagesLoaded = append(imagesLoaded[:i],imagesLoaded[i+1:]...)
 85        pbuttons = append(pbuttons[:i], pbuttons[i+1:]...)
 86    }
 87}
 88
 89func SelectImage() {
 90        s:=listbox2.Selected()
 91        if len(s) == 0 {
 92                return
 93        }
 94
 95    if len(imagesLoaded) -1 < s[0] {
 96        return
 97    }
 98    if imagesLoaded[s[0]] == nil {
 99        return
100    }
101    if cur != nil {
102            GridForget(cur.Window)
103    }
104    if pbutton != nil {
105        GridForget(pbutton.Window)
106    }
107
108        Grid(imagesLoaded[s[0]], Row(0), Column(2))
109    Grid(pbuttons[s[0]], Row(0), Column(3))
110    cur = imagesLoaded[s[0]]
111    pbutton = pbuttons[s[0]]
112}
113
114func SelectIndex(index int) {
115
116    if len(imagesLoaded) -1 <index {
117        return
118    }
119    if imagesLoaded[index] == nil {
120        return
121    }
122    if cur != nil {
123            GridForget(cur.Window)
124    }
125    if pbutton != nil {
126        GridForget(pbutton.Window)
127    }
128
129        Grid(imagesLoaded[index], Row(0), Column(2))
130    Grid(pbuttons[index], Row(0), Column(3))
131    cur = imagesLoaded[index]
132    pbutton = pbuttons[index]
133}
134
135func main() {
136    menubar := Menu()
137    //DefaultTheme("awdark","themes/awthemes-10.4.0")
138    //테마를 사용하고 싶을 때에는 테마 명과 경로를 지정해 줍니다.
139    fileMenu := menubar.Menu()
140    extensions = make([]FileType,0,1)
141    extensions = append(extensions, FileType{ "Supported Images", []string {".png",".ico"}, "" } )
142    //필터에 png와 ico를 넣어 줍니다.
143    fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(func () {
144        handleFileOpen()
145        SelectIndex(len(imagesLoaded)-1)
146    } ))
147    Bind(App, "<Control-o>", Command(func() { fileMenu.Invoke(0) }))
148    fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler())
149    Bind(App, "<Control-q>", Command(func() { fileMenu.Invoke(1) }))
150    menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu))
151        imagesLoaded = make([]*LabelWidget, 0, 10000)
152    pbuttons = make([]*TButtonWidget,0,10000)
153    var scrollx, scroll, scroll2, scrollx2 *TScrollbarWidget
154        listbox = Listbox(Yscrollcommand(func(e *Event) { e.ScrollSet(scroll)}) , Xscrollcommand( func(e *Event) { e.ScrollSet(scrollx)}))
155        listbox2 = Listbox(Yscrollcommand(func(e *Event) { e.ScrollSet(scroll2)}), Xscrollcommand(func(e *Event) { e.ScrollSet(scrollx2)}))
156        listbox.SelectMode("multiple")
157        listbox2 = Listbox()
158        listbox.Background("white")
159        listbox.SelectBackground("blue")
160        listbox.SelectForeground("yellow")
161        listbox2.Background("grey")
162        listbox2.SelectBackground("green")
163    listbox2.SelectForeground("blue")
164    listbox2.SelectBackground("brown")
165        listbox.Height(5)
166        listbox.Width(4)
167        listbox2.Height(5)
168        listbox2.Width(4)
169        delBtn := Button(Txt("Delete"), Command(func () { DeleteSelected() }))
170        selBtn := Button(Txt("Select"), Command(func () { SelectImage() }))
171        scroll = TScrollbar(Command(func(e *Event) { e.Yview(listbox) }))
172        scrollx = TScrollbar(Orient("horizontal"),Command(func(e *Event) { e.Xview(listbox) }))
173    scroll2 = TScrollbar(Command(func(e *Event) { e.Yview(listbox2) }))
174        scrollx2 = TScrollbar(Orient("horizontal"),Command(func(e *Event) { e.Xview(listbox2) }))
175        Grid(listbox,Row(1),Column(0), Sticky("nes"))
176        Grid(scroll,Row(1),Column(1), Sticky("nes"))
177    Grid(scrollx,Row(2),Column(0),  Sticky("nes"))
178        Grid(delBtn,Row(3),Column(0), Sticky("nes"))
179        Grid(listbox2,Row(1),Column(2), Sticky("nes"))
180        Grid(scroll2,Row(1),Column(3), Sticky("nes"))
181    Grid(scrollx2,Row(2),Column(2), Sticky("nes"))
182        Grid(selBtn,Row(3),Column(2), Sticky("nes"))
183    App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS))
184    App.Configure(Mnu(menubar), Width("80c"), Height("60c")).Wait()
185}
186

이미지 뷰어 실행 결과

En este ejemplo, para simplificar la implementación, todos los widgets de imagen se crean de antemano al cargarlas, y no se verifica si hay archivos duplicados. Se pueden mejorar los problemas mencionados anteriormente, y también es posible cambiar el tema utilizando el método DefaultTheme, que está en la parte comentada. Le recomendamos practicar creando un programa nuevo que incorpore estas mejoras.

Conclusión

En esta publicación, examinamos cómo funciona la invocación de comandos de la biblioteca Tcl/Tk en Go, y creamos un visor de imágenes con un listbox añadido.

  1. Forma de invocación de comandos de la biblioteca Tcl/Tk
  2. Uso del listbox
  3. Modificación de las propiedades del widget listbox
  4. Creación de un visor de imágenes

Le recomendamos que, de manera similar, intente modificar otras bibliotecas y que escriba un programa completo con las funciones añadidas.