python show variable in HTML UI in real time

Question

I built a Python program that records input from an Arduino Potentiometer and displays it into the Python console. I now am building a nicer output location as a local HTML file and am looking for advice on how I would do such a thing onto an already built HTML page, and have it update the page in real time as the Arduino receives input. Below is an example of my main Python code that I would like to display on the page:

from Arduino import Arduino
import time

board = Arduino("9600")
board.pinMode(2, "INPUT")
board.digitalWrite(2, "HIGH")

while True:
    button_click = board.digitalRead(2)
    if button_click == 1:
        is_button_click = False
    else:
        is_button_click = True
    x_value = board.analogRead(0)
    y_value = board.analogRead(1)
    print("X-Value: " + str(x_value))
    print("Y-Value: " + str(y_value))
    print("Clicked?: " + str(button_click))
    time.sleep(0.25)

The HTML page is already built but the "code" of it is quite long and I figure that it doesn't matter much since most HTML pages follow the same basic structure. Ignore my useless if/else statement. I am going to use that later for something.

How would you recommend printing the variables x_value, y_value, and button_click on my HTML page in real time? I would prefer that it replaces the previous output too rather than generating an infinite stream of outputs, and clears the output when the program is done running. Some ideas I had were maybe creating a canvas or using some sort of JS code but I haven't used JavaScript in years. My entire project is local and will remain local to my computer if that helps. Thank you in advance!

aSaffary · Accepted Answer · 2021-05-10 11:39:50Z

1

use flask. you can setup an app in a few lines and get it done in a few minutes. once you have a flask app, you can constantly update your data using javascript.

from flask import Flask

app = Flask(__name__)

@app.route("/getvalue", methods=['POST'])
def getValue():
    return {"yourValueKey":"your value"}

and in the JavaScript side you could call an ajax and get the value every second:

 $.ajax(
        {url:'getvalue',
        async:false,
        type:'POST',
        success:function(result){
           // show result in your element
           $('#yourValueOutputID').val(result.yourValueKey)
        }
        }
    )

edited May 10, 2021 at 11:39

answered May 10, 2021 at 0:34

aSaffary

88310 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EngineerTaiga Over a year ago

Thank you so much! I don't have enough reputation yet to upvote your answer, but I hope you know that your suggestion is really appreciated! I am brand new to Python and I am still learning about what packages are available for it. Thank you again!

aSaffary Over a year ago

@EngineerTaiga it's ok, just trying to help you don't have to upvote :) you could try electron or eel for local htlm UI too, but I tried them and personally I prefer flask whenever it can be used.

Collectives™ on Stack Overflow

python show variable in HTML UI in real time

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related