# How to show analog/digital information in a URL from a PLC via MQTT

**URL:** <https://discourse.nodered.org/t/how-to-show-analog-digital-information-in-a-url-from-a-plc-via-mqtt/24025>\
**Category:** General\
**Created:** [1 April 2020 11:20 UTC](https://discourse.nodered.org/t/how-to-show-analog-digital-information-in-a-url-from-a-plc-via-mqtt/24025 "2020-04-01T11:20:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![qmf](https://avatars.discourse-cdn.com/v4/letter/q/b487fb/32.png) [@qmf](https://discourse.nodered.org/u/qmf)\
**Post date:** [1 April 2020 11:20 UTC](https://discourse.nodered.org/t/how-to-show-analog-digital-information-in-a-url-from-a-plc-via-mqtt/24025/1 "2020-04-01T11:20:01Z")

</div>

Hi everyone,  
First of all, I am brand new in IoT technologies so excuse me if I make a mistake and say something wrong.

I am trying to control inputs and outputs from a PLC via MQTT and get all data in node-red, to send it to a URL: localhost:1880/plc (for example) so that I can manage from the website.  
When I get the data from analog inputs in the URL, I have to refresh the URL everytime to get new information about the input status, and I don't know how to show all information (digital In/digital out/analog in/analog out).

Does anybody know how could I do it?

Thank you so much in advance!

---

<div class="post-metadata">

**Author:** ![qmf](https://avatars.discourse-cdn.com/v4/letter/q/b487fb/32.png) [@qmf](https://discourse.nodered.org/u/qmf)\
**Post date:** [1 April 2020 11:33 UTC](https://discourse.nodered.org/t/how-to-show-analog-digital-information-in-a-url-from-a-plc-via-mqtt/24025/3 "2020-04-01T11:33:31Z")

</div>

This is my project:

```auto
[{"id":"b394f1c9.465ec","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"a9244ba0.6cc368","type":"debug","z":"b394f1c9.465ec","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":610,"y":160,"wires":[]},{"id":"739032d2.cd7b5c","type":"http in","z":"b394f1c9.465ec","name":"/plc","url":"/plc","method":"get","upload":false,"swaggerDoc":"","x":170,"y":280,"wires":[["72356951.90c558"]]},{"id":"72356951.90c558","type":"change","z":"b394f1c9.465ec","name":"change node","rules":[{"t":"set","p":"payload","pt":"msg","to":"mytemp","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":280,"wires":[["c89a095f.ea22a8"]]},{"id":"c8e69d92.bea71","type":"debug","z":"b394f1c9.465ec","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":670,"y":340,"wires":[]},{"id":"c6780ce3.3362b","type":"change","z":"b394f1c9.465ec","name":"change node","rules":[{"t":"set","p":"mytemp","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":160,"wires":[["a9244ba0.6cc368"]]},{"id":"8084b072.bd0b1","type":"http response","z":"b394f1c9.465ec","name":"","statusCode":"","headers":{},"x":690,"y":280,"wires":[]},{"id":"17ff3a17.4f1ce6","type":"mqtt in","z":"b394f1c9.465ec","name":"","topic":"I","qos":"2","datatype":"auto","broker":"b2f50d89.7375f","x":190,"y":160,"wires":[["c6780ce3.3362b"]]},{"id":"c89a095f.ea22a8","type":"template","z":"b394f1c9.465ec","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n<style>\n\n.taula1 {\n\tpadding-bottom: 2em;\n}\n\ntable {\n font-family: arial, sans-serif;\n border-collapse: collapse;\n width: 100%;\n}\n\ntd, th {\n text-align: left;\n padding: 8px;\n}\n\ntr:nth-child(even) {\n background-color: #f3f7d0;\n width: 25%;\n}\n\nh2 {\n font-family: arial, sans-serif;\n}\n</style>\n</head>\n<body>\n\n<h2>Control your inputs/outputs</h2>\n\n<div class=\"taula1\">\n<table>\n <tr>\n <th>Digital inputs</th>\n <th></th>\n <th>Analog inputs</th>\n <th></th>\n </tr>\n <tr>\n <td>I0.0</td>\n <td>{{payload}}</td>\n <td>I0.7</td>\n <td>{{payload}}</td>\n </tr>\n <tr>\n <td>I0.1</td>\n <td>{{payload}}</td>\n <td>I0.8</td>\n <td>{{payload}}</td>\n </tr>\n <tr>\n <td>I0.2</td>\n <td>{{payload}}</td>\n <td>I0.9</td>\n <td>{{payload}}</td>\n </tr>\n <tr>\n <td>I0.3</td>\n <td>{{payload}}</td>\n <td>I0.10</td>\n <td>{{payload}}</td>\n </tr>\n <tr>\n <td>I0.4</td>\n <td>{{payload}}</td>\n <td>I0.11</td>\n <td>{{payload}}</td>\n </tr>\n <tr>\n <td>I0.5</td>\n <td>{{payload}}</td>\n <td>I0.12</td>\n <td>{{payload}}</td>\n </tr>\n <tr>\n <td>I0.6</td>\n <td>{{payload}}</td>\n <td></td>\n <td></td>\n </tr>\n</table>\n</div>\n\n\n<div>\n<table>\n\t<tr>\n <th>Digital outputs</th>\n <th></th>\n <th>Analog outputs</th>\n <th></th>\n\t</tr>\n <tr>\n <td>Q0.0</td>\n <td>{{payload}}</td>\n <td>A0.5</td>\n <td>{{payload}}</td>\n\t</tr>\n <tr>\n <td>Q0.1</td>\n <td>{{payload}}</td>\n <td>A0.6</td>\n <td>{{payload}}</td>\n \t</tr>\n <tr>\n <td>Q0.2</td>\n <td>{{payload}}</td>\n <td>A0.7</td>\n <td>{{payload}}</td>\n \t</tr>\n <tr>\n <td>Q0.3</td>\n <td>{{payload}}</td>\n <td></td>\n <td></td>\n \t</tr> \n <tr>\n <td>Q0.4</td>\n <td>{{payload}}</td>\n <td></td>\n <td></td>\n \t</tr> \n</table>\n</div>\n\n\n</body>\n</html>\n","output":"str","x":520,"y":280,"wires":[["8084b072.bd0b1","c8e69d92.bea71"]]},{"id":"b2f50d89.7375f","type":"mqtt-broker","z":"","name":"Localhost Broker","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""}]

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 April 2020 12:45 UTC](https://discourse.nodered.org/t/how-to-show-analog-digital-information-in-a-url-from-a-plc-via-mqtt/24025/4 "2020-04-01T12:45:25Z")

</div>

> [@qmf](#):
>
> send it to a URL: localhost:1880/plc

I don't understand what you mean by that. If you already have it in node-red why are you trying to send it to node red again?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 April 2020 12:48 UTC](https://discourse.nodered.org/t/how-to-show-analog-digital-information-in-a-url-from-a-plc-via-mqtt/24025/5 "2020-04-01T12:48:04Z")

</div>

Perhaps you mean you want the user to be able to see the data by going to such a page? If so then have you looked at the node-red dashboard?

> **[node-red-dashboard](https://flows.nodered.org/node/node-red-dashboard)**
>
> A set of dashboard nodes for Node-RED

---

<div class="post-metadata">

**Author:** ![qmf](https://avatars.discourse-cdn.com/v4/letter/q/b487fb/32.png) [@qmf](https://discourse.nodered.org/u/qmf)\
**Post date:** [3 April 2020 14:56 UTC](https://discourse.nodered.org/t/how-to-show-analog-digital-information-in-a-url-from-a-plc-via-mqtt/24025/6 "2020-04-03T14:56:55Z")

</div>

> [@Colin](#):
>
> Perhaps you mean you want the user to be able to see the data by going to such a page?

Hi Colin! Thanks for the answer. Yes, that's what I want, but I don't want to use the dashboard, I just want to control my inputs and outputs through a page made by myself.  
Do you know how could I control and show every input and output?  
This is my project now:

```auto
[{"id":"b394f1c9.465ec","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"a9244ba0.6cc368","type":"debug","z":"b394f1c9.465ec","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":690,"y":160,"wires":[]},{"id":"739032d2.cd7b5c","type":"http in","z":"b394f1c9.465ec","name":"/plc","url":"/plc","method":"get","upload":false,"swaggerDoc":"","x":150,"y":320,"wires":[["72356951.90c558"]]},{"id":"72356951.90c558","type":"change","z":"b394f1c9.465ec","name":"change node","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":320,"wires":[["c89a095f.ea22a8"]]},{"id":"c8e69d92.bea71","type":"debug","z":"b394f1c9.465ec","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":750,"y":380,"wires":[]},{"id":"8084b072.bd0b1","type":"http response","z":"b394f1c9.465ec","name":"","statusCode":"","headers":{},"x":770,"y":320,"wires":[]},{"id":"17ff3a17.4f1ce6","type":"mqtt in","z":"b394f1c9.465ec","name":"","topic":"I","qos":"2","datatype":"auto","broker":"b2f50d89.7375f","x":170,"y":160,"wires":[["4b450e49.acfe5"]]},{"id":"c89a095f.ea22a8","type":"template","z":"b394f1c9.465ec","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n<style>\n\n.taula1 {\n\tpadding-bottom: 2em;\n}\n\ntable {\n font-family: arial, sans-serif;\n border-collapse: collapse;\n width: 100%;\n}\n\ntd, th {\n text-align: left;\n padding: 8px;\n}\n\ntr:nth-child(even) {\n background-color: #f3f7d0;\n width: 25%;\n}\n\nh2 {\n font-family: arial, sans-serif;\n}\n</style>\n</head>\n<body>\n\n<h2>PLC I/O</h2>\n\n<div class=\"taula1\">\n<table>\n <tr>\n <th>Digital inputs</th>\n <th></th>\n <th>Analog inputs</th>\n <th></th>\n </tr>\n <tr>\n <td>I0.0</td>\n <td>{{payload.inputs[0][0]}}</td>\n <td>I0.7</td>\n <td>{{payload.inputs[0][7]}}</td>\n </tr>\n <tr>\n <td>I0.1</td>\n <td>{{payload.inputs[0][1]}}</td>\n <td>I0.8</td>\n <td>{{payload.inputs[0][8]}}</td>\n </tr>\n <tr>\n <td>I0.2</td>\n <td>{{payload.inputs[0][2]}}</td>\n <td>I0.9</td>\n <td>{{payload.inputs[0][9]}}</td>\n </tr>\n <tr>\n <td>I0.3</td>\n <td>{{payload.inputs[0][3]}}</td>\n <td>I0.10</td>\n <td>{{payload.inputs[0][10]}}</td>\n </tr>\n <tr>\n <td>I0.4</td>\n <td>{{payload.inputs[0][4]}}</td>\n <td>I0.11</td>\n <td>{{payload.inputs[0][11]}}</td>\n </tr>\n <tr>\n <td>I0.5</td>\n <td>{{payload.inputs[0][5]}}</td>\n <td>I0.12</td>\n <td>{{payload.inputs[0][12]}}</td>\n </tr>\n <tr>\n <td>I0.6</td>\n <td>{{payload.inputs[0][6]}}</td>\n <td></td>\n <td> - </td>\n </tr>\n</table>\n</div>\n\n\n<div>\n<table>\n\t<tr>\n <th>Digital outputs</th>\n <th></th>\n <th>Analog outputs</th>\n <th></th>\n\t</tr>\n <tr>\n <td>Q0.0</td>\n <td>{{payload.outputs[0][0]}}</td>\n <td>A0.5</td>\n <td>{{payload.outputs[0][5]}}</td>\n\t</tr>\n <tr>\n <td>Q0.1</td>\n <td>{{payload.outputs[0][1]}}</td>\n <td>A0.6</td>\n <td>{{payload.outputs[0][6]}}</td>\n \t</tr>\n <tr>\n <td>Q0.2</td>\n <td>{{payload.outputs[0][2]}}</td>\n <td>A0.7</td>\n <td>{{payload.outputs[0][7]}}</td>\n \t</tr>\n <tr>\n <td>Q0.3</td>\n <td>{{payload.outputs[0][3]}}</td>\n <td></td>\n <td></td>\n \t</tr> \n <tr>\n <td>Q0.4</td>\n <td>{{payload.outputs[0][4]}}</td>\n <td></td>\n <td></td>\n \t</tr> \n</table>\n</div>\n\n</body>\n</html>\n","output":"str","x":600,"y":320,"wires":[["8084b072.bd0b1","c8e69d92.bea71"]]},{"id":"4b450e49.acfe5","type":"function","z":"b394f1c9.465ec","name":"","func":"var z, i, v;\nlet inputs = get;\nmsg.payload = flow.inputs[z][i];\nflow.set('inputs', inputs);\n","outputs":1,"noerr":0,"x":420,"y":160,"wires":[["a9244ba0.6cc368"]]},{"id":"b2f50d89.7375f","type":"mqtt-broker","z":"","name":"Localhost Broker","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""}]

```

And I know that I should do something like this in the function node:

> var z, i, v;  
> let inputs = get;  
> msg.payload = flow.inputs[z][i];  
> flow.set('inputs', inputs);

but I'm not so good at javascript, and as you can see, I'm a bit lost.

Thank you,  
Q.