Where science and tech meet creativity.

So, any of you who read my twitter know that I’ve been working on Portal to the Universe this week. Part of this is figuring out what goes into making astronomy tools (for fun and work) that can live on iGoogle pages and on normal webpages like this one. Today I managed, with a fair bit of frustration, to get two Google Gadgets to sort of go.

I would like to state for the record that the Google Sandbox does not work equally elegantly in all themes. I would also like to say that caching can drive you crazy. Nonetheless, it is highly satisfying to code things that proclaim “Goodbye, World!” or “Delete World” instead of the normal “Hello, World!” It was a sarcastic day.

Okay, whining over.

Wanna see what I did? As I create gadgets, they will appear in the Gadget’s link above. One of the two gadgets I created is one that combines a webcam and a twitter feed. It has some issues and I’m hoping that if I tell you what I did, the javascript experts in the audience may have some ideas.

First the gadget:

Now, for reason’s I can’t explain the twitter feed associated with this gadget randomly shows up. (Admittedly, I’m testing this during the debates and I think twitter might be a bit busy right now). Here is a screen capture of what it looks like when working right:

The code for this gadget does 3 things:

  • Retrieves an image from the Jodrell Bank Telescope webpage to display (It is coming from a cach though – I can’t figure out how to get the image to correctly refresh every 30 seconds.)
  • Get’s the latest tweet from JodrellBank and parse it so the name jodrellbank links through to the twitter page
  • Has title and footer info that redirects the user to Jodrell Bank

(I selected Jodrell Bank simply because I know they have a webcam and twitter feeds. I will repeat this with other scopes as I find them).

This gadget required about 1 page of code presented here.



<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
title="Jodrell Banks 7m Telescope"
title_url="http://www.jodrellbank.manchester.ac.uk/webcam/7m.html"
author="Pamela L. Gay / IYA2009"
author_email="pamela@starstryder.com"
screenshot="http://www.portaltotheuniverse.org/gadgets/images/Jodrell7m.png"
thumbnail="http://www.portaltotheuniverse.org/gadgets/images/Jodrell7m-icon.png"
height="200"
width="255"
scrolling="true">
</ModulePrefs>

<UserPref name=”num_entries” display_name=”Number of Entries:” defaultvalue=”1″/>

<Content type=”html”>
<![CDATA[

<p style=”text-align: center;”><img src=”http://www.jb.man.ac.uk/distance/observatory/images/webcam.jpg” width=”150px”></p>

<style> #content_div { font-size: 80%;  margin: 5px;} </style>
<div id=”content_div”></div>

<!—- Use Javascript to get the twitter feed and parse what I want. —->
<!—- Refer to http://code.google.com/apis/gadgets/docs/remote-content.html#Fetch_Feed —->
<script type=”text/javascript”>

// Get userprefs
var prefs = new gadgets.Prefs();
var entries = prefs.getInt(“num_entries”);

// Get the feed, SUMMARIES is the content. Can also get title and date, but decide not to
function getFeed() {
var params = {};
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.FEED;
params[gadgets.io.RequestParameters.NUM_ENTRIES] = new Number(entries);
var summaries = true;
params[gadgets.io.RequestParameters.GET_SUMMARIES] = summaries;
var url = “http://twitter.com/statuses/user_timeline/5747502.rss”;
// response calls function below
gadgets.io.makeRequest(url, response, params);
};

function response(obj) {
// obj.data contains the feed data
var feed = obj.data;
// Initialize the variable all the html goes in
var html = “”;

// Access the data for a given entry
if (feed.Entry) {
for (var i = 0; i < feed.Entry.length; i++) {
// find the break between twitter name and tweet and grab the tweet
var Delim = feed.Entry[i].Summary.indexOf(“:”);
var Tweet = feed.Entry[i].Summary.slice(Delim+1);

// find the name of the tweater and grab it
var Twit = feed.Entry[i].Summary.split(“:”, 1);

// post the tweater’s name as a link their page and then show tweat
html += “<div>”;
html += “<a href=’http://www.twitter.com/” + Twit + “‘ target=’_blank’><b>” + Twit + “:</b></a>”;
html += Tweet;
html += “</div>”;
}
}
// This changes the content between the div open and close to contain the html variable
document.getElementById(‘content_div’).innerHTML = html;
};
// this calls getFeed, which calls response
gadgets.util.registerOnLoadHandler(getFeed);
</script>
<p style=”font-family: times; font-size: 80%; font-weight: bold; text-align: center; border-top: thin solid #999999;”>Learn more about
<a href=”http://www.jodrellbank.manchester.ac.uk/aboutus/”>Jodrell Bank</a></p>
]]>
</Content>
</Module>


Now, as I stated, the Twitter code magically does and not appear at will. This has me sad. But then, we’re talking twitter. I also can’t figure out how to make the image refresh in a sensible manner. Help?

I also have a wish list of things to do: I want to turn links into, well, links, and make sure that @person shows up as a link to that person. This is a lot of complicated string parsing. I am just learning javascript, so this is a fun little puzzle when I’m not being confused by twitter not loading.

I’m also working on a “Keeping up with Star Stryder” gadget. I’ll post it under the tab above when I’m done 🙂