Jess Clark - Web Blog

How to go from your GPS to Google Maps

Jesse — Wed, 26 May 2010 16:30:31 +0000

This Sunday I took my GPS with me hiking on Devil’s Backbone. Normally I take it to log GPS quadrants for where I have taken pictures, but this time I left it on the whole time to track the progress. When I got back home I was able to pull the data down to my computer and import it into Google Maps. Here is what I did:

Pulling the Data off the GPS

The day after my hike I went to my office and downloaded the data from my GPS to my Computer. I used a program called “EasyGPS” which works will all kinds of GPS models.

I have a Garmin Legend as a GPS which connects via the COMM port. When you start up EasyGPS, there is a setup screen that will walk you through the steps for your GPS unit. Once the setup was complete, it transferred my data from the GPS to my computer.

There were extra waypoints in my data from previous hikes, so I removed them from the list. Once done, I saved the file as a .GPX file.

Converting the Data

Google Maps can’t read a .GPX file, but it can read a .KLM or .KMZ file. There is a great free converter out there called “GPS Visualizer”.

On the home page, click on “Choose File” to upload your file;
For “output format” choose “Google Earth”.

There is a “Google Maps” option, but this will only display the data on their site. We want to convert the file so we can upload it straight to Google Maps.

On the next page, click on the name of the file to download it.

Importing to GoogleMaps

Navigate to Google Maps.
On the left column of the page, click on “My Maps”. This will bring up a list of custom maps you have made.
Click on “Create New Map”
There is a link towards the top to “Import”, click this and a screen will popup ready to upload your KLM file.

Using the buttons towards the top, you can add your own stuff to the screen, like photos.

Google Analytics API and PHP

Jesse — Mon, 24 May 2010 16:30:22 +0000

A few weeks ago I added stats on my Photoblog. This started out as just a link to a pie chart of cameras (tutorial here) but I started thinking I should add more than that. How about the top photos of the week and also what about top photos of all time.

There were two ways I could see gathering the stats and displaying them on my site. I could create a new table for statistics (or perhaps a column in the existing table) and then whenever someone hit that page, update the database. I would also have to include a cookie, or track their IP address so they don’t count for more than one. Or, I could leverage the power of Google Analytics, a tool that I was already using.

Class:

I am using PHP for this project.

Download the Google Analytics PHP Interface

Code:

The code below is borrowed from their documentation. I am only loading five results but it takes a few seconds to load. Because of this, I connected the code to a database, and created a cron job, so it would only run once a day. The stats that are on my site, are actually pulling from my database, which is being populated by Google Analytics.

include "googleanalytics.class.php";

try {

$ga = new GoogleAnalytics(‘username’,'password’);

$ga->setProfile(‘profile ‘); //format: ga:6089897

$ga->setDateRange(’2009-03-01′, date("Y-m-d")); //Starting date, Today’s Date

$report = $ga->getReport(

array(‘dimensions’=>urlencode(‘ga:pagePath’),

‘metrics’=>urlencode(‘ga:pageviews,ga:visits’),

‘filters’=>urlencode(‘ga:pagePath=@counter’),

‘sort’=>’-ga:pageviews’,

‘max-results’=>’5′

)

);

$x=0;

$pages = array_keys($report);

echo "

foreach($report as $subArray){

echo "

" . $pages[$x] . " – " . $subArray["ga:pageviews"] . "

$x++;

}

echo "

} catch (Exception $e) {

echo "

Service currently down

print ‘Error: ‘ . $e->getMessage();

}

Under “filters”, I have it filtered out where the URL starts with “counter=”. This is how all my photos are named, and by adding this filter, the non-photo pages won’t show up.

Devil’s Backbone

Jesse — Mon, 17 May 2010 16:30:07 +0000

On Sunday, Michelle, Brewer and I went hiking at Devil’s Backbone in Loveland Colorado. Here are some of the photos I captured. There will be more on Flickr and on my Photoblog.

Flex PieChart with XML input

Jesse — Wed, 12 May 2010 16:30:27 +0000

I have been working hard to compile statistics on my photo blog. Currently I have most visited photos and photos by camera. I wanted to create a dynamic chart and luckily, Flex 3 has a charting component that was easy to use. There were a lot of tutorials out there on Flex Charts (mostly bar charts) and a lot of tutorials on pulling XML but not one that combined the two.

Demo:

This demo pulls real time data from my photoblog using XML. I could have hard coded in the data but then it wouldn’t be flexible and every time I uploaded a file I would have to update the chart.

[inline]

ALTERNATE CONTENT

[/inline]

Code:

import mx.rpc.events.ResultEvent;

[Bindable] private var fullXML:XMLList;

public function serv_result(evt:ResultEvent):void {

fullXML = evt.result.page;

}

]]>

Explanation:

Line 3 is an HTTPService that goes out and grabs the XML file and names it “siteData”.

http://jessclark.com/photo/stats/flex/cameras.xml.php" id="siteData" resultFormat="e4x" result="serv_result(event)"/>

