介紹
Eel 是一個python輕量級的GUI第三方的module,可以透過local 伺服器實現web與python之間的溝通,所以整個介面會以網頁方式呈現(會用chrome開啟),也就是可以用HTML 與CSS 去控制呈現的風格,然後用JS 與python 互相呼叫。
當然也有其他的好用GUI package可以使用,例如Tkinter or PyQt5,但是如果你剛好會網頁開發,為何不乾脆用網頁寫就好。
技能需要
● 基礎的 JavaScript
● 基礎的 HTML+CSS
整體結構
整個程式是以python 執行,但是介面會以網頁為主。
安裝
windows : pip install eel
使用
資料夾結構
必須要先有固定的資料夾結構才可以開始,要有一個folder去裝網頁的檔案,例如css/html/js/img 皆是
起始步驟
Step1. 在你的 python script(app.py) 內 import eel, 然後加入 eel.init('網頁資料夾'), eel.start('html檔案的名稱') 去指定你要開啟的html檔案
Step2. html 內一定要在head內引入/eel.js 這個是必不可少,因為當python在eel.init()時就會將python內要被呼叫的function 寫進去eel.js內讓你的JS檔案去做使用
其實就這兩個步驟就可以啟用了,你可以直接執行app.py試試。會用chrome開啟一個你在HTML的網頁。
呼叫方式
JS呼叫py
主要就兩個步驟
1. 將py function 用@eel.expose 丟給eel
2. 在main.js 內 直接使用eel.python_function()即可
例如我現在要HTML內的一個button去觸發JS 的function,
然後讓JS的function去呼叫一個python 的function,
再讓這個python 的function 返回我要的文字,
最終將返回的文字顯示在HTML。
所以我先在main.html 內創造一個button 去觸發JS function(btn_click),再加入<p>tag 去放入我要返回的值。
然後在app.py內將py function(say_something) 丟給eel 給JS使用,
只要在py function 上加上 '@eel.expose' ,然後就可以在JS裡面使用。
接下來就是在main.js 內使用剛剛的python function(say_something),只要'eel.'加上PY function的名稱,然後在加上個()輸入參數,就可以直接使用 python function ,最後再加上()就可以直接取python function 返回的值。
像是這樣寫 eel.say_something() 就可以直接使用 ,不過要加上一個()去取值。
不過因為JS 是非阻塞式的,所以得使用aysnc 加上await 去等待python function返值。
最終呈現的會如下
python function 呼叫JS
1. 將JS function 用eel.expose('JS function name') 丟給eel
2. 在app.py內 直接使用eel.JS_function()即可
基本上跟python function 丟給eel一樣,不一樣的是JS 是要加 ‘eel.expose(JS function 名稱)’
例如我要將main.js 內的 JS function (js_bigger)丟給python使用,則是在main.js 寫上eel.expose(js_bigger)
然後在main.py 使用,使用的方式也是一樣,直接寫eel.js_bigger()就可以使用,然後如果有返值的話再加上()就好。