CityGrams - Google Maps and Instagram mashup

One of my hobbies is photography. I like it very much, as it allows me to freeze a moment in time. It helps me revive memories of my travels. Besides the more traditional photography, I like to do just "snaps". A few years ago, when I got my old Galaxy S phone I found an application named Retro Camera which simulates old classics like Lomo, Holga, Polaroid, Diana, etc. Nowadays the most popular app is, without a doubt, the Instagram, with million of users around the world.

You can see some of my shots here, or maybe follow me. :)
http://instagram.com/halufa#

Some of my insta-shots

I needed to check some of the possibilities of the google maps API. Coding and testing without a real purpose is boring, so I came up with the idea of showing instagram photos placed on the map, as soon as they are uploaded.

My approach was really simple: I thought it would be more common for people to georeference photos when in cities, because of the number of users and the better 3G signal. I guess I was right! In cities like London, Paris or New York several dozens of pictures are uploaded each minute.

The little app has an input box to allow the user to search for the city he wants and it asks instagram to give the photos from the last 30 seconds, refreshing with the same interval. I added a rollover event handler to bring the focus picture to the front and a click handler to display the original size.

I think the ending result was interesting and allowed me to confirm the awesomeness of google maps API.

If you don't see  photos for the place you have chosen, wait a bit or try a new location.

You can see the app working, here:
http://citygrams.googlecode.com/svn/trunk/CityGrams.html

You can grab the code, and change it as you want, here:
http://code.google.com/p/citygrams/

If you like the idea, please give me some feedback.

Network settings on Windows Chrome different from system settings

Chrome supports the following proxy-related command line arguments:

--no-proxy-server

This tells Chrome not to use a Proxy. It overrides any other proxy settings provided.

--proxy-auto-detect

This tells Chrome to try and automatically detect your proxy configuration. This flag is ignored if --proxy-server is also provided.

--proxy-server==[:];.. | [:] | "direct://"

This tells Chrome to use a custom proxy configuration. You can specify a custom proxy configuration in three ways:

1) By providing a semi-colon-separated mapping of list scheme to url/port pairs.
For example, you can specify:
--proxy-server="http=foopy:80;ftp=foopy2"
to use HTTP proxy "foopy:80" for http URLs and HTTP proxy "foopy2:80" for ftp URLs.

2) By providing a single uri with optional port to use for all URLs.
For example:
--proxy-server="foopy:8080"
will use the proxy at foopy:8080 for all traffic.

3) By using the special "direct://" value.
--proxy-server="direct://" will cause all connections to not use a proxy.

--proxy-bypass-list

This tells chrome to bypass any specified proxy for the given list of hosts. This flag must be used (or rather, only has an effect) in tandem with --proxy-server.
The list of hosts is given in a comma-separated list of (|)[:] entries. Note that trailing-domain matching doesn't require "." separators so "google.com" will match "igoogle.com" for example.


For example,
--proxy-server="foopy:8080" --proxy-bypass-list="*.google.com;*foo.com;127.0.0.1:8080"
will use the proxy server "foopy" on port 8080 for all hosts except those pointing to *.google.com, those pointing to *foo.com and those pointing to localhost on port 8080.
igoogle.com requests would still be proxied. ifoo.com requests would not be proxied since *foo, not *.foo was specified.

--proxy-pac-url=

This tells Chrome to use the PAC file at the specified URL.

For example,
--proxy-pac-url="http://wpad/windows.pac"
will tell Chrome to resolve proxy information for URL requests using the windows.pac file.

DIY - Very LOW COST emergency charger

Ever thought about making an adventure travel into the wilderness, but not wanting to get rid of your phone, MP3 or GPS? What if the trip takes several days and you've no place to charge your equipment? You could buy a solar charger, which are not that cheap and take really long to charge. You could have a spare batery for your phone, but then again it's not cheap and in some cases it's annoying to make the replacement. Or you could use spare and very low cost parts and build one yourself, giving you the joy of using something self made.

With simple AA chargeable batteries you can give some precious juice to your portable equipment to keep it running. With the benefit that you can charge the batteries again as soon as you get to civilization and you can use as many battery sets as your back can handle.

