Gateway UI Tinkering - Trying out Sails, NodeJS, AngularJS Framework

[HeneryH]

Trying to keep up with technology and add a few features I need to the Gateway and ended up heading down this project.  May not work out in the end but at least while I am shamelessly taking from those before me who have done internet tutorials I will have removed that glazed look in my eyes as the kids today talk about AngularJS and other new technology.

If anyone wants to participate in the journey, we can share the git project.

My going in requirement was to add some flexibility to the UI and target it for multiple users of my marina property.  I've seen some cool things here and on the web I'd like to pull together.

• Everything already in the Gateway is awesome.
• Add multi-users so each client has controlled access to a subset of features
• Add SMS action initiation so users can text the gateway to open the gate
• Make the UI responsive to all browser form factors.
• .
• .

In researching modern design of these types of apps, it seems like Sails is a popular framework for building node.js apps.  It is a design pattern that follows the MVC - Model/Views/Controller Framework.  I can't even begin to explain it here but there is plenty of info on Sails on the web.

AngularJS vs NodeJS...  Seems like AngularJS is a way to push some of the action from the server to the client.  Even if this isn't good for us, I need to learn more about it so...

Off we go.  I am doing all of my design and initial coding on my Mac then I will move to the Pi much later.

I am shamelessly pulling all of my material from a Tutorial by Irl Nathan where he builds out an app that has many of the core features I need.  I figure I can take his framework and add in Felix's core controller stuff.  Credit Due - Any items I say there that may seem smart are merely parroting back what I have learned from Felix and Irl.

http://irlnathan.github.io/sailscasts/blog/2015/01/09/setting-up-the-development-environment-and-creating-your-the-project/

His tutorial is a mix of very high level tech (ie what is localhost and a shell) and very low level tech (details of js injection).  I took a quick snippet of two sections at what I think is an appropriate level for us.

Here is a snippet of how Sails builds out a full NodeJS Shell App -

https://youtu.be/6qhtXMxjMc0

Here is a snippet describing AngularJS vs NodeJS.  Irl's 1.0 version of the app was NodeJS and Sails.  His 2.0 version uses AngularJS.  This snippet describes the base MVC framework and the difference AngularJS brings- 

https://youtu.be/5MrhmcRu04g

I'll post more about this effort if there seems to be any interest.

[Felix]

This is good stuff, glad that there's some traction and tinkering going on.
My gateway is a conglomerate of techniques that I learned over the years and it's nothing fancy nor super impressive. It's quite simple, it was meant to be as contained and simplistic as possible, and quite frankly I'm sure there are some js clojures which I've observed but are harder to track especially with events. Either way it's stable and probably a good starting point for extensions and improvements.

[dirkdeb]

Hi, I agree this is good stuff, very helpful on my journey from an assembler programmer via the Felix gateway implementation to understanding the latest web technology.

Thanx for sharing !

[dirkdeb]

Hi Felix
I am trying to add two extra bubbles to the node listview for display of the pinned metrics max and min values along with the latest/current value.
I definitely lack (a lot) of experience in accomplishing this.
Google gave me these links but still I am battling.
https://github.com/jquery/jquery-mobile/issues/3833
http://jsfiddle.net/qxR9T/109/
http://jsfiddle.net/5hgbmkvj/
I'll appreciate any help towards accomplishing this.
Thanx

[Felix]

dirkdeb,  you can only have 1 bubble without doing a lot of jquery-mobile coding.
FYI my gateway interface already supports pinning multiple metrics.

[dirkdeb]

Hi Felix,
Thanx I discovered the fact that I have to do a few lines of jscripting for me(copy and pasting ). I actually got one extra bubble integrated. All the code to scale the displayed bubbles properly.
As you mentioned it's a matter of displaying whatever in the same multi component bubble.

I want to display the min/max values individually and be able to change the bubble properties according to setpoints. Just to keep busy

I will share the solution when/if I get it fully functional.
Thanx anyway.

[Felix]

Cool, that's something I think i tried initially and gave up when it didn't work for me. Please do share if you get it functional, the important detail is to have it work on mobile devices also, and that it would render correctly when screen is rotated or browser resized.