Monday, September 15, 2014

Overview of Teaching Python to Graph Output from Cloud API - Spitcast Surf

I've been working with my son to build a mobile app that displays graphs of tide charts and tables of surf forecasts for the Santa Cruz region.  The app runs on his Android Motorola Moto-G phone and my Samsung Galaxy Note 2.  He grabs the data using the Spitcast API and displays the output using Pygame.

The tide has a huge influence on the quality of surf in Eastside Santa Cruz.  The optimal tide conditions at my favorite spot is a tide that is rising from 2 feet to 3.5 feet.  The swell height and direction also plays a big role.  In the future, we'll use the API from OpenWeatherMap to pull the sunrise, sunset, and wind.

The steps are:
  1. Pull data from Spitcast using urllib2
  2. Read JSON data from API into program and then convert to a list of Python dictionaries using the json library

The lesson gets off to an exciting start. The student will realize the potential of accessing cloud-based APIs. Assuming the student has a basic understanding of Python data structures lists and dictionaries, they'll also understand how easy it is to parse the data. The simple idea to convert the tide values of feet into pixels is just to multiply feet by a constant number. In this case, I multiply the height of the wave in feet by 50 to get a pixel value. For example, a wave height of 5 feet will correspond to a screen height of 250 pixels. To generate the y coordinate for the Pygame screen, I subtract the pixel height from 550. Remember that a y value of 0 is the top of the screen. I set my screen height on the phone to 500 pixels. A wave height of 1 foot will equal screen height of 50 pixels. Subtracting this from 550 will yield a y position of 500.
  1. Build start and end points for a series of 23 vertical lines spaced evenly apart to create the x axis grid. 
  2.  Create a point list that will be used by pygame.draw.lines in a future section.

At this point, the student will have a list of points that they can then draw with pygame.draw.lines for the tide graph or pygame.draw.line x, y axis grids.
Here's the basic algorithms with a bit more bells and whistles.

In the main while loop, I have this code.
This is the android-presplash.jpg screen of the application.

In the future, we'll merge the features from my son's Weather App project into Santa Cruz Surf.

Below is a shot of the app developer benefiting from the application.

1 comment:

  1. I really enjoyed this posting in which you share a valuable post. Thanks for sharing it.
    mobile game developers