radikalFX

Making the best of the iPad

cra5h — Thu, 28 Jan 2010 14:38:00 +0000

Yes I know, everybody has been writing about this thing and probably everybody in the world has the same doubts about Apples latest addition to their product line of ultra sleek products. But instead of trying to list everything I hate about it and all the negative feelings, I would like to write some of my initial ideas for new software.

1. Musical instrument
The last couple of years I have seen more and more futuristic DJ tools, effect processors and digital instruments. The iPhone is just to small to run the tools on, but imagine having a touch surface a bit bigger, that could be, in Apple promotion talk, pure magic. At the moment we have dedicated hardware systems like Lemur from Jazzmutant which is an amazing system. But software like that on the Lemur could be created for the iPad and that would mean you don’t need to put down the bucks for the dedicated hardware anymore.

2. Touch screen interface for you computer
Imagine being able to control your computer through your iPad, while you iPad is able to give you visual feedback on what is going on. Or looking at the 10/GUI OS concept. I doubt whether Apple will allow something like this, but wouldn’t it be incredible?

But also if there is no visual response from the actual system. The iPad could serve the same market as the Wacom Bamboo Touch. I know, a lot more expensive, but the possibilities are endless.

3. Board games
Don’t think about multiplayer by connecting over wifi to some other system. But multiplayer on one device and sharing it across the table with your friends or family. Starting with games like checkers and chess, but also think about a game like Ludo or Monopoly.

I know that you could just as easily get the original board game from somewhere underneath some dust and the playing experience might even be better. But still think that have the added interactivity could be a big plus over the traditional games.

Animated website background with HTML5

cra5h — Sat, 17 Oct 2009 13:05:04 +0000

After fooling around with some of the basic HTML5 Canvas features for my previous post, I decided to also work out some other ideas I had. Today I started implementing a simple animated background for a website.

Click here for the demo

Using a Canvas Object as a background
Before actually getting to the animating of the background, I first had to setup Canvas as a background object. In order to do this. I have added the Canvas element in an absolute positioned div that is aligned to the top of the page. The reason for using a div around the Canvas is because the browsers don’t seem to want to put the Canvas in page at 100% without creating scrollbars.

After placing the background a div can be placed on top. When this div is created with a max-height of 100% and overflow set to auto. This layer will automatically give a scrollbar when necessary.

So that leaves us with the following HTML and CSS code:

CSS:

#backgroundHolder {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #999;
}
#realbody {
	position: absolute;
	top: 0;
	width: 100%;
	overflow: auto;
	max-height: 100%;
}
canvas {
	width: 100%;
	height: 100%;
}

Let the browser resize the Canvas
When I created the first setup for this demo. I started by setting the height and width of the Canvas to the height and width of the page. This soon turned out to be quite heavy on the CPU usage at higher resolutions. So I made the Canvas a static size and let the browser resize the area to 100%. This works and performs way better. And because the animated content is abstract it does not really matter that we loose the aspect ratio.

Once you have setup the Canvas behind the page. You can draw whatever you want in this Canvas and it will render behind the normal content in the browser.

How to animate the background
Now that we have done the setup for the page, we can start to animate. I created some really simple code which doesn’t do very proper checking on the boundaries. It basicly switches 3 variables around to make the background animated: move the bars from right to left, change the rotation of the Canvas context from (π / 32) to -(π / 32), and fade the color between an array of colors.

Drawing the bars
The bars are just drawn rectangles which are drawn a little bit above the canvas till a little bit below the Canvas, this is because of the rotation. In order to draw the bars I use the following code:

for (var i = leftOffset; i < canvas.width + 600; i += (BAR_WIDTH * 2)) {
	context.fillRect(i - (canvas.width / 2), 0 - (canvas.height / 2) - 200, BAR_WIDTH, canvas.height + 400);
}
leftOffset -= BAR_SPEED;
if (leftOffset + BAR_WIDTH * 2 + 300 < 0) {
	leftOffset += BAR_WIDTH * 2;
}

