Electron GUI for Python

A simple example on how to create an electron GUI for a python program and interacting with it.

How does it work ( simple representation )

electron
--------> |------------|    python
          |            |-------------> |-------------------|
          |  electron  |  sub process  | python program    |
          |  --------  |               | --------------    |
          |   > html   |      std      |  takes requests   |
          |   > css    | <-----------> |  from js and      |
          |   > js     | communication |  responds it,     |
          |            |               |  in the terminal  |
          |------------|               |-------------------|

Essentially no network is being created only one terminal is used when electron is launched and than from within javascript ( electron ) a python program is initiated as a subprocess. These two programs than communicate via standard streams.

Structure of example

│
├── docs
│   ├── README.md
│   └── LICENSE
|
├── images
│   └── ...
|
├── guiExample.html
├── guiExample.css
├── guiExample.js
├── main.js
│
├── pythonExample.py
|
├── config.json
└── package.json

Prerequisites

Install Node.js and Python.

ote that installation may be different for different operating systems

Installation Guide

To download and install electron ( OS X or Linux ) you have to download it from npm-electron using :
```
npm install electron --save-dev
```
```
npm install -g electron
```
( if you don't have npm installed use this link to download it. )

Clone this repository:

git clone https://github.com/keybraker/python-gui-electron.git

Execution Guide

Open a terminal window and cd to cloned project
```
cd python-gui-electron
```
Initialize the electron application (first-time)
```
npm i
```
Run the electron application
```
npm start
```
A page should spawn looking as follows:

Press LAUNCH PROGRAM_ button

this will launch a python application with a loop inside, that is waiting for data to be send from js
Press INTERACT WITH PROGRAM button

this will send a message named "hello" from js to python and python will read it and print a message
Press TERMINATE PROGRAM button

a termination message ("terminate") is sent to the program which knows to stop the loop and execution
Press HOW TO OPEN A FILE button

from electron/guiExample.js an ipc.send message is sent to the main.js which will then read and output config.json values (fast feature to store settings).

Interpretation Guide

Important functionality can be found in files electron/guiExample.js where the core of electron is. Listeners are implemented there awaiting for click events to trigger initialization of program, communication and termination. The program python/pythonExample.py which is the external or 3rd party application that electron calls, is a simple for-loop awaiting commands. It responds to commands and terminates when sent an empty string, "terminate" or by pressing the terminate program button.

Authors

Ioannis Tsiakkas - (Keybraker) - Keybraker