python在HTML UI中实时显示变量

Question

我构建了一个 Python 程序，它记录来自 Arduino 电位器的输入并将其显示到 Python 控制台中。我现在正在构建一个更好的输出位置作为本地 HTML 文件，并正在寻找有关如何在已经构建的 HTML 页面上执行此类操作的建议，并让它在 Arduino 接收输入时实时更新页面。下面是我想在页面上显示的主要 Python 代码示例：

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)

HTML 页面已经构建，但是它的“代码”很长，我认为这并不重要，因为大多数 HTML 页面都遵循相同的基本结构。忽略我没用的 if/else 语句。我稍后会用它来做点什么。

您建议如何在我的 HTML 页面上实时打印变量 x_value、y_value 和 button_click？我希望它也替换以前的输出，而不是生成无限的输出流，并在程序运行完成时清除输出。我的一些想法可能是创建画布或使用某种 JS 代码，但我已经多年没有使用 JavaScript。我的整个项目都是本地的，如果有帮助的话，我的计算机将保持本地。提前谢谢！

Answer 1

使用烧瓶。您可以在几行内设置应用程序并在几分钟内完成。 一旦你有了一个烧瓶应用程序，你就可以使用 javascript 不断更新你的数据。

from flask import Flask

app = Flask(__name__)

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

在 JavaScript 方面，您可以调用 ajax 并每秒获取值：

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