Part II of Andrea’s Raspberry Pi Adventures!

Fellow Our Code reader Andrea shares the latest update on video tracking project built with RaspPi in today’s Part II post.  In the first part of series, Andrea detailed her planning process, sharing logistics on materials, networking, and getting the microcontroller to connect. Click here to read Part I.

*********

Where I was at the end of my last post: I had a pineapple, and a Raspberry Pi B+ [along with the camera module], which I had programmed to take a photo at a given time three times each day. I was testing the idea of using a power pack to provide power to the Raspberry Pi.

Using my power pack turned out to be a bit of a fail.  It was a power pack I’d been given for free as a promotion by a mobile network, so I didn’t have the highest of hopes for it. While it did supply adequate power to run the Pi without the rainbow square in the corner (which indicates not enough power to the Pi), it didn’t hold enough power for it to run for more than a short amount of time. It was more in terms of hours, than days. Weeks would have been the best scenario for a portable power supply. I ended up moving an existing extension lead, and used a charging cable I had for a previous phone, secured with a bit of Blu-tack to make sure it wouldn’t move the Pi around at all. Plugged in, I left the Raspberry Pi running for a few days to see what it would produce.

I also had to play around with the placement of the Raspberry Pi. I’ve played around with cameras a lot, but I wasn’t sure what the camera module would be like. The official documentation told me that the camera was fixed focus, with the depth of field being from 1m in front of the lens to infinity.  You can read a little about focal length and depth of field here.

Placing the pineapple 1m in front of the lens wasn’t going to work. For one thing, my window sill wasn’t that long, and it would make the pineapple much too small in each photo. It was time to get creative! I knew other people must have had the same issue; time lapse photography is a pretty popular Raspberry Pi project, so I took to the internet to see how they were dealing with it.

A few sites and forum posts tried to reassure me that I could in fact change the focal length of the lens by delicately turning it, but considering I’d just managed to snap the small plastic frame I’d bought to hold the camera module, I wasn’t about to go anywhere near the lens with a pair of pliers! Some of the more DIY Raspberry Pi discussions online introduced me to the idea of using a lens from a cheap pair of reading glasses. Suddenly it was like the clouds were parting above me! I consider photography a hobby of mine, so I was familiar with the idea of using lenses to bring a subject in closer and fill the frame. I also knew of a camera shop around the corner from where I work, so I decided to drop in and discuss what I wanted to do with someone.

lensI prefaced my explanation with “Now, this may sounds a bit odd, just bear with me!..”  Thankfully the guy had heard of the Raspberry Pi before, and thought my project sounded kind of cool! He wasn’t too familiar with the camera module itself, but when I explained that the lens was pretty small, (around 1cm wide- just estimating), he pulled out a drawer of various lenses. For someone who loves photography, the sight of that drawer was pretty sweet! I explained that the depth of field started around 1m but I wanted to bring that in to probably about half that distance, but that I wasn’t completely sure exactly how close the subject would be. I ended up getting two Hoya lenses, a +2 dioptre lens, and a +4 dioptre lens- because the effect of the lenses is cumulative, that meant I would be able to get the effect of +2, +4, or +6, depending on how far I decided to sit the subject from the camera. You can read about dioptres here.

Because I’ve positioned the camera module inside the Raspberry Pi case, I had no real way to attach the new lenses. There are small clips at the top/front to hold it, which is quite nice–keeps it all together.  The Raspberry Pi inside the case and the cables were already Blu-tack’ed into place, so I thought that Blu-tack’ing the lens to the front of the case seemed like an okay solution. I had previously considered using black electrical tape, thinking that it also might cut down on any glare, but was worried that it might leave a residue on the Pi case and also on the lenses, so decided against it.

admin-ajaxI attached the +2 lens to the front of the Pi case and the difference was obvious! I was super impressed with the images that were being produced! It felt great to have images that were so well-focused on the first try after fighting with the camera module for so long to get ones that were almost okay. I stayed with the +2 lens: the subject filled the frame nicely and the lines and edges in the image were crisp.