The BAR_SPEED is to move the initial leftOffset to the left all the time. Up till it reaches a certain value. Then the leftOffset is scaled up a little so that we don’t create more and more bars over time. The starting point of the context.fillRect might seem a bit weird. This is because the Canvas is translated to the center. So the starting point for drawing a bar is minus the width of the Canvas area.

Rotating the bars
Rotating the bars is even simpler then the drawing of them. We can just use the context.rotate function to set the rotation of the content that we are drawing. Keep in mind that you might want to save the context state before rotating so you can restore it after the rotation. The JavaScript code for rotating is the following:

context.save();
context.rotate(angle += angleAdjust);
// Draw your content here
if (angle > MAX_ANGLE || angle < 0 - MAX_ANGLE) {
	angleAdjust = 0 - angleAdjust;
}

In the example above MAX_ANGLE is set to π / 32. The variable angleAdjust is used to make sure that we either increase the angle or decrease the angle.

Switching the colors
The effect to finish the whole thing of, is the switching of colors. For this demo I am using 6 colors that I just guessed some RGB values for. Blending the colors is done with this Color object in JavaScript:

function Color(r,g,b) {
	this.r = r;
	this.g = g;
	this.b = b;
 
	this.step = COLOR_STEP;
 
	this.fadeTo = function(color) {
		this.r = this.r + ((color.r - this.r) * this.step);
		this.g = this.g + ((color.g - this.g) * this.step);
		this.b = this.b + ((color.b - this.b) * this.step);
 
		this.step += COLOR_STEP;
 
		if (this.r == color.r &&
				this.g == color.g &&
				this.b == color.b) {
 
			this.step = COLOR_STEP;
			return true;
		}
		return false;
	}
 
	this.getRGB = function() {
		return Math.round(this.r) + "," +
				Math.round(this.g) + "," +
				Math.round(this.b);
	}
}

Every time the fadeTo method is called, the color that is used will blend more to the color provided as an argument to the fadeTo method. If color provided as a parameter is the same as the color. Then this method will return true so the rest of the code can start providing another color to blend to.

The code to start running through the array of colors then becomes something like this:

if (activeColor.fadeTo(colors[nextColorIndex])) {
	activeColor = colors[nextColorIndex++];
	if (nextColorIndex >= colors.length) {
		nextColorIndex = 0;
	}
}
context.fillStyle = 'rgb(' + activeColor.getRGB() + ')';

After setting this demo up today, I have to conclude that doing animations like this is really not that difficult. I think within the next few months we will see more and more awesome website implementations with Canvas.

Dynamic image collage with HTML5 and Canvas

cra5h — Fri, 16 Oct 2009 21:43:05 +0000

In the last couple of months the hype around web technology has really started to heat up. The HTML5 standard is getting a lot of attention from all major browser manufacturers and all my favorite browsers are starting to support all the nice new features coming in HTML5.

One of my favorite new features is Canvas, prime reason being my hope to finally make Flash obsolete, sorry Adobe. Because I wanted to check out the capabilities of Canvas, I decided to start coding some simple projects with Canvas.

My first demo is a simple Canvas element which can be used to make a collage of images. The demo can be found here., you will need a Canvas compatible browser.

What does it do
The demo lets you search for images from Flickr. When you have searched for some images, you can click any of the images there to add them to the Canvas part of the page. When the image is added to the Canvas then it’s automatically created as a new layer. Each layer can be manipulated in the following ways: move, scale, rotate, move layer up and down, remove layer, change opacity, change blending mode and enable or disable shadow.

The layout is a bit similar to image edit software, which I think is quite simple to understand. The code might still contain some bugs and do some unexpected things. Rotating images and then scaling makes the whole thing kinda whobly!

How does it work
The JavaScript code for this demo is split up into two parts. The first is a library that loads in all the proper calls for the Canvas element and that gives the page the ability to modify the layers in the collage. The second part of the JavaScript code, is the code to handle all the page interaction and to bind the HTML controls for the layers. I won’t go into the code for the user controls. But the canvas control might be interesting:

jCollage = new Collage("#collage"); //Create new collage Object with id of the Canvas tag
 
jCollage.setBackgroundColor("#fff"); //Set background color of collage
jCollage.setBackgroundImage(img); //Set background image for the collage
 
jCollage.redraw(); //Force redraw the collage
 
jCollage.addLayer(img); //Add a new layer to the collage
jCollage.getLayer(id); //Get layer by id
jCollage.getLayers(); //Get Array if all layers
jCollage.removeLayer(id); //Remove layer based on id
 
jCollage.moveLayerUp(id); //Move layer up in the array
jCollage.moveLayerDown(id); //Move layer down in the array
 
layer.isVisible(); //Is layer visible
layer.toggleVisible(); //Toggle visibility
layer.hasShadow(); //Does layer have shadow
layer.toggleShadow(); //Toggle shadow
layer.setShadow(boolean); //Set shadow
layer.getOpacity(); //Get opacity of layer
layer.setOpacity(float); //Set opacity of layer
layer.getCompositeOperation(); //Set the composite operation
layer.setCompositeOperation(string); //Get the composite operation

You can find the JavaScript code for this here. I might one day work this out as a jQuery plugin, but don’t know if that will be worth the extra effort.

Conclusion
Getting up to speed on the Canvas element is quite easy and the information for the HTML5 standard is already enough to get you going. Because a lot of people have already been working with this feature, it’s also very simple to find more detailed information about problems and how to solve them.

The most difficult thing to get going was handling the collision interaction with the Objects, because I couldn’t use the normal mouse events based on the DOM. I had to figure out the math behind the collisions myself, this code is not very pretty. But after getting this demo running, I have to say that it was not very difficult to code and Canvas is definitely going into a direction were it could replace Flash functionality. I just hope that Internet Explorer starts supporting it some time soon as well!

No more cookies, client side database on the iPhone

cra5h — Sun, 15 Mar 2009 11:29:24 +0000

At the moment I am working on a small iPhone web application. The main goal of creating this application is to check out the capabilities of my favorite phone. While working on this demo application, I wanted to store favorite information for every user. Since I don’t want to set up server side databases for just a small test web application. My first thought was the always hated cookie. But before doing that I wanted to look into the possibilities of the HTML5 database support. I knew that this was implemented in the latest Safari release. But didn’t know if it was in Safari on the iPhone. But you know what, it is!

I won’t go into all the details, but I setup a very simple demo page here: http://radikalfx.com/files/db.html. Visit that link with your iPhone or with Safari 4 to see how it works. The page lets you creating and dropping a table in your client side browser database. And you can insert, select and delete data in this table.

So how does it work
The first thing to do, is create a connection to the database. This can be done with some code like this:

function setupDatabase() {
  try {
    if (window.openDatabase) {
      var shortName = "testdb";
      var version = "1.0";
      var displayName = "Test Database";
      var maxSize = 65536;
      mydb = openDatabase(shortName, version, displayName, maxSize);
      dbReady = mydb != null;
    } else {
      writeStatus("No JavaScript database support!");
    }
  } catch(e) {
    dbReady = false;
    writeStatus("Exception while setting up database: " + e.message);
  }
}

The most important call in this code is the mydb = openDatabase(shortName, version, displayName, maxSize); which opens the database connection for you.

After this is done you can start transactions on this database in the following way:

mydb.transaction( function (transaction) {
  transaction.executeSql(query, data, dataHandler, errorHandler);
});

The transaction requires a query, the data added to the query. And a data handler object which is called when the transaction succeeded and a error handler for handling errors in the transaction.

For inserting data I created the following very basic data handler in my sample code:

function insertDataHandler(transaction, results) {
  writeStatus("Insert row with id: " + results.insertId);
}

Since this functionality is build with SQLite, you can use the documentation of SQLite to figure out what you can do with your queries and how they should be build up.

Since the application I am developing is just for the iPhone, I can safely use this functionality. Of course for normal web development it’s kinda tricky since most browsers don’t support it yet.

For more information on this technology you can also visit the Safari Programming Guide.

