Floorplanner Tech Blog

Ted Patrick (Senior Manager Developer Communities at Adobe Systems) has posted an interesting article about the first milestone of the Eclipse E4 project.

It seems that the SWT project has added compilation support for SWF from JAVA. Write your app in JAVA and publish as SWF to Flash Player. The cool part is that you get full JAVA development in Eclipse with all debugging and tooling but you get a SWF file on publish. 

We’re using Flex Builder for our Flex/AS3 stuff, but this could become a very interesting option since the JAVA development in Eclipse is a lot more sophisticated than Flex Builder at the moment.

Gert-Jan is on the left side and Jaap on the right.

Nico is on the left side and Willem on the right.

There is a lot of hype these day about being in “the cloud”. However, “the cloud” seems to mean a lot of different things. Tim O’Reilly sees three types of cloud computing.  His first type, utility computing, is the type I’m talking about here. 

Utility computing. Amazon’s success in providing virtual machine instances, storage, and computation at pay-as-you-go utility pricing was the breakthrough in this category, and now everyone wants to play. Developers, not end-users, are the target of this kind of cloud computing.

Launched in July 2002, Amazon Web Services provide online services for other web sites or client-side applications. Each individual product is interesting by itself, but all the services together made it just the solution we were looking for. In this and coming posts I will talk about our experiences with Amazon’s version of “the cloud”. The first service we started to use was Elastic Cloud Computing (EC2).

Each day more than 2000 users from all over the world register at Floorplanner.com. At this moment we have over 800.000 registered users in our database. A lot of these users visit the site on a regular basis, which generates a lot of traffic. To meet this demand, we had a couple of dedicated servers running. When the demand rised above a certain level, we’d add a new one to spread the load. As logical as it might sound, it is far from ideal.

It takes a lot of time to install, configure and maintain a server. Precious time you can’t spend on the development of your product. It doesn’t scale fast. For example: when you are featured on a big site that generates a lot of additional traffic, your servers will probably have a very hard time (or crash) and there is nothing you can do about it. Buying additional servers takes too much time. Another thing about buying servers is that it’s an investment you have to finance up front. You have to pay the full price for it, but in the beginning you’ll only use a small part of it’s capacities. Once you’ve spend the money on a server, you can’t spend it on anything else. And maybe the biggest issue we had with dedicated servers was that it is hardware, and hardware gets old very fast. After a while you’re stuck with an outdated server, that you (a) won’t replace because “it’s still doing something” or (b) costs time (= money) to migrate to another server. This means a higher risk for failure, or just more work.   

Now with the EC2 service life has gotten better. Sure, we still had to install everything on the virtual instance, but only the first time. Once you’ve done this, you can add additional instances with a click of a button (based on an image of the first instance). When traffic spikes you can add instances within minutes instead of days. The pay-as-you-go model keeps us from financing every server up front. And because it’s a virtual server, we don’t have to think about the hardware anymore. Just deploy it and get on with the fun stuff!

On February 22-24th the Flash In The Can event is back in town! Design, Technology. Cool shit. I will be just a visitor, but Tim is going to help Ralph with his workshop Papervision3D from the Core. If you want to meet up, give us a ping.

At this moment, all the language translations of the Floorplanner 2D app are stored in a database table. Today we discovered that a couple of these translations didn’t align properly in the interface. After some investigation we discovered that they all contained a hidden tab character at the end of  each string. This was probably caused by importing a malformed CSV file.

I thought a simple REPLACE query would fix this problem, but (as usual) it was a little more complicated than that. First I had to find the fields with the tab character… Willem pointed me to the right direction with his favorite weapon of choice REGEXP. According to the MySQL docs I could find tab characters with something like this:

SELECT * FROM table WHERE field REGEXP '[[.LF.]]'

The next step was to remove the tab characters. My first thought was to do this by replacing them with an empty string. It turns out you can’t combine a REPLACE with a REGEXP in a query. So I used good ol’ PHP for the job. A nice advantage was that I didn’t have to do any replacing, I could just use the trim() function.

$res = mysql_query("SELECT id, field FROM table WHERE field REGEXP '[[.LF.]]'");
if($res) {
	while($row = mysql_fetch_assoc($res)) {
		$id = $row['id'];
		$field = trim($row['field']);
		mysql_query("UPDATE table SET field = '$field' WHERE id = $id");
	}
}

Rather simple, when you know what to do… Another bug bites the dust!

