From a15e6415e44f113414eab17beaafd01b06ce4e3d Mon Sep 17 00:00:00 2001 From: Alan Alpert Date: Thu, 19 Jan 2012 15:59:59 +1000 Subject: Svelte new form for dynamic scene example Change-Id: Ic6a3616ea06c8085e6ccd7e3e13566f36aadcc0f Reviewed-by: Martin Jones --- .../toys/dynamicscene/content/PerspectiveItem.qml | 2 +- .../declarative/toys/dynamicscene/content/Sun.qml | 4 +- .../toys/dynamicscene/content/itemCreation.js | 2 +- .../declarative/toys/dynamicscene/dynamicscene.qml | 77 ++++++++++++++++------ 4 files changed, 61 insertions(+), 24 deletions(-) diff --git a/examples/declarative/toys/dynamicscene/content/PerspectiveItem.qml b/examples/declarative/toys/dynamicscene/content/PerspectiveItem.qml index f3e0bb8361..33d4a38a91 100644 --- a/examples/declarative/toys/dynamicscene/content/PerspectiveItem.qml +++ b/examples/declarative/toys/dynamicscene/content/PerspectiveItem.qml @@ -47,7 +47,7 @@ Image { property string image property double scaledBottom: y + (height + height*scale) / 2 - property bool onLand: scaledBottom > window.height / 2 + property bool onLand: scaledBottom > (window.height / 2 + window.centerOffset) source: image opacity: onLand ? 1 : 0.25 diff --git a/examples/declarative/toys/dynamicscene/content/Sun.qml b/examples/declarative/toys/dynamicscene/content/Sun.qml index 7c41ba2a69..4652829936 100644 --- a/examples/declarative/toys/dynamicscene/content/Sun.qml +++ b/examples/declarative/toys/dynamicscene/content/Sun.qml @@ -50,11 +50,11 @@ Image { // once item is created, start moving offscreen NumberAnimation on y { - to: window.height / 2 + to: (window.height / 2) + window.centerOffset running: created onRunningChanged: { if (running) - duration = (window.height - sun.y) * 10; + duration = (window.height + window.centerOffset - sun.y) * 10; else state = "OffScreen" } diff --git a/examples/declarative/toys/dynamicscene/content/itemCreation.js b/examples/declarative/toys/dynamicscene/content/itemCreation.js index 4ee74c28c1..40f5415f9f 100644 --- a/examples/declarative/toys/dynamicscene/content/itemCreation.js +++ b/examples/declarative/toys/dynamicscene/content/itemCreation.js @@ -51,7 +51,7 @@ function endDrag(mouse) if (draggedItem == null) return; - if (draggedItem.x + draggedItem.width > toolbox.x) { //Don't drop it in the toolbox + if (draggedItem.y < toolbox.height) { //Don't drop it in the toolbox draggedItem.destroy(); draggedItem = null; } else { diff --git a/examples/declarative/toys/dynamicscene/dynamicscene.qml b/examples/declarative/toys/dynamicscene/dynamicscene.qml index daf784559a..54bbf61df8 100644 --- a/examples/declarative/toys/dynamicscene/dynamicscene.qml +++ b/examples/declarative/toys/dynamicscene/dynamicscene.qml @@ -46,9 +46,9 @@ Item { id: window property int activeSuns: 0 + property int centerOffset: 72 - //This is a desktop-sized example - width: 800; height: 480 + height: 480; width: 360 MouseArea { @@ -86,10 +86,16 @@ Item { } } - // sky + Item { + id: scene + anchors { top: sky.top; bottom: ground.bottom; left: parent.left; right: parent.right} + z: 10 + } + + // sky Rectangle { id: sky - anchors { left: parent.left; top: parent.top; right: toolbox.right; bottom: parent.verticalCenter } + anchors { left: parent.left; top: toolbox.bottom; right: parent.right; bottomMargin: -centerOffset; bottom: parent.verticalCenter } gradient: Gradient { GradientStop { id: gradientStopA; position: 0.0; color: "#0E1533" } GradientStop { id: gradientStopB; position: 1.0; color: "#437284" } @@ -121,7 +127,7 @@ Item { Rectangle { id: ground 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 } + anchors { left: parent.left; top: parent.verticalCenter; topMargin: centerOffset; right: parent.right; bottom: parent.bottom } gradient: Gradient { GradientStop { position: 0.0; color: "ForestGreen" } GradientStop { position: 1.0; color: "DarkGreen" } @@ -134,9 +140,9 @@ Item { Rectangle { id: toolbox - width: 380 + height: centerOffset * 2 color: activePalette.window - anchors { right: parent.right; top: parent.top; bottom: parent.bottom } + anchors { right: parent.right; top: parent.top; left: parent.left} Column { anchors.centerIn: parent @@ -187,10 +193,51 @@ Item { } Text { text: "Active Suns: " + activeSuns } + } + } + + //Popup toolbox down the bottom + Rectangle { + id: popupToolbox + z: 1000 + width: parent.width + height: popupColumn.height + 16 + color: activePalette.window + + property bool poppedUp: false + property int downY: window.height - (createButton.height + 16) + property int upY: window.height - (popupColumn.height + 16) + y: poppedUp ? upY : downY + Behavior on y { NumberAnimation {}} + + Column { + id: popupColumn + y: 8 + anchors.centerIn: parent + spacing: 8 - Rectangle { width: parent.width; height: 1; color: "black" } + Row { + height: createButton.height + spacing: 8 + Text { text: "Custom QML:"; anchors.verticalCenter: parent.verticalCenter } + Button { + id: popupButton + text: popupToolbox.poppedUp ? "Hide" : "Show" + onClicked: popupToolbox.poppedUp = !popupToolbox.poppedUp + } + Button { + id: createButton + text: "Create" + onClicked: { + try { + Qt.createQmlObject(qmlText.text, scene, 'CustomObject'); + } catch(err) { + dialog.show('Error on line ' + err.qmlErrors[0].lineNumber + '\n' + err.qmlErrors[0].message); + } + } + } - Text { text: "Arbitrary QML:" } + } Rectangle { width: 360; height: 240 @@ -200,22 +247,12 @@ Item { anchors.fill: parent; anchors.margins: 5 readOnly: false font.pixelSize: 14 + selectByMouse: true wrapMode: TextEdit.WordWrap text: "import QtQuick 2.0\nImage {\n id: smile\n x: 360 * Math.random()\n y: 180 * Math.random() \n source: 'content/images/face-smile.png'\n NumberAnimation on opacity { \n to: 0; duration: 1500\n }\n Component.onCompleted: smile.destroy(1500);\n}" } } - - Button { - text: "Create" - onClicked: { - try { - Qt.createQmlObject(qmlText.text, window, 'CustomObject'); - } catch(err) { - dialog.show('Error on line ' + err.qmlErrors[0].lineNumber + '\n' + err.qmlErrors[0].message); - } - } - } } } -- cgit v1.2.3