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

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.

AlessandroRa

@chrisyy thank you man, so let me get this straight: I find a button that I like on internet, I copy its code and I put it into the module?
I’m sorry, but I’m kinda new to this :)

tosti007

@AlessandroRa No you will have to take a look at Font Awsome which is being used throughout the magic mirror. In the link you can find all the icons you can use. (someone correct me if i’m wrong)

shashank

@in_a_days Hi, My requirement is i need to show clock, weather and Calendar by default and all other modules should be hide.

tosti007

@all, I made a module which is similair to this one. In mine you can set custom profiles and swap between them. Hope that this helps one of you guys :)

in_a_days

@shashank

Okay I think I know what you’re looking for. I’m not 100% sure how to make the change, but someone else here may be able to help.

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

Is there a simple way to include the ‘calendar’ and ‘weather’ modules in the exceptWithClass call? I don’t know how to include multiple Classes in this kind of context.

tosti007

@in_a_days put the names you want in an array, like so:

var exceptClasses = ["clock", "weather", "calendar"]; //The list of modules you want to keep.
MM.getModules().exceptModule(this).exceptWithClass(exceptClasses).enumerate(
    // Here the other code
);

shashank

@tosti007 hi, i tested using var exceptClasses as mentioned by you, it works perfectly as required for me. Thanks a lot for your suggestion.

chrisyy

As mentioned from @tosti007 he wrote a module that uses the ProfileSwitcher.
I will also continue on this project when i got the time for it.

I plan on adding some configurable variables, like which modules should be included as a button and a config-section where u can define an icon from Font-Awesome. That should handle a few problems with which u came up here.

But this will take me some time. So keep patient, i’m working.

tosti007

@shashank You’re welcome!
@chrisyy you can use front awsome by setting the class of the symbol’s container to fa fa-symbolname. Something like this (where symbolName can be any icon name):

var symbolName = "paper-plane";
var symbolContainer = document.createElement("span");
symbolContainer.className = "fa fa-" + symbolName;

chrisyy

@tosti007 Something like this is what i’m thinking about

Snille

Hi! I made a similar module for the same purpurs. You can always copy some code if you want…
You can find it here in the forums. :)
Or on github.

Cetax

@Snille
Hi, I’m using your MMM module bar to switch my modules on and off.
What I don’t understand is how I switch between 2 modules.
So if I press a button, I want to switch off one module and another ON. Both are in the same position (‘middle_center’).

Or do I need another module?

Thank you for your help.

greeting
Stefan