Floorplanner Tech Blog

Last week I created two simple tests to get some insights on the performance of Canvas and SVG on iDevices. The test is a blue square bouncing from left to right and back again, it’s repositioned every frame. The faster a browser can render a frame, the better the performance is on the device. Well.. at least in this particular case. In the Canvas test, the scene is cleared (by using clearRect) and the square is drawn (using fillRect) at the new position. The SVG test draws the square once and only updates its x-coordinate.  Thanks to Tim Knip I found another way to move the square in Canvas using CSS3 3D Transforms. Since these transforms are hardware accelerated on iDevices, it’s interesting to see how Canvas using 3D transforms performs.

I’m doing a bit of HTML5 performance testing, specifically on the iPhone and iPad. When doing interactive stuff, it seems that most of the resources are used for updating the scene (clearing and drawing), and not so much by doing calculations in JavaScript. I created two very simple tests to see if the performance is different using Canvas or SVG. It’s a fabulous blue cube bouncing up and down as fast as possible. The number of updates (frames) per second tells something about the performance. The higher the number the better the performance. This is definitely no scientific method of performance testing. It’s just an indication, but it’s something. Here are my two tests, Canvas and SVG. The Canvas test clears and draws the square on its new position every interval (frame) by using clearRect and fillRect. The SVG test works a little different. The square is drawn once and its x-coordinate is updated every interval. These are my findings so far:

Whenever I have a couple of minutes of spare time, I’m trying to learn more about algorithms . The first two algorithms were selection sort and insertion sort. Next up is merge sort. Merge sort is a bit different than selection and insertion sort. Selection and insertion sort are based on a loop inside a loop. That way you compare each value of a collection (one by one) to all the other values in the collection and sort them. Both in slightly different way. As you can imagine, sorting with a loop inside a loop isn’t very fast, Θ(n^2) to be precise. Merge sort attacks the problem in a different way. You could say that it’s based on the divide and conquer principal. It divides the problem in a bunch of tiny sub-problems, solves those problems and then combines them to get a result. The divide step isn’t that difficult. It takes a collection and splits it in two (equally sized) halves. This step is repeated until the smallest collection size is reached, 1. It uses a recursive function to accomplish this, a function that calls itself.

var collection = [5, 2, 4, 7, 1, 3, 2, 6];

divide(collection, 0, collection.length-1);

// a: collection, p: start index, r: end index
function divide(a, p, r) {
	if(p < r) {
		var q = Math.floor((p + r)/2); // calc middle of collection
		divide(a, p, q);
    		divide(a, q + 1, r);
		merge(a, p, q, r);
	}
}

The conquer step is a bit tricker. It’s based on a function that is able to merge two sorted collections into a new sorted collection.

function merge(a, p, q, r) {
	var n1 = q - p + 1;
	var left = [];
	for(var i = 0; i < n1; i++) {
		left.push(a[p + i]);
	}
        left.push(Infinity);

	var n2 = r - q;
	var right = [];
	for(var j = 0; j < n2; j++) {
		right.push(a[q + j + 1]);
	}
	right.push(Infinity);

	var i = 0;
	var j = 0;
	for(var k = p; k < r+1; k++) {
		if(left[i] 

So, the collection is first divided into sub-collections with the size of one. Those sub-collections are then merged together. That's done, step by step, by merging and sorting the small collections into a bigger collection. Combine collections with a size of one into sorted collections of a size of two, then combine them into sorted collections of 4 etc. until all sub-collections are merged.

Instead of having a loop inside a loop, you have a recursive divide function and a combining loop function. This results in a faster sorting than insertion or selection sort: Θ(nlgn).

The problem

Option 1. Use embedded Flash

• quick drop-in solution;

• requirement for clients to have Flash installed in their browsers;
• thumbnail displaying logic depends on what we are displaying (2D, 3D, photo) = additional complexity;
• requires additional markup for embedding Flash;
• is slow to load and display;
• (the most important) embedded Flash object is not regular HTML-element and it puts some constraints on UI design (e.g. other HTML elements cannot be placed on top of rendered image).

Option 2. Manual rendering

• thumbnails are PNG files, so they can be dealt with as any other regular images on client side;

• requires dedicated machine with the AIR app;
• when a user uploads an SWF file, it is not rendered at once, so we have to show him something else for visual feedback as we don’t have rendered image yet.

Option 3. Server-side rendering

Solution

Step 1. Get Gnash

Step 2. Render 2D images using SWF file as a player (supplying Flash parameters)

Step 3. Deal with security settings

Step 4. Get raw video file from player

• —once – doesn’t work in our case (throws an error);
• —timeout <sec> - should be set to some time (in seconds) after which player stops; it means, rendering will take at least 1 second (and generate 1 second of video) and we have to be sure that this time is enough to render any picture we have (or else it has to be 2, 3 seconds for all images) – not exactly what we would like;
• —max-advances N – stops after N frame advances; was tested with N=1 and worked well – we are going to use this parameter.

Step 5. Extracting an image from raw video file

Step 6. Converting raw image to PNG

Step 7. Final script

1. location of preview.swf;
2. location of swf file to render;
3. where to put the output

Issues

In my quest to learn more about algorithms, I came across another sorting algorithm. This one is called Selection sort. The collection is sorted from beginning to end. While looping over the elements, it first finds the smallest element between the current position and the end of the collection. Then the smallest element and the current element exchange places. This way all elements are sorted when the loop has finished. In JavaScript it looks like this:

var collection = [5, 2, 4, 6, 1, 3];

var n = collection.length;
for(var j = 0; j  

I started reading Introduction to Algorithms to educate myself on the subject.

There are books on algorithms that are rigorous but incomplete and others that cover masses of material but lack rigor. Introduction to Algorithms combines rigor and comprehensiveness.

var collection = [5, 2, 4, 6, 1, 3];

for(var j = 1; j = 0 && collection[i] > key) {
		collection[i+1] = collection[i];
		i = i - 1;
	}

	collection[i+1] = key;
}
 

It’s difficult to find any decent samples about interactive SVG on the iPad and iPhone. SVG is used more and more these days, but it’s still rather unknown. The combination with touch and gestures on an iDevice is even rarer. Since I’ve been playing around with it a bit, I’d like to share what I’ve learned. This post describes the steps involved to create a blue rectangle that can be dragged, rotated and scaled.

SVG

Touch

Gestures

    ongesturestart="gestureStart(event);"
    ongesturechange="gestureChange(event);"
    ongestureend="gestureEnd(event);"

function gestureStart(event) {
	event.preventDefault();
	var node = event.target;

	x = parseInt(node.getAttributeNS(null, 'x'));
	y = parseInt(node.getAttributeNS(null, 'y'));

	width = parseInt(node.getAttributeNS(null, 'width'));
	height = parseInt(node.getAttributeNS(null, 'height'));

	var transform = (node.getAttributeNS(null, 'transform'));
	rotation = parseInt(transform.split('rotate(')[1].split(' ')[0]);

	if(isNaN(rotation)) {
		rotation = 0;
	}
}

function gestureChange(event) {
	event.preventDefault();
	var node = event.target;

	// scale
	var newWidth = width * event.scale;
	var newHeight = height * event.scale;

	var newX = x - (newWidth - width)/2;
	var newY = y - (newHeight - height)/2;

	node.setAttributeNS(null, 'width', newWidth);
	node.setAttributeNS(null, 'height', newHeight);
	node.setAttributeNS(null, 'x', newX);
	node.setAttributeNS(null, 'y', newY);

	// rotation
	var newRotation = rotation + event.rotation;
	var centerX = newX + newWidth/2;
	var centerY = newY + newHeight/2;
	setRotation(node, newRotation, centerX, centerY);
}

function gestureEnd(event) {
	rotation = rotation + event.rotation;
}

function setRotation(node, rotation, x, y) {
	var centerX = x + width/2;
	var centerY = y + height/2;

	node.setAttributeNS(null, 'transform', 'rotate('+ rotation +' '+ x +' '+ y +')');
}

Sample

• OAuth Gem
• GData Gem
• Ruby-openid
• Rack-openid
• Ruby-openid-apps-discovery

1. Initial Setup

Get a Google Apps account, it doesn’t need to be a premier one. Create a marketplace enterprise account and setup a new application. Be sure to check “My product may be directly installed into Google Apps domains”. Fill in the manifest with the appropriate API’s permissions. An example manifest can be found below.

<?xml version="1.0" encoding="UTF-8" ?>
<ApplicationManifest xmlns="http://schemas.google.com/ApplicationManifest/2009">

 <Name>[ApplicationName]</Name>
 <Description>[Description]</Description>

 <!-- Administrators and users will be sent to this URL for application support -->
  <Support>
    <!-- URL for application setup as an optional redirect during the install -->
    <Link rel="setup" href="[ApplicationSetupUrl]?domain=${DOMAIN_NAME}" />

    <!-- URL for application configuration, accessed from the app settings page in the control panel -->
    <Link rel="manage" href="[ApplicationAdminUrl]?domain=${DOMAIN_NAME}" />

    <!-- URL explaining how customers get support. -->
    <Link rel="support" href="[ApplicationHelpUrl]" />

    <!-- URL that is displayed to admins during the deletion process, to specify policies such as data retention, how to claim accounts, etc. -->
    <Link rel="deletion-policy" href="[ApplicationPolicyUrl]" />
  </Support>

 <!-- Show this link in Google's universal navigation for all users -->
 <Extension id="navLink" type="link">
   <Name>[ApplicationName]</Name>
   <Url>[ApplicationLoginUrl]?domain=${DOMAIN_NAME}</Url>
   <!-- Used API's -->
   <Scope ref="contactFeed"/>
   <Scope ref="spreadsheetFeed"/>
   <Scope ref="doclistFeed"/>
 </Extension>

 <!-- Declare our OpenID realm so our app is white listed -->
 <Extension id="realm" type="openIdRealm">
   <Url>[ApplicationRealm]</Url>
 </Extension>

 <Scope id="doclistFeed">
   <Url>https://docs.google.com/feeds/</Url>
   <Reason>[Reason]</Reason>
 </Scope>

 <Scope id="contactFeed">
   <Url>https://www.google.com/m8/feeds/</Url>
   <Reason>[Reason]</Reason>
 </Scope>

</ApplicationManifest>

2. The setup page

After setting up your application and the manifest file we are going to add the application to your domain. Log into the Marketplace where you updated your manifest and click the blue “Add it now” button when you click on your application. Now the setup process begins and you have to follow the steps. On step 3 or 4 you will be redirected to your own domain to setup a Google Apps domain with your application. Below you can find a way to authenticate with Google’s OpenID server. This way you can get the e-mail and user information of the administrator of the Google Apps domain. After setting up the domain you can redirect back to Google and continue the setup process.

def login

  # The domain needs to be set. For example with params[:domain]
  authenticate_with_open_id("https://www.google.com/accounts/o8/site-xrds?hd=" + domain),
    { :required   => ["http://axschema.org/contact/email", :email], :return_to  => '/login/google'}) do |result, identity_url, registration|

      if result.successful?
        # Succesfully logged in
	email = get_email(registration)
      else
	# Failed to login
      end
  end

end

def get_email(registration)

  if !registration['email'].blank?
    registration['email']
  else
    ax_response = OpenID::AX::FetchResponse.from_success_response(
    request.env[Rack::OpenID::RESPONSE])
    ax_response.data["http://axschema.org/contact/email"].first
  end

end

3. Using the GDAta API’s - Retrieving contacts

After you installed the application, we can login by using the same method as described in step 2. After your logged we can try to use the GData API’s. For the GData API’s we need to use the OAuth authentication method instead of OpenID. All we need for this is the Marketplace Consumer Key, Consumer Secret and the email of the user we are trying retrieve information from. You can get these by visiting your application after you logged in with the Google Enterprise Marketplace. It’s on the listing page if you click on “View OAuth Consumer Key”. Below you can find how we get a contactlist from a user;

def get_contacts

  email = 'user@email.com'
   url = 'https://www.google.com/m8/feeds/contacts/default/full?xoauth_requestor_id=#{email}'

   client = GData::Client::Contacts.new({:version => '3.0'})
   client.headers["Authorization"] = get_authorization_header(url, :get)

   response = client.get(url)
   response.body

end

def get_authorization_header(url, meth)

   consumer_key = 'Your-consumer-key'
   consumer_secret =  'Your-consumer-secret'

   consumer = OAuth::Consumer.new(consumer_key, consumer_secret, {
      :site => "https://google.com",
      :request_token_path => "/accounts/OAuthGetRequestToken",
      :access_token_path => "/accounts/OAuthGetAccessToken",
      :authorize_path => "/accounts/OAuthAuthorizeToken",
      :http_method => meth
    })

    access_token = OAuth::AccessToken.new consumer

    case meth
    when :post
       request = Net::HTTP::Post.new(url)
    else
       request = Net::HTTP::Get.new(url)
    end

    helper = OAuth::Client::Helper.new request, { :request_uri => url,
       :consumer         => consumer,
       :token            => access_token,
       :scheme           => 'header',
       :signature_method => "HMAC-SHA1",
       :method => meth
    }

    helper.header

end

Retrieving the contact list seems pretty straight forward. Our main issue was we had to change the http method when we use POST or GET. Be sure to set all the http methods correctly on the OAuth::Consumer, Net:HTTP, OAuth::Client and especially the GData::Client. Before you start creating your own code it would be wise to test your response by using Google’s OAuth Playground, which is a wonderful tool to use.

4. Using the GDAta API’s - Submitting an CSV/Excel to Google Docs

Submitting a CSV file to Google is almost as easy as retrievingyour contact list. We are going to use the same method for retrieving the authorization header. To post a file to Google Docs we also need to add two more header attributes, named “Content-Type” and “Slug”. In the body we’ll post the CSV file. The Content-Type is to specify what kind of file we’re going to upload. The Slug attribute will be the name of the file we want to show up in Google Docs.

def submit_csv_to_gdocs

   email = 'user@email.com'
   url = 'https://docs.google.com/feeds/default/private/full?xoauth_requestor_id=#{email}'

   csv = StringIO.new
   CSV::Writer.generate(csv, ',') do |line|
      line << ["Name", "Value"]
   end
   csv.rewind

   client.headers["Authorization"] = get_authorization_header(url, :post)
   client.headers["Content-Type"] = "text/csv"
   client.headers["Slug"] = "Your-Document-Name.csv"

   feed = client.post(url, csv.read)

end

That is all. You can find more information on this in the Google Apps API Docs. If you have any question you can post them below. If I made any mistakes (which I probably have) please post them below. Have fun working with Google Apps!

We’ve been in this internet startup game for a couple of years now. Every now and then we find ourselves in a situation that feels awfully familiar. Especially when we just broke something in the same way we’ve broken it before. Yes indeed… learning it the hard way. I thought it would be nice to write down a thing or two we have learned while running the Floorplanner business. The subjects of these stories are completely random and, as you might expect, tech orientated.

What?

Why?

How?

Lesson learned

1. Copy the data from the old source to the new source
2. Update the application so that it can work with both sources. If the new source isn’t available, it uses the old one.
3. Sync the new data that was stored while copying the data and patching the app
4. Update the application so that it only uses the new data source
5. Sync again (just to be sure)
6. Clean / remove the old source

Blender 2.5 is a great application to create 3D stuff. Best of all: its free! Even better: Blender 2.5 alpha 2 seems to have a much enhanced Collada importer/exporter. Blender versions before 2.5 used a python script for import and export. That script was okay, but failed on more complex scenes using rigs / animations. I believe Blender now uses Collada DOM or OpenCOLLADA. But after trying the Collada export I found a bug in Blender 2.5 alpha 2 r27226 which I filed in Blender’s bugtracker here (you need an account there). Seems export of “translation” goes sour. @collada asked me to describe the bug in public, so here is the bugreport I filed:

Blender 2.5 alpha 2 - 2.52.0 - r27226 Mac OSX 10.5.8 The .blend is a simple cube animation with 2 keys, translation and rotation only. A typical exported translation channel looks like this (see attached collada): <channel source="#Cube_location_Y-sampler" target="Cube/location"/> According to the Collada 1.4.1 spec the @target atrribute here says:the locY-sampler targets *all* values of the element with @sid="location". In this case however we need to target only *one* value. See "Address syntax" in Chapter 3 of the Collada 1.4.1 spec. The targeted scene graph node looks like this (see attached collada) <node id="Cube" type="NODE"> <translate sid="location">6.423927 -0.08766067028 1.473982</translate> [...] A channel targets a "sid" => see the @sid attribute on the node's translation element. the @target property of the channel should be like: Cube/location.X Cube/location.Y Cube/location.Z or Cube/location(0) Cube/location(1) Cube/location(2) When only specifying Cube.location importers can't determine which value to target of the translation element (x, y or z).