I was quite surprised to notice that latest Series 40 phones support standard W3C widgets. If that wasn’t enough to get my attention I also noticed that they have a competition for creating apps that run on Series 40 Feature Pack 1 devices.
What I did was converted my Symbian^3 game, Blockers, for Series 40 screen size and packaged the game as stated in W3C standard. Unfortunately I don’t have a Series 40 phones myself but luckily Nokia also provides simulator with Nokia Web Tools for testing e.g. Series 40 Web Apps. The shown screenshot was taken from the simulator.
If you happen to have a Series 40 (especially Touch and Type) phone, I would be really interested on hearing how the game works on your phone!
Game can be downloaded from project site, here. …or direct link to .wgt file.
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 firstthing 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?
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.
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.
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.
Here are instructions how you can create a simple W3C widget that runs on Qt Web Runtime (WRT) e.g. 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:
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!
I was quite surprised to notice that latest Series 40 phones support standard W3C widgets. If that wasn’t enough to get my attention I also noticed that they have a competition for creating apps that run on Series 40 Feature Pack 1 devices.
