Eel в Python – библиотека для красивого интерфейса
В этом руководстве мы обсудим использование библиотеки Eel в языке программирования Python для разработки красивого пользовательского интерфейса для программ Python с помощью HTML, CSS и JavaScript.
Мы разделили руководство на два раздела. Первый раздел основан на фундаментальной теории библиотеки Eel в Python. В другом разделе мы покажем реализацию библиотеки , создав простое приложение, которое принимает два целых числа в качестве входных данных от пользователя и возвращает их сумму.
Что такое Eel в Python?
Eel в Python – это небольшая библиотека на языке программирования Python, которая позволяет программистам создавать простые электронные приложения с автономным графическим интерфейсом пользователя (GUI) на основе HTML и JavaScript с полным доступом к возможностям и библиотекам Python.
Eel может размещать локальный веб-сервер, а затем позволяет программистам аннотировать методы и функции в Python, чтобы мы могли вызывать их из JavaScript и наоборот. Эта библиотека разработана для того, чтобы избавить вас от неудобств при написании простых и коротких приложений с графическим интерфейсом.
Рассмотрим рисунок, изображающий концепцию Eel.
Файлы HTML, CSS и JavaScript хранятся в одном каталоге и инициализируются с помощью программы python. Файл JS обеспечивает соединение между HTML-страницей и Python с помощью функций, активируемых событиями onclick с HTML-страницы.
Реализация библиотеки
В следующем разделе рассматривается создание простого приложения с помощью библиотеки Eel в демонстрационных целях. Идея приложения заключается в том, что программа принимает два числа со страницы HTML, складывает их в Python и показывает результат пользователю.
Но прежде чем мы начнем создавать приложение, давайте установим библиотеку Eel.
Мы будем использовать установщик pip. Синтаксис установки показан ниже:
Далее мы будем использовать код Visual Studio для создания этого проекта. Мы создали папку с именем «Web_test». В этой папке мы создали другую папку с именем «myWeb». В этой папке будут храниться следующие файлы:
Для страницы HML мы создадим три текстовые области и кнопку. Давайте рассмотрим следующий фрагмент кода для того же.
В приведенном выше фрагменте кода мы создали HTML-страницу, на которой мы определили три текстовые области с разными идентификаторами. ‘Int1’ и ‘int2’ предназначены для получения ввода от пользователя, а текстовая область ‘res’ предназначена для отображения результата. Кнопка с имеет прикрепленную к ней функцию onclick, определенную в файле JS.
Теперь давайте рассмотрим фрагмент кода для файла JS.
document.querySelector(«button»).onclick = function summation() < var data_1 = document.getElementById("int1").value var data_2 = document.getElementById("int2").value eel.add(data_1, data_2)(call_Back) >function call_Back(output)
В приведенном выше фрагменте кода мы определили функцию как summing(), которая активируется посредством события onclick. Внутри функции мы получили значения int1 и int2 и передали их функции sum, которая будет определена в файле Python. Функция call_Back() принимает «output» в качестве аргумента, возвращаемого методом Python с именем «sum».
Этот «вывод» возвращается в текстовой области с идентификатором «res».
Теперь давайте рассмотрим фрагмент кода для файла Python.
# importing the eel library import eel # initializing the application eel.init("myWeb") # using the eel.expose command @eel.expose # defining the function for addition of two numbers def add(data_1, data_2): int1 = int(data_1) int2 = int(data_2) output = int1 + int2 return output # starting the application eel.start("myWebpage.html") В приведенном выше фрагменте кода мы импортировали библиотеку eel и инициализировали приложение с помощью команды eel.init («имя папки»), где мы назначили «myweb» в качестве имени папки.
Затем мы использовали команду eel.expose, в которой мы определили функцию «add», которая добавит «data_1» к «data_2» и вернет результирующее значение как «output». Значение, хранящееся в «output», выбирается функцией «call_Back» в файле JS и помещается на веб-страницу HTML.
Затем мы инициализировали приложение с помощью команды eel.start (“html filename”), указав имя файла как “myWebpage.html”.
Теперь давайте сохраним файл python и выполним его, используя следующий синтаксис, чтобы увидеть результат.
На следующем рисунке показан разработанный пользовательский интерфейс.
По умолчанию библиотека Python Eel использует веб-браузер Google Chrome для запуска приложения; однако мы также можем упомянуть браузер с помощью опции «режим». Наряду с «режимом» есть несколько других доступных вариантов приложения, таких как «положение», «размер», «геометрия» и многие другие, которые передаются внутри команды eel.start().
Заключение
В приведенном выше руководстве мы обсудили библиотеку Eel и ее использование в Python. Мы узнали, что эта библиотека помогает программистам создавать автономные приложения на основе HTML и JavaScript.
С помощью библиотеки Eel мы получаем возможности Python, включая свободу разработки пользовательского интерфейса с помощью HTML, а также CSS. Хотя по популярности Eel уступает своему главному конкуренту Electron; однако есть много программистов, чей первый выбор – Eel для создания простых приложений с графическим интерфейсом пользователя(GUI).
Python with html and css
WordPress 6 с Нуля до Гуру
Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS — WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.
Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.
Помимо уроков к курсу идут упражнения для закрепления материала.
И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт Моя группа
Какая тема Вас интересует больше?
— Вы получите необходимую базу по Unreal Engine 5
— Вы познакомитесь с множеством инструментов в движке
— Вы научитесь создавать несложные игры
Общая продолжительность курса 4 часа, плюс множество упражнений и поддержка!
Чтобы получить Видеокурс,
заполните форму
Как создать профессиональный Интернет-магазин
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.
neutron-web 0.3.1
Neutron allows developers to build native Python apps along with CSS and HTML for frontend design. Based on pywebview for it’s native GUI window and JavaScript-Python communication.
You can get started contributing via CONTRIBUTING.md or you can message me on discord (IanTheThird#9732) if you want more insigths on the code and tips on what to contribute.
Installation
Building your project
To build a Neutron project you first need pyinstaller, install pyinstaller throught pip: pip install pyinstaller . Then run the script below in your command prompt/terminal. You can also use other programs to build your project such as py2exe if you prefer.
Note: If you are on linux use «:» instead of «;»
pyinstaller YOUR_PYTHON_FILE.py --noconsole --onefile --add-data="YOUR_HTML_FILE.html;." --add-data="YOUR_CSS_FILE.css;." You don’t need to use —add-data if your project doesn’t have a CSS or HTML file
Examples
Full example
For a fully set up example project see TEMPLATE. The project is build how it’s intended, meaning it has a CSS and HTML file for the design and a Python file for the logic. (It is comparable to how websites using JavaScript are built).
Other examples
Althought not recommended for big projects, it’s possible to create an app using only a Python file.
Another example featuring in-python HTML: Hello: Submit To resolve slow loading times for bigger projects, Neutron features a loader system seen here:
To create another window for example when a fuction is called you need to use the childwindow property.
def createNewWindow(): win = Neutrontest.Window("Example", size=(600, 100), childwindow=True) win.display(file="secondwindow.html") win.show()