DEV Community: kodark

Executable for our demo application

kodark — Sat, 20 Feb 2021 06:22:48 +0000

In our previous posts we have explored Eel library, along with its options and we have created a demo application.

This post is mainly dedicated to pyinstaller, which is a python library which allows to easily distribute python code. Pyinstaller will help us to distribute our eel application.

First step is to install pyinstaller:

pip install pyinstaller

Pyinstaller also supports encryption of Python bytecode modules, in order to use this feature, it must be installed:

pip install pyinstaller[encryption]

As we have installed the required libraries, we are going to explore how can we distribute our application.

Create exe file (windows)

Remember to cd to our project folder, our python script is named app.py and "web" folder contains out html, css and js. We can create an exe file (under windows, .so under mac or linux) with the following command:

python -m eel app.py web

Pyinstaller will analyze our python script, will create a spec file, will create a folder named build for holding log and working files and finally will create a folder named dist for writing the executable. Dist folder is the one we should send to our users.

The output from the previous command will be a folder (dist) which contains all python dependencies and our exe file, which is the one we should run. However, it would be better to distribute a single file instead of a folder with several number of folders, subfolders and files.

A single executable file can be built with the following command:

python -m eel app.py web --onefile

Hiding console window

With the previous command, a single file has been created, this is easier to distribute and for the user; however, if we run our exe file we can notice that the chrome window appears but a command window also does.

Hiding the command window can be achieved by adding a flag to our current command:

python -m eel app.py web --onefile --noconsole

Now we have a single executable file and once it is executed, a single window will show up. Finally, what we can do is add encryption of our bundled files, this can be achieved with the key flag and a key of lenght equal to 16.

python -m eel app.py web --onefile --noconsole --key=abcdefghijklmnop

Now we are capable of distributing our python applications with a user friendly GUI in a single executable file.

There is still one issue, executable files will work only on the same platform where it was built, e.g., an executable file generated on windows 10 - 64 bit won't work on windows 10 -32 bit, or in windows Server. Obviously, it also won't work on MAC OS or linux based OS.

So you must build your executable on all the platforms where you want to distribute your application. For achieving this, you can explore task automation tools which allows you to perform continuous integration and continuous delivery.

One CI/CD popular tool, is Jenkins. We might have a Jenkins series in the near future.

Eel options

kodark — Wed, 20 Jan 2021 13:44:04 +0000

In a previous post, we explore Eel, which is a cool python library that allow us to create web based GUI's for our python scripts.

A simple application was created, using the minimal arguments for eel.start; in this post we're going to explore what other options we have in order to better fit our requirements/needs.

mode

mode will allow us to select which browser should be used to render our html files; default is set to chrome browser. Another options that can be used are: 'edge' for edge browser, 'electron' and 'chrome-app' for firefox.

host

host is used to specify the hostname for the underlying libraries that eel makes use; default is localhost.

port

port is one of the most useful options, sometimes the application won't start because default port is being used by other application, this should be fixed by specifying another port. Default value is 8000.

block

By default, when python interpreter reach eel.start line, application will be blocked, thus, remaining code won't be executed. If you want to run eel and not get stuck at that line, you can set block value to False.

size

size allow us to set the window size, it must be specified as a tuple containing width and height.

position

position allow us to specify the origin coordinates (top-left corner) of the window, it is also a tuple, but contains x-axis (horizontal) and y-axis (vertical). Remember, 0,0 is top-left corner.

geometry

Instead of using size and position option, you can pass a dictionary to geometry option. This dictionary requires keys size and position, and values for both are tuples. E.g.:

geometry={'size': (700, 400), 'position': (50, 50)}

disable-cache

Default is false, specifying True value will prevent the browser to cached our website.

close_callback

Allow us to modify what python should do when closing the window. By default, python will exit upon closing the window, which could lead to data loss if we closed accidentally, so we can modify default behavior to properly closed running tasks.

cmdline_args

We can add extra flags in order to start the browser, for example, running on incognito mode, disabling backgrounds or prompting a dialog before the browser starts. You can found useful flags here.

Example

Now that we have explore other options for eel, we'll update our python script from our previous post. HTML, CSS and JS files remains the same:

import eel
import random
from datetime import datetime

def close_callback(route, websockets):
    if not websockets:
        print('Bye!')
        exit()

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', mode='chrome', 
                        host='localhost', 
                        port=27000, 
                        block=True, 
                        size=(700, 480), 
                        position=(0,0), 
                        disable_cache=True, 
                        close_callback=close_callback, 
                        cmdline_args=['--browser-startup-dialog', 
                                '--incognito', '--no-experiments'])

What is different now?

We just added a new function before eel.init, close_callback, this function allow us to modify default behavior upon closing the window; instead of only exit, it will first print "Bye!" in our python cosole. This is just a "dummy" test, but you can later update a file, update a database or simply perform a failsafe exit.

The other changes are simply the bunch of arguments we're passing to eel.start; we have added mode, block and localhost with its default values (there is no need to pass this arguments since we're using chome, True and localhost); with size we're determining the size of the browsers window, and with position, we specify that it must be start at the top-left corner. We're also changing default port, which is 8000 to 27000, the cache is also disable and for the close_callback argument, we specify our custom function.

Finally, for the cmdline_args we passed three arguments, first one will prompt an alert window which allows the user to know that the browser is starting and its PID. Second element, simply specifies to use an incognito window and third element prevent chrome from using experimental flags (like dark mode).

We have explored additional options for eel and updated our previous demo application with this options. In our next series we'll explore how to create an executable.

Creating a modern GUI for your python application

kodark — Tue, 22 Dec 2020 03:21:04 +0000

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

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

In order to install eel library, you can do it from Pypi as:



pip install eel

Highly recommended to create a virtual environment first.

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:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eel example</title>

    <link rel="stylesheet" href="css/main.css">
    <script type="text/javascript" src="/eel.js"></script> 
</head>
<body>
    <div class="topnav">
        <a class="active" id="button-name">Display name</a>
        <a id="button-number">Display a random number</a>
        <a id="button-date">Display time and date</a>
        <a id="button-ip">Display my ip</a>
      </div> 
</body>
<script src="js/main.js"></script>
</html>

As you can see, you would be able to create your whole GUI using HTML, we just must add <script type="text/javascript" src="/eel.js"></script>, 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", ()=>{eel.get_random_name()}, false);
document.getElementById("button-number").addEventListener("click", ()=>{eel.get_random_number()}, false);
document.getElementById("button-date").addEventListener("click", ()=>{eel.get_date()}, false);
document.getElementById("button-ip").addEventListener("click", ()=>{eel.get_ip()}, false);

eel.expose(prompt_alerts);
function prompt_alerts(description) {
  alert(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:


 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.