Now that Qt people from Nokia released a preview of the Qt Web Runtime for N900 I was able to create a new simple task manager tool for my new phone in matter of hours. I like both KISS princible and GTD organizational method so I made the app as simple as possible: There are only four “folders” for tasks – Next, Someday, Archive and Shop. I tend to store my active tasks on the Next folder. Tasks that doesn’t have high priority go into Someday folder. Old tasks or tasks that are low priority go into Archive. Just because I used the Mobile Task Manager as a shopping list too I made a separate folder for listing the groceries.

On the technical side I was now able to use HTML5 client-side storage to persist the tasks. I wrote another blog post on that subject just to show how easy it is.

UI was easy to do and now I also took advantage of both portrait and landscape view modes. In landscape mode the toolbar is on the right side of the screen so that there are as much vertical space as possible for the tasks and in the portrait mode the toolbar is in the bottom so it is pretty easy to use with one hand for example when collecting items from shopping list.

You can download the widget here: TaskFlow.wgt

Code that I’m using for storing the “Task” objects in my GTD app:

var jsonTasks = JSON.stringify( tasks );
localStorage.tasks = jsonTasks;

That’s it. That is quite easy and can’t really think of many languages where you can persist objects with only few lines of code.

Code that I’m using for retrieving objects from storage:

tasks = JSON.parse( localStorage.tasks );

I hope you find this helpful. It works great on Qt Web Runtime running on my Nokia N900.

What do you think? Would you use a client like this? What features or user experience you’d like to see in the app?

TwimGo in landscape mode (selected tweet details shown on right). Sorry about the twisted Finnish date format :)

TwimGo in portrait mode – clear timeline view:

I have to say that I like it a lot :)

This time I crafted a small game of Labyrinth. The idea of game should be pretty familiar to everyone. You’ll need to guide the metal ball to goal by tilting the game board. I made it so that on each level there is one hole more compared to previous level. Levels are created randomly.

On the technical side it was easy to use device sensor in JavaScript to track the tilt angles:

// Ball's acceleration
var ballAccX = 0.0;
var ballAccY = 0.0;

// Initialize sensors
wrtSensors = nokia.device.load("sensors");
wrtSensors.startChannel(callback, "AccelerometerAxis", errorCallback);

// Callback function for sensors
// The 2.5 is a magic number that felt good :)
function callback(data) {
	ballAccX = parseFloat(data.axisX) / 2.5;
	ballAccY = parseFloat(data.axisY) / 2.5;
} 

function errorCallback(err) {
}

The animation and simple ball physics are done in JavaScript timer:

// Initialize timer to be run on every 50ms
animate = setInterval("animateBall()", 50);

// Timer function contains most of game logic like
// checking if ball have reached the goal or hole.
// Ball movement and physics are also calculated here
function animateBall() {
	if(gameover==false && goal==false) {
		ballVelX = ballVelX - ballAccX;
		ballX = ballX + ballVelX;
		ballVelY = ballVelY - ballAccY;
		ballY = ballY + ballVelY;	

		checkLimits();
		checkGoal();		

		// Move the ball DIV
		$("#ball").css("left", ballX);
		$("#ball").css("top", ballY);
	} else {
		if(goal) {
			$("#gameover").text("Creating next level!");
			$("#gameover").show();
			clearInterval(animate);
			level++;
			setTimeout("reset()", 1500);
		} else {
			$("#gameover").text("GAME OVER!");
			$("#gameover").show();
			level = 1;
			clearInterval(animate);
		}
	}
}

Here is a small video of what it looks like in action on my Nokia N900:

There are still few known issues in the game:

• It can create a level where goal is unreachable.
• Another issue I’m having with the game is that I haven’t found out how the backlight could be forced to stay on. I wrote a question on Qt Web Runtime forum but haven’t received any answers. If you know how to do it, please respond to my thread.
• It would be nice to have fullscreen mode in games like this. If you know how to create fullscreen widget, please respond to this thread in Qt Forum.

Finally, if you’d like to try it out yourself you can download the widget (ChromeBall.wgt) here.

It’s simple to use additional JavaScript libraries in widgets so it makes sense to use something like jQuery in your widgets. You can do so by downloading the latest jQuery library from their site and adding that to your ZIP file as separate js file.

