Thursday, July 28, 2016

Web Programming book and kids' coding camp

My Sabbatical plans changed somewhat last spring, and I ended up putting all of my time into writing the "Web Programming" book to be released in beta this fall by zyBooks. If you are not familiar with zyBooks, they are online books that feature animations and interactive questions. Students are much more engaged when interacting with zyBooks than with traditional print books. Plus zyBooks are usually much less expensive.

The "Web Programming" zyBook covers HTTP, HTML, CSS, JavaScript, jQuery, mobile, PHP, Node.js, and databases. It's been a great experience writing the book, and I've learned a lot in the process. I'm finishing the final chapter in the next few weeks. Contact zyBooks if you would like to preview the book.

This week I ran the Kids' Coding Adventures camp for 20 kids in grades 1-3. It was the first coding camp in Searcy for young kids that I'm aware of. We used Tynker, a platform for teaching coding to kids and adults. The kids absolutely loved it!

What would make me want to spend three days with young kids teaching coding? I attended a Logo programming camp in the 3rd grade, and it was like I had discovered an amazing treasure! The camp introduced me to something that would later be my profession. I wanted to provide the same experience for the kids of Searcy. Plus my two sons really wanted me to run the camp, and it's hard to say "no" to such enthusiasm.

The Harding website has a nice write-up about the camp.

Tuesday, January 12, 2016

My Sabbatical

I'm very grateful that Harding has allowed me to take a one semester Sabbatical. I owe a lot of thanks to Gabriel Foust, my colleague who has been working on his Ph.D. at Texas A&M for the past four and a half years and has finally returned to Harding so he can take over my Spring course load. Thanks, Gabe!

My plans for the Spring have been in flux for a while, but they've finally ironed themselves out. I'll be spending a portion of my time writing some book chapters for a Web Development book for a well-known publisher. There is a team of writers for the book, and it will hopefully be available in the Fall. My Web Dev courses will begin using the book in the fall as well.

Additionally I'll be doing some software development for Flatirons Solutions, a company out of Bolder, CO, that I worked with a few summers ago. I'll be exposed to some new technologies that I will hopefully incorporate into my courses here at Harding.

A lot of my students thought I'd be gone this semester, but I plan on being in my office as much as possible and being available, so feel free to stop by and say hello!

Edit 7-28-16

The book ended up being the focus of Sabbatical. The book is called Web Programming and will be available to the general public at the end of 2016 from zyBooks. Topics include: HTTP, HTML5, CSS, JavaScript, mobile, Node.js, PHP, and databases.

Monday, October 05, 2015

20 years ago

It was twenty years ago on this day (October 5, 1995) that my college roommate Jeff Gammel drowned while swimming in Lake Cortez in Hot Springs Village. He was was swimming with a few other guys from Louisiana Tech but got separated from them at one point. When the Tech kids reached the shore and didn't find Jeff, they called the police. Divers found his body the next morning. No one is sure what caused him to drown, but my guess is that he cramped up or something and wasn't able to get to shore in time.

Jeff was in Hot Springs Village for the weekend along with his best friend Brandon Procell to be with the Hot Springs Village church youth group for an area-wide get together. Jeff and Brandon regularly traveled to Hot Springs Village to work as youth ministers for the youth group. In other words, Jeff lost his life while serving others. Although Jeff's death hit us all like a ton of bricks, we knew that he was just doing what his Savior did. And we knew that he had received his reward.

"For whoever wants to save their life will lose it, but whoever loses their life for me will find it." - Matthew 16:25

Below is the article from the Harding University Bison that talked about Jeff's accident and the chapel program the following Monday.

Friday, August 21, 2015

Finishing up my first summer with HUB-CAPS

This summer I had the opportunity to work with HUB-CAPS (Harding University Branch of the Center for Advanced Public Safety), run by my colleague Dana Steil. We employed seven Harding students to help us on various software projects for the Arkansas and Mississippi highway patrols.

What occupied most of time this summer was developing a system that allows Mississippi patrol officers to enter paper tickets into a web-based SPA application. We used AngularJS on the front-end and an ASP.NET MVC app that exposed web APIs on the back-end. Mallory Eaton did a lot of the client-side development work and built some nice e2e tests. I'm proud of the app we developed which is currently in beta testing.

I'm also thankful to Dana Steil for giving me the opportunity to work with his group.

Our students are starting to arrive for the beginning of the fall semester. Time to start redirecting my energies into my courses.

Friday, March 06, 2015

The MEAN stack

