Home Security/Automation System - New Design!

Design Update  (February 17, 2016)
Previous     Next     Table of Contents

Well, if you've been following this blog from the start, then you know that I've had a lot of hurdles to overcome!

My background in programming, while extensive (beginning in 1977) and including many programming languages, did not have any real front-end presentation layer activities.  So, with no front end stuff, then no HTML, no Javascript, no Nodejs, no Express, no Jade.....just a lot of "no's!".

Since I had a lot of Java background, that was my first approach.  But it was just too heavy for my target hardware - a Beaglebone Black.  Also, I was tired of programming in it!  Since I was now retired, I decided I wanted something more efficient than Java, both from a programming standpoint, as well as a system load standpoint (Beaglebone remember!).

My search led me to Python.  I considered Scalia and Ruby, but Python looked good to me, and was something I could easily use on future code for around the house.  So, I started planning on Python.  But I ran into a problem on the front end presentation layer - not much better than what I was used to in Java!   But I kept going...see my posts on Kivy on this blog.

Life intervened, and I had to stop the project for a while.  But I kept occasionally researching, and somewhere came across nodejs.  This really peaked my interest.

I dug into nodejs (note: this is the new, correct spelling for this product; after their recent merger, then changed the name from node to nodejs).  I really liked what I saw.  That, along with the ability to push data to a HTML5 browser (I refused to do polling) meant I could move off of Kivy etc. bandwagon, and move to a browser, which would simplify a lot of things, particularly with respect to system monitoring while away from home via the internet.

So, I started leaning Nodejs, which begat getting a firmer knowledge in Javascript.  Then backtracking to HTML, then CSS - none of which I needed in my professional life before; well, OK, I did some stuff, but barely anything.  Then came Jade, and document databases, and Nedb.  Then somewhere Express.  I stayed away from CSS, Express, Jade for a while, because I was concerned about the Beaglebone being able to host all of this, but it turned out not to be a problem.

So, if you were like me, experienced programmer, but needing web based knowledge, then I was suggest the following learning path, in this order:

1. HTML
2. CSS
3. Javascript
4. Nodejs
5. Express
6. Jade

So, my redesign!

• Uses the Beaglebone Black.  I'm going to also develop on the Raspberry PI 2; will update with that info.
• Hosts a web server via Nodejs
• Uses the Google Chrome browser.  Others may work, but I'm not testing or programming to those other platforms.
• Provides dynamic web page security updates.
• Displays current weather information while no security work or events taking place.

Since the base display is weather displays, and I needed somewhere to start, I first programmed the weather display system.  The design for this is:

• Runs on Beaglebone
• Hosts a web server via Nodejs
• Uses the Google Chrome browser.
• Provides dynamic web page weather updates.
• Obtains live data from wunderground.com for my local, every 5 minutes.
• Obtains static radar jpg images from weather.gov and wunderground.
• Displays a digital clock, data from the Beaglebone pushed to web page.  If the network drops, the Beaglebone freezes, the server freezes, the browser freezes - then the seconds no longer update.  In the future, the time will also change color, and maybe an alarm is generated.
• Will switch to security mode on work or event.

The weather system is functional.  I'm currently refactoring the code and adding a few new features.

When those updates are complete, I will publish.

Banjo

Nodejs: Passing values from Express to jade to javascript!

Passing values from Express to Jade to Javascript

Note: jade version 1.11.0
Today's date: 2/17/16
Note: assumes you are somewhat familiar with the technologies mentioned (nodejs, jade, express, javascript, html)

I've been hard at work on my security system, but came across an issue that took several hours to resolve.  I'm a very experienced programmer (C, C##, Java, Python, assembly, Fortran, Basic, etc), but almost all of that development has been done on back-end stuff; not much GUI front end stuff, no HTML stuff.  So, I'm somewhat weak on the front-end stuff; just now leaning nodejs, jade, express, javascript, html!

The security system I'm designing and building requires a lot of front-end stuff; it's showing the status via sms text messages and the browser.  This means the architecture is going to make use of:

• Nodejs (note this is now the correct spelling for this product)
• Jade (used with Nodejs)
• Express (used with Nodejs)
• Javascript
• HTML

Instead of having an image of the current security system on display in the browser all of the time, I decided to have the current weather shown, along with the current time.  Weather in the Southeastern US can be quite volatile, so I have kept a radar image up on an old laptop in our living room for years, so weather is important to me to keep aware of.

The idea is the weather will be shown until either I select to view/work on the security system, or a security event occurs, in which cases the browser will display the appropriate security screen.  As part of the weather, I'm getting current weather information from the Wunderground.com API.  For items such as radar images, I'm looping through some current jpg files that are offered from weather.gov and wunderground.com

Now - the problem I was encountering.

In looping through the various web pages, I have to have a delay between pages in seconds.  I want this value to be passed in at the time the application is started, for the default value.  Later, I intend to add a change that will let me interactively change the delay time.

The current architecture, using Nodejs and Express, renders a loopingPages.jade file.  I'm passing the the DELAY value obtained at startup via process.env.DELAY in app.js, where it stores the value, before rendering the looping pages.  So, the DELAY value is passed from the startup command line to the app.js (the server), then to the jade rendered page via:

     app.get('/loopingPages', function(req, res) {
          res.render('loopingPages', {delay:DELAY}
     });

The jade file loopingPages.jade includes a script file.  So, to be clear, the value that is originating from app.js server (using Express), needs to be passed to the rendering jade file loopingPages.jade, and this file includes a javascript file loopingPages.js, where the DELAY is actually used.

Well, I couldn't get it to work.  I could get the DELAY value from the environment variable passed at startup using the 'process.env.DELAY' term, but I could not get it to propagate properly.

After a lot of searching on the internet, I was unable to find an example that matched the one I needed, and most were old.  Seems this was an exercise in futility and esoteric programming!

But, I finally got it to work!

Below is a simplified version, which I was able to get to work.  It assumes you have created a fresh nodejs Express architecture for using this, which creates the proper directory structure and contents that I'll add to.  All directory locations are relative to your base directory for the application where app.js is located.

1. Modify routes/index.js to add name:'Banjo'
        res.render('index', {title: 'Express', name: 'Banjo' });

2. Modify views/index.jade to add p My name is index.jade #{name}
It should look like this:
     h1= title
     p Welcome to index.jade #{title}
     p My name is index.jade #{name}

The #{name} will show the name value passed from the app.js on the web page.  The #{title} was already available from the initial build.

3. At the bottom of index.jade (above), add the following inline script and script src:
     script.
          var theName = "#{name}"
          var theTitle = "#{title}"
          console.log("name passed in to index.jade is " + theName)
          console.log("title passed in to index.jade is " + theTitle)
     script(src="/javascripts/indexInclude.js")

Note the new file indexInclude.js which you will create next.

4.  Using your programming editor, create the file
           public/javascripts/indexInclude.js
It should have the following content:
     console.log("This is from indexInclude.js");
     console.log("+++++++++++FINAL: IF Banjo SHOWS THEN SUCCESS!+++++++");
     console.log("indexInclude.js theName is " + theName);
     console.log("+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++");

5. Run the app.js server
6. Open your browser to your localhost:port needed for nodejs
7. Confirm you see 'Banjo' printed on the page
8. Right-click on the page, then do 'inspect element' or similar for your browser.
9. Select 'console' tab
10. The console.log item should show text that includes the above (step 4) Banjo.

I hope this has helped you!

Banjo