python - 在按下按钮之前，如何在另一个线程中运行函数，然后如何在没有 JavaScript 的情况下更新该线程中的网页？
问题描述
我正在制作一个使用 GPIO 引脚来读取和显示温度和湿度的网站。我有基本的功能，但现在我想要当你按下开始按钮无限长地在另一个线程中运行时会发生什么，直到你按下停止按钮。每次运行后，应更新网站。我不使用 JavaScript，但使用烧瓶。
这就是我的网站的样子。（请不要关注If's）
.container
{
display: grid;
grid-template-columns: 33.33% 33.3% 33.3%;
grid-template-rows: 75px 75px 75px 75px 75px 75px 75px 75px 75px;
text-align: center;
}
#f1
{
grid-column: 1 / 4;
grid-row: 5 / 10;
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 75px 75px 75px 75px 75px;
text-align: center;
align-items: center;
}
.WhiteBackground
{
background: white;
}
.BlackColor
{
color: black;
}
.RedBackground
{
background: red;
}
.WhiteColor
{
color: white;
}
.BlueBackground
{
background: blue;
}
.GreenBackground
{
background: green;
}
.button {
font: 25px;
text-decoration: none;
background-color: #EEEEEE;
color: black;
padding: 2px 6px 2px 6px;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
text-align: center;
line-height: 2em;
}
.fsize
{
font-size: 25px;
}
.cbtn
{
display: flex;
justify-content: center;
align-items: center;
}
#e6
{
grid-column: 1 / 2;
grid-row: 4 / 5;
}
#e7
{
grid-column: 3 / 4;
grid-row: 4 / 5;
}
#e8
{
grid-column: 2 / 3;
/*grid-row: 9 / 10;*/
grid-row: 5 / 6;
}
#h1Titel
{
grid-column: 1 / 4;
grid-row: 1 / 2;
text-align: center;
font-size: 43px;
}
#pTemperatur
{
grid-column: 1 / 2;
grid-row: 2 / 3;
text-align: center;
font-size: 25px;
}
#pLuftfeuchtigkeit
{
grid-column: 3 / 4;
grid-row: 2 / 3;
text-align: center;
font-size: 25px;
}
#AusgabeTemp
{
grid-column: 1 / 2;
grid-row: 3 / 4;
text-align: center;
font-size: 25px;
margin-block-start: 0em;
margin-block-end: 0em;
line-height: 70px;
vertical-align: middle;
}
#AusgabeLuft
{
grid-column: 3 / 4;
grid-row: 3 / 4;
text-align: center;
font-size: 25px;
vertical-align: middle;
margin-block-start: 0em;
margin-block-end: 0em;
line-height: 70px;
}
#buttonStart
{
grid-column: 1 / 2;
grid-row: 4 / 5;
text-align: center;
font-size: 25px;
width: 250px;
height: 50px;
}
#buttonStop
{
grid-column: 3 / 4;
grid-row: 4 / 5;
text-align: center;
font-size: 25px;
width: 250px;
height: 50px;
}
#pErklaerung1
{
grid-column: 2 / 3;
/*grid-row: 5 / 6;*/
grid-row: 1 / 2;
text-align: center;
font-size: 25px;
}
#TempGruenMin
{
grid-column: 1 / 2;
/*grid-row: 6 / 7;*/
grid-row: 2 / 3;
text-align: center;
font-size: 25px;
height: 75px;
}
#pUnd1
{
grid-column: 2 / 3;
/*grid-row: 6 / 7;*/
grid-row: 2 / 3;
text-align: center;
font-size: 25px;
}
#TempGruenMax
{
grid-column: 3 / 4;
/*grid-row: 6 / 7;*/
grid-row: 2 / 3;
text-align: center;
font-size: 25px;
height: 75px;
}
#pErklaerung2
{
grid-column: 2 / 3;
/*grid-row: 7 / 8;*/
grid-row: 3 / 4;
text-align: center;
font-size: 25px;
}
#LuftGruenMin
{
grid-column: 1 / 2;
/*grid-row: 8 / 9;*/
grid-row: 4 / 5;
text-align: center;
font-size: 25px;
height: 75px;
}
#pUnd2
{
grid-column: 2 / 3;
/*grid-row: 8 / 9;*/
grid-row: 4 / 5;
text-align: center;
font-size: 25px;
}
#LuftGruenMax
{
grid-column: 3 / 4;
/*grid-row: 8 / 9;*/
grid-row: 4 / 5;
text-align: center;
font-size: 25px;
height: 75px;
}
#buttonSpeichern
{
grid-column: 2 / 3;
/*grid-row: 9 / 10;*/
grid-row: 5 / 6;
text-align: center;
font-size: 25px;
width: 250px;
height: 50px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8"/>
<title>Temperatur und Luftfeuchtigkeit</title>
<link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
<div class="container">
<h1 id="h1Titel" style="font-size:40px">Temperatur und Luftfeuchtigkeit</h1>
<p id="pTemperatur" style="font-size:25px">Temperatur</p>
<p id="pLuftfeuchtigkeit" style="font-size:25px">Luftfeuchtigkeit</p>
{% if isRunning == False %}
<p id="AusgabeTemp" style="font-size:25px" class="WhiteBackground BlackColor">{{ temperature }}°C</p>
{% elif isTempBiggerMax == True %}
<p id="AusgabeTemp" style="font-size:25px" class="RedBackground WhiteColor">{{ temperature }}°C</p>
{% elif isTempLowerMin == True %}
<p id="AusgabeTemp" style="font-size:25px" class="BlueBackground WhiteColor">{{ temperature }}°C</p>
{% else %}
<p id="AusgabeTemp" style="font-size:25px" class="GreenBackground WhiteColor">{{ temperature }}°C</p>
{% endif %}
{% if isRunning == False %}
<p id="AusgabeLuft" style="font-size:25px" class="WhiteBackground BlackColor">{{ luftfeuchtigkeite }}%</p>
{% elif isLuftBiggerMax == True %}
<p id="AusgabeLuft" style="font-size:25px" class="RedBackground WhiteColor">{{ luftfeuchtigkeite }}%</p>
{% elif isLuftLowerMin == True %}
<p id="AusgabeLuft" style="font-size:25px" class="BlueBackground WhiteColor">{{ luftfeuchtigkeite }}%</p>
{% else %}
<p id="AusgabeLuft" style="font-size:25px" class="GreenBackground WhiteColor">{{ luftfeuchtigkeite }}%</p>
{% endif %}
{% if buttonStart == 'active' %}
<span class="cbtn" id="e6" style="font-size:25px">
<a href="/start" class="button" id="buttonStart" style="font-size:25px">Start</a>
</span>
{% else %}
<span class="cbtn" id="e6" style="font-size:25px">
<a class="button" id="buttonStart" style="font-size:25px" disabled>Start</a>
</span>
{% endif %}
{% if buttonStop == 'active' %}
<span class="cbtn" id="e7" style="font-size:25px">
<a href="/stop" class="button" id="buttonStop" style="font-size:25px">Stop</a>
</span>
{% else %}
<span class="cbtn" id="e7" style="font-size:25px">
<a class="button" id="buttonStop" style="font-size:25px" disabled>Stop</a>
</span>
{% endif %}
<form id='f1' method="POST">
<p id="pErklaerung1" style="font-size:25px">Grüner Temperaturen Bereich: zwischen</p>
<input id="TempGruenMin" name="TempGruenMin" rows="1" value="{{ MinTemp }}">
<p id="pUnd1" style="font-size:25px">und</p>
<input id="TempGruenMax" name="TempGruenMax" rows="1" value="{{ MaxTemp }}">
<p id="pErklaerung2" style="font-size:25px">Grüner Luftfeuchtigkeiten Bereich: zwischen</p>
<input id="LuftGruenMin" name="LuftGruenMin" rows="1" value="{{ MinHumi }}">
<p id="pUnd2" style="font-size:25px">und</p>
<input id="LuftGruenMax" name="LuftGruenMax" rows="1" value="{{ MaxHumi }}">
<span class="cbtn" id="e8" style="font-size:25px">
<input type="submit" href="/speichern" value="Speichern" id="buttonSpeichern" style="font-size:25px">
</span>
</form>
</div>
</body>
</html>我的 Python 文件：
#!/usr/bin/env python
# coding: utf8
# -*- coding: utf-8 -*-
#imports
#variables and GPIO-Pins defined
@app.route('/')
@app.route('/index')
def index():
#Mainsite
@app.route('/<deviceName>')
def action(deviceName):
global Threadbeenden
global DHTSensor
global Luftfeuchtigkeite
global minimumGruenerBereichLuftfeuchtigkeit
global minimumGruenerBereichTemperatur
global maximalGruenerBereichLuftfeuchtigkeit
global maximalGruenerBereichTemperatur
global Temperature
global ledBluePin
global ledBlueStatus
global ledGreenPin
global ledGreenStatus
global ledRedPin
global ledRedStatus
global labLuftVordergrundFarbe
global labTempVordergrundFarbe
global labLuftHintergrundFarbe
global labTempHintergrundFarbe
global templateData
global isRunning
global isBiggerMax
global isLowerMin
global isLBiggerMax
global isLLowerMin
if deviceName == 'start':
isRunning = True
buttonStopStatus = ButtonEnabeln()
buttonStartStatus = ButtonDisabeln()
Luftfeuchtigkeit, Temperatur = dht.read_retry(DHTSensor, 23)
Luft = str(Luftfeuchtigkeit)
Temp = str(Temperatur)
ledRedStatus, ledBlueStatus, ledGreenStatus, labTempHintergrundFarbe, labTempVordergrundFarbe, labLuftHintergrundFarbe, labLuftVordergrundFarbe, isBiggerMax, isLowerMin, isLBiggerMax, isLLowerMin = Farbe(Temperatur, Luftfeuchtigkeit)
Luftfeuchtigkeite = Luft
Temperature = Temp
templateData = {
'ledRed' : ledRedStatus,
'ledBlue' : ledBlueStatus,
'ledGreen' : ledGreenStatus,
'buttonStart' : buttonStartStatus,
'buttonStop' : buttonStopStatus,
'temperature' : Temperature,
'luftfeuchtigkeite' : Luftfeuchtigkeite,
'MinTemp' : minimumGruenerBereichTemperatur,
'MaxTemp' : maximalGruenerBereichTemperatur,
'MinHumi' : minimumGruenerBereichLuftfeuchtigkeit,
'MaxHumi' : maximalGruenerBereichLuftfeuchtigkeit,
'isRunning' : isRunning,
'isTempBiggerMax' : isBiggerMax,
'isTempLowerMin' : isLowerMin,
'isLuftBiggerMax' : isLBiggerMax,
'isLuftLowerMin' : isLLowerMin
}
render_template('index.html', title='Home', **templateData)
if deviceName == 'stop':
isRunning = False
Threadbeenden = True
ledRedStatus = 0
ledBlueStatus = 0
ledGreenStatus = 0
buttonStartStatus = ButtonEnabeln()
buttonStopStatus = ButtonDisabeln()
Temperatur = '--'
Luftfeuchtigkeit = ''
labLuftHintergrundFarbe = 'WHITE'
labLuftVordergrundFarbe = 'BLACK'
labTempHintergrundFarbe = 'WHITE'
labTempVordergrundFarbe = 'BLACK'
GPIO.output(ledGreenPin, 0)
GPIO.output(ledBluePin, 0)
GPIO.output(ledRedPin, 0)
templateData = {
'ledRed' : ledRedStatus,
'ledBlue' : ledBlueStatus,
'ledGreen' : ledGreenStatus,
'buttonStart' : buttonStartStatus,
'buttonStop' : buttonStopStatus,
'temperature' : Temperature,
'luftfeuchtigkeite' : Luftfeuchtigkeite,
'MinTemp' : minimumGruenerBereichTemperatur,
'MaxTemp' : maximalGruenerBereichTemperatur,
'MinHumi' : minimumGruenerBereichLuftfeuchtigkeit,
'MaxHumi' : maximalGruenerBereichLuftfeuchtigkeit,
'isRunning' : isRunning,
'isTempBiggerMax' : isBiggerMax,
'isTempLowerMin' : isLowerMin,
'isLuftBiggerMax' : isLBiggerMax,
'isLuftLowerMin' : isLLowerMin
}
return render_template('index.html', title='Home', **templateData)
return render_template('index.html', title='Home', **templateData)
def Farbe(Temperatur, Luftfeuchtigkeit):
global minimumGruenerBereichLuftfeuchtigkeit
global minimumGruenerBereichTemperatur
global maximalGruenerBereichLuftfeuchtigkeit
global maximalGruenerBereichTemperatur
global labLuftHintergrundFarbe
global labLuftVordergrundFarbe
global labTempHintergrundFarbe
global labTempVordergrundFarbe
global isRunning
global isBiggerMax
global isLowerMin
global isLBiggerMax
global isLLowerMin
if Temperatur is not None and Luftfeuchtigkeit is not None:
print("Hallo")
if int(float(Temperatur)) < int(minimumGruenerBereichTemperatur):
labTempHintergrundFarbe = 'BLUE'
labTempVordergrundFarbe = 'WHITE'
GPIO.output(ledGreenPin, 0)
ledGreenStatus = 0
GPIO.output(ledBluePin, 1)
ledBlueStatus = 1
GPIO.output(ledRedPin, 0)
ledRedStatus = 0
isBiggerMax = False
isLowerMin = True
elif (int(float(Temperatur)) >= int(minimumGruenerBereichTemperatur)) and (int(float(Temperatur)) <= int(maximalGruenerBereichTemperatur)):
labTempHintergrundFarbe = 'GREEN'
labTempVordergrundFarbe = 'WHITE'
GPIO.output(ledGreenPin, 1)
ledGreenStatus = 1
GPIO.output(ledBluePin, 0)
ledBlueStatus = 0
GPIO.output(ledRedPin, 0)
ledRedStatus = 0
isBiggerMax = False
isLowerMin = False
else:
labTempHintergrundFarbe = 'RED'
labTempVordergrundFarbe = 'WHITE'
GPIO.output(ledGreenPin, 0)
ledGreenStatus = 0
GPIO.output(ledBluePin, 0)
ledBlueStatus = 0
GPIO.output(ledRedPin, 1)
ledRedStatus = 1
isBiggerMax = True
isLowerMin = False
if int(float(Luftfeuchtigkeit)) < int(minimumGruenerBereichLuftfeuchtigkeit):
labLuftHintergrundFarbe = 'BLUE'
labLuftVordergrundFarbe = 'WHITE'
isLBiggerMax = False
isLLowerMin = True
elif (int(float(Luftfeuchtigkeit)) >= int(minimumGruenerBereichLuftfeuchtigkeit)) and (int(float(Luftfeuchtigkeit)) <= int(maximalGruenerBereichLuftfeuchtigkeit)):
labLuftHintergrundFarbe = 'GREEN'
labLuftVordergrundFarbe = 'WHITE'
isLBiggerMax = False
isLLowerMin = False
else:
labLuftHintergrundFarbe = 'RED'
labLuftVordergrundFarbe = 'WHITE'
isLBiggerMax = True
isLLowerMin = False
return ledRedStatus, ledBlueStatus, ledGreenStatus, labTempHintergrundFarbe, labTempVordergrundFarbe, labLuftHintergrundFarbe, labLuftVordergrundFarbe, isBiggerMax, isLowerMin, isLBiggerMax, isLLowerMin
def ButtonEnabeln():
return 'active'
def ButtonDisabeln():
return 'disable'
@app.route('/<a>', methods=['POST'])
def speichern(a):
#savebutton clicked event
@app.route('/', methods=['POST'])
def save():
#savebutton clicked event
解决方案
您不能通过 jinja 使用 python 进行客户端处理。模板在服务器端处理并呈现给客户端浏览器。您将需要使用 JavaScript。
编辑：您可以向服务器发出 AJAX 请求（通过 JavaScript）进行处理，然后更新客户端。
推荐阅读
- excel - 具有多个多维数据集的 Excel 多维数据集值
- vue.js - 如何删除 vue cli 2？
- numbers - 翻译 Sap Fiori 启动板磁贴编号单位
- django - 如何使用 django 使用 datefield 检索数据？
- spring-integration - 如何在 Spring 集成测试中调用通道
- laravel - 拉拉维尔 | 获取列的值
- angular - 如何从 Eclipse Oxygen 中卸载 Angular IDE 插件？
- c++ - C++ - 将 ASCII 字符数组中的可能数值转换为字符的最简单方法
- angular - 如何从控制台执行 Angular 2+ 功能？
- c - C - 从 char[] 创建 const char*