Flowella – accelerometer, timers and Qt Quick

November 30th, 2010 by Merlin

Last month Nokia launched the improved version of the Flowella prototyping tool. The changes are not big, but are important. They can be grouped like this:

  1. Bug fixes
  2. New transition triggers
  3. Export to Qt Quick

Bug fixes

A developer/designer tool can have all the features in the world, but if you can’t save and later continue your hard work the tool will be discarded very soon. Earlier version of Flowella sometimes had trouble saving your current progress. The workflow could be messed up after loading or the connections between frames could be lost – very frustrating. The new version doesn’t have any of those problems. Saving, loading and exporting works as expected.

New transition triggers

The old way to go to the next screen was to click on the specified area. Although this was sufficient for basic testing, it doesn’t really reflect the way people use mobile phones. New Flowella adds more triggers.

Motion actions in Flowella

The first new triggers is accelerometer. The prototype can now respond to multiple motions. Just drag the arrow on the right side to the target screen.

Timers in Flowella

The second new trigger. It is great for rudimentary animation and non-interruptible actions (updating, authorizing, etc).

Export to Qt Quick

Qt logoBeside exporting to WRT and Flash Lite, you can now export to Qt Quick. Qt Quick is the new feature of Qt 4.7 and it allows you to create UI layout and behavior by using a language based on JavaScript. No C++, at least for the not-too-complicated stuff. If you’re familiar with web technologies, you’ll get around very quickly.

Here is the sample of the QML code generated by Flowella for one of the screens. It looks almost the same as the JavaScript object literal.

import Qt 4.7

Item {
   property string jumpToNode: ""
   signal jumpTo
   id: node
   focus: true
   Image {
      source: "Screenshot-20100930-165711.png"
   }
   Timer {
      id: timerTrigger
      interval: 500 /* Note: intervals must be > 0 for the timer to work */
      running: true
      repeat: false
      onTriggered: {
         jumpToNode = "3E579516-E275-5DF8-9AFE-99E9A6FC66B9.qml"
         node.jumpTo()
      }
   }
}

Free Nokia N900 design frame

November 12th, 2010 by Merlin

N900 frame post header

If you’re designing or prototyping an application for Nokia N900, this resource could be very helpful. N900frame_template.zip contains a SVG file with a N900 background (just like in the header photo), a status bar and a 800x480px workspace so you can easily export your work in native screen size and test it in one of available prototyping tools (like Flowella).

Layers in the SVG fileThe frame was created in Inkscape, but you can easily import it in some other vector drawing program (AI, CorelDRAW) or use raster graphics in the bundle (N900 hardware and status bar pictures) in Photoshop or GIMP. All the sizes are pixel perfect so you can use it to create quick mock-ups or the final design.

The SVG file contains layers with normal and full-screen grids that are helpful for quick prototyping. Status bar can be easily removed so the full screen canvas awaits you.

Using Maemo’s alarm framework with Qt – The basics

October 15th, 2010 by Zoran

Whew, finally found some time to write another post. This time we’ll be using Maemo’s alarm framework to do, well, almost whatever we want at a specific time, or even repeatedly at specific times :) So let’s get to it. Read the rest of this entry »

Using Maemo specific widgets with Qt

September 9th, 2010 by Zoran

Maemo custom widgets with QtThe N900 is a piece of work. A smartphone running Linux. What more could a geek want? Well, for one thing, leveraging an existing application framework (Qt… wink, wink) for developing cool applications. And we would also like to be able to use platform specific widgets and whatnot. Well, duh. Read the rest of this entry »

Custom push buttons on the N900 with Qt Style Sheets

September 3rd, 2010 by Zoran

QSS Custom buttons flowStandard push buttons on the N900 are functional and look good to boot. But let’s say you need something different for your next “instant-hit” app. Is there a quick and (relatively) painless way of getting that extra shine. Drumm roll, please. Enter the Qt Style Sheets… Read the rest of this entry »

Flowella – rapid prototyping tool for mobile designers

July 19th, 2010 by Merlin

Flowella is a simple but powerful tool by Nokia that lets you create application prototypes directly from design suites or even scanned hand-drawn sketches. Read the rest of this entry »

Short usability overview of a Nokia N900

May 7th, 2010 by Merlin

On March 15th Tardigrade had won on the Maemo Challenge that was being held on first Mobile Monday in Croatia. The winning application was Ginkg-o-minder (concept name) and the reward was N900 device to build and test the application on. There are many reviews of N900 spanning from a few to a dozen pages long containing all the technical details you can imagine. I will not talk about that, but will give you some usability information. Here is my opinion after playing with it for a while. Read the rest of this entry »