Comments (3)
前提条件:Google Chrome(Edge対応もしているが、Chromeがオススメ)
https://github.com/samuelhwilliams/Eel#starting-the-app
eel.init
に、HTMLやCSSを配置するディレクトリを指定eel.start
でGUIアプリ起動(localhostでBottleが動き、ChromeにHTMLを表示する)
https://github.com/samuelhwilliams/Eel#exposing-functions
eel.expose
でPythonの関数をJavaScriptから使えるようにする- このトークでは扱わないが、JavaScriptの関数をPythonから呼び出すことも可能
https://github.com/samuelhwilliams/Eel#return-values
- callbackを使う方法と同期的に返り値を得る方法(要読み込み)
- GUIアプリ上の値の書き換えはgetElementByIdで要素を拾い、innerHTMLを書き換える(HTML要素とJavaScriptで書き換えの説明が必要)
- pタグは直接文字列を代入すれば書き換わる https://stackoverflow.com/a/3180755
from bring-script-more-users.
https://github.com/samuelhwilliams/Eel#return-values の読み込み
Pythonインタープリターとブラウザウィンドウは別のプロセス
値をどうやり取りするか
→返り値を受け取る方法は2通り
- Callback:
eel.js_random()(print_num)
←js_random()の返り値がprint_numに渡る- Python→JSという書き方もできる
- 同期的に返す
- 入力値の内容やウィジェットの状態の取得(少し待てば済むのでコールバックより便利)
- 2つ目の()に何も渡さないと同期的に受け取ることになる(PythonでもJSでも)
eel.js_random()()
- eel.startの後のみ有効
- JSではasync function の中で awaitを使って書く
await eel.py_random()()
- await(待ち)を使っているからsynchronousになる
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function
非同期関数は、 await 式を含むことができます。これは非同期関数の実行を一時停止し、 Promise の解決を待ちます。そして非同期関数の実行を再開し、解決された値を返します。
eel.initの_js_result_timeout引数のデフォルト値10秒:JavaScript側からの返り値が受け取れなかった場合のタイムアウト
from bring-script-more-users.
aタグ(リンク)からbuttonに変更
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button
onclick属性はbuttonのリファレンスにはないが、HTML要素全般にclickイベントハンドラを追加できる書き方
https://developer.mozilla.org/ja/docs/Web/Guide/Events/Event_handlers
定められたオブジェクトの特定のイベント (click など) に対して on<...> イベントハンドラをさまざまな方法で指定することができます。
- 要素に on{eventtype} という名前の HTML 属性を使用します。
参考資料:https://developer.mozilla.org/ja/docs/Web/API/Element/click_event
最初にこちらを見た
https://www.w3schools.com/jsref/event_onclick.asp
from bring-script-more-users.
Related Issues (20)
- [Appendix] GUIのHello WorldアプリにCSSの例を追加する HOT 1
- 登壇前コード最終調整 HOT 1
- 動作環境の情報(requirements.txt)を用意する HOT 1
- ドキュメント(アプリの説明)を整える
- [for workshop] 必要なファイル類をパッと作れるヘルパーコマンドを設計する HOT 1
- [for workshop] jinja2を触ってみて、いくつかのファイルを作るヘルパーコマンドが実現できそうか確かめる HOT 1
- [for workshop] Eelを使ったGUIアプリに必要なファイル類を作るヘルパーコマンドを実装する
- [for workshop] Flaskを使ったGUIアプリに必要なファイル類を作るヘルパーコマンドを実装する
- インテグレーションテストコードを追加する HOT 1
- 具体的なクラスがargsを持つように修正する HOT 1
- 調査:型ヒントに自作クラスを指定するには HOT 2
- guiのtemplateをwebのtemplateと同様にする HOT 3
- 画像リサイズスクリプトでStreamlitを試す HOT 4
- 2020/12 stapy 登壇準備 HOT 1
- CLIに引数の説明を追加し、UIをGUIやWebアプリと揃える HOT 1
- `st.cache`を使ったコードをブラッシュアップする HOT 1
- Streamlitアプリをデプロイしてみる HOT 1
- EelアプリでHTML要素のclassを扱う例を追加する HOT 1
- PythonのクラスをexposeしたらJavaScriptからも操作できるか調べる HOT 3
- bringscriptインストール後に発生したエラーを解消している HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bring-script-more-users.