Tag Archives: javascript

NewsFlow, Google Reader client for Nokia N8 and N900

I’ve been really impressed with the latest Qt SDK 1.1 Technical Preview release since now I tend to launch Qt Creator instead of TextMate when editing QML files. Only bugs that I’ve found are the problems with the remote compiler so I still need Windows machine to compile apps to Symbian^3 platform.

With Qt SDK 1.1 I’ve been working on the next version of TwimGo but now I needed some break from that and got an inspiration for news reader from Nokia Reader which is a new RSS reader from Nokia Beta Labs.

I tend to use Google Reader heavily to read my feeds and didn’t like the idea of subscribing to feeds on another application. So this made me create a simple Google Reader client with Qt Quick, QML.

Application uses pure QML and JavaScript to access Google Reader API and displaying items. No custom C++ was written for the app. Application runs nicely on my Nokia N8 and N900. See how it runs on N8:

I’ll try to release this app soon if you’d like to try it out.

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.

Improved TwimGo – Alpha 3

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.

IMG_8037

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.

Track Where Your Money Flows – MoneyFlow for Nokia N900

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.

Screenshot-20100906-223210.png

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.

MoneyFlow Pie Chart

Some credit goes to 3rd parties: I used JSChart for creating that nice pie chart. Nice looking icons are mostly from WeFunction icon collection.

And what’s best is that the app is free and you can already download it from here: MoneyFlow.wgt

Let me know if you like the app! :)