Category Archives: Tips and Tricks

Flipboard page flip with Qt QML

If there’s one app that would make me to buy iPad that would be Flipboard. Their social magazine have such a beautiful user experience which others could really learn from. I’d like to see more apps like that on other tablets as well.

I thought about trying to mimic the Flipboard’s page turn effect with the QML script. The page turn is pretty simple and a bit more modern then traditional paper like curly page turn. In Flipboard the page rotates from the center like folding the screen.

I created this effect with Flipable element which is clipped with parent Item element so that only the half of the flipable is visible at all times. The flipable element contains a duplicate page content as the underlying element which is just created with HTML formatted Text element. I also added a flavor of shadow to the Transition animation so that inner part of the fold seems a bit darker. Shadow was created with transparent gradient image.

Here you can see the page turn (or fold) in action with the Nokia N900. Rendering speed wasn’t that fast when I used “raster” rendering and might have been way faster if “opengl” would have been used.

You can download the QML code from here.

Saturday Night App: NewsFlow

There can’t be a better way of spending your Saturday night other then crafting and knitting new apps for your mobile devices. This Saturday I was missing a nice news reader for my Nokia N900. I tried to follow the Forum Nokia workflow: Design, Develop, Distribute. Here’s what happened:

Design

Palette for news reader app

The first thing that I had to do was to get my app a decent color palette so that app would feel nice and consistent through out the views. I tend to use colourlovers.com to either create or browse good palettes. This time I decided to use nice blueish palette, The First Raindrop.

Now it was time to do the actual fun part and design the overall view of the apps user interface. As I tend to use Qt Web Runtime for development it’s pretty easy to do the UI drafts with simple static HTML page. These drafts can easily be extended to be used in the final app.

I really wanted to have horizontal panels this time around. Maybe to provide a book-like user interaction where you go to the next page to the right and back to the left. The following image shows the mockup of the UI.

User interface mockup for news reader app

As the mobile device display is quite small I thought that I’d show only one panel on one screen. If this would be created for a tablet like device then it could be wise to show e.g. all three or two panels at once on a display. I’ll have to test that when I get the first MeeGo tablet in my hands :)

Develop

Now that I had a draft UI HTML I started knitting the functionality with JavaScript to my new app which I would call NewsFlow. I used jQuery library to do all the heavy lifting like loading and parsing the RSS feeds.

As a small detail I used CSS animation for the panel switching so when user e.g. selects a feed from a feed list then view is switched to feed items page. With jQuery the CSS animations can be easily created with the animate method:

...
$(left).css("left", "0");
$(left).css("position", "fixed");
$(left).animate(
    // What CSS value(s) to animate
    {left:"-" + width + "px"},
    // Animation time in milliseconds
    1000,
    // Function to call when animation is finished
    function() {
		$(window).scrollTop();
		$(left).css("position", "relative");
	});
...

Then was the time to do the normal widget packaging and upload the app to the device. Here is what it turned out to be:

I have to say that I like it a lot as a simple news reader. This was again a good reminder on how fast the Qt WRT is to develop with. Now I just hope that Ovi Store would also start supporting Qt WRT apps soon so that the Distribute part would be easier.

What features you’d like to have in your news reader app?

Flip clock widget for Nokia N900

Crafting Qt Web Runtime Widgets

It’s amazing how simple it is to create desktop widgets with Qt Web Runtime. I was able to create this “flip clock” widget in less then hour and most of that time I spent tweaking the background image pixels in Pixelmator :)

The code behind this widget is only around 20 lines of HTML, 20 lines of JavaScript, 35 lines of CSS and one config file.

In HTML I only create divs for hours, minutes and date. In JavaScript I refresh the view to show current time and date and start the timer which updates the values in every 60s. Layout is done with a background PNG image and hours, minutes and date DIVs are placed on top of the image in CSS with position:fixed styling.

index.html


...

  
00
00
-

JavaScript (script.js)

function refresh() {
	var time = new Date();
	var hours = time.getHours();
	if(hours<10) {
		hours = "0" + hours;
	}
	var minutes = time.getMinutes();
	if(minutes<10){
		minuts = "0" + minutes;
	}
	$("#hours").text(hours);
	$("#minutes").text(minutes);

	var day = time.getDay();
	var month = time.getMonth();
	var weekday = ["Sunday", "Monday", 
"Tuesday", "Wednesday", 
"Thursday", "Friday", 
"Saturday"];
	var months = [
"Jan", "Feb", "Mar", 
"Apr", "May", "June", 
"July", "Aug", "Sep", 
"Oct", "Nov", "Dec"];	

	$("#date").text(weekday[day] + ", " + time.getDate() + " " + months[month]);
}

You can download the source code in ZIP here. You can install the widget directly to your Nokia N900 here.

Storing Objects to HTML5 Client-side Storage

Here is a handy tip on how to store your JavaScript objects into HTML5 client-side storage which is basically a simple key/value hashtable. You can easily store objects into a storage in JSON format.

W3C Development with TextMate and Chrome

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.

Labyrinth Game with W3C Widget, Accelerometer API and Nokia N900

I’ve been crafting the W3C Widgets for Qt Web Runtime (WRT) from the day Qt guys released the version for my Nokia N900. I haven’t been so productive on any other platform.

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.

My Labyrinth game for Nokia N900

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.