Node-RED как получить msg.payload в шаблоне HTML - PullRequest
Новая
       18

Node-RED как получить msg.payload в шаблоне HTML

0 голосов
/ 06 апреля 2020

flow image

ПРИМЕЧАНИЕ: за ответ @hardillb я исправил приведенный выше поток и разместил правый ниже. Заранее благодарю за любую помощь. Я новичок в HTML и должен использовать его в Node-RED. У меня есть простой поток (показано в ссылке на изображение выше). Я вставляю сообщение с образцами точек линейного графика в полезной нагрузке. Я хочу получить сообщение в сценарии HTML в узле шаблона, который затем отображает полученные данные msg.payload на линейном графике в браузере. Скрипт HTML работает нормально, если я генерирую случайный граф изнутри скрипта, но мне не удается получить скрипт для получения msg.payload. Я пробовал что-то похожее на Как отправить msg.payload с узла функции на узел шаблона

Сценарий HTML в форме волны HTML приведен ниже. Я указал TODO, что я пытался и не работал. 

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

//define line graph options for CanvasJS line graph
var options =  {
	exportEnabled: true,
	animationEnabled: true,
	animationDuration: 200,
	theme: "light2",
	title :{
		text: "Simple Line Chart"
	},
	axisY: {
		includeZero: false
	},
	data: [{
		type: "spline",
		indexLabelFontSize: 16,
		dataPoints: []  //this will be loaded with "y" values from msg.payload
	}]
};

//TODO not working ---------------------
//load WaveData from msg.payload 
var WaveData = [];
var createWaveData = function () {
    WaveData = {{{payload}}};   //TODO fix, not working
    //WaveData = [1, 2, 3, 4, 5, 4, 3, 2, 1]; //debug code, works fine, sample data is plotted on graph
}
//--------------------------------------

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();

};

var updateInterval = 2000;
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>
</html>

Это ПРАВИЛЬНЫЙ поток на ответ @hardillb.

The corrected flow per hardillb answer

1 Ответ

0 голосов
/ 07 апреля 2020

Узлы Node-RED действуют только на одно сообщение одновременно.

Узел http-in выдаст сообщение, которое будет обновлено узлом шаблона и затем возвращено узлом http-out. Узлы http должны действовать как пара, при этом одно входное сообщение ведет непосредственно к ответу http браузеру, который сделал запрос.

Узел шаблона не содержит состояния, он просто отображает шаблон с данными из входящего messages.

Таким образом, наличие узла ввода не принесет ничего полезного, потому что после того, как узел шаблона отобразит любую информацию в сообщении, узел http-out будет отбрасывать его, потому что он не пришел от узла http-in.

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

Затем в узле шаблона вам нужно что-то вроде 

var waveData = {{payload}};

Возможно, вам потребуется 3 набора фигурных скобок, чтобы остановить экранирование массива HTML, проверьте информационную боковую панель для узла шаблона

Редактировать:

На самом деле, вернувшись назад, посмотрите на do c для опять же, шаблонный узел не нуждается в функциональном узле, чтобы использовать контекстную переменную в шаблонном узле. Это означает, что должно работать следующее: 

var waveData = {{flow.waveData}}

enter image description here

...