Возьмите переменную из файла Python и отобразите во Flask - PullRequest
0 голосов
/ 28 августа 2018

ОК, так что я все еще борюсь с этим, вот мой полный код после использования предложения @DrAgon. У меня есть 3 файла, первый - мой файл Python, который просто получает местное время.

import datetime
import time

now = datetime.datetime.now()

print(now)

Если я настрою этот файл как:

import datetime
import time

while True:
now = datetime.datetime.now()

print(now)
time.sleep(2)

Он обновляется и возвращает мне дату каждые 2 секунды, но когда он импортируется в мой проект колбы, он вступает во владение и просто не загружает веб-страницу.

поэтому я использую первую версию файла, которая получает местное время. Далее у меня есть страница Python фляжка:

from flask import Flask, render_template, request, jsonify
from flask_bootstrap import Bootstrap
import Timereppper

import datetime

now = datetime.datetime.now()

app = Flask(__name__)
Bootstrap(app)

@app.route('/')

def hello():
return render_template('hello.html', myvar= now.second)

@app.route('/currentstatus')

def currentstatus():
return render_template('hello.html', myvar= now.second)

@app.route('/historic')

def historic():
return render_template('historic.html')

@app.route('/data')
def get_data():
mbdata = Timereppper.now()  # Call your code that gets the data here
return jsonify(mbdata)  # And return it as JSON


if __name__ == '__main__':
app.run(host= 'localhost', port=5000, debug=False, threaded=True)

