March Madness Challenge - Day 9

Another last minute post. Attempting to save marker data as JSON array in a Cookie in a jQuery friendly way. I ran out of time to test the code. In theory it should work.

Preview URL

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Where in the world is my dog pooin!</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAyOcYQmrUZiRTkZD33sBhThSYG2nKbTfLUqOyuY0R-KaU9CNsSxQHWg8je-XfTEMamlZKbXxG4Z752A"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.4.2");
</script>

<script type="text/javascript" src="jquery.cookies.2.2.0.min.js"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var markers = [];
function setPosition(position) {
console.log("setPosition: lat: " + position.coords.latitude + " lng: " + position.coords.longitude );
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
console.log("Map: " + map);
map.setCenter(location, 13);
addMarker(location, "Quality: " + $("input[name='quality']:checked").val() + "Date: " + new Date());
}

function addMarker(location, msg) {
var marker = new google.maps.Marker({
position: location,
map: map,
title: msg
});
markers.push(marker);
$.cookies.set('dogdata', markers);
}

function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}

if( !$.cookies.test() )
{
alert("Please enable cookies for this program to track very important information");
}

//if not created create cookie data

//find and display existing markers

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

$("#setcenter").bind("click", function(e){
console.log("bind click");
navigator.geolocation.getCurrentPosition(setPosition);
});

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(setPosition);
} else {
alert("navigator.geolocation not available.");

}
// detectBrowser();
navigator.geolocation.getCurrentPosition(setPosition);
});
</script>
</head>
<body >
<h1>Warning the SQLite poo storage db is not installed yet.</h1>
<h2>This means you have to never reload the page to record all the necessary poo data.</h2>
<div>Where in the world does my dog poo?</div>

<div>Use the geolocation information to mark the spots your dog marks, with optional quality indicator.</div>

<form name="controls">
<div>Quality: </div>
<input type="radio" name="quality" value="1">1</input>
<input type="radio" name="quality" value="2">2</input>
<input type="radio" name="quality" value="3" checked="checked">3</input>

<input type="radio" name="quality" value="4">4</input>
<input type="radio" name="quality" value="5">5</input>
<button name="setcenter" id="setcenter">Mark!</button>
</form>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

March Madness Challenge - Day 8

This is the beginning of something special for all the dog lovers in the world. Using Google Maps API version 3, and jQuery you can now mark on a map where and the quality of your dogs poo. Unfortunately, this program is a two parter. Today's portion allows you to mark the location of the poo, and track it as long as you never reload the web page. The next update will use the SQLite option in HTML to store and retrieve poo data.

Compatibiltiy note: Marking poo locations works in Firefox 3.5 and higher, iPhone, and maybe Droid. When SQLite is added it will end up being only iPhone or Droid.

One thing that took way too much time to debug was how get the code recognized as HTML5. One way is to strip out all the things indicating that it's not HTML 5 and include only an html tag by itself. This let's the browser choose.

And here's the code:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Where in the world is my dog pooin!</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAyOcYQmrUZiRTkZD33sBhThSYG2nKbTfLUqOyuY0R-KaU9CNsSxQHWg8je-XfTEMamlZKbXxG4Z752A"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>   
    <script type="text/javascript" charset="utf-8">
          google.load("jquery", "1.4.2");
      </script>
      <script type="text/javascript" charset="utf-8">
       $(document).ready(function() {
  function setPosition(position) {
   console.log("setPosition: lat: " + position.coords.latitude + " lng: " + position.coords.longitude   );
   var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
   console.log("Map: " + map);
   map.setCenter(location, 13);
   addMarker(location, "msg");
  }

  function addMarker(location, msg) {
    var marker = new google.maps.Marker({
    position: location, 
    map: map, 
    title: msg
   });   
   }

  function detectBrowser() {
   var useragent = navigator.userAgent;
   var mapdiv = document.getElementById("map_canvas");
           
   if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
       mapdiv.style.width = '100%';
       mapdiv.style.height = '100%';
     } else {
   mapdiv.style.width = '600px';
          mapdiv.style.height = '800px';
    }
  }
  
        var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
          zoom: 14,
   center: latlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  $("#setcenter").bind("click", function(e){
   console.log("bind click");
   navigator.geolocation.getCurrentPosition(setPosition);
  });

  if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(setPosition);
  } else {
   alert("navigator.geolocation not available.");

  }
//  detectBrowser();
 navigator.geolocation.getCurrentPosition(setPosition);
 });
    </script>
  </head>
  <body >
   <h1>Warning the SQLite poo storage db is not installed yet.</h1>
   <h2>This means you have to never reload the page to record all the necessary poo data.</h2>
   <div>Where in the world does my dog poo?</div>
   <div>Use the geolocation information to mark the spots your dog marks, with optional quality indicator.</div>

   <form name="controls">
    <div>Quality: </div>
 <input type="radio" name="quality" value="1">1</input>
 <input type="radio" name="quality" value="2">2</input>
 <input type="radio" name="quality" value="3">3</input>
 <input type="radio" name="quality" value="4">4</input>
 <input type="radio" name="quality" value="5">5</input>
 <button name="setcenter" id="setcenter">Mark!</button>
 </form>
 <div id="map_canvas"  style="width:100%; height:100%"></div>
  </body>
