Transcript QML - Magnifier 3D

QML
• Qt Quick with QML and you can use JavaScript
for engine along C++
• Started to be released since late 2009 (Qt 4.7)
• Nokia focused on that for the Symbian/Meego
phone and future smartphone development
• Support on QtCreator
• JavaScript-based declarative Components
• Sub classing QDeclerativeItem
QML
Syntax for QML business logic code (in main.cpp):
QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile(QLatin1String("example.qml"));
viewer.showExpanded();
Rectangle {
id: myRect
property string text
width: 75; height: 50 radius: 6
color: "#646464" border.width: 4; border.color: "white"
MouseArea {
anchors.fill: parent hoverEnabled: true onEntered: {
focusRect.x = myRect.x;
focusRect.y = myRect.y;
focusRect.text = myRect.text; } } }
QML (.qml)
QML
QML typical button:
import QtQuick 1.0
Image {
source: "quit.png"
scale: quitMouse.pressed ? 0.8 : 1.0
smooth: quitMouse.pressed
MouseArea {
id: quitMouse
anchors.fill: parent
anchors.margins: -10
onClicked: Qt.quit()
}
}
QML
The generic form of the various imports are as follows:
import Namespace VersionMajor.VersionMinor
import Namespace VersionMajor.VersionMinor as SingletonTypeIdentifier
import "directory"
import "file.js" as ScriptIdentifier
Examples:
import QtQuick 2.0
import QtQuick.LocalStorage 2.0 as Database
import "../privateComponents"
import "somefile.js" as Script
QML
• Animations
• Easing Curves
• Animation Groups
Animations
Handle form factor changes
• Outline application state changes
• Orchestrate high level logic
• Natural transitions
• Our brain expects movement
• Helps the user find its way
around the GUI
Animations
Animations update properties to cause a visual change
• Animations are property animations, and animation types:
• NumberAnimation for changes to numeric properties
• ColorAnimation for changes to color properties
• RotationAnimation for changes to orientation of items
• Vector3dAnimation for motion in 3D space
• Easing curves are used to create variable speed animations
• Animations are used to create visual effects
Animations
import QtQuick 2.0
• Applied directly to properties with the on keyword
Rectangle {
• The y property is changed by the NumberAnimation
width: 400; height: 400
• starts at 350 and ends at 150
color: "lightblue"
• takes 1000 milliseconds
Image {
x: 220
source: "../images/backbutton.png"
NumberAnimation on y {
from: 350; to: 150
duration: 1000
}
}
}
Animations
Animations can be performed sequentially and in parallel
• SequentialAnimation defines a sequence
• with each child animation run in sequence (Example: a
rescaling animation, followed by an opacity changing animation)
• ParallelAnimation defines a parallel group
• with all child animations run at the same time (Example:
simultaneous rescaling and opacity changing animations
Sequential and parallel animations can be nested)
Animations
Image
{
id: rocket
anchors.centerIn: parent
source: "../images/rocket.png“
}
SequentialAnimation {
NumberAnimation {
target: rocket; properties: "scale"
from: 1.0; to: 0.5; duration: 1000
}
NumberAnimation {
target: rocket; properties: "opacity"
from: 1.0; to: 0.0; duration: 1000
}
running: true
}
Animations
Other animations
• ColorAnimation for changes to color properties
• RotationAnimation for changes to orientation of items
• Vector3dAnimation for motion in 3D space
• AnchorAnimation animate an anchor change
• ParentAnimation animates changes in parent values.
• SpringAnimation allows a property to track a value in a spring-like
motion
• PropertyAction the PropertyAction element allows immediate property
changes during animation
• ScriptAction allows scripts to be run during an animation
Qt Quick
Using Qt Quick, the business logic and everything critical to
performance can be implemented using C++.
The user interface is implemented using QML ( The idea is for
QML to be a language that is designed for handling many objects
in a setting where many states and transitions between states
need to be handled).
QML, the language for building Qt Quick-based user interfaces
QtDeclarative Qt module. It contains classes for executing QML
(an engine, a context and a view) It also contains bindings for
QML and mechanisms for integrating C++ and QML.
Qt Quick - Components
The most commonly used components are:
Item: Basic visual object type inherited by visual object types
Rectangle: A rectangle type
Image : For incorporating bitmaps into a scene
BorderImage: Allows the use of images as borders
AnimatedImage: Playing animations stored as an animated gif
AnimatedSprite: Playing animations stored as a series of frames
SpriteSequence - Playing and transitioning between multiple
animations stored as a series of frames
Text - For inserting formatted text into a scene
Window - Provides a top-level window
Qt Quick - Properties
For all the basic elements, a range of common properties
• For placement and size, use x, y, width and height
• The color and opacity can be controlled
• The element can be shown or hidden
• It can be transformed, e.g. scaled and rotated
• Also id property and the parent property
• Anchor layout as well as Grid, Row and Column for layout
•
Qt Quick – Vidual Item Utils
Visual Item Utility
• Accessible - Attached property to make components accessible
• Gradient - For defining a color gradient
• GradientStop - Used to define a color within a Gradient
• SystemPalette - Provides access to the Qt palettes
• Screen - Provides information about the screen on which
an Item is displayed
• Sprite - Specifies sprite animations for other Items to display
• FontLoader - Loads fonts by name or URL
Qt Quick- Visual Items
Visual Item Generation
• Repeater - Uses a model to create multiple Item instances
• Loader - Eases on-demand loading of Items
Visual Item Transformations
• Transform - Allows specification of advanced transformations
on Items
• Scale - Assigns item scaling behaviors
• Rotation - Assigns item rotation behaviors
• Translate - Assigns item translation behaviors
Qt Quick - User Input
MouseArea - Sets up an area for mouse interaction
Keys - Provides components with attached properties to handle
key input.
KeyNavigation - Supports key navigation by arrow keys
FocusScope - Mediates keyboard focus changes
Flickable - Provides a surface that can be "flicked"
PinchArea - Enables simple pinch gesture handling
MultiPointTouchArea - Enables handling of multiple touch points
Drag - For specifying drag and drop events for visual items
DropArea - For specifying drag and drop event handling in an area
TextInput - Captures user key input
TextEdit - Displays multiple lines of editable formatted text
Interaction
Interaction is handled through areas.
• The MouseArea accepts mouse events
• The GestureArea accepts gestures. Notice that gestures are
based on touch events. Some touch based devices with singlepoint touch might only report mouse events. In this case,
gestures do not work. Keyboard events are handled through
the focus concept, where the item with focus receives key
events.