mirror of
https://github.com/pyscript/pyscript.git
synced 2026-02-12 22:00:56 -05:00
Updated freedom demo to make use of Toga 0.3.0 and briefcase web backend. (#1203)
This commit is contained in:
Russell Keith-Magee
committed by
GitHub
GitHub
parent
b14a2bba5f
commit
a18b4edfc0
@@ -2,66 +2,40 @@
|
||||
|
||||
This is a demo Toga app implementing a Fahrenheit to Celsius converter.
|
||||
|
||||
It can be served as a Single Page App from a static web server.
|
||||
|
||||
## Initial setup
|
||||
|
||||
1. Create and activate a virtual environment:
|
||||
1. Create and activate a virtual environment, and move into the `freedom`
|
||||
project directory:
|
||||
|
||||
$ python -m venv venv
|
||||
$ . ./venv/bin/activate
|
||||
$ python -m venv venv
|
||||
$ . ./venv/bin/activate
|
||||
$ cd freedom
|
||||
|
||||
2. Install the demo requirements:
|
||||
2. Install Briefcase:
|
||||
|
||||
$ pip install -r requirements.txt
|
||||
|
||||
### Development details
|
||||
|
||||
This demo symbolically links the pyscript build generated by the npm server
|
||||
(`../build`) into the `./static/pyscript` directory. This symbolic link should
|
||||
be restored automatically by git. This also means you'll need to run the main
|
||||
pyscript demos at least once before running the server-rendered version of the
|
||||
app. If you experience problems loading pyscript, check whether this link
|
||||
exists, and the `build/pyscript.js` file has been compiled.
|
||||
|
||||
It also includes an vendored experimental version of toga-core, toga-web and
|
||||
toga-flask, packaged as wheels in the `./static/wheels` directory. If any changes
|
||||
are made to the Toga sources, these vendored resources will need to be updated.
|
||||
$ pip install briefcase
|
||||
|
||||
## Web app
|
||||
|
||||
This app can be viewed as a Single Page App (SPA); this version of the app is
|
||||
linked from the main PyScript demo pages.
|
||||
linked from the main PyScript demo pages. To re-build the app and start a
|
||||
local webserver, run:
|
||||
|
||||
It can also be viewed as a server-rendered app. This version of the app is
|
||||
delivered by a demo Flask server, serving a version of app at the root URL. To
|
||||
run the web demo server:
|
||||
|
||||
$ cd server
|
||||
$ PYTHONPATH=../freedom/src python -m demo
|
||||
|
||||
then point your browser at http://localhost:8081/
|
||||
|
||||
Enter a value in the "Fahrenheit" input, and click the "calculate" button.
|
||||
|
||||
It may take a few seconds for this button to become live; look for the
|
||||
"Collecting nodes..." entry in the console log.
|
||||
$ briefcase run web
|
||||
|
||||
## Desktop app
|
||||
|
||||
To run this app in development mode:
|
||||
To run this app as a desktop app in development mode:
|
||||
|
||||
$ briefcase dev
|
||||
|
||||
To build and run an app bundle:
|
||||
To build and run it as an app bundle:
|
||||
|
||||
$ briefcase run
|
||||
|
||||
If you're on an M1 macOS, this will raise an error on first run; if you get this error, run:
|
||||
|
||||
$ briefcase package -p app --adhoc-sign
|
||||
|
||||
then re-run `briefcase run`
|
||||
|
||||
## iOS app
|
||||
## Mobile app
|
||||
|
||||
To run this in the iOS simulator, run:
|
||||
|
||||
|
||||
@@ -1,55 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="icon" type="image/png" href="./static/logo-32.png"/>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Freedom Units</title>
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet"
|
||||
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
|
||||
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
|
||||
crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="./static/toga.css">
|
||||
<link rel="icon" type="image/png" href="/static/logo-32.png"/>
|
||||
|
||||
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
||||
|
||||
<title>Loading...</title>
|
||||
<link rel="icon" type="image/png" href="../favicon.png" />
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
|
||||
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
|
||||
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<py-config>
|
||||
packages = [
|
||||
"./static/wheels/travertino-0.1.3-py3-none-any.whl",
|
||||
"./static/wheels/toga_core-0.3.0.dev39-py3-none-any.whl",
|
||||
"./static/wheels/toga_web-0.3.0.dev39-py3-none-any.whl",
|
||||
"./static/wheels/freedom-0.0.1-py3-none-any.whl"
|
||||
]
|
||||
terminal = false
|
||||
</py-config>
|
||||
|
||||
<div id="app-placeholder">Loading...</div>
|
||||
<py-script>
|
||||
from pyscript import Element
|
||||
from freedom.__main__ import main
|
||||
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
||||
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
|
||||
|
||||
|
||||
# Remove text from placeholder
|
||||
Element('app-placeholder').write('', append=False)
|
||||
app = main().main_loop()
|
||||
</py-script>
|
||||
</body>
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
|
||||
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
|
||||
crossorigin="anonymous">
|
||||
|
||||
<link rel="stylesheet" href="/static/css/briefcase.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app-placeholder"></div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
|
||||
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<py-config>
|
||||
name = "Freedom Units"
|
||||
description = "A testing app"
|
||||
version = "0.0.1"
|
||||
terminal = false
|
||||
packages = [
|
||||
"./static/wheels/freedom-0.0.1-py3-none-any.whl",
|
||||
"toga_core==0.3.0",
|
||||
"toga_web==0.3.0",
|
||||
"travertino==0.1.3",
|
||||
]
|
||||
|
||||
[splashscreen]
|
||||
autoclose = true
|
||||
</py-config>
|
||||
<py-script>
|
||||
import runpy
|
||||
result = runpy.run_module("freedom", run_name="__main__", alter_sys=True)
|
||||
</py-script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
@@ -1,7 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
mkdir -p ../static/wheels
|
||||
cd src
|
||||
unzip ../base-wheel.zip
|
||||
zip ../../static/wheels/freedom-0.0.1-py3-none-any.whl -r freedom*
|
||||
rm -rf freedom-0.0.1.dist-info
|
||||
@@ -7,42 +7,66 @@ bundle = "org.beeware"
|
||||
version = "0.0.1"
|
||||
url = "https://beeware.org"
|
||||
license = "BSD license"
|
||||
author = 'Tiberius Yak'
|
||||
author = "Tiberius Yak"
|
||||
author_email = "tiberius@beeware.org"
|
||||
|
||||
[tool.briefcase.app.freedom]
|
||||
formal_name = "Freedom Units"
|
||||
description = "A testing app"
|
||||
sources = ['src/freedom']
|
||||
sources = ["src/freedom"]
|
||||
requires = [
|
||||
'../static/wheels/toga_core-0.3.0.dev33-py3-none-any.whl',
|
||||
]
|
||||
|
||||
|
||||
[tool.briefcase.app.freedom.macOS]
|
||||
requires = [
|
||||
'git+https://github.com/beeware/toga.git#egg=toga-cocoa&subdirectory=src/cocoa',
|
||||
'std-nslog>=1.0.0',
|
||||
"toga-cocoa~=0.3.0",
|
||||
"std-nslog>=1.0.0",
|
||||
]
|
||||
|
||||
[tool.briefcase.app.freedom.linux]
|
||||
requires = [
|
||||
'git+https://github.com/beeware/toga.git#egg=toga-gtk&subdirectory=src/gtk',
|
||||
"toga-gtk~=0.3.0",
|
||||
]
|
||||
|
||||
[tool.briefcase.app.freedom.linux.appimage]
|
||||
system_requires = [
|
||||
"gir1.2-webkit2-4.0",
|
||||
"libcairo2-dev",
|
||||
"libgirepository1.0-dev",
|
||||
"libgtk-3-dev",
|
||||
"libpango1.0-dev",
|
||||
"librsvg2-dev",
|
||||
"libwebkit2gtk-4.0-dev",
|
||||
]
|
||||
linuxdeploy_plugins = [
|
||||
"DEPLOY_GTK_VERSION=3 gtk",
|
||||
]
|
||||
|
||||
[tool.briefcase.app.freedom.linux.flatpak]
|
||||
flatpak_runtime = "org.gnome.Platform"
|
||||
flatpak_runtime_version = "42"
|
||||
flatpak_sdk = "org.gnome.Sdk"
|
||||
|
||||
[tool.briefcase.app.freedom.windows]
|
||||
requires = [
|
||||
'git+https://github.com/beeware/toga.git#egg=toga-winforms&subdirectory=src/winforms',
|
||||
"toga-winforms~=0.3.0",
|
||||
]
|
||||
|
||||
# Mobile deployments
|
||||
[tool.briefcase.app.freedom.iOS]
|
||||
requires = [
|
||||
'git+https://github.com/beeware/toga.git#egg=toga-iOS&subdirectory=src/iOS',
|
||||
'std-nslog>=1.0.0',
|
||||
"toga-iOS~=0.3.0",
|
||||
"std-nslog>=1.0.0",
|
||||
]
|
||||
|
||||
[tool.briefcase.app.freedom.android]
|
||||
requires = [
|
||||
'git+https://github.com/beeware/toga.git#egg=toga-android&subdirectory=src/android',
|
||||
"toga-android~=0.3.0",
|
||||
]
|
||||
|
||||
# Web deployments
|
||||
[tool.briefcase.app.freedom.web]
|
||||
requires = [
|
||||
"toga-web~=0.3.0",
|
||||
]
|
||||
style_framework = "Bootstrap v4.6"
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
from freedom.app import main
|
||||
|
||||
print("IN FREEDOM", main)
|
||||
|
||||
if __name__ == "__main__":
|
||||
main().main_loop()
|
||||
|
||||
37
examples/toga/static/css/briefcase.css
Normal file
37
examples/toga/static/css/briefcase.css
Normal file
@@ -0,0 +1,37 @@
|
||||
|
||||
/* Unset the overly generic pyscript .label style */
|
||||
#app-placeholder .label {
|
||||
margin-top: inherit;
|
||||
color: inherit;
|
||||
text-align: inherit;
|
||||
width: inherit;
|
||||
display: inherit;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
margin-top: inherit;
|
||||
|
||||
}
|
||||
|
||||
/*******************************************************************
|
||||
* WARNING: Do not remove or modify this comment block, or add any
|
||||
* content below this block. Briefcase will add content here during
|
||||
* the build step.
|
||||
******************* Wheel contributed styles **********************/
|
||||
|
||||
/*******************************************************
|
||||
* toga_web 0.3.0::toga.css
|
||||
*******************************************************/
|
||||
|
||||
main.toga.window {
|
||||
margin-top: 5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
div.toga.box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
span.toga.label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.3 KiB |
@@ -1,9 +0,0 @@
|
||||
main.toga.window {
|
||||
margin-top: 5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
div.toga.box {
|
||||
display: flex;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
Wheels will go here.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user