--- id: 974f36e12dfcece861bfda1af9303980 author: Yunjin Lee title: 'Реализация GUI на Go Tcl/Tk (modernc.org/tk9.0) без CGo: упаковка виджетов и рендеринг изображений' description: Реализация создания окон, упаковки виджетов кнопок и строки меню, а также рендеринга изображений SVG/PNG/ICO на Go с использованием кроссплатформенной библиотеки modernc.org/tk9.0, не имеющей зависимостей от CGo. language: ru date: 2024-10-22T11:51:27.614782351Z path: /blog/posts/creating-a-gui-with-tk-in-go-z004dd008 category: gui lang_canonical: ko: https://blog.naver.com/bugaku/223629101405 --- В Python по умолчанию встроены GUI-библиотеки, такие как Tkinter. Недавно была разработана [CGo-Free, Cross Platform Tk library](https://pkg.go.dev/modernc.org/tk9.0), которая позволяет использовать Tcl/Tk в Go. Сегодня мы рассмотрим её базовое использование. ## Создание Hello, Tk Для начала начнём с простого примера 'Hello, TK!'. ```go package main import tk "modernc.org/tk9.0" func main() { tk.Pack( tk.TButton( tk.Txt("Hello, TK!"), tk.Command(func() { tk.Destroy(tk.App) })), tk.Ipadx(10), tk.Ipady(5), tk.Padx(15), tk.Pady(10), ) tk.App.Wait() } ``` ![результат выполнения hello-tk](/assets/images/go-tk-helloworld-svg-etc/go-tk-hello.png) --- Подробно рассмотрим приведённый выше пример кода и результат его выполнения. Если вы уже работали с Tk в Python, вы поймёте структуру, при которой виджеты упаковываются внутрь окна или непосредственно в его нижележащий уровень. В зависимости от типа виджета, например метки (label), в него могут быть вложены другие элементы. _Ipadx и Ipady являются сокращениями от Internal padding (внутренний отступ) и регулируют внутренние отступы виджетов. В этом примере корректируются отступы кнопки._ В этой библиотеке есть структура Window, а переменная App управляет главным окном. Она заранее определена внутри библиотеки. Поэтому функция tk.App.Destroy(), которая завершает tk.App.Wait(), отвечает за закрытие главного окна. Теперь рассмотрим несколько примеров из папки \_examples в GitLab. ## Обработка файлов SVG Далее приведён пример отображения файла SVG в виджете метки. ```go package main import . "modernc.org/tk9.0" // https://en.wikipedia.org/wiki/SVG const svg = ` ` func main() { Pack(Label(Image(NewPhoto(Data(svg)))), TExit(), Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m")) App.Center().Wait() } ``` ![результат выполнения go-tk-svg](/assets/images/go-tk-helloworld-svg-etc/go-tk-svg.png) Обработка SVG в этой библиотеке выполняется следующим образом: 1. Содержимое файла SVG считывается в строку (или включается напрямую, как в примере выше). 2. Это содержимое передаётся в функцию Data, которая преобразует его в строку, содержащую параметр (опцию -data). 3. Полученные байтовые значения передаются в функцию NewPhoto, которая возвращает указатель на структуру Img, представляющую изображение Tcl/Tk. 4. При прохождении через функцию Image указатель на структуру Img преобразуется в строку с добавленной опцией -Image. 5. Преобразование в строку, содержащую сырое значение структуры, необходимо для создания виджета Label. Файлы ICO и PNG обрабатываются аналогичным образом. ## Обработка файлов PNG ```go package main import _ "embed" import . "modernc.org/tk9.0" //go:embed gopher.png var gopher []byte func main() { Pack(Label(Image(NewPhoto(Data(gopher)))), TExit(), Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m")) App.Center().Wait() } ``` ![результат выполнения go-tk-png](/assets/images/go-tk-helloworld-svg-etc/go-tk-png.png) Процесс обработки файла PNG выглядит следующим образом: 1. Встроенный файл gopher.png преобразуется в тип строки с параметрами. 2. С помощью функции NewPhoto он преобразуется в тип \*Img. 3. После прохождения через функцию Image он преобразуется в RAW-строку и создаётся как виджет Label. Файлы ICO обрабатываются таким же образом, и единственное отличие от формата SVG заключается во внутреннем способе обработки в функции Data. Теперь рассмотрим, что представляет собой "строка с параметрами": ```go type rawOption string ``` Упомянутая ранее строка с параметрами является всего лишь отформатированной строкой. ```go func (w *Window) optionString(_ *Window) string { return w.String() } ``` Метод optionString является методом для указателя Window и возвращает строку. Наконец, кратко рассмотрим внутреннюю структуру функции Data: ```go func Data(val any) Opt { switch x := val.(type) { case []byte: switch { case bytes.HasPrefix(x, pngSig): // ок case bytes.HasPrefix(x, icoSig): b := bytes.NewBuffer(x) img, err := ico.Decode(bytes.NewReader(x)) if err != nil { fail(err) return rawOption("") } b.Reset() if err := png.Encode(b, img); err != nil { fail(err) return rawOption("") } val = b.Bytes() } } return rawOption(fmt.Sprintf(`-data %s`, optionString(val))) } ``` Как видно из кода, для файлов ICO и PNG требуется процесс кодирования/декодирования. В остальных случаях никакого специального преобразования не требуется: к строке, полученной из байтов, добавляется только опция -data, чтобы обозначить результат функции Data. ### Загрузка изображения с помощью виджета меню Добавив виджет меню к ранее рассмотренным примерам загрузки PNG и ICO, можно создать приложение, отображающее нужное изображение. Сначала рассмотрим простой пример виджета меню. ```go package main import ( "fmt" . "modernc.org/tk9.0" "runtime" ) func main() { menubar := Menu() fileMenu := menubar.Menu() fileMenu.AddCommand(Lbl("New"), Underline(0), Accelerator("Ctrl+N")) fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(func() { GetOpenFile() })) Bind(App, "", Command(func() { fileMenu.Invoke(1) })) fileMenu.AddCommand(Lbl("Save As..."), Underline(5)) fileMenu.AddSeparator() fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler()) Bind(App, "", Command(func() { fileMenu.Invoke(4) })) menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu)) App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS)) App.Configure(Mnu(menubar), Width("8c"), Height("6c")).Wait() } ``` ![результат выполнения go-tk-меню-bar](/assets/images/go-tk-helloworld-svg-etc/go-tk-menu-bar.png) В этом примере мы рассмотрели создание строки меню и меню, выделение символа подчёркиванием, опцию Command, привязку горячих клавиш, а также настройку начального размера окна приложения. Теперь изменим функцию Command, назначенную для GetOpenFile, и создадим программу, которая загружает и отображает изображение. План написания программы следующий: 1. Ограничение: открываться могут только файлы PNG и ICO 2. Обработка файла, выбранного в диалоге открытия файла 3. Реализация виджета для отображения изображения Далее приведён код, реализующий этот план: ```go package main import ( "fmt" "log" "os" "runtime" "strings" . "modernc.org/tk9.0" ) func handleFileOpen() { s := GetOpenFile() 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)))) Pack(imageLabel, TExit(), Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m")) } picFile.Close() } } func main() { menubar := Menu() fileMenu := menubar.Menu() fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(handleFileOpen)) Bind(App, "", Command(func() { fileMenu.Invoke(0) })) fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler()) Bind(App, "", Command(func() { fileMenu.Invoke(1) })) menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu)) App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS)) App.Configure(Mnu(menubar), Width("10c"), Height("10c")).Wait() } ``` ![результат выполнения go-tk-image-open](/assets/images/go-tk-helloworld-svg-etc/go-tk-image-open.png) Приведённый код работает следующим образом: 1. С помощью функции сравнения строк из пакета strings проверяется расширение файла 2. С помощью пакета os файл открывается, считывается и закрывается 3. Считанное изображение отображается в виджете метки ## Заключение В этой статье мы рассмотрели следующие темы с использованием библиотеки Tcl/Tk для языка Go: 1. Базовая структура GUI-приложения 2. Обработка различных форматов изображений, таких как SVG, PNG и ICO 3. Упаковка виджетов и управление компоновкой 4. Структура обработки данных изображений 5. Привязка горячих клавиш и команды виджетов Использование языка Go вместе с Tcl/Tk позволяет создавать простые и практичные GUI-программы. Опираясь на это, рекомендуем попробовать свои силы в разработке более сложных GUI-приложений.