diff --git a/config.js b/config.js new file mode 100644 index 0000000..5e0e8df --- /dev/null +++ b/config.js @@ -0,0 +1,12 @@ + +host = '192.168.1.22'; // hostname or IP address +//host = "broker.mqttdashboard.com"; +//port = 8000 +port = 9001; +topic = '$SYS/#'; // topic to subscribe to +useTLS = false; +username = null; +password = null; +// username = "jjolie"; +// password = "aa"; +cleansession = true; diff --git a/index.html b/index.html index e7f63e7..83afccb 100644 --- a/index.html +++ b/index.html @@ -6,41 +6,9 @@ + -
@@ -50,11 +18,15 @@ setup("body"); -var client = new Paho.MQTT.Client(document.location.hostname,parseInt(document.location.port),"web" + new Date().getTime()); +var client = new Paho.MQTT.Client( + host, + port, + "web_" + parseInt(Math.random() * 100, + 10)); client.onMessageArrived = onMessage; client.onconnectionlost = onDisconnect; function onConnect(){ - client.subscribe('#',onMessage); + client.subscribe(topic,onMessage); console.log("mqtt connected"); } diff --git a/style.css b/style.css index d026ee0..12b6d7d 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,5 @@ body { - overflow: hidden; + overflow: auto; margin: 0; font-size: 14px; font-family: "Helvetica Neue", Helvetica; @@ -86,3 +86,32 @@ a:hover { font-size: 12px; color: #999; } +.node circle { + cursor: pointer; + fill: #fff; + stroke: steelblue; + stroke-width: 1.5px; +} + +.node text { + font-size: 11px; +} + +path.link { + fill: none; + stroke: #ccc; + stroke-width: 1.5px; +} + +.popup rect { + fill: lightgrey; + stroke: black; + stroke-width: 1.5px; + opacity: 1; + fill-opacity: 1; +} + +.popup text { + fill: black; + font-weight: bold; +}