summaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
Diffstat (limited to 'examples')
-rw-r--r--examples/declarative/dynamic/dynamic.qml193
-rw-r--r--examples/declarative/dynamic/qml/Button.qml36
-rw-r--r--examples/declarative/dynamic/qml/GenericItem.qml13
-rw-r--r--examples/declarative/dynamic/qml/PaletteItem.qml16
-rw-r--r--examples/declarative/dynamic/qml/PerspectiveItem.qml29
-rw-r--r--examples/declarative/dynamic/qml/Sun.qml32
-rw-r--r--examples/declarative/dynamic/qml/itemCreation.js58
7 files changed, 206 insertions, 171 deletions
diff --git a/examples/declarative/dynamic/dynamic.qml b/examples/declarative/dynamic/dynamic.qml
index 0e6e197..52c7c1e 100644
--- a/examples/declarative/dynamic/dynamic.qml
+++ b/examples/declarative/dynamic/dynamic.qml
@@ -4,44 +4,49 @@ import "qml"
Item {
id: window
+
+ property int activeSuns: 0
+
//This is a desktop-sized example
width: 1024; height: 512
- property int activeSuns: 0
- //This is the message that pops up when there's an error
- Rectangle{
+ //This is the message box that pops up when there's an error
+ Rectangle {
id: dialog
+
opacity: 0
anchors.centerIn: parent
- width: dialogText.width + 6
- height: dialogText.height + 6
+ width: dialogText.width + 6; height: dialogText.height + 6
border.color: 'black'
color: 'lightsteelblue'
z: 65535 //Arbitrary number chosen to be above all the items, including the scaled perspective ones.
+
function show(str){
dialogText.text = str;
dialogAnim.start();
}
- Text{
+
+ Text {
id: dialogText
- x:3
- y:3
+ x: 3; y: 3
font.pixelSize: 14
}
- SequentialAnimation{
+
+ SequentialAnimation {
id: dialogAnim
- NumberAnimation{target: dialog; property:"opacity"; to: 1; duration: 1000}
- PauseAnimation{duration: 5000}
- NumberAnimation{target: dialog; property:"opacity"; to: 0; duration: 1000}
+ NumberAnimation { target: dialog; property:"opacity"; to: 1; duration: 1000 }
+ PauseAnimation { duration: 5000 }
+ NumberAnimation { target: dialog; property:"opacity"; to: 0; duration: 1000 }
}
}
// sky
- Rectangle { id: sky
+ Rectangle {
+ id: sky
anchors { left: parent.left; top: parent.top; right: toolbox.right; bottom: parent.verticalCenter }
gradient: Gradient {
- GradientStop { id: stopA; position: 0.0; color: "#0E1533" }
- GradientStop { id: stopB; position: 1.0; color: "#437284" }
+ GradientStop { id: gradientStopA; position: 0.0; color: "#0E1533" }
+ GradientStop { id: gradientStopB; position: 1.0; color: "#437284" }
}
}
@@ -49,109 +54,123 @@ Item {
Particles {
id: stars
x: 0; y: 0; width: parent.width; height: parent.height / 2
- source: "images/star.png"; angleDeviation: 360; velocity: 0
- velocityDeviation: 0; count: parent.width / 10; fadeInDuration: 2800
+ source: "images/star.png"
+ angleDeviation: 360
+ velocity: 0; velocityDeviation: 0
+ count: parent.width / 10
+ fadeInDuration: 2800
opacity: 1
}
- // ground, which has a z such that the sun can set behind it
+ // ground
Rectangle {
id: ground
- z: 2
- anchors { left: parent.left; top: parent.verticalCenter; right: toolbox.right; bottom: parent.bottom }
+ z: 2 // just above the sun so that the sun can set behind it
+ anchors { left: parent.left; top: parent.verticalCenter; right: toolbox.left; bottom: parent.bottom }
gradient: Gradient {
GradientStop { position: 0.0; color: "ForestGreen" }
GradientStop { position: 1.0; color: "DarkGreen" }
}
}
- //Day state, for when you place a sun
- states: State {
- name: "Day"; when: window.activeSuns > 0
- PropertyChanges { target: stopA; color: "DeepSkyBlue"}
- PropertyChanges { target: stopB; color: "SkyBlue"}
- PropertyChanges { target: stars; opacity: 0 }
- }
-
- transitions: Transition {
- PropertyAnimation { duration: 3000 }
- ColorAnimation { duration: 3000 }
- }
-
SystemPalette { id: activePalette }
- // toolbox
+ // right-hand panel
Rectangle {
id: toolbox
- z: 3 //Above ground
- color: activePalette.window;
+
width: 480
- anchors { right: parent.right; top:parent.top; bottom: parent.bottom }
- Rectangle { //Not a child of any positioner
- border.color: "black";
- width: toolRow.width + 4
- height: toolRow.height + 4
- x: toolboxPositioner.x + toolRow.x - 2
- y: toolboxPositioner.y + toolRow.y - 2
- }
+ color: activePalette.window
+ anchors { right: parent.right; top: parent.top; bottom: parent.bottom }
+
Column {
- id: toolboxPositioner
anchors.centerIn: parent
spacing: 8
+
Text { text: "Drag an item into the scene." }
- Row {
- id: toolRow
- spacing: 8;
- PaletteItem {
- anchors.verticalCenter: parent.verticalCenter
- file: "Sun.qml";
- image: "../images/sun.png"
- }
- PaletteItem {
- file: "GenericItem.qml"
- image: "../images/moon.png"
- }
- PaletteItem {
- anchors.verticalCenter: parent.verticalCenter
- file: "PerspectiveItem.qml"
- image: "../images/tree_s.png"
- }
- PaletteItem {
- anchors.verticalCenter: parent.verticalCenter
- file: "PerspectiveItem.qml"
- image: "../images/rabbit_brown.png"
- }
- PaletteItem {
- anchors.verticalCenter: parent.verticalCenter
- file: "PerspectiveItem.qml"
- image: "../images/rabbit_bw.png"
+
+ Rectangle {
+ width: childrenRect.width + 10; height: childrenRect.height + 10
+ border.color: "black"
+
+ Row {
+ anchors.centerIn: parent
+ spacing: 8
+
+ PaletteItem {
+ anchors.verticalCenter: parent.verticalCenter
+ componentFile: "Sun.qml"
+ image: "../images/sun.png"
+ }
+ PaletteItem {
+ anchors.verticalCenter: parent.verticalCenter
+ componentFile: "GenericSceneItem.qml"
+ image: "../images/moon.png"
+ }
+ PaletteItem {
+ anchors.verticalCenter: parent.verticalCenter
+ componentFile: "PerspectiveItem.qml"
+ image: "../images/tree_s.png"
+ }
+ PaletteItem {
+ anchors.verticalCenter: parent.verticalCenter
+ componentFile: "PerspectiveItem.qml"
+ image: "../images/rabbit_brown.png"
+ }
+ PaletteItem {
+ anchors.verticalCenter: parent.verticalCenter
+ componentFile: "PerspectiveItem.qml"
+ image: "../images/rabbit_bw.png"
+ }
}
}
+
Text { text: "Active Suns: " + activeSuns }
- Rectangle { width: 440; height: 1; color: "black" }
- Text { text: "Arbitrary QML: " }
- TextEdit {
- id: qmlText
- width: 460
- height: 220
- readOnly: false
- focusOnPress: true
- font.pixelSize: 14
-
- text: "import Qt 4.7\nImage {\n id: smile;\n x: 500*Math.random();\n y: 200*Math.random(); \n source: 'images/face-smile.png';\n NumberAnimation on opacity { \n to: 0; duration: 1500;\n }\n Component.onCompleted: smile.destroy(1500);\n}"
+
+ Rectangle { width: parent.width; height: 1; color: "black" }
+
+ Text { text: "Arbitrary QML:" }
+
+ Rectangle {
+ width: 460; height: 240
+
+ TextEdit {
+ id: qmlText
+ anchors.fill: parent; anchors.margins: 5
+ readOnly: false
+ focusOnPress: true
+ font.pixelSize: 14
+
+ text: "import Qt 4.7\nImage {\n id: smile\n x: 500 * Math.random()\n y: 200 * Math.random() \n source: 'images/face-smile.png'\n\n NumberAnimation on opacity { \n to: 0; duration: 1500\n }\n\n Component.onCompleted: smile.destroy(1500);\n}"
+ }
}
+
Button {
text: "Create"
- function makeCustom() {
- try{
+ onClicked: {
+ try {
Qt.createQmlObject(qmlText.text, window, 'CustomObject');
- }catch(err){
- dialog.show('Error on line ' + err.qmlErrors[0].lineNumber + '\n' + err.qmlErrors[0].message );
+ } catch(err) {
+ dialog.show('Error on line ' + err.qmlErrors[0].lineNumber + '\n' + err.qmlErrors[0].message);
}
}
- onClicked: makeCustom();
}
}
}
+ //Day state, for when a sun is added to the scene
+ states: State {
+ name: "Day"
+ when: window.activeSuns > 0
+
+ PropertyChanges { target: gradientStopA; color: "DeepSkyBlue" }
+ PropertyChanges { target: gradientStopB; color: "SkyBlue" }
+ PropertyChanges { target: stars; opacity: 0 }
+ }
+
+ transitions: Transition {
+ PropertyAnimation { duration: 3000 }
+ ColorAnimation { duration: 3000 }
+ }
+
}
diff --git a/examples/declarative/dynamic/qml/Button.qml b/examples/declarative/dynamic/qml/Button.qml
index 53588bb..963a850 100644
--- a/examples/declarative/dynamic/qml/Button.qml
+++ b/examples/declarative/dynamic/qml/Button.qml
@@ -6,19 +6,35 @@ Rectangle {
property variant text
signal clicked
- SystemPalette { id: activePalette }
- height: text.height + 10
- width: text.width + 20
+ height: text.height + 10; width: text.width + 20
border.width: 1
- radius: 4; smooth: true
+ radius: 4
+ smooth: true
+
gradient: Gradient {
- GradientStop { position: 0.0;
- color: if(!mr.pressed){activePalette.light;}else{activePalette.button;}
+ GradientStop {
+ position: 0.0
+ color: !mouseArea.pressed ? activePalette.light : activePalette.button
}
- GradientStop { position: 1.0;
- color: if(!mr.pressed){activePalette.button;}else{activePalette.dark;}
+ GradientStop {
+ position: 1.0
+ color: !mouseArea.pressed ? activePalette.button : activePalette.dark
}
}
- MouseArea { id:mr; anchors.fill: parent; onClicked: container.clicked() }
- Text { id: text; anchors.centerIn:parent; font.pointSize: 10; text: parent.text; color: activePalette.buttonText }
+
+ SystemPalette { id: activePalette }
+
+ MouseArea {
+ id: mouseArea
+ anchors.fill: parent
+ onClicked: container.clicked()
+ }
+
+ Text {
+ id: text
+ anchors.centerIn:parent
+ font.pointSize: 10
+ text: parent.text
+ color: activePalette.buttonText
+ }
}
diff --git a/examples/declarative/dynamic/qml/GenericItem.qml b/examples/declarative/dynamic/qml/GenericItem.qml
deleted file mode 100644
index faac06d..0000000
--- a/examples/declarative/dynamic/qml/GenericItem.qml
+++ /dev/null
@@ -1,13 +0,0 @@
-import Qt 4.7
-
-Item{
- property bool created: false
- property string image
- width: imageItem.width
- height: imageItem.height
- z: 2
- Image{
- id: imageItem
- source: image;
- }
-}
diff --git a/examples/declarative/dynamic/qml/PaletteItem.qml b/examples/declarative/dynamic/qml/PaletteItem.qml
index e8f2ed4..dcb5cc3 100644
--- a/examples/declarative/dynamic/qml/PaletteItem.qml
+++ b/examples/declarative/dynamic/qml/PaletteItem.qml
@@ -1,13 +1,19 @@
import Qt 4.7
import "itemCreation.js" as Code
-GenericItem {
- id: itemButton
- property string file
+Image {
+ id: paletteItem
+
+ property string componentFile
+ property string image
+
+ source: image
+
MouseArea {
- anchors.fill: parent;
+ anchors.fill: parent
+
onPressed: Code.startDrag(mouse);
- onPositionChanged: Code.moveDrag(mouse);
+ onPositionChanged: Code.continueDrag(mouse);
onReleased: Code.endDrag(mouse);
}
}
diff --git a/examples/declarative/dynamic/qml/PerspectiveItem.qml b/examples/declarative/dynamic/qml/PerspectiveItem.qml
index 3cbe64a..c04d3dc 100644
--- a/examples/declarative/dynamic/qml/PerspectiveItem.qml
+++ b/examples/declarative/dynamic/qml/PerspectiveItem.qml
@@ -1,16 +1,25 @@
import Qt 4.7
Image {
- id: tree
+ id: rootItem
+
property bool created: false
- property double scaleFactor: Math.max((y+height-250)*0.01, 0.3)
- property double scaledBottom: y + (height+height*scaleFactor)/2
- property bool onLand: scaledBottom > window.height/2
- property string image //Needed for compatibility with GenericItem
+ property string image
+
+ property double scaledBottom: y + (height + height*scale) / 2
+ property bool onLand: scaledBottom > window.height / 2
+
+ source: image
opacity: onLand ? 1 : 0.25
- onCreatedChanged: if (created && !onLand) { tree.destroy() } else { z = scaledBottom }
- scale: scaleFactor
- transformOrigin: "Center"
- source: image; smooth: true
- onYChanged: z = scaledBottom
+ scale: Math.max((y + height - 250) * 0.01, 0.3)
+ smooth: true
+
+ onCreatedChanged: {
+ if (created && !onLand)
+ rootItem.destroy();
+ else
+ z = scaledBottom;
+ }
+
+ onYChanged: z = scaledBottom;
}
diff --git a/examples/declarative/dynamic/qml/Sun.qml b/examples/declarative/dynamic/qml/Sun.qml
index 3627964..43dcb9a 100644
--- a/examples/declarative/dynamic/qml/Sun.qml
+++ b/examples/declarative/dynamic/qml/Sun.qml
@@ -2,23 +2,37 @@ import Qt 4.7
Image {
id: sun
+
property bool created: false
property string image: "../images/sun.png"
- onCreatedChanged: if(created){window.activeSuns++;}else{window.activeSuns--;}
- source: image;
- z: 1
+ source: image
- //x and y get set when instantiated
- //head offscreen
+ // once item is created, start moving offscreen
NumberAnimation on y {
- to: window.height / 2;
+ to: window.height / 2
running: created
- onRunningChanged: if (running) duration = (window.height - sun.y) * 10; else state = "OffScreen";
+ onRunningChanged: {
+ if (running)
+ duration = (window.height - sun.y) * 10;
+ else
+ state = "OffScreen"
+ }
}
states: State {
- name: "OffScreen";
- StateChangeScript { script: { sun.created = false; sun.destroy() } }
+ name: "OffScreen"
+ StateChangeScript {
+ script: { sun.created = false; sun.destroy() }
+ }
+ }
+
+ onCreatedChanged: {
+ if (created) {
+ sun.z = 1; // above the sky but below the ground layer
+ window.activeSuns++;
+ } else {
+ window.activeSuns--;
+ }
}
}
diff --git a/examples/declarative/dynamic/qml/itemCreation.js b/examples/declarative/dynamic/qml/itemCreation.js
index 3c1b975..92d345d 100644
--- a/examples/declarative/dynamic/qml/itemCreation.js
+++ b/examples/declarative/dynamic/qml/itemCreation.js
@@ -1,54 +1,39 @@
var itemComponent = null;
var draggedItem = null;
var startingMouse;
-var startingZ;
-//Until QT-2385 is resolved we need to convert to scene coordinates manually
-var xOffset;
-var yOffset;
-function setSceneOffset()
-{
- xOffset = 0;
- yOffset = 0;
- var p = itemButton;
- while(p != window){
- xOffset += p.x;
- yOffset += p.y;
- p = p.parent;
- }
-}
+var posnInWindow;
function startDrag(mouse)
{
- setSceneOffset();
+ posnInWindow = paletteItem.mapToItem(null, 0, 0);
startingMouse = { x: mouse.x, y: mouse.y }
loadComponent();
}
-//Creation is split into two functions due to an asyncronous wait while
+//Creation is split into two functions due to an asynchronous wait while
//possible external files are loaded.
function loadComponent() {
- if (itemComponent != null) //Already loaded the component
+ if (itemComponent != null) { // component has been previously loaded
createItem();
+ return;
+ }
- itemComponent = Qt.createComponent(itemButton.file);
- //console.log(itemButton.file)
- if(itemComponent.status == Component.Loading){
- component.statusChanged.connect(finishCreation);
- }else{//Depending on the content, it can be ready or error immediately
+ itemComponent = Qt.createComponent(paletteItem.componentFile);
+ if (itemComponent.status == Component.Loading) //Depending on the content, it can be ready or error immediately
+ component.statusChanged.connect(createItem);
+ else
createItem();
- }
}
function createItem() {
if (itemComponent.status == Component.Ready && draggedItem == null) {
draggedItem = itemComponent.createObject();
draggedItem.parent = window;
- draggedItem.image = itemButton.image;
- draggedItem.x = xOffset;
- draggedItem.y = yOffset;
- startingZ = draggedItem.z;
- draggedItem.z = 4;//On top
+ draggedItem.image = paletteItem.image;
+ draggedItem.x = posnInWindow.x;
+ draggedItem.y = posnInWindow.y;
+ draggedItem.z = 3; // make sure created item is above the ground layer
} else if (itemComponent.status == Component.Error) {
draggedItem = null;
console.log("error creating component");
@@ -56,25 +41,24 @@ function createItem() {
}
}
-function moveDrag(mouse)
+function continueDrag(mouse)
{
- if(draggedItem == null)
+ if (draggedItem == null)
return;
- draggedItem.x = mouse.x + xOffset - startingMouse.x;
- draggedItem.y = mouse.y + yOffset - startingMouse.y;
+ draggedItem.x = mouse.x + posnInWindow.x - startingMouse.x;
+ draggedItem.y = mouse.y + posnInWindow.y - startingMouse.y;
}
function endDrag(mouse)
{
- if(draggedItem == null)
+ if (draggedItem == null)
return;
- if(draggedItem.x + draggedItem.width > toolbox.x){ //Don't drop it in the toolbox
+ if (draggedItem.x + draggedItem.width > toolbox.x) { //Don't drop it in the toolbox
draggedItem.destroy();
draggedItem = null;
- }else{
- draggedItem.z = startingZ;
+ } else {
draggedItem.created = true;
draggedItem = null;
}
generated by cgit v0.12 at 2024-11-14 06:56:30 (GMT)