Today I have uploaded a video ‘Lego plays Ruzzle‘ on Youtube, to show how my creation works.

I like to mix different technologies to create something innovative.

I love Lego, and recently discovered Ruzzle, a popular mobile game. So, I decided to mix Lego, Ruzzle, Javascript, bash and other pieces to create a super robot

In this project I used:

• Tablet with Ruzzle
• Bash script for:
  • Bash script for download screenshot of device
  • Process image with Imagemagick
  • Recognize character from image with Tesseract
• NodeJS for:
  • Solving Ruzzle
  • Optimizing the plan
  • Send via bluetooth to Lego Mindstorm
• Nxc program to receive plan via bluetooth
• Absolute Position Regulator library for precise control of lego motors

The project is open source, and the code is on Github:

https://github.com/albertosarullo/ruzzle-mindstorm-nxc-nodejs-solver

More photos are on Flickr:

http://www.flickr.com/photos/silvana_g/8459161766/in/set-72157632723812787/

Other article on Lego Ruzzle Solver:

• (english) http://hackaday.com/2013/02/19/lego-stylus-solves-ruzzle-tablet-game/
• (russian) http://24gadget.ru/1161053411-lego-reshaet-golovolomku-ruzzle-video.html
• (russian) http://mirfactov.com/lego-reshaet-golovolomku-ruzzle/
• (italian) http://leganerd.com/2013/02/13/lego-plays-ruzzle-retroscena-della-nascita-di-un-robot/
• (italian) Video of my partecipation @ Deejay TV show

In march 23 I talked about history of my robots @ Codemotion Rome. Below you can finde the slides of my talk:

Any feedback / request is appreciated !

The robot use 3 NXT motors: one for x-axis movement, one for y-axis movement, and one for move the “finger” up and down. To decrease friction, the two movable parts of robot are supported on rigid wheels, like a bridge crane.

A curious thing: the capacitive touchscreen of the tablet require human fingers (attached to human body) to dispatch touche event. Because attach fingers to lego mindstorm motor require detaching fingers from my body, I have discover that conductive sponge is a very good alternative, and because vegetal sponge is conductive, I have buy it at supermarket for 1 euro saving my real fingers.

My goal is to merge both software (image processing, ocr, solver) and hardware (mechanics, servos, fake finger on a touchscreen) worlds, building a funny Lego robot.

On software side:

• Bash script for download screenshot of device
• ImageMagick to process screenshot image
• Tesseract for character recognition
• NodeJS for:
  • solving ruzzle game
  • send the plan to lego mindstorm nxt via bluetooth

On hardware side:

• Lego Mindstorm (nxt)
• Nxc program that receive plan via bluetooth
• Absolute Position Regulator for precise control of servo

When I have something working, I post nxc program on Github:

Javascript fix (Query)

try {
	if ($.browser.mozilla) {
		$(window).resize(function () {
			$("#yourFlash").css('margin-left', window.outerWidth % 2 ? '0' : '0.5px')
		}).resize();
	}
} catch(ex) { }

Css fix

#flashmain { magin-left: 0.5px }

New Javascript objects and event handler

From javascript point of view, we have:

• new handler window.ondevicemotion
• new event object:
  • event.accelerationGravity, with x, y, z attributes
  • event.accelerationIncludingGravity, with x, y, z attributes
  • event.rotationRate, with alpha, beta, gamma attributes

Code Snip

window.ondevicemotion = function(event) {
	var accelerationX = event.accelerationIncludingGravity.x;
	var accelerationY = event.accelerationIncludingGravity.y;
	var accelerationZ = event.accelerationIncludingGravity.z;
}

Demo

Online Demo (require Safari Mobile)

API

DeviceMotionEvent Class
DeviceOrientationEvent Class

public class YourUtilsClass {
	public static function navigateToURL( url:String ) : void {
		ExternalInterface.call("function winOpen() { window.open('" + url + "'); }");
	}
}

I’ve made some user testing sessions, and I’ve found that many non advanced users need a tooltip, to explain the meaning of the number showed on the cluster icon.

I use Markerclusterer in a site based on Google Map v3 APIs and I find that is impossible to customize tooltip (html title tag) showed when users stop the cursor over a cluster.

So, I have modified the markerclusterer javascript library, adding an optional parameter ‘description’ that specifies the tooltip. Nothing was changed in the class interface, so the backward compatibility is guaranteed:

var markerClustererOptions = { 
	description: ' tracks: click to show',
	maxZoom: 12,
	gridSize: 50
};
var markerClusterer = new MarkerClusterer(map, markers, markerClustererOptions);

Demos

Markerclusterer with custom tooltip

Update (7 jan 2011)

I have written to google map’s team to submit my code. On january 4th Luke Mahé from google said me that my modify will be add to the markerclusterer javascript library.

• without a Display List many developers loose their time to draw simple geometric polygons
• without interaction, polygons are motionless and dead

So, I’ve began to write a Javascript library to fill this gap.

My idea is to write simple classes to:

• wrap obvious polygons attributes
• make polygon interactive (dragging, clicking)

Code Snip

var displayList = new DisplayList("canvas");
var circle = new Circle(200, 100, 50, draggable);
var rectangle = new Rectangle(100, 100, 40, 40, draggable);	
	
displayList.add( rectangle );
displayList.add( circle );
displayList.render();