Hackster Hardware Weekend (Hackathon)

I had the chance to participate this past weekend in a Hackster.io Hardware Weekend in Seattle and was blown away by the setup. Like most hackathons, they had big sponsors like Intel, Microsoft, Spark, AT&T, etc. However, unlike most of the software hackathons I have been to, they provided some hardware for people to use including Intel Edison boards with Seeed Studio Starter Kits and more. They also provided some cool and useful swag like a portable charger (which I used to power a Spark Core for my demo) and a small portable Leatherman pocket tool that is perfect for my recent maker lifestyle. The energy they provided was just spectacular and even though it was their first time hosting a hackathon, I think it went smoothly.

The food wasn’t just your normal pizza and salad hackathon meals. It also included a legitimate breakfast with bacon, eggs, bagels, cheese, etc. Lunches and dinners were comprised of delicious sandwiches (kind of like Banh Mi), mexican food, and one meal of pizza. On the side they have a whole bunch of candy, popcorn, and more snacks along with the steady supply of coffee, soda, juice, and water.

Unfortunately, like with most hackathons, the crowd of participants thinned out by day 2 with most of the remaining people being interested in learning more or deeply involved in the hacking process.

I came to the event without a clue as to what I was going to build and not really sure if I wanted to join a team, make one, or run it solo. After hearing about some of the prizes for using certain APIs (Weather Underground and WebRTC) I decided to focus my time on the Weather Underground APIs. Even after deciding what I wanted to use, I didn’t really have a clear understanding of what my final product would be and how it could change the world. I just decided to start hacking something together that I thought would be cool to own and ended up going down the path alone.

Stages of my Creation:

  1. Started with the idea to read the forecast for the day and display it to you through an small LCD screen so that I wouldn’t need to pull up an app to view the forecast. Decided to use the Intel Edison, Cylon.js, and the Weather Underground APIs to do this.
  2. Added functionality that would open your windows using a servo if your indoor temperature was past your comfortable zone and the outdoor temperature was colder. I also added functionality to change these settings through buttons and rotary angle sensors on the board.
  3. Added functionality to push the data to the cloud
  4. Realized that I could also connect to a Spark Core and communicate with it via WiFi and the Cloud from the Intel Edison, so I integrated a lighting scenario with a wireless connection.
  5. Created a prototype case for the now deemed “Hub” in Autodesk Fusion 360.
  6. Created a webpage using AngularJS on Azure that would showcase the data my back-end was receiving so that I could view information on the go.

The prototype Open Source Home Automation Hub was born.

Some things I’ve come to realize for my next hackathon:

  • Work in teams! I worked solo this weekend and although I did a lot of work to combine all the components, I definitely could have gone further with the idea and took it to the next level ending up with a professional product rather than a hacked together demo.
  • Set up a team before hand and know the expertise of everyone in the team and how best to leverage them. (This also might mean vet out the people who might have less to contribute if you are going hardcore)
  • Sometime’s it’s more about the presentation, the story, and the idea than the execution during the hackathon (although that might be due to the hardware nature of this hackathon). After all, you only have so much time both to hack and to present your creation.
  • Network! This is really just a great opportunity to meet other people in a related field and find out their skills and platforms of choice. Who knows? You might find a couple new tools that might be useful for your future endeavors.
  • Roll with it. A vision is great, but be able to adapt if things don’t work out quite like you expected.  Sometimes code breaks and it can be stressful but learn from it and debug better.
  • Have fun!

AngularJS: Triggering a Javscript function after rendering an Element Directive

I recently tried to find an elegant solution to a conundrum with AngularJS, but could only find one working solution.

My problem:

I was trying to trigger a Javascript function that needed to be run after all of the elements on a page were loaded. (In my case, after an AngularJS element directive had run and loaded a grid view dynamically). I realized that since I was trying to alter a DOM element after a DOM change that was caused by a directive, I could not use ng-view and $viewContentLoaded, a normal JQuery $(document).ready call, or an onChange event of the div (since that only applies to input types).

The solution:

on the html page side I simply added the “element-watch” tag to the div which already had my element directive.

Diving into AngularJS

I’ve heard the name “AngularJS” get dropped here and there for a long time now, so I figured that it was time I delved into it a little to see what the fuss is all about.

Why AngularJS?

  1. They do a good job of making it easy to develop a website in the typical MVC (model, view, controller) fashion.
  2. Re-usability / no-repetitiveness of code with directives for elements, attributes, and class names and ng-repeat
  3. Easy to use filters on objects/data.

Here are some of what I learned from my quick dive into the world of AngularJS:

  • Within a controller, it is always better to create a reference to “this”
  • No need to pull in all the separate javascript files anymore. Bootstrap, JQuery, etc. is all included.
  • create an angular module for every “app”, website, or object based on functionality.
  • add controllers to the app for all reusable functionality / better modeling.
  • using the “ng-{keyword}” tag in your html objects gives you a massive amount of flexibility in showing, hiding, repeating, HTML elements based on JSON data, and 2-way data binding.
  • === is a comparison similar to ==
  • ng-class=”{className:variable === 3}” setting of a class based on a variable
  • INCREDIBLY EASY to use JSON data
  • forms have validity BUILT IN and allow you to toggle things based on the value
  • CSS formatting for input types:
  • Include html templates/files in other pages with:
  • Has services built in:
    • $http for fetching JSON data
    • $log for login messages to the javscript console
    • $filter for filtering an array
    • Example:

Would I use it regularly?

I believe that I have found my replacement for jquery and a good model for javascript development for the web. I definitely will be using it for most (if not all) of my websites.

Resources: