MagicMirror² v2.4.1 is available! For more information about this release, check out this topic.
Please read the release notes carefully since this update requires adjustments to your Raspberry Pi configuration!

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.