Python Eel 創造個人網頁GUI桌面應用程式(入門篇)

Neutron
Oct 21, 2020

--

介紹

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 皆是

與python程式同一個資料夾下,要有一個web folder專門放html/js/css檔案
像是這樣

起始步驟

Step1. 在你的 python script(app.py) 內 import eel, 然後加入 eel.init('網頁資料夾'), eel.start('html檔案的名稱') 去指定你要開啟的html檔案

app.py

Step2. html 內一定要在head內引入/eel.js 這個是必不可少,因為當python在eel.init()時就會將python內要被呼叫的function 寫進去eel.js內讓你的JS檔案去做使用

main.html

其實就這兩個步驟就可以啟用了,你可以直接執行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 去放入我要返回的值。

main.html 創建button 與 p tag

然後在app.py內將py function(say_something) 丟給eel 給JS使用,
只要在py function 上加上 '@eel.expose' ,然後就可以在JS裡面使用。

app.py

接下來就是在main.js 內使用剛剛的python function(say_something),只要'eel.'加上PY function的名稱,然後在加上個()輸入參數,就可以直接使用 python function ,最後再加上()就可以直接取python function 返回的值。

像是這樣寫 eel.say_something() 就可以直接使用 ,不過要加上一個()去取值。

不過因為JS 是非阻塞式的,所以得使用aysnc 加上await 去等待python function返值。

main.js

最終呈現的會如下

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.js 內新增js_bigger的function,然後丟給eel

然後在main.py 使用,使用的方式也是一樣,直接寫eel.js_bigger()就可以使用,然後如果有返值的話再加上()就好。

main.html

--

--