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.

Posting a Project to Hackster.io

(Update 2/18/2015):  I received an email from Ben, one of the Hackster.io founders in response to the feedback I had in my blog. In it he mentioned that they had already been working to improve some of the areas I mentioned and were definitely open to suggestions for improvement. I am psyched about their future updates and the possibility of improving the community with a more social experience. Also excited to attend the Hackster Hardware Weekend in Seattle and see what they have in store!

I recently posted up my Internet Connected Spark RGB Strip project to Hackster.io and despite a couple annoyances, found myself being drawn to posting up more content. It has become so common for websites and content aggregators to gamify their content in order to draw people to continue using their system. (Respects,Views, and Rewards in Hackster.io are similar to Likes and Follows in Instagram, or Likes, Views, and Subscribes on Youtube). Something to keep in mind for my future web/mobile projects will be to gamify certain aspects.

hackster

What Hackster.io does well:

  • They provide a broken-down view of projects that might be of interest to Makers and Hackers. (By platform, trending, or latest)
  • They make it somewhat easy to create a project and it’s pretty straightforward.
  • They monitor their content for spam and cool projects.
  • They gameify their content so that as a project creator, you want to make and post more.
  • They have drawn in a lot of cool projects already!

What they need to work on:

  • Adding useful content is WAY too tiresome and formatting is a huge pain on their site (it’s easier to link to other sites where your content is already hosted, but then you are less likely to interest people with your project page).
  • For Github project owners who want to show code or their README has all the content, transferring it over to Hackster.io’s projects should be painless and update when the Github README changes!
  • It would be nice if they were faster about monitoring and responding / notifying a project owner that their project has been accepted and made public.

I will continue to use Hackster.io for posting my projects and I think that with time they will improve their content creation system and gain some real traction for the Maker counterpart to Instructables.

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:

 

It’s time! Building a 3D Printer: RepRap Prusa i3 Box Frame

I’ve thought a lot about getting a 3D printer but never felt that I could justify buying one for $300-$1000 when I would just be using to print small things here and there. However, lately I have been spending my spare time building devices in the IoT space rather than just the Web/Mobile space and have found myself thinking that it would be cool to prototype parts for them myself. After some research, I have decided to build a Prusa i3 Box Frame 3D printer instead of buying a PrintrBotMakerBot, or even one of the Kits with all the parts included. By building one and finding sellers for the parts myself, I hope to gain an in-depth understanding of the technology behind the current 3D printing revolution, the pros/cons of the various designs, and hopefully be able to add/replace parts for a potentially EPIC 3D printer. I know it is going to be a huge endeavor, but I look forward to building one myself!

Sources:

File:I3-box frame.png

Components:

  • RAMPS board mounted on an Arduino MEGA board
    I chose this as opposed to the Sanguinololu because I didn’t want to spend the time to solder parts together myself.

    • 1 extra heater / thermistor channel (three in total)
    • Optional SD card reader

  • 4 Pololu stepper motor controller boards
    (For this reason is it advised to close the potentiometer on each stepper motor controller by turning counter-clockwise all the way and then open the potentiometer about ¼ th of the way. When you discover one of your steppers does not provide enough torque you can open the potentiometer of that stepper motor controller at little bit further.)
  • 5 Stepper Motors (bipolar NEMA17 motors)- 2 for the Z-axis, 1 for the X axis, 1 for the Y-axis, 1 for the extruder
  • 3 mechanical switches for end stops
    At the start of a print job all three axes have to be moved to their starting or homing position. This is the zero position of the Cartesian robot. The axes can’t move any further than zero (they can’t move to a negative position.)

    • For the X-axis this should be the position where the nozzle reaches the left-hand side of the print plate.
    • For the Y-axis this should be on the back-side of the axis so that the print plate is moved to the back far enough that the nozzle ends up on the forward of the print plate.
    • For the Z-axis this should be the position where the nozzle barely touches the print plate. When printing the software will make sure the Z-axis is lifted a little before printing the first layer.
  • ABS plastic filament (since PLA is biodegradable and will supposedly dissolve in water, I would rather not have this) will need a heatbed