The AA chargeable batteries provide a maximum voltage around 1.25V instead of the alkaline non chargeable ones (1.5V). Connecting them in serial mode will give your equipment approximately 5V, which is the tension needed for the USB charged devices.

1. micro USB connector ( 1€ )
2. 4 AA battery socket holder ( 0.3 € )
3. 9V battery connector snap ( 0.17 € )
4. soldering connections and silicon glue

Since I couldn't find a place selling a micro USB connector, just bought a cable in a chinese shop and cut the part i needed. After that, the only tricky part is soldering the cables: make sure you connect red with red and black with black. The silicon glue will make the connection isolated and robust since the wires are very thin.

If you want you can even connect several distinct adapters instead of only micro USB.

Another important thing to keep in mind are the batteries capacity! They should be higher than your equipments. For example my Galaxy S has a 1500mAh battery, meaning I've to use at least the same capacity or it won't make a full charge. 

Hypnotic kamikaze burst in HTML5

Today, inspired by japanese kamikazes created another experiment using Canvas of HTML5.

Move the mouse around for some cool and hypnotic effect.

HTML5 VideoWall Experiment

As an experiment video on HTML5, I made a VideoWall in Javascript. It copies the imageData from a video hidden outside the screen and creates some cool effects. Also added a reflection using CSS3 which makes a great effect and it's very easy. The video is in WebM format.

The developing was really straightforward, and the performance is not that bad.

Watch it here.

Only tested it on Chrome, not sure it will work on other browsers.

Video credits to Benny Benassi.

SECURITY_ERR on Chrome using getImageData()

When playing a little with Canvas HTML5, I stumbled upon a Javascript exception SECURITY_ERR. After some search I found out that Chrome throws this exception if you're running it on as local file ( file:/// ) or using on a image from different domain.

If you want to disable this for a while just to make your development, you can start Chrome from command line with the switch --allow-file-access-from-files.

Example for Mac OS X:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files&

Resistor value calculator in HTML5

A resistor is a two-terminal electronic component which implements electrical resistance as a circuit element. When a voltage V is applied across the terminals of a resistor, a current I will flow through the resistor in direct proportion to that voltage. The reciprocal of the constant of proportionality is known as the resistance R, since, with a given voltage V, a larger value of R further "resists" the flow of current I as given by Ohm's law.


Most axial resistors use a pattern of colored stripes to indicate resistance. Surface-mount resistors are marked numerically, if they are big enough to permit marking; more-recent small sizes are impractical to mark. Cases are usually tan, brown, blue, or green, though other colors are occasionally found such as dark red or dark gray.
Early 20th century resistors, essentially uninsulated, were dipped in paint to cover their entire body for color coding. A second color of paint was applied to one end of the element, and a color dot (or band) in the middle provided the third digit. The rule was "body, tip, dot", providing two significant digits for value and the decimal multiplier, in that sequence. Default tolerance was ±20%. Closer-tolerance resistors had silver (±10%) or gold-colored (±5%) paint on the other end.


Four-band identification is the most commonly used color-coding scheme on resistors. It consists of four colored bands that are painted around the body of the resistor. The first two bands encode the first two significant digits of the resistance value, the third is a power-of-ten multiplier or number-of-zeroes, and the fourth is the tolerance accuracy, or acceptable error, of the value. The first three bands are equally spaced along the resistor; the spacing to the fourth band is wider. Sometimes a fifth band identifies the thermal coefficient, but this must be distinguished from the true 5-color system, with 3 significant digits.
For example, green-blue-yellow-red is 56×10⁴ Ω = 560 kΩ ± 2%. An easier description can be as followed: the first band, green, has a value of 5 and the second band, blue, has a value of 6, and is counted as 56. The third band, yellow, has a value of 10⁴, which adds four 0's to the end, creating 560,000 Ω at ±2% tolerance accuracy. 560,000 Ω changes to 560 kΩ ±2% (as a kilo- is 10³).

To try out EaselJS (a javascript library for working with the html5 canvas element) and inspired by Resistor Colour Wheel I wrote a small experiment, that can help finding the value of resistors: HTML5 Resistor calculator.

ALERT! This experiment won't work at all in Internet Explorer. You need Chrome, Firefox, Safari or any other browser supporting HTML5.