Creating the debug hub

Create the main interface of the debug hub using a sidebar and Photon Kit.

Advertisements

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 :

https://github.com/sindresorhus/electron-boilerplate

I’ll create a new folder in my Github folder on my Mac.

mkdir debughub

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 :

nano package.json

Make sure the start script contains the following :

./node_modules/.bin/electron .

The end result looks like that :

Schermafbeelding 2017-01-17 om 20.19.31.png

Now you should be able to start the application using the “npm start” command.  It will look like this :

Schermafbeelding 2017-01-17 om 20.20.12.png

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.

Schermafbeelding 2017-01-17 om 20.23.00.png

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.

Schermafbeelding 2017-01-17 om 20.24.36.png

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 :

Schermafbeelding 2017-01-17 om 20.32.12.png

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.

Schermafbeelding 2017-01-19 om 19.55.11.png

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.

After configuring all of this (we haven’t had to write 1 letter of javascript yet) the end result should look like the image below.

Schermafbeelding 2017-01-17 om 21.50.32.png

Good Luck!

 

 

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s