В этом посте мы будем использовать библиотеку, которая позволит нам создать выдающийся графический пользователь … Помечено Python, EEL, HTML, JavaScript.
Приложение Python с EEL (3 серии деталей)
В этом посте мы будем использовать библиотеку, которая позволит нам создавать выдающиеся графические пользовательские интерфейсы (GUI) для наших повседневных сценариев Python.
У нас есть куча вариантов для создания GUI на Python, Tkinter, Wxpython, Pysimplegui, среди прочего. Tkinter действительно надежный и позволит нам иметь перекрестные приложения, однако, GUI на основе Tkinter не так красиво, как то, что мы можем, как правило, находить с веб-приложениями, а также другие прохладные приложения на основе электрона.
EEL – это библиотека, которая позволяет нам воспользоваться веб-технологиями, такими как HTML, CSS, JS и, конечно, все куча веб-каркасов там, как бутстрап, jQuery, прохладные библиотеки построения в качестве зарубежья и т. Д.
Библиотека EEL Позвольте нам легко использовать HTML, CSS и JS для создания нашего пользовательского интерфейса, не теряя всех наших мощных возможностей Python. EEL полагается на кучу библиотек Python, он просто создает локальный веб-сервер и открывает браузер (по умолчанию Chrome), браузер отображает HTML, CSS и JS, а Python контролирует большую часть логики.
Как удивить девушку при помощи Python #shorts
Прохладная вещь с EEL, это позволяет нам запустить функции Python от JavaScript и ViceVersa, таким образом, мы можем обменять информацию и иметь лучшие из обоих миров (Python и JS).
Чтобы установить библиотеку EEL, вы можете сделать это из Pypi AS:
pip install eel
Настоятельно рекомендуется создать виртуальную среду сначала.
Eel в Python – библиотека для красивого интерфейса
В этом руководстве мы обсудим использование библиотеки Eel в языке программирования Python для разработки красивого пользовательского интерфейса для программ Python с помощью HTML, CSS и JavaScript.
Рисуем фигуры в Tkinter — тренируемся на котиках
Tkinter — это библиотека, используемая для создания графики, в том числе — графического пользовательского интерфейса GUI.
Подключение Tkinter в Python и создание пользовательского окна.
Чтобы использовать возможности библиотеки себе и людям на радость, достаточно подключить библиотеку стандартным образом:
from tkinter import *
После подключения библиотеки нужно создать графическое окно, назовем его «tk». Однако, рисовать в окне мы не будем — это дурной тон, все великие художники для своих картин используют холсты — canvas! Не будем от них отставать и приготовим холст для наших рисунков с помощью функции Canvas(). Чтобы созданный холст стал видим пользователям, применим к нему функцию pack():
from tkinter import * # создаем графическое окно tk tk = Tk() # создаем холст canvas = Canvas(tk, height=500, width=500, bg=»#ccf9ff») # делаем холст видимым canvas.pack()
Холст готов! Можно рисовать!
Важный момент: для рисования на холсте требуется точно указывать координаты для расположения фигур. Помните, что в Tkinter координатная плоскость имеет вид:
КРАСИВЫЙ ДИЗАЙН PYTHON ПРИЛОЖЕНИЯ при помощи библиотеки CUSTOMTKINTER
Таким образом, координаты точки, изображенной на рисунке слева, имеют вид: (200, 100).
Пара слов о раскрашивании фигур
Для того, чтобы раскрасить любую из рассмотренных в этой статье замкнутых фигур нам пригодятся дополнительные параметры:
- fill = «значение цвета», например fill = «#ccc» — закрашивает фигуру в заданный цвет;
- outline = «значение цвета», например outline = «#000» — определяет цвет обводки;
- width = «ширина обводки в pt», например, width = 3 — определяет ширину обводки.
Эти параметры перечисляются через запятую после обязательных параметров. Например:
canvas.create_oval(245,160, 315,230, fill=»#fff», outline=»#313939″, width=3 )
Рисуем прямоугольник
Для создания прямоугольника нужно вызвать функцию create.rectangle(). В качестве обязательных параметров необходимо указать координаты верхней левой и нижней правой точек прямоугольника:
canvas.create_rectangle(180,320, 310, 370)
Добавим дополнительные параметры для придания красоты нашему прямоугольнику:
canvas.create_rectangle(180,320, 310, 370, fill=»#fff7cb», outline=»#313939″, width=3)
Размещаем текст в Tkinter
Превратим прямоугольник, созданный в предыдущем примере, в элемент мыслевыражения! Напишем на нем гениальную кошачью мысль вида: ‘МУР-МЯУ’ так, чтобы эта мысль располагалась прямо по центру прямоугольника. Для этого нам нужно указать:
- Координату центральной точки надписи, у меня это координата 247,348
- Подготовить текст надписи, он готов: ‘МУР-МЯУ’. Текст записывает в параметре text: text=’МУР-МЯУ’
- При желании добавить шрифт и размер: font=(‘Courier’, 18)
Соберем все параметры в единой строке в вызове функции create_text:
canvas.create_text(247,348, text=»МУР-МЯУ», font=(‘Courier’, 18))
Взгляните, у нас получилась полноценная кошачья табличка!
Создаем многоугольник
Так как кошачья табличка у нас уже готова, не мешало бы создать для нее котика! Хотя бы простого, мультяшного, как этот:
Фигура кота — это многоугольник серого цвета ‘#a3bcbf’ с темной обводкой цвета ‘#313939’ и толщиной 3pt. Чтобы создать многоугольник в Tkinter, нужно вызвать функцию create_polygon с координатами углов создаваемого многоугольника. Взгляните, как выглядит фигура кота на координатной плоскости:
Координаты точек определены, а значит, можно вызывать функцию create_polygon:
canvas.create_polygon(120,420, 170,50, 220,130, 270,130, 320,50, 370,420)
Полигон создан! Преобразим его с помощью дополнительных параметров: fill, outline и width:
canvas.create_polygon(120,420, 170,50, 220,130, 270,130, 320,50, 370,420, outline=»#313939″, width=3, fill=’#a3bcbf’)
Чтобы созданный полигон оказался под табличкой с кошачьей надписью, нужно строку кода, в которой мы создаем полигон расположить ВЫШЕ строк кода, в которых создается таблица с надписью :
from tkinter import * tk = Tk() canvas = Canvas(tk, width=500, height=500, bg=»#ccf9ff») canvas.pack() canvas.create_polygon(120,420, 170,50, 220,130, 270,130, 320,50, 370,420, outline=»#313939″, width=3, fill=’#a3bcbf’) canvas.create_rectangle(180,320, 310, 370, fill=»#fff7cb», outline=»#313939″, width=3) canvas.create_text(247,348, text=»МУР-МЯУ», font=(‘Courier’, 18))
У нас появился Telegram-канал для изучающих Python! Канал совсем свежий, подпишись одним из первых, ведь вместе «питонить» веселее! Ссылка на канал: «Кодим на Python!»
Создаем овалы и круги в Tkinter
Создание овала или круга в Tkinter очень похоже на создание прямоугольника. Все дело в том, что принцип создания округлых форм в Tkinter основан на вписывании их в прямоугольные или квадратные. То есть вам не нужно знать радиус окружности и координаты ее центральной точки.
Для создания круга нужно указать координаты верхней левой и правой нижней точек квадрата, описывающего эту окружность. А при создании овала, соответственно, верхней левой и правой нижней точек прямоугольника, описывающего этот овал. Далее можно перечислить необязательные параметры: цвета fill, окантовки outline и ширины окантовки width.
Давайте создадим парочку белых кругов c обводкой цвета «#313939» и толщиной в 3 pt:
canvas.create_oval(175,160, 245, 230, fill=»#fff», outline=»#313939″, width=3) canvas.create_oval(245,160, 315,230, fill=»#fff», outline=»#313939″, width=3 )
Думаю, эти белые шарики можно легко превратить в забавные кошачьи глаза. Нужно лишь добавить парочку маленьких черных зрачков:
canvas.create_oval(213, 192, 223, 202, fill=»#000″ ) canvas.create_oval(264, 192, 274, 202, fill=»#000″ )
Рисуем линии
Для рисования линии отлично подходит функция create_line. В качестве параметров нужно указать координаты начальной и конечной точек. Кроме того, можно задать толщину линии.
Найдите на изображении слева линию, которую выведет следующий код:
canvas.create_line(245, 232, 245, 282, width=3 )
Арки и сегменты в Tkinter
Чтобы создать арку или сегмент, нужно представить описывающие их фигуры с прямыми углами и определить координаты верхнего левого и нижнего правого углов. Помимо этого нужно задать параметр extent, определяющий угол разворота дуги в градусах:
На изображении выше показана нулевая позиция при определении параметра extent. Зеленым цветом обозначена верхняя дуга, которая образуется при отклонении на 60 градусов от нуля. Нижняя дуга обозначена коричневым цветом. Она образуется при отклонении на -120 градусов от деления «-30 градусов». Чтобы изобразить такую дугу в Tkinter нужно помимо параметра extent = -120 задать дополнительно параметр со стартовой позицией start = 30.
Пришло время нарисовать нашему котику улыбку:
canvas.create_arc(210,285, 280,245, start=-10, extent=-160, style=ARC, width=3)
Взгляните, как похорошел наш котик!
А теперь предлагаю самостоятельно потренироваться и дорисовать нашему коту носик, лапки и хвост, чтобы он выглядел примерно так:
Ниже я выложу весь код кота с хвостом и лапами для того, чтобы вы могли сравнить результаты:
from tkinter import * tk = Tk() canvas = Canvas(tk, width=500, height=500, bg=»#ccf9ff») canvas.pack() # рисуем хвост — сегмент окружности canvas.create_arc(220,454, 400,180, fill=»#c6dcdf», outline=»#313939″, width=3, start=-48, extent=90) # фигура кота из многоугольника canvas.create_polygon(120,420, 170,50, 220,130, 270,130, 320,50, 370,420, outline=»#313939″, width=3, fill=’#a3bcbf’) # глаза — белые круги canvas.create_oval(175,160, 245, 230, fill=»#fff», outline=»#313939″, width=3) canvas.create_oval(245,160, 315,230, fill=»#fff», outline=»#313939″, width=3 ) # глаза — зрачки canvas.create_oval(213,192, 223,202, fill=»#000″) canvas.create_oval(264,192, 274,202, fill=»#000″) # нос canvas.create_oval(235,212, 255,232, fill=»#e4aaaa», outline=»#313939″, width=3) # линия от носа ко рту canvas.create_line(245,232, 245, 285, width=3) # улыбка canvas.create_arc(210,285, 280,245, start=-10, extent=-160, style=ARC, width=3) # лапы canvas.create_oval(185,390, 245, 430, fill=’#a3bcbf’, outline=»#313939″, width=3 ) canvas.create_oval(245,390, 305, 430, fill=’#a3bcbf’, outline=»#313939″, width=3 ) # таблица canvas.create_rectangle(180,320, 310, 370, fill=»#fff7cb», outline=»#313939″, width=3) # текст на таблице canvas.create_text(247,348, text=»МУР-МЯУ», font=(‘Courier’, 18)) # веревочки от таблички canvas.create_line(132,320, 180, 345, width=3) canvas.create_line(310,345, 358, 320, width=3)
Источник: webtort.ru