With jQuery you can add an event handler for the screen resize event. In the event you can easily check the window dimensions and with those you can define the screen orientation. This makes it easy to change the overall UI to match the landscape and portrait views. Like in some apps you may want to have your toolbar in left side in landscape view and on the bottom when on portrait view.

Here is the code how this can be done with jQuery:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Rotation Test</title>
  <link type="text/css" href="css/style.css" rel="stylesheet"></style>
  <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">

  $(window).resize( function(){
    var height = $(window).height();
    var width = $(window).width();

    if(width>height) {
      // Landscape
      $("#mode").text("LANDSCAPE");
    } else {
      // Portrait
      $("#mode").text("PORTRAIT");
    }

   });
  </script>
 </head>
 <body>
   <div id="mode">LANDSCAPE</div>
 </body>
</html>

You can download the whole widget here: Rotate.wgt

Here is a sample how widget works in action on Nokia N900:

Widgets are just ZIP packages containing at least two files: Configuration file (config.xml) and resource files (index.html and other HTML, CSS, JavaScript and image files).

• widget.wgt – zip archive renamed to *.wgt, containing:
  
  • config.xml - configurations
  • index.html - content

Configuration file contains information about the widget like name, version, author, icon etc. Example of simple config.xml file:

<?xml version="1.0" ?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://www.substanceofcode.com/hellowidget" version="0.1.0">
  <!-- Name of the widget -->
  <name>Hello World</name>
  <!-- Description is shown when installing widget -->
  <description>Simple hello world widget</description>
  <!-- Start page for widget -->
  <content src="index.html" />
  <!-- Default icon for widget -->
  <icon src="icon.png" />
  <!-- Widget author -->
  <author>Tommi Laukkanen</author>
</widget>

Content is good old HTML, CSS, JavaScript etc. files. For example simple HTML page like this:

<html>
  <head>
    <title>Hello!</title>
  </head>
  <body>
    <h1>Hello W3C Widget World!</h1>
  </body>
</html>

When these two files are packaged into a ZIP archive and renamed to Hello.wgt you can install it on your Nokia N900 just by clicking the file in file browser. When you run the app it’ll look something like this:

Widget running on Nokia N900 with Qt Web Runtime

I hope that you find this tutorial helpful and start crafting your own widgets!

After you have installed the WRT on your N900 then you can point your N900 browser to http://bit.ly/n900-othello-wgt

Happy gaming! Let me know how well the application works on your device and does the computer AI ever beat you :)

Few weeks ago I discovered that Qt released a technology preview of Qt Web Runtime (Qt WRT) for N900 and after crafting few hello worlds and simple apps for that I can say that this is by far the easiest and fastest way to get your apps up and running on N900 (or any future phone which supports Qt Web Framework).

Here is a sample video of my first widget, game of Othello aka Reversi, running on my Nokia N900. In the video you can see how well the widgets are integrated into the platform so they have the same feeling as native apps starting from the installer:

Runtime supports W3C Widgets which are basically ZIP archives containing HTML, CSS, JavaScript files and single configuration file config.xml where you define e.g. widget name, icon and version. You’ll only need to rename the *.zip package to *.wgt and open the widget file in your device and it is installed on the device like a native app with icons and all. Compared to J2ME app development widget development is really rapid and agile.

Qt Web Runtime also has support for native APIs like camera, contacts, messages, etc. so widgets act like 1st class citizens on the device. You don’t have any nasty security popups which are the most annoying thing in Java ME apps.

I’ll post the downloadable widget in the later posts.

In the future Twitter will support OAuth authentication and luckily there is also xAuth support too which is simplified version of OAuth. xAuth works great for non-desktop apps like Twim. I just implemented xAuth support to Twim.

When you post a new status from Twim you’ll see that the status was posted from TwimGo app. This is because there was already another app register with Twim name. I might do a MeeGo version of the app so then the new name matches the platform well :)

This version also has support for Twitter Lists.

You can download the latest version of Twim from these links:

• Twim page or directly from
• http://bit.ly/twim-jar
• http://bit.ly/twim-jad

New version also includes small themes feature so you can select from three themes: Default, Gray and Night. Gray theme is more traditional list style view to your Twitter feeds as shown here:

Download new version from here or use these shortcuts:

• http://bit.ly/twim-jar
• http://bit.ly/twim-jad