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 standart streams.

Structure of example

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Installation Guide

1. 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. )

2. Clone this repository:

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

Execution Guide

1. Open a terminal window and cd to cloned project

   cd electron-GUI-for-python
   

2. Initialize the elcetron aplication (first-time)

   npm i
   

3. Run the electron application

   npm start
   

4. A page should spawn looking as follows:

1. Press LAUNCH PROGRAM_ button

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

2. 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

3. Press TERMINATE PROGRAM button

   a termination message ("terminate") is sent to the program which knows to stop the loop and execution

4. Press HOW TO OPEN A FILE button

   from electron/gui_example.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/gui_example.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 external_programs/python_example.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