Gchat, the awesome Google Talk client Luis and I built for Windows Phone, is now available in the Marketplace! We’ve been working on it for a long time and we’d love to know what you think.

Click the button below to go to the Marketplace now and download it!

We hope you enjoy using Gchat! If you find a bug or want to suggest a new feature, please report it.

For my Computer Graphics class we had to do Sierpinski’s Triangle in OpenGL. As optional extra credit, we could expand it to 3D. I took up the challenge, and this was the result. It’s not perfect, but it looks really cool!

As always, grab the code at Gist. Comments, forks and improvements are appreciated. :)

I’ve made a very simple reactive agent that simulates an (extremely simplified) Apollo lunar module landing. You can also land it manually in the program. It was built as a project for my Intelligent Systems class in February 2010. I may expand it if I have the time.

It’s built in C# and WPF and requires .Net 4.0. You can download it now at Codeplex or get the source.

Here’s a short video of it working:

I’ve made an MD5 hash brute-force cracker implemented in JavaScript using HTML5 Web Workers. It was built as a project for my Distributed Applications class in October 2010.

Try it out right now

Get the code at GitHub (Free under the Microsoft Public License)

Cross-posted con Hogar Geek.

DreamSpark es un sitio web en donde Microsoft hace disponible una gran parte de su colección de herramientas de diseño y desarrollo de forma completamente gratuita para estudiantes. ¿Cómo funciona? Simplemente te registras con tu cuenta de Windows Live, seleccionas tu escuela, ingresas tu correo electrónico de tu escuela, y te enviarán un código de confirmación a este correo. Ingresa el código en la página, y ya quedará asociada tu cuenta de Windows Live con tu cuenta de la escuela. Después de esto, podrás descargar todo el software disponible en la página.

Algunos de los productos disponibles gratis en DreamSpark son:

• Visual Studio Professional, el suite completo de desarrollo para C, C++, C#, Visual Basic.Net, y F#
• Windows Phone SDK, el suite para desarrollo de aplicaciones móviles para Windows Phone 7
• Expression Studio, el suite para diseño web y de aplicaciones
• Windows Server y SQL Server
• XNA Game Studio, para desarrollo de juegos

Además, DreamSpark te da acceso gratuito al Windows Phone 7 Marketplace, donde podrás crear y vender aplicaciones de Windows Phone 7, lo cual normalmente tiene un costo de 100 dólares anuales. También tendrás derecho a una licencia académica de XNA para que puedas correr los juegos que tú has creado en una Xbox 360.

DreamSpark también tiene contenido de entrenamiento para que puedas aprender desde cero a desarrollar juegos y aplicaciones y a usar los suites disponibles para descargas.

Entonces, ¿qué esperas? ¡Empieza a desarrollar y diseñar cosas sorprendentes!

Sitio oficial | DreamSpark

The product of many hours of hacking during SuperHappyDevHouse Mexico City, I finally have a shareable prototype of the Windows Phone 7 app I started working on back in April: A Remember the Milk client.

The source code is available at Codeplex under the Microsoft Public License, so take a look at it, download it, try it out, and share it! If you have a Windows Phone 7 device, please try it out on the hardware itself and tell me how it works. It’s still a very early prototype and doesn’t have much functionality yet, so use at your own risk.

import urllib2

def getWeather(city):

    #create google weather api url
    url = "http://www.google.com/ig/api?weather=" + urllib2.quote(city)

    try:
        # open google weather api url
        f = urllib2.urlopen(url)
    except:
        # if there was an error opening the url, return
        return "Error opening url"

    # read contents to a string
    s = f.read()

    # extract weather condition data from xml string
    weather = s.split("<current_conditions><condition data=\"")[-1].split("\"")[0]

    # if there was an error getting the condition, the city is invalid
    if weather == "<?xml version=":
        return "Invalid city"

    #return the weather condition
    return weather

def main():
    while True:
        city = raw_input("Give me a city: ")
        weather = getWeather(city)
        print(weather)

if __name__ == "__main__":
    main()

Update: GitHub is awesome because it allows very easy forking. Beau Martínez has made a fork of my script that includes Python 3 support, XML parsing instead of RegEx searching, and temperature reporting.