Canonical Links: Google, Yahoo & Microsoft working together

cra5h — Mon, 16 Feb 2009 10:51:31 +0000

It doesn’t happen very often, but every once in a while all the major search engines decide on something together. A week ago something like this happened and they decided on supporting canonical links in pages.

Is this useful for you? That really depends on what you are doing on the web. But for example at my work this really helps a lot. At ilocal.nl we have different ways of linking to company detail pages. For example:
http://www.ilocal.nl/WebDisplayServlet?iqk1=466448876390121&iqf1=id&tid=DetailsDisplay
http://www.ilocal.nl/nl/restaurants/bistro-zilverzoen/290448876390948

Above links contain exactly the same information. The only difference is that the first one is the old URL that we used to use. And then we switched to the second URL for SEO improvement. But /WebDisplayServlet links still get a lot of traffic from pages linking to them.

Now what you can do with canonical links is when the first URL is requested, add the following HTML in the head of the page:

This way all our friendly search crawlers can instantly recognize that it shouldn’t put this URL in it’s index, but use the canonical link. If the search engine then starts crawling the link provided here or if it’s using the data from this page, isn’t 100% clear to me. But if the page is accessed by the second URL then you should not put this canonical link in. So the crawler doesn’t try to look up a page that it’s already looking at.

One problem with this canonical link is that the content of the page should be the same or close to the same as the page that the crawler found the link on. But for ilocal what I would like to do is when a users searches for something. Then let the canonical link point to a static result page. For example if a user links to a search for “hotel zwembad” in “utrecht” (link). Let the canonical link, link to the rewritten results page for hotels in utrecht (link). But in the blog post on google about the canonical links it says the following:

Is it okay if the canonical is not an exact duplicate of the content?
We allow slight differences, e.g., in the sort order of a table of products. We also recognize that we may crawl the canonical and the duplicate pages at different points in time, so we may occasionally see different versions of your content. All of that is okay with us.

So right now I will not provide a canonical link on the results pages of ilocal.nl, but it would be nice to also have a way to specify some sort of parent URL which you want crawlers to use instead of all the URL which is cluttered with refinements by users and other nasty parameters. It’s a good thing that in the next release of ilocal.nl we will remove a lot of defaulted parameters and this might help a bit as well.

Yahoo Pipes, impressive!

cra5h — Sun, 15 Feb 2009 10:03:39 +0000

Every once in a while you are surfing the web and come across something that you really think, whoa. For me this is most of the time something cool in graphical design or user interaction. But a week ago I came across Yahoo Pipes and just at that moment I also had a good reason to use it.

Now the best way to start is to describe what Yahoo Pipes is. The description from the Yahoo Pipes website is:

Pipes is a free online service that lets you remix popular feed types and create data mashups using a visual editor. You can use Pipes to run your own web projects, or publish and share your own web services without ever having to write a line of code.

So a visual way to mashup different sources of data. So what you for example could do is combine Flickr, Facebook and Last.fm data into one nice tailored data feed and then you won’t have to combine all the sources of data in you web application. But you’ll be able to just do one JSON call and get all you data in the format that you want.

My use case
The reason I found this interesting is because I ran into a problem with the last.fm API. The problem is in the artist.getSimilar method. This method can be used to get a number of artist similar to the artist name provided. This works quite well when you look at the normal XML return value. But when you switch to the JSON output it doesn’t work correctly anymore. The reason for this, is that this method in XML returns a similarartists tag. This tag has a collection of child elements with the name artist. But the similarartists also has a attribute with the name artist. Probably in the last.fm implementation the switch between XML to JSON format is automatic. And in JSON all the child elements will be discarded. So basically rendering the JSON output of the artist.getSimilar method useless.

In Pipes
So I was interested to see whether Yahoo Pipes would be able to fix this problem by parsing the XML and then outputting the proper values. So I created an account, logged in and started dragging and dropping elements around. I created the following flow:

I used the following components to parse the last.fm XML and create a API call that would be usable in JSON.

