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
...0000-
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.
