Node-red, как получить переменные контекста потока внутри скрипта HTML - PullRequest
Новая
       24

Node-red, как получить переменные контекста потока внутри скрипта HTML

0 голосов
/ 31 марта 2020

Я довольно новичок в Node-red и HTML, надеюсь, я смогу получить помощь на этом форуме. У меня есть HTML скрипт в основном узле шаблона. По запросу GET скрипт выводит линейный график из массива данных. Данные сохраняются в массиве контекста потока var другим узлом, и мне нужен узел сценария HTML, чтобы прочитать эти данные и построить их. Все отлично работает с массивом смоделированных данных, который я генерирую «внутри» скрипта HTML, но я не мог понять, как получить фактические данные из контекста потока var (см., Где находится TODO). Заранее благодарю за любую помощь. 

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var options =  {
    exportEnabled: true,
    animationEnabled: true,
    animationDuration: 200,
    theme: "light2",
    title :{
        text: "Simple Line Chart"
    },
    axisY: {
        includeZero: false
    },
    data: [{
        type: "spline",
        indexLabelFontSize: 16,
        dataPoints: []
    }]
};

var xVal = 0;
var yVal = 100;
var updateInterval = 2000;

var WaveData = [];
// TODO temporary random data
var createWaveData = function () {
    var srcData = flow.get('Pressure') || [];
    WaveData = srcData;
/*  WaveData = [];
    var count = 50;
    for ( var j = 0; j <count; j++) {
        yVal = yVal + Math.round(5 + Math.random() *(-5-5));
        WaveData.push(yVal);
    }*/
}

// when plotting next WaveData, let it start from x = 0
var updateChart = function (cnt) {
    createWaveData();
    options.data[0].dataPoints = [];
    for (var j = 0; j < cnt; j++) { 
        yVal = WaveData[j];
        options.data[0].dataPoints.push({y: yVal});
    }
    (new CanvasJS.Chart("chartContainer", options)).render();

};

setInterval(function(){ updateChart(WaveData.length) }, updateInterval); 

}

</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width:100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
</body>

1 Ответ

0 голосов
/ 31 марта 2020

Короткий ответ: нет. Прямой доступ к контексту Node-RED из вашей страницы невозможен.

Но вы можете получить к нему косвенный доступ, у вас есть 2 варианта:

  1. Использовать шаблон узел, чтобы включить текущее состояние переменной контекста на странице, когда она загружается через узлы http-in / http-reponse. Это даст вам снимок данных, но не будет обновляться с течением времени.

  2. Установите соединение обратно на Node-RED, чтобы обновить sh значение. Есть два разных подхода к этому.

    i. Добавьте второй поток http-in / http-response, который возвращает содержимое переменной контекста, и выполняйте вызов в стиле AJAX каждый раз, когда вы хотите обновить sh диаграмму.

    ii. Используйте узел websocket-out, чтобы установить соединение websocket со страницей, которое может затем отправлять живые обновления на страницу при каждом обновлении контекстной переменной. Это означает, что на странице всегда будут использоваться самые последние данные.

Сочетание обоих этих подходов будет означать, что вы получите исторические данные при первой загрузке страницы и обновлении в реальном времени.

Вам также следует взглянуть на коллекцию node-red-dashboard , которая может сделать это за вас.

...