Above that, on line 2, creationComplete says that once the application has loaded run the HTTPService.

creationComplete="siteData.send()" height="600" width="540">

In the ActionScript (lines 6-11), this takes that results from the HTTPService and captures it in the variable fullXML.

import mx.rpc.events.ResultEvent;

[Bindable] private var fullXML:XMLList;

public function serv_result(evt:ResultEvent):void {

fullXML = evt.result.page;

}

Then we have our PieChart, with a dataProvider of “fullXML” and in the PieSeries the field is called “data” which corresponds to the xml file (same with nameField).

dataProvider="{fullXML}" showDataTips="true" height="242" width="530" x="10" y="0">

...

field="data" nameField="camera">

The Legend uses “pieChart” as its dataProvider.

Colorado State University Photo Shoot

Jesse — Mon, 10 May 2010 16:56:27 +0000

Last week I went to Colorado State University to take behind the scenes pictures of an athletics’ photo shoot. The photos will be used next season for posters, tickets and flyers. Here are some of the good photos I got:

Dynamic Style Sheets with Server Side Scripting

Jesse — Wed, 05 May 2010 10:30:34 +0000

We are currently working on redesigning our top level pages at UNC. We are using multiple style sheets to separate out the structure of the page from the colors and typography. All pages will have the same layout but will have different patterns and colors. I want to use one style sheet (rather than multiple) so the user can’t remove the parts they don’t think are necessary. I also want this one style sheet to be able to access different CSS files depending on the querystring.

ASP:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<%response.ContentType="text/CSS"%>

@import url("../uncheader.css");

@import url("structure.css");

@import url("typography.css");

@import url("print.css") print;

<% if (request.QueryString("c") = "blue") then %>

@import url("colors/color-blue.css");

<% else if (request.QueryString("c") = "red") then %>

@import url("colors/color-red.css");

<% end if %>

Reverse Engineer Nike+ to create an API

Jesse — Mon, 03 May 2010 10:30:09 +0000

Earlier in the week we cleaned out the workout room and I started running on our treadmill again. One of the things that I am excited about it the Nike+ program. It tracks runs and keeps statists online about each run. I wanted to add these stats to my blog but Nike doesn’t offer a public API. Their website was created in Flash (well actually it was created using Flex; a discussion for a later time) using ActionScript; lucky for us, ActionScript can’t access a database on its own; it needs a XML or JSON.

Finding the XML Feed

In FireFox there is a plugin called “Live HTTP headers”. This plugin will detect what information is being sent from the browser to the server. Since Flash is a client-side technology, the XML file is pulled onto the client’s machine. Once the plugin is installed navigate to it by going to [Tools]/[Live HTTP headers]. A box will popup and if there is information in it already, hit to “Clear” button. Navigate to the Nike+ login page. As the site is loading you will notice “Live HTTP headers” adding item after item. There will be the HTML page, SWF files, graphics (PNGs, GIFs,JPEGs), CSS and XML files. Before you log on, hit the “Clear” button; this will make it easier to find the feed. Log in to the site and once loaded hit “Clear” again; then in the site, click on runs. “Live HTTP Headers” will log a ton of items, and you will have to go through them to find the XML file. Look through the document until you find a line similar to this:

http://nikerunning.nike.com/nikeplus/v2/services/app/run_list.jsp?userID=userID&startIndex=0&endIndex=1

You can also click “Save All”, and open the file with a text editor and look for the phrase “run_list.jsp”. Open this file in a new browser and an XML file will appear with your basic information. If you get the error: “The userProfile is not public, can't access the service”, you will go into the privacy settings and share your information.

Create a Simple XML Parser

The data I will be retrieving is “plusService/runListSummary/distance” which is the total distance run in kilometers:

$xml = simplexml_load_file("http://nikerunning.nike.com/nikeplus/v2/services/app/run_list.jsp?userID=userID&startIndex=0&endIndex=1");

$result = $xml->xpath('/plusService/runListSummary/distance');

$kilometers = $result[0];

echo round($kilometers*.621371192) . " miles";

Save it to a database

Since Nike+ doesn’t have an official API, I am not sure if they would appreciate you hitting their server for the XML file every time a user visits your page. Since this data doesn’t change that often (only when you upload a run, perhaps once a day) you should save this information on your server in a database and only hit it once a day.

Goals with Google Analytics

Jesse — Wed, 28 Apr 2010 10:30:28 +0000

One of the things I like to do with this blog is talk about what tools we are using at the University of Northern Colorado. We have been using Google Analytics for quite a while now (along with our log based stat tool) and have gathered a lot of data. One of the problems is that we have all this data but don’t know how to use it, or don’t have the time to look through it. After attending a webinar last week about this very topic, I set up a goal on the tour form. To request a visit to the university, first you navigate to the visit page, find the type of tour you are interested in and then fill out a form. Each of these steps has a page associated with them so it was easy to track.

Setting up the Goal

