GoSuda

CGo без Go: GUI реализация с Tcl/Tk (modernc.org/tk9.0): пакетиране на уиджети и рендиране на изображения

By Yunjin Lee views ...

Python има вградени GUI библиотеки по подразбиране, като Tkinter. Наскоро за езика Go бе разработена CGo-Free, Cross Platform Tk библиотека, която позволява използването на Tcl/Tk. Днес ще разгледаме нейните основни начини на употреба.

Създаване на Hello, Tk

Първо, нека започнем с прост пример 'Hello, TK!'.

 1package main
 2
 3import tk "modernc.org/tk9.0"
 4
 5func main() {
 6    tk.Pack(
 7        tk.TButton(
 8            tk.Txt("Hello, TK!"),
 9            tk.Command(func() {
10                tk.Destroy(tk.App)
11            })),
12        tk.Ipadx(10), tk.Ipady(5), tk.Padx(15), tk.Pady(10),
13    )
14    tk.App.Wait()
15}

резултат от изпълнението на hello-tk

Нека разгледаме по-подробно горния пример с код и резултата от изпълнението.

Ако имате опит с Tk в Python, ще разпознаете структурата, при която уиджетите се опаковат (pack) във вътрешността на прозорец или директно в прозореца. В зависимост от вида на уиджета, етикети и други елементи се включват в него.

Ipadx и Ipady са съкращения от Internal padding (вътрешно отстояние) и регулират отстоянията на вътрешните уиджети. В този пример се регулира отстоянието на бутона.

Тази библиотека включва структурата Window, а променливата App управлява главния прозорец. Тя е предварително дефинирана във вътрешността на библиотеката. Затова функцията tk.App.Destroy(), която прекратява tk.App.Wait(), служи за затваряне на главния прозорец.

Сега нека разгледаме няколко примера от папката _examples в GitLab.

Обработка на SVG файлове

Следва пример, който показва SVG файл в уиджет Label.

 1package main
 2
 3import . "modernc.org/tk9.0"
 4
 5// https://en.wikipedia.org/wiki/SVG
 6const svg = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 7<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 8<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 9<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
