Revision as of 08:49, 15 February 2012 by hamishwillee (Talk | contribs)

StarMenu: custom QML component plugin

From Nokia Developer Wiki
Jump to: navigation, search

This article introduces StarMenu, a QML pop up menu that animates menu elements to align them around a central star.

Article Metadata
Tested with
SDK: Nokia Qt SDK 1.1.4
Devices(s): Nokia C7-00, Nokia N900, Nokia N950, Galaxy tab 7310
Platform(s): Symbian^3 and later, Harmattan, linux, Windows
Device(s): all with touch screen
Keywords: Menu, QDeclarativeItem, StarMenu
Created: lildeimos (18 Dec 2011)
Last edited: hamishwillee (15 Feb 2012)



The StarMenu is a pop up menu that can be raised by clicking or tapping on an area defined like using MouseArea component. The StarMenu's menu items are defined using StarItems. This plugin is been developed with Qt 4.7.4 and tested on linux, Nokia N900, Nokia C7-00, Nokia N950 and Android Galaxy tab GT-7310 (with Necesistas ). This is still work in progress.


two sub menus

Center star polygon has as many spikes as the number of StarItems, it can be disabled by setting starCenterVisible property to false. The circle shape amplitude is given by radius property. Clicking on the center of the current menu, will close it and goes back to its parent. It's possible to click on the center of the first menu to close all.

StarMenu {
id: starMenu
anchors.fill: parent
radius: 130
Component.onCompleted: starMenu.rootMenu = true;
StarItem {
width: 64; height: 64
Image {
anchors.fill: parent
StarItem {
StarMenu {

rotation scale delayed animation

It is possible to bind animations to StarItems. When a StarMenu is raised, the StarItems circle shape has the center located by the mouse click (or tap) position and their opacity, rotation, x, y property are set to 0. By doing this:

StarItem {
Behavior on x { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
Behavior on y { NumberAnimation { duration: 1500; easing.type: Easing.OutBounce } }
Behavior on opacity { NumberAnimation { duration: 2200; easing.type: Easing.OutBounce } }

StarItems are animated from center to their final position. StarMenu can also have a rotation animation:

StarMenu {
id: starMenu2
anchors.fill: parent; smooth: true
radius: 80
starCenterVisible: false
rotation: 1000
onStarMenuOpening: rotation = 0
onStarMenuClosing: rotation = 1000
Behavior on rotation { NumberAnimation { duration: 3000; easing.type: Easing.OutQuad } }

StarMenu has also a delayChangePos property. For example, when it is set to 100, the animation of the second StarItem is started after 100 ms, the third after 200 ms and so on. StarItem has also a delayChangePos property and if it is set, it take priority over the StarMenu delayChangePos property.

entries as components

StarItems can also contain any other component instead Image component used in these examples:

StarItem {
width: 320; height: 240
scale: 0.3
zoomHoverValue: 1
Behavior on scale { NumberAnimation { duration: 500; easing.type: Easing.OutQuad } }
Column {
Button { text: "Hello Qt" }
Switch { }
RadioButton { }

other shapes

StarItemss can be arranged in a spiral shape or a grid shape. The StarMenu shape property could have the following values:

  • StarMenu.ShapeCircle (default value)
  • StarMenu.ShapeGrid
  • StarMenu.ShapeSpiral

Rows in grid shape are aligned centered and are spaced by spacingH and spacingV properties with columns count defined by 'columns property. Spiral shape take care of radius value to start drawing StarItemss and radiusIncrement property to shape the spiral.

Properties & signals



  • rootMenu: bool
  • shape: enum ShapeKind { ShapeCircle, ShapeGrid, ShapeSpiral }
  • spacingH: qreal
  • spacingV: qreal
  • columns: int
  • radius: qreal
  • radiusIncrement: qreal
  • starCenterVisible: bool
  • useParentMenuCenter: bool
  • delayChangePos: int


  • starMenuOpening
  • starMenuClosing



  • zoomHoverValue: qreal
  • delayChangePos: int


  • hoverItem
  • leaveItem
  • clicked

Lacks & Notes

The plugin can currently only manage only one StarMenu at a time and rootMenu property should be defined for the main StarMenu as shown below:

StarMenu {
id: starMenu
Component.onCompleted: starMenu.rootMenu = true;

Also the menus are closed only by clicking on the area where they are raised. I should work to close them by clicking everywhere on the scene. A document is also to be made available shortly.

4767 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.