Saturday Night App: NewsFlow

Posted on Saturday, October 9, 2010 by Tommi Laukkanen

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?

Crafting Qt Web Runtime Widgets

Posted on Tuesday, October 5, 2010 by Tommi Laukkanen

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.

Improved TwimGo – Alpha 3

Posted on Saturday, September 25, 2010 by Tommi Laukkanen

Time flies. It’s already a week from last alpha 2 release of TwimGo. During the last week I’ve been crafting few improvements to my Qt Web Runtime based Twitter client.

This version includes few of the most requested features:

Auto-refresh
Search
Lists
TwitPic and yFrog thumbnail preview

I could easily notice the advantages of the Qt WRT platform as new features were really easy to implement in plain HTML, JavaScript and CSS. Talking about the JavaScript I spotted this Tweet from my timeline which is so true:

learning Javascript used to mean you weren’t a “serious software developer”. today, not learning Javascript means the same thing. – @monkchips

I also recorded a small video of the current features in TwimGo:

You can download the app from the new app site that I just created :)

Again, remember that current Qt WRT can’t update existing installation so uninstall the previous version of TwimGo first.

I hope you like it! Leave feature ideas, bug reports etc. on the comments or on the getsatisfaction.com/twimgo page.

TwimGo 2.0 Alpha Preview for Nokia N900

Posted on Monday, September 13, 2010 by Tommi Laukkanen

Here is a first downloadable alpha release of TwimGo 2.0 for Nokia N900. There were rather positive feedback for the teaser shots so I thought that it’d be best to release this as early as possible to get more feedback for the next releases.

Few words about the release:

Requires Qt Web Runtime (from Maemo extras-devel repository)
Hardware keys don’t work so well in the Qt WRT apps so I recommend the use of virtual keyboard. This problem might occur only on my device.

Download app from here: TwimGo.wgt

See it in action here:

Track Where Your Money Flows – MoneyFlow for Nokia N900

Posted on Monday, September 6, 2010 by Tommi Laukkanen

I haven’t used cash that much for years. That makes it a bit more difficult to keep track of my expenses and current balance. This is why I created this small app to my Nokia N900, MoneyFlow. With this app user can add new expenses on the go easily and adjust the current balance when needed. As a small bonus you can also check from pie chart where your money is flowing based on your entries.

App is a W3C Widget which requires a Qt Web Runtime (QRT) on Nokia N900. Hopefully that is shipped with MeeGo devices so you wouldn’t need to worry about that in the future.