NightFlash LED flashlight in QML - app showcase

From Nokia Developer Wiki
Jump to: navigation, search

Night Flash is a LED flash light tool written using Qt Quick Components. This article explains the main elements of the app design.

Article Metadata
Code ExampleTested with
Devices(s): Nokia 700/701/C6-01/C7-00/Oro/X7-00/E6-00
Created: jacky.finalfantasy (14 Mar 2012)
Last edited: hamishwillee (20 Apr 2012)



Hi, I am Jacky (a device driver engineer). I want to write a APP about using phone's LED flash light. I am not familiar to create beautiful UI, so I need a tool to help me quickly to build a suitable UI. Few month ago, I find QML language and it is very easy to let me design the UI. I start to use QML to finish my Night Flash APP UI, and use C++ (QDeclarativeItem) to finish the logic and LED control.


Night Flash is a LED flash light tool. (QML UI + C++ code with QDeclarativeItem. StatusBar + PageStack + ToolBar)

App Overview

Four function pages let you easy to use different LED function. (mainPage create TabBar/TabGroup with 4 Page)

Provide toolbar and menu to select other Page. ( 1. ToolBarLayout/ToolButton to create toolbar menu select in mainPage. 2. Menu/MenuLayout/MenuItem to create the menu-item that can be clicked).

Support shake phone or press volume-key to enable/disable LED function.

  1. C++ part get the phone-shake or volume-key press, and then send a signal to QML UI.
  2. The shakeModeSettingPage/volumeKeySettingPage height is larger than phone's height pixels, but you can use Flickable component to let it be flickable.

Custom components instead

I almost use the Qt Quick Components. Only a few specific images that need be re-created/re-modified. For example ShakeModeImage/VolumeKeyImage: when user press this icon, change the background image to blue and give a ThemeEffect (Let it fit the similar Qt Quick Components.)

Problem areas

  1. The four tab-pages need fill with black Rectangle. If use Item instead, seems sometimes have ghost-image.
  2. I want to get the Slider press-release event. Slider send onValueChanged signal every time when value changed, but I want to get the final value when press-release. I add MouseArea outside. MouseArea do the following thing to get
    1. drag.filterChildren: true
    2. check onCanceled and onPositionChanged signal.
  3. I use 4 tab-pages, so the APP startup seems slowly. Maybe need more powerful hardware with GPU support?!

Get Night Flash from Nokia Store

Only works for Nokia Belle. (Nokia 700/701/C6-01/C7-00/Oro/X7-00/E6-00):

Note.pngNote: This is an entry in the Symbian Qt Quick Components Competition 2012Q1

This page was last modified on 20 April 2012, at 06:46.
272 page views in the last 30 days.