MMM-TouchNavigation, A Touch Activated Profile/Layout Changer

[broberg]

@tosti007 add z-index: -1 or 0 to the region fullscreen above, it blocks everything beneath so it can’t be clicked ( or add z-index: 2 to the module div)

[tosti007]

@broberg yea I thought that would work too, however when I set z-index to -1 on region fullscreen nothing much happened. I will try that z-index of 2 on the module dif aswell

[tosti007]

@broberg Only setting region fullscreen to 0 worked. Not entirely sure tho. Anyways ty for the tip! Updated my module :)

[shashank]

@tosti007 hi, after git pull, module working great, Thanks for your quick response , keep rocking…

[shashank]

@tosti007 , Any possibility of using JPG photos of users instead of symbols in the TouchNavigation module, this will give a good interaction with the mirror

[tosti007]

@shashank you are welcome :) and about the images: yes I think that would be most definitely possible. However then the button size might become a problem if it’s too big, but I can give it a try.

[shashank]

@tosti007 hi, other modules are ovelapping on to Touch Profile , how to move touch profile icons to extreme bottom or top

[tosti007]

@shashank a way would be to change the z-index in teh css file to a higher number, I will have a look at it

[strawberry 3.141]

@tosti007 when you just change the zindex the modules are still overlapping

you could create a class left center and right and then classes for top middle bottom and let the user decide which position it has like bottom right

[tosti007]

@shashank I am not able to reproduce the error, could you tell me what your config looks like?

@strawberry-3-141 would be a neat feature. However you can already do that by setting the position of the module different?

[strawberry 3.141]

@tosti007 nevermind i thought i read that you should put it in fullscreen_above, but that was probably another module sry

[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
			},
			}
			}
		},

[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