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)
- build.zip
Additional files of any type are allowed. The build.zip 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 build.zip
, 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 build.zip
, 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.