Brython <<
Previous Next >> Game
Unitconvert
攝氏與華氏溫度單位換算程式編寫:
- 請在個人網頁上的 H1 標題為大寫 HW 頁面中增加一個 H2 標題小寫 w12 的頁面, 並將攝氏與華氏溫度單位轉換的公式列入.
- 請利用 https://www.diagrams.net 繪製一個攝氏與華氏溫度轉換的程式設計流程圖, 完成後將流程圖轉為 .png 格式後嵌入 w12 頁面中.
- 請根據程式設計流程圖, 在 w12 頁面中直接加入一個 Brython 程式, 使能在頁面中印出今天的日期、時間與該時間點的攝氏及華氏溫度. 例如: 今天是 2022 年 11 月 24 日, 現在時間 10:35, 攝氏溫度為 29 度, 華氏為 84.2 度.
- 接下來請利用 Brython 程式語法中的 input() 在 w12 頁面中讓使用者按下"溫度換算"按鈕後, 跳出讓使用者輸入攝氏溫度值, 讓溫度單位轉換程式運算後, 可以同時列出使用者所輸入的攝氏與華氏溫度值.
input() 取得的資料型別為字串
# Brython 的 input() 可以接受輸入提示字串, 跳出瀏覽器輸入表單後, 將輸入內容以字串取回
user_input_temp = input("請輸入攝氏溫度值:")
# 接著列出 user_input_temp 變數的資料型別
print(type(user_input_temp))
從上面的範例, 可知 Brython input() 取回使用者的輸入值之後, 傳回的變數資料型別為 str, 也就是字串, 即便使用者輸入 30 整數, 但就程式而言, 取回 30 之後, 會將這個變數視為字串, 因此隨後的程式運算, 應該要將此變數轉為浮點數 (floating number), 因為使用者可能會輸入帶有小數點的資料. 要將字串轉為浮點數, 可以使用 float() 函式.
當然, 使用者也可能會輸入不是數值的資料, 所以之後若要讓溫度轉換程式能更加人性化, 或者防呆, 就必須在瀏覽器前端 (反應較即時) 或伺服器後端 (若在前端取值後, 再設法將資料傳回後端電腦處理, 則反應較為耗時, 但可收集使用者在瀏覽器前端的所有輸入及操作行為數據).
接下來要將字串轉為浮點數:
input(), float() 與 type() 的用法
'''
f = c*9/5 + 32
c = (f-32)*5/9
'''
c = input("請輸入攝氏溫度值")
c = float(c)
print(c, type(c))
利用數學運算將攝氏轉為華氏
'''
f = c*9/5 + 32
c = (f-32)*5/9
'''
c = input("請輸入攝氏溫度值")
c = float(c)
#print(c, type(c))
f = c*9/5 + 32
print(c, f)
溫度轉換程式練習至此, 都只是在動態或靜態網站已經配置好 Brython 執行環境的頁面中執行, 接下來我們將要直接在 w12 頁面中配置 Brython 環境, 並且在其中列出使用者透過 input() 函式的輸入資料:
動態網頁中的 Brython 環境設置
<h3>w12</h3>
<!--
在動態網站頁面中啟用 Brython 執行環境的用法, 請注意動態網站執行所在路徑
-->
<script src="./../cmsimde/static/brython.js"></script>
<script src="./../cmsimde/static/brython_stdlib.js"></script>
<!-- 啟動 Brython -->
<p>
<script>// <![CDATA[
window.onload=function(){
brython({debug:1, pythonpath:['./../cmsimde/static/','/downloads/py/']});
}
// ]]></script>
<!-- 以下事先在頁面中加入 id="brython_div" 的 div 標註
之後可利用 Brython 的 document 模組與此 html 標註對應
--></p>
<div id="brython_div"></div>
<p>
<script type="text/python">// <![CDATA[
from browser import html, document
# Brython 的 input() 可以接受輸入提示字串, 跳出瀏覽器輸入表單後, 將輸入內容以字串取回
user_input_temp = input("請輸入攝氏溫度值:")
# 接著列出 user_input_temp 變數的資料型別
# 但是在頁面中 Brython 的 print() 將會顯示在 log 而非頁面
print(type(user_input_temp))
# 這裡定義一個 brython_div 變數, 透過 document[] 與頁面中 id="brython_div" 的位置對應
brython_div = document["brython_div"]
# 看能不能直接將變數值字串列在標註 id 為 "brython_div" 的頁面位置
brython_div <= user_input_temp
# 之後若要列出 html, 則需要透過 Brython 的 html 模組
// ]]></script>
</p>
上面在動態網頁中的 w12 超文件網頁, 只要連結就會直接跳出取值表單的設計, 並不是很人性化, 因為使用者連結至 w12 可能只想看看該頁面內, 不一定希望執行取值或溫度轉換, 因此必須設法製作一個按鈕, 讓使用者按下按鈕之後才執行特定的程式內容.
因此將 w12 頁面改為 w12-1 頁面, 以 html 建立一個帶有 id 的 button 標註, 並在原有的 Brython 程式段中設定一個按鈕與表單取值程式的綁定 (bind), 只有當使用者按下按鈕時, 才會根據綁定設計, 呼叫表單取值.
設計超文件按鈕與特定函式綁定
<h3>w12-1</h3>
<!--
在動態網站頁面中啟用 Brython 執行環境的用法, 請注意動態網站執行所在路徑
-->
<script src="./../cmsimde/static/brython.js"></script>
<script src="./../cmsimde/static/brython_stdlib.js"></script>
<!-- 啟動 Brython -->
<p>
<script>// <![CDATA[
window.onload=function(){
brython({debug:1, pythonpath:['./../cmsimde/static/','/downloads/py/']});
}
// ]]></script>
<!-- 以下事先在頁面中加入 id="brython_div" 的 div 標註
之後可利用 Brython 的 document 模組與此 html 標註對應
--></p>
<!-- 利用 html 建立一個 id="btn1" 的按鈕 -->
<p><button id="btn1">取使用者輸入</button></p>
<div id="brython_div"></div>
<p>
<script type="text/python">// <![CDATA[
from browser import html, document
# Brython 的 input() 可以接受輸入提示字串, 跳出瀏覽器輸入表單後, 將輸入內容以字串取回
#user_input_temp = input("請輸入攝氏溫度值:")
# 接著列出 user_input_temp 變數的資料型別
# 但是在頁面中 Brython 的 print() 將會顯示在 log 而非頁面
#print(type(user_input_temp))
# 這裡定義一個 brython_div 變數, 透過 document[] 與頁面中 id="brython_div" 的位置對應
brython_div = document["brython_div"]
# 看能不能直接將變數值字串列在標註 id 為 "brython_div" 的頁面位置
#brython_div <= user_input_temp
# 之後若要列出 html, 則需要透過 Brython 的 html 模組
# 接下來要設法按下按鈕之後才執行取使用者 input 的流程
# 首先 comment 掉前面的 input() 與 print(), 同時蓋掉輸出, 並利用事件導向設計一個函式
def get_input(env):
user_input_temp = input("請輸入攝氏溫度值:")
brython_div <= user_input_temp
# 透過 Brython browser 模組中的 document 物件將 id="btn1" 的物件中的 bind() 方法
# 讓使用者 click 後會經由瀏覽器中的 event 通知執行 get_input 函式
document["btn1"].bind('click', get_input)
// ]]></script>
</p>
程式設計到這裡, 不知道有沒有同學想起來, 截至目前所寫的程式都是在瀏覽器前端, 使用者可以透過瀏覽器跳出的表單輸入攝氏溫度值, 然後要求 Brython 程式進行運算轉換, 但是若想要將使用者輸入的值儲存起來, 或者利用使用者輸入的溫度值, 用來設定位於遠端 (Server 端) 的一台冷氣, 該如何將前端表單輸入內容, 送到伺服器端?
以下將採用 AJAX 將 Brython 表單程式所取得的溫度數值, 以 GET 方式送到伺服器:
Brython 以 AJAX 將資料送到 Flask
<h3>w12-2</h3>
<!--
在動態網站頁面中啟用 Brython 執行環境的用法, 請注意動態網站執行所在路徑
-->
<script src="./../cmsimde/static/brython.js"></script>
<script src="./../cmsimde/static/brython_stdlib.js"></script>
<!-- 啟動 Brython -->
<p>
<script>// <![CDATA[
window.onload=function(){
brython({debug:1, pythonpath:['./../cmsimde/static/','/downloads/py/']});
}
// ]]></script>
<!-- 以下事先在頁面中加入 id="brython_div" 的 div 標註
之後可利用 Brython 的 document 模組與此 html 標註對應
--></p>
<!-- 利用 html 建立一個 id="btn1" 的按鈕 -->
<p><button id="btn1">取使用者輸入</button></p>
<div id="brython_div"></div>
<p>
<script type="text/python">// <![CDATA[
from browser import html, document, ajax
# Brython 的 input() 可以接受輸入提示字串, 跳出瀏覽器輸入表單後, 將輸入內容以字串取回
#user_input_temp = input("請輸入攝氏溫度值:")
# 接著列出 user_input_temp 變數的資料型別
# 但是在頁面中 Brython 的 print() 將會顯示在 log 而非頁面
#print(type(user_input_temp))
# 這裡定義一個 brython_div 變數, 透過 document[] 與頁面中 id="brython_div" 的位置對應
brython_div = document["brython_div"]
# 看能不能直接將變數值字串列在標註 id 為 "brython_div" 的頁面位置
#brython_div <= user_input_temp
# 之後若要列出 html, 則需要透過 Brython 的 html 模組
# 接下來要設法按下按鈕之後才執行取使用者 input 的流程
# 首先 comment 掉前面的 input() 與 print(), 同時蓋掉輸出, 並利用事件導向設計一個函式
def complete(request):
pass
def get_input(env):
user_input_temp = input("請輸入攝氏溫度值:")
url = "http://127.0.0.1:8080/?temp=" + user_input_temp
ajax.get(url, oncomplete=complete)
brython_div <= "已經透過 AJAX 採 GET 將溫度輸入值送到 server"
brython_div <= html.BR()
brython_div <= user_input_temp
brython_div <= html.BR()
# 透過 Brython browser 模組中的 document 物件將 id="btn1" 的物件中的 bind() 方法
# 讓使用者 click 後會經由瀏覽器中的 event 通知執行 get_input 函式
document["btn1"].bind('click', get_input)
// ]]></script>
</p>
<!--
以下為 Flask 伺服器端的程式碼
from flask import Flask, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/', methods=['GET'])
def index():
# 利用 Flask request 取得 GET 模式下的 temp 變數值
# 若 temp 無值, 則內定為 "30"
temp = request.args.get('temp', default="30")
# 當使用者在瀏覽器執行 Brython 程式時, 可以利用 GET 將 temp 變數值傳給 server 端的 Flask Python 程式
# 若瀏覽器前端採 form 表單取值, 則 Flask 可以 request.form.get() 取值
return "已經取得 temp: " + str(temp)
if __name__ == '__main__':
app.run(host='127.0.0.1', port=8080, debug=True)
-->
使用者若希望測試在 w12-2 網頁中點擊按鈕, 輸入溫度值, 然後透過 AJAX 傳值, 必須在近端 (可以利用 SCiTE) 先啟動以下的 localhost Server 程式:
與 Brython 前端互動的 Flask 伺服器程式
from flask import Flask, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/', methods=['GET'])
def index():
# 利用 Flask request 取得 GET 模式下的 temp 變數值
# 若 temp 無值, 則內定為 "30"
temp = request.args.get('temp', default="30")
# 當使用者在瀏覽器執行 Brython 程式時, 可以利用 GET 將 temp 變數值傳給 server 端的 Flask Python 程式
# 若瀏覽器前端採 form 表單取值, 則 Flask 可以 request.form.get() 取值
return "已經取得 temp: " + str(temp)
if __name__ == '__main__':
app.run(host='127.0.0.1', port=8080, debug=True)
程式設計到這裡, 若 Brython 中使用者輸入的數值, 是用來設定遠端的 NX2027 零件尺寸或其他設計分析用的數據, 則 Server 端的程式只要再透過 NXOpen Python API 與 NX2027 CAD/CAE/CAM 套件進行互動即可, 無論是零件設計、工程分析或輔助製造都可以利用上述架構, 透過網路結合瀏覽器前端程式與伺服器後端的各種軟硬體進行整合.
Brython <<
Previous Next >> Game