如何在另一个线程中运行功能直到按下按钮,然后如何在没有JavaScript的情况下更新该线程中的网页?

时间:2019-09-19 09:27:54

标签: python html flask

我正在建立一个使用GPIO引脚读取和显示温度和湿度的网站。我具有基本功能,但是现在我想当您按下开始按钮无限长地在另一个线程中运行直到您按下停止按钮时会发生什么。每次运行后,应更新网站。我不使用JavaScript,而是使用flask。

这是我的网站的样子。 (请不要注意“如果”)

.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

1 个答案:

答案 0 :(得分:0)

您不能通过jinja使用python进行客户端处理。模板在服务器端进行处理,并呈现给客户端浏览器。您将需要使用JavaScript。

编辑:您可以(通过JavaScript)向服务器发出AJAX请求以进行处理,然后更新客户端。