• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

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

Scheduled Pinned Locked Moved System
47 Posts 11 Posters 38.4k Views 15 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • C Offline
    chrisyy
    last edited by yawns Nov 10, 2017, 3:17 PM Dec 5, 2016, 9:46 AM

    Description

    Hey there,

    after a few tries i got my navigation bar to work for my touchscreen.
    It needs a few more tweaks and maybe someone who knows more about js-programming than me, but until now it works fine for me.

    Modules integrated until now are: currentweather, weatherforecast, calendar and newsfeed.

    Maybe there is a way to automatically read all modules and create a navigation bar according to ur activated modules.

    And i need Icons… Dont know where i can get them, cause they want to get credited or sth. And i cant make them myself.

    Just give it a look, maybe some of u can help tweaking it. Needs a few more things to explain and so on.

    Screenshot

    Bild Text

    Download

    [card:chr1syy/MM-navbar]

    S 1 Reply Last reply Dec 31, 2016, 4:55 PM Reply Quote 1
    • T Offline
      tidus5
      last edited by paviro Dec 7, 2016, 11:22 AM Dec 5, 2016, 7:17 PM

      @chrisyy

      yop :-)

      i added my own module to your script

       Module.register("MM-navbar",{
      	getScripts: function(){
      		return ["modules/MM-navbar/jquery-3.1.1.js"];
      	},
      	getStyles: function(){
      		return ["weather-icons.css", "navbar.css", "font-awesome.css"];
      	},
      	getDom: function(){
      
      		var wrapper = document.createElement("div");
      
      		var weatherbutton = document.createElement("span");
      		var calendarbutton = document.createElement("span");
      		var newsbutton = document.createElement("span");
      		var nestbutton = document.createElement("span");	//NEST module
      		var huebutton = document.createElement("span");		//HUE module
      		var localtransportbutton = document.createElement("span");	//localtransport module
      		var globebutton = document.createElement("span");	//globe module
      		var clockbutton = document.createElement("span");	//clock module
      		var complimentbutton = document.createElement("span");	//compliment module
      
      		var weatherhidden = false;
      		var calendarhidden = false;
      		var newshidden = false;
      		var nesthidden = false;
      		var huehidden = false;
      		var localtransporthidden = false;
      		var globehidden = false;
      		var clockhidden = false;
      		var complimenthidden = false;
      		
      		weatherbutton.className = "wi wi-day-rain-mix navbar";
      		calendarbutton.className = "fa fa-calendar navbar";	
      		newsbutton.className = "fa fa-newspaper-o navbar";
      		nestbutton.className = "fa fa-paw navbar";
      		huebutton.className = "fa fa-lightbulb-o navbar";
      		localtransportbutton.className = "fa fa-bus navbar";	
      		globebutton.className = "fa fa-globe navbar";
      		clockbutton.className = "fa fa-clock-o navbar";
      		complimentbutton.className = "fa fa-star-o navbar";
      
      
      		var forecast = MM.getModules().withClass('weatherforecast');
      		var weather = MM.getModules().withClass('currentweather');
      		var calendar = MM.getModules().withClass('calendar');
      		var news = MM.getModules().withClass('newsfeed');
      		var nest = MM.getModules().withClass('MMM-Nest');
      		var hue = MM.getModules().withClass('MMM-Hue');
      		var transport = MM.getModules().withClass('localtransport');
      		var globe = MM.getModules().withClass('MMM-Globe');
      		var clock = MM.getModules().withClass('clock');
      		var compliment = MM.getModules().withClass('compliments');
      	
      		wrapper.appendChild(weatherbutton);		
      		wrapper.appendChild(calendarbutton);
      		wrapper.appendChild(newsbutton);
      		wrapper.appendChild(nestbutton);
      		wrapper.appendChild(huebutton);
      		wrapper.appendChild(localtransportbutton);
      		wrapper.appendChild(globebutton);
      		wrapper.appendChild(clockbutton);
      		wrapper.appendChild(complimentbutton);
      	
      		$(weatherbutton).on("click", function(){
      			if(weatherhidden){
      				forecast[0].show();
      				weather[0].show();
      				weatherhidden = false;
      			}else{
      				forecast[0].hide();
      				weather[0].hide();
      				weatherhidden = true;
      			}
      		});
      
      		$(calendarbutton).on("click", function(){
      			if(calendarhidden){
      				calendar[0].show();
      				calendarhidden = false;
      			}else{
      				calendar[0].hide();
      				calendarhidden = true;
      			}
      		});
      
      		$(newsbutton).on("click", function(){
      			if(newshidden){
      				news[0].show();
      				newshidden = false;
      			}else{
      				news[0].hide();
      				newshidden = true;
      			}
      		});
      
      		$(nestbutton).on("click", function(){
      			if(nesthidden){
      				nest[0].show();
      				nesthidden = false;
      			}else{
      				nest[0].hide();
      				nesthidden = true;
      			}
      		});
      
      		$(huebutton).on("click", function(){
      			if(huehidden){
      				hue[0].show();
      				huehidden = false;
      			}else{
      				hue[0].hide();
      				huehidden = true;
      			}
      		});
      
      		$(localtransportbutton).on("click", function(){
      			if(localtransporthidden){
      				transport[0].show();
      				localtransporthidden = false;
      			}else{
      				transport[0].hide();
      				localtransporthidden = true;
      			}
      		});
      
      		$(globebutton).on("click", function(){
      			if(globehidden){
      				globe[0].show();
      				globehidden = false;
      			}else{
      				globe[0].hide();
      				globehidden = true;
      			}
      		});
      
      		$(clockbutton).on("click", function(){
      			if(clockhidden){
      				clock[0].show();
      				clockhidden = false;
      			}else{
      				clock[0].hide();
      				clockhidden = true;
      			}
      		});
      
      		$(complimentbutton).on("click", function(){
      			if(complimenthidden){
      				compliment[0].show();
      				complimenthidden = false;
      			}else{
      				compliment[0].hide();
      				complimenthidden = true;
      			}
      		});
      
      		return wrapper;				
      
      	}
      });
      

      Note from admin: Please use Markdown on code snippets for easier reading!

      1 Reply Last reply Reply Quote 0
      • C Offline
        chrisyy
        last edited by Dec 5, 2016, 7:54 PM

        Hope it works well :-)

        I will add some more moduls for me too.
        Would be awesome if there is a way to automatically read modules and create buttons for them.
        And im trying to hide all modules on startup. If i get it to work i will update it.

        T 1 Reply Last reply Dec 6, 2016, 2:26 PM Reply Quote 0
        • C Offline
          cowboysdude Module Developer
          last edited by Dec 6, 2016, 3:00 AM

          Pictures? :)

          1 Reply Last reply Reply Quote 0
          • T Offline
            tidus5 @chrisyy
            last edited by tidus5 Dec 6, 2016, 2:27 PM Dec 6, 2016, 2:26 PM

            @chrisyy i think you can list all the modules yes but how to attribut the good icon?
            i will check for hide the module on startup tonight - i let you know if i find something

            @cowboysdude 0_1481034446135_Screen Shot 2016-12-06 at 15.26.36.png

            C 1 Reply Last reply Dec 6, 2016, 9:58 PM Reply Quote 2
            • C Offline
              chrisyy
              last edited by chrisyy Dec 6, 2016, 2:44 PM Dec 6, 2016, 2:43 PM

              Thanks for ur Picture. Mine is looking similar.

              Thats the next thing i thought about. U got all modules, but still u need a text file or sth with a module -> Icon categorization.
              My tries to hide all modules on startup were leading to a totally black screen.

              @tidus5 can I use the picture for github?

              T 1 Reply Last reply Dec 6, 2016, 2:44 PM Reply Quote 0
              • T Offline
                tidus5 @chrisyy
                last edited by Dec 6, 2016, 2:44 PM

                @chrisyy yes of course :-)

                1 Reply Last reply Reply Quote 0
                • C Offline
                  cowboysdude Module Developer @tidus5
                  last edited by Dec 6, 2016, 9:58 PM

                  @tidus5 VERY excellent!! Thank you… I can use that :)

                  1 Reply Last reply Reply Quote 0
                  • C Offline
                    chrisyy
                    last edited by Dec 7, 2016, 8:17 PM

                    i added the code to hide all modules on startup :)

                    T 1 Reply Last reply Dec 8, 2016, 7:08 PM Reply Quote 0
                    • T Offline
                      tidus5 @chrisyy
                      last edited by Dec 8, 2016, 7:08 PM

                      @chrisyy

                      pretty cool

                      im using your code

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

                      to create an icon to hide or show all
                      for now i can only show all - cant hide all after.

                      did you plan to work on that ?

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 1 / 5
                      1 / 5
                      • First post
                        5/47
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy