Including socketNotificationReceived in getDom function



  • Hi! I’m trying to hack down the google maps modules. I made a node_helper.js to capture the latitude and longitude of desired location, using url.

    the code of main file looks like this

    getDom: function() {
           
           
    		var wrapper = document.createElement("div");
            wrapper.setAttribute("id", "map");
    
            wrapper.style.height = this.config.height;
            wrapper.style.width = this.config.width;
    
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://maps.googleapis.com/maps/api/js?key=" + this.config.key;
            document.body.appendChild(script);
            script.onload = function () {
                var map = new google.maps.Map(document.getElementById("map"), {
                	zoom: 13,
                	center: {
                		lat: lat,
                		lng: lng
                	}
                });
    
                var trafficLayer = new google.maps.TrafficLayer();
                trafficLayer.setMap(map);
            };
    
    		return wrapper;
    	}
    
    

    The latitude and longitude is stored in payload. All I require is ho to use socketNotificationReceived to parse both values as “lat” and “long” in script??


  • Module Developer

    @yours.mukul
    getDom() in node_helper.js?



  • @Sean getDom() in Maps.js


  • Module Developer

    @yours.mukul
    try this

    in your node_helper.js

    var geo = {
      lat: 12.34567
      lng: 23.45678
    }
    this.sendSocketNotification("REFRESH_GEO", geo)
    

    in your Main Module

    start: function(){
      this.geo = {
        lat: 0, //default latitude
        lng: 0, //default longitude
      }
    },
    
    socketNotificationReceived: function(noti, payload) {
      if (noti == "REFRESH_GEO") {
        this.geo.lat = payload.lat
        this.geo.lng = payload.lng
        this.updateDom()
      }
    },
    
    getDom: function() {
      var lat = this.geo.lat
      var lng = this.geo.lng
    
      var wrapper = ...
    },
    


  • @Sean said in Including socketNotificationReceived in getDom function:

    var lat = this.geo.lat
    var lng = this.geo.lng

    not working, it always shows up 0,0 latitude and longitude…


  • Module Developer

    @yours.mukul said in Including socketNotificationReceived in getDom function:

    @Sean said in Including socketNotificationReceived in getDom function:

    var lat = this.geo.lat
    var lng = this.geo.lng

    not working, it always shows up 0,0 latitude and longitude…

    It means, your socketNotificationReceived() in module is not working properly. Try this.

    socketNotificationReceived: function(noti, payload) {
      console.log("NOTIFICATION IS FIRED:", noti)
      if (noti == "REFRESH_GEO") {
        console.log("PAYLOAD IS TREANFERED:", payload)
        this.geo.lat = payload.lat
        this.geo.lng = payload.lng
        console.log("I'LL UPDATE DOM BY REFRESHED GEO")
        this.updateDom()
      }
    },
    

    See how the log says. Check correct Socket Notification is fired with correct payload. If not, check your this.sendSocketNotification() in node_helper.js



  • @Sean
    node_helper.js

    var NodeHelper = require("node_helper");
    module.exports = NodeHelper.create({
    start: function() {
    
    var geo = {
      lat: 12.34567,
      lng: 23.45678
    }
    this.sendSocketNotification("REFRESH_GEO", geo);
    }
    }
    );
    

    main.js

    /* global Module */
    
    /* Magic Mirror
     * Module: MMM-GoogleMapsTraffic
     *
     * By Victor Mora
     * MIT Licensed.
     */
    
    Module.register("MMM-GoogleMapsTraffic", {
           start: function(){
      this.geo = {
        lat: 0, //default latitude
        lng: 0 //default longitude
      }
         },
    socketNotificationReceived: function(noti, payload) {
      console.log("NOTIFICATION IS FIRED:", noti)
      if (noti == "REFRESH_GEO") {
        console.log("PAYLOAD IS TREANFERED:", payload)
        this.geo.lat = payload.lat,
        this.geo.lng = payload.lng
        console.log("I'LL UPDATE DOM BY REFRESHED GEO")
        this.updateDom();
      }
    },
    	getDom: function() {
            var lat = this.geo.lat;
            var lng = this.geo.lng;
    
    		var wrapper = document.createElement("div");
            wrapper.setAttribute("id", "map");
    
            wrapper.style.height = this.config.height;
            wrapper.style.width = this.config.width;
    
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://maps.googleapis.com/maps/api/js?key=" + this.config.key;
            document.body.appendChild(script);
    
            script.onload = function () {
                var map = new google.maps.Map(document.getElementById("map"), {
                	zoom: 13,
                	center: {
                		lat: lat,
                		lng: lng
                	}
                });
    
                var trafficLayer = new google.maps.TrafficLayer();
                trafficLayer.setMap(map);
            };
    
    		return wrapper;
    	}
    
    });
    

  • Module Developer

    @yours.mukul
    I think it is not good to put the noti into start() of node_helper.js.
    Because after finishing module loaded and DOM created, updateDOM() would be working properly, but your code tried too early.
    As you’ve said, you had your code in node_helper.js to get REAL latitude & longitude, isn’t it? My code was just an example. Send your REAL lat & lng to main module when your node_helper code gathers real target values.


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.