Setting up the mirror communication

Linking the debug hub and the smart mirror software by sending and receiving http requests.


It’s time to connect the debug hub to the mirror.  But in order to do so, I need to add some code to the smart mirror software to be able to accept calls from an external application.

I’ll do that by opening the project in my atom editor, and browsing to the server.js file.  The smart mirror electron project uses a node js framework called “express” to do some simple routing tasks.  I suggest you read up on routing here.

The essence of routing is recognizing an incoming request, doing some stuff, and optionally send some data back.  Ok, that’s dumbing it down a bit, but that’s really all it does.

I will be sending a HTTP command to the magic mirror, but for this to work properly, I need to know the IP address and the port, the electron web server is running on.  The IP is easy (for now) it’s just the local host address  The port is something that is passed on when the server is started.  You can see the code below (in server.js).

Schermafbeelding 2017-01-19 om 22.05.19.png

Notice how the port is configured.  If I look in the configuration file I see that it listens on port 8080.

Schermafbeelding 2017-01-19 om 22.05.39.png

OK, now to set up a simple routing in server.js.

By calling app.get, what really happens is, it adds a callback function to a specific path.  What code below is saying is : if some one comes to the webserver and appends “/comm” to the address, you have to call this function.  All the function does, is parse a parameter from the URL called “command” and stores it in a variable.  The variable is being output to the console, and a response is sent back to the application that did the request.

That’s it.  Really easy.

Schermafbeelding 2017-01-19 om 22.04.06.png

Let’s test this by starting up the mirror application, and opening a browser . The browser will be the calling application this time.  Just type the IPaddress followed by the port and the /comm request, just as it was configured.  You can pass parameters by adding a question mark and passing parameters in a “key=value” fashion.  In the example below I will be sending the parameter called “command” with the value “hide”.

Schermafbeelding 2017-01-19 om 22.03.53.png

And this is what shows up in the browser :

Schermafbeelding 2017-01-19 om 22.03.59.png


In order to connect the debug hub, I will have to change the code of the debug hub to do the same thing as the browser just did.  For this I’ll adjust home.html.

First I’ll add an Id to the 2 buttons.

Schermafbeelding 2017-01-19 om 22.14.11.png

In a script tag, just below the start of the body I will make a new function.  It accepts a command as a parameter.  It will create a new XMLHttpRequest object instance, and call the “open” method, which accepts “GET” or “POST” as the operation for the http request, followed by the exact URL.  The last Boolean indicates that the request needs to be asynchronous : the function does not need to wait for an answer.  Waiting for the answer happens through the use of a callback function.  Javascript is full of callback functions.  Get used to it!  This function is assigned to the “onreadystatechange” variable of the Http request.  It is called whenever a response is obtained from the web server.  When this is successful, it will display an alert with the response of the server.

The “ready” event handler of the document just links the click event of the buttons to the correct call of the sendNotification function.

Schermafbeelding 2017-01-19 om 22.13.23.png

Let’s test this.  Make sure both the mirror and the debug hub are running, and press the hide or show button.  This should happen :

Schermafbeelding 2017-01-19 om 22.13.01.png

Good luck!

One thought on “Setting up the mirror communication”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s