I wanted to create a progress indicator that would show completed stages in a shade of green. Initially I was thinking of using Raphaeljs, but this task seemed solvable only by using CSS. So here is a simple jsfiddle I came up with showing how it can be done:
I received a Raspberry Pi as a gift (Thanks T.H!) last Friday and couldn’t wait to tinker with it. In case you are wondering, Raspberry Pi is a credit card size computer that is going to revolutionize education & computing. Step 1 was a trip to Fry’s to pick up an SD card that would work with Rpi and a USB mouse/keyboard. There is a list of compatible cards here. I got a 16GB Class 10 Samsung SDHC card which ended up working well.
I created a Raspbian “wheezy” image, which is a modified Debian image recommended for starters. I wrote the image on the SD card, hooked up my TV with a HDMI cable, connected a Ethernet cable from my router (thankfully there was one open port, and I had a cable lying around), hooked up the keyboard & mouse and powered it up. Bingo! It was exciting to see the linux bootup sequence on the TV and get to the login prompt. I could log in, but after some keyboard difficulty. And then I ran ‘startx’ to bring up the UI. The kids and I were delighted to see the big raspberry image and the UI coming up, but alas, we could not move the mouse pointer and it would not respond to keyboard. It just got stuck! Looking for solutions, I tried many things, but finally figured out it was due to the most common issue with raspberry pi, the power supply! I managed to find a USB charger rated at 0.85 Amps, plugged it in, and voila! everything began to work!
My kids were excited to see the Scratch program that came preloaded. It worked fine, although much slower compared to its PC counterpart. We fired up the web browser. It was really slow, but web pages loaded fine although no Flash. I wanted to see how far I can push this tiny computer. So I ssh into it and quickly setup a LAMP stack. It was exciting to have it serve web pages! Then I installed WordPress on it, and within minutes, had a full fledged blogging system up and running! You can see it in action here: http://geekraj.no-ip.org/. I’ll explain the details of how to setup WordPress in my next post.
Well, this was my plan – to create an extremely simple virtual piano with Lego Mindstorms, just by using the ultrasonic sensor in the manner below:
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!
I wanted to create a robot that can draw something on a paper. Searching for some inspirations, I found on YouTube, a variety of very amazing and cool implementations. Yet, they all drew on a horizontal plane, and were mechanically complex. I wanted something that I could mount on my son’s easel, and draw like a painter. Being a complete mechanical noob and only 2 days of robotics experience behind me, I set out to design a very light contraption that would draw something interesting. During my research, I was heavily influenced by this non-lego robot. First I played with a few technic pieces to model the arms and then hooked it up to couple of servo motors. The result is what I call a PlotterBot!.
As you can see, it is very simple. Two motors drive a pantograph mechanism. A pen is taped to the tip of the pantograph.
Last weekend we walked into Fry’s to find an awesome deal for Lego Mindstorms NXT 2.0. Mindstorms is a robotics system for kids 10+ years, and it comes with 3 servo motors and 4 sensors (1 ultrasonic sensor, 1 color sensor and 2 touch sensors), and a wide variety of Lego technic pieces. I had always wanted to buy one for my son Kevin (and for me too, he he), so couldn’t pass up this deal!
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!!
Recently I found that a WebGL program I wrote earlier was not working anymore due to CORS restriction. To get around this, I wrote up an extremely simple proxy using node.js and hosted it on the amazing nodester service.
You can access the service like this:
It just fetches the data from remote url and streams it back, after adding the following two headers:
Electronics used to be my hobby while I was growing up, and one of the components that always fascinated me was the seven segment display. So when I wanted to get my feet wet on YUI 3 couple of weeks ago, I thought how cool would it be to develop a widget that renders a seven segment display. To make things interesting, I decided to bring Raphaël in the mix, and thus was born the YUI 3 seven segment display widget! In this article, I’ll explain how I went about developing this widget.
Today, I casually went to see what’s new on jQuery mobile and was treated with a wonderful surprise. The alpha is released! I immediately fired up my stock browser on droid and tried it out. It is so beautiful and I can’t believe its not a native app!
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.