Eel example

GUI
def __init__(self, app): super(BackEnd, self).__init__() self.app = app @htmlPy.Slot() def say_hello_world(self): self.app.html = u"Hello, world"

GUI
main.py

import htmlPy from back_end import BackEnd

app = htmlPy.AppGUI( title=u"Sample application") app.maximized = True app.template_path = "." app.bind(BackEnd(app))

if name = : app.start()

htmlPy source code is hosted on GitHub, tested on Travis CI and released on PyPI.

About

htmlPy is a wrapper around PySide's QtWebKit library. It helps with creating beautiful GUIs using HTML5, CSS3 and Javascript for standalone Python applications.

Источник

Creating a modern GUI for your python application

In this post, we are going to use a library which will allow us to create outstanding graphical user interfaces (GUI's) for our day to day python scripts. We have a bunch of options to create GUI's on python, tkinter, wxPython, PySimpleGui, among others. Tkinter is really robust and allow us to have cross-platform applications, however, Tkinter based GUI's aren't as beautiful as what we can typically find with web based applications, and other cool applications based on electron. Eel is a library which allow us to take advantage of web technologies, such as HTML, CSS, JS and of course, all bunch of web frameworks out there, as bootstrap, jquery, cool plotting libraries as plotly, etc.

Eel library allow us to easily make use of HTML, CSS and JS for building our User Interface, without losing all our powerful Python capabilities. Eel relies on a bunch of python libraries, it simply creates a local webserver and opens a browser (chrome by default), the browser renders HTML, CSS and JS, while python controls most of the logic. Cool thing with Eel, is that allow us to run python functions from javascript and viceversa, thus, we can exchange information and have the best of both worlds (python and JS).

Installing eel

How to use it?

We must create our folder structure first, our root folder will be "application". Inside, we will create our python script, which I decided to call app.py. In order to better structure our code, we created a subfolder named "web", which contains index.html file, and two subfolders for our css and js files.

application │ app.py │ └───web │ index.html │ ├───css │ main.css │ └───js main.js 

For this post, we will build a top menu resembling a file menu for desktop applications using pre-built code from W3schools. First, we must edit our html file:

         
Display name Display a random number Display time and date Display my ip 
    

As you can see, you would be able to create your whole GUI using HTML, we just must add , this script will allow us to call our exposed python functions. For CSS file:

/* Add a black background color to the top navigation */ .topnav < background-color: #333; overflow: hidden; >/* Style the links inside the navigation bar */ .topnav a < float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; >/* Change the color of links on hover */ .topnav a:hover < background-color: #ddd; color: black; >/* Add a color to the active/current link */ /* .topnav a.active < background-color: #4CAF50; color: white; >*/ 

And finally, for JS file, we're just adding event listeners to out four buttons in navbar. As you can see, all of them are calling some functions but started with eel, e.g. ell.get_random_name(), this is a python function, thus, when we click the button, it will call a python function. Also, we have a JS function called prompt_alerts and it has a decorator eel.expose, this allow us to run this JS function from python:

document.getElementById("button-name").addEventListener("click", ()=>, false); document.getElementById("button-number").addEventListener("click", ()=>, false); document.getElementById("button-date").addEventListener("click", ()=>, false); document.getElementById("button-ip").addEventListener("click", ()=>, false); eel.expose(prompt_alerts); function prompt_alerts(description)

We have completed our graphical user interface, now, we must create our python file. We must import eel library, and all other libraries you need for your project, in this case, random and datetime.

import eel import random from datetime import datetime eel.init('web') @eel.expose def get_random_name(): eel.prompt_alerts('Random name') @eel.expose def get_random_number(): eel.prompt_alerts(random.randint(1, 100)) @eel.expose def get_date(): eel.prompt_alerts(datetime.now().strftime("%d/%m/%Y %H:%M:%S")) @eel.expose def get_ip(): eel.prompt_alerts('127.0.0.1') eel.start('index.html') 

Then, we must add our eel.init line, this initialize eel library, to an specific folder. Then, we create our four functions, which we want to call from JS, that's why we added decorator @eel.expose . As you can see, each one is calling our JS function prompt_alerts and passing a string argument. eel.start will run the application, there are a lot of arguments that can be passed, in this example, we're using minimal arguments, we're just setting the html file to be rendered (relative to web folder). Now that we have completed our code, we can start our application:
python app.py
A new window should appeared, as shown in next figure:
If you click on any of your four buttons, an alert should be shown, e.g.:
Now, you're able to create outstanding GUI's for you python applications, in our next series, we will create a complex example and explore other arguments that can be passed to eel.start.

Источник

Welcome to htmlPy’s documentation!¶

htmlPy is a wrapper around PySide‘s QtWebKit library. It helps with creating beautiful GUIs using HTML5, CSS3 and Javascript for standalone Python applications. It is built on Qt which makes it highly customizable and cross-platform. htmlPy is compatible with both Python2 and Python3. It can be used with any python library or environment like django, flask, scipy, virtualenv etc. You can use front-end libraries and frameworks like bootstrap, jQuery, jQuery UI etc. and create GUIs for your applications in no time.

You can get the source at GitHub repository. Versions older than 2.0.0 are not recommended for use in production.

• Installation
  • Installing htmlPy
  • Installing PySide
  • Standalone application
  • Web based application
  • Use a driver file
  • Set static_path and template_path
  • GUI to Python calls
  • Python to GUI calls
  • General structure of htmlPy applications
  • Integration with django
  • Using file input
  • Class htmlPy.AppGUI ( htmlPy.BaseGUI )
  • Class htmlPy.WebAppGUI ( htmlPy.BaseGUI )
  • Class htmlPy.Object
  • Decorator htmlPy.Slot
  • Module htmlPy.settings
  • Class htmlPy.BaseGUI

  Источник