Building Tools:

  • Digital Caliper to calibrate the frame and axes (always remove the battery when storing & always reset the caliper to zero before making measurements)
  • Spirit level for general calibration
  • Plumb line

Software:

  • Arduino software: this application allows you to install the printer firmware onto the ATMega microprocessor. This installation is required each time you want to update the firmware.
  • Firmware: there are several firmwares available for RepRap printers. The firmware is installed on the ATMega microprocessor and handles the G-code instructions received from the PC. Part of the configuration of the printer has to be done in the firmware.
    • Sprinter: modern firmware with support for SD cards and easy configuration
    • Teacup: claimed to be faster than Sprinter, more elaborate configuration options
  • Skein software: the most popular application to slice STL files into G-code is called Skeinforge. You need this piece of software each time you want to print a part. (Alternatives are Slic3r or Pronterface which is also a host software)
  • Host software: there are also several host application available for RepRap printers. This application is responsible for communicating with the electronics of the printer before and during print jobs. It prepares the printer before starting a print job and then also starts the actual print jobs.

After a good amount of research, I have come up with the basics for my first build:

Bill (Rounded the price of each)

$44 – Combo Kit of Sainsmart Mega2560 + 5 A4988 Drivers + RAMPS 1.4
$27 – SainSmart Smart LCD Controller (SD Slot)
$45 – 5 NEMA 17 Stepper Motors
$22 – MK3 Aluminum Heatbed
$16 – 3 Mechanical Switches + Cables (for Endstops)
$9 – 2 meters of GT2 Belt + 2x 20 tooth Timing pulleys
$14 – 12xLM8UU, 4x608ZZ, 2x623ZZ bearings
$65 – J Head Mk V-BV .5mm Nozzle 1.75mm filament
$15 – 1/2″ by 2 ft. by 4 ft. Sande Plywood (This may be sub-par wood)
$14 – 3 x 5/16″ by 36″ round rod (smooth)
$2 – 36″ by 1/4″ 20 threaded rod

$3 – 36″ by 5/16″ 18 threaded rod
$3 – 36″ by 3/8″ 16 threaded rod stainless steel

$4 – #6 3/4″ SPAX Multimaterial Fastener (Screw) 2x(45 pc)
$3 – 5/16″ Washer Bag(25pc)
$3 – 5/16″ Hex Nut Bag(25pc)
$3 – 3/8″ Washer Bag (25pc)
$3 – 3/8″ Hex Nut Bag (25pc)
$292.74 – Total so far (Added the actual price and rounded at the end)

Altering the materials:

  • Frame (Got Home Depot to cut it in half and plan on using a Laser cutter from my local Garage to cut the rest out of the wood)
  • Smooth Rod, Threaded Rod, Nuts, and Washers (Cut these rods with a Circular Cold Cut Saw at my local Garage)
  • Printed Plastic Parts & Extruder (Used a friend’s 3D printer and one from my local Garage)
  • Various nuts and bolts (Waiting on the printed parts to finalize what is needed)

Updated Experience with Spark Core

After a week of continual use with the Spark Core I have an updated view on the Spark ecosystem.

It’s incredible how easy it is to develop and connect your core to sites developed in Node.js (check out the project I made: http://sparkrgb.azurewebsites.net/). The biggest part of that project was making sure the RGB strip worked and the UI for the website interface. Connecting the two together was the simplest part. The only major disadvantage to using the Spark ecosystem is the fact that you are required to use their Spark cloud to communicate to your device. (Although they are open sourcing a spark-server on Github, it uses the same format as the Spark Cloud.)

Here are some of my personal remarks on the ecosystem:

  • Connecting the Spark to a Mac is pretty easy through USB, but doing it on your Windows machine requires a little more driver interaction. See my blog post on that here.
  • Resetting your Spark’s preferred WiFi connection with the mobile apps is horrible when you compare it to the simplicity of using the command-line interface on your development machine through USB.
  • The Spark Core remembers 7 WiFi credentials. If you add an 8th it will remove the 1st.
  • In order to compile an INO into the firmware, an internet connection is needed on your development machine at least, so there is no way to develop on a self-contained network even if you do not plan to use internet connected capabilities.

Overall, I think that the Spark ecosystem provides the best experience for developing IoT devices currently.