This functionality is easy to add into your own extension. You need to add a background page, which is easily added by adding the background_page option to your manifest.json:

{
	"name": "My Extension",
	...
	"background_page": "background.html",
	...
}

Like almost every other component in a Chrome extension, background.html is a standard HTML file. However, it can also do things most web pages cannot, such as cross-origin requests if permissions are correctly added to the manifest. For example, if your extension is a Gmail checker, it would need permissions to http://www.google.com and https://www.google.com. To add these permissions, the manifest.json would be edited to:

{
	"name": "My Extension",
	...
	"background_page": "background.html",
	"permissions": ["http://www.google.com/", "https://www.google.com/"],
	...
}

A background page runs at all times when the extension is enabled. You cannot see it, but it can modify other aspects of the extension, like setting the browser action badge. For example, the following example would set the icon badge to the number of unread items in a hypothetical service:

function getUnreadItems(callback) {
	$.ajax(..., function(data) {
		process(data);
		callback(data);
	});
}

function updateBadge() {
	getUnreadItems(function(data) {
		chrome.browserAction.setBadgeText({text:data.unreadItems});
	});
}

So now you can make a request, but how can you schedule it so the data is retrieved and processed regularly? Luckily, JavaScript has a method called window.setTimeout to do just that:

var pollInterval = 1000 * 60; // 1 minute, in milliseconds

function startRequest() {
	updateBadge();
	window.setTimeout(startRequest, pollInterval);
}

That was easy! Now just slap a

onload='startRequest()'

on the background page’s body tag and that should do it!

But what if you want to stop the request? That can easily be done as well, by chaging the startRequest function a little and adding a stopRequest function:

var pollInterval = 1000 * 60; // 1 minute, in milliseconds
var timerId;

function startRequest() {
	updateBadge();
	timerId = window.setTimeout(startRequest, pollInterval);
}

function stopRequest() {
	window.clearTimeout(timerId);
}

And that’s about it on building background pages that can schedule requests. Now go! Make an awesome notifier! You can even make things like a timer with this (Facebook addiction control, anyone?). Just remember to leave a comment telling everyone of your awesomeness.

{
	"name": "My Extension",
	...
	"browser_action": {
		"default_icon": "myicon.png",
		"popup": "popup.html"
	}
	...
}

Or for page actions:

{
	"name": "My Extension",
	...
	"page_action": {
		"default_icon": "myicon.png",
		"popup": "popup.html"
	}
	...
}

However, the popup page is static and cannot be changed while the extension is running. Also, only a local extension page can be put into a popup; you can’t load an external page.

So how can you fix this? Using a relatively old web technique called an iframe. Inline frame, or iframe, is an HTML element that can load any web page inside another in a type of box. So, even though you can’t load an external web page as your popup, you can load it within it.

A simple example for a Bing search extension would be:

<html>
<head>
	<style type="text/css">
	body {width:200; height:300;}
	</style>
</head>
<body>
	<iframe src="http://m.bing.com" width="100%" height="100%" frameborder="0">
	</iframe>
</body>
</html>

As you can see, I have loaded the mobile version of Bing, http://m.bing.com. Because of the small amount of screen real estate available on the popups, loading mobile versions of a page is a good idea as they are minimalistic and require less space.

I’ve also explicitly declared the size of the page (200 by 300) and the iframe (100% of the page). You can change this to what fits your extension best.

(Yeah, I know it is ironic to build a Chrome extension centered on Bing, but I couldn’t get Google’s mobile search to load correctly in an iframe.)

On Chrome, the Bing search extension would look like this:

You can download the completed Bing extension from the Chrome Extensions Gallery and the source code (under the GPLv2) from Mediafire.

Now, what if you want to load a different page depending on an extension option? You can easily do this by constructing the iframe element dynamically when the page loads, like this code excerpt from ChromeMilk:

