diff options
Diffstat (limited to 'examples/declarative/toys')
49 files changed, 1180 insertions, 0 deletions
diff --git a/examples/declarative/toys/clocks/clocks.qml b/examples/declarative/toys/clocks/clocks.qml new file mode 100644 index 0000000..22cf820 --- /dev/null +++ b/examples/declarative/toys/clocks/clocks.qml @@ -0,0 +1,14 @@ +import Qt 4.7 +import "content" + +Rectangle { + width: 640; height: 240 + color: "#646464" + + Row { + anchors.centerIn: parent + Clock { city: "New York"; shift: -4 } + Clock { city: "Mumbai"; shift: 5.5 } + Clock { city: "Tokyo"; shift: 9 } + } +} diff --git a/examples/declarative/toys/clocks/clocks.qmlproject b/examples/declarative/toys/clocks/clocks.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/toys/clocks/clocks.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/toys/clocks/content/Clock.qml b/examples/declarative/toys/clocks/content/Clock.qml new file mode 100644 index 0000000..3426e6a --- /dev/null +++ b/examples/declarative/toys/clocks/content/Clock.qml @@ -0,0 +1,83 @@ +import Qt 4.7 + +Item { + id: clock + width: 200; height: 230 + + property alias city: cityLabel.text + property variant hours + property variant minutes + property variant seconds + property variant shift : 0 + property bool night: false + + function timeChanged() { + var date = new Date; + hours = shift ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours() + night = ( hours < 7 || hours > 19 ) + minutes = shift ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes() + seconds = date.getUTCSeconds(); + } + + Timer { + interval: 100; running: true; repeat: true; triggeredOnStart: true + onTriggered: clock.timeChanged() + } + + Image { id: background; source: "clock.png"; visible: clock.night == false } + Image { source: "clock-night.png"; visible: clock.night == true } + + Image { + x: 92.5; y: 27 + source: "hour.png" + smooth: true + transform: Rotation { + id: hourRotation + origin.x: 7.5; origin.y: 73; angle: 0 + SpringFollow on angle { + spring: 2; damping: 0.2; modulus: 360 + to: (clock.hours * 30) + (clock.minutes * 0.5) + } + } + } + + Image { + x: 93.5; y: 17 + source: "minute.png" + smooth: true + transform: Rotation { + id: minuteRotation + origin.x: 6.5; origin.y: 83; angle: 0 + SpringFollow on angle { + spring: 2; damping: 0.2; modulus: 360 + to: clock.minutes * 6 + } + } + } + + Image { + x: 97.5; y: 20 + source: "second.png" + smooth: true + transform: Rotation { + id: secondRotation + origin.x: 2.5; origin.y: 80; angle: 0 + SpringFollow on angle { + spring: 5; damping: 0.25; modulus: 360 + to: clock.seconds * 6 + } + } + } + + Image { + anchors.centerIn: background; source: "center.png" + } + + Text { + id: cityLabel + y: 200; anchors.horizontalCenter: parent.horizontalCenter + color: "white" + font.bold: true; font.pixelSize: 14 + style: Text.Raised; styleColor: "black" + } +} diff --git a/examples/declarative/toys/clocks/content/background.png b/examples/declarative/toys/clocks/content/background.png Binary files differnew file mode 100644 index 0000000..a885950 --- /dev/null +++ b/examples/declarative/toys/clocks/content/background.png diff --git a/examples/declarative/toys/clocks/content/center.png b/examples/declarative/toys/clocks/content/center.png Binary files differnew file mode 100755 index 0000000..7fbd802 --- /dev/null +++ b/examples/declarative/toys/clocks/content/center.png diff --git a/examples/declarative/toys/clocks/content/clock-night.png b/examples/declarative/toys/clocks/content/clock-night.png Binary files differnew file mode 100755 index 0000000..cc7151a --- /dev/null +++ b/examples/declarative/toys/clocks/content/clock-night.png diff --git a/examples/declarative/toys/clocks/content/clock.png b/examples/declarative/toys/clocks/content/clock.png Binary files differnew file mode 100755 index 0000000..462edac --- /dev/null +++ b/examples/declarative/toys/clocks/content/clock.png diff --git a/examples/declarative/toys/clocks/content/hour.png b/examples/declarative/toys/clocks/content/hour.png Binary files differnew file mode 100755 index 0000000..f8061a1 --- /dev/null +++ b/examples/declarative/toys/clocks/content/hour.png diff --git a/examples/declarative/toys/clocks/content/minute.png b/examples/declarative/toys/clocks/content/minute.png Binary files differnew file mode 100755 index 0000000..1297ec7 --- /dev/null +++ b/examples/declarative/toys/clocks/content/minute.png diff --git a/examples/declarative/toys/clocks/content/second.png b/examples/declarative/toys/clocks/content/second.png Binary files differnew file mode 100755 index 0000000..4aa9fb5 --- /dev/null +++ b/examples/declarative/toys/clocks/content/second.png diff --git a/examples/declarative/toys/dial/content/Dial.qml b/examples/declarative/toys/dial/content/Dial.qml new file mode 100644 index 0000000..f9ab3e3 --- /dev/null +++ b/examples/declarative/toys/dial/content/Dial.qml @@ -0,0 +1,37 @@ +import Qt 4.7 + +Item { + id: root + property real value : 0 + + width: 210; height: 210 + + Image { source: "background.png" } + + Image { + x: 93 + y: 35 + source: "needle_shadow.png" + transform: Rotation { + origin.x: 11; origin.y: 67 + angle: needleRotation.angle + } + } + Image { + id: needle + x: 95; y: 33 + smooth: true + source: "needle.png" + transform: Rotation { + id: needleRotation + origin.x: 7; origin.y: 65 + angle: -130 + SpringFollow on angle { + spring: 1.4 + damping: .15 + to: Math.min(Math.max(-130, root.value*2.6 - 130), 133) + } + } + } + Image { x: 21; y: 18; source: "overlay.png" } +} diff --git a/examples/declarative/toys/dial/content/background.png b/examples/declarative/toys/dial/content/background.png Binary files differnew file mode 100644 index 0000000..75d555d --- /dev/null +++ b/examples/declarative/toys/dial/content/background.png diff --git a/examples/declarative/toys/dial/content/needle.png b/examples/declarative/toys/dial/content/needle.png Binary files differnew file mode 100644 index 0000000..2d19f75 --- /dev/null +++ b/examples/declarative/toys/dial/content/needle.png diff --git a/examples/declarative/toys/dial/content/needle_shadow.png b/examples/declarative/toys/dial/content/needle_shadow.png Binary files differnew file mode 100644 index 0000000..8d8a928 --- /dev/null +++ b/examples/declarative/toys/dial/content/needle_shadow.png diff --git a/examples/declarative/toys/dial/content/overlay.png b/examples/declarative/toys/dial/content/overlay.png Binary files differnew file mode 100644 index 0000000..3860a7b --- /dev/null +++ b/examples/declarative/toys/dial/content/overlay.png diff --git a/examples/declarative/toys/dial/dial-example.qml b/examples/declarative/toys/dial/dial-example.qml new file mode 100644 index 0000000..2e102b0 --- /dev/null +++ b/examples/declarative/toys/dial/dial-example.qml @@ -0,0 +1,44 @@ +import Qt 4.7 +import "content" + +Rectangle { + color: "#545454" + width: 300; height: 300 + + // Dial with a slider to adjust it + Dial { + id: dial + anchors.centerIn: parent + value: slider.x * 100 / (container.width - 34) + } + + Rectangle { + id: container + anchors { bottom: parent.bottom; left: parent.left; right: parent.right; leftMargin: 20; rightMargin: 20; bottomMargin: 10 } + height: 16 + + radius: 8 + opacity: 0.7 + smooth: true + gradient: Gradient { + GradientStop { position: 0.0; color: "gray" } + GradientStop { position: 1.0; color: "white" } + } + + Rectangle { + id: slider + x: 1; y: 1; width: 30; height: 14 + radius: 6 + smooth: true + gradient: Gradient { + GradientStop { position: 0.0; color: "#424242" } + GradientStop { position: 1.0; color: "black" } + } + + MouseArea { + anchors.fill: parent + drag.target: parent; drag.axis: Drag.XAxis; drag.minimumX: 2; drag.maximumX: container.width - 32 + } + } + } +} diff --git a/examples/declarative/toys/dial/dial.qmlproject b/examples/declarative/toys/dial/dial.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/toys/dial/dial.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/toys/dynamic/dynamic.qml b/examples/declarative/toys/dynamic/dynamic.qml new file mode 100644 index 0000000..52c7c1e --- /dev/null +++ b/examples/declarative/toys/dynamic/dynamic.qml @@ -0,0 +1,176 @@ +import Qt 4.7 +import Qt.labs.particles 1.0 +import "qml" + +Item { + id: window + + property int activeSuns: 0 + + //This is a desktop-sized example + width: 1024; height: 512 + + //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 + 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 { + id: dialogText + x: 3; y: 3 + font.pixelSize: 14 + } + + SequentialAnimation { + id: dialogAnim + 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 + anchors { left: parent.left; top: parent.top; right: toolbox.right; bottom: parent.verticalCenter } + gradient: Gradient { + GradientStop { id: gradientStopA; position: 0.0; color: "#0E1533" } + GradientStop { id: gradientStopB; position: 1.0; color: "#437284" } + } + } + + // stars (when there's no sun) + 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 + opacity: 1 + } + + // ground + 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 } + gradient: Gradient { + GradientStop { position: 0.0; color: "ForestGreen" } + GradientStop { position: 1.0; color: "DarkGreen" } + } + } + + SystemPalette { id: activePalette } + + // right-hand panel + Rectangle { + id: toolbox + + width: 480 + color: activePalette.window + anchors { right: parent.right; top: parent.top; bottom: parent.bottom } + + Column { + anchors.centerIn: parent + spacing: 8 + + Text { text: "Drag an item into the scene." } + + 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: 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" + onClicked: { + try { + Qt.createQmlObject(qmlText.text, window, 'CustomObject'); + } catch(err) { + dialog.show('Error on line ' + err.qmlErrors[0].lineNumber + '\n' + err.qmlErrors[0].message); + } + } + } + } + } + + //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/toys/dynamic/dynamic.qmlproject b/examples/declarative/toys/dynamic/dynamic.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/toys/dynamic/dynamic.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/toys/dynamic/images/NOTE b/examples/declarative/toys/dynamic/images/NOTE new file mode 100644 index 0000000..fcd87f9 --- /dev/null +++ b/examples/declarative/toys/dynamic/images/NOTE @@ -0,0 +1 @@ +Images (except star.png) are from the KDE project. diff --git a/examples/declarative/toys/dynamic/images/face-smile.png b/examples/declarative/toys/dynamic/images/face-smile.png Binary files differnew file mode 100644 index 0000000..3d66d72 --- /dev/null +++ b/examples/declarative/toys/dynamic/images/face-smile.png diff --git a/examples/declarative/toys/dynamic/images/moon.png b/examples/declarative/toys/dynamic/images/moon.png Binary files differnew file mode 100644 index 0000000..1c0d606 --- /dev/null +++ b/examples/declarative/toys/dynamic/images/moon.png diff --git a/examples/declarative/toys/dynamic/images/rabbit_brown.png b/examples/declarative/toys/dynamic/images/rabbit_brown.png Binary files differnew file mode 100644 index 0000000..ebfdeed --- /dev/null +++ b/examples/declarative/toys/dynamic/images/rabbit_brown.png diff --git a/examples/declarative/toys/dynamic/images/rabbit_bw.png b/examples/declarative/toys/dynamic/images/rabbit_bw.png Binary files differnew file mode 100644 index 0000000..7bff9b9 --- /dev/null +++ b/examples/declarative/toys/dynamic/images/rabbit_bw.png diff --git a/examples/declarative/toys/dynamic/images/star.png b/examples/declarative/toys/dynamic/images/star.png Binary files differnew file mode 100644 index 0000000..27ef924 --- /dev/null +++ b/examples/declarative/toys/dynamic/images/star.png diff --git a/examples/declarative/toys/dynamic/images/sun.png b/examples/declarative/toys/dynamic/images/sun.png Binary files differnew file mode 100644 index 0000000..7713ca5 --- /dev/null +++ b/examples/declarative/toys/dynamic/images/sun.png diff --git a/examples/declarative/toys/dynamic/images/tree_s.png b/examples/declarative/toys/dynamic/images/tree_s.png Binary files differnew file mode 100644 index 0000000..6eac35a --- /dev/null +++ b/examples/declarative/toys/dynamic/images/tree_s.png diff --git a/examples/declarative/toys/dynamic/qml/Button.qml b/examples/declarative/toys/dynamic/qml/Button.qml new file mode 100644 index 0000000..963a850 --- /dev/null +++ b/examples/declarative/toys/dynamic/qml/Button.qml @@ -0,0 +1,40 @@ +import Qt 4.7 + +Rectangle { + id: container + + property variant text + signal clicked + + height: text.height + 10; width: text.width + 20 + border.width: 1 + radius: 4 + smooth: true + + gradient: Gradient { + GradientStop { + position: 0.0 + color: !mouseArea.pressed ? activePalette.light : activePalette.button + } + GradientStop { + position: 1.0 + color: !mouseArea.pressed ? activePalette.button : activePalette.dark + } + } + + 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/toys/dynamic/qml/PaletteItem.qml b/examples/declarative/toys/dynamic/qml/PaletteItem.qml new file mode 100644 index 0000000..dcb5cc3 --- /dev/null +++ b/examples/declarative/toys/dynamic/qml/PaletteItem.qml @@ -0,0 +1,19 @@ +import Qt 4.7 +import "itemCreation.js" as Code + +Image { + id: paletteItem + + property string componentFile + property string image + + source: image + + MouseArea { + anchors.fill: parent + + onPressed: Code.startDrag(mouse); + onPositionChanged: Code.continueDrag(mouse); + onReleased: Code.endDrag(mouse); + } +} diff --git a/examples/declarative/toys/dynamic/qml/PerspectiveItem.qml b/examples/declarative/toys/dynamic/qml/PerspectiveItem.qml new file mode 100644 index 0000000..c04d3dc --- /dev/null +++ b/examples/declarative/toys/dynamic/qml/PerspectiveItem.qml @@ -0,0 +1,25 @@ +import Qt 4.7 + +Image { + id: rootItem + + property bool created: false + 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 + 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/toys/dynamic/qml/Sun.qml b/examples/declarative/toys/dynamic/qml/Sun.qml new file mode 100644 index 0000000..43dcb9a --- /dev/null +++ b/examples/declarative/toys/dynamic/qml/Sun.qml @@ -0,0 +1,38 @@ +import Qt 4.7 + +Image { + id: sun + + property bool created: false + property string image: "../images/sun.png" + + source: image + + // once item is created, start moving offscreen + NumberAnimation on y { + to: window.height / 2 + running: created + onRunningChanged: { + if (running) + duration = (window.height - sun.y) * 10; + else + state = "OffScreen" + } + } + + states: State { + 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/toys/dynamic/qml/itemCreation.js b/examples/declarative/toys/dynamic/qml/itemCreation.js new file mode 100644 index 0000000..59750f3 --- /dev/null +++ b/examples/declarative/toys/dynamic/qml/itemCreation.js @@ -0,0 +1,65 @@ +var itemComponent = null; +var draggedItem = null; +var startingMouse; +var posnInWindow; + +function startDrag(mouse) +{ + posnInWindow = paletteItem.mapToItem(null, 0, 0); + startingMouse = { x: mouse.x, y: mouse.y } + loadComponent(); +} + +//Creation is split into two functions due to an asynchronous wait while +//possible external files are loaded. + +function loadComponent() { + if (itemComponent != null) { // component has been previously loaded + createItem(); + return; + } + + 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(window); + 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"); + console.log(component.errorsString()); + } +} + +function continueDrag(mouse) +{ + if (draggedItem == null) + return; + + draggedItem.x = mouse.x + posnInWindow.x - startingMouse.x; + draggedItem.y = mouse.y + posnInWindow.y - startingMouse.y; +} + +function endDrag(mouse) +{ + if (draggedItem == null) + return; + + if (draggedItem.x + draggedItem.width > toolbox.x) { //Don't drop it in the toolbox + draggedItem.destroy(); + draggedItem = null; + } else { + draggedItem.created = true; + draggedItem = null; + } +} + diff --git a/examples/declarative/toys/tic-tac-toe/content/Button.qml b/examples/declarative/toys/tic-tac-toe/content/Button.qml new file mode 100644 index 0000000..ecf18cd --- /dev/null +++ b/examples/declarative/toys/tic-tac-toe/content/Button.qml @@ -0,0 +1,37 @@ +import Qt 4.7 + +Rectangle { + id: container + + property string text: "Button" + property bool down: false + property string mainCol: "lightgray" + property string darkCol: "darkgray" + property string lightCol: "white" + + width: buttonLabel.width + 20; height: buttonLabel.height + 6 + border { width: 1; color: Qt.darker(mainCol) } + radius: 8; + color: mainCol + smooth: true + + gradient: Gradient { + GradientStop { + id: topGrad; position: 0.0 + color: if (container.down) { darkCol } else { lightCol } + } + GradientStop { position: 1.0; color: mainCol } + } + + signal clicked + + MouseArea { id: mr; anchors.fill: parent; onClicked: container.clicked() } + + Text { + id: buttonLabel + + anchors.centerIn: container + text: container.text; + font.pixelSize: 14 + } +} diff --git a/examples/declarative/toys/tic-tac-toe/content/TicTac.qml b/examples/declarative/toys/tic-tac-toe/content/TicTac.qml new file mode 100644 index 0000000..d247943 --- /dev/null +++ b/examples/declarative/toys/tic-tac-toe/content/TicTac.qml @@ -0,0 +1,20 @@ +import Qt 4.7 + +Item { + signal clicked + + states: [ + State { name: "X"; PropertyChanges { target: image; source: "pics/x.png" } }, + State { name: "O"; PropertyChanges { target: image; source: "pics/o.png" } } + ] + + Image { + id: image + anchors.centerIn: parent + } + + MouseArea { + anchors.fill: parent + onClicked: parent.clicked() + } +} diff --git a/examples/declarative/toys/tic-tac-toe/content/pics/board.png b/examples/declarative/toys/tic-tac-toe/content/pics/board.png Binary files differnew file mode 100644 index 0000000..7e5b7ba --- /dev/null +++ b/examples/declarative/toys/tic-tac-toe/content/pics/board.png diff --git a/examples/declarative/toys/tic-tac-toe/content/pics/o.png b/examples/declarative/toys/tic-tac-toe/content/pics/o.png Binary files differnew file mode 100644 index 0000000..abc7ee0 --- /dev/null +++ b/examples/declarative/toys/tic-tac-toe/content/pics/o.png diff --git a/examples/declarative/toys/tic-tac-toe/content/pics/x.png b/examples/declarative/toys/tic-tac-toe/content/pics/x.png Binary files differnew file mode 100644 index 0000000..ddc65c8 --- /dev/null +++ b/examples/declarative/toys/tic-tac-toe/content/pics/x.png diff --git a/examples/declarative/toys/tic-tac-toe/content/tic-tac-toe.js b/examples/declarative/toys/tic-tac-toe/content/tic-tac-toe.js new file mode 100644 index 0000000..f8d6d9f --- /dev/null +++ b/examples/declarative/toys/tic-tac-toe/content/tic-tac-toe.js @@ -0,0 +1,145 @@ +function winner(board) +{ + for (var i=0; i<3; ++i) { + if (board.children[i].state!="" + && board.children[i].state==board.children[i+3].state + && board.children[i].state==board.children[i+6].state) + return true + + if (board.children[i*3].state!="" + && board.children[i*3].state==board.children[i*3+1].state + && board.children[i*3].state==board.children[i*3+2].state) + return true + } + + if (board.children[0].state!="" + && board.children[0].state==board.children[4].state!="" + && board.children[0].state==board.children[8].state!="") + return true + + if (board.children[2].state!="" + && board.children[2].state==board.children[4].state!="" + && board.children[2].state==board.children[6].state!="") + return true + + return false +} + +function restart() +{ + // No moves left - start again + for (var i=0; i<9; ++i) + board.children[i].state = "" +} + +function makeMove(pos,player) +{ + board.children[pos].state = player + if (winner(board)) { + win(player + " wins") + return true + } else { + return false + } +} + +function computerTurn() +{ + var r = Math.random(); + if(r < game.difficulty){ + smartAI(); + }else{ + randAI(); + } +} + +function smartAI() +{ + function boardCopy(a){ + var ret = new Object; + ret.children = new Array(9); + for(var i = 0; i<9; i++){ + ret.children[i] = new Object; + ret.children[i].state = a.children[i].state; + } + return ret; + } + for(var i=0; i<9; i++){ + var simpleBoard = boardCopy(board); + if (board.children[i].state == "") { + simpleBoard.children[i].state = "O"; + if(winner(simpleBoard)){ + makeMove(i,"O") + return + } + } + } + for(var i=0; i<9; i++){ + var simpleBoard = boardCopy(board); + if (board.children[i].state == "") { + simpleBoard.children[i].state = "X"; + if(winner(simpleBoard)){ + makeMove(i,"O") + return + } + } + } + function thwart(a,b,c){//If they are at a, try b or c + if (board.children[a].state == "X") { + if (board.children[b].state == "") { + makeMove(b,"O") + return true + }else if (board.children[c].state == "") { + makeMove(c,"O") + return true + } + } + return false; + } + if(thwart(4,0,2)) return; + if(thwart(0,4,3)) return; + if(thwart(2,4,1)) return; + if(thwart(6,4,7)) return; + if(thwart(8,4,5)) return; + if(thwart(1,4,2)) return; + if(thwart(3,4,0)) return; + if(thwart(5,4,8)) return; + if(thwart(7,4,6)) return; + for(var i =0; i<9; i++){//Backup + if (board.children[i].state == "") { + makeMove(i,"O") + return + } + } + restart(); +} + +function randAI() +{ + var open = 0; + for (var i=0; i<9; ++i) + if (board.children[i].state == "") { + open += 1; + } + if(open == 0){ + restart(); + return; + } + var openA = new Array(open);//JS doesn't have lists I can append to (i think) + var acc = 0; + for (var i=0; i<9; ++i) + if (board.children[i].state == "") { + openA[acc] = i; + acc += 1; + } + var choice = openA[Math.floor(Math.random() * open)]; + makeMove(choice, "O"); +} + +function win(s) +{ + msg.text = s + msg.opacity = 1 + endtimer.running = true +} + diff --git a/examples/declarative/toys/tic-tac-toe/tic-tac-toe.qml b/examples/declarative/toys/tic-tac-toe/tic-tac-toe.qml new file mode 100644 index 0000000..dd13052 --- /dev/null +++ b/examples/declarative/toys/tic-tac-toe/tic-tac-toe.qml @@ -0,0 +1,77 @@ +import Qt 4.7 +import "content" +import "content/tic-tac-toe.js" as Logic + +Item { + id: game + + property bool show: false + property real difficulty: 1.0 //chance it will actually think + + width: 440 + height: 480 + anchors.fill: parent + + Image { + id: boardimage + anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.horizontalCenter } + source: "content/pics/board.png" + } + + Grid { + id: board + anchors.fill: boardimage + columns: 3 + + Repeater { + model: 9 + TicTac { + width: board.width/3 + height: board.height/3 + onClicked: { + if (!endtimer.running) { + if (!Logic.makeMove(index,"X")) + Logic.computerTurn() + } + } + } + } + + Timer { + id: endtimer + interval: 1600 + onTriggered: { msg.opacity = 0; Logic.restart() } + } + } + + Row { + spacing: 4 + anchors { top: board.bottom; horizontalCenter: board.horizontalCenter } + + Button { + text: "Hard" + onClicked: game.difficulty = 1.0; + down: game.difficulty == 1.0 + } + Button { + text: "Moderate" + onClicked: game.difficulty = 0.8; + down: game.difficulty == 0.8 + } + Button { + text: "Easy" + onClicked: game.difficulty = 0.2; + down: game.difficulty == 0.2 + } + } + + Text { + id: msg + + anchors.centerIn: parent + opacity: 0 + color: "blue" + style: Text.Outline; styleColor: "white" + font.pixelSize: 50; font.bold: true + } +} diff --git a/examples/declarative/toys/tic-tac-toe/tic-tac-toe.qmlproject b/examples/declarative/toys/tic-tac-toe/tic-tac-toe.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/toys/tic-tac-toe/tic-tac-toe.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/toys/toys.qmlproject b/examples/declarative/toys/toys.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/toys/toys.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/toys/tvtennis/tvtennis.qml b/examples/declarative/toys/tvtennis/tvtennis.qml new file mode 100644 index 0000000..c90d9c5 --- /dev/null +++ b/examples/declarative/toys/tvtennis/tvtennis.qml @@ -0,0 +1,71 @@ +import Qt 4.7 + +Rectangle { + id: page + width: 640; height: 480 + color: "Black" + + // Make a ball to bounce + Rectangle { + id: ball + + // Add a property for the target y coordinate + property int targetY : page.height - 10 + property variant direction : "right" + + x: 20; width: 20; height: 20; z: 1 + color: "Lime" + + // Move the ball to the right and back to the left repeatedly + SequentialAnimation on x { + loops: Animation.Infinite + NumberAnimation { to: page.width - 40; duration: 2000 } + PropertyAction { target: ball; property: "direction"; value: "left" } + NumberAnimation { to: 20; duration: 2000 } + PropertyAction { target: ball; property: "direction"; value: "right" } + } + + // Make y follow the target y coordinate, with a velocity of 200 + SpringFollow on y { to: ball.targetY; velocity: 200 } + + // Detect the ball hitting the top or bottom of the view and bounce it + onYChanged: { + if (y <= 0) { + targetY = page.height - 20; + } else if (y >= page.height - 20) { + targetY = 0; + } + } + } + + // Place bats to the left and right of the view, following the y + // coordinates of the ball. + Rectangle { + id: leftBat + color: "Lime" + x: 2; width: 20; height: 90 + SpringFollow on y { + to: ball.y - 45; velocity: 300 + enabled: ball.direction == 'left' + } + } + Rectangle { + id: rightBat + color: "Lime" + x: page.width - 22; width: 20; height: 90 + SpringFollow on y { + to: ball.y-45; velocity: 300 + enabled: ball.direction == 'right' + } + } + + // The rest, to make it look realistic, if neither ever scores... + Rectangle { color: "Lime"; x: page.width/2-80; y: 0; width: 40; height: 60 } + Rectangle { color: "Black"; x: page.width/2-70; y: 10; width: 20; height: 40 } + Rectangle { color: "Lime"; x: page.width/2+40; y: 0; width: 40; height: 60 } + Rectangle { color: "Black"; x: page.width/2+50; y: 10; width: 20; height: 40 } + Repeater { + model: page.height / 20 + Rectangle { color: "Lime"; x: page.width/2-5; y: index * 20; width: 10; height: 10 } + } +} diff --git a/examples/declarative/toys/tvtennis/tvtennis.qmlproject b/examples/declarative/toys/tvtennis/tvtennis.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/toys/tvtennis/tvtennis.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/toys/velocity/Day.qml b/examples/declarative/toys/velocity/Day.qml new file mode 100644 index 0000000..350c1c4 --- /dev/null +++ b/examples/declarative/toys/velocity/Day.qml @@ -0,0 +1,101 @@ +import Qt 4.7 + +Component { + Item { + property variant stickies + + id: page + width: 840; height: 480 + + Image { source: "cork.jpg" } + + Text { + text: name; x: 15; y: 8; height: 40; width: 370 + font.pixelSize: 18; font.bold: true; color: "white" + style: Text.Outline; styleColor: "black" + } + + Repeater { + model: notes + Item { + id: stickyPage + + property int randomX: Math.random() * 500 + 100 + property int randomY: Math.random() * 200 + 50 + + x: randomX; y: randomY + + SpringFollow on rotation { + to: -flickable.horizontalVelocity / 100 + spring: 2.0; damping: 0.15 + } + + Item { + id: sticky + scale: 0.7 + + Image { + id: stickyImage + x: 8 + -width * 0.6 / 2; y: -20 + source: "note-yellow.png" + scale: 0.6; transformOrigin: Item.TopLeft + smooth: true + } + + TextEdit { + id: myText + x: -104; y: 36; width: 215; height: 200 + smooth: true + font.pixelSize: 24 + readOnly: false + rotation: -8 + text: noteText + } + + Item { + x: stickyImage.x; y: -20 + width: stickyImage.width * stickyImage.scale + height: stickyImage.height * stickyImage.scale + + MouseArea { + id: mouse + anchors.fill: parent + drag.target: stickyPage + drag.axis: Drag.XandYAxis + drag.minimumY: 0 + drag.maximumY: page.height - 80 + drag.minimumX: 100 + drag.maximumX: page.width - 140 + onClicked: { myText.focus = true } + } + } + } + + Image { + x: -width / 2; y: -height * 0.5 / 2 + source: "tack.png" + scale: 0.7; transformOrigin: Item.TopLeft + } + + states: State { + name: "pressed" + when: mouse.pressed + PropertyChanges { target: sticky; rotation: 8; scale: 1 } + PropertyChanges { target: page; z: 8 } + } + + transitions: Transition { + NumberAnimation { properties: "rotation,scale"; duration: 200 } + } + } + } + } +} + + + + + + + + diff --git a/examples/declarative/toys/velocity/cork.jpg b/examples/declarative/toys/velocity/cork.jpg Binary files differnew file mode 100644 index 0000000..160bc00 --- /dev/null +++ b/examples/declarative/toys/velocity/cork.jpg diff --git a/examples/declarative/toys/velocity/note-yellow.png b/examples/declarative/toys/velocity/note-yellow.png Binary files differnew file mode 100644 index 0000000..8ddecc8 --- /dev/null +++ b/examples/declarative/toys/velocity/note-yellow.png diff --git a/examples/declarative/toys/velocity/tack.png b/examples/declarative/toys/velocity/tack.png Binary files differnew file mode 100644 index 0000000..cef2d1c --- /dev/null +++ b/examples/declarative/toys/velocity/tack.png diff --git a/examples/declarative/toys/velocity/velocity.qml b/examples/declarative/toys/velocity/velocity.qml new file mode 100644 index 0000000..871bafc --- /dev/null +++ b/examples/declarative/toys/velocity/velocity.qml @@ -0,0 +1,75 @@ +import Qt 4.7 + +Rectangle { + width: 800; height: 480 + color: "#464646" + + ListModel { + id: list + + ListElement { + name: "Sunday" + notes: [ + ListElement { noteText: "Lunch" }, + ListElement { noteText: "Birthday Party" } + ] + } + + ListElement { + name: "Monday" + notes: [ + ListElement { noteText: "Pickup kids from\nschool\n4.30pm" }, + ListElement { noteText: "Checkout Qt" }, ListElement { noteText: "Read email" } + ] + } + + ListElement { + name: "Tuesday" + notes: [ + ListElement { noteText: "Walk dog" }, + ListElement { noteText: "Buy newspaper" } + ] + } + + ListElement { + name: "Wednesday" + notes: [ ListElement { noteText: "Cook dinner" } ] + } + + ListElement { + name: "Thursday" + notes: [ + ListElement { noteText: "Meeting\n5.30pm" }, + ListElement { noteText: "Weed garden" } + ] + } + + ListElement { + name: "Friday" + notes: [ + ListElement { noteText: "More work" }, + ListElement { noteText: "Grocery shopping" } + ] + } + + ListElement { + name: "Saturday" + notes: [ + ListElement { noteText: "Drink" }, + ListElement { noteText: "Download Qt\nPlay with QML" } + ] + } + } + + ListView { + id: flickable + + anchors.fill: parent + focus: true + highlightRangeMode: ListView.StrictlyEnforceRange + orientation: ListView.Horizontal + snapMode: ListView.SnapOneItem + model: list + delegate: Day { } + } +} diff --git a/examples/declarative/toys/velocity/velocity.qmlproject b/examples/declarative/toys/velocity/velocity.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/toys/velocity/velocity.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} |