10<g opacity="0.8">
11    <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
12    <circle cx="125" cy="125" r="75" fill="orange" />
13    <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
14    <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
15</g>
16</svg>`
17
18func main() {
19    Pack(Label(Image(NewPhoto(Data(svg)))),
20        TExit(),
21        Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
22    App.Center().Wait()
23}

резултат от изпълнението на go-tk-svg

Обработката на SVG в тази библиотека се извършва по следния начин:

  1. Съдържанието на SVG файла се прочита като низ (или се включва директно, както в примера по-горе).
  2. Това съдържание се предава на функцията Data, която го преобразува в низ с опции (опция -data).
  3. Преобразуваните байтове се предават на функцията NewPhoto, която връща указател към структурата Img, представляваща Tcl/Tk изображение.
  4. При преминаване през функцията Image указателят към структурата Img се преобразува в низ с добавена опция -Image.
  5. Преобразуването в низ, съдържащ суровите (RAW) стойности на структурата, е необходимо за създаването на уиджета Label.

ICO и PNG файловете се обработват по подобен начин.

Обработка на PNG файлове

 1package main
 2
 3import _ "embed"
 4import . "modernc.org/tk9.0"
 5
 6//go:embed gopher.png
 7var gopher []byte
 8
 9func main() {
10    Pack(Label(Image(NewPhoto(Data(gopher)))),
11        TExit(),
12        Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
13    App.Center().Wait()
14}

резултат от изпълнението на go-tk-png

Процесът за обработка на PNG файлове е следният:

  1. Вграденият файл gopher.png се преобразува в низ с опции.
  2. Чрез функцията NewPhoto се преобразува в тип *Img.
  3. Чрез функцията Image се преобразува в RAW низ, след което се създава уиджетът Label.

ICO файловете се обработват по същия начин, а разликата спрямо SVG формата е само във вътрешния начин на обработка във функцията Data.

Нека разгледаме какво представлява "низ с опции":

1type rawOption string

Низът с опции, за който споменахме по-горе, е просто форматиран низ.

1func (w *Window) optionString(_ *Window) string {
2    return w.String()
3}

Методът optionString е метод на указателя към Window и връща низ.

Накрая нека разгледаме вътрешната структура на функцията Data:

 1func Data(val any) Opt {
 2    switch x := val.(type) {
 3    case []byte:
 4        switch {
 5        case bytes.HasPrefix(x, pngSig):
 6            // ок
 7        case bytes.HasPrefix(x, icoSig):
 8            b := bytes.NewBuffer(x)
 9            img, err := ico.Decode(bytes.NewReader(x))
10            if err != nil {
11                fail(err)
12                return rawOption("")
13            }
14
15            b.Reset()
16            if err := png.Encode(b, img); err != nil {
17                fail(err)
18                return rawOption("")
19            }
20
21            val = b.Bytes()
22        }
23    }
24    return rawOption(fmt.Sprintf(`-data %s`, optionString(val)))
25}

От кода се вижда, че при ICO и PNG файловете е необходим процес на кодиране и декодиране. В останалите случаи, без специално преобразуване, към байтовия низ се добавя само опцията -data, за да се покаже, че е резултат от функцията Data.

Зареждане на изображение чрез уиджет меню

Като добавим уиджет меню към примера за зареждане на PNG и ICO файлове, можем да създадем приложение, което показва избраното изображение.

Първо, нека разгледаме прост пример с уиджет меню.

 1package main
 2
 3import (
 4    "fmt"
 5    . "modernc.org/tk9.0"
 6    "runtime"
 7)
 8
 9func main() {
10    menubar := Menu()
11
12    fileMenu := menubar.Menu()
13    fileMenu.AddCommand(Lbl("New"), Underline(0), Accelerator("Ctrl+N"))
14    fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(func() { GetOpenFile() }))
15    Bind(App, "<Control-o>", Command(func() { fileMenu.Invoke(1) }))
16    fileMenu.AddCommand(Lbl("Save As..."), Underline(5))
17    fileMenu.AddSeparator()
18    fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler())
19    Bind(App, "<Control-q>", Command(func() { fileMenu.Invoke(4) }))
20    menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu))
21
22    App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS))
23    App.Configure(Mnu(menubar), Width("8c"), Height("6c")).Wait()
24}

резултат от изпълнението на go-tk-меню-бар

В този пример опитахме създаване на лентата с менюта и самото меню, подчертаване на букви, опцията Command, свързване на клавишни комбинации и задаване на началния размер на прозореца на приложението.

Сега ще променим функцията Command, зададена на GetOpenFile, така че да зарежда и показва изображение. Ще създадем програма, която показва необходимото изображение.

Планът за написване на програмата е следният:

  1. Ограничаване на отварянето само до PNG и ICO файлове
  2. Обработка на файла, избран в диалоговия прозорец за файлове
  3. Реализиране на уиджет за показване на изображението

Ето кода, който отразява този план:

 1package main
 2
 3import (
 4    "fmt"
 5    "log"
 6    "os"
 7    "runtime"
 8    "strings"
 9
10    . "modernc.org/tk9.0"
11)
12
13func handleFileOpen() {
14    s := GetOpenFile()
15    for _, photo := range s {
16        formatCheck := strings.Split(photo, ".")
17        format := formatCheck[len(formatCheck)-1]
18
19        if (strings.Compare(format, "png") == 0) || (strings.Compare(format, "ico") == 0) {
20            picFile, err := os.Open(photo)
21            if err != nil {
22                log.Println("Error while opening photo, error is: ", err)
23            }
24
25            pictureRawData := make([]byte, 10000*10000)
26            picFile.Read(pictureRawData)
27
28            imageLabel := Label(Image(NewPhoto(Data(pictureRawData))))
29            Pack(imageLabel,
30                TExit(),
31                Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
32        }
33        picFile.Close()
34    }
35}
36
37func main() {
38    menubar := Menu()
39
40    fileMenu := menubar.Menu()
41    fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(handleFileOpen))
42    Bind(App, "<Control-o>", Command(func() { fileMenu.Invoke(0) }))
43    fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler())
44    Bind(App, "<Control-q>", Command(func() { fileMenu.Invoke(1) }))
45    menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu))
46
47    App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS))
48    App.Configure(Mnu(menubar), Width("10c"), Height("10c")).Wait()
49}

резултат от изпълнението на go-tk-зареждане-на-изображение

Този код работи по следния начин:

  1. Проверява разширението на файла с функциите за сравнение на низове от пакета strings
  2. Използва пакета os, за да отвори, прочете и затвори файла
  3. Прочетеното изображение се показва в уиджет Label

Обобщение

В тази статия разгледахме следните теми, използвайки Tcl/Tk библиотеката за Go:

  1. Основна структура на GUI приложение
  2. Обработка на различни формати на изображения, като SVG, PNG и ICO
  3. Опаковане на уиджети и управление на оформлението
  4. Структура на обработката на данни за изображения
  5. Свързване на клавишни комбинации и команди на уиджети

Комбинирането на Go и Tcl/Tk позволява създаването на прости, но практични GUI програми. Надявам се, че на тази основа ще се заемете с разработката на по-сложни GUI приложения.