Alright, let’s start building a debug hub application. For more info on the general idea, see my last post here.
Pondering on the idea in what technology I want to make this, I came to the conclusion that it might be a good idea to also create this in Electron. That way I’ll get to know the software better, and have native support for HTTP GET and POST operations. Furthermore, it doesn’t seem all that difficult. If needed I would also be able to run it on the Pi without too much trouble. But I’ll keep it on the Mac for now.
Creating a new Electron app isn’t that difficult. Turns out there are some “boiler plate” applications you can download, containing all of the essential files to start building your own. An example can be found here :
I’ll create a new folder in my Github folder on my Mac.
And in it, I will get the boiler plate application like so :
sudo curl -fsSL https://github.com/sindresorhus/electron-boilerplate/archive/master.tar.gz | tar -xz --strip-components 2
Once we’ve done that we only have to install the electron and electron-debug modules in order to be able to build it.
npm install electron
npm install electron-debug
In order to start it with “npm start” I will have to change the “package.json” file :
Make sure the start script contains the following :
The end result looks like that :
Now you should be able to start the application using the “npm start” command. It will look like this :
I’ll check out the code for that . In order to do that I will add another project folder to my atom editor. You can add as many as you like. In the screenshot below you can see I added the smart mirror & debughub project into 1 overview.
Let’s clean up a bit & remove the <h1> tag in “index.hml”. It will get rid of the gigantic text in the mirror of the window.
In order to create the controls there are some great extensions to electron you can download for free . One of them is called PhotonKit. It can be found here : http://photonkit.com
Just go the site, and you will be able to download all the files without even registering. After doing that, I’ve copied the “css” and “fonts” folders to my debughub folder. That looks about like this in Atom :
The cool thing about photon is that you can very quickly create a slick interface using only some standard CSS and HTML. You can read a very comprehensive guide with some examples at their getting started page : http://photonkit.com/getting-started/
An overview of the different components you can use out of the box can be found here : http://photonkit.com/components/
In order to allow my applications to access the different styles Photon delivers, I just have to add a link to the css file it delivers. You can do that in the header section of index.html.
<head> <meta charset="utf-8"> <title>Smart mirror debug hub</title> <link rel="stylesheet" href="./css/photon.css"> </head>
Net next thing we need to do is define the window content. I want to create a sidebar with a number of sections. If I click a section, some other controls need to appear in another pane (a content pane if you will) at the right hand side.
Creating such a sidebar is just some HTML code that takes advantage of some classes defined in the photon.css file. Below you can find my code for my sidebar.
As you see, it’s just some configuration. By defining a with a class of “pane-sm sidebar” I am able to create a side bar and fill it with a div called “nav-group”. You can a divide a sidebar up into multiple groups. Each group has a title (I’ll call mine ‘Smart Mirror’ for now, and I will be defining a few sections in here. The things are remarkable here :
- The active section has got a different class than the inactive ones.
- Each section contains a second span with a class that refers to a different icon. Just look on the Photon Kit website, in the components section for the references to the correct icons.