I've developed some notes/outlines for my Web Development 2 course on the MEAN stack (MonogoDB, Express, AngularJS, and Node) that I thought I'd share here. They introduce each MEAN component and contain code snippets that build a web app that uses a RESTful web service. Enjoy!

  1. MEAN Stack
  2. Node.js
  3. Express
  4. MongoDB
  5. Mongoose
  6. RESTful Web Services
  7. Creating RESTful Web Services with MEAN
  8. AngularJS
  9. Controllers and Services
  10. Routing
  11. Using RESTful Web APIs with AngularJS
  12. Token-Based Authentication

Wednesday, December 17, 2014

XNA and Kinect 2 hand motion demo

This demo will show you how to write a simple XNA application that reads hand motion from the Kinect v2. The Kinect sensor can detect motion for your entire body, but here I'll focus on just detecting hand motion and whether the hand is open (all fingers out) or closed (in a fist) as shown in the screenshot below.


Prerequisites

You must have the Kinect for Windows 2 correctly installed along with the SDK. There are plenty of online tutorials showing you how to program with the older Kinect; this is for the latest version.

See the Prerequisites section from my previous post on installing the necessary software to code this demo using Visual Studio 2013.


Create an XNA Project

First create an XNA project by selecting FileProject... from the menu. Then select XNA Game Studio 4.0 template under Visual C# and select Windows Game (2.0). Name the project KinectMotionDemo.


Add Kinect Reference

Right-click the project in the Solution Explorer and from the context menu select AddReference.... Type kinect in the dialog box's search box, and check the Microsoft.Kinect reference. Then press OK. You should now see Microsoft.Kinect among the project's References in the Solution Explorer.


Initialization

Add the Kinect namespace to your Game1.cs file:

using Microsoft.Kinect;

Inside the KinectMotionDemo namespace and immediately after the Game1 class, create a class that represents a Hand. We will keep track of whether the hand is left or right, open or closed, and its location to be displayed on the screen.

class Hand
{         
 // HandLeft or HandRight
 public JointType Type { get; set; }
 
 // Open or closed
 public HandState HandState { get; set; }

 // Screen location of hand
 public Vector2 ScreenPosition { get; set; }
}


Add some class-level variables which will be needed elsewhere:

// Active Kinect sensor
private KinectSensor kinectSensor;

// Body frame reader
private BodyFrameReader bodyFrameReader;

// Array for the bodies and hands
private Body[] bodies;
private Hand[] leftHands;
private Hand[] rightHands;

// Sprites used to display hands
private Texture2D leftHandOpenSprite;
private Texture2D leftHandClosedSprite;
private Texture2D rightHandOpenSprite;
private Texture2D rightHandClosedSprite;
Note that a Microsoft.Kinect.Body represents a person's body, and Kinect can track up to six people at the same time.

Add some code in the Initialize method to initialize the sensor, create arrays large enough to track up to six people, and add an event listener so we'll know when body sensor data is available.

protected override void Initialize()
{
 // Allow mouse to be visible when on top of the window
 IsMouseVisible = true;

 // One sensor is currently supported
 kinectSensor = KinectSensor.GetDefault();                                 

 // Determine how many bodies and hands can be tracked
 int totalBodies = kinectSensor.BodyFrameSource.BodyCount;
 bodies = new Body[totalBodies];
 leftHands = new Hand[totalBodies];
 rightHands = new Hand[totalBodies];

 // Open the reader for the body frames
 bodyFrameReader = kinectSensor.BodyFrameSource.OpenReader();

 // Specify handler for frame arrival
 bodyFrameReader.FrameArrived += this.Reader_BodyFrameArrived;
      
 // Open the sensor
 kinectSensor.Open();

 base.Initialize();
}


Override the Game class's OnExiting method to free up Kinect sensor when the game window is being closed.

protected override void OnExiting(object sender, EventArgs args)
{
 if (bodyFrameReader != null)
 {
  bodyFrameReader.Dispose();
  bodyFrameReader = null;
 }

 if (kinectSensor != null)
 {
  kinectSensor.Close();
  kinectSensor = null;
 }

 base.OnExiting(sender, args);
}

Where are the hands?

Now write the event listener for the body frame reader that will obtain the sensor data for the left and right hands of all the bodies that are being tracked. This method will call UpdateHandInfo, a method that will determine if the hand is open or closed and determine where it is located in depth space so it can be accurately mapped to an (x,y) location on the screen.

