A Python package to Build Python Desktop applications using React as GUI.
Project description
Desktop Wrapper Tool
Build Python + React desktop applications in seconds
Dependencies:
Installation
$ pip install desktop-wrapper
Create a new app
# With the cli tool
$ dw-create-app your_app_name
# With the python module
from desktop_wrapper import create_new_app
create_new_app("your_app_name")
Use BaseApp and add the assets and templates folders
from desktop_wrapper import BaseApp
app = BaseApp(
'File Recovery',
__name__,
static_folder='./your_app_name/assets',
template_folder='./your_app_name/templates'
)
Add your custom functions with the @app.bind decorator
@app.bind()
def custom_function(name):
# Do some stuff
return "Finish"
Start the app and you are ready to go
app.start(gui=True, debug=True, port='5000')
You can also check at http://localhost:5000
Full Code
from desktop_wrapper import BaseApp
app = BaseApp(
'My App',
__name__,
static_folder='./your_app_name/assets',
template_folder='./your_app_name/templates'
)
@app.bind()
def custom_function(name):
print(name)
return "Finish"
if __name__ = '__main__':
app.start(gui=True, debug=True, port='5000')
AutoGenerated Files
Each custom function will be translated as javascript interface modules under your_app_name/assets/js/generated.
those will follow the pattern
/*
Autogenerated File, any change will be overwriten at reload
TODO:
Add a way to block modifications when Debugging
*/
async function customFunctionInterface(value) {
try {
console.log(pywebview);
let res = await pywebview.api.custom_function(value);
return res;
} catch (err) {
let res = await fetch('/api/v1/customFunction', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({values: [value]})
});
if (res.status == 200) {
return (await res.json()).response;
}
}
}
export {
customFunctionInterface
}
This allows the interface to:
- First, try to fetch the pywebview object
- Then if the pywebview is not available it can perform a request to the Flask http server
Functions List (Javascript)
your_app_name/assets/js/functions.js
Contains the organized map of custom functions accesible for the React Components.
Note: This file is autogenerated please do not modify
/*
Auto Generated File
Do not modify this file, it could break the app
List of Available custom functions imported from the Autogenerated interfaces
*/
import { customFunctionInterface } from './generated/customFunction.js';
const customFunction = (value) => { return customFunctionInterface(value) };
const FunctionsMap = {
customFunction: customFunction
}
export {
customFunction,
FunctionsMap
}
You can then use this map as following in the editable Files your_app_name/assets/js/App.js
import { FunctionsMap } from './functions.js';
class App extends React.Component {
...
render() {
...
return (
<div>
...
<button onClick={()=>FunctionsMap.customFunction('value')}></button>
...
</div>
)
}
}
...
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
File details
Details for the file desktop_wrapper-0.0.12.tar.gz
.
File metadata
- Download URL: desktop_wrapper-0.0.12.tar.gz
- Upload date:
- Size: 25.0 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.11.7
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 1abb47c50ec13da39baddcf98c28eb2112d723c9c2f981dff2f7502515454b7e |
|
MD5 | dcdd593eb34beb7778039c8b2f89fef7 |
|
BLAKE2b-256 | fe96d43ef72376b5cbd4d59a83f36c77162ebe67e5022cb58f3d400833329a5b |