URL Builder
The first call is a URL builder. This builder has a base URL which is that URL of the last.fm API. In the URL Builder you can add as many query parameters as you want. In order to make the parameters configurable you can hook in Text Input fields. For this functionality I added text input for the artist name and for the API key. This way other users can also use my generated pipe if they like to.

Fetch Data
The URL Builder is connected to the input of a Fetch Data block. What this block does is read in the information from the URL build by the URL Builder and parses it for you. In the “Path to item list” you can already select what exact data it should get from the XML feed. In my case I want all similarartist.artist.

But that still leaves me with the problem that the first Object is just the artist name. In outputting the data that’s really not nice and I want to get rid of that first one.

Split, Count, Simple Math & Tail
In order to get rid of the first item from this list I start of by splitting the output of the Fetch Data block. On the left output of the split I count the number of results. The total amount of items is then put into a Simple Math block. The simple math block then just subtracts 1 from the total count. The other part of the Split block is fed into the Tail block. What the Tail block does is that it outputs only the last items from the provided data. So in the Tail the (total amount – 1) is provided. Why they labeled this field “Emit after position” I don’t know. But I don’t think this is a very proper description.

Sub-element
The last step before outputting the data, is that I only output the item.name. This is because this is the only important element for me at this time and I don’t want to clutter the pipe output with a lot of data that I don’t have any use for.

After saving the Pipe you are then able to connect to the pipe. You can even provide that exact path to use. My pipe can by accessed over here:
http://pipes.yahoo.com/fruitmaster/getsimilarartists?artist=Justice&_render=JSON

Now I do have to say that not all is well in the land of Pipes. A few times the Yahoo online editor didn’t completely get what I was doing and wasn’t working as it should. This was easily resolved by reloading the page. But still it was kind of annoying. Also the documentation is sometimes kinda vague and the preview data in the editor also sometimes fails. But all in all, it’s a nice piece of software that Yahoo set up!

Spring 2.5 with annotations and REST requests

cra5h — Sat, 31 Jan 2009 17:09:09 +0000

Spring 2.5 Web MVC is a really great framework, especially when using annotations you don’t have to spend to much time on getting everything up and running and separating MVC logic is really simple. One problem I recently came across, was something which was a bit annoying. When using Spring 2.5 with annotations, it’s not possible to define a URL pattern with a wild card in it. So creating REST full URL patterns can be a problem then. This is something that they will have build into Spring 3.0. But since that is not ready for production I wrote a small hack to at least be able to easily define URL patterns with wild cards.

Creating a custom handler mapping Object
The first thing to do is, is to create a custom handler mapping Object. This Object can extend the Spring DefaultAnnotationHandlerMapping. This handler mapping won’t overwrite the DefaultAnnotationHandlerMapping. But we will just use this one to test for our REST url patterns. If no match is found. Then the method getHandlerInternal will return null. When null is returned, this means that Spring will go on and try to do this request in any of the other handler mappings configured. How this is configured in Spring comes up a little bit later in this post.

The code for the new RestHandlerMapping is as follows:

package com.radikalfx.demo.handler;
 
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Required;
import org.springframework.web.servlet.HandlerExecutionChain;
import org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping;
 
public class RestHandlerMapping extends DefaultAnnotationHandlerMapping {
 
	private String[] requestNames;
 
	@Override
	public HandlerExecutionChain getHandlerInternal(HttpServletRequest request) throws Exception {
 
		String uri = request.getRequestURI();
 
		for (String requestName : requestNames) {
			if (uri.startsWith(requestName)) {
				return new HandlerExecutionChain(this.getHandlerMap().get(requestName));
			}
		}
		return null;
	}
 
	@Required
	public void setRequestNames(String[] requestNames) {
		this.requestNames = requestNames;
	}
}

This RestHandlerMapping Object has the option to set one or more request names. This was we can just have this one Handler to set up multiple different URL patterns for different Controllers.

The Controller

Next is the controller. There is not much special that needs to happen to the controller. The only thing that we need to do, is make sure that we place a request mapping similar to that provided to the handler. And that this request mapping is placed on the class and not on the method.

