### Install Dependencies
Source: https://github.com/python-eel/eel/blob/main/examples/07 - CreateReactApp/README.md
Installs necessary Python and Node.js packages for the Eel and Create-React-App integration.
```bash
npm install
pip install bottle bottle-websocket future pyinstaller
```
--------------------------------
### Start Eel Application
Source: https://github.com/python-eel/eel/blob/main/README.md
Initializes Eel with the web directory and starts the application, opening a specified HTML file in the browser.
```python
import eel
eel.init('web')
eel.start('main.html')
```
--------------------------------
### Install Project Requirements
Source: https://github.com/python-eel/eel/blob/main/README-developers.md
Installs the necessary Python packages for Eel development. It installs production requirements, testing dependencies (pytest, selenium), and meta-dependencies (tox).
```bash
pip3 install -r requirements.txt
pip3 install -r requirements-test.txt
pip3 install -r requirements-meta.txt
```
--------------------------------
### Hello World Example
Source: https://github.com/python-eel/eel/blob/main/README.md
A basic 'Hello, World!' example demonstrating the integration of HTML, JavaScript, and Python using Eel. It shows how to expose functions between Python and JavaScript and how to call functions across these environments.
```html
Hello, World!
Hello, World!
```
```python
import eel
# Set web files folder and optionally specify which file types to check for eel.expose()
# *Default allowed_extensions are: ['.js', '.html', '.txt', '.htm', '.xhtml']deel.init('web', allowed_extensions=['.js', '.html'])
@eel.expose # Expose this function to Javascript
def say_hello_py(x):
print('Hello from %s' % x)
say_hello_py('Python World!')deel.say_hello_js('Python World!') # Call a Javascript function
deel.start('hello.html') # Start (this blocks and enters loop)
```
--------------------------------
### Run in Development Mode
Source: https://github.com/python-eel/eel/blob/main/examples/07 - CreateReactApp/README.md
Starts the Eel application and the React development server simultaneously for live development.
```bash
python eel_CRA.py true
npm start
```
--------------------------------
### Install Eel
Source: https://github.com/python-eel/eel/blob/main/README.md
Installs the Eel library using pip. Optionally includes Jinja2 support for HTML templating.
```shell
pip install eel
pip install eel[jinja2]
```
--------------------------------
### Build and Run (Production)
Source: https://github.com/python-eel/eel/blob/main/examples/07 - CreateReactApp/README.md
Builds the static React files and runs the Eel application, suitable for distribution.
```bash
npm run build
python eel_CRA.py
```
--------------------------------
### Clone Eel Repository
Source: https://github.com/python-eel/eel/blob/main/README-developers.md
Clones the Eel project repository from GitHub using Git. This is the first step in setting up the development environment.
```bash
git clone git@github.com:python-eel/Eel.git
```
--------------------------------
### Starting Eel with Microsoft Edge
Source: https://github.com/python-eel/eel/blob/main/README.md
Example of how to launch a Python Eel application using Microsoft Edge as the default browser. This is particularly useful on Windows 10 where Edge is pre-installed.
```python
import eel
eşel.init('web')
eşel.start('main.html', mode='edge')
# Keep the application running (example)
# eel.sleep(10000)
```
--------------------------------
### Build Distribution Binary
Source: https://github.com/python-eel/eel/blob/main/examples/07 - CreateReactApp/README.md
Creates a single executable file for the Eel application using PyInstaller.
```bash
python -m eel eel_CRA.py build --onefile
```
--------------------------------
### Create and Activate Virtual Environment
Source: https://github.com/python-eel/eel/blob/main/README-developers.md
Creates a Python virtual environment named 'venv' and activates it. This isolates project dependencies. The 'venv' directory is ignored by Git.
```bash
python3 -m venv venv
source venv/bin/activate
```
--------------------------------
### Building Distributable Binaries with PyInstaller
Source: https://github.com/python-eel/eel/blob/main/README.md
Instructions on how to use PyInstaller to package a Python Eel application into a standalone executable. Covers installation, basic usage, passing PyInstaller flags, and creating a single executable with no console window.
```bash
# Install PyInstaller
pip install PyInstaller
# Basic usage
python -m eel [your_main_script] [your_web_folder]
# Example with excluding modules
python -m eel file_access.py web --exclude win32com --exclude numpy --exclude cryptography
# Build a single executable with no console
python -m eel [your_main_script] [your_web_folder] --onefile --noconsole
```
--------------------------------
### Eel.js Loading in HTML
Source: https://github.com/python-eel/eel/blob/main/examples/07 - CreateReactApp/README.md
Demonstrates how to load the Eel.js file in the HTML, referencing the port specified in Eel's options.
```html
```
--------------------------------
### Run Tox Tests
Source: https://github.com/python-eel/eel/blob/main/README-developers.md
Executes automated tests for the Eel project using Tox. Tox is configured to test against multiple Python versions. Requires Chrome and compatible ChromeDriver.
```bash
tox -e py36
tox
```
--------------------------------
### Basic Eel Python Script
Source: https://github.com/python-eel/eel/blob/main/examples/07 - CreateReactApp/README.md
A minimal Python script using Eel to serve a web application. It supports a development mode when a second argument is provided.
```python
import eel
# Initialize Eel, specifying the web folder and a default starting page
# If no second argument is provided, it defaults to loading 'index.html' from the build directory.
# If a second argument (e.g., 'true') is provided, it enables development mode and connects to a React server on port 3000.
if __name__ == '__main__':
# Example: eel.init('web')
# eel.start('index.html', size=(1000, 700))
pass # Placeholder for actual Eel initialization and start
```
--------------------------------
### JavaScript Function for Python Callback
Source: https://github.com/python-eel/eel/blob/main/examples/03 - sync_callbacks/web/sync_callbacks.html
An example of a JavaScript function that can be called from Python. This demonstrates the reverse communication flow.
```javascript
function js_random() {
return Math.random();
}
```
--------------------------------
### Exposing JavaScript Functions to Python
Source: https://github.com/python-eel/eel/blob/main/examples/06 - jinja_templates/web/templates/hello.html
This snippet demonstrates how to expose JavaScript functions to be called from Python using `eel.expose()`. It shows exposing a function `say_hello_js` that logs a message and `js_random` that returns a random number.
```javascript
eel.expose(say_hello_js);
function say_hello_js(x) {
console.log("Hello from " + x);
}
eel.expose(js_random);
function js_random() {
return Math.random();
}
```
--------------------------------
### Exposing JavaScript Functions to Python
Source: https://github.com/python-eel/eel/blob/main/tests/data/init_test/hello.html
This snippet demonstrates how to expose JavaScript functions to be called from Python using `eel.expose()`. It shows exposing a function `say_hello_js` that logs a message and `js_random` that returns a random number.
```javascript
eel.expose(say_hello_js);
function say_hello_js(x) {
console.log("Hello from " + x);
}
eel.expose(js_random);
function js_random() {
return Math.random();
}
```
--------------------------------
### Tox Dependencies for Python Eel Projects
Source: https://github.com/python-eel/eel/blob/main/requirements-meta.txt
This snippet lists the core dependencies for managing Python Eel projects using tox. It specifies version constraints for tox and related plugins like tox-pyenv and tox-gh-actions, ensuring compatibility and consistent testing environments.
```python
tox>=3.15.2,<4.0.0
tox-pyenv==1.1.0
tox-gh-actions==2.0.0
virtualenv>=16.7.10
setuptools
```
--------------------------------
### Expose JavaScript Function to Python
Source: https://github.com/python-eel/eel/blob/main/README.md
Illustrates how to expose JavaScript functions to be callable from Python using `eel.expose()`. Includes examples of direct exposure and overriding the exposed name.
```javascript
eel.expose(my_javascript_function);
function my_javascript_function(a, b, c, d) {
if (a < b) {
console.log(c * d);
}
}
```
```python
print('Calling Javascript...')
memanfaatkan.my_javascript_function(1, 2, 3, 4)
```
```javascript
memanfaatkan.expose(someFunction, "my_javascript_function");
```
--------------------------------
### Calling Python Functions from JavaScript
Source: https://github.com/python-eel/eel/blob/main/examples/06 - jinja_templates/web/templates/hello.html
This snippet illustrates how JavaScript can call Python functions. It shows calling a Python function `py_random` and then passing a callback function `print_num` to handle the result. It also demonstrates calling a Python function `say_hello_py` directly.
```javascript
function print_num(n) {
console.log('Got this from Python: ' + n);
}
eel.py_random()(print_num);
say_hello_js("Javascript World!");
eel.say_hello_py("Javascript World!");
```
--------------------------------
### Calling Python Functions from JavaScript
Source: https://github.com/python-eel/eel/blob/main/tests/data/init_test/hello.html
This snippet illustrates how JavaScript can call Python functions. It shows calling a Python function `py_random` and then passing a callback function `print_num` to handle the result. It also demonstrates calling a Python function `say_hello_py` directly.
```javascript
function print_num(n) {
console.log('Got this from Python: ' + n);
}
eel.py_random()(print_num);
say_hello_js("Javascript World!");
eel.say_hello_py("Javascript World!");
```
--------------------------------
### JavaScript to Python Communication with Eel
Source: https://github.com/python-eel/eel/blob/main/tests/data/init_test/sample.html
This snippet demonstrates how to expose a JavaScript function to Python using Eel, log messages, and handle user input from a button click. It shows the basic setup for frontend-backend interaction in an Eel application.
```javascript
$(function(){
eel.expose(say_hello_js); // Expose this function to Python
function say_hello_js(x) {
console.log("Hello from " + x);
}
say_hello_js("Javascript World!");
eel.handleinput("connected!"); // Call a Python function
$("#btn").click(function(){
eel.handleinput($("#inp").val());
$('#inp').val('');
});
});
```
--------------------------------
### TypeScript Declaration for Eel
Source: https://github.com/python-eel/eel/blob/main/examples/07 - CreateReactApp/README.md
Declares the `window.eel` object as a valid type in TypeScript for linting and type checking.
```typescript
declare global {
interface Window {
eel: any;
}
}
export {};
```
--------------------------------
### JavaScript to Python Communication with Eel
Source: https://github.com/python-eel/eel/blob/main/examples/05 - input/web/main.html
This snippet demonstrates how to expose a JavaScript function to Python using Eel, log messages, and handle user input from a button click. It shows the basic setup for frontend-backend interaction in an Eel application.
```javascript
$(function(){
eel.expose(say_hello_js); // Expose this function to Python
function say_hello_js(x) {
console.log("Hello from " + x);
}
say_hello_js("Javascript World!");
eel.handleinput("connected!"); // Call a Python function
$("#btn").click(function(){
eel.handleinput($("#inp").val());
$('#inp').val('');
});
});
```
--------------------------------
### Calling Python from JavaScript (Synchronous)
Source: https://github.com/python-eel/eel/blob/main/examples/03 - sync_callbacks/web/sync_callbacks.html
Shows how to call an exposed Python function from JavaScript synchronously. The JavaScript function must be marked `async` and use `await` to get the result.
```javascript
async function run() {
// Synchronous call must be inside function marked 'async'
// Get result returned synchronously by
// using 'await' and passing nothing in second brackets
let n = await eel.py_random()();
console.log('Got this from Python: ' + n);
}
run();
```
--------------------------------
### JavaScript to Python Return Values (Synchronous)
Source: https://github.com/python-eel/eel/blob/main/README.md
Shows how to synchronously retrieve return values from JavaScript functions called from Python. This method is suitable for quick data retrieval and requires the browser window to be started.
```python
n = eel.js_random()() # This immediately returns the value
print('Got this from Javascript:', n)
```
--------------------------------
### Bypass Code Mangling
Source: https://github.com/python-eel/eel/blob/main/examples/07 - CreateReactApp/README.md
Workaround to prevent Eel's static code analyzer from breaking due to `npm run build` code mangling by explicitly defining exposed function names.
```javascript
window.eel.expose(funcName, 'funcName');
```
--------------------------------
### Python Eel App Options
Source: https://github.com/python-eel/eel/blob/main/README.md
Details the various keyword arguments available for the `eel.start()` function to configure application behavior, including browser mode, host, port, command-line arguments, window size, and callbacks.
```APIDOC
eel.start(path, mode='chrome', host='localhost', port=8000, block=True, jinja_templates=None, cmdline_args=[], size=None, position=None, geometry={}, close_callback=None, app=None, shutdown_delay=1.0)
Parameters:
- path (str): The path to the main HTML file.
- mode (str, optional): Specifies the browser to use ('chrome', 'electron', 'edge', 'msie', 'custom'). Can be None or False to not open a window. Defaults to 'chrome'.
- host (str, optional): Hostname for the Bottle server. Defaults to 'localhost'.
- port (int, optional): Port for the Bottle server. Use 0 for automatic selection. Defaults to 8000.
- block (bool, optional): Whether the call to start() should block the calling thread. Defaults to True.
- jinja_templates (str, optional): Folder for Jinja2 templates. Defaults to None.
- cmdline_args (list[str], optional): List of strings to pass to the browser command line. Defaults to [].
- size (tuple[int, int], optional): Tuple specifying (width, height) of the main window in pixels. Defaults to None.
- position (tuple[int, int], optional): Tuple specifying (left, top) of the main window in pixels. Defaults to None.
- geometry (dict, optional): Dictionary specifying size and position for all windows. Keys are page paths, values are {'size': (w, h), 'position': (x, y)}. Defaults to {}.
- close_callback (callable, optional): Function called when a websocket closes. Takes page path (str) and open websockets (list) as arguments. Defaults to None.
- app (object, optional): An instance of Bottle to use instead of creating a new one. Defaults to None.
- shutdown_delay (float, optional): Delay in seconds for Eel's shutdown detection. Defaults to 1.0.
```
--------------------------------
### Exposing Python Functions to JavaScript
Source: https://github.com/python-eel/eel/blob/main/examples/01 - hello_world/web/hello.html
Demonstrates how to expose Python functions to be called from JavaScript using `eel.expose()`. This allows bidirectional communication between the Python backend and the JavaScript frontend.
```python
import eel
@eel.expose
def say_hello_py(name):
print(f"Hello from Python, {name}!")
# To run the Eel app (requires setup not shown here):
# eel.init('web')
# eel.start('index.html')
```
--------------------------------
### Exposing JavaScript Functions to Python
Source: https://github.com/python-eel/eel/blob/main/examples/01 - hello_world/web/hello.html
Illustrates how JavaScript functions can be exposed to Python using `eel.expose()`. This enables Python to call JavaScript functions.
```javascript
eel.expose(say_hello_js);
function say_hello_js(x) {
console.log("Hello from " + x);
}
say_hello_js("Javascript World!");
```
--------------------------------
### Exposing Python Functions to JavaScript
Source: https://github.com/python-eel/eel/blob/main/examples/09 - Eelectron-quick-start/web/hello.html
Demonstrates how to expose Python functions to be called from JavaScript using `eel.expose()`. This allows bidirectional communication between the Python backend and the JavaScript frontend.
```python
import eel
@eel.expose
def say_hello_py(name):
print(f"Hello from Python, {name}!")
# To run the Eel app (requires setup not shown here):
# eel.init('web')
# eel.start('index.html')
```
--------------------------------
### Exposing JavaScript Functions to Python
Source: https://github.com/python-eel/eel/blob/main/examples/09 - Eelectron-quick-start/web/hello.html
Illustrates how JavaScript functions can be exposed to Python using `eel.expose()`. This enables Python to call JavaScript functions.
```javascript
eel.expose(say_hello_js);
function say_hello_js(x) {
console.log("Hello from " + x);
}
say_hello_js("Javascript World!");
```
--------------------------------
### Calling JavaScript Functions from Python
Source: https://github.com/python-eel/eel/blob/main/examples/01 - hello_world/web/hello.html
Demonstrates how Python can invoke exposed JavaScript functions using the `eel` object. This completes the bidirectional communication capability.
```python
import eel
# Assuming say_hello_js is exposed in JavaScript
# eel.say_hello_js('Python World!')
```
--------------------------------
### Calling Python Functions from JavaScript
Source: https://github.com/python-eel/eel/blob/main/examples/01 - hello_world/web/hello.html
Shows how JavaScript can call exposed Python functions using the `eel` object. This is a fundamental part of Eel's inter-process communication.
```javascript
eel.say_hello_py('Javascript World!');
```
--------------------------------
### Exposing Python Functions to JavaScript
Source: https://github.com/python-eel/eel/blob/main/examples/03 - sync_callbacks/web/sync_callbacks.html
Demonstrates how to expose a Python function to be called from JavaScript using `eel.expose()`. This allows bidirectional communication between Python and the frontend.
```python
import eel
@eel.expose
def py_random():
return 'Hello from Python!' # Example return value
```
--------------------------------
### Calling Python Functions from JavaScript
Source: https://github.com/python-eel/eel/blob/main/examples/09 - Eelectron-quick-start/web/hello.html
Shows how JavaScript can call exposed Python functions using the `eel` object. This is a fundamental part of Eel's inter-process communication.
```javascript
eel.say_hello_py('Javascript World!');
```
--------------------------------
### Expose Python Function to JavaScript
Source: https://github.com/python-eel/eel/blob/main/README.md
Demonstrates how to expose Python functions to be callable from JavaScript using the `@eel.expose` decorator. Shows the Python function definition and the corresponding JavaScript call.
```python
@eel.expose
def my_python_function(a, b):
print(a, b, a + b)
```
```javascript
console.log("Calling Python..."); memanfaatkan.my_python_function(1, 2);
```
--------------------------------
### Calling JavaScript Functions from Python
Source: https://github.com/python-eel/eel/blob/main/examples/09 - Eelectron-quick-start/web/hello.html
Demonstrates how Python can invoke exposed JavaScript functions using the `eel` object. This completes the bidirectional communication capability.
```python
import eel
# Assuming say_hello_js is exposed in JavaScript
# eel.say_hello_js('Python World!')
```
--------------------------------
### Include Eel.js in HTML
Source: https://github.com/python-eel/eel/blob/main/README.md
Shows the necessary HTML script tag to include the `eel.js` library, which enables communication between the frontend and the Python backend.
```html
```
--------------------------------
### Asynchronous Python with Eel
Source: https://github.com/python-eel/eel/blob/main/README.md
Demonstrates how to use Eel's asynchronous features with gevent.sleep() and eel.spawn() for concurrent operations. It highlights the importance of using Eel's sleep function over time.sleep() in an asynchronous context.
```python
import eel
eşel.init('web')
def my_other_thread():
while True:
print("I'm a thread")
eel.sleep(1.0) # Use eel.sleep(), not time.sleep()
eşel.spawn(my_other_thread)
eşel.start('main.html', block=False) # Don't block on this call
while True:
print("I'm a main loop")
eel.sleep(1.0) # Use eel.sleep(), not time.sleep()
```
--------------------------------
### Calling Python Functions with Callbacks
Source: https://github.com/python-eel/eel/blob/main/examples/02 - callbacks/web/callbacks.html
Demonstrates calling Python functions from JavaScript and passing JavaScript callback functions to handle the results. It shows both explicit callback functions and inline arrow functions, as well as handling promises for asynchronous operations.
```javascript
function print_num(n) {
console.log('Got this from Python: ' + n);
}
// Call Python function, and pass explicit callback function
eel.py_random()(print_num);
// Do the same with an inline callback
eel.py_random()(n => console.log('Got this from Python: ' + n));
// show usage with promises
// show no error
eel.py_exception(false)().then((result) => {
// this will execute since we said no error
console.log("No Error")
}).catch((result) => {
console.log("This won't be seen if no error")
});
// show if an error occurrs
eel.py_exception(true)().then((result) => {
// this will not execute
console.log("No Error")
}).catch((result) => {
console.log("This is the repr(e) for an exception " + result.errorText);
console.log("This is the full traceback:\n" + result.errorTraceback);
})
```
--------------------------------
### Exposing JavaScript Functions to Python
Source: https://github.com/python-eel/eel/blob/main/examples/02 - callbacks/web/callbacks.html
This snippet shows how to expose JavaScript functions to be called from Python using `eel.expose()`. It includes a function for generating random numbers and another that intentionally causes an error.
```javascript
eel.expose(js_random);
function js_random() {
return Math.random();
}
eel.expose(js_with_error);
function js_with_error() {
var test = 0;
test.something("does not exist");
}
```
--------------------------------
### JavaScript to Python Return Values (Callbacks)
Source: https://github.com/python-eel/eel/blob/main/README.md
Demonstrates how to retrieve return values from JavaScript functions called from Python using callbacks. This allows for asynchronous handling of results.
```javascript
eel.expose(js_random);
function js_random() {
return Math.random();
}
```
```python
def print_num(n):
print('Got this from Javascript:', n)
# Call Javascript function, and pass explicit callback functiondeel.js_random()(print_num)
# Do the same with an inline lambda as callbackdeel.js_random()(lambda n: print('Got this from Javascript:', n))
```
--------------------------------
### Python to JavaScript Return Values (Synchronous)
Source: https://github.com/python-eel/eel/blob/main/README.md
Illustrates how to synchronously retrieve return values from Python functions called from JavaScript using the `await` keyword within an `async` function.
```javascript
async function run() {
// Inside a function marked 'async' we can use the 'await' keyword.
let n = await eel.py_random()(); // Must prefix call with 'await', otherwise it's the same syntax
console.log("Got this from Python: " + n);
}
run();
```
--------------------------------
### Pick File Functionality (JavaScript)
Source: https://github.com/python-eel/eel/blob/main/examples/04 - file_access/web/file_access.html
This JavaScript function, designed for use with Python Eel, retrieves a folder path from an input element, calls a Python backend function 'pick_file' to select a file within that folder, and then updates the web page with the selected file's name. It requires an HTML input element with the ID 'input-box' and a div with the ID 'file-name'.
```javascript
async function pick_file() {
let folder = document.getElementById('input-box').value;
let file_div = document.getElementById('file-name');
// Call into Python so we can access the file system
let random_filename = await eel.pick_file(folder)();
file_div.innerHTML = random_filename;
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.