To play the correct frequency for the detected key, I first tried a ladder if-then-else within the Mindstorms visual programming environment, and it absolutely tanked! For every if-then-else path, it was doubling the height and before I reached 5 such paths, the exponential growth of vertical screen height made it pathetically slow and unbelievably difficult to scroll. So I ditched it, flashed LeJos on the brick and wrote a teeny meeny Java code which worked brilliantly! or so I thought…

It was playing tunes alright, but they were not the correct ones! After a couple of rounds of troubleshooting, I quickly realized it was not any programming error, but one that I totally ignored – the resolution of the sensor!! It turns out that the precision of the sensor is +/- 3 cms, and I had the bars at 2 cm widths.

So the moral of the story is – before trying out things with sensors, make sure to read the specifications thoroughly!

As you can see, it is very simple. Two motors drive a pantograph mechanism. A pen is taped to the tip of the pantograph.

Following are some of the patterns it drew:

Here is the PlotterBot in action!

Getting back home, Kevin and I immediately got to work, and he was able to build the shooter bot quite easily with little help from me on the programming side. Shooterbot is one of the examples that come with the NXT software.

Next couple of days, I was pretty much occupied with it and built a robot that would paint geometric patterns! Expect more details, pictures and videos in my next post!!

You can access the service like this:

http://corsproxy.nodester.com/?src=<image url>

It just fetches the data from remote url and streams it back, after adding the following two headers:


Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Requested-With


You can see the source code here:

https://github.com/rmadhuram/corsproxy/blob/master/server.js

I tested it on Aurora (Firefox 9.0a2) and it works fine with a modified Three.js sample.
Note: Please use the nodester link for demonstration purposes only. Don’t use it in production!

See the widget in action
(Note: Works on FF3 and IE8. Does not work on IE7)

Download source files

One of the nice things that YUI gives us is a rich Object Oriented Programming (OOP) framework. When we model an entity as an object, we essentially group together properties and methods that pertains to the object. This abstraction makes building large software systems easier. Nowadays, more and more applications are being built to run on the browser and the richness of these keep increasing. Hence, an OOP approach is required to manage the complexity. YUI 3 provides the OOP capability via the extend function.

For building the seven segment widget, we will also use the widget framework provided by YUI 3. For drawing the segments, we will use a fantastic JavaScript library called Raphaël. It allows us to draw vector graphics on the browser using SVG and VML, and is cross browser compatible.

To understand more on the YUI widget framework, view the excellent presentation by Satyen Desai.

Attributes

The logical model for a 7 segment display is rather simple. We will have three attributes “value” , “scale” and “colors”. The “value” attribute determines what digit is displayed. “scale” will determine the dimensions of the display. “colors” will determine the colors of the lighted up and inactive segments.

 function SevenSeg(config) {
     SevenSeg.superclass.constructor.apply(this, arguments);
 }

 SevenSeg.NAME = "sevenseg";

 SevenSeg.ATTRS = {
     /**
      * Value of the seven segment display. This can be set to change
      * the displayed digit. Default value is 8 (all segments light up)
      */
     value : {
         value: 8
     },

     scale: {
         value: 50  // default scale is 50x.
     },

     colors: {
           value: {
                 active: {
                    fill: "#000",
                    outline: "#eee"
                 },
                 inactive: {
                     fill: "#fff",
                     outline: "#eee"
                 }
           }
     }
 };

Segment Mapping

We have two static variables, SEGIDX, which is an array of segment indices, and DIGITMAP, which maps the digit to the segments which need to be lit. For instance, to display the digit 1, segments “b” & “c” need to be lit up.

  SevenSeg.SEGIDX = ['a','b','c','d','e','f','g'];

  // Map of digits to segments that are lit.
  SevenSeg.DIGITMAP = {
      "0": "abcdef", "1": "bc", "2": "abged", "3": "abcdg",
      "4": "bcfg", "5": "afgcd", "6": "afedcg", "7": "abc",
      "8": "abcdefg", "9": "abcdfg", "":""
  };

