MMM-TouchNavigation, A Touch Activated Profile/Layout Changer

[tosti007]

This Module adds a menu with buttons to change between different layouts. It works together with MMM-ProfileSwitcher. This module does the actual changing of layout. However if you do not want to use this module then you can make your own/use a different module for it aswell (if you change a bit of the code).
You can configure multiple buttons with either a symbol, some text or both. The button that is currently selected will light up a bit. Lastly you can also change the direction of the menu buttons and the placement of the symbol.

Features

• Custom Text
• Custom Symbol or Own Image
• Customisable Button Size
• Customisable Direction
• Customisable Symbol/Image position

You can find it here.
[card:tosti007/MMM-TouchNavigation]

If you have any questions or requests for future features, don’t hesitate to ask!

Some screenshots with different configurations:
Horizontal layout (row), symbol left, current “Brian”

Horizontal layout (row), symbol top, minimum width 65px, current “default” (no text set so only symbol shown)

Vertical layout (column), symbol right, current “Lisa” (no symbol set so only text shown)

---

Version 1

• First version and implementation
• Added config example
• Bug fixes

---

Version 2

• Added configurable images!
• Code cleanup/small optimisation
• Updated readme and config example

Important Note:
symbolPlacement is renamed to picturePlacement in the configuration options!
The css class navigation-symbol is renamed to navigation-picture

---

Version 2.1

After MagicMirror framework update 2.1.1

• Removed fullscreen region’s z-index in the css
• Fullscreen position works!

[tosti007]

I saw some people around doing this and thought it would be a nice challange, so I gave it a go and this was the result. Hope it helps anyone since I don’t have a touch magic-mirror myself (I used my normal mouse for testing).

[shashank]

@tosti007 Hi, below is my config of touchnavigation, nothing gets displayed on the MM, please show the config steps on both classes ( everyone and user1)

{
  module: 'MMM-TouchNavigation',
    config: {
      buttons: {
        'default everyone': { 
          text: 'text',
          symbol: 'ban'
        }
      }		          
    }
},

---

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

[tosti007]

@shashank you are currently using two one button for two profiles, that’s why it doesn’t do anything. If you want that as a feature I can implement it for you. One way to solve this currently would be to use the class everyone for the button and set the includeEveryoneToDefault in profileswitcher config to true. Or make a different profile name.

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