</html>

March Madness Challenge - Day 7

Thumb joystick controlled RGB LED!!!

Yesterdays entry was way unsatisfying. I wanted to enumerate all the possible RGB combinations, but was impatient, and made errors. Today's project took on the issue of determining what exact PWM values were set on this RGB led, and getting a starting point to calibrate the brightness between leds so get a decent color mix. Well, I didn't get to the issue of calibration, but I did get connect 2 thumb joysticks to the led and adjust the brightness values by reading the joystick data. Hook up 3 potentiometers and you can dial the exact combination RGB values you want.

/*
* 3 Potentiometers or Joystick  controled rgb led
*/


int redPin = 9;    // LED connected to digital pin 9
int greenPin = 10;
int bluePin = 11;
int potR = 0;
int potG = 1;
int potB = 2;
int r,g,b = 0;

void rgb (int r, int g, int b) 
{
     analogWrite(redPin, r);
     analogWrite(greenPin, g);
     analogWrite(bluePin, b);
     
}

void setup()  { 
  Serial.begin(9600);
  Serial.println("Setup done");
} 


void loop()  {

  r = analogRead(potR);
  g = analogRead(potG);
  b = analogRead(potB);
  
  r = map(r, 0, 1023, 0, 255);
  g = map(g, 0, 1023, 0, 255);
  b = map(b, 0, 1023, 0, 255);
      
  rgb(r, g, b);
  Serial.print(r);
  Serial.print(", ");
  Serial.print(g);
  Serial.print(", ");
  Serial.println(b);
 
        
}

March Madness Challenge - Day 6

Loss of brain power leads to coding RGB LED enumeration for Arduino. Tired going to bed soon.

int redPin = 9;    // LED connected to digital pin 9
int greenPin = 10;
int bluePin = 11;

void fadeIn(int pin, int fadeInc, int delayValue)
{
  for (int fadeValue = 0; fadeValue<= 255; fadeValue += fadeInc)
  {
    analogWrite(pin, fadeValue);
    delay(delayValue); 
  }
}

// fade out from max to min in increments
void fadeOut(int pin, int fadeInc, int delayValue)
{
  for (int fadeValue = 255; fadeValue >= 0; fadeValue -= fadeInc)
  {
    analogWrite(pin, fadeValue);
    delay(delayValue); 
  }
}

void rgb (int r, int g, int b) 
{
     analogWrite(redPin, r);
     analogWrite(greenPin, g);
     analogWrite(bluePin, b);
     delay(30);
}

void setup()  { 
  Serial.begin(9600);
  
  // diagnostic lights on
  fadeIn(redPin, 5, 60);
  fadeOut(redPin, 5, 60);
  analogWrite(redPin, 0);
  delay(30);
  fadeIn(greenPin, 5, 60);
  fadeOut(greenPin, 5, 60);
  analogWrite(greenPin, 0);
  delay(30);
  fadeIn(bluePin, 5, 60);
  fadeOut(bluePin, 5, 60);
  analogWrite(bluePin, 0);
  delay(30);
  Serial.print(redPin);
  Serial.print(", ");
  Serial.print(greenPin);
  Serial.print(", ");
  Serial.println(bluePin);

} 


void loop()  {
  for (int r = 0; r <= 255; r++)
  {
    for (int g = 0; g <= 255; g++)
    {
      for (int b = 0; b <= 255; b++)
      {
        rgb(r, g, b);
        Serial.print(r);
        Serial.print(", ");
        Serial.print(g);
        Serial.print(", ");
        Serial.println(b);

      }
    }
  }    
}

March Madness Challenge - Day 5

For tonight's March madness I will be demonstrating a variation on the theme of storing your private key locally. This program will up the ante and store your username and password as a QRCode. This way only a few machines can compromise your accounts when you take a picture of your username/password for decryption. Inspired by the following super high security tech technology: SafeBerg Technology

A bit of preparation is required. I'm using the python library huBarcode. You will need to run some flavor of "git clone git://github.com/hudora/huBarcode.git" followed by python setup.py install. Last option: sudo easy_install huBarcode

This code would have worked brilliantly if not for this error:
IOError: [Errno 2] No such file or directory: '/Library/Frameworks/Python.framework/Versions/2.4/lib/python2.4/site-packages/huBarcode-0.56p5-py2.4.egg/qrcode/qrcode_data/qrv1_0.dat'

And here is the code:

#
# Turn a username/password into a QRCode 
#
#
import getopt
import sys
import getpass
import qrcode

#Describe usage
def usage():
 print "-h, --help\n -v, --verbose\n -u, --username\n -p, --password\n -f, --filename\n"

def main():
 try:
  opts, args = getopt.getopt(sys.argv[1:], "h:u:pvf:", ["help", "username=", "password", "filename"])
 except getopt.GetoptError, err:
  #print help information and exit:
  print str(err) # will print something like "option -a not recognized"
  usage()
  sys.exit(2)
 username = None
 password = None
 verbose = False
 filename = "default.png"

 for o, a in opts:
  if o == "-v":
   verbose = True
  elif o in ("-h", "--help"):
   usage()
   sys.exit()
  elif o in ("-u", "--username"):
   username = a
   if verbose:
    print "username: " + username 
                elif o in ("-p", "--password"):
   password = getpass.getpass("Enter password: ") 
   if verbose:
    print "password: " + password 
  elif o in ("-f", "--filename"):
          filename  = a;
   if verbose:
    print "filename: " + filename 
  else:
   assert False, "unhandled option"
 if username is None:
  print "-u, --username  was not given"
  usage() 
  sys.exit(2)
 if password is None:
  print "-p, --password  was not given"
  usage()
  sys.exit(2)


 encoder = qrcode.QRCodeEncoder( username + "\n" + password)
 print encoder.get_ascii()
 encoder.save(filename, 3)

if __name__ == "__main__":
 main()

March Madness Challenge - Day 4

Kept thinking about yesterday's setTimeout and how to chain it into a a color show. Inspired the by the Trippy RGB Waves kit. I wanted to create a Javascript simulation of the rgb color show. The Trippy RGB Waves kit uses an array called lightTab to hold information about the hold time, fade time, and the rgb color values. So I took that array an implemented in Javascript. In order to display values I built a test page, test css, test Javascript. I ran out of time to write the fader. So I have a color show based on the lightTab array. setTimeout is used in a recursive fashion. The issues run into were needing to make sure the lightTab was global, and that an anonymous function was used to call the function in the site time out. Here's the example:

setTimeout("runShow(" + (i + 1) + ")", holdTime);
setTimeout(function () {runShow(i + 1);}, holdTime);

If I was executing more code or had more values in my function then anonymous function route is much easier to type, and less error prone. Other thing, I love jQuery, but none of my Javascript entries have used it. Sort of just checking out the plain old DOM and seeing what can be done.

Without further ado here is the html, css, and js.

test.html
====

====

rgb.css
====

====

rgb.js
====

====

March Madness Challenge - Day 3

Another long day, but I did come. up with something that I needed for another project. It turns out the closest thing Javascript has to sleep(ms) or delay(ms) is setTimeout. Which is nice but is tricky to use in a synchronous environment. So in terms of matching what happens on an AVR chip or an Arduino. It's time for a delay(ms) script.

setTimeout("showColor(red,green,blue)",holdTime);

function showColor(red, green, blue)

{

document.getElementById("leddisplay").style.backgroundColor="rgb(" + red + "," + green + "," + blue + ")";

}

Well not really. I wrote the delay function, but it's not the recommended technique. Why block all actions on a page waiting for one thing to happen. The above code is closer. But doesn't solve the key issues. The setTimeout needs to have values assigned for red, green, and blue for the showColor function. Additionally, this code requires a web page. I needed to upload that. I needed to assign an event listener, and lastly had to resolve an issue about setTimeout being inside a loop. The issue being the loop sets all the "setTimeout"s as quickly as possible, so all time outs occur almost in parallel. I could be wrong about that, but I did have some kind of issue. I needed to examine Javascript fader examples more closely, and I would have figured it out, but ran out of time.

Ok. I wrote a super quick brute force demonstration of the problem. This requires Firebug in order to run. Paste the following code into the Firebug console. Warning whatever web page you are viewing in firebug will go through some awful color contortions.

function showColor(red, green, blue)
{ document.body.style.backgroundColor="rgb(" + red + "," + green + "," + blue + ")"; 
console.log("Color set"); 
}
console.log("Start");
console.log('setTimeout("showColor(0,0,0)",10000);');
setTimeout("showColor(0,0,0)",10000);
console.log('setTimeout("showColor(10,10,10)",9000);');
setTimeout("showColor(10,10,10)",9000);
console.log('setTimeout("showColor(100,100,100)",8000);');
setTimeout("showColor(100,100,100)",8000);
console.log('setTimeout("showColor(200,200,200)",7000);');
setTimeout("showColor(200,200,200)",7000);
console.log('setTimeout("showColor(200,0,0)",6000);');
setTimeout("showColor(200,0,0)",6000);
console.log('setTimeout("showColor(100,0,0)",5000);');
setTimeout("showColor(100,0,0)",5000);
console.log('setTimeout("showColor(0,100,0)",4000);');
setTimeout("showColor(0,100,0)",4000);
console.log('setTimeout("showColor(0,100,100)",3000);');
setTimeout("showColor(0,100,100)",3000);
console.log("Done")

So nesting the setTimeout inside SetTimeout should be interesting. Onto the next challenge.