private void Reader_BodyFrameArrived(object sender, 
    BodyFrameArrivedEventArgs e)
{
 bool dataReceived = false;

 // Load captured body data into the array of bodies
 using (BodyFrame bodyFrame = e.FrameReference.AcquireFrame())
 {
  if (bodyFrame != null)
  {
   bodyFrame.GetAndRefreshBodyData(bodies);
   dataReceived = true;
  }
 }

 if (dataReceived)
 {
  // Iterate through each body
  for (int i = 0; i < bodies.Length; i++)
  {
   Body body = bodies[i];
   if (body.IsTracked)
   {                        
    // See if hands need to be instantiated
    if (leftHands[i] == null)
     leftHands[i] = new Hand { Type = JointType.HandLeft };
    if (rightHands[i] == null)
     rightHands[i] = new Hand { Type = JointType.HandRight };

    // Get hand sensor data
    UpdateHandInfo(leftHands[i], body);
    UpdateHandInfo(rightHands[i], body);        
   }
  }
 }
}

private void UpdateHandInfo(Hand hand, Body body)
{
 if (hand.Type == JointType.HandLeft)
  hand.HandState = body.HandLeftState;
 else
  hand.HandState = body.HandRightState;

 // Map joint position to depth space
 CameraSpacePoint position = body.Joints[hand.Type].Position;
 DepthSpacePoint depthSpacePoint = kinectSensor.CoordinateMapper.MapCameraPointToDepthSpace(position);
 hand.ScreenPosition = new Vector2(depthSpacePoint.X, depthSpacePoint.Y);
}

Displaying the Hands

Find four different images that you would like to display for your left and right hands when they are open or closed. I used images that look a lot like hands, but you can be more creative. Make sure that you use only letters, numbers, and underscores in your filenames because these will be converted into variable names!

Add the images to the KinectMotionDemoContent project in the Solution Explorer by right-clicking on the KinectMotionDemoContent project and selecting Add → Existing Item.... An open dialog box will appear. Select the four PNG images you want to use and press OK. You should now see all four images in your KinectMotionDemoContent project as pictured below.


Now load the PNG images in the LoadContent method.
protected override void LoadContent()
{
 // Create a new SpriteBatch, which can be used to draw textures.
 spriteBatch = new SpriteBatch(GraphicsDevice);

 leftHandOpenSprite = 
    Content.Load<Texture2D>("openhand_left");
 leftHandClosedSprite = 
    Content.Load<Texture2D>("closedhand_left");
 rightHandOpenSprite = 
    Content.Load<Texture2D>("openhand_right");
 rightHandClosedSprite = 
    Content.Load<Texture2D>("closedhand_right");
}

The hands will be displayed in the Draw method.
protected override void Draw(GameTime gameTime)
{
 GraphicsDevice.Clear(Color.CornflowerBlue);

 spriteBatch.Begin();            
 
 // Draw all left hands
 foreach (Hand hand in leftHands)
 {
  if (hand != null)
  {
   if (hand.HandState == HandState.Closed)
    spriteBatch.Draw(leftHandClosedSprite, 
     hand.ScreenPosition, Color.White);
   else
    spriteBatch.Draw(leftHandOpenSprite, 
     hand.ScreenPosition, Color.White);                   
  }
 }

 // Draw all right hands
 foreach (Hand hand in rightHands)
 {
  if (hand != null)
  {
   if (hand.HandState == HandState.Closed)
    spriteBatch.Draw(rightHandClosedSprite, 
     hand.ScreenPosition, Color.White);
   else
    spriteBatch.Draw(rightHandOpenSprite, 
     hand.ScreenPosition, Color.White);
  }
 }

 spriteBatch.End();

 base.Draw(gameTime);
}


Press Ctrl-F5 to build and run the program. Stand in front of your Kinect, and you should see the PNG images move as you move your hands. Try opening and closing your hands to see the open/close images being displayed. If you have a friend nearby, ask them to join you so you can see four hands moving about the screen.


Problems?

When I first tried to build and run my program, I got the following error message:

The primary reference "Microsoft.Kinect, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL" could not be resolved because it was built against the ".NETFramework,Version=v4.5" framework. This is a higher version than the currently targeted framework ".NETFramework,Version=b4.0".
To fix this problem, I closed the project in Visual Studio and opened the project's .csproj file in a text editor and changed the following line:
<TargetFrameworkVersion>v4.0</TargetFrameworkVersion>
to
<TargetFrameworkVersion>v4.5</TargetFrameworkVersion>
Then I re-opened the project in Visual Studio and re-built the application with no problems.

Thursday, December 11, 2014

Hour of Code at Kensett Elementary

Eight students from our Computer Science department met with about 50 fifth graders at Kensett Elementary on Friday, Dec 5, to participate in the Hour of Code. As you can see from the pictures, the kids were having a blast! Most of them ran through the Angry Birds tutorial, and a few tried the Frozen and Flappy Bird tutorials. When the hour was over, many of them got really excited when I told them they could keep working on the tutorials when they got home... just open a web browser and go to code.org!