The HDMI cable I used to connect the Pi to the TV I was using as a monitor doesn’t get left in place when I’m not using it- it’s a pretty awkward location, and the cable is quite thick. Whenever I’m finished tinkering around with the Pi for a while I unplug the cable, and then use my phone as an overpriced level to make sure that the Pi’s case (and the camera inside!) are level.  This just makes sure that the photos are as consistent as possible when I stitch them together to make a video.  It would be kind of funny/weird if someone got seasick from watching it though!

Now I had to leave the Raspberry Pi and the pineapple, cross my fingers and hope for the best!

*********

A Kulbaba: When she’s not playing with sugar or getting covered in chocolate in my day job as a pastry chef,  she’s busy with all sorts of geekery!  Andrea blogs mainly about learning to be a front-end web developer, and her tinkerings with a raspberry pi.  Follow her on Twitter @AKulbaba and read her blog Part Timer here.

Rashida Reviews Her Week in Girl Develop It’s JavaScript Class

Rashida’s #MotivationalMonday guest post grabbed so many readers’ attention that I’ve invited her to share her coding journey with us on Our Code.  In today’s post, Rashida discusses her first week in the Intro to JavaScript class sponsored by Girl Develop It.  If you haven’t heard of the organization, GDI organizes classes, lectures, online hangouts, and hack nights for women who are learning to code. Click here to find a chapter in your city, and join me on twitter to congratulate Rashida on completing her first week in the class by sharing this post!

*******

As I continue my long journey to becoming a front-end developer, I’ve realized that I can’t escape learning JavaScript. I mean, HTML & CSS are great to know, but you won’t get very far only knowing markup languages if you want to become a true programmer.  From what I’ve observed, becoming an actual front-end programmer means getting down & dirty with JavaScript.

Overcoming Intimidation

My first attempt at learning it was in 2014.  I was enrolled in the Skillcrush Web Designer Career Blueprint.  The last module of the 3 month course was an introduction to JavaScript. Let’s just say I didn’t make it past the first 3 lessons.  I was so intimidated by the syntax that I gave up before I even started.  In the back of my mind, I knew that I’d eventually have to just suck it up and conquer my fear of JavaScript.  I kept thinking to myself that maybe it wouldn’t be so bad.  Every programming language has its difficulties, so trying another would only lead me down a similar frustrating path.

Over a year later, I’m now enrolled in another Intro to JavaScript class, hosted by Girl Develop It Atlanta.  I actually got pretty lucky because a fellow dev-in-training offered me her free voucher since she wouldn’t be able to attend due to being accepted into a coding bootcamp.  Who am I to pass up free learning?!  (Sidenote: thanks again, Mallory!)

Intro to JavaScript Class

This class is a 4-week series on Tuesdays throughout the month of October.  Each class is 2 hours long and there are around 20 ladies total enrolled.  The first class covered a brief history of JavaScript and basic programming concepts such as variables, data types, and functions.

// Think of a variable as storage for a value that you can go back & retrieve later
var firstName = "Rashida";
var lastName = "Thompson";
var age = 29;
var favoriteColor = "pink";

firstName + lastName; // Calling these 2 variables result in "RashidaThompson"

document.write("I want to order a pizza."); // This is an example of a string.  
//Strings are enclosed in quotes.

// Function example
function sayCheese(name) {
    var firstName = "Rashida";
    alert("Say cheese, " + firstName + "!");
}

sayCheese("Rashida");

So far, one concept that I’m having trouble grasping is the return keyword. I understand that using this keyword returns a value and also stops a function, but beyond that, I don’t understand its importance.   As I do more research, I’ll be sure to come back with a better understanding and an example of my own.

