аватар question@mail.ru · 01.01.1970 03:00

Динамическое обновление данных на странице

Есть простой проект python flask, стоящий на raspberry. Я считываю температуру и влажность с датчика, и вывожу их на boostrap страничку. Все выводится отлично, но приходится обновлять страничку, чтобы данные обновлялись. Подскажите как сделать, чтобы температура и влажность обновлялись динамически?

Код python:

from flask import *from main_my import *app = Flask(__name__)pump_sost = None@app.route('/')@app.route('/<name>')  def main(name=None):  humidity = humidityPi()  temperature = tempPi()  global pump_sost  hid = {'hid': humidity}  temp = {'temp': temperature}  print(temp)  if name == 'pomp1':    rely(0x15, 13, 0x1)    pump_sost = 'Включен'  elif name == 'pomp2':    rely(0x15, 13, 0x0)    pump_sost = 'Выключен'pumpSost = {'pumpSost': pump_sost}led_val = '100'led(led_val)retu render_template(""index.html"", title='My Ferma', pumpSost=pumpSost, hid=hid, temp=temp, name=name,)if __name__ == '__main__':app.run(host='localhost', port=9090)

Блок bootstrap где вывожу данные:

<div class=""jumbotron"" style=""margin-top: 10px"">        <h1 class=""display-4"">Моя ферма</h1>        <p class=""lead"">Это простой пример блока с компонентом в стиле jumbotron для привлечения дополнительного внимания к содержанию или информации.</p>        <hr class=""my-4"">        <p class=""display-4"">Темпертура: {{ temp.temp }}<br>Влажность: {{ hid.hid }}%</p>        <p class=""lead"">            <a class=""btn btn-primary btn-lg"" href=""http://localhost:9090/"" role=""button"">Обновить</a>        </p>        <span id=""doc_time"">         Дата и время        </span>    </div>

UPD: Нашел пример Ajax Request

Добавил метод Get:

@app.route('/<name>', methods= ['GET'])

Где bootstrap добавил скрипт:

function update_values() {        $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};        $.getJSON($SCRIPT_ROOT+""/<name>"",            function(data) {                $(""#temp"").text(data.temp+"" %"")                $(""#hid"").text(data.hid+"" %"")            });    }

Но не обновляет, bootstrap разметку оставил как было, наверное там тоже нужно сослаться на функцию?

аватар answer@mail.ru · 01.01.1970 03:00

Получилось сделать, оставлю ответ, может кому-то тоже поможет.

Функция:

 <script>   setInterval(function()   {   $('#temp').load(document.URL +  ' #temp');   $('#hid').load(document.URL +  ' #hid');   }, 1000) </script>

Блок bootstrap:

<div class=""jumbotron"" style=""margin-top: 10px"">    <h1 class=""display-4"">Моя ферма</h1>    <p class=""lead"">Текст</p>    <hr class=""my-4"">    <div id='temp'>Температура: {{ temp.temp }}</div>    <br>    <div id='hid'>Влажность: {{ hid.hid}}</div>    <p class=""lead"">    <a class=""btn btn-primary btn-lg"" href=""http://localhost:9090/""     role=""button"">Обновить</a>    </p>     </div>

#updated!

Последние

Похожие