Smart Mirror: Module development guide


2017-02-10 17:26:56

This is a simple guide on how to develop a module for the Smartmirror project. A detailed description of style guides and APIs can be found in the repo.

File structure

The repo should contain the following files:

  • module.js
  • module.json
  • version.txt
  • style.css (optional)

Additional files of any type are allowed. The should always contain the latest working versions of all files. If you require other libraries than the included ones (jquery, doT.js, responsiveVoice), please provide their files inside your, you can't download any custom npm module and should not require libraries from online, since the mirror might not always be connected to a network. Every time you update your, increase the number stored in version.txt by 1.

Mirror API

Your module will be running inside an electron browserWindow, so you have all browser and node APIs available. If you need some of the included APIs, note that your module will be located under modules/[your-module-name], so to require() a file from the mirror, you first have to go up two directories. For example require('../../renderer.js') to get the main renderer.Also note that some files should NOT be required during load time, but just once your mirror should actually display something. This is to avaid circular dependency problems. Those files currently only include renderer.js.

module.json Setup

This file defines what your module can do. Set providesStatus to true, if your module should provide a consistent status bar widget. Note that you then also have to include a status object with a position key that either has a value of left or right, to set the position of your status widget. Set providesFeed to true, if you want to be able to provide feed items.

module.js Basics

This file is your main entry and will be require()d once the mirror boots up. You can't yet display anything, so only use for basic setup. module.exports should be set to a function with the following signature: function (data) That function gets passed the data keys that can be defined for each module in the global settings.json file, so you can put API Keys or preferences there. Those can also later be changed via the Android app (more on that soon in another post). The function should also return an object containing all the functions to render your module. Depending on what you defined in module.json, that should either be a renderStatus function with the signature function (jqueryDomNode) or a renderFeed function like function (jqueryDomNode), or both. The jqueryDomNode will be a reference to a jquery-enhanced dom element which you can then fill with your content.