Floorplanner Tech Blog

I created my first Twitter account about half a year ago. I updated it every 5 minutes and in between I kept hitting the refresh button to see if there was any news from me friends. I liked the concept of Twitter but it just took too much of my time, so I decided to stop and delete my account.

After reading We Travel in Tribes I got interested again. As a social network I like Twitter because it keeps me up to date on what my friends are doing. But it’s more, like Rands points out:

I want to know more people, and sure, it’s interesting to see what they’re up to, but what I really want to know is what is going on inside their heads with a minimum of fuss. I want to see how they see the world. This is why I follow people on Twitter.

With this in mind I created a new Twitter account and added some friends to my list. I hope I can control my twitter time better then last time This is me: http://www.twitter.com/hertog

It took us some time, but now we see the virtues of JSON. We’re moving from XML to JSON to communicate with the outside world. The Floorplanner 2D app is (still) AS2 and I’m very happy to see that 5etdemi created a nice JSON parser in AS2.

Saves me a lot of work, thanks!

Since recently we create a thumbnail image of every Floorplanner plan that is saved. To create a 240×180px image we use the BitmapData class (AS2) to get the pixel info and we send it to our server to create the PNG/JPG.

It can happen that the content (images, swf’s) has to be loaded from a different server then the server that holds the HTML page with the Flash app. We noticed that the Flash Security Sandbox doesn’t like that (surprise!) by not allowing us to use the BitmapData.draw(..) method.

Abdul found a solution for AS3 and we ported it to AS2. We only needed a way to load the crossdomain.xml file from the domain of the HTML page. This sniplet uses Javascript to determine the domain and loads the policy file (crossdomain.xml) from it.

1
2
3
4
5

var url:String =  String( ExternalInterface.call(
    "function(){ return document.location.href.toString();}"
));
var split:Array = lCurrentUrl.split( "/" );
System.security.loadPolicyFile( "http://"+ split[2] +"/crossdomain.xml" );

I’m currently working on a JSON export from the Floorplanner and I’m glad I found the excelent JSON Validator made by arc90 lab. They made the debugging process a lot easier. Thanks guys!

I wanted to get some data from a web service using Javascript. I looked at several Javascript classes (like this), but because the web service was running on another server it got a little troublesome. As a solution I tried to call the web service through a proxy, but that didn’t make it any easier.

Jaap suggested to take a look at NuSOAP, a -kinda old- SOAP toolkit for PHP. With an AJAX request I could call a PHP page that uses NuSOAP to consume the web service. It was actually easier then I thought it would be.

To make the AJAX call from Javascript I used Prototype and this script:

  function doRequest() {
    var url = "ajax/consume_webservice.php";
    var param1 = "value1";
    var param2 = "value2";
    var params = "param1="+ param1 +"&param2="+ param2;
 
    new Ajax.Request ( url, { method: 'POST', parameters: params,
      onComplete: onResult } );
  }
 
  function onResult( result ) {
    alert( result.responseText );
  }

The PHP file consume.php looks something like this:

< ?php
 
  $param1 = isset( $POST_['param1'] ) ? $POST_['param1'] : false;
  $param2 = isset( $POST_['param2'] ) ? $POST_['param2'] : false;
 
  // this is the only file I used from the NuSOAP project
  require_once( "nusoap.php" );
 
  $url = webserviceurl;
  $params = array( "param1" => $param1, "param2" => $param2 );
 
  $soap = new nusoap_client( $url, true, false, false, false, false, 0, 60 );
  $proxy = $soap->getProxy();
  $proxy->functionname( $params );
 
  echo $proxy->response;
 
?>

That’s all. Do a AJAX request from Javascript to a PHP page. Then the PHP page uses NuSOAP to consume the web service and returns the result. Back in Javascript you can do whatever you want with the given data.

I had to make a call from Javascript to a SOAP web service (more on that later). The data I had to send to the web service was in a XML format that contained non ASCII characters (for example: é). I tried to use the standard escape() function, but that one couldn’t handle the special characters.

Thanks to ecmanaut I found a very simple solution: encodeURIComponent() (with decodeURIComponent() as its counterpart).

Recently I’ve been working with Javascript in combination with XML and I found these methods quite usefull to switch between a string and a xml object.

function stringToXML( pString ){
	var lXML;
	// IE
	if( window.ActiveXObject ){
		lXML = new ActiveXObject( 'Microsoft.XMLDOM' );
		lXML.async = 'false';
		lXML.loadXML( pString );
	// no IE
	} else {
		var lParser = new DOMParser();
		lXML = lParser.parseFromString( pString, 'text/xml' );
	}
	return lXML;
}

function xmlToString( pXML ){
	// IE
	if( window.ActiveXObject ){
		return pXML.xml;
	// no IE
	} else {
		return ( new XMLSerializer() ).serializeToString( pXML );
	}
}

Last week we wanted to see if we could speed up the loading of the Floorplanner Flash app. The Flash app (AS2) consists of 1 main app that loads several swf forms (the windows you see, like the library). The library itself holds a lot of furniture elements, which are separate swf files that are loaded one by one.

When a user creates a floor plan and adds furniture to it, it’s not strange that the design holds more than 50 furniture elements. Though all elements are small swf files, it takes a lot of time to handle all resource requests on our server. We thought it would be nice if we didn’t have to load all the elements one by one, but that we could bundle them into one big swf file. Then the generated bundle-swf is loaded into the flash app and the furniture elements are loaded from the bundle-swf.

We looked at Swfmill and Ming, and we did manage to create a setup that could dynamically bundle the furniture elements into one big swf. The problem was that it didn’t work for all our furniture elements. Almost 10% failed.

In the Flash app we also experienced some unexpected issues. You can only add mc’s (furniture elements) from the library to the stage by using attachMovie(). That means that all elements must have the same parent mc (AS2). So you can only use one bundle-swf, because if you load another, your attached mc’s will be removed.

With all the issues we encountered we decided to keep things as they are right now, and tackle this issue when we’re upgrading to AS3.

In my previous post I thought that swfobject was causing the wmode=transparent problem in IE. However, I was wrong. Folkert told me that swfobject only passes the parameter to the Flash Player, swfobject is only the messenger.

Instead of wmode=transparent I also tried wmode=opaque as Jorrit suggested, but it didn’t make a difference. I set up three wmode sample pages to test the issue:

• regular
• transparent
• opaque

When you’re viewing the transparent and the opaque page in Internet Explorer you can see that editing the walls is quite difficult. You can also see that panning the design results in a strange elastic movement. I hope to find a solution soon….

Update
I’ve been reading this post and it looks like it’s something we have to live with…

SWFs using wmode actually perform slightly different from SWFs that have a default wmode. The difference is that when you are running as transparent or opaque, events are delayed until an onEnterFrame. If you are running at a slow frame rate and drive your movie with setInterval or use any number of other events, you are back to your slow frame rate. The real kicker is that SWFs in IE have this bug. SWFs in Firefox are just fine.

Last week we accidentally introduced a nasty bug into the Floorplanner Flash app. Well, actually it wasn’t the Flash app that caused the problem. It appeared to be a weird issue in swfobject.

We wanted to layer some html content over the Flash app, so we added this line to the JavaScript:

swfObject.addParam( "wmode", "transparent" );

By doing that, the Flash app started acting really strange in Internet Explorer (6&7). I removed the line today and all seems fine again…