Trafficmaps

[tyho]

I thought i could easily turn a js script into a node module. But i find out that isn’t so easy.

I created a trafficmap on the maps api page and from there i created this. I pasted the straightforward code.
I tried many thing but honestly i don’t know where to start.
Anyone can help me make this work? After that i could create the config options like api key and location.
Finally i want it to open and close with the voice control module ^^. To open the map of location from home to work. And another voice command for my girlfriends home to work.

Here is my trafficmaps.js

Module.register("trafficmaps",{

	// Default module config.
	defaults: {
		text: "",
		animationSpeed: 500,
	},
	start: function() { 
        this.sendSocketNotification("CONNECT", {});
    },
	
	<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

	
	function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031},
    styles:[
  {
    "featureType": "administrative",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "saturation": -100 },
      { "visibility": "on" },
      { "invert_lightness": true }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "road.arterial",
    "stylers": [
      { "invert_lightness": true },
      { "saturation": -100 },
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.local",
    "stylers": [
      { "visibility": "off" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      { "saturation": -100 },
      { "gamma": 0.48 },
      { "visibility": "on" }
    ]
  },{
    "featureType": "traffic",
    "stylers": [
      { "saturation": -100 },
      { "gamma": 0.48 },
      { "visibility": "on" }
    ]
  }
]
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

	// Override dom generator.
	getDom: function() {
		var wrapper = document.createElement("div");
		wrapper.innerHTML = this.config.text;
		return wrapper;
	}
});

[tyho]

ok new code, but still not working. how can i get this url loaded?

Module.register("trafficmaps",{

	// Default module config.
	defaults: {
		text: "",
		animationSpeed: 500,
		apibase : "https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap",
	},

var mapOptions = {
     zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031},
    styles:[
  {
    "featureType": "administrative",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "saturation": -100 },
      { "visibility": "on" },
      { "invert_lightness": true }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "road.arterial",
    "stylers": [
      { "invert_lightness": true },
      { "saturation": -100 },
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.local",
    "stylers": [
      { "visibility": "off" },
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      { "saturation": -100 },
      { "gamma": 0.48 },
      { "visibility": "on" }
    ]
  },{
    "featureType": "traffic",
    "stylers": [
      { "saturation": -100 },
      { "gamma": 0.48 },
      { "visibility": "on" }
    ]
  }
]
},

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);


	// Override dom generator.
	getDom: function() {
		var wrapper = document.createElement("div");
		wrapper.id = 'map';
		wrapper.innerHTML = this.config.text;
		return wrapper;
	}
});

[tyho]

anyone know how to get googlemapsv3 displayed in nodejs?

json parse didn’t work.
I try to use the dependeties already in magicmirror like request.
Can i do it only with request? Anyone knows this?
The only thing i learned was MS frontpage on school. So i am really n00b in this…

var NodeHelper = require('node_helper');
var request = require('request');

module.exports = NodeHelper.create({
  start: function () {
  },
  
  geturl: function (api_url) {
  request({url: api_url, method: 'GET'}, function (error, response, body) {
  if (!error && response.statusCode === 200) {
    console.log(body); // Show the HTML for the Google homepage.
	var maps = JSON.parse(body);
	self.sendSocketNotification('GET_MAPS', {'maps':maps, 'url':api_url});
  }
  
});	
  },
  
  socketNotificationReceived: function(notification, payload) {
    // console.log(notification);
    if (notification === 'SEND_URL') {
      this.geturl(payload);
    }
  }
  
});

[tyho]

Update using the soccer module as base (but still no succes):
Trafficmaps.js:

Module.register("trafficmaps",{
defaults: {
			api_key: "",
			mapoptions: {
          			center: {lat: -34.397, lng: 150.644},
          			zoom: 13
			}
	},

	start: function() {
		Log.info("Starting module: " + this.name);
		this.initmap = this.config.mapoptions;
		this.sendSocketNotification('GET_DATA', {initMap: this.initmap, api_key: this.config.api_key});
	},
	

	socketNotificationReceived: function(notification, payload){
		if(notification === 'DATA'){
			this.maps = payload;
			this.updateDom();
		}
	},

	getStyles: function() {
		return ["trafficmaps.css"];
	},
	
	getDom: function() {
		var wrapper = document.createElement("div");
		if(this.maps){
			var map = document.createElement("div");
				map.classList.add("map");
			wrapper.appendChild(map);


		} else {
			wrapper.innerHTML = "No data available";
		}
		return wrapper;
	}
});

node_helper.js:

