×
Namespaces

Variants
Actions
(Difference between revisions)

StarMenu: custom QML component plugin

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories))
lildeimos (Talk | contribs)
(Lildeimos -)
Line 1: Line 1:
[[Category:UI]][[Category:Plugins]][[Category:Qt Quick]][[Category:Code Snippet]]
+
[[Category:UI]][[Category:Plugins]][[Category:Qt Quick]][[Category:Code Snippet]][[Category:MeeGo]][[Category:Symbian]][[Category:Draft]]
 
{{Abstract|This article introduces {{Icode|StarMenu}}, a QML pop up menu that animates menu elements to align them around a central star. }}
 
{{Abstract|This article introduces {{Icode|StarMenu}}, a QML pop up menu that animates menu elements to align them around a central star. }}
 
{{ArticleMetaData
 
{{ArticleMetaData
Line 23: Line 23:
 
== Introduction ==
 
== Introduction ==
 
The {{Icode|StarMenu}} is a pop up menu that can be raised by clicking or tapping on an area defined like using {{Icode|MouseArea}} component. The {{Icode|StarMenu}}'s menu items are defined using {{Icode|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 [https://sourceforge.net/p/necessitas/home/necessitas/ Necesistas] ).
 
The {{Icode|StarMenu}} is a pop up menu that can be raised by clicking or tapping on an area defined like using {{Icode|MouseArea}} component. The {{Icode|StarMenu}}'s menu items are defined using {{Icode|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 [https://sourceforge.net/p/necessitas/home/necessitas/ Necesistas] ).
This is still work in progress.
 
  
 
== Usage ==  
 
== Usage ==  
 +
 +
'''Note for Harmattan:''' .pro must contains this:
 +
 +
contains(MEEGO_EDITION,harmattan) {
 +
DEFINES += MEEGO_EDITION_HARMATTAN
 +
QT += dbus
 +
}
 +
 +
'''To compile and install the plugin, just do:'''
 +
<code java>
 +
qmake
 +
make
 +
make install
 +
</code>
 +
 +
then in your .qml you will need to
 +
<code java>
 +
import com.starMenu 1.0
 +
</code>
 +
 +
'''To compile within your project:'''
 +
copy staritem.* and starmenu.* in your project directory and add them to the .pro file.
 +
Then in the main.cpp include the headers:
 +
<code java>
 +
    #include "starmenu.h"
 +
    #include "staritem.h"
 +
</code>
 +
 +
and before setSource() or setMainQmlFile() register the component with:
 +
 +
<code java>
 +
    qmlRegisterType<StarMenu>("StarMenu", 1, 0, "StarMenu");
 +
    qmlRegisterType<StarItem>("StarMenu", 1, 0, "StarItem");
 +
</code>
 +
 +
then, in your .qml file, you will be able to:
 +
<code java>
 +
    import StarMenu 1.0
 +
</code>
 +
  
 
[[File:StarMenu_two_starsubmenu.jpg|x220px|two sub menus]]  
 
[[File:StarMenu_two_starsubmenu.jpg|x220px|two sub menus]]  
  
Center star polygon has as many spikes as the number of {{Icode|StarItem}}s, it can be disabled by setting {{Icode|starCenterVisible}} property to {{Icode|false}}. The circle shape amplitude is given by {{Icode|radius}} property.
+
The {{Icode|StarMenu}} component displays a contextual menu in a declarative user interface.
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.  
+
 
 +
{{Icode|StarMenu}} is hidden by default and opens in response to a user action. The purpose of {{Icode|StarMenu}} is to manage all {{Icode|StarItem}} childs. By default they are arrange in a circle shape and, in the center of it, it is painted a star polygon shape with as many spikes as the number of StarItems. It can be visible or not by setting the boolean {{Icode|starCenterVisible}} property.
 +
The circle shape amplitude is given by {{Icode|radiusH} and {{Icode|radiusV} properties.
 +
Clicking on the center of the current menu, will close it and goes back to parent.
 +
It's possible to click on the center of the first menu to close all.
 +
visualParent property is used to bind the close menu action to a specified item, so, instead of clicking on center of {{Icode|StarMenu}, it's possible to set {{Icode|visualParent} to the main window and close menu everywhere on the screen.
 +
When using {{Icode|visualParent}, it come handy the {{Icode|color} property to set a transparent color to the clickable area to close the menu.
 +
Changing {{Icode|StarItem visible}} property, makes all {{Icode|StarItem}s position recalculated with only visible items.
 +
 
  
 
<code java>
 
<code java>
Line 57: Line 104:
 
[[File:StarMenu_rotation_scale_delayed_animation.jpg|x220px|rotation scale delayed animation]]  
 
[[File:StarMenu_rotation_scale_delayed_animation.jpg|x220px|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.
+
It is possible to bind animations to {{Icode|StarItem}}s. When a {{Icode|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:
 
By doing this:
  
Line 69: Line 116:
  
 
StarItems are animated from center to their final position.  
 
StarItems are animated from center to their final position.  
StarMenu can also have a rotation animation:
 
 
<code java>
 
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 } }
 
      […]
 
</code>
 
  
 
StarMenu has also a {{Icode|delayChangePos}} property. For example, when it is set to 100, the animation of the second {{Icode|StarItem}} is started after 100 ms, the third after 200 ms and so on. {{Icode|StarItem}} has also a {{Icode|delayChangePos}} property and if it is set, it take priority over the {{Icode|StarMenu delayChangePos}} property.  
 
StarMenu has also a {{Icode|delayChangePos}} property. For example, when it is set to 100, the animation of the second {{Icode|StarItem}} is started after 100 ms, the third after 200 ms and so on. {{Icode|StarItem}} has also a {{Icode|delayChangePos}} property and if it is set, it take priority over the {{Icode|StarMenu delayChangePos}} property.  
Line 106: Line 139:
 
[[File:StarMenu_shapes.jpg|x220px|other shapes]]  
 
[[File:StarMenu_shapes.jpg|x220px|other shapes]]  
  
{{Icode|StarItems}}s can be arranged in a {{Icode|spiral shape}} or a {{Icode|grid shape}}.  
+
{{Icode|StarItems}}s can be arranged in a {{Icode|spiral shape}}, in a {{Icode|grid shape}} or in a {{Icode|line shape}}.  
The {{Icode|StarMenu}} {{Icode|shape}} property could have the following values:  
+
{{Icode|StarMenu}} {{Icode|shape}} property could have the following values:  
  
 
* {{Icode|StarMenu.ShapeCircle}} (default value)
 
* {{Icode|StarMenu.ShapeCircle}} (default value)
 
* {{Icode|StarMenu.ShapeGrid}}
 
* {{Icode|StarMenu.ShapeGrid}}
 
* {{Icode|StarMenu.ShapeSpiral}}
 
* {{Icode|StarMenu.ShapeSpiral}}
 +
* {{Icode|StarMenu.ShapeLine}}
  
  
Rows in grid shape are aligned centered and are spaced by {{Icode|spacingH}} and {{Icode|spacingV}} properties with columns count defined by {{Icode|'columns}} property.
+
Rows in grid shape are arranged centered by the mouse click and are spaced by {{Icode|spacingH}} and {{Icode|spacingV}} properties with columns count defined by {{Icode|columns} property. Spiral shape takes care of {{Icode|startingRadius}} value to start drawing StarItems and {{Icode|radiusIncrement}} property to shape the spiral. Line shape has a {{Icode|startingAngle}}, {{Icode|radiusIncrement}} and {{Icode|startingRadius}} properties.
Spiral shape take care of {{Icode|radius}} value to start drawing {{Icode|StarItems}}s and {{Icode|radiusIncrement}} property to shape the spiral.  
+
  
{{#ev:youtube|-y8boYYCsc4}}
+
StarMenu has the center where user clicks. This centerproperty can be defined everywhere in scene coordinates by setting {{Icode|center}} property.
 +
 
 +
{{#ev:youtube|Z54zgOod0P0}}
  
 
== Properties & signals ==
 
== Properties & signals ==
Line 125: Line 160:
 
'''Properties'''
 
'''Properties'''
  
* {{Icode|rootMenu}}: bool
+
* {{Icode|center}}: point
* {{Icode|shape}}: enum ShapeKind { ShapeCircle, ShapeGrid, ShapeSpiral }
+
* {{Icode|color}}: color
 +
* {{Icode|columns}}: int
 +
* {{Icode|delayChangePos}}: int
 +
* {{Icode|open}}: bool
 +
* {{Icode|radiusH}}: qreal
 +
* {{Icode|radiusV}}: qreal
 +
* {{Icode|rotation}}: qreal
 +
* {{Icode|radiusIncrement}}: qreal
 +
* {{Icode|shape}}: enumeration
 
* {{Icode|spacingH}}: qreal
 
* {{Icode|spacingH}}: qreal
 
* {{Icode|spacingV}}: qreal
 
* {{Icode|spacingV}}: qreal
* {{Icode|columns}}: int
+
* {{Icode|startingAngle}}: qreal
* {{Icode|radius}}: qreal
+
* {{Icode|radiusIncrement}}: qreal
+
 
* {{Icode|starCenterVisible}}: bool
 
* {{Icode|starCenterVisible}}: bool
 +
* {{Icode|startingRadius}}: qreal
 
* {{Icode|useParentMenuCenter}}: bool
 
* {{Icode|useParentMenuCenter}}: bool
* {{Icode|delayChangePos}}: int
+
* {{Icode|visualParent}}: Item
 
+
  
 
'''Signals'''
 
'''Signals'''
* {{Icode|starMenuOpening}}
 
* {{Icode|starMenuClosing}}
 
  
=== StarItem ===
+
* {{Icode|StarMenu::starMenuOpening()}}
 +
* {{Icode|StarMenu::starMenuClosing()}}
 +
 
 +
 
 +
=== '''StarItem''' ===
  
 
'''Properties'''
 
'''Properties'''
 +
 
* {{Icode|zoomHoverValue}}: qreal
 
* {{Icode|zoomHoverValue}}: qreal
 
* {{Icode|delayChangePos}}: int
 
* {{Icode|delayChangePos}}: int
 
  
 
'''Signals'''
 
'''Signals'''
* {{Icode|hoverItem}}
 
* {{Icode|leaveItem}}
 
* {{Icode|clicked}}
 
  
== Lacks & Notes ==
+
* {{Icode|StarItem::hoverItem()}}
 +
* {{Icode|StarItem::leaveItem()}}
 +
* {{Icode|StarItem::clicked()}}
  
The plugin can currently only manage only one {{Icode|StarMenu}} at a time and {{icode|rootMenu}} property should be defined for the main {{Icode|StarMenu}} as shown below:
 
  
<code java>
+
== Downloads ==
StarMenu {
+
      id: starMenu
+
      Component.onCompleted: starMenu.rootMenu = true;
+
</code>
+
  
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.[[Category:MeeGo]] [[Category:Symbian]]
+
[https://projects.developer.nokia.com/starmenu StarMenu project]

Revision as of 19:37, 25 March 2012

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
Compatibility
Platform(s): Symbian^3 and later, Harmattan, linux, Windows
Symbian
Device(s): all with touch screen
Article
Keywords: Menu, QDeclarativeItem, StarMenu
Created: lildeimos (18 Dec 2011)
Last edited: lildeimos (25 Mar 2012)

Contents

Introduction

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

Usage

Note for Harmattan: .pro must contains this:

contains(MEEGO_EDITION,harmattan) { DEFINES += MEEGO_EDITION_HARMATTAN QT += dbus }

To compile and install the plugin, just do:

qmake
make
make install

then in your .qml you will need to

import com.starMenu 1.0

To compile within your project: copy staritem.* and starmenu.* in your project directory and add them to the .pro file. Then in the main.cpp include the headers:

    #include "starmenu.h"
#include "staritem.h"

and before setSource() or setMainQmlFile() register the component with:

    qmlRegisterType<StarMenu>("StarMenu", 1, 0, "StarMenu");
qmlRegisterType<StarItem>("StarMenu", 1, 0, "StarItem");

then, in your .qml file, you will be able to:

    import StarMenu 1.0


two sub menus

The StarMenu component displays a contextual menu in a declarative user interface.

StarMenu is hidden by default and opens in response to a user action. The purpose of StarMenu is to manage all StarItem childs. By default they are arrange in a circle shape and, in the center of it, it is painted a star polygon shape with as many spikes as the number of StarItems. It can be visible or not by setting the boolean starCenterVisible property. The circle shape amplitude is given by {{Icode|radiusH} and {{Icode|radiusV} properties. Clicking on the center of the current menu, will close it and goes back to parent. It's possible to click on the center of the first menu to close all. visualParent property is used to bind the close menu action to a specified item, so, instead of clicking on center of {{Icode|StarMenu}, it's possible to set {{Icode|visualParent} to the main window and close menu everywhere on the screen. When using {{Icode|visualParent}, it come handy the {{Icode|color} property to set a transparent color to the clickable area to close the menu. Changing StarItem visible property, makes all {{Icode|StarItem}s position recalculated with only visible items.


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 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, in a grid shape or in a line shape. StarMenu shape property could have the following values:

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


Rows in grid shape are arranged centered by the mouse click and are spaced by spacingH and spacingV properties with columns count defined by {{Icode|columns} property. Spiral shape takes care of startingRadius value to start drawing StarItems and radiusIncrement property to shape the spiral. Line shape has a startingAngle, radiusIncrement and startingRadius properties.

StarMenu has the center where user clicks. This centerproperty can be defined everywhere in scene coordinates by setting center property.


Properties & signals

StarMenu

Properties

  • center: point
  • color: color
  • columns: int
  • delayChangePos: int
  • open: bool
  • radiusH: qreal
  • radiusV: qreal
  • rotation: qreal
  • radiusIncrement: qreal
  • shape: enumeration
  • spacingH: qreal
  • spacingV: qreal
  • startingAngle: qreal
  • starCenterVisible: bool
  • startingRadius: qreal
  • useParentMenuCenter: bool
  • visualParent: Item

Signals

  • StarMenu::starMenuOpening()
  • StarMenu::starMenuClosing()


StarItem

Properties

  • zoomHoverValue: qreal
  • delayChangePos: int

Signals

  • StarItem::hoverItem()
  • StarItem::leaveItem()
  • StarItem::clicked()


Downloads

StarMenu project

395 page views in the last 30 days.
×