@crown
Hi,

i use MMM-Touch with my 10 inch touch screen and it is working very well.
BUT i do not use MMM-pages but MMM-ProfileSwitcher with MMM-ProfileControl instead. MMM-ProfileControl provided me more flexability with modules like MMM-CalenderExt2. Nearly all of my modules do provide profile support and display/hide stuff depending of the current profile.

In my case i do have 9 horizontal profiles (which are basically pages) and one vertical profile. I configured MMM-ProfileSwitcher to start at “pageC” (my center page) and can switch 4 pages to the left or right from this point.
The profiles can be selected either by pressing the “bubble” of the profile in MMM-ProfileControl or i can swipe left/right to change to the next one. I configured MMM-Touch to send “USER_PRESENCE” notifications for all other gestures to prevent my screensave module of shutting off the screen.
The following configuration shows my setup. I left the configuration of clock as you can see how modules can be configured to be visible at specific profiles.

{ module: "clock", position: "top_center", classes: "pageC pageL1" }, { module: "MMM-ProfileControl", position: "bottom_center", config: { profiles: [["pageL4"], ["pageL3"], ["pageL2"], ["pageL1"], ["pageC"], ["pageR1"], ["pageR2_1", "pageR2_2"], ["pageR3"], ["pageR4"]], zeroVerticalIndexOnHorziontalChange: true, showSeparator: false, showVerticalIndicator: false, sendPresenceNotificationOnAction: true }, classes: "pageL4 pageL3 pageL2 pageL1 pageC pageR1 pageR2_1 pageR2_2 pageR3 pageR4" }, { module: "MMM-ProfileSwitcher", config: { defaultClass: "pageC", ignoreModules: [ "MMM-Touch" ], leaveMessages: false, enterMessages: false } }, { module: "MMM-Touch", position: "bottom_center", config: { debug: true, useDisplay: false, defaultMode: "default", gestureCommands: { default: { TAP_1: (commander) => { commander.sendNotification("USER_PRESENCE", true); }, PRESS_1: (commander) => { commander.sendNotification("USER_PRESENCE", true); }, SWIPE_UP_1: (commander) => { commander.sendNotification("USER_PRESENCE", true); }, SWIPE_DOWN_1: (commander) => { commander.sendNotification("USER_PRESENCE", true); }, SWIPE_LEFT_1: (commander) => { commander.sendNotification("PROFILE_INCREMENT_HORIZONTAL", null); }, SWIPE_RIGHT_1: (commander) => { commander.sendNotification("PROFILE_DECREMENT_HORIZONTAL", null); } } } } },

Be aware that CSS z-index is a very powerful weapon if you use touch cause overlapping modules may overlap things you want to press. Sometimes playing around with different z-index settings is necessary to find the right order for the modules.

I ended up configuring a z-index of -1 for all module that is hidden (cause it is not visible in the current profile) in my custom.css:

.module.MMM-Bring.hidden, .module.MMM-TouchButton.hidden, .module.MMM-SynologySurveillance.hidden, .module.MMM-EmbedURL.hidden { z-index: -1; }

and add a “normal” z-index to it if it is visible:

.module.MMM-Bring:not(.hidden), .module.MMM-TouchButton:not(.hidden), .module.MMM-SynologySurveillance:not(.hidden), .module.MMM-EmbedURL:not(.hidden) { z-index: 500; }

I also added a very high z-index for the components of MMM-ProfileControl to make sure to be able to control my profiles in all situations:

.MMM-ProfileControl { z-index: 2000; } .MMM-ProfileControl .indicator { z-index: 2005; }

@sdetweil Thanks, however that file does not contain info on how we have responded to the invitations! (e.g., are we attending the training/match in question?)

I’ll have to do the scraping, I believe.

@wishmaster270 I ended up using MMM-EmbedURL and it worked fine for what I was trying to do. Thanks all for your help
N6NG
DENNIS

@BKeyport ah, I see the question… never heard a period called that

Bonjour à tous. J’entame mon premier Fork sur github et je souhaiterais pour commencer modifier un module existent, MMM-Selfieshot
Je commence par vouloir modifier l’icône

start: function() { this.session = {}; self = this; this.sendSocketNotification("INIT", this.config); this.lastPhoto = null; this.selfieIcons = { '1': 'resources/selfie-icon.png', '2': 'resources/bd1.png', '3': 'resources/bd2.png', '4': 'resources/hallow1.png', '5': 'resources/hallow2.png', '6': 'resources/hallow3.png', '7': 'resources/hallow4.png', }; if (this.config.iconStyle!= '') { this.url = this.selfieIcons[this.config.iconStyle] }; getDom: function() { if (this.config.displayButton) { var wrapper = document.createElement("div"); var getTimeStamp = new Date(); var icon = document.createElement("img"); icon.id= "SELFIE-ICON"; icon.style.backgroundImage = "url("+this.url+")" icon.classList.add("flash"); icon.src = "modules/MMM-Selfieshot/resources/" +this.url + "?seed=" + getTimeStamp; var session = {}; icon.addEventListener("click", () => this.shoot(this.config, session)) wrapper.appendChild(icon) //icon.addEventListener("click", () => this.disabled(payload) } return wrapper },

Ceci me renvoie un carré noir tactile qui déclenche l’événement, mais ne prend pas en compte l’image attribué. Quelqu’un aurait une idée ?

@sdetweil
:_(
MMM-ModulePosition almost perfect, except for the impossibility of making changes without restarting and rewriting the file. Although I would put up with the fact that you need to restart the program, if only it was automatic

I created powersaving program for automatically start the RaspberryPi, if a motion ist detected via PIR-sensor and shut down after a waiting time.

It’s at Git and I want to share it with you. I would be happy if you give me Feedback.
https://github.com/ChrisBaehrig/MM-PIR-motion-poweron

@sdetweil Thanks Sam! Ughh…I feel pretty silly that I didn’t realize that. Was looking at the least obvious issue. Works perfectly after installing Python 2. Thanks again!

@CurlyQ12391 np. I was just trying to help you make progress. I know nothing about the API. but couldnt find anything similar to the code in the helper

@FlatPepsi also, something like this might help

https://github.com/amcolash/MMM-json-feed

put in your url, display data

@MMRIZE and @sdetweil Thanks guys, Thought I would put the question out there and see what crawls out the woodwork. 😉

@Amit5001 so, you will need to write a module.

mm runs inside a browser, electron, chrome, Firefox, … it displays one web page

each module gets data from somewhere and builds a small blob of html, or dom content, and gives that to mm, which places it in the browser DOM in the position you configured

the spec is here
https://docs.magicmirror.builders/development/introduction.html

you can use my SampleModule as a starting place, it’s got all the parts

https://github.com/sdetweil/SampleModule

something to do before that, is to figure out how u want it displayed and build the html to do that, it’s just text. you can test that output in any browser.

a module is split into 2 parts.
the part that runs in the browser and does all the display work
I call it modulename.js cause it’s filename matches the module name. it’s the part that interfaces to mm

but a browser cannot read files (incl database) or touch hardware directly. for security. browser cannot import or require to load libraries.

so if u need to do that, you use the helper, called node_helper.js. there is a small communication mechanism between the two parts.

modulename.js sends a message, send socket notification
and the helper receives them, receiveSocketNotification

when done the exact same calls are used in the other direction. helper sends module name.js receives. this is a private channel between this module and it’s helper.

@kayakbabe DRAT! I just crushed my microSD with my wheelchair. It is definitely time for bed.

@EphraimB you can view and save that as an image. the railroad tracks and terminals are not gonna move today… or anytime soon

@sdetweil Works as you wrote. Sadly its not in the documentation.

@Rattenjunge8080 So, i found a Solution, if anyone is interested, be my guest to copy this (spaghetti-code! I catch exceptions cause i am not able to check if and how many pictures are already loaded):

/* MagicMirror² * Module: Scare * * By Rattenjunge8080 * */ Module.register("Scare", { // Default module config. defaults: { }, start: function(){ //The container which will be shown in DOM this.container = document.createElement("div"); this.visible = true; //set true via resume this.blocker = false; //block multiple DOM-calls image1 = document.createElement("img"); image1.src = '/modules/Scare/img1.jpg'; image1.classList.add("image1"); image2 = document.createElement("img"); image2.src = '/modules/Scare/img2.jpg'; image2.classList.add("image2"); }, // system notification your module is being hidden // typically you would stop doing UI updates (getDom/updateDom) if the module is hidden suspend: function(){ console.log('suspend'); this.visible = false; this.updateDom(1000); //TODO If in future not all pictures are removed->Delete the container: //this.container.remove(); }, // system notification your module is being unhidden/shown // typically you would resume doing UI updates (getDom/updateDom) if the module is shown resume: function(){ console.log('resume'); //TODO If in future not all pictures are removed->add here the container: //this.container = document.createElement("div"); this.visible = true; this.updateDom(); }, /* * Here the first Image will be added to a container, shown on screen * and a timer will count down. Let them feel safe for a while... * then a new image will pop up and a sound is played */ showImageAndPlaySound() { this.blocker = true; //TODO: Maybe useful in future //this.container.innerHTML = "<img src=\"/modules/Scare/OVAL.png\" width=\"200px\" height=\"500px\">"; //Put in picture to let it print on DOM this.container.appendChild(image1); this.updateDom(); console.log("set timeout 10s"); try { setTimeout(() => this.container.removeChild(image1), 10000); }catch (e) {console.log("catch timeout line 70");} setTimeout(() => this.container.appendChild(image2), 10000); this.updateDom(); //Generate the Audio from local file TODO auch mit setTimeout machen var audio = new Audio("/modules/Scare/sound.mp3"); audio.play(); this.blocker = false; }, /* * Here the first Image will be added to a container, shown on screen * and a timer will count down. Let them feel safe for a while... * then a new image will pop up and a sound is played */ getDom: function(){ if(this.visible){ if(this.blocker === false){ this.showImageAndPlaySound(); }else{} }else{ //When the Module is not shown, then remove the 2 Images try { this.container.removeChild(image1); this.container.removeChild(image1); this.container.removeChild(image1); this.container.removeChild(image1); this.container.removeChild(image1); this.container.removeChild(image1); } catch (e) {console.log("catch remove child img 1");} try { this.container.removeChild(image2); this.container.removeChild(image2); this.container.removeChild(image2); this.container.removeChild(image2); this.container.removeChild(image2); this.container.removeChild(image2); }catch (e) {console.log("catch remove child img 2");} } return this.container; } });

@jwilson5607 glad u got it working…

if I hadn’t done my own chartjs module, I would have had no clue,

@bugsounet
Thanks a lot for your kind informations.

@sdetweil Thanks Sam. Will give that a go.