var request = require('request');
var NodeHelper = require("node_helper");
module.exports = NodeHelper.create({

	start: function() {
		console.log("Starting module: " + this.name);
	},

	socketNotificationReceived: function(notification, payload) {
		if (notification === "GET_DATA") {
			var options = {};
			if(payload.api_key){
				 options = {
					url: "https://maps.googleapis.com/maps/api/js?key=" + payload.api_key + "&callback=" + payload.initMap + "",
				};
			} else {
				options = {
					url: "https://maps.googleapis.com/maps/api/js?callback=" + payload.initMap + ""
				};
			}

			this.getData(options);
		}
	},

	getData: function(options) {
		request(options, (error, response, body) => {
			if (response.statusCode === 200) {
				this.sendSocketNotification("DATA", JSON.parse(body)); 
			} else {
				console.log("Error "+response.statusCode)
			}
		});
	}
});

I guess i really need async and defer for this… but i have no idea what i am doing…

[KirAsh4]

Reading your posts and your code, there are two things that stand out for me, one is that you are really trying, you want to figure it out, and you are doing everything you can think of to make things work. That is something I look for in any and all of the kids I teach in school: the desire to want to try and figure things out and not just memorize the book and regurgitate it back up later. The other side of that is that as hard as you are trying, you are struggling with it and a lot of it is because there seems to be a lack of understanding how the underlying code works and in some cases, even the simple fundamentals of JavaScript.

While looking at other people’s code is certainly a possibility, for what you are trying to do, that isn’t working so well. You have unfortunately also picked a harder to implement system than many others. My recommendation is to start with something simple first, try to understand how the system works, how a module gets integrated into the core system, how a module works on its own, how does it communicate with the outside world if it needs to. I recommend reading the module development page and work through that. Start small.

I’m not here to discourage you from what you are attempting to do, it is certainly possible to do what you want, but at the same time I also want to try and guide you, rather than just telling you ‘this is wrong’, ‘do that’, etc., etc. No one learns from that.

In your post you mentioned both wanting the maps integration, and also voice control. Those are two completely different systems, and require completely different controls. Do things one at a time. Either do the voice control part first, and get that working (you don’t need the ‘maps’ feature for this). You can always come back later and add to it. Or, do the maps integration first, and get that working the way you want it to. Integrating a button is by far the easiest way to have some kind of interaction between the mirror and the user. A simple button push can do something, like for example, display an alert message. So get that working, push button, alert message pops up (‘Hi, you pushed my button!’). Again, you can always change it later to say, trigger the display of a map. Whichever you do first, just pick one and get it working, and get it working correctly and have it stable, not just ‘it works sometimes’ …

Small steps, one at a time, together they form a bigger achievement. You can do it.

[tyho]

Woow nice writing! Thnx for the motivating words :) i’ll keep trying to make things work.

[KirAsh4]

Just as an example, while I don’t necessarily know yet what I want to do with buttons, I still wanted to integrate one with my mirror. And I don’t particularly like to use a tactile toggle or momentary switch (although I still might later), so instead I opted to use a touch sensor and get that working. So what does it do right now? It started with it simply displaying random messages whenever touched:

                messages: [
                        "That tickles!",
                        "Stop that!",
                        "Was it as good for you as it was for me?",
                        "Stop touching me!",
                        "HEY!",
                        "Did that feel good?",
                        "Are you having fun yet?",
                        "Don't forget to wash your finger later ...",
                        "Must you keep touching me?",
                        "Can't a Sensor get some rest around here?",
                        "I need touch pad sanitizer.",
                        "Are you done yet?",
                ]

(yes, I realize those are kinda funny)

Then I reconfigured it so that when touched, it fades away all the modules so I end up with nothing being displayed, and when I want things back, I just touch it again.

The next step was reconfiguring it so that it triggered the HDMI output and turn it off or on, however I quickly abandoned that because my monitor, when it loses the HDMI signal, will turn to a bright blue background instead of going black. And since it doesn’t support HDMI CEC commands, I’m stuck. I reverted back to turning off the modules instead.

My point here is, that this was a slow and calculated build up of that specific part: the touch sensor:

1. Connect it and see if it responds how I expect it to
2. Get it to do something, display a random message
3. Reconfigure it to turn off all the modules
4. Reconfigure it to power down HDMI - oh, that works but produces an undesirable result, go back to #3

Now that I have that figured out, I can focus on something else that may or may not incorporate the touch sensor. I made sure the sensor works first, and it works as expected, no fuss, no errors, nothing.

[shgmongohh]

@KirAsh4

Hi do you have a Homepage or Tutorial where I can learn and train to programming?

[tyho]

@KirAsh4
Yea the buttons would be nice to switch between maps.

But the thing is i can’t even display a map of the JS api of google: https://maps.googleapis.com/maps/api/js

There is also an static map api from google that just display’s an image of the map. This should be easier to push to a module. But i want the traffic functionallity that only is possible in the JS api…