Last week we released a new Floorplanner account, the Enterprise account. With it, companies can have an online Floorplanner solution completely branded to their wishes. It includes the Roomplanner module and a custom library of their own furniture elements.  Steelcase and Maxon are the first to have an active Enterprise account.

The interesting part of this release, from a tech point of view, is the new drag-and-drop functionality. The Roomplanner is running in the Flash Player. However, the library of furniture elements is in HTML. We chose to build the furniture library in the HTML sidebar for a couple of reasons. It’s not in the Roomplanner, so there is more space left to design. It gives us more freedom in the page layout. All items on the page are indexed and things like sorting and tags we’re easier to build in Ruby on Rails than in Flash.

Now we only needed a way to get the furniture from the sidebar to the Roomplanner. That’s where the drag’n'drop comes in, drag from HTML and drop in Flash. To drag an image of a furniture element in HTML we used the fantastic JavaScript script.aculo.us framework. The next step was to swap the image to an element in the Roomplanner and to update the position of the element while moving the cursor on the Flash content. For this we used ExternalInterface to communicate between JavaScript and ActionScript. That’s all there is to it. The theory is actually quite simple, but in practice it was very (I repeat, VERY) difficult to get it working in all the main browsers. All those nitty gritty browser details…

At this moment everything seems to work just fine, so please take a look at Steelcase and/or Maxon and let me know what you think!

Today I learned a couple of new things about the use (and trouble) of BitmapData in combination with loading content from other domains. I thought we solved it a while ago, but it in some situations it didn’t work… I definitely hope this is my last post about the subject!

When you load content from another domain and you want to use BitmapData, then you always have to load a policy file (crossdomain.xml) from that other domain. What I discovered today is that you have to do this for ALL the content you’re loading, otherwise the BitmapData just doesn’t work. Even if it’s content you don’t want to use for the BitmapData, you still need to load the policy file. It took me quite a while of debugging to figure this out.

This is our current setup. Every server has its own domain.

The other thing I learned today is a small trick to remove the Warning in your logs. Jeffry Houser explains it in his post Fixing your CrossDomain.xml File.

Over the last year we’ve tried a lot of different applications to keep track of bugs and other issues, but none of those apps sticked with us. They were either not suited for the job (Basecamp) or to difficult and ugly (Trac, Bugzilla). But now I think that we finally have found a solution that just gets the job done: Lighthouse by activereload.

Lighthouse’s tagline is “beautiful simple issue tracking” and that really sums it up perfectly. It tracks issues, not only a bugs, so you can use it for all the issues that need to be dealt with. It’s simple and it’s easy to use, it just does what it needs to do without loads of unneeded features. A great advantage for us is that our designers can (and want) to use it too. It’s also very nicely priced and it has a sweet API for us geeks to build your own scoreboard (see picture).

There are some minor things that can be improved (for example, it’s somethings a little confusing to work with multiple projects) but it’s by far the best issue tracker I’ve ever worked with. To everybody at activereload, we really love your product and keep up the good work!

I just figured out how to use setInterval in a JavaScript class. This little snippet shows how I used setInterval in a recursive way.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function MyClass() {}
 
MyClass.prototype.doNext = function( pArray ) {
	clearInterval( this.interval );
 
	if( pArray.length > 0 ) {
		// do something with the array record
		this.doSomething( pArray.pop() );
 
		// call this function again in a couple of milliseconds
		var scope = this;
		var milliseconds = 100;
		this.interval = setInterval( function(){ scope.doNext( pArray ) }, milliseconds );
	} 
} 
 
MyClass.prototype.doSomething = function( pRecord ) {
	// do something
}
 
var myObj = new MyClass();
myObj.doNext( myArray );

Welcome to our brand new Floorplanner tech blog! Here we will be posting all our little technical adventures while working on the Floorplanner. This blog focusses mainly on the technical side of the Floorplanner, so you can expect stories about Flash/Flex, Ruby on Rails, Papervision 3D, JavaScript and all other kinds of thingies we run into on a daily basis. 

You might know that we did a similar thing at a tech blog on Suite75, but a couple of things have changed over the last year. As Suite75 we developed rich internet applications for all kinds of clients. Instead of doing a lot of different projects for clients, we wanted to build and sell our own product. Our mission: to be the easiest, quickest and best looking way to create and share interactive floor plans online. Floorplanner was born.

Along with the mission came a huge amount of technical challenges in the world that is know as the World Wide Web. It will be our pleasure to tell you about all the technical problems (and hopefully the solutions) we had to overcome to achieve our goal. So buckle up and join us on the bumpy road!