MMM-TouchNavigation, A Touch Activated Profile/Layout Changer

tosti007

@strawberry-3.141 no problem, for fullscreen it would work

Snille

Different look for this module, just wanted to share :)…
Grayscale:

Or in color:

It’s only the pictures that differ from the gray or color ones.
You have to use your own pictures of course. :)

In the config.js:

{
	module: 'MMM-TouchNavigation',
	position: 'bottom_left',
	classes: "default everyone",
	config: {
		picturePlacement: "right",
		minWidth: "40px",
		direction: "column",
		buttons: {
			"Name1": {
				img: "http://www.your-picture.com/name1-Gray.png", 
				width: 60,
				height: 60
			},
			"Name2": {
				img: "http://www.your-picture.com/name2-Gray.png", 
				width: 60,
				height: 60
			},
			"Name3": {
				img: "http://www.your-picture.com/name3-Gray.png", 
				width: 60,
				height: 60
			}
		}
	}
},

In my custom.css:

/* Touch Buttons */
.navigation-button {
    margin: 5px;
    padding: 0px 0px;
    border: 2px solid #FFF; 
    border-radius: 0px;
    border-radius: 50%;
}
.navigation-picture {
    margin: 0px 0px;
    border-radius: 50%;
}
.navigation-menu {
    align-items: flex-start;
}
/* ----- End ----- */

Update: Just noticed that the buttons got “stretched” if something else was displayed in the same region. So I added the “.navigation-menu” part in the css.
If you have the buttons on the right side, use: “flex-end” instead of “flex-start”.

Enjoy! :)

tosti007

@Snille it’s looking great! I really like what you did with the shape of the buttons! Thank you for sharing :D It’s awesome to hear people using my module and coming up with their own versions

Snille

@tosti007 Thank you! Now it fits perfectly with the MM-Hide-All module. :)

tosti007

@Snille yes it does go well with it

shashank

@Snille hi, i could not able to get pictures on the MM, below is my config and i completely deleted TouchNavigation.css contents and pasted your Custom.css contents

{
            module: "MMM-TouchNavigation",
            position: 'bottom_left',
	        classes: "default everyone",
            config: {
				picturePlacement: "right",
			    minWidth: "40px",
		        direction: "column",
		buttons: {
				"Sun": {
				img: "/home/pi/MagicMirror/Sun.png", 
				width: 60,
				height: 60
			},
			"Moon": {
				img: "/home/pi/MagicMirror/Moon.png", 
				width: 60,
				height: 60
			},
			}
			}
		},

0_1485139242710_upload-29e5e55f-31ad-44ba-97a9-681a1f2f82b9

tosti007

@shashank it’s not able to find the images. Try changing the path. For me (on Windows) images only worked when I placed them in a sub folder in MM and used as path foldername/imagename. So try changing the way you write the path or try placing them in a sub folder

Snille

@shashank Hi! You should not need to delete the TouchNavigation.css file at all. It shall remain, you just have to add the css things in the MagicMirror/css/custom.css nothing else. The module itself shall remain “untouched”, then later on you will not have update problems. :) Also, I did only change what’s needed to be changed in the custom.css there are still settings in the TouchNavigation.css file that may be needed. Regarding the pictures, I’m not sure, as someone else mentioned I think you may need to create a sub-folder for them. But I never tested to have the pictures “locally”. Sorry.

tosti007

@Snille thank you for pointing out about the css file, I read over that!
@shashank what @Snille says is right. The css file should remain as it is and you should put his css in css/custom.css file

GorramRob

Hi! Thanks for writing this! I’m trying to get it running but am having some troubles. I have a handful of modules listed as ignored in the profile switcher module (including the clock so at least something should be showing all the time) but as soon as I enable the TouchNavigation module all I see is a black screen. No modules are displayed/visible.

I double checked the MODULE_DATA from the remote-control module, it appears all the modules are loading correctly. Any thoughts on what might be going on?

tosti007

@GorramRob hmmm that’s fairly odd. Try doing a fresh clone and make sure that your config file it right. Did you add the touchnavigation to the ignore modules aswell, is ne spelling correct (case sensitive) and is the ignoremodules config an array? In the meantime I will have another look at the module trying to figure out what might be wrong.

GorramRob

@tosti007 Huh… I’m not sure what was going on but I cloned a new copy of it and everything seems to be working fine. I thought I had done that before, but maybe not. Thank you for replying so quickly!

tosti007

After the new update of the MagicMirror framework and this issue I updated the css. This means that you can finally use the fullscreen positions for this module!

cowboysdude

Fine module Sir… I’ll be playing with this very soon ;)

tosti007

Hello everybody! I made a new module that is basically a rewrite of this one, but it allows for custom notifications. You can find more info about it here. MMM-TouchNotifications has the same features as MMM-TouchNavigation (the one you are looking at now).

Snille

@tosti007 Darn you! :) Now I have to start using this instead!! Thank you, need to get my mirror up and running again so I can reconfigure it (building frame for the moment). :)

tosti007

@Snille well you don’t have to, it’s just an option :P both still work. The other just allows for more possiblies but does take some more configuration than this module

Binog

Hey, can someone please help, or just post their config file?

1.: I have this, and it does not show anything:
and
2.: What does the payload has to look like? that seems incorrect,… !?

{
           module: "MMM-TouchNavigation",
           position: "bottom_right",
           classes: 'default you me',
   		config: {
   			picturePlacement: "right",
   			minWidth: "30px",
   			direction: "row",
   			//border-radius: "1px",
   			//border-radius: "50%",
   			buttons: {
   				"me": {
   					img: "http://file to jpg", 
   					width: 40,
   					height: 40,
   					profilename: "me",
   					text: "me",
   						},
   				"You": {
   					img: "https://file to .jpg", 
   					width: 40,
   					height: 40,
   					NOTIFICATION: {
   						payload: {
   							//this.sendNotification('CURRENT_PROFILE', 'You')
   								},
   						profilename: "You",
   									},

tosti007

Hello @Binog,
As fully described here you do not need to set something like profilename. The profile name is defined in the string before the : (like the first "me" after buttons).

It’s not possible to have a custom notification. For that you would have to look at this module.

Binog

Thanks for explaining,
Is the Syntax, the same?
I realized,. my module is TouchNavigation thow the installed module in modules ist TouchNavigations,… face-palm