Button / modul

Marko

Hi,

i have add a button on magicmirror main screen. Problem is that i can’t start button (it is not interactive), i cant click on him. What i want to do is have button that can link me to some site or local path on pc. Is thare solution for this? Please help someone!

Thank you,

P.S. Michael, i just want to say that the project is great. Just ahead with development. Regards!

romain

How did you add your button ? if you added it by using the document.createElement(“button”) from a js file, I beleive you can use the following syntax to add an action to it

var newButton = document.createElement("button");

newButton.addEventListener("click", function (event) {
   //your instructions here      
 });

But in order to press it, I guess you would have to show your mouse right ? or maybe you have a touchscreen.

Marko

Thank you for help,

but i didn’t get the click in function, i tray to add it like my own module and put it in index.html, but both doesn’t work. I have it on screen but it is not operational, in my test html it works. I remove hidden mouse cursor in css, so i can move it ower screen for testing but it will fit behind touchscreen. I’m begginer in javascript, so this is my first time meet with node and electron. Is modul requires certain writing rules to be active?

Thank you

romain

@Marko Can you copy past what you did exactly ?

Marko

No problem,

i add this in head in html:```
function myFunction() {
var newButton = “Click me!”;
var result = newButton.link(“https://www.google.com”);
document.getElementById(“btn”).innerHTML = result;
}

This works great in my html file. 

Thank you Romain

broberg

@Marko it’s better if you don’t alter the index.html file and instead write a module to display the button. Use the default hello world module as a base.

Marko

@broberg i modify helloworld just like you sead, but still not active. Is thare function that can call it?
Thank you again! ```
//your code here

 	getDom: function() {
		var wrapper = document.createElement("a");
		wrapper.innerHTML = "<a href="https://www.google.hr">" + this.config.text + "</a>";
		return wrapper;
	}
});

broberg

@Marko well, you really can’t open links in that manner inside the MM, either you have to open a seperate browser or maybe if it’s possible to run google within an iframe (can’t remember the latest verdict on this subject).

And, what version of the mirror are you running?

Marko

@broberg i’m running MM ver. 2.1.0 on Win 10 and Node.js 7.9.0 installed

broberg

@Marko aahh okey. To be able to click on anything on the 2.1.0 and prevoius versions you need to change the fullcreen region property.

So either update to 2.1.1 or add


.region.fullscreen {
  pointer-events: none;
}
.region.fullscreen * {
  pointer-events: auto;
}

To your custom.css file