Kitchen Touchscreen Dashboard

sdetweil

@Niggich very cool… if you hadn’t seen it

you can change the indicator circles to actual buttons
https://forum.magicmirror.builders/topic/18876/mmm-carousel-pagination-icons/8?_=1735070775315

Niggich

@sdetweil Thank you. I didn’t know this. I will have a look later…

MZ-BER

@Niggich I’ve got so many questions — but first, huge kudos on this amazing work!

Could you share which display you’re using? And are you still happy with it?

Also, the smart home control interface (lights, heating, etc.) — is that a MagicMirror module visualizing data from Home Assistant?

Niggich

@MZ-BER Thank you! You’re Welcome!

I’m using the MM as a server and just open Webpage in Chromium on Ubuntu. For this I using an Intel Nuc and 23" Dell Touch Monitor. I can share some more Pictures this evening.

The SmartHome Control is an embeded Webpage I made with iQontrol from ioBroker and the Visualization is Grafana. Also as an embeded Webpage. Grafana takes the data from ioBroker.

Here are some Pictures of the Screen (not only Screenshots)…

seabass

@Niggich I see you’re using the MMM-Touch and MMM-pages modules. Are you able to swipe to the next page configured with the MMM-pages module? Would you be able to share your module configuration for the MMM-Touch and MMM-pages modules as I’m unable to get the MMM-Touch module working with my setup. Thank you!

Niggich

@seabass said in Kitchen Touchscreen Dashboard:

I see you’re using the MMM-Touch and MMM-pages modules. Are you able to swipe to the next page configured with the MMM-pages module? Would you be able to share your module configuration for the MMM-Touch and MMM-pages modules as I’m unable to get the MMM-Touch module working with my setup. Thank you!

 {
			module: "MMM-Touch",
			position: "top_center",
			classes: "",
			    disabled: false,
			    config: {
				debug: false,
				useDisplay: false,
				autoMode: false,
				defaultMode: "default",
					gestureCommands: {
					  "default":{
							"TAP_1": (commander) => {commander.sendNotification("USER_PRESENCE", true);},
							"SWIPE_RIGHT_1": (commander) => {commander.sendNotification("PAGE_DECREMENT", null);},
							"SWIPE_LEFT_1": (commander) => {commander.sendNotification("PAGE_INCREMENT", null);},
							"SWIPE_DOWN_1": (commander, gesture) => {commander.sendNotification("ARTICLE_PREVIOUS")},
							"SWIPE_UP_1": (commander, gesture) => {commander.sendNotification("ARTICLE_NEXT")},
							"SWIPE_DOWN_2": (commander, gesture) => {commander.sendNotification("BACKGROUNDSLIDESHOW_PREV")},
							"SWIPE_UP_2": (commander, gesture) => {commander.sendNotification("BACKGROUNDSLIDESHOW_NEXT")},
							//"DOUBLE_TAP_1": (commander) => {commander.sendNotification("LOAD_NEXT_WALLPAPER", null);},
							"SWIPE_LEFT_2": (commander) => {commander.sendNotification('CX3_GET_CONFIG', {callback: (before) => {commander.sendNotification('CX3_SET_CONFIG', {monthIndex: before.monthIndex + 1,callback: (after) => {setTimeout(() => { commander.sendNotification('CX3_RESET') }, 60_000)}})}})},
							"SWIPE_RIGHT_2": (commander) => {commander.sendNotification('CX3_GET_CONFIG', {callback: (before) => {commander.sendNotification('CX3_SET_CONFIG', {monthIndex: before.monthIndex - 1,callback: (after) => {setTimeout(() => { commander.sendNotification('CX3_RESET') }, 60_000)}})}})},
				}, 
			}
		},
  },

seabass

@Niggich Thanks for the sample code. Unfortunately I still can’t get it working. I’m also using the MMM-ViewNotifications module and never see a notification sent from MMM-Touch when swiping. I used your exact code but commented out all the gestures except SWIPE_RIGHT_1 and SWIPE_RIGHT_2.

I know the touchscreen works because I’m also using the page-indicator module which sends the notification to change pages without issue. Do you have any suggestions on what I can look at?

Thanks!

Niggich

@seabass Ok, do you have MMM-Remote-Control installed?
Can you share your config by the way?

seabass

@Niggich Hopefully the format looks okay but here you go. Thanks in advance for your help. Under the MMM-Touch section I currently added another sendnotification NEW_PAGE but it didn’t have any impact.

let config = {
	address: "localhost",
	port: 8080,
	basePath: "/",
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1", "192.168.1.228"],
        useHttps: false,
	httpsPrivateKey: "",
	httpsCertificate: "",

	language: "en",
	locale: "en-US",
	logLevel: ["INFO", "LOG", "WARN", "ERROR"],
	timeFormat: 12,
	units: "imperial",

	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		},
		{
			module: "calendar",
			header: "US Holidays",
			position: "top_left",
			config: {
				calendars: [
					{
						fetchInterval: 7 * 24 * 60 * 60 * 1000,
						symbol: "calendar-check",
						url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
					}
				]
			}
		},
		{
			module: "compliments",
			position: "lower_third"
		},
		{
			module: "weather",
			position: "top_right",
			config: {
				weatherProvider: "openmeteo",
				type: "current",
				lat: 44.953873,
				lon: -123.0884734
			}
		},
		{
			module: "newsfeed",
			position: "bottom_bar",
			config: {
				feeds: [
					{
						title: "Fox News",
						url: "https://moxie.foxnews.com/google-publisher/latest.xml"
					}
				],
				showSourceTitle: true,
				showPublishDate: true,
				broadcastNewsFeeds: true,
				broadcastNewsUpdates: true
			}
		},
		{
		        module: 'MMM-page-indicator',
		        position: 'bottom_bar',
		        config: {
            		activeBright: true,
		        }
		},
		{
			module: "MMM-pages",
		        config: {
		            timings: {
                		default: 5000,               // rotate every 5 seconds
		                0: 20000                     // page 0 rotates every 20 seconds
		            },
		            modules: [
                		["newsfeed"], 				 // page 0
		                ["calendar", "compliments"], // page 1
		            ],
		            fixed: [                         // modules that are always shown
						"alert",
                		"clock",
		                "weather",
                		"MMM-page-indicator",
						"MMM-Touch",
						"MMM-ViewNotifications"
		            ]
		        }
		},
		{
		        module: 'MMM-ViewNotifications',
		        position: "top_left",
		        header: "Notifications",
		        config: {
                		// See below for Configuration Options
            		}
       	},
		{
			module: "MMM-Touch",
			position: "top_center",
			classes: "",
			disabled: false,
			config: {
				debug: false,
				useDisplay: false,
				autoMode: false,
				defaultMode: "default",
				gestureCommands: {
					"default": {
						"TAP_1": (commander) => {commander.sendNotification("USER_PRESENCE", true);},
						"SWIPE_RIGHT_1": (commander) => {
							commander.sendNotification("NEW_PAGE"),
							commander.sendNotification("PAGE_DECREMENT", null);
						},
						"SWIPE_LEFT_1": (commander) => {
							commander.sendNotification("NEW_PAGE"),
							commander.sendNotification("PAGE_INCREMENT", null);
						},
					}
				}
			}
  		}
	]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") { module.exports = config; }

Niggich

Hey @seabass, it look’s good. I’m not sure but I think you need to install MMM-Remote-Control for sending notifications. Maybe @sdetweil can tell us more about this? Thanks.