и у меня есть основной файл hello.html с кодом, предложенным @DrAgon внизу. Это возвращает текст в нижней части главной веб-страницы «Новые данные идут сюда», и если я смотрю на lcalhost: 5000 / data, я получаю дату, которая была прочитана в тот момент, когда был впервые запущен колб-сервер. Я хочу, чтобы эта дата обновлялась непрерывно или каждые несколько секунд и отображалась на главной домашней странице сайта. Кто-нибудь может показать мне, где я иду не так. Я прошу прощения, я новичок в колбе.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Vibration Monitor</title>
<meta name="viewport" content="width=device-wi dth, initial-scale=1">
<link href="{{url_for('static', filename='css/bootstrap.min.css')}}" 
rel="stylesheet">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') 
}}">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script>
<script>window.jQuery || document.write('<script src="{{
url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
</head>

<nav class="navbar navbar-expand-lg navbar-light bg-#808080">
<a class="navbar-brand" href= https://www.iotindustries.co.uk>
<img src="/static/img/IOT Industries Logo 1THIN.png" width="300" height="90" 
class="d-inline-block" alt="">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link font-weight-bold" href="/currentstatus">Current 
Status</a>
</li>
<li class="nav-item active">
<a class="nav-link font-weight-bold" href="/historic">Historic</a>
</li>

</ul>
</nav>

<div class="alert alert-secondary" role="alert"></div>

<div class="card-deck" style="width: 42rem;">

<div class="card text-white bg-dark mb-3" style="width: 16rem;">
<img class="card-img-top" src="/static/img/vibes1.png" alt="Vibration 
Image">
<div class="card-body">
<h5 class="card-title">Current vibration level:</h5>
<h1 class="card-text font-weight-bold">15 mA</h1>
<a class="btn btn-success">Acknowledge</a>
</div>
</div>


<div class="card text-white bg-dark mb-3" style="width: 16rem;">
<img class="card-img-top" src="/static/img/timer.svg" alt="Timer Image">
<div class="card-body">
<h5 class="card-title">Estimated days until failure:</h5>
<h1 class="card-text font-weight-bold"> 3 Days {{myvar}} </h1>
<a class="btn btn-info" href="/historic">View Historic</a>
</div>
</div>
</div>

<body>
<div id="myDataDiv">New Data Goes Here</div>
</body>
<script>
var goGetNewData = function() {
$.ajax({
url: '/data',
dataType: 'json',
type: 'get',
success: function(e) {
$('#myDataDiv').html('New Data ' + e);
},
error: function(e) {
$('#myDataDiv').html('Error');
},
});
}
var waitTime = 10;  // 10 seconds
var fetchInterval = window.setInterval(goGetNewData, waitTime*1000);
</script>


</html>

У меня есть файл Python, который постоянно читает регистр Modbus каждые пару секунд, используя функцию Python sleep. (). Это значение регистрируется в базе данных Google FireBase.

Что я хотел бы сделать, это отобразить это значение, считанное из регистра ModBus, на моем веб-сайте Flask. Я просто не знаю, как это сделать. Могу ли я либо:

  1. Получите обновленное значение ModBus из файла Python, передавайте его в MyFlaskApp.py непрерывно или по нажатию кнопки в моем HTML-файле.

  2. Запросите базу данных Firebase и заставьте ее отображать последнее записанное значение либо непрерывно, либо по нажатию кнопки.

Что, если что-то из этого можно сделать, и какой метод будет наилучшим. Кто-нибудь может опубликовать пример того, как я смогу это сделать?

Спасибо

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

Вот один из способов.

Вам необходимо создать 2 маршрута в вашем MyFlaskApp.py

  1. / home - этот маршрут будет отображать HTML-шаблон
  2. / data - этот маршрут вернет JSON (содержащий данные из вашего файла ModBus ИЛИ из запроса Firebase)

(вы можете назвать маршруты как хотите)

В шаблоне HTML, возвращаемом по первому маршруту, вам понадобится div (с идентификатором) для визуализации данных и немного JavaScript для непрерывного получения новых данных.

Тогда просто наведите Ajax GET на конечную точку / data, и вы уже в пути.

<body>
<div id="myDataDiv">New Data Goes Here</div>
</body>
<script>
var goGetNewData = function() {
  $.ajax({
    url: '/data',
    dataType: 'json',
    type: 'get',
    success: function(e) {
       $('#myDataDiv').html('New Data ' + e);
    },
    error: function(e) {
      $('#myDataDiv').html('Error');
    },
  });
}
var waitTime = 10;  // 10 seconds
var fetchInterval = window.setInterval(goGetNewData, waitTime*1000);
</script>

Маршрут / data может выглядеть примерно так.

from flask import jsonify
import Modbusreginfo  # Import your other python code

@app.route('/data')
def get_data():
  mbdata = Modbusreginfo.getModBusData()  # Call your code that gets the data here
  return jsonify(mbdata)  # And return it as JSON
0 голосов
/ 28 августа 2018

Хорошо. Если вы хотите сделать это одним нажатием кнопки, вы можете сделать кнопку частью HTML-формы и отправить ее в ваше приложение для колб:

@app.route('/update')
    def val():
        return render_template("index.html",data=data)

Это сработает, учитывая, что значение, которое вы хотите передать в html, называется данными. Для отображения переданных данных ваш HTML должен выглядеть следующим образом:

<p>{{data}}</p>

Вместо того, чтобы обновлять значение Modbus каждые две секунды, вы можете сделать это только при нажатии кнопки следующим образом:

@app.route('/update')
def val():
   #code to get the value
   return render_template("index.html",data=data)

Таким образом, каждый раз, когда вы нажимаете кнопку формы, чтобы получить новое значение, данные считываются из базы данных. Вместо использования другого файла в качестве импорта и использования даты и времени это позволит убедиться, что ваша программа не только сохраняет память, но и возвращает желаемое значение. В методе now вы должны записать в текстовый файл так:

#get the data
f = open("mod.txt", w+)
f.write(data)
f.close

Затем, когда вы получаете кнопку, нажмите в приложении фляги:

@app.route('/update')
    def val():
        f = open("mod.txt",r)
        data = f.read()
        f.close()
        return render_template("index.html",data=data)

Чтобы убедиться, что другая программа запущена, вы можете сделать это:

if __name__ == '__main__':
    execfile('modbusreginfo.py')
    app.run(host= 'localhost', port=5000, debug=False, threaded=True)

Если вы хотите, чтобы страница перезагружалась каждые 2 секунды, чтобы не было нажатия кнопки, вы можете добавить это в свой html:

<meta http-equiv="Refresh" content="2">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...