What I really like about the class so far is that we learn a concept and then we immediately practice it by writing our own code. No question is a stupid question and the learning environment is very open & relaxed.  Stay tuned for updates over the next 3 weeks!

*******

Rashida is a marketer & mom-to-be transitioning into web development after many years of denying her techie roots. Despite numerous coding hiatuses, she has become the ultimate comeback kid. When she’s not knocking out front-end tuts like a boss, you can often find her on Twitter @rashidathompson.

My Review of Coursera’s Full Stack Web Dev Specialization Course I

In the past, I never been serious about sticking to a particular development stack.  I’ve explored and studied enough to realize what I was good at and what I needed to do to obtain clients and projects, which left me uncommitted.  I can’t say I didn’t try; I as really gunning for LAMP stack and even spent some time learning more about MySQL and Apache this past spring.  I also played around with Django after being encouraged by other python enthusiasts to give it a try.  Still, I kept my options open, and after being given the opportunity to do a couple of freelance projects over the summer building websites for a friend’s charity organization, a local food club community,  and a transportation non-for-profit, I’ve been gravitating more towards front-end development and really diving into JavaScript.

Studying JavaScript led to me taking up a specialization in the MEAN stack.  The MEAN stack is JavaScript based, using MongoDB as the database, Express as the framework, AngularJS as the MVC app environment, and NodeJS to handle the back-end in web and application development.  After 2 weeks of researching learning resources that would best suit my introduction to MEAN, I was able to plan a route that would get me to advanced beginner (perhaps intermediate?) level by January 2016.  In right timing, Coursera had just organized their first set of specializations focusing on front-end web development that were released this fall.

I reviewed the curriculum to make sure I would not be repeating myself as far as learning something I had already learned before.  Specializations offered by London University and Hong Kong University factored in advanced JavaScript functionality and NodeJS which would help me progress.  The difference is London U chose Meteor as their app environment, and HKU chose AngularJS.   Since AngularJS is growing more in popularity, I went with HKU.

Each course in the specialization is around $80 each, for a total around $480 including the capstone project.  What I love about Coursera is they offer scholarships if you can write a great essay about how you intend to use what you learned in the class.  I applied, got a scholarship, and was able to start the specialization at the beginning of September.

Week 1 of Course I: HTML & CSS

I was not excited about going over HTML and CSS in the first week of the course. I have been using those two in my design work and didn’t want to spend the course rehearsing what I’ve already become proficient in.  The course was geared towards advanced learners though, and gave brief overviews instead of going into full detail about specifications.  Professor Rossiter focused on HTML5 forms and we built a dating application form as our first assignment.

My Dating App HTML5 Form

My Dating App HTML5 Form

Week 2 of Course I: JavaScript Intro

The second week focused on JavaScript, giving a brief overview of variables, scope, arrays, and loops.  Prof. Rossiter had us concentrate on functional programming, developing iteration loops through arrays and using methods in the lecture part of the course.  I had previously finished up Toni Alicea’s course on understanding JavaScript’s weird parts with the CodeBuddies crew and worked my way through by John Pollock’s JS book for beginners, so once again I was glad that Rossiter centered on a few main concepts, most of which I was familiar with.

Week 2 Assignment: My Color Guessing Game

For our second assignment, we had to build a user-prompted game that took responses from the user and gave feedback.  I had to submit the assignment as one file, so I included the in the HTML form and assigned the the onload event handler to start the game once the code had been loaded and recognized in the browser.  Here’s the basic page body*:

<html>
<head>
<title> Color Guessing Game </title>
</head>
<body onload = “onload”>
< script >
….javascript goes here….
< / script >
</body>
</html>

After creating the body of the page, I first assigned a set of global variables for the colors in my game, the user’s guess input, and the number of guesses the user would take to answer correctly (initially set to 0).  I also set a global variable to finish the game that I would use in the while loop of the game to keep it from becoming infinite.   My color guessing game used an array named colors to index each color a number:

