0

I have this code that fetches values from some open API and shows air quality in an html using flask. I need the values to refresh every 5-10 seconds or so.

I used threading to return the value every 5 seconds, but it still does not seem to update. How would I update the value both in the script and in the html file?

In general, if I call a variable, does it work all the way back to the beginning and recalls all other functions and variables that are linked to it?

I'm just starting with python and web development, so this is confusing.

import json
import requests
from flask import Flask, render_template
import threading

station_name = '장량동'
gov_api_key = 'my_personal_key'
microdust_req_url = 'http://openapi.airkorea.or.kr/openapi/services/rest/ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty?stationName=%s&dataTerm=month&pageNo=1&numOfRows=10&ServiceKey=%s&ver=1.3&_returnType=json' %(station_name, gov_api_key)

dustdatatext = requests.get(microdust_req_url).text

dust_data = json.loads(dustdatatext)
my_city_data = dust_data['list'][0]


#Comprehensive Air-quality Index
cai = my_city_data['khaiValue']

def regular_run():
  threading.Timer(5.0, regular_run).start()
  return cai

#Flask webapp starts here
app = Flask(__name__)

@app.route('/')

def home():
    return render_template('AQW.html', web_cai=cai)

if __name__=="__main__":
    app.run(host='0.0.0.0')

Here is the content of the HTML file. I edited both files to post them here to get rid of redundant stuff since it does not add to the question.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Air Quality Widget</title>
<meta http-equiv="refresh" content="30" >
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Teko:700');

    .font-roboto {
        font-family: 'Roboto', sans-serif;
    }
  .font-teko {
    font-family: 'Teko', sans-serif;  
  }
  .good {
    background-color: #0000FF   
  }
  .moderate {
    background-color: green
  }
  .bad {
    background-color: yellow
  }
  .verybad {
    background-color: #FF0000
  }
  .padding-bottom {
    padding-bottom: 6px;
  }
</style>
</head>

<body>

<div class="container-fluid font-roboto">
  <div class="row justify-content-xl-center text-light">
   <div class="col col-xl-5 col-1"></div>

    <div class="col col-xl-2 col-10">
        <div class="text-center padding-bottom">AIR QUALITY</div>
        <div class= "text-center font-teko"> <!-- CAI number -->
            <span class="display-1 {{web_background}}"> 
            {{web_cai}}
            </span>
    </div>    
   </div> 
</div> 
</body>
</html>
user11303913
  • 11
  • 2
  • Please post the contents (specially any javascript) of AQW.html . There should be code in that html file to poll for updated data. You will also need to add a REST function in your python code to forward the latest data to the html page when it polls – Adnan S May 11 '19 at 04:39
  • @AdnanS thanks, I did not use any javascript, just the {{}} to pull the variables from the python script to the html. – user11303913 May 11 '19 at 12:11
  • This question is similar to yours and shows to update a page with new data periodically - https://stackoverflow.com/questions/15721679/update-and-render-a-value-from-flask-periodically – Adnan S May 11 '19 at 16:41

0 Answers0