Drawing the Seven Segment Display

In order to draw the seven segment display, we will use the magic of Raphaël. First a Raphaël canvas is created. On that canvas, a unit length horizontal segment is drawn a prototype, and all other segments are created by scaling, rotating and translating the prototype segment. The prototype segment is drawn like below:


var seg = paper.path("M 0 0 L 0.15 0.1 L 0.85 0.1 L 1.0 0 L 0.85 -0.1 L 0.15 -0.1 Z");


In case if you are wondering what the “M 0 0 L 0.15″ stuff means, it is the path specification for the horizontal prototype segment. For more details, read the SVG specification here.

The above segment is cloned seven times, scaled and then the individual display segments are stored in an array. Once these display segments are constructed, the prototype segment is removed. After that each display segment is rotated and translated according to its position on the seven segment display.

         /**
          * Draw a 7 segment display using Raphael canvas.
          */
         _draw7seg: function() {
             var contentBox = this.get("contentBox");
             var scale = this.get("scale");
             var paper = Raphael(contentBox._node, scale*1.3, scale*2.3);
             var seg = paper.path("M 0 0 L 0.15 0.1 L 0.85 0.1 L 1.0 0 L 0.85 -0.1 L 0.15 -0.1 Z");

             var tx = 0.15*scale;
             var ty = 0.15*scale;

             this.segments = new Array();
             for (var i=0; i<7; i++) {
                var thisseg = this.segments[SevenSeg.SEGIDX[i]] = seg.clone();
                thisseg.scale(scale, scale);
             }

             seg.remove();             

             var segs = this.segments;
             segs['a'].translate(tx + scale/2, ty);

             segs['b'].rotate(90);
             segs['b'].translate(tx + scale, scale/2 + ty);

             segs['c'].rotate(90);
             segs['c'].translate(tx + scale, scale/2 + ty + scale);

             segs['d'].translate(tx + scale/2, 2*scale + ty);

             segs['e'].rotate(90);
             segs['e'].translate(tx + 0, scale/2 + ty + scale);

             segs['f'].rotate(90);
             segs['f'].translate(tx, scale/2 + ty);

             segs['g'].translate(tx + scale/2, ty + scale);
         }

Methods

The methods to implement the widget are fairly straightforward. The _setDigit() method does the actual job of lighting up the appropriate segments for the given digit. The _clear() method clears all segments (filled with inactive color).

The bindUI() method hooks the “valueChange” event to _afterValueChange() handler, that takes the current value and sets the appropriate digit. Note that the clients should not call _setDigit() method to set the value. Instead, it would be done by just setting the “value” attribute and then the Attribute infrastructure takes care of the rest by firing the “valueChange” event!

         renderUI : function() {
             this._draw7seg();
         },

         bindUI : function() {
             this.after("valueChange", this._afterValueChange);
         },

         syncUI : function() {
             this._setDigit(this.get("value"));
         },

         _afterValueChange : function(e) {
             this._setDigit(e.newVal);
         },

         _clear: function() {
             for (var i=0; i<7; i++) {
                 var thisseg = this.segments[SevenSeg.SEGIDX[i]];
                 thisseg.attr("fill", this.get("colors.inactive.fill"));
                 thisseg.attr("stroke", this.get("colors.inactive.outline"));
              }
         },

         _setDigit: function(n) {
             this._clear();
             var chosenSegs = SevenSeg.DIGITMAP[n];
             for (var i=0; i<chosenSegs.length; i++) {
                var x = chosenSegs.charAt(i);
                var thisseg = this.segments[x];
                thisseg.attr("fill", this.get("colors.active.fill"));
                thisseg.attr("stroke", this.get("colors.active.outline"));
             }
          }

Demos

Click here to see the widget in action.

It worked great when the device orientation changed, immediately re-laying out the components in a jiffy. The only cause for confusion seems to be the “Back” button, which seems to mirror the back functionality of the browser. When you fire up multiple dialogs on the sample page and try it out, you have to unwind to go back to the previous screen.

Character recognition has been around for a while, and I have used it on my Palm and iPaq devices previously, but this is a very smart idea. What would take like 6 to 7 strokes for a word using character recognition can be done on a single stroke with swype! This is a game changer. In computer science terms, it is like optimizing from O(n^2) to O(n)!

I was a bit disappointed to see they did not have one for droid, but taking hint from a tech video, I googled it and bingo! there was one unofficial pre-release available. So inspite of the “It might burn down your house or eat your dog” caveat, I downloaded and installed on my droid, and I’m in so love with it!

Now I wonder what will happen if these kids gets a hand on one of these!

I like humor in code, but I am strongly against profanity, even in its mildest form. Please let us keep it professional!

Update: Initially I thought it was part of PDT distro, but thanks to Wayne, who pointed out it could not be, I verified that it was not by downloading and checking the plugins. I apologize for the error.

Also, the number of application downloads is 1042 as of today. Glad to have crossed the 1000 mark :)

Do you live near the Tropics and wish you had snow? or live in the Northern hemisphere and had enough of it? Don’t worry, this application will let you enjoy falling snow within the comforts of your home on your Android powered phone. Let it Snow! is a fun Android application for the Christmas holidays. It simulates falling snow over a winter landscape. There are three different landscapes available. It works in both portrait and landscape modes. You can also select a picture and have snow fall on your head or a friend’s!

This application is a socialware. It is free to download and use. It is available from Android Market. If you enjoyed it, I invite you to consider helping a worthy cause mentioned below. Your donation, however small or large will make enormous difference in the lives of many people.

Update: This has been tested on droid, and on emulators with HVGA. Please let me know if it works on other devices. The app might crash when you use with pictures.

Screenshots:

The Cause:

I’ve been associated with an organization called Myrtle Foundation in India, who does tremendous work with children, especially those who are affected by HIV/AIDS. They raise awareness of this deadly disease in the rural areas in a unique way by making use of puppetry.

One of their projects is called “Sathya Children’s Educational Sponsorship”, under which the foundation paid the educational expenses for 16 precious children in 2009 who are affected by HIV/AIDS (affected meaning one or both parents infected or the child itself is infected). Some of these children’s background:

• Yamini (12 years old) – When she was 2 years old, on 02/19/01, her father (27 yrs old) committed suicide by kerosene fire. After seeing this, she never laughed or spoke for the next 3 years. Now she is living with grandma.

• Nisha Rani (10 years old) – Mother is PLWHA (Person living with HIV/AIDS), father died of AIDS.

The organization is run by Mr. Williams (aka Venkatesh) along with a team of volunteers. He feels that this is his calling, and is full time into the project, and does not take any salary. He takes care of his family with his wife’s modest income. Our family has been supporting this project, and we could see that the  funds went directly to the children, and were properly utilized.

The need:

We need funds to support these children next year (2010), and also some more kids like them. Also, there is a need for a “campaign vehicle” that can be used for spreading HIV awareness.

How you can help:

• - You can spread the word by telling about the software and Myrtle to your friends. You can use the links for sharing below this article.
• - You can partner with us by contributions in cash or kind. Every dollar counts! The Myrtle web site is outdated, and they can’t accept credit cards at this time.
  • – If you are in the US and would like to make a donation, please contact me at rmadhuram@yahoo.com. I will send out details for Paypal/check. I will transparently make the collection details available to all donors.
  • - If you are in India or elsewhere, you can directly contact Mr. Williams (aka Venkatesh) at 9840096022 (mswn1@yahoo.com) for contributing.

Downloading the App:

The application is available in the Android market. Search for “snow”, download and enjoy!

Christmas is the season of giving when we celebrate the birth of Jesus, who is the ultimate gift of God for mankind. Let’s spread the cheer! Merry Christmas!!