package com.radikalfx.demo.controller;
 
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
 
@Controller
@RequestMapping("/action/")
public class ActionController {
 
	@RequestMapping
	public ModelAndView getAction(HttpServletRequest request) {
		return new ModelAndView("action");
	}
}

Spring configuration
Next thing we need to do, is that we need to change the Spring configuration a little bit. Normally when using annotated Web MVC you would probably use the DefaultAnnotationHandlerMapping, with this hack, we are still doing that. But creating an own handler mapping to be used before this one. In you configuration, this would become:

 class="com.radikalfx.demo.handler.RestHandlerMapping">
     name="requestNames">
        >
            >/action/>
        >
    >
>
 class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping"/>
 class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>

Don’t forget to also include in the Controller in the Spring configuration!

Changing web.xml
The final thing that you need to do, to get this working, is change the web.xml so that the DispatcherServlet gets the requests for the URL pattern that we want to use:

>/action/*>

And that’s it. Of course you probably want to have some service that can handle the HttpServletRequest in the controller and extract the proper information from the request URI. But basically this is all you need to use wild cards in URL patterns with Spring 2.5 and annotations.

Check if image exist

cra5h — Wed, 14 May 2008 07:26:55 +0000

I ran into some problems that I don’t want to show these horrible looking red cross images in Internet Explorer when an image doesn’t exists. And it turns out it’s really easy to solve this problem. You can just use the onerror attribute of the img tag. Having jquery, you could really easily just put a $(this).hide(); in the onerror attribute and the image is automatically hidden when it can’t be loaded.

Communication between Flash and Javascript

cra5h — Thu, 03 Apr 2008 17:02:21 +0000

Today I spend some time looking at the best way to communicating between a Flash Object and the Javascript in the page containing the Flash Object. After seeing a lot of out of date solutions I came by this article from Adobe:

Using the External API for Flashâ€“JavaScript Communication

It makes it really easy to do the communication between the two technologies by using the following code in Flash

import flash.external.*;
// The name of a JavaScript function to call 
var callJasFunction:String = "callJavascript";
//parameter 
var msg:String = "Hello. ^^";
// The return value after calling JavaScript 
var returnValue:String = ExternalInterface.call(callJasFunction, msg).toString();
return_txt.text = returnValue;

Footer placement?

cra5h — Sun, 23 Mar 2008 10:49:34 +0000

This post will give a little description about how you could place a footer at the bottom of a HTML page, but because I don’t like the way I am currently doing it, please let me know if you have any better solutions.

The requirements for the footer placement are the following:

Footer should be at the bottom of the page when the page is higher then the browser viewport.
Footer should be at the bottom of the browser viewport if the page is smaller then the browser viewport. No scrollbar should be shown.
Footer has a 100% width
Browser resizing and AJAX actions in the webpage that change the page height should update the footer position.

At the moment I am using a JavaScript solution that uses the jQuery 1.2.3 library. You can check it out on this page: ilocal.nl.

It uses the following JavaScript and CSS code:

$(window).ready(function() {
  setFooterPosition();
});
$(window).resize(function() {
  setFooterPosition();
});
function setFooterPosition() {
  $("#footer").hide();
  if ($(window).height() - 65 < $("body").height()) {
    $("#footer").css("top", ($("body").height() + 1) + "px");
  } else {
    $("#footer").css("top", ($(window).height() - 65) + "px");
  }  if ($("#header").width() > 996) {
    $("#topbanner").css("width", $("#header").width() + "px");
  } else {
    $("#topbanner").css("width", "996px");
  }  $("#footer").css("width", $(document).width() + "px");
  $("#footer").css("left", "0px");  $("#footer").show();
}

#footer {
  position: absolute;
  display: none;
  height: 53px;
  z-index: 0;
}

Please note that earlier versions of jQuery don’t work with this code, so it’s important to use 1.2.3. You might also notice that there is some difference between the offset height that I am using in the JavaScript, and the height of the footer, this is because I want a small margin between the content on the page and the footer.