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

Dynamic data update on the page

There is a simple Python Flask project standing on Raspberry. I read the temperature and humidity from the sensor, and take them to the Boostrap page. Everything is excreted perfectly, but you have to update the page so that the data is updated. Tell me how to make the temperature and humidity be updated dynamically?

Python code:

   from  FLASK  Import  *  from  main_my  Import  *app = flask (__ name __) pump_sost =  none   @app.rute (  ''  )   @app.route (  '/& lt; name & gt;'  )    def   main  ( name =  none  ):  humidity = humiditypi ()  Temperature ()   global  pump_Sost hid = { 'HID' : Humidity}  Temp = { 'TEMP' : TEMPERATURA}   print  if  name ==  'pomp1' :  rely ( 0x15 ,  13 ,  0x1 )  pump_sost =    elif  name == :  red ( 0x15 ,  13 ,  0x0 )  pump_sost =  '"Tued off'  pumpsost = { 'pumpsost' : pump_sost} led_val =  '' 100 ' led (ld_val)   retu  render_template ( "" index.html "" , title =  'my frama' , pumpsost = pumpsost, hid = hid, tamp = temp, name = name)   if  __name__ ==  '' __ main __ ': app.ru (host = ' localhost ', port =  9090 )     

Bootstrap Block Where I display the data:

  & lt; div  class  =  style = " "margin-top: 10px" ""  & gt;  & lt; h1  class  =  & gt; my farm & lt;/h1 & gt;  & lt; p  class  =  "" "LEAD" " & gt; this is a simple example of a block with a component in the style of jumbotron to attract additional attention to the content or information. & lt;/p & gt;  & lt; hr  =  "My-4" " & gt;  & lt; p  class  =  & gt; Tempenship: {TEMP.TEMP }} & lt; Br & gt; Humidity: {{hid.hid}%& lt;/p & gt;  & lt; p  class  =  "lead" " & gt;  & lt; a  class  =  href =  "" http: // localhost: 9090/"    ROLE =  & gt; update & lt;/a & gt;  & lt;/p & gt;  & lt; span  id  =  "" doc_time ""  & gt;  and time and dimerin & lt;/span & gt;  & lt;/div & gt;     

found an example of ajax Request

added the Get method:

  @app.rute ( '/& lt; name & gt;' , methods = [ 'get' ] )      

where the bootstrap added:

function update_values ​​() { $ script_root = {{request.script_root | safe}}; ; $ .getjson ($ script_root+ ""/& lt; name & gt; "" , function (data) { $ ( ""#TEMP "" ). Text (Data.temp+ "" %"" ) }); }

but does not update, Bootstrap left the marking as it was, probably you also need to refer to the function?

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

It tued out to be made, I will leave the answer, maybe someone will help someone too.

function:

  & lt; script & gt; ; ; setinterval (function ()  { $ ( '#TEMP' );  $ ( ' #hid' ). Load (doCumb & lt;/script & gt;     

Bootstrap:

  & Lt; Div  class  =  style = " "margin-top: 10px" " & lt; r1  class  =  & gt; my farm & lt;/h1 & gt;  & lt; p  class  =  "" "LEAD" " & gt; text & lt;/p & gt;  & lt; hr  class  = " My-4 ""  & gt;  & lt; div  id  =  'TEMP'  & gt; temperature: {TEMP.TEMP}} & LT;/DIV & GT;  & LT; BR & GT;  & LT; Div  id  =  '"hid'  & gt; humidity: {hid.hid}} & lt;/div & gt;  & lt; p  class  =  "" LEAD ""  & gt;  & lt; a  class  =  href =  "" http: // localhost: 9090/""   role =  & gt; update & lt;/a & gt;  & lt;/p & gt;      & lt;/div & gt;     

#Updated!

Latest

Similar