var colors = ["blue", "cyan", "gold", "gray", "green", "magenta", "orange", "red", "white", "yellow"]; 
var guess_input;
var guesses = 0;
var finished = false;

I then had to create a function do_game( ) that would generate a random number which represented a color that was targeted as the answer, as well as run the while-loop that would continue to ask the user to guess a color from the list (array) until the correct one was chosen.  The while-loop also counted the number of guesses it took the user to create the right answer:

function do_game() {
   var target_index = Math.random() * colors.length;
   var choice = Math.floor(target_index);
   target = colors[choice];

   while(!finished) {
     guess_input = prompt("I am thinking of one of these colors:\n\n" + "blue, cyan, gold, gray, green, magenta, orange, red, white, yellow\n\n" + "What color am I thinking of?");
     guesses += 1;
     finished = check_guess();
   }
 }

The gist of the code that we were being graded on was to create a function that would check the user’s guess correctly.  I created a function check_guess( ) that would run a series of conditional if-statements comparing the target to the user’s guess as the argument parameter.  Because the colors were already indexed in the array, and the target was set to a random number in the do_game( ) function, I was able to compare the two as if they were numbers.  The if-statements were set to false if the guess was incorrect, which would re-run the while loop prompting the user for another guess. The game continued until the user picked the right color illustrated in the else conditional, in which the user would get a congratulatory screen would change the background to that answer:

function check_guess() {
   if (colors.indexOf(guess_input) == -1) {
     alert("Sorry, I don't recognize that color!\n\n" + "Please try again.");
     return false;
   }
   if (guess_input > target) {
     alert("Your color is alphabetically higher!");
     return false;
   }
   if (guess_input < target) {
     alert("Your color is alphabetically lower!");
     return false;
   } else {
     myBody = document.getElementsByTagName("body")[0];
     myBody.style.background = target;
     alert("Congratulations! The color was " + target + "\n\n It took you " + guesses + " guesses.");
     return true;
   }
 }

Week 3 of Course I: Advanced JavaScript

The course ended with a series of lectures on advanced concepts in JavaScript.  Prof. Rossiter concentrated on node relationships in the DOM structure, teaching us more event handlers and showing how the browser registered handlers.  I paid attention to this part of the course the most because I could easily add event handlers to my existing sites, thus I had a practical incentive to watch all the lectures instead of just a few to get by.  For the final assignment, we had to create another game that would focus on click handler responses from the user.  We were graded on how the game board was created and styled in HTML/CSS, the correct use of images generated and displayed via a set of functions, and the JS code that contained the game’s main functionality.  The code is too long for me to list in this blog, but you can view it the code and play the game through my github repo for it here.

My Matching Game Board

My Matching Game Board

Conclusion

In reviewing the first course of the specialization, I probably wouldn’t suggest it for someone who has never written code before.  I realized that the reason why I did so well in the course was because I had some basic knowledge of the JS concepts being taught in the lectures.  I found the pacing of the course too fast, and I spent a lot of time answering other students questions in the discussion board– a clue that most of the class had trouble understanding.  Even with my past experience, I still had someone review my code before I submitted.  Instead, I recommend going through HTML/CSS and the first 3 parts of Codecademy’s JavaScript track first, as this was clearly not a class for beginners.

I was right in my assumptions that the course would be nothing more than a brief overview of web page components targeted to those who just want to learn the minimal amount of JS necessary to understand how AngularJS and Node.js works.  Knowing this now, I will need to supplement what I learn in the specialization with either books or more detailed tutorials, as I can’t rely on the pacing in the next course to be slowed down for my understanding.

I’ll keep you all updated as I go through the specialization.  The next course starts on October 16th, and will focus on UI frameworks, Gulp, Grunt, and Node.js.  I’ll do a review of each course, so keep on the look out for Part II next month.  Anyone can take the course, regardless if you are enrolled in the specialization or not, so comment below if you would like more information.