Чтение значений со страницы в JavaScript

Question

Я новичок в JavaScript и HTML в целом, поэтому у меня могут быть некоторые глупые вопросы...

Я использую Flask для отображения графика с некоторыми значениями от датчика на Raspberry pi3. Датчик подключен через последовательный порт. Я хочу передать значения, которые я читаю из последовательного порта, в index.html, это шаблон, в котором у меня есть код JavaScript для графа (созданный с помощью Rgraph).

Это main.py с колбой и чтением порта.

from flask import Flask,render_template
import serial

app = Flask(__name__)
ser = serial.Serial('/dev/ttyACM0', 9600)

@app.route('/')
def hello_world():
return render_template("index.html")

#here I read one value from the serial port
@app.route('/getdata')
def test():
    return ser.readline()

if __name__ == '__main__':
    app.run()

Шаблон index.html, который я пытаюсь использовать, находится здесь (на github). Javascript генерирует некоторое случайное число (от 66 до 72), но я хочу, чтобы он вместо этого считывал число со страницы '/getdata' и помещал его в массив данных.

Я думал об использовании методов GET-POST, но это довольно сложно. Может быть, есть более простое решение? Или, может быть (но я думаю, что это невозможно), я мог бы прочитать последовательный порт прямо из JavaScript? Или, может быть, я все делаю неправильно и мне нужно выбросить все из окна?

Answer 1

После того, как фляга представит шаблон, вы ничего не сможете сделать. На самом деле он не поддерживает push-запросы (по крайней мере, насколько я могу судить), но выполнить Ajax-запрос не сложно

ajax_params = {
        url: '/getdata',
        type: 'GET',
        cache: false,
        dataType: 'json',
        error: function(jqXHR, status, error) {
            console.log("Ajax error " + error);
            console.log("status " + status);
            console.log(jqXHR);
        },
        success: datacb
    };

function datacb (resp, status, jqXHR) {
     /* update code here */
     console.log(resp);

     /* you may want to sleep here */

     $.ajax(ajax_params);
}

$.ajax(ajax_params);

Answer 2

Если вы не хотите обновить данные без перезагрузки страницы index.html, вы можете попробовать что-то вроде следующего:

from flask import Flask,render_template
import serial

app = Flask(__name__)
ser = serial.Serial('/dev/ttyACM0', 9600)

@app.route('/')
def hello_world():
    servalue = test();
    return render_template("index.html", value=servalue)

#here I read one value from the serial port
@app.route('/getdata')
def test():
    return ser.readline()

if __name__ == '__main__':
    app.run()

Если вы хотите обновить данные без перезагрузки страницы индекса, вам, вероятно, придется использовать AJAX, как предложено @debhand.