As for the next step of the project I need to make sure that the mirror can display an image when it is asked to do so. We need to take a few steps in order to accomplish that.
As a first step I will extend the debug hub to mimic the Alexa behaviour of adding an “SHOW-PICTURE” command to the DynamoDB command queue table.
For this, I will be extending the already existing “messaging.html” file.
But first, for good measure I’ll add another javascript file to contain a function which I would potentially need on other places as well :
The content is fairly simple :
It’s very similar to what the lambda function is doing actually. Instantiate an AWS object and configure it. Put an item and a payload in the command queue.
Ok, so now to extend the messaging section of the debug hub with another text area.
I gave the 2 text area’s an Id : command & content, and the button as well : submit.
As for the code : a simple call to the function we just created.
Notice how the text area values are obtained using a jQuery command.
Let’s test this.
Click the send button, an there’s the result :
The next step is to extend the magic mirror module for the Alexa interface. In an earlier post I showed you how I used a “handleCommands” function searches for the items in the DynamoDB table and reads them to pass them on using the “sendSocketNotification” function. I’ve added a little bit of code here.
Notice how I construct a JSON object and add the command and the content to it. This is the payload of the “sendSocketNotification“. This way, the module knows the command, but also the content it needs to display.
In the mirror module itself, this type of command is now handled by this piece of code in the socketNotificationReceived function :
Essentially, this is also fairly simple. All it does is construct its own payload from the payload it’s receiving. This is passed to a notification with as type “INFO-DISPLAY“. This notification is to be handled by another module that takes care of the display functionality. Notice how I deliberately didn’t call it “show picture” or anything. Theoretically this info could be something totally different from a picture, so I’ve made it a bit more generic.
As it happens, I don’t have this module yet, so I decided to create it. Here it is :
Our next little module. Its configuration is easy :
Just put it in the middle of the screen. That’s it. No fuss (for now).
The code is pretty straight forward. The standard stuff for a basic mirror module, but the “notificationReceived” function looks like this :
Here I check if the notification is “INFO-DISPLAY”. Notice how I don’t check for the “type” attribute of the payload yet. I’m just assuming that it’s some name of someone or something I’m getting passed a long, of which I need to show the picture.
The showing of the picture is setting the “src” attribute of an image, and setting it to visible. I’m sorry if I’m violating some copyrights here by taking an online image, but that’s just the easiest way to test this.
The “this.imagepointer” is a variable that is created in the “getDom” function of the magic mirror module. It looks like this :
Just create an “img” tag and append it to the wrapper. Reset the “src” attribute, give it some dimensions and hide it. From here on, the “this.imagepointer” can be used in the mirror module without a problem, and that’s just what happens in the “notificationReceived” function.
I’ve got a node helper for this one, but it doesn’t do anything for now. That’s the next step: have it get a picture from the content that it has been passed, and pass it back to the mirror module to be shown.
But that’s for the next post. Here is the result for now :
Cheers!
Smart Mirror Project 