$(document).ready(function() {
	var popup = localStorage.popup || 'igoogle';

	var frame = document.createElement('iframe');

	frame.setAttribute('width', '100%');
	frame.setAttribute('height', '100%');
	frame.setAttribute('frameborder', '0');
	frame.setAttribute('id', 'rtmframe');

	if (popup == 'gmail') {
		// open gmail gadget
		$('body').height(300).width(200);
		frame.setAttribute('src', 'http://www.rememberthemilk.com/services/modules/gmail/');
	}
	else if (popup == 'iphone') {
		// open iphone web app
		$('body').height(480).width(320);
		frame.setAttribute('src', 'http://i.rememberthemilk.com/');
	}
	else if (popup == 'mobile') {
		// open mobile web app
		$('body').height(300).width(200);
		frame.setAttribute('src', 'http://m.rememberthemilk.com/');
	}
	else {
		// igoogle and default
		$('body').height(400).width(400);
		frame.setAttribute('src', 'http://www.rememberthemilk.com/services/modules/googleig/');
	}

	document.body.appendChild(frame);
});

This way, the extension sets the popup size and the iframe location based on a setting saved by the user.

There are a few limitations of this method. Most importantly, you can’t manipulate the iframe once it is loaded, as this is cross-side scripting and is prevented by the browser for security reasons.

That’s about it on loading external web sites in popups. You can use this for a number of things. I’ve mentioned mobile sites, but things like iGoogle widgets also work well.

Do you have any tips on building Chrome extensions based on popups? Or are you having trouble building your extension? Leave a comment!

Adding an options page

To add an options page to your extension, make an options.html file in your extension’s folder and add the “options_page” line to your manifest.json like so:

{
  "name": "My Extension",
  ...
  "options_page": "options.html"
  ...
}

localStorage

localStorage is an HTML5 object used for storing web page data locally using JavaScript. Chrome gives extensions the option of using localStorage to save options and data.

Saving options

To save a string to localStorage, use the following code, replacing mysetting and myvalue with your own:

localStorage["mysetting"] = "myvalue";

Or, equivalently:

localStorage.mysetting = "myvalue";

Loading options

To load an option, just access the setting member in the localstorage object:

myvar = localStorage["mysetting"];

Or, equivalently:

myvar = localStorage.mysetting;

It’s always a good idea to make sure you’ve loaded a valid setting. For example, the following code loads a favorite color, but if the current color is not valid, it loads the default value:

var defaultColor = "blue";

function loadFavColor() {
	var favColor = localStorage["favColor"];

	// valid colors are red, blue, green and yellow
	if (favColor == undefined || (favColor != "red" && favColor != "blue" && favColor != "green" && favColor != "yellow")) {
		favColor = defaultColor;
	}

	return favColor;
}

Erasing options

You can erase an option by removing it from the localstorage object, like so:

localStorage.removeItem("mysetting");

Building an options page

Continuing with the favorite color example, lets now build a complete options page for our color-choosing extension. The options.html page would look like this:

<html>
<head>
	<title>Options for Color Chooser</title>
	<script type="text/javascript" src="options.js"></script>
</head>
<body onload="loadOptions()">
	<h1>Favorite Color</h1>
	<select id="color">
		<option value="blue">Blue</option>
		<option value="red">Red</option>
		<option value="green">Green</option>
		<option value="yellow">Yellow</option>
	</select>
	<br />
	<button onclick="saveOptions()">Save</button>
	<br />
	<button onclick="eraseOptions()">Restore default</button>
</body>
</html>

For the behavior of the page, options.js would look like this:

var defaultColor = "blue";

function loadOptions() {
	var favColor = localStorage["favColor"];

	// valid colors are red, blue, green and yellow
	if (favColor == undefined || (favColor != "red" && favColor != "blue" && favColor != "green" && favColor != "yellow")) {
		favColor = defaultColor;
	}

	var select = document.getElementById("color");
	for (var i = 0; i < select.children.length; i++) {
		var child = select.children[i];
			if (child.value == favColor) {
			child.selected = "true";
			break;
		}
	}
}

function saveOptions() {
	var select = document.getElementById("color");
	var color = select.children[select.selectedIndex].value;
	localStorage["favColor"] = color;
}

function eraseOptions() {
	localStorage.removeItem("favColor");
	location.reload();
}

And that’s about it! You can also save and load localStorage data elsewhere in your extension, as the data is shared between all your extension’s files.

Any question, remark, or addition? Please leave a comment!