Build automatic hyperlink in html table

hi all
i used the topic below to make a csv feed ping table.
everything is working fine, but it would be nice if the ip adres in the table were a hyperlink and when clicked opens in a new browser page
can anyone help me where to add that in the code to make it work

thanks in advance

Mark

It would probably help if you posted a bit more about where you've got to. Are you struggling with getting an IP address that is already in a msg into an output string for example or struggling to extract the IP address out of a longer string?

You mean like this?
image

[{"id":"6a22dd6e.c56fc4","type":"inject","z":"b83d9b41.9c80c8","name":"*** Setup devices to ping here ***","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"20","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"router\",\"host\":\"192.168.1.1\",\"link\":\"http://192.168.1.1/router.html\"},{\"name\":\"tv\",\"host\":\"192.168.1.46\",\"link\":\"http://192.168.1.46/channels.html\"},{\"name\":\"smart speaker\",\"host\":\"192.168.1.23\"},{\"name\":\"bad device\",\"host\":\"192.168.2.99\"}]","payloadType":"json","x":380,"y":180,"wires":[["4a46702f.96858"]]},{"id":"3539c581.74c1aa","type":"template","z":"b83d9b41.9c80c8","name":"build html table","field":"html","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n<table width=\"100%\">\n  <tr>\n    <th>Name</th>\n    <th>Host</th> \n    <th>Status</th> \n  </tr>\n  {{#tableData}}\n  <tr class='{{rowclass}}'>\n    <td>{{{name}}}</td>\n    {{#link}}\n    <td><a href=\"{{link}}\" target=\"_blank\">{{host}}</a> </td>\n    {{/link}}\n    {{^link}}\n    <td>{{host}}</td>\n    {{/link}}  \n    <td>{{{stateInfo}}}</i></td> \n  </tr>\n  {{/tableData}}\n</table>","x":720,"y":240,"wires":[["db2a0a6.457cef8","83b23a6b.400778"]]},{"id":"db2a0a6.457cef8","type":"debug","z":"b83d9b41.9c80c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":890,"y":280,"wires":[]},{"id":"df081fcf.27c53","type":"inject","z":"b83d9b41.9c80c8","name":"","repeat":"30","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"router\",\"ip\":\"192.168.0.1\"},{\"name\":\"tv\",\"ip\":\"192.168.0.51\"},{\"name\":\"smart speaker\",\"ip\":\"192.168.0.52\"},{\"name\":\"bad device\",\"ip\":\"192.168.1.99\"}]","payloadType":"json","x":290,"y":240,"wires":[["823e24a1.87a718"]]},{"id":"823e24a1.87a718","type":"function","z":"b83d9b41.9c80c8","name":"convert pingResults to array","func":"let pingResults = flow.get(\"pingResults\") || {}\nlet now = new Date();\n\nlet tableData = [];\nfor (let k in pingResults) {\n    let r = pingResults[k];\n    r.age = now - r.timestamp\n    if(r.age > 18000){\n        r.state = \"old\"\n    }\n    if(r.state == \"ok\"){\n        r.rowclass = \"good\";\n        r.stateInfo = '<i class=\"fa fa-thumbs-up\" aria-hidden=\"true\"></i> OK'\n    } else if(r.state == \"ng\") {\n         r.rowclass = \"bad\";\n        r.stateInfo = '<i class=\"fa fa-thumbs-down\" aria-hidden=\"true\"></i> NG'\n    } else {\n        r.rowclass = \"unknown\";\n        r.stateInfo = '<i class=\"fa question\" aria-hidden=\"true\"></i> ' + r.state\n    }\n    tableData.push(r);\n}\n\nmsg.tableData = tableData\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":500,"y":240,"wires":[["3539c581.74c1aa","793afa09.1583c4"]]},{"id":"4a46702f.96858","type":"ping","z":"b83d9b41.9c80c8","mode":"triggered","name":"","host":"","timer":"20","inputs":1,"x":590,"y":180,"wires":[["fecfa19a.356ee"]]},{"id":"1b75c1a7.006c3e","type":"debug","z":"b83d9b41.9c80c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":890,"y":180,"wires":[]},{"id":"fecfa19a.356ee","type":"function","z":"b83d9b41.9c80c8","name":"Store Results","func":"let pingResults = flow.get(\"pingResults\") || {}\nlet thisPing = pingResults[msg.topic] || {};\nlet success = msg.payload !== false && msg.payload >= 0;\n\nthisPing.name = msg.ping.name;\nthisPing.host = msg.ping.host;\nthisPing.link = msg.ping.link;\nthisPing.timestamp = new Date();\nthisPing.responseTime = success ? msg.payload : null;\nthisPing.state = success ? \"ok\" : \"ng\" ;\n\npingResults[msg.topic] = thisPing;//store ping obj in pingResults\nflow.set(\"pingResults\",pingResults);//save pingResults in flow context\n\nmsg.payload = thisPing;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":740,"y":180,"wires":[["1b75c1a7.006c3e"]]},{"id":"83b23a6b.400778","type":"ui_template","z":"b83d9b41.9c80c8","group":"9f4f9ffc.07f2a","name":"","order":3,"width":"6","height":"5","format":"<style>\ntable {\n    color: #333;\n    font-family: Helvetica, Arial, sans-serif;\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n}\ntd, th {\n    border: 1px solid transparent;\n    /* No more visible border */\n    height: 30px;\n    transition: all 0.3s;\n    /* Simple transition for hover effect */\n}\nth {\n    background: #DFDFDF;\n    /* Darken header a bit */\n    font-weight: bold;\n}\ntd {\n    background: #FAFAFA;\n    text-align: center;\n}\n\n/* Cells in even rows (2,4,6...) are one color */\n\ntr:nth-child(even) td {\n    background: #F1F1F1;\n}\n\n/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */\n\ntr:nth-child(odd) td {\n    background: #FEFEFE;\n}\ntr td:hover {\n    background: #666;\n    color: #FFF;\n}\n\n/* Hover cell effect! */    \n\ntr.good {\n    color: green;\n}\n\ntr.bad {\n    color: red;\n}\n\ntr.unknown {\n    color: orange;\n}\n\n    \n</style>\n<div ng-bind-html=\"msg.html\"></div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":900,"y":240,"wires":[[]]},{"id":"793afa09.1583c4","type":"debug","z":"b83d9b41.9c80c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":650,"y":320,"wires":[]},{"id":"9f4f9ffc.07f2a","type":"ui_group","name":"Default","tab":"5132060d.4cde48","order":1,"disp":true,"width":"6","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
1 Like

Thanks Steve,
This is what i was looking for.
thank you very much for thinking along

regards mark

OK, you should note that I've taken a slightly different route for my own home dashboard. I run an nmap scan on my system using a shell script fired regularly by CRON (so runs in the OS with sudo rights). The output of the nmap is an XML file and the last step of the script is to use curl to touch an http endpoint in Node-RED. That fires the flow you can see that grabs the XML, translates it to JSON and puts it through a function node to update a retained Node-RED variable along with outputs to MQTT.

#! /usr/bin/env bash
# Fast scan the local network for live devices and record
# to /tmp/nmap.xml which can be used in Node-RED
#
# To run manually:
#   sudo /home/home/nrmain/system/nmap_scan.sh
#
# To run via cron:
#   sudo crontab -e
#       01,16,31,46 * * * * /home/home/nrmain/system/nmap_scan.sh

# Run the scan
nmap -sn --oX /tmp/nmap.xml --privileged -R --system-dns --webxml 192.168.1.0/24
# Make sure ownership & ACLs on the output are secure
chown root:home /tmp/nmap.xml
chmod --silent 640 /tmp/nmap.xml
# Trigger the Node-RED update
curl --insecure -I 'https://localhost:1880/localnetscan'

Here is an example of the resulting devices table. Note that there are some fields I can edit as well.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.