Introduction
The topic of beautiful interfaces has always been and will always be relevant, someone uses C # to create graphical applications, someone uses Java, someone goes into the jungle of C ++, and someone is perverted with Python using tkinter or PyQT. There are various technologies that allow you to combine the beauty of graphic designs created in HTML, CSS and JS with the flexibility in implementing application logic that another language can provide. So, for those who write in the best programming language Python, there is an opportunity to write beautiful interfaces in HTML, CSS and JS and attach logic to them in Python.
In this article I want to show with a small example how to create a simple and beautiful desktop application in HTML, CSS, JS and Python. We will use EEL as a library for connecting all components.
Installation
I'll make a reservation that I'm working on windows 10 x64.
To begin with, we will install the library itself by running a simple command: After installing only one library, we can start our journey.
pip install eel
Our application will look like this:
The logic of the application is very simple: when the "calculate" button is pressed, the values ​​in the field for entering rubles are read, the received data is sent to Python, where the exchange rate is calculated. Python returns data to us and we output through JS
We scatter into folders
. “front” , . “back” python. middle, , JS ( ). main.py, .
Python
(-, , , ). python CurrencyConverter:
pip install currencyconverter
python. , , , . “convert.py” “back” :
from currency_converter import CurrencyConverter
converter = CurrencyConverter()
def convert_value(value: float, from_cur: str, to_cur: str):
return converter.convert(value, from_cur, to_cur)
“middle” “mid_convert.py” :
from back.convert import convert_value
import eel
@eel.expose
def convert_value_py(value:float, from_cur:str, to_cur:str)->float:
return convert_value(value, from_cur, to_cur)
? “mid_convert.py” JS Python. @eel.expose , , , JS. , , JS, @eel.expose. , , , “convert_value” “convert.py”. .
Python JS
Python JS. , HTML, CSS ( vue.js, react.js , ). eel JS:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="/eel.js"></script>
</head>
“”. , .
async function create_cur_for_rub (){
//
let value_rub = parseFloat(document.getElementById("rub-input").value);
// input',
let list_curs = document.getElementById("list-cur").children;
for (let div_cur of list_curs) {
//
let name_cur = div_cur.getElementsByTagName("span")[0].textContent;
// Python
let value_cur = await eel.convert_value_py(value_rub, "RUB", name_cur)();
//
div_cur.getElementsByTagName("input")[0].value = value_cur;
}
}
document.getElementById("btn-sum").onclick = create_cur_for_rub;
“let value_cur = await eel.convert_value_py(value_rub, "RUB", name_cur)();”. , , , Python . eel (), .
, .
, .
“main.py”. eel , “min_convert.py” , , eel.expose:
import eel
from middle.mid_convert import *
eel , front-end . eel.init(args). eel.start(args):
if __name__ == '__main__':
eel.init('front')
eel.start('index.html', mode="chrome", size=(760, 760))
eel.start ( . eel). “mode”. , , . , “default”, . google chrome, “mode=chrome” .
You can also use chromium. To do this, download it from the official website . Unzip it to some folder and write the following code in our “main.py”:
eel.browsers.set_path("chrome", "C:/Users/admin/Documents/chrome-win/chrome.exe")
eel.start('index.html', mode="chrome", size=(760, 760))
Output
As we can see, it is not so difficult to create beautiful desktop applications using Python as the language for implementing the main logic. You can install any libraries you want, implement the required code using Python, and write beautiful interfaces in HTML, CSS and JS.
PS this is my first article on Habr, write your wishes, comments and feedback, I will be glad to see any comment.