MM-Navbar - Navigation Bar for Touchscreens to hide/show modules

in_a_days

@shashank

For sure. Forgive me if there are several steps.

First thing is to install this module

https://github.com/alexyak/voicecontrol

Go to your MagicMirror/modules folder and type

git clone https://github.com/alexyak/voicecontrol.git

Then install dependencies with

sudo apt-get install python-pyaudio python3-pyaudio sox

Next, install the navbar. Again, make sure you are in the MagicMirror/modules folder and type

git clone https://github.com/chr1syy/MM-navbar.git

Then you will need to go to this website and define your voice commands.

https://snowboy.kitt.ai/

Keep track of the keywords you define and the filenames you produce. Each keyword/command will require you to download a .pmdl file that needs to be copied into the MagicMirror folder on your Pi. I’m only using 3 commands so far - calendar, newsfeed, and weather.

Still with me? Sweet! Lets configure config.js. Go to the MagicMirror/config folder and

nano config.js

Assuming you know where to place a new module in this file, add the navbar module with

            {
                    module: 'MM-navbar',
                    position: 'fullscreen_above'
            },

Next we will add the voice control call to the same config.js file. There are a couple variables here that will depend on the keywords and filenames you used on the snowboy site. Here is the code I use

          {
                    module: 'voicecontrol',
                    position: 'bottom_right',
                    config: {
                            models: [
                                            {
                                                    keyword: "Calendar",
                                                    description: "Say 'Calendar' to toggle display",
                                                    file: "calendar.pmdl",
                                                    message: "CALENDAR"
                                            },
                                            {
                                                    keyword: "Newsfeed",
                                                    description: "Say 'Newsfeed' to toggle display",
                                                    file: "newsfeed.pmdl",
                                                    message: "NEWSFEED"
                                            },
                                            {
                                                    keyword: "Weather",
                                                    description: "Say 'Weather' to toggle display",
                                                    file: "weather.pmdl",
                                                    message: "WEATHER"
                                            }
                                    ]

                            }
            },

Note that the keyword and file need to match the keyword and filenames you used on your Snowboy files. Save and quit out of config.js and we’ll hit the last step. We need to make a couple changes to the navbar code. Navigate to MagicMirror/modules/MM-navbar then

nano MM-navbar.js

First change is at line 13. Right now lines 12-19 look like this

notificationReceived: function(notification, payload, sender){
	if (notification === 'DOM_OBJECTS_CREATED'){
		MM.getModules().exceptModule(this).exceptWithClass('clock').enumerate(function(module){
			module.hide(1000, function(){
			});
		});
	}
},

You will need to modify it to look like this

    notificationReceived: function(notification, payload, sender){
            if (notification === "CALENDAR"){
                    var calendarbutton = document.getElementById('calendar-button');
                    calendarbutton.click();
            }
            if (notification === "NEWSFEED"){
                    var newsbutton = document.getElementById('news-button');
                    newsbutton.click();
            }
            if (notification === "WEATHER"){
                    var weatherbutton = document.getElementById('weather-button');
                    weatherbutton.click();
            }
    },

Now we’re going down to the section that originally starts on line 32

	wrapper.className = "center";
	weatherbutton.className = "wi wi-day-rain-mix navbar";
	calendarbutton.className = "fa fa-calendar navbar";	
	newsbutton.className = "fa fa-newspaper-o navbar";

And change it to

            wrapper.className = "center";
            weatherbutton.className = "wi wi-day-rain-mix navbar";
            weatherbutton.id = 'weather-button';
            calendarbutton.className = "fa fa-calendar navbar";
            calendarbutton.id = 'calendar-button';
            newsbutton.className = "fa fa-newspaper-o navbar";
            newsbutton.id = 'news-button';

Save, close and restart your MM and you should have a working, voice responsive nav bar. I know there are kind of a lot of steps here and typos and omissions are entirely possible. If you have any problems let me know and I’ll try to help. Cheers!

chrisyy

@in_a_days maybe u can make a fork of it in git? Thanks for sharing ur code.

@AlessandroRa There’s also a button in this module for hiding/showing everything. Do u have another module that will do this function for it?

@All
Forgive me if I’m not answering in time. Since I’m moving my time is very limited.
When we are done (maybe in 2-3 Weeks) i will do some updates on my own mirror and will update code if needed.

U can also submit code on git, i will take a look and implement it.

I’ll try to Keep in touch.

in_a_days

@chrisyy

Here is the navbar code with my modifications:

https://github.com/in-a-days/MM-navbar

The user will still need to install voicecontrol, create and load the .pmdl files, and properly configure config.js.

Is the show/hide all button part of this build? I’m looking for something like

	var showallbutton = document.createElement("span");

to match these

	var weatherbutton = document.createElement("span");
	var newsbutton = document.createElement("span");

And I’m not finding anything. Thanks again, I really love this module!

AlessandroRa

@chrisyy All I have is the weather, calendar and news buttons, how can I get more of them?
I’m using: Mail, Hello World, Alarm, News, Calendar and Music player.
For hiding/showing all I’m using this module: https://github.com/masters1222/mm-hide-all

tosti007

@chrisyy first of all I want to say that your module looks really nice, unfortunate that my mirror won’t have touch ;(. This module could be used in conjunction with my ProfileSwitcher module. This way you won’t have to bother with showing/hiding certain modules and others won’t have to modify your code. :)

chrisyy

@AlessandroRa for now, u have to copy a button and Change the code to another module.

@tosti007 Thanks for the tip. i’ll have a look at the module.

chrisyy

@in_a_days the code for Show/hide alle of the modules is

MM.getModules().exceptModule(this).exceptWithClass(‘clock’).enumerate(function(module){
module.hide(1000, function(){
});
});

but there is not a button implemented until now.

tosti007

I gave your code a look an notived that you imported jquery. First of all, you could also direct to a external file, see module documentation, this way you only have to change that line when you want to update the jquery. However if you would replace the on with addEventListener then you wouldn’t have to import jquery at all. Your code wouldn’t have to change much at all since that method takes the same parameters.

shashank

@in_a_days hi, how can i change code to show more modules apart from clock, i need weather and calendar to show as default

in_a_days

@shashank

So right now it hides all modules by default. If you want everything to show by default I think you just need to comment out a section from MM-navbar.js. These are lines 12 - 19 right now:

notificationReceived: function(notification, payload, sender){
	if (notification === 'DOM_OBJECTS_CREATED'){
		MM.getModules().exceptModule(this).exceptWithClass('clock').enumerate(function(module){
			module.hide(1000, function(){
			});
		});
	}
},

Just open and close a comment around this section so it looks like this:

/*notificationReceived: function(notification, payload, sender){
	if (notification === 'DOM_OBJECTS_CREATED'){
		MM.getModules().exceptModule(this).exceptWithClass('clock').enumerate(function(module){
			module.hide(1000, function(){
			});
		});
	}
},*/

And I think it should display all your normal modules on startup.