I don’t know if the google JS api allows to get requests from a node module.

(my first 3 pages of google are already purple ^^)

[KirAsh4]

@shgmongohh, I do not. However, Google is your friend. W3Schools is another.

[KirAsh4]

@tyho, there is a huge difference on how you use the Google Maps API to display a map in a browser, compared to how it needs to be done within the core module system of MagicMirror. MagicMirror isn’t simply a browser that displays HTML or JS … it processes the information fed to it, and that information needs to be in a very specific format to be processed successfully. This is why my recommendation to you was to try and understand the core system first, before you try to integrate something as complex as any of the Google APIs, not just the maps one.

[tyho]

in basics i untherstand the concept of node.js. It’s not like a website where you can load a page from a server. node js is basicly the server that creates and push the website when requested.

I will have to learn some more i guess ^^ I always want to go the fast way :P

[tyho]

I have to give up on this one. I found topics where people said its really hard to call the google maps js api in nodejs environment. Even just only displaying a map. That explains why there are no codes of others available to learn from.
I think i just go for the static map (image) url from the google api. But that won’t be a trafficmap couse that’s not possible.
@KirAsh4 Thanks for your motivating words and help. I will expand my notification module for the voicecontrol module from alexyak96, that is working very well!. Maybe i come back later on this one when i got more knowledge or if someone else made a basic map module that i can expand for traffic ^^.

[MichMich]

More importantly, It’s not just a Node.js environment. It’s a frontend framework that does most of the UI work for you.

[tyho]

@MichMich yea i noticed that. But it’s still too hard for me to implent a simple javascript like google maps js api. The js code is simple to untherstand but i still need the node-modules that are used by it. And it’s still not as straight forward because node is server sided. I got the idea but not the knowledge.

[tyho]

Does anybody know what modules i have to use to get the maps js api working? Angular? Async? Express? Or somerhing like a google api module?

[MichMich]

@tyho you don’t need no modules. The only thing that is important is that you fully understand the MagicMirror framework. As told, the best way to learn this, is by start building a real simple module.

[KirAsh4]

You could also look at what’s already been done, such as https://github.com/moshen/node-googlemaps …

[tyho]

@KirAsh4 i’ve seen that one ;) but i don’t know where to start. That module uses some different dependeties that are already in magicmirror. As suggested by @MichMich i should first build a simple module. (Well i’ve build one already that works very well but i don’t know if thats the right way of writing code and if it’s fail proof). Anyway i will keep try some stuff. I die got a map on my mirror with static map. But i want this trafficlayer. So i need to use the javascript api.
On the mirror i can already see what i have to wear, where i have to go (appointments), and what happend in the world before i go. Wouldn’t it be cool if we can display traffic info and map before we leave to work. :D

[tyho]

anyone who want to show a google staticmap on there mirror. Here is the code:

/* global Module */

/* Magic Mirror
 * Module: staticmap
 *
 */
  
Module.register("staticmap",{
	defaults: {
		center: "new york",
		zoom: 14,
		mapwidth: 600,
		mapheight: 500,
		highway: "on",
		arterial: "on",
		local: "on"
	},

start: function(){
	Log.info('Starting module: ' + this.name);
},



	getDom: function() {
		var wrapper = document.createElement("div");
		var img = document.createElement("img");
		img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + this.config.center + 
		"&zoom=" + this.config.zoom +
		"&size=" + this.config.mapwidth + "x" + this.config.mapheight + 
		"&maptype=roadmap" +
		"&style=feature:road.highway|visibility:" + this.config.highway +			  
		"&style=feature:road.arterial|visibility:" + this.config.arterial +	
		"&style=feature:road.local|visibility:" + this.config.local + 
		"&style=feature:road|invert_lightness:true|saturation:-100|weight:1|lightness:1" +
		"&style=feature:administrative|invert_lightness:true|saturation:-100|weight:1|lightness:1|visibility:on" + 
		"&style=feature:poi|invert_lightness:true|weight:1|saturation:-100|lightness:1|visibility:on" +
		"&style=feature:transit|invert_lightness:true|saturation:-100|lightness:1|weight:1|visibility:on" +
		"&style=feature:landscape|invert_lightness:true|weight:1|saturation:-100|lightness:1|visibility:on" +
		"&style=feature:water|invert_lightness:true|weight:1|saturation:-100|lightness:1|visibility:on" +
		"&style=feature:road|element:labels.text.fill|lightness:100" +
		"&style=feature:road|element:labels.text.stroke|lightness:-100";
		img.width = this.config.mapwidth;
		img.height = this.config.mapheight;
		wrapper.appendChild(img);
		return wrapper;
	}
});