Peek-a-boo...

[carteblanche]

@darrene as @Baltibu suggested, it would be awesome if you could share the code you used to get this module to work. I am still trying to get any of the voice modules to work for mm2 on my mirror.

[darrene]

Hey @Baltibu, @carteblanche I’ll help all I can.
So to make sure I got rid of any problems, I started with a clean MagicMirror install
Then I install Alexyak’s voicecontrol module
to get my USB microphone working, I need to overwrite the ~/.asoundrc file with these contents;

  #asym fun start here. we define one pcm device called "pluged"
  pcm.pluged {
  type plug
  #this is your output device
  slave.pcm "hw:0,1"
  }

 #one called "dsnooped" for capturing
pcm.dsnooped {
ipc_key 1027
type dsnoop
#this is your input device
slave.pcm "hw:1,0"
}

#and this is the real magic
pcm.asymed {
type asym
playback.pcm "pluged"
capture.pcm "dsnooped"
}

#a quick plug plugin for above device to do the converting magic
pcm.pasymed {
type plug
slave.pcm "asymed"
}

#a ctl device to keep xmms happy
ctl.pasymed {
type hw
card 0
}

#for aoss:
pcm.dsp0 {
type plug
slave.pcm "asymed"
}

ctl.mixer0 {
  type hw
  card 0
 }

 pcm.!default {
  type plug
  slave.pcm “asymed”
  }

Then I start the Audio Preferences control panel in the Raspain GUI and select controls (tick PCM) for the sound card and select controls (tick microphone) for the USB microphone.

I then created a PMDL keyword test file on the snowboy website and downloaded it.
The PMDL I created I called smartmirror.pmdl - it recognised the phrase ‘smart mirror’
Put this file in the ~/MagicMirror directory.

Now it’s time to test!

Add the following to your /config/config.js:

        	{
                module: 'voicecontrol',
        	position: 'bottom_left',
        	config: {
            	models: [
                    	{
   			                 keyword: "show alert",  // keyword
                   			 description: "Say 'Show Alert' to show an alert",
                    		 file: "smartmirror.pmdl", // trained model file name
                    		 message: "SHOW_ALERT"  // notification message that's broadcast in the MagicM

           	     		},
           	 		]
       	 	}
    	},	

start your magic mirror in dev mode:
npm start dev

wait for everything to start (you may get some ALSA stuff in the terminal window but that isn’t necessarily a problem). Ensure the dev window is in Console mode, so you can see any console messages as Magic Mirror runs. Once everything has started okay, try saying ‘smart mirror’ (or whatever your keyword is) If it’s all working, you should see two things happening:

1. An empty, white alert box should pop up and then disappear on the Magic Mirror
2. In the Dev console, you should see the alert notification being broadcast to all the modules.

If you get both of these happening, you’re 90% of the way there :)
If you only see the broadcast in the Dev console but not the alert, there’s a problem with the config.js or the alert.js
If you don’t see the broadcast, you need to double-check everything, or the microphone isn’t working… You’ll need to solve this first.

What we’ve just done, is made use of the MagicMirror notification broadcast and one of the default modules ‘Alert’

The next step is to create a load of PMDL files for all of the words you want the mirror to respond to. Copy all the downloaded PMDLs into the MagicMirror root folder.

You can now add to that section of the config.js for each PMDL file. The only thing to change is the file: entry (to be the PMDL file, and the description: entry (this will just add to what voicecontrol displays on the MagicMirror screen and will help in remembering what keywords you’ve got active).

So… You should now have a bunch of trigger words that you can test. Each one will send a notification (which you will see in the dev console) and will briefly trigger the alert popup at the top of the magic mirror screen.

All you need to do now, is change the SEND_ALERT that is broadcast, to something more useful.

I wanted to hide and show modules so I ended up with something like this in my config.js:

        	{
                module: 'voicecontrol',
        	position: 'bottom_left',
        	config: {
            	models: [
                    	{
   			                 keyword: "Hide Calendar",  // keyword
                   			 description: "Hide Calendar",
                    		 file: "hidecalendar.pmdl", // trained model file name
                    		 message: "HIDE_CALENDAR"  // notification message that's broadcast in the MagicM

           	     		},
                    	{
   			                 keyword: "Show Calendar",  // keyword
                   			 description: "Show Calendar",
                    		 file: "showcalendar.pmdl", // trained model file name
                    		 message: "SHOW_CALENDAR"  // notification message that's broadcast in the MagicM

           	     		},

           	 		]
       	 	}
    	},	

Now, when I say “Show Calendar”, a SHOW_CALENDAR notification will be broadcast to all the modules and when I say “Hide Calendar”, a HIDE_CALENDAR notification will be broadcast to all the modules.

None of the modules are going to understand what SHOW_CALENDAR and HIDE_CALENDAR mean, so we need to tell in this case, the calendar module, what to do.

Make a backup copy of the /modules/default/calendar/calendar.js and then edit it so that it can act on NotificationReceived events.

This is the bit that tripped me up initially. Modules will have a SocketNotificationReceived - this is where they interact with their node-helper.js file. It looks similar to what we’re after but not quite! There probably isn’t a plain ‘NotificationReceived’ section, so we’ll add one - we can always delete the .js and restore our backup if things go horribly wrong.

I went ahead and added this to my calendar.js

// voice control notification handling
NotificationReceived: function (notification, payload) {
	if (notification === "HIDE_CALENDAR") {
		this.hide();
	} else if (notification === "SHOW_CALENDAR") {
		this.show();
	} 
  },

(I added this just after the SocketNotificationReceived section)

Start your magic mirror in dev mode again and this time you should see a SHOW_CALENDAR or HIDE_CALENDAR notification broadcast when you say the appropriate keyword. If the NotificationReceived code is working, you will also see the Calendar appear or disappear!

If you’ve made it this far, congratulations. You’re home and dry. You can now extend it by adding the same code, with different notifications in the other modules you want to control. I added a ‘HIDE_ALL’ and ‘SHOW_ALL’ to all of my modules so that I can switch them all on or off , as well as independantly.

Give it a go and see how you get on. In each case, just take little steps and back any files up before you change them and you should be fine. I know next to nothing and I’ve managed, so it’s definitely doable…and you’ll have a big grin when it works.

If you have any more trouble just give a shout and I’ll help all I can.

[carteblanche]

@darrene you are a SAINT!..I’m going to follow these instructions now and will let you know how it goes

[carteblanche]

@darrene I went through all the steps and I can see in the console that the modules are receiving the notification broadcast as expected but for whatever reason the Calendar isn’t actually responding (i.e. HIDE_CALENDAR doesn’t make the calendar go away).

Any ideas? I’m wondering if it has to do with where I put the code into calendar.js?

[darrene]

It sounds as though you’re almost there @carteblanche. That’s great!

It’s either a case then of a mismatch between what you’re expecting to be broadcast and what is being, or as you say, the calendar not reacting to the notification it receives.

So to be clear, in the console you see HIDE_CALENDAR as the notification that’s broadcast? if so, that rules out the first issue.

I’m using the default calendar module rather than a 3rd-party one. I’m going to assume you are too but if not, you’ll just need to ensure it’s the right module you’re working on. (I don’t mean it to sound condescending and sorry if it’s obvious but personally speaking, I’m so busy looking closely at the issue that I usually find out afterwards it was something like that! :) )

It could be the location in the calendar.js but it’s just as likely there’s a small typo which means the calendar is ignoring it.

If we assume the notification is making it as far as the calendar module, I’ll post my entire calendar.js so you can compare the syntax and see where I’ve put it (in all of my modules I’ve tried to put it in the same place relatively - just before the Override Dom Generator section)

Good luck!

/* global Module */

/* Magic Mirror
* Module: Calendar
*
* By Michael Teeuw http://michaelteeuw.nl
* MIT Licensed.
*/

Module.register("calendar",{

// Define module defaults
defaults: {
	maximumEntries: 10, // Total Maximum Entries
	maximumNumberOfDays: 365,
	displaySymbol: true,
	defaultSymbol: "calendar", // Fontawesome Symbol see http://fontawesome.io/cheatsheet/
	displayRepeatingCountTitle: false,
	defaultRepeatingCountTitle: '',
	maxTitleLength: 25,
	fetchInterval: 5 * 60 * 1000, // Update every 5 minutes.
	animationSpeed: 2000,
	fade: true,
	urgency: 7,
	timeFormat: "relative",
	fadePoint: 0.25, // Start on 1/4th of the list.
	calendars: [
		{
			symbol: "calendar",
			url: "http://www.calendarlabs.com/templates/ical/US-Holidays.ics",
		},
	],
	titleReplace: {
		"De verjaardag van ": "",
		"'s birthday": ""
	},
},

// Define required scripts.
getStyles: function() {
	return ["calendar.css", "font-awesome.css"];
},

// Define required scripts.
getScripts: function() {
	return ["moment.js"];
},

// Define required translations.
getTranslations: function() {
	// The translations for the defaut modules are defined in the core translation files.
	// Therefor we can just return false. Otherwise we should have returned a dictionairy.
	// If you're trying to build your own module including translations, check out the documentation.
	return false;
},

// Override start method.
start: function() {
	Log.log("Starting module: " + this.name);

	// Set locale.
	moment.locale(config.language);

	for (var c in this.config.calendars) {
		var calendar = this.config.calendars[c];
		calendar.url = calendar.url.replace("webcal://", "http://");
		this.addCalendar(calendar.url, calendar.user, calendar.pass);
	}

	this.calendarData = {};
	this.loaded = false;
},

// Override socket notification handler.
socketNotificationReceived: function(notification, payload) {
	if (notification === "CALENDAR_EVENTS") {
		if (this.hasCalendarURL(payload.url)) {
			this.calendarData[payload.url] = payload.events;
			this.loaded = true;
		}
	} else if (notification === "FETCH_ERROR") {
		Log.error("Calendar Error. Could not fetch calendar: " + payload.url);
	} else if (notification === "INCORRECT_URL") {
		Log.error("Calendar Error. Incorrect url: " + payload.url);
	} else {
		Log.log("Calendar received an unknown socket notification: " + notification);
	}

	this.updateDom(this.config.animationSpeed);
},

    // added by DGE to respond to voice notifications
    notificationReceived: function(notification, payload, sender) {
            if (notification === "HIDE_CALENDAR") {
                    this.hide();
            } else if (notification === "SHOW_CALENDAR") {
                    this.show();
            } else if (notification === "HIDE_ALL") {
                    this.hide();
            } else if (notification === "SHOW_ALL") {
                    this.show();
            }
    },



// Override dom generator.
getDom: function() {

	var events = this.createEventList();
	var wrapper = document.createElement("table");
	wrapper.className = "small";

	if (events.length === 0) {
		wrapper.innerHTML = (this.loaded) ? this.translate("EMPTY") : this.translate("LOADING");
		wrapper.className = "small dimmed";
		return wrapper;
	}

	for (var e in events) {
		var event = events[e];

		var eventWrapper = document.createElement("tr");
		eventWrapper.className = "normal";

		if (this.config.displaySymbol) {
			var symbolWrapper =  document.createElement("td");
			symbolWrapper.className = "symbol";
			var symbol =  document.createElement("span");
			symbol.className = "fa fa-" + this.symbolForUrl(event.url);
			symbolWrapper.appendChild(symbol);
			eventWrapper.appendChild(symbolWrapper);
		}

		var titleWrapper = document.createElement("td"),
			repeatingCountTitle = '';


		if (this.config.displayRepeatingCountTitle) {

			repeatingCountTitle = this.countTitleForUrl(event.url);

			if(repeatingCountTitle !== '') {
				var thisYear = new Date().getFullYear(),
					yearDiff = thisYear - event.firstYear;

				repeatingCountTitle = ', '+ yearDiff + '. ' + repeatingCountTitle;
			}
		}

		titleWrapper.innerHTML = this.titleTransform(event.title) + repeatingCountTitle;
		titleWrapper.className = "title bright";
		eventWrapper.appendChild(titleWrapper);

		var timeWrapper =  document.createElement("td");
		//console.log(event.today);
		var now = new Date();
		// Define second, minute, hour, and day variables
		var one_second = 1000; // 1,000 milliseconds
		var one_minute = one_second * 60;
		var one_hour = one_minute * 60;
		var one_day = one_hour * 24;
		if (event.fullDayEvent) {
			if (event.today) {
				timeWrapper.innerHTML = this.translate("TODAY");
			} else if (event.startDate - now < one_day && event.startDate - now > 0) {
				timeWrapper.innerHTML = this.translate("TOMORROW");
			} else if (event.startDate - now < 2*one_day && event.startDate - now > 0) {
			/*Provide ability to show "the day after tomorrow" instead of "in a day" 
			 *if "DAYAFTERTOMORROW" is configured in a language's translation .json file, 
			 *,which can be found in MagicMirror/translations/
			 */
				if (this.translate('DAYAFTERTOMORROW') !== 'DAYAFTERTOMORROW') {
						timeWrapper.innerHTML = this.translate("DAYAFTERTOMORROW");
				} else {
						timeWrapper.innerHTML = moment(event.startDate, "x").fromNow();
				}
			} else {
				/* Check to see if the user displays absolute or relative dates with their events
				 * Also check to see if an event is happening within an 'urgency' time frameElement
				 * For example, if the user set an .urgency of 7 days, those events that fall within that
				 * time frame will be displayed with 'in xxx' time format or moment.fromNow()
				 *
				 * Note: this needs to be put in its own function, as the whole thing repeats again verbatim
				 */
				if (this.config.timeFormat === "absolute") {
					if ((this.config.urgency > 1) && (event.startDate - now < (this.config.urgency * one_day))) {
						// This event falls within the config.urgency period that the user has set
						timeWrapper.innerHTML = moment(event.startDate, "x").fromNow();
					} else {
						timeWrapper.innerHTML = moment(event.startDate, "x").format("MMM Do");
					}
				} else {
					timeWrapper.innerHTML =  moment(event.startDate, "x").fromNow();
				}
			}
		} else {
			if (event.startDate >= new Date()) {
				if (event.startDate - now < 2 * one_day) {
					// This event is within the next 48 hours (2 days)
					if (event.startDate - now < 6 * one_hour) {
						// If event is within 6 hour, display 'in xxx' time format or moment.fromNow()
						timeWrapper.innerHTML = moment(event.startDate, "x").fromNow();
					} else {
						// Otherwise just say 'Today/Tomorrow at such-n-such time'
						timeWrapper.innerHTML = moment(event.startDate, "x").calendar();
					}
				} else {
					/* Check to see if the user displays absolute or relative dates with their events
					 * Also check to see if an event is happening within an 'urgency' time frameElement
					 * For example, if the user set an .urgency of 7 days, those events that fall within that
					 * time frame will be displayed with 'in xxx' time format or moment.fromNow()
					 *
					 * Note: this needs to be put in its own function, as the whole thing repeats again verbatim
					 */
					if (this.config.timeFormat === "absolute") {
						if ((this.config.urgency > 1) && (event.startDate - now < (this.config.urgency * one_day))) {
							// This event falls within the config.urgency period that the user has set
							timeWrapper.innerHTML = moment(event.startDate, "x").fromNow();
						} else {
							timeWrapper.innerHTML = moment(event.startDate, "x").format("MMM Do");
						}
					} else {
						timeWrapper.innerHTML = moment(event.startDate, "x").fromNow();
					}
				}
			} else {
				timeWrapper.innerHTML =  this.translate("RUNNING") + ' ' + moment(event.endDate,"x").fromNow(true);
			}
		}
		//timeWrapper.innerHTML += ' - '+ moment(event.startDate,'x').format('lll');
		//console.log(event);
		timeWrapper.className = "time light";
		eventWrapper.appendChild(timeWrapper);

		wrapper.appendChild(eventWrapper);

		// Create fade effect.
		if (this.config.fade && this.config.fadePoint < 1) {
			if (this.config.fadePoint < 0) {
				this.config.fadePoint = 0;
			}
			var startingPoint = events.length * this.config.fadePoint;
			var steps = events.length - startingPoint;
			if (e >= startingPoint) {
				var currentStep = e - startingPoint;
				eventWrapper.style.opacity = 1 - (1 / steps * currentStep);
			}
		}
	}

	return wrapper;
},

/* hasCalendarURL(url)
 * Check if this config contains the calendar url.
 *
 * argument url sting - Url to look for.
 *
 * return bool - Has calendar url
 */
hasCalendarURL: function(url) {
	for (var c in this.config.calendars) {
		var calendar = this.config.calendars[c];
		if (calendar.url === url) {
			return true;
		}
	}

	return false;
},

/* createEventList()
 * Creates the sorted list of all events.
 *
 * return array - Array with events.
 */
createEventList: function() {
	var events = [];
	var today = moment().startOf("day");
	for (var c in this.calendarData) {
		var calendar = this.calendarData[c];
		for (var e in calendar) {
			var event = calendar[e];
			event.url = c;
			event.today = event.startDate >= today && event.startDate < (today + 24 * 60 * 60 * 1000);
			events.push(event);
		}
	}

	events.sort(function(a, b) {
		return a.startDate - b.startDate;
	});

	return events.slice(0, this.config.maximumEntries);
},

/* createEventList(url)
 * Requests node helper to add calendar url.
 *
 * argument url sting - Url to add.
 */
addCalendar: function(url, user, pass) {
	this.sendSocketNotification("ADD_CALENDAR", {
		url: url,
		maximumEntries: this.config.maximumEntries,
		maximumNumberOfDays: this.config.maximumNumberOfDays,
		fetchInterval: this.config.fetchInterval,
		user: user,
		pass: pass
	});
},

/* symbolForUrl(url)
 * Retrieves the symbol for a specific url.
 *
 * argument url sting - Url to look for.
 *
 * return string - The Symbol
 */
symbolForUrl: function(url) {
	for (var c in this.config.calendars) {
		var calendar = this.config.calendars[c];
		if (calendar.url === url && typeof calendar.symbol === "string")  {
			return calendar.symbol;
		}
	}

	return this.config.defaultSymbol;
},
/* countTitleForUrl(url)
 * Retrieves the name for a specific url.
 *
 * argument url sting - Url to look for.
 *
 * return string - The Symbol
 */
countTitleForUrl: function(url) {
	for (var c in this.config.calendars) {
		var calendar = this.config.calendars[c];
		if (calendar.url === url && typeof calendar.repeatingCountTitle === "string")  {
			return calendar.repeatingCountTitle;
		}
	}

	return this.config.defaultRepeatingCountTitle;
},

/* shorten(string, maxLength)
 * Shortens a sting if it's longer than maxLenthg.
 * Adds an ellipsis to the end.
 *
 * argument string string - The string to shorten.
 * argument maxLength number - The max lenth of the string.
 *
 * return string - The shortened string.
 */
shorten: function(string, maxLength) {
	if (string.length > maxLength) {
		return string.slice(0,maxLength) + "&hellip;";
	}

	return string;
},

/* titleTransform(title)
 * Transforms the title of an event for usage.
 * Replaces parts of the text as defined in config.titleReplace.
 * Shortens title based on config.maxTitleLength
 *
 * argument title string - The title to transform.
 *
 * return string - The transformed title.
 */
titleTransform: function(title) {
	for (var needle in this.config.titleReplace) {
		var replacement = this.config.titleReplace[needle];
		title = title.replace(needle, replacement);
	}

	title = this.shorten(title, this.config.maxTitleLength);
	return title;
}

});

[darrene]

As I mentioned earlier, the approach I’ve taken isn’t exactly elegant. It’s the way to go for a HIDE_ALL or SHOW_ALL because obviously all the modules would need to know then, but a more efficient approach would really be to target modules as you need them - that involved reworking the voicecontrol.js or node-helper though and passing two variables - the notification and the target module. I just wasn’t confident enough to do this yet.

[carteblanche]

@darrene thank you for sharing your calendar.js file because that is where I found where the issue was…it was the name for the function notificationReceived: – needed to have a lower case “n”.

Now it works perfectly!! And as you predicted I experienced a massive grin.

update:
I’ve been testing this out with other modules and it works like a charm. I also discovered (after trial and error) that its possible to combine the hide/show with the hide all/show all command simply by revising the if statement on the notificationReceived function with an “or” condition specifying both commands . See below is an example of the revised code:

notificationReceived: function(notification, payload, sender) {
if (notification === “HIDE_CALENDAR” || “HIDE_ALL”) {
this.hide();
} else if (notification === “SHOW_CALENDAR” || “SHOW_ALL”) {
this.show();
}
},

[carteblanche]

@carteblanche said in Peek-a-boo...:

@darrene thank you for sharing your calendar.js file because that is where I found where the issue was…it was the name for the function notificationReceived: – needed to have a lower case “n”.

Now it works perfectly!! And as you predicted I experienced a massive grin.

update:
I’ve been testing this out with other modules and it works like a charm. I also discovered (after trial and error) that its possible to combine the hide/show with the hide all/show all command simply by revising the if statement on the notificationReceived function with an “or” condition specifying both commands . See below is an example of the revised code:

notificationReceived: function(notification, payload, sender) {
if (notification === “HIDE_CALENDAR” || “HIDE_ALL”) {
this.hide();
} else if (notification === “SHOW_CALENDAR” || “SHOW_ALL”) {
this.show();
}
},

update: while this worked for a short period, upon further testing this code seems to cause some issues with HIDE_ALL auto suspending all modules on launch. So the or condition if statement doesn’t appear to be a viable solution, the only way to include hide/show all is the way you have the code now @darrene with the multiple else if statements.

[strawberry 3.141]

@carteblanche

if (notification === "HIDE_CALENDAR" || "HIDE_ALL")

this will be always true: notification === "HIDE_CALENDAR" can be true or false, but "HIDE_ALL" will be always true

that’s why it always hide the module

it must be like that

if (notification === "HIDE_CALENDAR" || notification === "HIDE_ALL") {
    this.hide();
} else if (notification === "SHOW_CALENDAR" || notification === "SHOW_ALL") {
    this.show();
}
},

[carteblanche]

@strawberry-3.141 Thank you for the tip! Now it makes perfect sense.

It does still work with the multiple else if statements but for the sake of cleaner code I like the idea of using the or condition.