Как сделать изображение на кнопку tkinter
Обновлено: 08.07.2024
В библиотеки Tkinter каждый виджет имеет определенные свойства, значения которых можно задавать при их создании, а также программировать их изменение при действии пользователя и в результате выполнения программы.
Виджеты – это базовые блоки для создания графического интерфейса программы. За годы развития программирования некоторые из виджетов стали стандартными во всех языках и на всех платформах.
В этой статье мы продолжаем работать в библиотеке Tkinter, а именно рассмотрим базовые виджеты.
Кнопки
Объект-кнопка создается вызовом класса Button модуля tkinter. Обязательным аргументом является родительский виджет. Другие свойства могут указываться при создании кнопки или задаваться позже. Синтаксис кнопки:
У кнопки есть множество свойств. Рассмотрим некоторые свойства кнопки:
В данном примере мы создаем кнопку и задаем ей свойства. Параметры bg и fg – это сокращения от background(фон) и foreground(передний план). Ширина и высота измеряются в знакоместах (количество символов).
Будет создана кнопка:
Надписи (метки)
Надписи – это виджеты, содержащие строку (или несколько строк) текста и служащие в основном для информации пользователя. Пример:
Поля ввода
Однострочное поле ввода создается с помощью класса Entry. Такое поле позволяет ввести только одну строчку кода. Пример:
Параметр bd – это сокращение от borderwidth (ширина границы).
Класс Text предназначен для создания многострочного текстового поля. Пример:
Свойство wrap в зависимости от своего значения позволяет переносить текст, вводимый пользователем либо по символам, либо по словам, либо вообще не переносить, пока пользователь не нажмет Enter.
Переключатели и флажки
Переключатели используют только группами, при этом в одной группе может быть “включена” лишь одна кнопка. Пример:
Одна группа определяет значение одной переменной, т.е. если выбрать радиокнопку rad2, то значение переменной var будет 2. Изначально также требуется установить значение переменной (выражение var.set(1) задает значение переменной var равное 1).
Для создания независимых переключателей (флажков) используется класс Checkbutton. В отличие от радио-кнопок, значение каждого флажка привязывается к своей переменной, значение которой определяется опциями onvalue (включено) и offvalue (выключено) в описании флажка. Пример:
Списки
Вызов класса Listbox создает объект, в котором пользователь может выбрать один или несколько пунктов в зависимости от значения опции selectmode. Пример:
В данном примере значение SINGLE позволяет выбирать лишь один пункт из списка.
Изначально список (Listbox) пуст. С помощью цикла for в него добавляются пункты из списка r.
Добавление происходит с помощью специального метода класса Listbox – insert. Данный метод принимает два параметра: куда добавить и что добавить.
Рамки
Рамки необходимы для организации других виджетов в группы внутри окна. Пример:
Данный пример создает три фрейма разного размера. Свойство bd (сокращение от boderwidth) определяет расстояния от края рамки до заключенных виджетов (если они есть).
На фреймах также можно размещать виджеты как на основном окне (root). Для примера добавим текстовое поле в рамку fra2:
Дочерние окна
С помощью класса Toplevel создаются дочерние окна, на которых также могут располагаться виджеты.
При закрытие главного окна, окно Toplevel также закрывается. Если закрыть окно Toplevel, тогда главное окно не закроется. Пример:
Метод minisize конфигурирует минимальный размер окна (есть метод maxsize, определяющий максимальный размер окна).
Шкала
Назначение шкалы – это представление пользователю выбора какого-то значения из определенного диапазона.
Внешне шкала представляет собой горизонтальную или вертикальную полосу с разметкой, по которой пользователь может передвигать движок, осуществляя выбор значения. Рассмотрим пример:
- orient определяет направление шкалы;
- length – длина шкалы в пикселях;
- from_ и to – с какого значения шкала начинается и каким заканчивается;
- tickinterval – интервал, через который отображаются метки для шкалы;
- resolution – минимальная длина отрезка, на которую пользователь может передвинуть движок.
Полоска прокрутки
Виджет Scrollbar позволяет прокручивать содержимое другого виджета (например, текстового поля или списка). Прокрутка может быть как по горизонтали, так и по вертикали. Пример:
Метод grid еще один способ расположения виджета в окне.
Меню – это объект, который присутствует во многих пользовательских приложениях. Находится оно под строкой заголовка и представляет собой выпадающие списки под словами.
Каждый пункт списка представляет собой команду, запускающую какое-либо действие или открывающую диалоговое окно. Рассмотрим пример создания меню:
Метод add_cascade добавляет новый пункт меню, который указывается как значение опции menu. Метод add_cascade помогает привязать вложенное меню.
Метод add_command добавляет новую команду в пункт меню. Опция command в данном методе связывает данную команду с функцией обработчик.
Программа “Изменение цвета окна”
Для закрепления теоретического материала создадим небольшую программу “Изменение цвета окна”, которая будет создавать окно со строкой меню, команды которого позволяют изменить цвет фона и размер основного окна. Листинг:
На этом наша статья подходит к завершению. Рекомендуется самостоятельно отработать все примеры виджетов на своем компьютере. Пишите в комментариях свои варианты графических программ.
На уроке Python. Работа с изображениями мы с вами научились загружать и отображать картинки, а также всяко извращаться с ними. Это мы делали при помощи библиотеки PIL. На уроке Python. GUI мы с вами при помощи библиотеки tkinter создавали виндовый интерфейс программы: всякие кнопочки, флажки, и прочие элементы управления. Но возникает вопрос: а нельзя ли при помощи tkinter как-то выводить изображение на виндовую форму? Можно. Например вот такая программа:
выдаст вот такое окно:
Что интересно, PIL здесь нужен, чтобы загружать изображения типа jpg, gif-ы и png можно открыть и без него:
А теперь попробуем при нажатии на кнопку сменить изображение:
Python | Добавить изображение на кнопку Tkinter
Изображение можно добавить с помощью метода PhotoImage() . Это метод Tkinter, который означает, что вам не нужно импортировать любой другой модуль, чтобы использовать его.
Важное замечание: Если на кнопке указаны как изображение, так и текст, текст будет преобладать, и на кнопке будет отображаться только изображение. Но если вы хотите показать как изображение, так и текст, вы должны передать составные в настройках кнопки.
Button(master, text = "Button", image = "image.jpg", compound=LEFT)
compound = LEFT -> image will be at left side of the button
compound = RIGHT -> image will be at right side of button
compound = TOP -> image will be at top of button
compound = BOTTOM -> image will be at bottom of button
Синтаксис:
любой допустимый путь, доступный на вашем локальном компьютере.
Код № 1:
from tkinter import *
from tkinter.ttk import *
Label(root, text = ‘GeeksforGeeks’ , font = (
‘Verdana’ , 15 )).pack(side = TOP, pady = 10 )
photo = PhotoImage( file = r "C:\Gfg\circle.jpg" )
Button(root, text = ‘Click Me !’ , image = photo).pack(side = TOP)
Выход:
При выводе обратите внимание, что на кнопке отображается только изображение, а размер кнопки также больше обычного размера, потому что мы не установили размер изображения.
Код № 2: для отображения как изображения, так и текста на кнопке .
from tkinter import *
from tkinter.ttk import *
Label(root, text = ‘GeeksforGeeks’ , font = (
‘Verdana’ , 15 )).pack(side = TOP, pady = 10 )
photo = PhotoImage( file = r "C:\Gfg\circle.jpg" )
photoimage = photo.subsample( 3 , 3 )
Button(root, text = ‘Click Me !’ , image = photoimage,
compound = LEFT).pack(side = TOP)
Выход:
Обратите внимание, что как текст, так и изображение появляются, а размер изображения также невелик.
Python Tkinter Image + Examples
In this Python tutorial, we will learn how to add image in Python Tkinter. let us start the Python Tkinter Image with below examples.
- Python Tkinter Image
- Python Tkinter Image Display
- Python Tkinter Image Button
- Python Tkinter Image Background
- Python Tkinter Image Resize
- Python Tkinter Image Size
- Python Tkinter Image Label
- Python Tkinter Image Doesn’t Exist
Python Tkinter Image
Python Tkinter has the method PhotoImage which allows reading images in Python Tkinter. And then Image can be placed by providing adding PhotoImage variable in image property of widgets like Label, Button, Frame, etc.
- There are three ways of adding images on Python Tkinter.
- PhotoImage
- PillowModule
- In our below example, we have demonstrated the use of PhotoImage. Pillow is discussed in the later sections of the same tutorial. We will be demonstrating the best method to be used in the situation.
Code
This is the basic code to demonstrate how to add images in Python Tkinter. Since the below code is just to display an image so we have used the PhotoImage method in Python Tkinter.
Output
In this output, image is displayed using label widget and since we have not provided any geometry so the application size is to the size of image.
Python Tkinter Image Display
Image in Python Tkinter can be displayed either by using the PhotoImage module or by using the Pillow library.
- In this section, we will display images using both PhotoImage and Pillow libraries. Also, we will use the create_image method from the canvas.
- Canvas is used to add images or text on the application screen.
Code using PhotoImage method
In this code, you can observe that we have not imported any libraries as PhotoImage automatically loaded when everything is imported.
Output of PhotoImage method
The image is displayed on the canvas and it is showing incomplete because we have provided height and width of canvas less than the size of image.
Code using Pillow Library
In this code, we have imported ImageTk, the Image method from the PIL library. PIL is the short name for a pillow. Though the code looks much similar to the previous one now we can read more image extensions like jpg, png, bitmap, etc.
Output Of image displayed using Pillow Library
The output is similar to the PhotoImage section, and photo is incomplete because the size of the window provided is less than the original size of image.
Python Tkinter Image Button
Button widget in Python Tkinter has image property, by providing image variable we can place image on the button widget.
- The first step in the process is to read the image and to do so we will use the PhotoImage method in Python Tkinter.
- Button in Tkinter has image property, you can provide the variable assigned to PhotoImage here.
- In this way an image can be placed on the button widget in Python Tkinter.
In this section, we will learn how to put image on the button in Python Tkinter.
Code
In this code, we have added an image on the button. User can click on the image to perform the action.
Output
In this output, Download image is added on the button. Users can click on this image to download the file.
Python Tkinter Image Background
In this section, we will learn how to insert a background image in Python Tkinter. In other words, how to set background image in Python Tkinter.
- There are mainly two ways of placing background in Python Tkinter
- Using Place layout manager we can put the background image on the label and the stretch it all the way to the screen.
- Using canvas create_image method we can put the image on the screen and later using create_text method of canvas we can place text widget.
Code
In this code, we have imported webbrowser so that we can open the webpage. We have placed image in the background using canvas method create_image and then using create _text and create_window we have placed the button and text on the window.
Output
In this output, you can see that application has background image, text and button. When user will click on the button he/she will be redirected to a website.
Python Tkinter Image Resize
In this section, we will learn how to resize the image in Python Tkinter.
- Using Pillow library in Python Tkinter we can resize the images. to import Pillow use this code from PIL import Image, ImageTk
- image.resize((w, h)) this command allows us to change the height(h) and width(w) of the image.
- In the below example, we have created an application in which the user can provide width and height and the image will change the size in real-time.
Code
In this code, we have used Image method from Pillow module to change the size of the image.
Output
In this output, you can see that image is resizing as per the height and width provided by the user. The is a full fledged application created in Python Tkinter that can be used for daily activities.
Python Tkinter Image Size
In this section, we will learn how to get the image size in Python Tkinter.
- first thing in the process is to import Image, ImageTk from PIL.
- then ImageTk provides width and height method using which we can get the size of an image.
Code
In this code, text=f’width: height: ‘ this command displays the height and width of the image. Here, img is the variable that stores the file file.
Output
In this output, you can see that height and width of the image is displayed at the bottom of the page.
Python Tkinter Image Label
In this section, we will learn how to set image on the Label widget in Python Tkinter.
- The label widget in Python Tkinter is used to display text and images on the application window.
- The label widget has a property image. Adding an image file to this property will set the image on the label widget.
- If you are dealing with PNG images then you can simply use the PhotoImage method which is a built-in method in Python Tkinter.
- For advanced features and all extensions, use the Image, ImageTk in pillow library.
Code
Here is the simple code to display image using Label widget in Python Tkinter.
Output
Python Tkinter Image Doesn’t Exist
This is a common error that is encountered by almost all the programmers working with images in Python Tkinter that says, Python Tkinter Image Doesn’t Exist.
- There are mainly three reasons for this error:
- image path provided is incorrect
- You have read the image using var = Image.open(pathToImage) but you have not passed it to ImageTk.PhotoImage(var) .
- declare a global variable in case you are trying image in function.
You may like the following Python tkinter tutorials:
In this tutorial, we have learned how to add images in Python Tkinter. Also, we have covered these topics.
- Python Tkinter Image
- Python Tkinter Image Display
- Python Tkinter Image Button
- Python Tkinter Image Background
- Python Tkinter Image Resize
- Python Tkinter Image Size
- Python Tkinter Image Label
- Python Tkinter Image Doesn’t Exist
Entrepreneur, Founder, Author, Blogger, Trainer, and more. Check out my profile.
В состав пакета tkinter входит модуль ttk , содержащий классы более стилизованных и современных виджет. По умолчанию их внешний вид зависит от операционной системы.
В коде ниже для сравнения в окне размещено несколько пар аналогичных виджетов из модулей tkinter и tkinter.ttk .
В операционной системе Ubuntu они будут выглядеть так:
Поскольку имена классов аналогичных виджетов совпадают, мы импортируем модули так, чтобы их пространства имен не перекрывались. При этом конструкторы классов вызываются через имена (в данном случае псевдонимы) модулей.
Если же нам не нужны виджеты модуля tkinter , подобные которым есть в tkinter.ttk , удобнее импортировать всё пространство имен как одного, так и второго модуля.
В данном случае пространство имен tkinter.ttk , который импортируется вторым, перекрывает часть имен tkinter . Поэтому выражение Button(text="Hello") вызывает конструктор класса Button , находящийся в модуле tkinter.ttk . В то же время в этом модуле нет классов Tk и Text . Следовательно, экземпляры этих классов создаются от базовых классов tkinter . В консоль будет выведено:
Как уже должно быть понятно, наборы виджетов обоих модулей не полностью перекрываются. Есть общие (такие как Label , Button , Entry ), есть характерные только для tkinter (например, Listbox и Canvas ) и только для ttk (например, Combobox , Notebook ).
Сложность заключается в том, что в ttk свойства виджетов программируются не совсем так как в tkinter . Если в приложении сочетаются элементы сразу обоих модулей, код программы становится менее ясным.
Для виджетов из tkinter.ttk многие свойства задаются с помощью экземпляра, созданного от класса ttk.Style . Основная идея ttk – отделить оформление виджета от описания его поведения.
Импортируем модули, не перекрывая пространства их имен, и сравним установку свойств для двух кнопок.
Мы задаем свойства для экземпляра Button из модуля tkinter с помощью метода кнопки config . Однако то же самое могли бы сделать, передав значения в конструктор:
Настроить так кнопку из модуля ttk нельзя. Вместо этого мы должны создать экземпляр от класса Style и уже через него изменять свойства по умолчанию.
В коде выше используется метод configure . Здесь первым аргументом в него передается имя стиля ( TButton ), связанного с классом объектов, для которых производится настройка. В данном случае это кнопки. Для уточнения имени стиля можно воспользоваться методом winfo_class :
Что делать, если в программе нужны, например, кнопки разного стиля? Можно создать свой стиль, унаследовав его от исходного, и изменять лишь отдельные свойства.
В примере выше созданный стиль называется "G". После точки указывается его родитель (в данном случае это стиль TButton . При создании первой кнопки через опцию style указываем применяемый стиль.
По-умолчанию для второй кнопки используется стиль TButton . Мы его не меняли, хотя могли бы изменить.
На самом деле острой или частой необходимости изменять внешний вид виджетов нет. Наоборот, в приложениях приветствуется стандартный и единообразный внешний вид и поведение. Это дает пользователю интуитивно понятный интерфейс.
Кроме того, в ttk есть разные темы. Можно менять не отдельные виджеты, а целиком тему оформления приложения. С помощью методов theme_names и theme_use можно выяснить список тем (который зависит от вашей ОС) и текущую тему:
Если в метод theme_use передать название темы, она будет применена. В программе ниже при нажатии клавиши Enter изменяется тема приложения:
Описание свойств виджетов в ttk не всегда совпадает с тем, как это делается в базовом tkinter . Выше в примере с красной и зеленой кнопками с помощью опций foreground и background мы устанавливаем цвета текста и фона кнопки, когда она не находится под курсором мыши, то есть когда она не активна.
Чтобы переопределить цвета по умолчанию при наводе курсора, для кнопок tkinter мы должны использовать опции activeforeground и activebackground . Однако эти свойства не работают для виджетов из ttk :
Код выше выполнится без ошибок. Однако фон зеленой кнопки при нажатии на нее останется светло-серым, он не станет светло-зеленым.
В данном случае вместо метода configure следует использовать метод map объектов типа Style :
Здесь мы описываем для кнопки состояния двух свойств: текста ( foreground ) и фона ( background ). При этом у каждого свойства есть три состояния: неактивно, активно и нажато.
Практическая работа
Напишите программу, состоящую из выпадающего списка ( Combobox ) и холста. В списке перечисляются цвета. При выборе в списке того или иного значения цвет холста должен изменяться на соответствующий.
- Список значений передается в Combobox через опцию values .
- Метод current экземпляра Combobox позволяет указать значение, которое будет выбрано в списке изначально. Метод принимает индекс элемента из списка значений.
- Событие смены значения в выпадающем списке – ' >'
- Метод get экземпляра Combobox возвращает выбранный на данный момент элемент списка.
Курс с примерами решений практических работ: android-приложение, pdf-версия.
Большинство программ, с которыми сталкивается начинающий пользователь Python, консольные. На них удобнее всего демонстрировать возможности языка. Правда, такие приложения являются неудобными для конечных пользователей. Ведь графический интерфейс – это одно из главных изобретений в сфере программирования прошлого века. Управление с помощью кнопок, радиокнопок и других элементов гораздо удобнее постоянного написания команд в строку.
Слава Богу, Python – это современный и функциональный язык программирования, который поддерживает работу с графическими интерфейсами. Реализуется это через библиотеку Tkinter.
Это удобная библиотека для создания графического интерфейса приложений, написанных на Python. Причем достаточно всего несколько строк кода, чтобы настроить даже сложный внешний вид программы.
Тем не менее, если программа сложная, появляется необходимость дополнительно структурировать ее. Ведь даже несмотря на то, что требуется немного строк кода, со временем их будет достаточно много. Естественно, от этого страдает его читаемость.
Что такое Tkinter?
Tkinter – это библиотека, позволяющая создавать такие программы, которыми мы привыкли их видеть. С ее помощью можно создать графический интерфейс буквально за пять минут. Конечно, это не единственная библиотека, поддерживающая эту возможность. Но она невероятно удобная и функциональная. С ее помощью можно:
Также с помощью этой библиотеки можно добавлять целый спектр различных элементов. Но мы сегодня более подробно остановимся на том, как настраивать кнопки: какими они бывают (а типов аж 5), а также приведем конкретные примеры приложений, которые используют их.
Пример
Итак, давайте попробуем взять такое приложение.
from tkinter import *
root = Tk()
btn.pack(padx=120, pady=30)
root.mainloop()
Сама программа выглядит так.
После того, как вы попробуете запустить этот код, приложение можно попробовать закрыть. Поскольку эта программа написана с использованием только одного виджета, то не составит труда разобраться в том, как она работает. Но что если приходится добавлять много разнообразных компонентов, каждый из которых может быть частью другого? В этом случае будет нелегко разобраться в том, какие части программы используются ими. Ведь все переменные определяются в глобальном пространстве имен.
При этом не рекомендуется использовать Wildcard-импорты типа from … import *, поскольку они еще больше засоряют его. В нашем примере они используются для того, чтобы продемонстрировать, как не стоит делать.
Чтобы решить эту проблему, необходимо использовать определенные техники. Независимо от того, какое приложение на Python вы разрабатываете, это хорошее решение для того, чтобы упорядочить код.
Как правильно?
Для улучшения модуля приложения, необходимо объявить несколько классов. В дальнейшем уже их можно использовать в качестве оберток глобальных переменных.
import tkinter as tk
class App(tk.Tk):
def __init__(self):
super().__init__()
command=self.say_hello)
self.btn.pack(padx=120, pady=30)
def say_hello(self):
app = App()
app.mainloop()
Обратите внимание, что каждая переменная хранится в конкретной области видимости. Причем исключений нет и для функции command, расположенной внутри отдельного метода.
Принцип работы программы
В первую очередь надо использовать конструкцию import … as вместо wildcard-импорта. Это позволяет более оперативно получать информацию из глобального пространства имен.
После этого класс App определяем в виде подкласса Tk, который в нашем примере ссылается на одноименное пространство имен. Мы используем метод __init__() , относящийся к объявленному нами ранее классу с использованием функции super() .
Так создается ссылка на элемент класса App с переменной self . Поэтому виджет кнопки в этом примере добавляется не как самостоятельный элемент, а как атрибут класса.
Здесь у вас может появиться закономерный вопрос: зачем все так усложнять? На деле же, это поможет упростить взаимодействие с кодом в будущем. Лучше напрячься один раз, а потом не мучиться, перечитывая код миллиард раз и допуская ошибки одну за одной.
Аналогичный принцип будет применяться и в последующих примерах. Поэтому его можно использовать в качестве шаблона для более крупных приложений.
Дополнение о структуре приложения
В описанном выше примере кода мы отнести класс Tk в отдельный. Тем не менее, очень часто выделяются и другие классы виджетов. Это делается для того, чтобы была возможность воссоздавать те инструкции, которые были до рефакторинга.
При этом для крупных приложений может быть полезным разделение классов Frame или Toplevel . В частности, это хорошо, если приложение будет иметь несколько окон. Причина этого проста – экземпляр Tk должен быть только один, а при создании каждого виджета до создания самого Tk осуществляется автоматическая генерация системой.
Важно не забывать, что нет никакого влияния этого подхода на структуру класса App , поскольку все виджеты используют метод mainloop для запуска основного цикла.
Работа с виджетами-кнопками
Кнопки относятся к кликабельным элементам графического интерфейса. Как правило, на них указывается текст, который подсказывает, что будет после нажатия. Также в качестве такой подсказки может служить и картинка. Библиотека имеет соответствующий функционал для их настройки с использованием виджета класса Button .
Создание кнопки
Предположим, нам надо сделать программу, которая демонстрирует различные способы настройки кнопки. Выглядеть она будет так.
Приведем теперь пример кода, который реализует эту задумку.
import tkinter as tk
RELIEFS = [tk.SUNKEN, tk.RAISED, tk.GROOVE, tk.RIDGE, tk.FLAT]
class ButtonsApp(tk.Tk):
def __init__(self):
super().__init__()
image=self.img, compound=tk.LEFT,
command=self.disable_btn)
self.btns = [self.create_btn(r) for r in RELIEFS]
self.btn.pack()
for btn in self.btns:
btn.pack(padx=10, pady=10, side=tk.LEFT)
def create_btn(self, relief):
return tk.Button(self, text=relief, relief=relief)
def disable_btn(self):
self.btn.config(state=tk.DISABLED)
app = ButtonsApp()
app.mainloop()
Самый легкий метод генерации кнопки – это использовать параметр text , чтобы настроить надпись на ней, а также command , который используется с целью задания события клика.
В нашем примере также использовался параметр image , который используется для того, чтобы на кнопке был и значок Python (в нашем случае, в вашем это будет любая другая картинка), и текст. Причем картинка является в нашем примере более приоритетной, чем текст. Этот параметр может быть размещена по центру, снизу, слева, справа и сверху. Это задается с помощью параметра compound.
Теперь рассмотрим второй ряд кнопок в этой программе. Чтобы его создать, используется список и перечень значений RELIEF . По надписи на каждой кнопке мы можем увидеть, что делает та или иная константа.
Хотя вне метода __init__ атрибута нет, он использовался для сохранения ссылки на экземпляр изображения. Это нужно делать, чтобы при сборке мусора изображение не было удалено. Если бы мы объявляли изображения в качестве локальных переменных, то такая неприятная ситуация обязательно бы возникла. Поэтому надо всегда, пока окно, где есть кнопка с картинкой, не закрыто, помнить о том, что надо сохранять ссылку на этот объект. Иначе она просто пропадет.
Читайте также: