Category Archives: Code

Fiddler Script for Accept-Language Testing

It’s been a while since I’ve blogged about anything so it’s only fitting that I post about doing something fairly trivial. I say it’s trivial because Fiddler makes my job so gosh-darn easy!

I often find myself testing that web sites work in various other languages. In many cases, changing the Accept-Language for a site will do the trick and luckily Fiddler’s custom rules will let you do the trick. The software allows you to specify Japanese as an option under the Rules menu.

That said, simply testing one language isn’t usually enough. I’d find myself hitting CTRL+R to open the CustomRules.js file, editing the Accept-Language and waiting for another day before I’d need to do this again.

I got tired of this today and completely removed the single-instance Japanese support option from Fiddler. So I replaced this code:

    // Cause Fiddler to override the Accept-Language header 
    public static RulesOption("Request &Japanese Content")
    var m_Japanese: boolean = false;

With this code:

    // Cause Fiddler to override the User-Agent header with one of the defined values
    RulesString("&Accept-Languages", true) 
    BindPref("fiddlerscript.ephemeral.AcceptLanguage")
    RulesStringValue(0,"None", "")
    RulesStringValue(1,"German", "de")
    RulesStringValue(2,"English", "en")
    RulesStringValue(3,"Spanish", "es")
    RulesStringValue(4,"French", "fr")
    RulesStringValue(5,"Italian", "it")
    RulesStringValue(6,"Japanese", "ja")
    RulesStringValue(7,"Korean", "ko")
    RulesStringValue(8,"Dutch ", "nl")
    RulesStringValue(9,"Polish", "pl")
    RulesStringValue(10,"Portuguese (Brazil)", "pt-br")
    RulesStringValue(11,"Russian", "ru")
    RulesStringValue(12,"Swedish ", "sv")
    RulesStringValue(13,"Chinese (PRC)", "zh-cn")
    RulesStringValue(14,"Chinese (Taiwan)", "zh-tw")
    RulesStringValue(15,"en-us, fr-fr", "en-us, fr-fr")
    RulesStringValue(16,"ru-mo, de-at, zh-tw, fr", "ru-mo;q=1,de-at;q=0.9,zh-tw;q=0.8,fr;q=0.6")
    RulesStringValue(17,"&Custom...", "%CUSTOM%")
    public static var sAL: String = null;

And later in the file, I replaced this code:

if (m_Japanese) {
    oSession.oRequest["Accept-Language"] = "ja";
}

with this code:

// Accept-Language Overrides
if (null != sAL) {
    oSession.oRequest["Accept-Language"] = sAL; 
}

Now every time I open Fiddler, I can just select the language I want to use.

Fiddler-Accept-Language

Kinect for Windows SDK

I read the other day that we released a new version of the Kinect for Windows SDK that is supported by Windows 8. With as busy as I’ve been working on IE10, I’ve been a bit of a slacker when it comes to trying new things so I decided that it was time to dive in and take a quick peak at what I could do with Kinect.

In a matter of a few minutes, I managed to play around a bit with the depth image sensors and the color image sensors. I also mucked around a bit with the elevation and accelerometer data. I’m not going to get fancy with this post so hang onto your hat and follow along. If you’re the one random guy that stumbles on this post and actually reads it and has questions, feel free to ask. I mean, I won’t know how to answer it, but you can always ask!

Here goes.

Purchase

There isn’t much sense in doing anything if you haven’t purchased a Kinect for Windows device already. I am very specific in stating Kinect for Windows. While there are some folks out there that provide you with the ability to use your Kinect for Xbox 360, I wouldn’t recommend it. Go get yourself one of these devices and we’ll all wait patiently till you come back.

[tapping foot]

Download/Install/Setup

Download and Install the Kinect for Windows SDK. Make sure you get the latest one from October 8th, 2012.

Plug your device into your computer and make sure to plug the power into the device. Plug and play is your friend here as there is nothing to install to make the device available.

Start Coding

Setting up your Form

  1. Open up Visual Studio 2012
  2. Go to File | New Project
  3. In the dialog, select C# | Windows | Windows Forms Application (obviously you can do this in other languages, but I’m using C# here)
  4. Right-click the References tree node in Solution Explorer and select Add Reference
  5. Press Ctrl+E, type “Kinect“, check the “Microsoft.Kinect” assembly and click OK
  6. Add two PictureBox controls and a TrackBar control to Form1
  7. Set the TrackBar Maximum to 27 and the Minimum to -27. These are the range values for the camera elevation angle.
  8. Add a Timer control to the Form and set the interval to 1000ms (1 second)
  9. Double click Form1 to go to Code view

Coding

Add a couple of using statements at the top of the form:

using System.Drawing.Imaging;
using Microsoft.Kinect;
using System.Runtime.InteropServices;

Define a variable to reference the Kinect sensor inside the Form class. I also added some variables to hold my sensor data:

public partial class Form1 : Form
{
    KinectSensor sensor; 

    // Depth sensor readings
    int depthStreamHeight = 0;
    int depthStreamWidth = 0;
    int depthStreamFramePixelDataLength = 0;

    // Color sensor readings
    int colorStreamHeight = 0;
    int colorStreamWidth = 0;
    int colorStreamFrameBytesPerPixel = 0;
    int colorStreamFramePixelDataLength = 0;
    ...

Set the reference to your sensor. We’ll be lazy here and just reference the first in the array. Then make sure to enable the depth stream and color stream. Here’s the code inside my form load handler:

private void Form1_Load(object sender, EventArgs e)
{
    sensor = KinectSensor.KinectSensors[0];
    sensor.DepthStream.Enable();
    sensor.ColorStream.Enable();
    sensor.DepthFrameReady += sensor_DepthFrameReady;
    sensor.ColorFrameReady += sensor_ColorFrameReady;
    sensor.Start();
}

You’ll notice that I also hooked up two event handlers here. These handlers fire when a frame is ready for rendering or otherwise processing. In our case, we’re just going to muck around with the data and dump it into the picture boxes. After we’ve set up our handlers, we go ahead and call start() on the sensor.

So now we need to create our handlers. In our handlers, we are going to:

  1. Attempt to open the frame
  2. Read the stream data for height, width, pixel length and bytes per pixel
  3. Convert the raw data to a bitmap
  4. Assign that bitmap to the picture control

Here’s my code for the sensor_DepthFrameReadyhandler:

private void sensor_DepthFrameReady(object sender, 
    DepthImageFrameReadyEventArgs e)
{
    DepthImageFrame imageFrame = e.OpenDepthImageFrame();
    if (imageFrame != null)
    {
        depthStreamHeight = sensor.DepthStream.FrameHeight;
        depthStreamWidth = sensor.DepthStream.FrameWidth;
        depthStreamFramePixelDataLength = 
            sensor.DepthStream.FramePixelDataLength;
        pictureBox2.Image = GetDepthImage(imageFrame);
    }
}

The GetDepthImage function is doing the conversion work for us. This is the code that does the conversion from the raw image frame data to a bitmap (btw, if you know an easier way to do this, please chime in. I’m not a graphics dev).

Bitmap GetDepthImage(DepthImageFrame frame)
{
    // create a buffer and copy the frame to it
    short[] pixels = new short[sensor.DepthStream.FramePixelDataLength];
    frame.CopyPixelDataTo(pixels);

    // create a bitmap as big as the stream data. Note the pixel format.
    Bitmap bmp = new Bitmap(depthStreamWidth, depthStreamHeight, 
            PixelFormat.Format16bppRgb555
        );

    // Create a bitmap data, size appropriately, and lock the data
    BitmapData bmpdata = bmp.LockBits(
            new Rectangle(0, 0, depthStreamWidth, depthStreamHeight),
            ImageLockMode.WriteOnly,bmp.PixelFormat
        );
    // Wave your magic wand and unlock the bitmap
    IntPtr ptr = bmpdata.Scan0;
    Marshal.Copy(pixels, 0, ptr, depthStreamWidth * depthStreamHeight);
    bmp.UnlockBits(bmpdata);

    // return the bitmap
    return bmp;
}

It’s important to note the pixel format in this function because, when we create a similar function for the color frame, we will use a different format. You’ll want to make sure you use the right format depending on what data you are getting.

Here’s my code for the sensor_ColorFrameReady handler:

void sensor_ColorFrameReady(object sender, ColorImageFrameReadyEventArgs e)
{
    ColorImageFrame imageFrame = e.OpenColorImageFrame();
    if (imageFrame != null)
    {
        colorStreamHeight = sensor.ColorStream.FrameHeight;
        colorStreamWidth = sensor.ColorStream.FrameWidth;
        colorStreamFramePixelDataLength = 
            sensor.ColorStream.FramePixelDataLength;
        colorStreamFrameBytesPerPixel =
            sensor.ColorStream.FrameBytesPerPixel;
        pictureBox1.Image = GetColorImage(imageFrame);
    }
}

Here’s the code for the GetColorImage function:

Bitmap GetColorImage(ColorImageFrame frame)
{
    // Create a buffer and stuff the frame pixels into it
    byte[] pixels = new byte[colorStreamFramePixelDataLength];
    frame.CopyPixelDataTo(pixels);
    
    // Create your bitmap. Notice the PixelFormat change!
    Bitmap bmp = new Bitmap(
            sensor.ColorStream.FrameWidth, colorStreamHeight,
            PixelFormat.Format32bppRgb
        );

    // Create a BitmapData objet and lock
    BitmapData bmpdata = bmp.LockBits(
            new Rectangle(0, 0, colorStreamWidth, colorStreamHeight),
            ImageLockMode.WriteOnly, bmp.PixelFormat
        );

    // Wave your magic wand again and copy the data. Notice this time
    // we multiply by the bytes per pixel? This is important to get the right
    // data size copied.
    IntPtr ptr = bmpdata.Scan0;
    Marshal.Copy(pixels, 0, ptr, 
            colorStreamWidth * colorStreamHeight * 
            colorStreamFrameBytesPerPixel
    );
    bmp.UnlockBits(bmpdata);

    // Return the bitmap
    return bmp;
}

All done well, you should now be able to run your application and get something like the following screen shot:

Kinect For Windows Sample - ScreenShot

Kinect For Windows Sample – ScreenShot

Next, we want to add some control for the elevation of the Kinect. Of course, the Kinect does have limits so it can only move so far. In this post, we’ll just move the X component of control. We will use the TrackBar control that we added to the form at the beginning of this post.

First, a little caveat. We don’t want to move the elevation of the Kinect very often. In fact, the API documentation for Kinect tells us that it is very bad to move it often as you’ll wear out the controls. For that reason, we don’t want to move the Kinect on every event received from changing the TrackBar. That would cause problems. Instead, we will update a variable when the TrackBar is changed, and use a timer that fires every second (added earlier in the project) to do the actual validation of the data and updating of the elevation.

So, add the following declarations to your form:
"]public partial class Form1 : Form
{
KinectSensor sensor;
int lastElevation = 0;
int elevation = 0;

At the very bottom of your Form_Load event tell the timer to start:

timer1.Start();

Now, create an event handler for your trackBar’s ValueChanged event as follows:

private void trackBar1_ValueChanged(object sender, EventArgs e) {
    var value = trackBar1.Value;
    var reading = sensor.AccelerometerGetCurrentReading().X;
    if (value > (sensor.MaxElevationAngle + reading)) {
        value = sensor.MaxElevationAngle;
    }
    else if (value < (sensor.MinElevationAngle + reading)) {
        value = sensor.MinElevationAngle;
    }
    elevation = value;
}

What we are doing here is first reading what the current reading is on the Accelerometer’s X component. We do this because that can have an affect on how far the sensor can move. Next, we will do some validation to make sure that the elevation angle added to the reading isn’t greater or less than the maximum or minimum values allowed (currently 27 and -27 respectively). When we change the trackBar, it updates our elevation variable. Now we need to do something with that variable.

Create a Tick event handler for the timer control you added. Add the following code:

private void timer1_Tick(object sender, EventArgs e)
{
    if (lastElevation != elevation)
    {
        sensor.ElevationAngle = elevation;
        lastElevation = elevation;
    }
}

Again, we are just doing validation to see if the last elevation is different from the current elevation. If it isn’t, then we go ahead and move the sensor and update the current position.

All this should get you to a state where you can change the sensor elevation.

There’s a lot more fun to be had, but it took me longer to write this post than it did to write the code. I suspect you can take it from here faster than you could read my post. Happy coding!

Cross-browser event hookup made easy

I seem to be on a roll. I’m coding and might as well be sharing some of what I’m working on while I do it. In that sense, here goes another small bit of code that I’ll be adding to jsSimple on github.

We all know how to hook up events cross-browser. We know that we have both attachEvent and addEventListener. Both have varying syntax and we’ve all written this code a million times. Let’s just make this simple. Here’s how to call this:

Event.add(element, 'click', callback, false);
// .. 
Event.remove(element, 'click', callback, false);

The remove looks like you’re passing around the same data, so I added a return value to “add” that allows you to capture the event and pass it in as a single object to the remove function as follows:

var evt = Event.add(element, 'click', callback, false);
// .. 
Event.remove(evt);

So, without further delay, here is the object definition:

/*!
 * jsSimple v0.0.1
 * www.jssimple.com
 *
 * Copyright (c) Tobin Titus
 * Available under the BSD and MIT licenses: www.jssimple.com/license/
 */
var EventObj = function (target, type, listener, capture) {
  return {
    'target' : target,
    'type' : type,
    'listener' : listener,
    'capture' : capture
  };
};

var Event = (function() {
  'use strict';
  function add (target, type, listener, capture) {
    capture = capture || false;
    if (target.addEventListener) {
      target.addEventListener(type, listener, capture);
    } else if (target.attachEvent) {
      target.attachEvent("on" + type, listener);
    }
    return new EventObj(target, type, listener, capture);
  }
  
  function remove(object, type, listener, capture) {
    var target;
    if (object && !type && !listener && !capture) {
      type = object.type;
      listener = object.listener;
      capture = object.capture;
      target = object.target;
    } else {
      capture = capture || false;
      target = object;
    }
    
    if (target.removeEventListener) {
      target.removeEventListener(type, listener, capture);
    } else if (target.detachEvent) {
      target.detachEvent("on" + type, listener);
    }
  }
  
  return {
    'add' : add,
    'remove' : remove
  };
}());

You can see this all in action on jsFiddle.

JavaScript animation timing made easy (requestAnimationFrame, cancelRequestAnimationFrame)

I often find myself writing a lot of the same code from project to project. One of those pieces of code is around using requestAnimationFrame and cancelRequestAnimationFrame. I wrote a quick and dirty animation object that allows me to register all of my rendering functions, start the animation and cancel it. Here’s an example of how to use this object:

function render () {
   // Do your rendering work here
}
Animation.add(render);
Animation.start();

It can also be used to add several animations before and even after Animation has started, you can add new rendering routines on the fly. This is useful in a number of instances where objects have their own render routines and you want to add rendering routines at different times.

I put in a few workarounds. The typical hack to allow setTimeout/cancelTimeout fallbacks are in there. There is also a work around to deal with the missing mozCancelRequestAnimationFrame and the fact that mozRequestAnimationFrame doesn’t return an integer per spec.

So here’s the code for the Animation object:

/*!
 * jsSimple v0.0.1
 * www.jssimple.com
 *
 * Copyright (c) Tobin Titus
 * Available under the BSD and MIT licenses: www.jssimple.com/license/
 */
var Animation = (function() {
  "use strict";
  var interval, moz, renderers = [];

// PRIVATE
  function __mozFix (val) {
    /* Mozilla fails to return interger per specification */
    if (!val) { 
      moz = true;
      val = Math.ceil(Math.random() * 10000);
    } 
    return val;
  }

  function __renderAll() {
    var r, length;

    // execute all renderers
    length = renderers.length;
    for (r = 0; r < length; ++r) {
       renderers[r]();
     }
     if (interval) {
       interval = __mozFix(window.requestAnimationFrame(__renderAll));
     }
   }
   function __registerAnimationEventHandlers() {
     var pre, prefixes = ['webkit', 'moz', 'o', 'ms'];
     // check vendor prefixes
     for (pre = prefixes.length - 1; 
          pre >= 0 && !window.requestAnimationFrame; --pre) {
      window.requestAnimationFrame = window[prefixes[pre] 
            + 'RequestAnimationFrame'];
      window.cancelAnimationFrame = window[prefixes[pre] 
            + 'CancelAnimationFrame'] 
            || window[prefixes[pre] + 'CancelRequestAnimationFrame'];
    }

    // downlevel support via setTimeout / clearTimeout
    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = function(callback) {
        // could likely be an adaptive set timeout
        return window.setTimeout(callback, 16.7);
      };
    }

    if (!window.cancelAnimationFrame) {
      window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
      };
    }
  }
  __registerAnimationEventHandlers(); 

// PUBLIC
  function add(renderer) {
    if (renderer) {
      renderers.push(renderer);
    }
  }

  function isRunning() {
    return !!interval;
  }

  function start() {
    interval = __mozFix(window.requestAnimationFrame(__renderAll));
  }

  function stop() {
    if (!moz) {
      window.cancelAnimationFrame(interval);
    }
    interval = null;
  }

// OBJECT DEFINITION
  return {
    "add": add,
    "isRunning": isRunning,
    "start": start,
    "stop": stop
  };
}());

I’ve put this code on jsFiddle to test out.

I’ve also put this on github as jsSimple. I’ll likely add a few other bits of code to this as I move along.

CSS: Opacity vs Alpha (via rgba and hsla)

Once again, I was working on my new blog theme again and ran into the need to set the opacity of a background div without affecting the children. The support for opacity is spotty and slightly unpredictable. The other downside is that setting opacity via CSS affects the children of the transparent object. You can get around this by using an rgba background colors and specifying the alpha channel.

background-color: rgba(24, 117, 187, .5)

This specifies a background color of red: 24, blue: 117, green: 187 and an alpha of 50% transparency. I put up an example of this on jsFiddle here: http://jsfiddle.net/tobint/gazuB/

Here’s a side-by-side example of the differences between opacity and rgba.

Figure demonstrates opacity vs alpha

The div on the left has set an opacity of .5 on the div container. On the div on the right, I’ve set the background color with an alpha of .5 using rgba. Notice that the sample on the left has affected the transparency of the child div, but the sample on the right has not.

You can also set colors using hsla (hue, saturation, and lightness).

background-color: hsla(206, 77%, 41%, .5)

Of course, this only works in browsers released in the last few years:

  • Safari 3.1 in March 2008
  • Firefox 3 in June 2008
  • Chrome 4.0 in January 2010
  • Internet Explorer 9 in June 2011

Detecting CSS3 Transition Support

I’m in the process of developing a new blog theme for myself. I was trying to use CSS3 transitions but I wanted to fall back to JavaScript if transitions weren’t supported. I really want to avoid Modernizr if I can so I needed a quick and dirty test for detecting them. Here’s what I came up with:

var Detect = (function () { 
  function cssTransitions () { 
    var div = document.createElement("div"); 
    var p, ext, pre = ["ms", "O", "Webkit", "Moz"]; 
    for (p in pre) {
      if (div.style[ pre[p] + "Transition" ] !== undefined) {
        ext = pre[p]; 
        break; 
      } 
    } 
    delete div; 
    return ext; 
  }; 
  return { 
    "cssTransitions" : cssTransitions 
  }; 
}());

It’s simple and does the trick. Simply check the return of Detect.cssTransitions().

if (!Detect.cssTransitions()) {
   // Do JavaScript fallback here
}

You can also get the extension used in the current user-agent back from this method (ms, O, Moz, or Webkit).

Powershell: Selecting files that don’t contain specified content

I had a quick task today that required that I search a couple hundred directories and look in specific files to see if they contained a certain piece of code. All I wanted was the list of files that did not. PowerShell to the rescue!

I’ll break down each of the calls I used and provide the full command-line at the end for anyone interested.

First, we need to recurse through all the files in a specific directory. This is simple enough using Get-ChildItem.

Get-ChildItem -include [paths,and,filenames,go,here] -recurse

Next, I needed to loop through each of those files using ForEach-Object :

ForEach-Object { … }

Next, I need to get the content of each of those files. That’s done using Get-Content:

Get-Content [file]

I then need to be able to determine if the contents of the file contains the string I’m looking for. This is easy enough with Select-String:

Select-String -pattern [pattern]

That’s pretty much all the commands you need to know — we just need to put them together now.

PS> Get-ChildItem -include *.html,*.xhtml -recurse |
    ForEach-Object { if( !( select-string -pattern "pattern" -path $_.FullName) ) 
                     { $_.FullName}}