added support for MQTT reload and update

wassfila · wassfila · commit 31f6ceca6b88 · 2021-08-08T13:18:15.000+02:00
diff --git a/config.json b/config.json
@@ -16,5 +16,12 @@
     "github":{
         "image":"./media/github.png",
         "link":"https://github.com/NetworkGraphs/graphysics"
+    },
+    "mqtt":{
+        "host":"10.0.0.42",
+        "port":1884,
+        "client":"graphysics",
+        "subscribe":"graph/#",
+        "enabled":true
     }
 }
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <title>Graph with physics</title>
   <link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
   <script src="./libs/matter.min.js"></script>
+  <script src="./libs/mqttws31.min.js"></script>
 </head>
 <body>
   <script src="./src/main.js?v=556f89f94" type="module"></script>
diff --git a/libs/mqttws31.min.js b/libs/mqttws31.min.js
diff --git a/src/graph_app.js b/src/graph_app.js
@@ -80,6 +80,33 @@ function onDragEvents(event){
     };
 }
 
+function onMqttMessage(e){
+    const topic = e.detail.topic
+    const data = e.detail.payload
+    //console.log(`graph_app> ${topic}	=> ${JSON.stringify(data)}`);
+    //TODO select sub topic of new graph vs update
+    const action = topic.split('/')[1]
+    if(action == "reload"){
+        physics.pause()
+        render.pause()
+        gio.import_json(data)
+        render.fitLabels()
+        physics.create_bodies(parent_div)
+        render.create_graph()
+        mutate.all_groups(graph)
+        physics.resume()
+        render.resume()
+    }else if(action == "update"){
+        for(const vertex of data.vertices){
+            let v = graph.vertices[vertex.id]
+            v.viewBox.x = vertex.viewBox.x
+            v.viewBox.y = vertex.viewBox.y
+            v.viewBox.placed = true
+        }
+    }
+}
+
+
 async function common_load(file,reload,config=null){
     if(reload){
         console.log(`graph_app> reloading file : ${file.name}`)
@@ -134,6 +161,8 @@ class GraphApp{
         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
             document.addEventListener(eventName, onDragEvents, false)
         });
+        window.addEventListener( 'mqtt_message', onMqttMessage, false);
+
     }
 
     async load(config,p_div){
diff --git a/src/graph_io.js b/src/graph_io.js
@@ -320,6 +320,19 @@ class GraphIo{
         g = graph_data
     }
 
+    async common_import(res){
+        rename_properties(res);
+        add_references_from_ids(res);
+        add_multi_edges_info(res);
+        init_forces(res);
+        init_groups_ifndef(res);
+        g.vertices = res.vertices
+        g.edges = res.edges
+        g.layout_done = false//init to false, override by res.properties
+        Object.assign(g,res.properties)
+        return
+    }
+
     async import_file(file,cfg){
         if(cfg != null){
             config=cfg
@@ -367,7 +380,7 @@ class GraphIo{
         if(res == null){
             return
         }
-        console.log(JSON.stringify(res))
+        //console.log(JSON.stringify(res))
         rename_properties(res);
         add_references_from_ids(res);
         add_multi_edges_info(res);
@@ -380,6 +393,12 @@ class GraphIo{
         return
     }
 
+    import_json(data){
+        let res = import_json_graph(data);
+        //console.log(JSON.stringify(res))
+        this.common_import(res)
+        return
+    }
 }
 
 export {GraphIo};
diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,7 @@
 import {GraphApp} from "./graph_app.js"
 import {fetch_json} from "./utils.js"
+import * as mqtt from './mqtt_app.js';
+
 
 async function main(){
     console.log("main() start")
@@ -14,6 +16,11 @@ async function main(){
     
     animate();
     console.log("main() done")
+
+    if(config.mqtt.enabled){
+        mqtt.init(config.mqtt);
+    }
+    
 }
 
 main()
diff --git a/src/mqtt_app.js b/src/mqtt_app.js
@@ -0,0 +1,54 @@
+/** http://w3c.github.io/html-reference/input.color.html
+ * 
+ * sent events:
+ * - mqtt_message
+ */
+
+import {event} from "./utils.js"
+
+let client;
+let mqtt_connected = false;
+let subscribe_topic = ""
+
+function init(mqtt_config){
+  subscribe_topic = mqtt_config.subscribe
+  mqtt_connect(mqtt_config)
+}
+
+// called when the client connects
+function onConnect() {
+  mqtt_connected = true;
+  // Once a connection has been made, make a subscription and send a message.
+  console.log("mqtt_app> onConnect() mqtt running");
+
+  client.subscribe(subscribe_topic);
+  console.log(`mqtt_app> - subscribed to ${subscribe_topic}`);
+}
+
+// called when the client loses its connection
+function onConnectionLost(responseObject) {
+  if (responseObject.errorCode !== 0) {
+    console.log("onConnectionLost:"+responseObject.errorMessage);
+  }
+  mqtt_connected = false;
+}
+
+// called when a message arrives
+function onMessageArrived(message) {
+  //console.log(`mqtt_app> ${message.destinationName}	=> ${message.payloadString}`);
+  event("mqtt_message",{topic:message.destinationName,payload:JSON.parse(message.payloadString)});
+}
+
+function mqtt_connect(config){
+    // Create a client instance
+    const client_name = window.location.hostname + '#' + config.client;
+    client = new Paho.MQTT.Client(config.host, Number(config.port), client_name);
+    // set callback handlers
+    client.onConnectionLost = onConnectionLost;
+    client.onMessageArrived = onMessageArrived;
+
+    // connect the client
+    client.connect({onSuccess:onConnect});
+}
+
+export{init}

Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,12 @@`
`16`	`16`	`"github":{`
`17`	`17`	`"image":"./media/github.png",`
`18`	`18`	`"link":"https://github.com/NetworkGraphs/graphysics"`
	`19`	`+ },`
	`20`	`+ "mqtt":{`
	`21`	`+ "host":"10.0.0.42",`
	`22`	`+ "port":1884,`
	`23`	`+ "client":"graphysics",`
	`24`	`+ "subscribe":"graph/#",`
	`25`	`+ "enabled":true`
`19`	`26`	`}`
`20`	`27`	`}`