MMM-TouchNavigation, A Touch Activated Profile/Layout Changer

[shashank]

@tosti007 I could not get this working, can you please give an example code for both profileSwitcher and touch Navigation with few modules , Thanks

[tosti007]

@shashank Hmm odd, what did you see on your screen and what config did you use?
This should work just fine:

    modules: [
        {
            module: "alert"
        },
        {
            module: "MMM-ProfileSwitcher"
        },
        {
            module: "MMM-TouchNavigation",
            position: "bottom_center",
            classes: "default everyone",
            config: {
                buttons: {
                    "default": {
                        symbol: "ban"
                    },
                    "Brian": {
                        text: " Brian",
                        symbol: "paper-plane"
                    },
                    "Lisa": {
                        text: "Lisa"
                    }
                }
            }
        },
        {
            module: "clock",
            classes: "everyone",
            position: "top_left"
        },
        {
            module: "clock",
            classes: "default",
            position: "middle_center",
            config: {
                analogShowDate: false,
                displayType: "analog"
            }
        },
        {
            module: "helloworld",
            classes: "Lisa",
            position: "lower_third"
        },
        {
            module: "helloworld",
            position: "top_right",
            classes: "Brian"
        }
    ]

Edit: I added a ready-to-use config file in the repository. If you copy-paste and rename it it would work.

[shashank]

@tosti007 hi, i tried this example classes names are displayed with Analog and Digital clock , but not able to do profiile switching between Brain and lisa
{
module: “MMM-ProfileSwitcher”,
config: {
includeEveryoneToDefault: true,
}
},

[tosti007]

@shashank and what is your config for the touchnavigation? I also uploaded an example config file that should work in the repository

[shashank]

@tosti007 This is my config.js

modules: [
{ module: ‘alert’,},

	{ module: "updatenotification", position: "top_bar" },	
	
	{
        module: "MMM-ProfileSwitcher",
		config: {
			includeEveryoneToDefault: true,
		}
    },
    {
        module: "MMM-TouchNavigation",
        position: "bottom_center",
        classes: "default everyone",
        config: {
            buttons: {
                "default": {
                    symbol: "ban"
                },
                "Brian": {
                    text: " Brian",
                    symbol: "paper-plane"
                },
                "Lisa": {
                    text: "Lisa"
                }
            }
        }
    },
    {
        module: "clock",
        classes: "everyone",
        position: "top_left"
    },
    {
        module: "clock",
        classes: "default",
        position: "middle_center",
        config: {
            analogShowDate: false,
            displayType: "analog"
        }
    },
    {
        module: "helloworld",
        classes: "Lisa",
        position: "lower_third"
    },
    {
        module: "helloworld",
        position: "top_right",
        classes: "Brian"
    },

	
	]

[tosti007]

@shashank Oh damnit, I made a terrible mistake while testing. Turns out that I was using the developer branch while testing. In the developer branch they fixed pointer events from fullscreen region not passing down onto the underlaying modules. So when you used my module it did not send the pointer events to the buttons. I made a new commit to my module so it should be fixed if you pull the changes (goto MMM-TouchNavigation folder and do git pull). However you cannot use this module in fullscreen mode now. If you desire to do so let me know and I will go more in depth on how to solve this issue. Thank you for letting me know!

[tosti007]

@all IMPORTANT NOTE: Unfortunatly setting this module to full screen does not work. The menu floats in the top left corner and you cannot press any buttons! I might be able to fix this, but since there is no audience currently wanting this feature I will wait for the new MagicMirror version (where this issue will be fixed). Let me know if you want to have it full screen aswell and I will see what i can do!

Edit: thanks to @broberg this issue was solved :)

[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! :)