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
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
No comments:
Post a Comment