MMM-Modulebar - A module that adds touch buttons for showing/hiding other modules.

[Snille]

Description:

This Module adds a touch menu to hide / show other the defined (in the config.js) modules.

Screenshots:

Module with symbols only in row mode:

Module with symbols only in column mode:

Module with symbols and text in column mode:

Module with symbols and text in row mode:

This is my own mirrors view (Bottom Bar) using some addition in the custom.css see below.

Download:

[card:Snille/MMM-Modulebar]

Custom-CSS

Here is my CSS settings for the module that I have added to my custom.css to give it the extra special look. :)

/* MMM-Modulebar ------------------------------------*/
.modulebar-button {
  margin: 1px;
  padding: 1px 1px;
  border: 2px solid #fff; 
  background-color: #fff;
  color: #000;
  border-radius: 0px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
.modulebar-picture {
  margin: 0px 0px;
  border-radius: 50%;
}
.modulebar-menu {
  align-items: flex-start;
}
/*****************************************************/

Version 0.2

• Had to change the button array format a bit. Make sure to update your config to the new “standard”.
  The reason for the change where to be able control each module separately even if it is the same module multiple times. :)

Version 0.1

• Initial release.

[cowboysdude]

Very nice!

[Cato]

Nice! Now I just need to get an touch mirror… 😊

[tosti007]

Nice to see people making different versions of my code :)
This indeed was one thing that my module can’t do! Now people can choose to use this module if they want buttons for single modules :D

[Snille]

@tosti007 Yes! That’s exactly what I wanted. :) I’m using your modules for accessing the “profiles” and my module as a “quick” option to just view one thing.

Thank YOU, for making the first module. :)

[tosti007]

@Snille yes that’s a a great way to use the modules :) you’re welcome for my version but thank you for yours :D

[chaseb1357]

Is it possible to make the module bar itself toggle-able? It covers a large amount of screen real-estate; I was just wondering if its possible, how I could do that.

[Snille]

@chaseb1357 Well, you could “hide” it with a button, but the problem is to get it back again. :)

[chaseb1357]

@Snille Haha, I tried that yes. only to realize my mistake.

[Snille]

@chaseb1357 Personally I’m using the “Hide all” module for removing everything. :)

[chaseb1357]

@Snille I have that module installed also, I was just wanting a quick way to hide certain modules like for example email. For whenever I don’t want any friends snooping, while i still get to show off the mirror. :)

[Snille]

@chaseb1357 Hmm… I have not tried it… But what if you have two instances of the modulebar one with only one button hiding the “other” module bar. :)

[chaseb1357]

@Snille That was a brilliant idea! I got it to work just as I wanted.
The Modules button is a separate module bar that I set up to toggle the one that I will fill with all my modules. I achieved this by going to my modules folder and duplicating the “MMM-Modulebar” folder and renaming it “MMM-ModulebarHide”. I then renamed everything referencing “MMM-Modulebar” to “MMM-ModulebarHide” for consistency.

My config file is set up like this:

		{
        		module: "MMM-ModulebarHide",
       			position: "bottom_right",
			//header: "Modules",
        		classes: "default everyone",
        		config: {
        			buttons: {
   				 	"1": {
	  					module: "MMM-Modulebar",
      						text: "Modules",
    					},
       				}
       			}
    		},
		{
        		module: "MMM-Modulebar",
       			position: "bottom_bar", // This can be any of the regions.
			header: "Modules", // Optional
        		classes: "default everyone", // Optional
        		config: {
        			buttons: {
   				 	"1": {
	  					module: "clock",
      						text: "Clock",
    					},
   					"2": {
						module: "currentweather",
      						text: "Current Weather",
      					},
      					"3": {
      						module: "calendar",
      						text: "Calender",
      					},
      					"4": {
      						module: "weatherforecast",
      						text: "Weather Forecast",
      					},
      					"5": {
      						module: "newsfeed",
      						text: "News Feed",
      					},
      					"6": {
      						module: "MMM-SystemStats",
      						text: "System Stats",
      					},

      				}
           			// See 'Configuration options' for more information.
       			}
    		},

I can now toggle the module bar! Thanks so much!

[Snille]

@chaseb1357 Hehe! Great! :) Nicely done!

[gaudouy]

Hello, is it possible to use one button for display multiple module ?

Example :
Button 1 : Clock and weather
Button 2 : Mail and calendar
Button 3 : Clock and Camera

Thanks for advance

[Snille]

@gaudouy Hi, no, it can only show and hide one/ or multiple instances of the same type of module on one button, but not two different types of modules on one button.