From the dashboard, I clicked on "edit" next to the profile. I have the Admissions site (where the tour form exists) in a sub profile, but I used the main profile (which includes all of unco.edu) so I could see where people were coming from. Click "Add goal". On the next page fill out the Goal Name and Goal Type; for the Goal Details:

Goal Details

Match Type – Head Match
Goal URL – the final "Thank you for Registering Page"
Case Sensitive
Goal Value – if you have figured out the cost of each completion you can put that here. Since I am only counting tour signups, (which are free) I left this blank.

Goal Funnel

Here is where I put in the two pages following the signup, the Visit Page and the Signup Page. I did not indicate "Required Step" because if you knew the URL you could go directly to the sign up form.

Click "Save Goal" and wait a few days.

Viewing the data

Under the profile, click on "Goals" and you can see how many visitors have completed the goal. I am still learning a lot about this section, but the really neat thing I found was under "Funnel Visualization": On the right side are where people are coming form. We are doing a redesign of the homepage right now and it will be important to leave the "Visit" link since that is where the majority of the people come from. On the left side are the users who exit, and where they exit to. Our Visit page is a little complicated (reasons beyond my control) and this data will be used to show the Admissions folks that only 14% of the visitors actually continue the form. I hope to be able to use this data to convince Admissions to relook at the usability of their visit page.

Accessing Imported Objects in ActionScript 3

Jesse — Mon, 26 Apr 2010 16:30:20 +0000

I learned the bulk of my understanding of ActionScirpt 3 with UNC’s “Bringing Education to Life Campaign”. I rewrote the code for the base flash file 3 different times, each time updating the code with what I had learned. The site was created using modules, in which if we wanted to add something new, we just changed a few parameters in an XML file. The first module we created was the "Photo Tour".

UIloaders:

The Photo Tour, connects to an XML document that tells flash where to place the marker and what photo to bring up when clicked. Back when I started this project I was fairly new at ActionScript so I created a UILoader for each marker and loaded the same image into it each time. This created huge performance issues.

Import to Library

The best way to add these objects is to import them into your library and convert them to a MovieClip. In the Library, right click on your movie clip and go to “Properties”. Check the box that says “Export for ActionScript” and in the “Class” box, enter: assets.symbolName Indicate “assets” in front of the object to maintain organization in your code.

Code:

To access your object in ActionScript first you need to import it. Next create a variable based on your object and add it to the stage:

package {

import flash.display.Sprite;

import assets.mySymbol;

public class importObjects extends Sprite{

public function importObjects(){

var newSymbol = new mySymbol;

addChild(newSymbol);

}

Get FaceBook Comments with PHP

Wed, 21 Apr 2010 16:30:14 +0000

Last week I posted a photo on my photo blog and on Flickr of my hops starting to grow. Once uploaded, I went to FaceBook and posted a link to the photo there. A few people commented in different places and it got me thinking about how I receive comments.

My photo blog doesn’t receive too many comments to begin with, so when I get one I get excited about it. One of my friends posted her comment on my FaceBook wall, so I started to think about how I could pull those comments into one place.

FaceBook APIs

FaceBook has a few different APIs; there is the one for developing applications within their site. One for developers who would like to use FaceBook’s authentication system, and finally, there is one for pulling data off of FaceBook on your site: FaceBook PHP5 Client library.

Setup Code:

1: $api_key = 'xxxxxx';

$secret = 'xxxxxx';

include_once '../../assets/php/facebook/facebook.php';

$facebook = new Facebook($api_key, $secret);

$user = $facebook->require_login();

Grab the Message’s Comments:

$facebookComments = $facebook->api_client->stream_getComments(" xxxx_ xxxxxx"); //*

foreach ($facebookComments as $fb){

$user_details = $facebook->api_client->users_getInfo($fb["fromid"], 'last_name, first_name');

echo "

from: " . $user_details[0]["first_name"] . " " . $user_details[0]["last_name"] . "

;

echo "

date: " . date("Y-m-d H:i:s", $fb["time"]+64800) . "

;

echo "

comment: " . $fb["text"] . "

;

}

Easy right?

I was surprised how quickly I was able to mock up some code. The stream_getComments command takes my user ID number and the comment ID number and returns an array with the following items:

Fromid = users ID#; *I have a second query to grab the person’s name based on their ID
Time = Unix timestamp format. I added 64800 second to the time so it would be converted to Mountain Standard Time.
Text = The text of the Comment
Id = usernameID_postID_commentID

The Problem:

About an hour later I logged off of FaceBook and the whole thing broke. What I didn’t realize was that the FaceBook library was using existing session data from FaceBook. This makes since that I would have to authenticate in since my FaceBook settings are private.

I set the project aside and came back to it the next day. I came to the conclusion that rather than let the comments site on FaceBook (like I do with Flickr), I will pull the comments down to my server. This will help with two things:

When contacting any API there is usually a lag and since I am already pulling comments from my SQL database and Flickr’s API, it would take longer for the blog to load.
I’m not sure how long I will be able to access those comments on FaceBook. I would hope in two years from now if I wanted to pull in those comments they would still exist; I’d rather have the comments where I can access them quickly.