Not shure if this is a node red question or html. But I am trying to send data to a webpage when an update occurs it is working as is but "document.getElementById" will only pull one value at a time and the other values will post as "undefined". I have tried "document.querySelectorAll('#id2, #id3, #id5');",
but I havent had any luck with that either. Any help would be appreciated thanks..
[
{
"id": "fd423f74.74bc2",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": ""
},
{
"id": "5c7d5f33.5ce36",
"type": "websocket out",
"z": "fd423f74.74bc2",
"name": "",
"server": "3863b2b9.06f79e",
"client": "",
"x": 620,
"y": 580,
"wires":
},
{
"id": "e4188d00.288c9",
"type": "http response",
"z": "fd423f74.74bc2",
"name": "",
"x": 1170,
"y": 120,
"wires":
},
{
"id": "23313337.8648dc",
"type": "http in",
"z": "fd423f74.74bc2",
"name": "",
"url": "/simple",
"method": "get",
"swaggerDoc": "",
"x": 1170,
"y": 40,
"wires": [
[
"bf7bfef0.e4cab"
]
]
},
{
"id": "bf7bfef0.e4cab",
"type": "template",
"z": "fd423f74.74bc2",
"name": "Simple Web Page",
"field": "payload",
"fieldType": "msg",
"format": "html",
"syntax": "mustache",
"template": "\n\n \n Simple Live Display\n <script type="text/javascript">\n var ws;\n var wsUri = "ws:";\n var loc = window.location;\n console.log(loc);\n if (loc.protocol === "https:") { wsUri = "wss:"; }\n // This needs to point to the web socket in the Node-RED flow\n // ... in this case it's ws/simple\n wsUri += "//" + loc.host + loc.pathname.replace("simple","ws/simple");\n\n function wsConnect() {\n console.log("connect",wsUri);\n ws = new WebSocket(wsUri);\n // either uncomment this for a building list of messages\n ws.onmessage = function(msg) {\n var line = ""; // or uncomment this to overwrite the existing message\n // parse the incoming message as a JSON object\n var data = JSON.parse(msg.data);\n //console.log(data);\n // build the output from the topic and payload parts of the object\n line += "
SAT "+data.SAT+"
";\n line += "OAT "+data.OAT+"
";\n line += "OAH "+data.OAH+"
";\n line += "SAT "+data.SAT+"
";\n line += "RAT "+data.RAT+"
";\n line += "Space T "+data.Space_T+"
";\n line += "Space H "+data.Space_H+"
";\n line += "Attic T "+data.Attic_T+"
";\n line += "Gas "+data.Gas+"
";\n line += "Compressor "+data.Compressor+"
";\n line += "Heat Stage1 "+data.Heat_Stage_1+"
";\n line += "Attic T SP "+data.Attic_T_SP+"
";\n line += "Space T SP "+data.Space_T_SP+"
";\n line += "Evap Fan "+data.Evap_Fan+"
";\n line += "Attic Fan "+data.Attic_Fan+"
";\n // replace the messages div with the new "line"\n document.getElementById('SAT').innerHTML = "Supply Air Temp   =  "+data.SAT;\n document.getElementById('OAT').innerHTML = "Outside Air Temp   =  "+data.OAT;\n document.getElementById('OAH').innerHTML = "Outside Air Humidity   =  "+ data.OAH;\n document.getElementById('RAT').innerHTML = "Return Air Temp   =  "+ data.RAT;\n document.getElementById('Space T').innerHTML = "Space Temp   =  "+ data.Space_T;\n document.getElementById('Space H').innerHTML = "Space Humidity   =  "+ data.Space_H;\n document.getElementById('Attic T').innerHTML = "Attic Temp   =  "+ data.Attic_T;\n document.getElementById('Gas').innerHTML = "Gas Heat   =  "+ data.Gas;\n document.getElementById('Compressor').innerHTML = "Compressor   =  "+ data.Compressor;\n document.getElementById('Heat Stage1').innerHTML = "Reversing Valve   =  "+ data.Heat_Stage_1;\n document.getElementById('Attic T SP').innerHTML = "Attic Temp SP   =  "+ data.Attic_T_SP;\n document.getElementById('Space T SP').innerHTML = "Space Temp SP   =  "+ data.Space_T_SP;\n document.getElementById('Evap Fan').innerHTML = "Evap Fan   =  "+ data.Evap_Fan;\n document.getElementById('Attic Fan').innerHTML = "Attic Fan   =  "+ data.Attic_Fan;\n \n }\n ws.onopen = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = "connected";\n //ws.send("Open for data");\n console.log("connected");\n }\n ws.onclose = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = "not connected";\n // in case of lost connection tries to reconnect every 3 secs\n setTimeout(wsConnect,3000);\n }\n }\n \n\n \n <body onload="wsConnect();" onunload="ws.disconnect();">\n <font face="Arial">\nSimple Live Display
\n <div id="OAT">Outside Air Temp\n <div id="OAH">Outside Air Humidity\n <div id="SAT">Supply Air Temp\n <div id="RAT">Return Air Temp\n <div id="Space T">Space Temp\n <div id="Space H">Space Humidity\n <div id="Attic T">Attic Temp\n <div id="Gas">Gas Heat\n <div id="Compressor">Compressor\n <div id="Heat Stage1">Reversing Valve\n <div id="Attic T SP">Attic Temp SP\n <div id="Space T SP">Space Temp SP\n <div id="Evap Fan">Evap Fan\n <div id="Attic Fan">Attic Fan\n <div id="status">unknown\n \n \n\n","x": 1170,
"y": 80,
"wires": [
[
"e4188d00.288c9"
]
]
},
{
"id": "2db21164.c3733e",
"type": "json",
"z": "fd423f74.74bc2",
"name": "",
"property": "payload",
"action": "",
"pretty": false,
"x": 390,
"y": 180,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "9d70ea1f.d528d8",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "SAT",
"label": "SAT",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 5,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "SAT",
"min": 0,
"max": "100",
"step": 1,
"x": 90,
"y": 380,
"wires": [
[
"86620492.5e9a48"
]
]
},
{
"id": "fbcc6e96.21cee",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "RAT",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 6,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 90,
"y": 440,
"wires": [
[
"3ef077e8.01d2c8"
]
]
},
{
"id": "e446c106.10a71",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "OAT",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 7,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 90,
"y": 500,
"wires": [
[
"ec873096.77c7f"
]
]
},
{
"id": "6d4fd8e6.1da138",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "OAH",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 8,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 90,
"y": 560,
"wires": [
[
"21d74047.ea8a2"
]
]
},
{
"id": "7bf277e6.7a62b8",
"type": "ui_switch",
"z": "fd423f74.74bc2",
"name": "",
"label": "Attic Fan",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 10,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "{"Attic_Fan":"On"}",
"onvalueType": "json",
"onicon": "",
"oncolor": "",
"offvalue": "{"Attic_Fan":"Off"}",
"offvalueType": "json",
"officon": "",
"offcolor": "",
"x": 80,
"y": 300,
"wires": [
[
"2db21164.c3733e"
]
]
},
{
"id": "4aa368b8.f2f688",
"type": "ui_switch",
"z": "fd423f74.74bc2",
"name": "",
"label": "Gas",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 11,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "{"Gas":"The Gas is On"}",
"onvalueType": "json",
"onicon": "",
"oncolor": "",
"offvalue": "{"Gas":"The Gas is Off"}",
"offvalueType": "json",
"officon": "",
"offcolor": "",
"x": 70,
"y": 180,
"wires": [
[
"2db21164.c3733e"
]
]
},
{
"id": "8433756b.40b198",
"type": "ui_switch",
"z": "fd423f74.74bc2",
"name": "",
"label": "Compressor",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 9,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "{"Compressor":"On"}",
"onvalueType": "json",
"onicon": "",
"oncolor": "",
"offvalue": "{"Compressor":"Off"}",
"offvalueType": "json",
"officon": "",
"offcolor": "",
"x": 90,
"y": 60,
"wires": [
[
"2db21164.c3733e"
]
]
},
{
"id": "86620492.5e9a48",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"SAT": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 270,
"y": 380,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "21d74047.ea8a2",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"OAH": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 270,
"y": 560,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "ec873096.77c7f",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"OAT": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 270,
"y": 500,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "3ef077e8.01d2c8",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"RAT": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 270,
"y": 440,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "34caf7ce.46e818",
"type": "ui_switch",
"z": "fd423f74.74bc2",
"name": "",
"label": "Heat Stage 1 (RV)",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 11,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "{"Heat_Stage_1":"Heat"}",
"onvalueType": "json",
"onicon": "",
"oncolor": "",
"offvalue": "{"Heat_Stage_1":"Cool"}",
"offvalueType": "json",
"officon": "",
"offcolor": "",
"x": 110,
"y": 120,
"wires": [
[
"2db21164.c3733e"
]
]
},
{
"id": "b419ad7c.9236d",
"type": "ui_switch",
"z": "fd423f74.74bc2",
"name": "",
"label": "Evap Fan",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 10,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "{"Evap_Fan":"On"}",
"onvalueType": "json",
"onicon": "",
"oncolor": "",
"offvalue": "{"Evap_Fan":"Off"}",
"offvalueType": "json",
"officon": "",
"offcolor": "",
"x": 80,
"y": 240,
"wires": [
[
"2db21164.c3733e"
]
]
},
{
"id": "7c2ee3fa.7fc32c",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "Attic_T_SP",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 8,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 110,
"y": 800,
"wires": [
[
"f950758d.67b268"
]
]
},
{
"id": "367247fd.5468a8",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "Attic_T",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 7,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 100,
"y": 740,
"wires": [
[
"c219628d.d85e"
]
]
},
{
"id": "4b959404.4694ac",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "Space_T_SP",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 6,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 110,
"y": 680,
"wires": [
[
"fdf989b6.50d728"
]
]
},
{
"id": "5ff36044.c9275",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "Space_T",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 5,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 100,
"y": 620,
"wires": [
[
"792d92db.1dabdc"
]
]
},
{
"id": "792d92db.1dabdc",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"Space_T": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 270,
"y": 620,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "fdf989b6.50d728",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"Space_T_SP": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 290,
"y": 680,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "c219628d.d85e",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"Attic_T": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 290,
"y": 740,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "f950758d.67b268",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"Attic_T_SP": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 310,
"y": 800,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "ae21864.4b43d78",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"Space_H": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 310,
"y": 860,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "186809d8.9bd3b6",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "Space_H",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 8,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 100,
"y": 860,
"wires": [
[
"ae21864.4b43d78"
]
]
},
{
"id": "3863b2b9.06f79e",
"type": "websocket-listener",
"z": "fd423f74.74bc2",
"path": "/ws/simple",
"wholemsg": "false"
},
{
"id": "1ed18b69.46ba65",
"type": "ui_group",
"z": "",
"name": "HVAC",
"tab": "9038450b.0c1c68",
"order": 1,
"disp": true,
"width": 30,
"collapse": false
},
{
"id": "9038450b.0c1c68",
"type": "ui_tab",
"z": "",
"name": "AC",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
Preformatted text
