diff options
Diffstat (limited to 'examples/quick')
129 files changed, 3506 insertions, 1097 deletions
diff --git a/examples/quick/accessibility/content/Checkbox.qml b/examples/quick/accessibility/content/Checkbox.qml index 7c20f55e90..c4b8e8e380 100644 --- a/examples/quick/accessibility/content/Checkbox.qml +++ b/examples/quick/accessibility/content/Checkbox.qml @@ -3,7 +3,7 @@ ** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). ** Contact: http://www.qt-project.org/legal ** -** This file is part of the QtDeclarative module of the Qt Toolkit. +** This file is part of the Qt Quick module of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE:LGPL$ ** Commercial License Usage diff --git a/examples/quick/accessibility/content/Slider.qml b/examples/quick/accessibility/content/Slider.qml index c6eaca30a2..1a71e515f6 100644 --- a/examples/quick/accessibility/content/Slider.qml +++ b/examples/quick/accessibility/content/Slider.qml @@ -3,7 +3,7 @@ ** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). ** Contact: http://www.qt-project.org/legal ** -** This file is part of the QtDeclarative module of the Qt Toolkit. +** This file is part of the Qt Quick module of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE:LGPL$ ** Commercial License Usage diff --git a/examples/quick/accessibility/doc/src/accessibility.qdoc b/examples/quick/accessibility/doc/src/accessibility.qdoc index b14d9dd4dc..a637383324 100644 --- a/examples/quick/accessibility/doc/src/accessibility.qdoc +++ b/examples/quick/accessibility/doc/src/accessibility.qdoc @@ -25,17 +25,16 @@ ** ****************************************************************************/ /*! - \title QtQuick Examples - Accessibility + \title Qt Quick Examples - Accessibility \example accessibility \brief This example has accessible buttons. \ingroup qtquickexamples - Elements in this example are augmented with meta-data for accessiblity systems. + Types in this example are augmented with meta-data for accessiblity systems. For example, the button identifies itself and its functionality to the accessibility system: \snippet quick/accessibility/content/Button.qml button - As do Text elements inside the example: + As do Text types inside the example: \snippet quick/accessibility/accessibility.qml text */ - diff --git a/examples/quick/animation/doc/src/animation.qdoc b/examples/quick/animation/doc/src/animation.qdoc index 3df0caf322..064717835d 100644 --- a/examples/quick/animation/doc/src/animation.qdoc +++ b/examples/quick/animation/doc/src/animation.qdoc @@ -26,14 +26,14 @@ ****************************************************************************/ /*! - \title QtQuick Examples - Animation + \title Qt Quick Examples - Animation \example animation \brief This is a collection of QML Animation examples. \image qml-animations-example.png \ingroup qtquickexamples This is a collection of small QML examples relating to animation. Each example is - a small QML file emphasizing a particular element or feature. + a small QML file emphasizing a particular type or feature. ColorAnimation demonstrates using a color animation to fade a sky from day to night. \snippet quick/animation/basics/color-animation.qml 0 @@ -59,7 +59,7 @@ States demonstrates how the properties of an item can vary between states. It defines several states: \snippet quick/animation/states/states.qml 0 - Note that there is also the implicit 'base state' from properties set directly on elements. + Note that there is also the implicit 'base state' from properties set directly on objects. Transitions takes the States example and animates the property changes by setting transitions: \snippet quick/animation/states/transitions.qml 0 diff --git a/examples/quick/canvas/bezierCurve/bezierCurve.qml b/examples/quick/canvas/bezierCurve/bezierCurve.qml index 386d1d73d3..281ca9399e 100644 --- a/examples/quick/canvas/bezierCurve/bezierCurve.qml +++ b/examples/quick/canvas/bezierCurve/bezierCurve.qml @@ -40,84 +40,88 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 + id:container + width: 320 + height: 480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Bezier Curve"; anchors.horizontalCenter:parent.horizontalCenter} + Column { + spacing:5 + anchors.fill: parent + anchors.topMargin: 12 - Canvas { - id:canvas - width:320 - height:280 - property string strokeStyle:"red" - property string fillStyle:"red" - property int lineWidth:lineWidthCtrl.value - property bool fill:true - property bool stroke:true - property real alpha:alphaCtrl.value - property real scaleX : scaleXCtrl.value - property real scaleY : scaleYCtrl.value - property real rotate : rotateCtrl.value - antialiasing: true + Text { + font.pointSize: 24 + font.bold: true + text: "Bezier Curve" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } - Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } } - Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } - Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } + Canvas { + id:canvas + width:320 + height:280 + property color strokeStyle: Qt.darker(fillStyle, 1.4) + property color fillStyle: "#b40000" // red + property int lineWidth: lineWidthCtrl.value + property bool fill: true + property bool stroke: true + property real alpha: 1.0 + property real scale : scaleCtrl.value + property real rotate : rotateCtrl.value + antialiasing: true - onLineWidthChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onAlphaChanged:requestPaint(); - onScaleXChanged:requestPaint(); - onScaleYChanged:requestPaint(); - onRotateChanged:requestPaint(); + onLineWidthChanged:requestPaint(); + onFillChanged:requestPaint(); + onStrokeChanged:requestPaint(); + onScaleChanged:requestPaint(); + onRotateChanged:requestPaint(); - onPaint: { - var ctx = canvas.getContext('2d'); - ctx.save(); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.globalAlpha = canvas.alpha; - ctx.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; - ctx.scale(canvas.scaleX, canvas.scaleY); - ctx.rotate(canvas.rotate); - //! [0] - ctx.beginPath(); - ctx.moveTo(75,40); - ctx.bezierCurveTo(75,37,70,25,50,25); - ctx.bezierCurveTo(20,25,20,62.5,20,62.5); - ctx.bezierCurveTo(20,80,40,102,75,120); - ctx.bezierCurveTo(110,102,130,80,130,62.5); - ctx.bezierCurveTo(130,62.5,130,25,100,25); - ctx.bezierCurveTo(85,25,75,37,75,40); - ctx.closePath(); - //! [0] - if (canvas.fill) - ctx.fill(); - if (canvas.stroke) - ctx.stroke(); - ctx.restore(); - } - } + onPaint: { + var ctx = canvas.getContext('2d'); + var originX = 85 + var originY = 75 + ctx.save(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.translate(originX, originX); + ctx.globalAlpha = canvas.alpha; + ctx.strokeStyle = canvas.strokeStyle; + ctx.fillStyle = canvas.fillStyle; + ctx.lineWidth = canvas.lineWidth; - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"} - Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleX"} - Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleY"} - Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} + ctx.translate(originX, originY) + ctx.scale(canvas.scale, canvas.scale); + ctx.rotate(canvas.rotate); + ctx.translate(-originX, -originY) + + //! [0] + ctx.beginPath(); + ctx.moveTo(75,40); + ctx.bezierCurveTo(75,37,70,25,50,25); + ctx.bezierCurveTo(20,25,20,62.5,20,62.5); + ctx.bezierCurveTo(20,80,40,102,75,120); + ctx.bezierCurveTo(110,102,130,80,130,62.5); + ctx.bezierCurveTo(130,62.5,130,25,100,25); + ctx.bezierCurveTo(85,25,75,37,75,40); + ctx.closePath(); + //! [0] + if (canvas.fill) + ctx.fill(); + if (canvas.stroke) + ctx.stroke(); + ctx.restore(); + } } } - } + Column { + id: controls + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: lineWidthCtrl; min: 1; max: 10; init: 2; name: "Outline"} + Slider {id: scaleCtrl; min: 0.1; max: 10; init: 1; name: "Scale"} + Slider {id: rotateCtrl; min: 0; max: Math.PI*2; init: 0; name: "Rotate"} + } } diff --git a/examples/quick/canvas/canvas.qrc b/examples/quick/canvas/canvas.qrc index 06d39f3624..cfdfc844b9 100644 --- a/examples/quick/canvas/canvas.qrc +++ b/examples/quick/canvas/canvas.qrc @@ -3,24 +3,7 @@ <file>canvas.qml</file> <file>bezierCurve/bezierCurve.qml</file> <file>clip/clip.qml</file> - <file>contents/Button.qml</file> <file>contents/qt-logo.png</file> - <file>contents/ScrollBar.qml</file> - <file>contents/Slider.qml</file> - <file>contents/TitleBar.qml</file> - <file>contents/ToolBar.qml</file> - <file>contents/images/button-pressed.png</file> - <file>contents/images/button.png</file> - <file>contents/images/default.svg</file> - <file>contents/images/gloss.png</file> - <file>contents/images/lineedit.png</file> - <file>contents/images/lineedit.sci</file> - <file>contents/images/quit.png</file> - <file>contents/images/stripes.png</file> - <file>contents/images/titlebar.png</file> - <file>contents/images/titlebar.sci</file> - <file>contents/images/toolbutton.png</file> - <file>contents/images/toolbutton.sci</file> <file>quadraticCurveTo/quadraticCurveTo.qml</file> <file>roundedrect/roundedrect.qml</file> <file>smile/smile.qml</file> diff --git a/examples/quick/canvas/clip/clip.qml b/examples/quick/canvas/clip/clip.qml index 1e9728ff8d..71def05d20 100644 --- a/examples/quick/canvas/clip/clip.qml +++ b/examples/quick/canvas/clip/clip.qml @@ -40,111 +40,109 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 + id:container + width: 320 + height: 480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Makes squircle icon with clip"; anchors.horizontalCenter:parent.horizontalCenter} - Canvas { - id:canvas - width:320 - height:280 - property string strokeStyle:"blue" - property string fillStyle:"steelblue" - property int lineWidth:2 - property int nSize:nCtrl.value - property real radius:rCtrl.value - property bool fill:true - property bool stroke:false - property real px:xCtrl.value - property real py:yCtrl.value - property real alpha:alphaCtrl.value - property string imagefile:"../contents/qt-logo.png" - antialiasing: true - Component.onCompleted:loadImage(canvas.imagefile); + Column { + spacing:5 + anchors.fill: parent + anchors.topMargin: 12 + Text { + font.pointSize: 24 + font.bold: true + text: "Squircle with Clip" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } + Canvas { + id: canvas + width: 320 + height: 280 + property color strokeStyle: Qt.darker(fillStyle, 1.2) + property color fillStyle:"#14aaff" // green + property int lineWidth:2 + property int nSize:nCtrl.value + property real radius:rCtrl.value + property bool fill:true + property bool stroke:false + property real px: width/2 + property real py: height/2 + 20 + property real alpha: 1.0 + property string imagefile:"../contents/qt-logo.png" + antialiasing: true + Component.onCompleted:loadImage(canvas.imagefile); - onAlphaChanged:requestPaint(); - onRadiusChanged:requestPaint(); - onLineWidthChanged:requestPaint(); - onNSizeChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onPxChanged:requestPaint(); - onPyChanged:requestPaint(); - - onImageLoaded : requestPaint(); + onRadiusChanged:requestPaint(); + onLineWidthChanged:requestPaint(); + onNSizeChanged:requestPaint(); + onFillChanged:requestPaint(); + onStrokeChanged:requestPaint(); + onImageLoaded : requestPaint(); + onPaint: squcirle(); - onPaint: squcirle(); + function squcirle() { + var ctx = canvas.getContext("2d"); + var N = canvas.nSize; + var R = canvas.radius; - function squcirle() { - var ctx = canvas.getContext("2d"); - var N = canvas.nSize; - var R = canvas.radius; + N=Math.abs(N); + var M=N; + if (N>100) M=100; + if (N<0.00000000001) M=0.00000000001; - N=Math.abs(N); - var M=N; - if (N>100) M=100; - if (N<0.00000000001) M=0.00000000001; + ctx.save(); + ctx.globalAlpha = canvas.alpha; + ctx.fillStyle = "white"; + ctx.fillRect(0, 0, canvas.width, canvas.height); - ctx.save(); - ctx.globalAlpha =canvas.alpha; - ctx.fillStyle = "gray"; - ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.strokeStyle = canvas.strokeStyle; + ctx.fillStyle = canvas.fillStyle; + ctx.lineWidth = canvas.lineWidth; - ctx.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; + ctx.beginPath(); + var i = 0, x, y; + for (i=0; i<(2*R+1); i++){ + x = Math.round(i-R) + canvas.px; + y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py; - ctx.beginPath(); - var i = 0, x, y; - for (i=0; i<(2*R+1); i++){ - x = Math.round(i-R) + canvas.px; - y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py; + if (i == 0) + ctx.moveTo(x, y); + else + ctx.lineTo(x, y); + } - if (i == 0) - ctx.moveTo(x, y); - else - ctx.lineTo(x, y); - } + for (i=(2*R); i<(4*R+1); i++){ + x =Math.round(3*R-i)+canvas.px; + y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py; + ctx.lineTo(x, y); + } + ctx.closePath(); + if (canvas.stroke) { + ctx.stroke(); + } - for (i=(2*R); i<(4*R+1); i++){ - x =Math.round(3*R-i)+canvas.px; - y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py; - ctx.lineTo(x, y); - } - ctx.closePath(); - if (canvas.stroke) { - ctx.stroke(); - } + if (canvas.fill) { + ctx.fill(); + } - if (canvas.fill) { - ctx.fill(); - } - //! [0] - ctx.clip(); + //! [0] + ctx.clip(); + ctx.drawImage(canvas.imagefile, 0, 0); + //! [0] - ctx.drawImage(canvas.imagefile, 0, 0); - //! [0] - ctx.restore(); - } - } - - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:nCtrl; width:300; height:20; min:1; max:10; init:4; name:"N"} - Slider {id:rCtrl; width:300; height:20; min:30; max:180; init:100; name:"Radius"} - Slider {id:xCtrl; width:300; height:20; min:50; max:300; init:180; name:"X"} - Slider {id:yCtrl; width:300; height:20; min:30; max:300; init:220; name:"Y"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} + ctx.restore(); + } } } - } + Column { + id: controls + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: nCtrl; min: 1; max: 10; init: 4; name:"N"} + Slider {id: rCtrl; min: 30; max: 180; init: 80; name:"Radius"} + } } diff --git a/examples/quick/canvas/contents/images/button-pressed.png b/examples/quick/canvas/contents/images/button-pressed.png Binary files differdeleted file mode 100644 index e434d327f2..0000000000 --- a/examples/quick/canvas/contents/images/button-pressed.png +++ /dev/null diff --git a/examples/quick/canvas/contents/images/button.png b/examples/quick/canvas/contents/images/button.png Binary files differdeleted file mode 100644 index 56a63ce641..0000000000 --- a/examples/quick/canvas/contents/images/button.png +++ /dev/null diff --git a/examples/quick/canvas/contents/images/default.svg b/examples/quick/canvas/contents/images/default.svg deleted file mode 100644 index 248199cc4e..0000000000 --- a/examples/quick/canvas/contents/images/default.svg +++ /dev/null @@ -1,82 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" id="svg1306"> - <defs id="defs1308"> - <linearGradient id="linearGradient4083"> - <stop id="stop4085" offset="0" stop-color="#ffffff" stop-opacity="0"/> - <stop offset="0.75" id="stop4089" stop-color="#ffffff" stop-opacity="0"/> - <stop id="stop4087" offset="1" stop-color="#ffffff" stop-opacity="1"/> - </linearGradient> - <linearGradient id="linearGradient4032"> - <stop id="stop4034" offset="0" stop-color="#fff7c2" stop-opacity="0.63829786"/> - <stop offset="0.59394139" id="stop4036" stop-color="#fcaf3e" stop-opacity="0.18348624"/> - <stop id="stop4038" offset="0.83850551" stop-color="#fcaf3e" stop-opacity="0.50458717"/> - <stop id="stop4040" offset="1" stop-color="#fcaf3e" stop-opacity="1"/> - </linearGradient> - <linearGradient id="linearGradient4026"> - <stop id="stop4028" offset="0" stop-color="#fff9c6" stop-opacity="1"/> - <stop offset="0.54166669" id="stop4042" stop-color="#fff28c" stop-opacity="1"/> - <stop id="stop4030" offset="1" stop-color="#ffea85" stop-opacity="1"/> - </linearGradient> - <linearGradient xlink:href="#linearGradient4026" id="linearGradient3168" gradientUnits="userSpaceOnUse" x1="-28.968945" y1="-25.326815" x2="-37.19698" y2="-9.5590506"/> - <radialGradient xlink:href="#linearGradient4032" id="radialGradient4020" cx="-33.519073" cy="-22.113297" fx="-33.519073" fy="-22.113297" r="9.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.487739,1.292402,-1.10267,0.497242,-41.77393,32.41492)"/> - <radialGradient xlink:href="#linearGradient4083" id="radialGradient4081" cx="23.99999" cy="23.381506" fx="23.99999" fy="23.381506" r="19.141981" gradientTransform="matrix(1.006701,2.235326e-16,-2.23715e-16,1.007522,-0.160816,0.426981)" gradientUnits="userSpaceOnUse"/> - </defs> - - <metadata id="metadata1311"> - <rdf:RDF> - <cc:Work rdf:about=""> - <dc:format>image/svg+xml</dc:format> - <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> - <dc:title>weather-clear</dc:title> - <dc:date>January 2006</dc:date> - <dc:creator> - <cc:Agent> - <dc:title>Ryan Collier (pseudo)</dc:title> - </cc:Agent> - </dc:creator> - <dc:publisher> - <cc:Agent> - <dc:title>http://www.tango-project.org</dc:title> - </cc:Agent> - </dc:publisher> - <dc:source>http://www.pseudocode.org</dc:source> - <dc:subject> - <rdf:Bag> - <rdf:li>weather</rdf:li> - <rdf:li>applet</rdf:li> - <rdf:li>notification</rdf:li> - </rdf:Bag> - </dc:subject> - <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/2.0/"/> - <dc:contributor> - <cc:Agent> - <dc:title>Garrett LeSage</dc:title> - </cc:Agent> - </dc:contributor> - </cc:Work> - <cc:License rdf:about="http://creativecommons.org/licenses/by-sa/2.0/"> - <cc:permits rdf:resource="http://web.resource.org/cc/Reproduction"/> - <cc:permits rdf:resource="http://web.resource.org/cc/Distribution"/> - <cc:requires rdf:resource="http://web.resource.org/cc/Notice"/> - <cc:requires rdf:resource="http://web.resource.org/cc/Attribution"/> - <cc:permits rdf:resource="http://web.resource.org/cc/DerivativeWorks"/> - <cc:requires rdf:resource="http://web.resource.org/cc/ShareAlike"/> - </cc:License> - </rdf:RDF> - </metadata> - <g id="layer1"> - <g> - <g opacity="0.7"> - <path d="M 24 2.5 L 21.625 9.1875 C 22.399034 9.0641318 23.191406 9 24 9 C 24.808594 9 25.600966 9.0641317 26.375 9.1875 L 24 2.5 z M 8.8125 8.78125 L 11.84375 15.21875 C 12.779034 13.928569 13.928569 12.779034 15.21875 11.84375 L 8.8125 8.78125 z M 39.21875 8.78125 L 32.78125 11.84375 C 34.071431 12.779034 35.220966 13.928569 36.15625 15.21875 L 39.21875 8.78125 z M 9.1875 21.59375 L 2.5 23.96875 L 9.1875 26.34375 C 9.0673373 25.57952 9 24.797813 9 24 C 9 23.180625 9.0608858 22.377571 9.1875 21.59375 z M 38.8125 21.625 C 38.935868 22.399034 39 23.191406 39 24 C 39 24.808594 38.935868 25.600966 38.8125 26.375 L 45.5 24 L 38.8125 21.625 z M 11.84375 32.78125 L 8.8125 39.1875 L 15.21875 36.15625 C 13.928569 35.220966 12.779034 34.071431 11.84375 32.78125 z M 36.15625 32.78125 C 35.229789 34.05926 34.087617 35.194799 32.8125 36.125 L 39.21875 39.1875 L 36.15625 32.78125 z M 21.625 38.8125 L 24 45.5 L 26.375 38.8125 C 25.600966 38.935868 24.808594 39 24 39 C 23.191406 39 22.399034 38.935868 21.625 38.8125 z " fill="#fce94f" fill-opacity="1" stroke="#fcaf3e" stroke-width="0.73732895" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/> - <path d="M 24 5.25 L 22.65625 9.0625 C 23.098888 9.0231486 23.547187 9 24 9 C 24.452813 9 24.901112 9.0231486 25.34375 9.0625 L 24 5.25 z M 10.78125 10.75 L 12.5 14.375 C 13.071538 13.694089 13.724004 13.038745 14.40625 12.46875 L 10.78125 10.75 z M 37.25 10.75 L 33.625 12.46875 C 34.304675 13.038189 34.961811 13.695325 35.53125 14.375 L 37.25 10.75 z M 9.0625 22.625 L 5.28125 23.96875 L 9.0625 25.3125 C 9.024981 24.880146 9 24.442031 9 24 C 9 23.536406 9.0212735 23.077908 9.0625 22.625 z M 38.9375 22.65625 C 38.976851 23.098888 39 23.547187 39 24 C 39 24.452813 38.976851 24.901112 38.9375 25.34375 L 42.71875 24 L 38.9375 22.65625 z M 35.53125 33.59375 C 34.958293 34.27954 34.309985 34.957363 33.625 35.53125 L 37.25 37.25 L 35.53125 33.59375 z M 12.5 33.625 L 10.78125 37.21875 L 14.375 35.5 C 13.702932 34.935884 13.064116 34.297068 12.5 33.625 z M 22.65625 38.9375 L 24 42.71875 L 25.34375 38.9375 C 24.901112 38.976851 24.452813 39 24 39 C 23.547187 39 23.098888 38.976851 22.65625 38.9375 z " fill="none" fill-opacity="1" stroke="url(#radialGradient4081)" stroke-width="0.84646249" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/> - </g> - <g> - <g> - <path transform="matrix(0.778062,-1.061285,1.061287,0.778062,67.47952,3.641324)" d="M -22.5 -17.5 A 9.5 9.5 0 1 1 -41.5,-17.5 A 9.5 9.5 0 1 1 -22.5 -17.5 z" fill="#ffee54" fill-opacity="1" stroke="#fcaf3e" stroke-width="0.75991178" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/> - <path transform="matrix(1.244257,-0.167707,0.216642,1.251844,67.61648,40.527)" d="M -22.5 -17.5 A 9.5 9.5 0 1 1 -41.5,-17.5 A 9.5 9.5 0 1 1 -22.5 -17.5 z" fill="url(#radialGradient4020)" fill-opacity="1" stroke="none" stroke-width="1.01737845" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/> - <path transform="matrix(0.715791,-0.976349,0.97635,0.715792,64.00044,5.269544)" d="M -22.5 -17.5 A 9.5 9.5 0 1 1 -41.5,-17.5 A 9.5 9.5 0 1 1 -22.5 -17.5 z" fill="none" fill-opacity="1" stroke="url(#linearGradient3168)" stroke-width="0.82601947" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/> - </g> - </g> - </g> - </g> -</svg> diff --git a/examples/quick/canvas/contents/images/gloss.png b/examples/quick/canvas/contents/images/gloss.png Binary files differdeleted file mode 100755 index 5d370cd93d..0000000000 --- a/examples/quick/canvas/contents/images/gloss.png +++ /dev/null diff --git a/examples/quick/canvas/contents/images/lineedit.png b/examples/quick/canvas/contents/images/lineedit.png Binary files differdeleted file mode 100755 index 2cc38dc35b..0000000000 --- a/examples/quick/canvas/contents/images/lineedit.png +++ /dev/null diff --git a/examples/quick/canvas/contents/images/lineedit.sci b/examples/quick/canvas/contents/images/lineedit.sci deleted file mode 100644 index 054bff78be..0000000000 --- a/examples/quick/canvas/contents/images/lineedit.sci +++ /dev/null @@ -1,5 +0,0 @@ -border.left: 10 -border.top: 10 -border.bottom: 10 -border.right: 10 -source: lineedit.png diff --git a/examples/quick/canvas/contents/images/quit.png b/examples/quick/canvas/contents/images/quit.png Binary files differdeleted file mode 100755 index 5bda1b6e0d..0000000000 --- a/examples/quick/canvas/contents/images/quit.png +++ /dev/null diff --git a/examples/quick/canvas/contents/images/stripes.png b/examples/quick/canvas/contents/images/stripes.png Binary files differdeleted file mode 100755 index 9f36727ea4..0000000000 --- a/examples/quick/canvas/contents/images/stripes.png +++ /dev/null diff --git a/examples/quick/canvas/contents/images/titlebar.png b/examples/quick/canvas/contents/images/titlebar.png Binary files differdeleted file mode 100755 index 51c90082d0..0000000000 --- a/examples/quick/canvas/contents/images/titlebar.png +++ /dev/null diff --git a/examples/quick/canvas/contents/images/titlebar.sci b/examples/quick/canvas/contents/images/titlebar.sci deleted file mode 100644 index 0418d94cd6..0000000000 --- a/examples/quick/canvas/contents/images/titlebar.sci +++ /dev/null @@ -1,5 +0,0 @@ -border.left: 10 -border.top: 12 -border.bottom: 12 -border.right: 10 -source: titlebar.png diff --git a/examples/quick/canvas/contents/images/toolbutton.png b/examples/quick/canvas/contents/images/toolbutton.png Binary files differdeleted file mode 100755 index 11310013ee..0000000000 --- a/examples/quick/canvas/contents/images/toolbutton.png +++ /dev/null diff --git a/examples/quick/canvas/contents/images/toolbutton.sci b/examples/quick/canvas/contents/images/toolbutton.sci deleted file mode 100644 index 9e4f965307..0000000000 --- a/examples/quick/canvas/contents/images/toolbutton.sci +++ /dev/null @@ -1,5 +0,0 @@ -border.left: 15 -border.top: 4 -border.bottom: 4 -border.right: 15 -source: toolbutton.png diff --git a/examples/quick/canvas/doc/src/canvas.qdoc b/examples/quick/canvas/doc/src/canvas.qdoc index 5e88b62074..638d25d83f 100644 --- a/examples/quick/canvas/doc/src/canvas.qdoc +++ b/examples/quick/canvas/doc/src/canvas.qdoc @@ -26,14 +26,14 @@ ****************************************************************************/ /*! - \title QtQuick Examples - Canvas + \title Qt Quick Examples - Canvas \example canvas \brief This is a collection of QML Canvas examples. \image qml-canvas-example.png \ingroup qtquickexamples This is a collection of small QML examples relating to Canvas item. Each example is - a small QML file emphasizing a particular element or feature. + a small QML file emphasizing a particular type or feature. Red heart demonstrates using a bezierCurve API to stroke and fill a red heart. \snippet quick/canvas/bezierCurve/bezierCurve.qml 0 @@ -56,4 +56,3 @@ \snippet quick/canvas/tiger/tiger.qml 0 */ - diff --git a/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml b/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml index 9e03c03b98..0756d339ff 100644 --- a/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml +++ b/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml @@ -40,91 +40,97 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 + id:container + width:320 + height:480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Quadratic Curve"; anchors.horizontalCenter:parent.horizontalCenter} + Column { + spacing:5 + anchors.fill: parent + anchors.topMargin: 12 - Canvas { - id:canvas - width:320 - height:280 - property string strokeStyle:"steelblue" - property string fillStyle:"yellow" - property int lineWidth:lineWidthCtrl.value - property bool fill:true - property bool stroke:true - property real alpha:alphaCtrl.value - property real scaleX : scaleXCtrl.value - property real scaleY : scaleYCtrl.value - property real rotate : rotateCtrl.value - antialiasing: true + Text { + font.pointSize: 24 + font.bold: true + text: "Quadratic Curve" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } - onLineWidthChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onAlphaChanged:requestPaint(); - onScaleXChanged:requestPaint(); - onScaleYChanged:requestPaint(); - onRotateChanged:requestPaint(); - Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } } - Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } - Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } + Canvas { + id: canvas + width: 320 + height: 280 - onPaint: { - var ctx = canvas.getContext('2d'); - ctx.save(); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.globalAlpha = canvas.alpha; - ctx.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; - ctx.scale(canvas.scaleX, canvas.scaleY); - ctx.rotate(canvas.rotate); - // ![0] - ctx.beginPath(); - ctx.moveTo(75,25); - ctx.quadraticCurveTo(25,25,25,62.5); - ctx.quadraticCurveTo(25,100,50,100); - ctx.quadraticCurveTo(50,120,30,125); - ctx.quadraticCurveTo(60,120,65,100); - ctx.quadraticCurveTo(125,100,125,62.5); - ctx.quadraticCurveTo(125,25,75,25); - ctx.closePath(); - // ![0] - if (canvas.fill) - ctx.fill(); - if (canvas.stroke) - ctx.stroke(); + property color strokeStyle: Qt.darker(fillStyle, 1.3) + property color fillStyle: "#14aaff" // blue + property int lineWidth: lineWidthCtrl.value + property bool fill: true + property bool stroke: true + property real alpha: 1.0 + property real scale : scaleCtrl.value + property real rotate : rotateCtrl.value + antialiasing: true - // ![1] - ctx.fillStyle="green"; - ctx.font = "Bold 15px"; + onLineWidthChanged:requestPaint(); + onFillChanged:requestPaint(); + onStrokeChanged:requestPaint(); + onScaleChanged:requestPaint(); + onRotateChanged:requestPaint(); - ctx.fillText("QML酷毙了", 30, 60); - // ![1] - ctx.restore(); - } - } + onPaint: { + var ctx = canvas.getContext('2d'); + var originX = 75 + var originY = 75 + + ctx.save(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.translate(originX, originX); + ctx.strokeStyle = canvas.strokeStyle; + ctx.fillStyle = canvas.fillStyle; + ctx.lineWidth = canvas.lineWidth; + + ctx.translate(originX, originY) + ctx.rotate(canvas.rotate); + ctx.scale(canvas.scale, canvas.scale); + ctx.translate(-originX, -originY) - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"} - Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleX"} - Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleY"} - Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} + // ![0] + ctx.beginPath(); + ctx.moveTo(75,25); + ctx.quadraticCurveTo(25,25,25,62.5); + ctx.quadraticCurveTo(25,100,50,100); + ctx.quadraticCurveTo(50,120,30,125); + ctx.quadraticCurveTo(60,120,65,100); + ctx.quadraticCurveTo(125,100,125,62.5); + ctx.quadraticCurveTo(125,25,75,25); + ctx.closePath(); + // ![0] + + if (canvas.fill) + ctx.fill(); + if (canvas.stroke) + ctx.stroke(); + + ctx.restore(); + + // ![1] + ctx.fillStyle = "white"; + ctx.font = "Bold 17px"; + ctx.fillText("Qt Quick", 110, 140); + // ![1] + } } } - } + Column { + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id:lineWidthCtrl; min:1; max:10; init:2; name:"Outline"} + Slider {id:scaleCtrl; min:0.1; max:10; init:1; name:"Scale"} + Slider {id:rotateCtrl; min:0; max:Math.PI*2; init:0; name:"Rotate"} + } } diff --git a/examples/quick/canvas/roundedrect/roundedrect.qml b/examples/quick/canvas/roundedrect/roundedrect.qml index 42142cef19..5a0a77425a 100644 --- a/examples/quick/canvas/roundedrect/roundedrect.qml +++ b/examples/quick/canvas/roundedrect/roundedrect.qml @@ -40,84 +40,82 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 + id:container + width: 320 + height: 480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Rounded rectangle"; anchors.horizontalCenter:parent.horizontalCenter} - Canvas { - id:canvas - width:320 - height:280 - antialiasing: true + Column { + spacing: 6 + anchors.fill: parent + anchors.topMargin: 12 + Text { + font.pointSize: 24 + font.bold: true + text: "Rounded rectangle" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } + Canvas { + id: canvas + width: 320 + height: 280 + antialiasing: true - property int radius: rCtrl.value - property int rectx: rxCtrl.value - property int recty: ryCtrl.value - property int rectWidth: width - 2*rectx - property int rectHeight: height - 2*recty - property string strokeStyle:"blue" - property string fillStyle:"steelblue" - property int lineWidth:lineWidthCtrl.value - property bool fill:true - property bool stroke:true - property real alpha:alphaCtrl.value + property int radius: rCtrl.value + property int rectx: 60 + property int recty: 60 + property int rectWidth: width - 2*rectx + property int rectHeight: height - 2*recty + property color strokeStyle: Qt.darker(fillStyle, 1.4) + property color fillStyle: "#ae32a0" // purple + property int lineWidth: lineWidthCtrl.value + property bool fill: true + property bool stroke: true + property real alpha: 1.0 - onLineWidthChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onRadiusChanged:requestPaint(); - onRectxChanged:requestPaint(); - onRectyChanged:requestPaint(); - onAlphaChanged:requestPaint(); + onLineWidthChanged:requestPaint(); + onFillChanged:requestPaint(); + onStrokeChanged:requestPaint(); + onRadiusChanged:requestPaint(); - onPaint: { - var ctx = getContext("2d"); - ctx.save(); - ctx.clearRect(0,0,canvas.width, canvas.height); - ctx.strokeStyle = canvas.strokeStyle; - ctx.lineWidth = canvas.lineWidth - ctx.fillStyle = canvas.fillStyle - ctx.globalAlpha = canvas.alpha - ctx.beginPath(); - ctx.moveTo(rectx+radius,recty); // top side - ctx.lineTo(rectx+rectWidth-radius,recty); - // draw top right corner - ctx.arcTo(rectx+rectWidth,recty,rectx+rectWidth,recty+radius,radius); - ctx.lineTo(rectx+rectWidth,recty+rectHeight-radius); // right side - // draw bottom right corner - ctx.arcTo(rectx+rectWidth,recty+rectHeight,rectx+rectWidth-radius,recty+rectHeight,radius); - ctx.lineTo(rectx+radius,recty+rectHeight); // bottom side - // draw bottom left corner - ctx.arcTo(rectx,recty+rectHeight,rectx,recty+rectHeight-radius,radius); - ctx.lineTo(rectx,recty+radius); // left side - // draw top left corner - ctx.arcTo(rectx,recty,rectx+radius,recty,radius); - ctx.closePath(); - if (canvas.fill) - ctx.fill(); - if (canvas.stroke) - ctx.stroke(); - ctx.restore(); + onPaint: { + var ctx = getContext("2d"); + ctx.save(); + ctx.clearRect(0,0,canvas.width, canvas.height); + ctx.strokeStyle = canvas.strokeStyle; + ctx.lineWidth = canvas.lineWidth + ctx.fillStyle = canvas.fillStyle + ctx.globalAlpha = canvas.alpha + ctx.beginPath(); + ctx.moveTo(rectx+radius,recty); // top side + ctx.lineTo(rectx+rectWidth-radius,recty); + // draw top right corner + ctx.arcTo(rectx+rectWidth,recty,rectx+rectWidth,recty+radius,radius); + ctx.lineTo(rectx+rectWidth,recty+rectHeight-radius); // right side + // draw bottom right corner + ctx.arcTo(rectx+rectWidth,recty+rectHeight,rectx+rectWidth-radius,recty+rectHeight,radius); + ctx.lineTo(rectx+radius,recty+rectHeight); // bottom side + // draw bottom left corner + ctx.arcTo(rectx,recty+rectHeight,rectx,recty+rectHeight-radius,radius); + ctx.lineTo(rectx,recty+radius); // left side + // draw top left corner + ctx.arcTo(rectx,recty,rectx+radius,recty,radius); + ctx.closePath(); + if (canvas.fill) + ctx.fill(); + if (canvas.stroke) + ctx.stroke(); + ctx.restore(); + } } } - - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"} - Slider {id:rxCtrl; width:300; height:20; min:5; max:30; init:10; name:"rectx"} - Slider {id:ryCtrl; width:300; height:20; min:5; max:30; init:10; name:"recty"} - Slider {id:rCtrl; width:300; height:20; min:10; max:100; init:40; name:"Radius"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} - } + Column { + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: lineWidthCtrl ; min: 1 ; max: 10; init: 2 ; name: "Outline"} + Slider {id: rCtrl ; min: 10 ; max: 80 ; init: 40 ; name: "Radius"} } - } } diff --git a/examples/quick/canvas/smile/smile.qml b/examples/quick/canvas/smile/smile.qml index c8b01b305a..0251b1b101 100644 --- a/examples/quick/canvas/smile/smile.qml +++ b/examples/quick/canvas/smile/smile.qml @@ -40,87 +40,90 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 + id: container + width: 320 + height: 480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Smile with arcs"; anchors.horizontalCenter:parent.horizontalCenter} + Column { + spacing: 6 + anchors.fill: parent + anchors.topMargin: 12 - Canvas { - id:canvas - width:320 - height:280 - antialiasing: true + Text { + font.pointSize: 24 + font.bold: true + text: "Smile with arcs" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } - property string strokeStyle:"green" - property string fillStyle:"yellow" - property int lineWidth:lineWidthCtrl.value - property bool fill:true - property bool stroke:true - property real alpha:alphaCtrl.value - property real scaleX : scaleXCtrl.value - property real scaleY : scaleYCtrl.value - property real rotate : rotateCtrl.value + Canvas { + id: canvas + width: 320 + height: parent.height - controls.height + antialiasing: true - onLineWidthChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onAlphaChanged:requestPaint(); - onScaleXChanged:requestPaint(); - onScaleYChanged:requestPaint(); - onRotateChanged:requestPaint(); + property color strokeStyle: Qt.darker(fillStyle, 1.6) + property color fillStyle: "#e0c31e" // yellow + property int lineWidth: lineWidthCtrl.value + property bool fill: true + property bool stroke: true + property real scale : scaleCtrl.value + property real rotate : rotateCtrl.value - Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } } - Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } - Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } + onLineWidthChanged:requestPaint(); + onFillChanged:requestPaint(); + onStrokeChanged:requestPaint(); + onScaleChanged:requestPaint(); + onRotateChanged:requestPaint(); - onPaint: { - var ctx = canvas.getContext('2d'); - ctx.save(); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.globalAlpha = canvas.alpha; - ctx.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; - ctx.scale(canvas.scaleX, canvas.scaleY); - ctx.rotate(canvas.rotate); - ctx.beginPath(); - ctx.moveTo(75 + 50 * Math.cos(0), - 75 - 50 * Math.sin(Math.PI*2)); - ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle - ctx.moveTo(75,70); - ctx.arc(75,70,35,0,Math.PI,false); // Mouth (clockwise) - ctx.moveTo(60,65); - ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye - ctx.moveTo(90 + 5 * Math.cos(0), - 65 - 5 * Math.sin(Math.PI*2)); - ctx.moveTo(90,65); - ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye - ctx.closePath(); - if (canvas.fill) - ctx.fill(); - if (canvas.stroke) - ctx.stroke(); - ctx.restore(); - } - } + onPaint: { + var ctx = canvas.getContext('2d'); + var originX = 85 + var originY = 75 + ctx.save(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.translate(originX, originX); + ctx.globalAlpha = canvas.alpha; + ctx.strokeStyle = canvas.strokeStyle; + ctx.fillStyle = canvas.fillStyle; + ctx.lineWidth = canvas.lineWidth; + + ctx.translate(originX, originY) + ctx.scale(canvas.scale, canvas.scale); + ctx.rotate(canvas.rotate); + ctx.translate(-originX, -originY) - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"} - Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleX"} - Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleY"} - Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} + ctx.beginPath(); + ctx.moveTo(75 + 50 * Math.cos(0), + 75 - 50 * Math.sin(Math.PI*2)); + ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle + ctx.moveTo(75,70); + ctx.arc(75,70,35,0,Math.PI,false); // Mouth (clockwise) + ctx.moveTo(60,65); + ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye + ctx.moveTo(90 + 5 * Math.cos(0), + 65 - 5 * Math.sin(Math.PI*2)); + ctx.moveTo(90,65); + ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye + ctx.closePath(); + if (canvas.fill) + ctx.fill(); + if (canvas.stroke) + ctx.stroke(); + ctx.restore(); + } } } - } + Column { + id: controls + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: lineWidthCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "Outline"} + Slider {id: scaleCtrl ; min: 0.1 ; max: 10 ; init: 1 ; name: "Scale"} + Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"} + } } diff --git a/examples/quick/canvas/squircle/squircle.qml b/examples/quick/canvas/squircle/squircle.qml index 3044816479..4e5c5a49fc 100644 --- a/examples/quick/canvas/squircle/squircle.qml +++ b/examples/quick/canvas/squircle/squircle.qml @@ -40,114 +40,111 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 - - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Squircles"; anchors.horizontalCenter:parent.horizontalCenter} - Image { - anchors.horizontalCenter:parent.horizontalCenter - source:"squircle.png" - width:250 - height:25 - } - Canvas { - id:canvas - width:320 - height:250 - antialiasing: true - - property string strokeStyle:"blue" - property string fillStyle:"steelblue" - property int lineWidth:2 - property int nSize:nCtrl.value - property real radius:rCtrl.value - property bool fill:true - property bool stroke:false - property real px:xCtrl.value - property real py:yCtrl.value - property real alpha:alphaCtrl.value - - onAlphaChanged:requestPaint(); - onRadiusChanged:requestPaint(); - onLineWidthChanged:requestPaint(); - onNSizeChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onPxChanged:requestPaint(); - onPyChanged:requestPaint(); - - - onPaint: squcirle(); - - function squcirle() { - var ctx = canvas.getContext("2d"); - var N = canvas.nSize; - var R = canvas.radius; - - N=Math.abs(N); - var M=N; - if (N>100) M=100; - if (N<0.00000000001) M=0.00000000001; - - ctx.save(); - ctx.globalAlpha =canvas.alpha; - ctx.fillStyle = "gray"; - ctx.fillRect(0, 0, canvas.width, canvas.height); - - ctx.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; - - ctx.beginPath(); - var i = 0, x, y; - for (i=0; i<(2*R+1); i++){ - x = Math.round(i-R) + canvas.px; - y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py; - - if (i == 0) - ctx.moveTo(x, y); - else - ctx.lineTo(x, y); - } - - for (i=(2*R); i<(4*R+1); i++){ - x =Math.round(3*R-i)+canvas.px; - y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py; - ctx.lineTo(x, y); - } - ctx.closePath(); - if (canvas.stroke) { - ctx.stroke(); - } - - if (canvas.fill) { - ctx.fill(); - } - - ctx.fillStyle = "yellow"; - ctx.font = "Helvetica 16px"; - ctx.fillText("|X-" + Math.round(canvas.px) + "|^" + N + " + |Y-"+Math.round(canvas.py)+"|^" + N + " = |" + Math.round(R) + "|^" + N, canvas.px - 125, canvas.py); - ctx.restore(); + id: container + width: 320 + height: 480 + + Column { + spacing: 6 + anchors.fill: parent + anchors.topMargin: 12 + Text { + font.pointSize: 24 + font.bold: true + text: "Squircles" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" } - } - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:nCtrl; width:300; height:20; min:1; max:10; init:4; name:"N"} - Slider {id:rCtrl; width:300; height:20; min:30; max:180; init:100; name:"Radius"} - Slider {id:xCtrl; width:300; height:20; min:50; max:300; init:180; name:"X"} - Slider {id:yCtrl; width:300; height:20; min:30; max:300; init:220; name:"Y"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: "squircle.png" + width: 250 + height: 25 } + + Canvas { + id: canvas + width: 320 + height: 250 + antialiasing: true + + property color strokeStyle: Qt.darker(fillStyle, 1.2) + property color fillStyle: "#6400aa" + + property int lineWidth: 2 + property int nSize: nCtrl.value + property real radius: rCtrl.value + property bool fill: true + property bool stroke: false + property real px: width/2 + property real py: height/2 + 10 + property real alpha: 1.0 + + onRadiusChanged: requestPaint(); + onLineWidthChanged: requestPaint(); + onNSizeChanged: requestPaint(); + onFillChanged: requestPaint(); + onStrokeChanged: requestPaint(); + + onPaint: squcirle(); + + function squcirle() { + var ctx = canvas.getContext("2d"); + var N = canvas.nSize; + var R = canvas.radius; + + N=Math.abs(N); + var M=N; + if (N>100) M=100; + if (N<0.00000000001) M=0.00000000001; + + ctx.save(); + ctx.globalAlpha =canvas.alpha; + ctx.fillStyle = "white"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + ctx.strokeStyle = canvas.strokeStyle; + ctx.fillStyle = canvas.fillStyle; + ctx.lineWidth = canvas.lineWidth; + + ctx.beginPath(); + var i = 0, x, y; + for (i=0; i<(2*R+1); i++){ + x = Math.round(i-R) + canvas.px; + y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py; + + if (i == 0) + ctx.moveTo(x, y); + else + ctx.lineTo(x, y); + } + + for (i=(2*R); i<(4*R+1); i++){ + x =Math.round(3*R-i)+canvas.px; + y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py; + ctx.lineTo(x, y); + } + ctx.closePath(); + if (canvas.stroke) { + ctx.stroke(); + } + + if (canvas.fill) { + ctx.fill(); + } + ctx.restore(); + } + } + + } + Column { + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: nCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "N"} + Slider {id: rCtrl ; min: 30 ; max: 180 ; init: 60 ; name: "Radius"} } - } } diff --git a/examples/quick/canvas/tiger/tiger.qml b/examples/quick/canvas/tiger/tiger.qml index 8b629eecf3..94a7d2dc3d 100644 --- a/examples/quick/canvas/tiger/tiger.qml +++ b/examples/quick/canvas/tiger/tiger.qml @@ -40,89 +40,95 @@ import QtQuick 2.0 import "../contents" +import "../../shared" import "tiger.js" as Tiger + Item { - id:container - width:320 - height:480 + id: container + width: 320 + height: 480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Tiger with SVG path"; anchors.horizontalCenter:parent.horizontalCenter} + Column { + spacing: 6 + anchors.fill: parent + anchors.topMargin: 12 - Canvas { - id:canvas - width:320 - height:280 - antialiasing: true - property string strokeStyle:"steelblue" - property string fillStyle:"yellow" - property bool fill:true - property bool stroke:true - property real alpha:alphaCtrl.value - property real scaleX : scaleXCtrl.value - property real scaleY : scaleYCtrl.value - property real rotate : rotateCtrl.value - property int frame:0 + Text { + font.pointSize: 24 + font.bold: true + text: "Tiger with SVG path" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } - onFillChanged: requestPaint(); - onStrokeChanged: requestPaint(); - onAlphaChanged: requestPaint(); - onScaleXChanged: requestPaint(); - onScaleYChanged: requestPaint(); - onRotateChanged: requestPaint(); + Canvas { + id: canvas + width: 320 + height: 280 + antialiasing: true - onPainted : { - canvas.frame++; - if (canvas.frame < Tiger.tiger.length) - requestPaint(); - } - onPaint: { - var ctx = canvas.getContext('2d'); - ctx.save(); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.globalAlpha = canvas.alpha; - ctx.scale(canvas.scaleX, canvas.scaleY); - ctx.rotate(canvas.rotate); - ctx.globalCompositeOperation = "source-over"; - ctx.translate(canvas.width/2, canvas.height/2); - ctx.strokeStyle = Qt.rgba(.3, .3, .3,1); - ctx.lineWidth = 1; + property string strokeStyle: "steelblue" + property string fillStyle: "yellow" + property bool fill: true + property bool stroke: true + property real alpha: alphaCtrl.value + property real scale: scaleCtrl.value + property real rotate: rotateCtrl.value + property int frame: 0 - //! [0] - for (var i = 0; i < canvas.frame && i < Tiger.tiger.length; i++) { - if (Tiger.tiger[i].width != undefined) - ctx.lineWidth = Tiger.tiger[i].width; + onFillChanged: requestPaint(); + onStrokeChanged: requestPaint(); + onAlphaChanged: requestPaint(); + onScaleChanged: requestPaint(); + onRotateChanged: requestPaint(); - if (Tiger.tiger[i].path != undefined) - ctx.path = Tiger.tiger[i].path; + onPaint: { + var ctx = canvas.getContext('2d'); + var originX = canvas.width/2 + 30 + var originY = canvas.height/2 + 60 - if (Tiger.tiger[i].fill != undefined) { - ctx.fillStyle = Tiger.tiger[i].fill; - ctx.fill(); - } + ctx.save(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.globalAlpha = canvas.alpha; + ctx.globalCompositeOperation = "source-over"; + + ctx.translate(originX, originY) + ctx.scale(canvas.scale, canvas.scale); + ctx.rotate(canvas.rotate); + ctx.translate(-originX, -originY) - if (Tiger.tiger[i].stroke != undefined) { - ctx.strokeStyle = Tiger.tiger[i].stroke; - ctx.stroke(); + ctx.strokeStyle = Qt.rgba(.3, .3, .3,1); + ctx.lineWidth = 1; + + //! [0] + for (var i = 0; i < Tiger.tiger.length; i++) { + if (Tiger.tiger[i].width != undefined) + ctx.lineWidth = Tiger.tiger[i].width; + + if (Tiger.tiger[i].path != undefined) + ctx.path = Tiger.tiger[i].path; + + if (Tiger.tiger[i].fill != undefined) { + ctx.fillStyle = Tiger.tiger[i].fill; + ctx.fill(); + } + + if (Tiger.tiger[i].stroke != undefined) { + ctx.strokeStyle = Tiger.tiger[i].stroke; + ctx.stroke(); + } } + //! [0] + ctx.restore(); } - //! [0] - ctx.restore(); } } - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:0.5; name:"ScaleX"} - Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:0.5; name:"ScaleY"} - Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} - } + Column { + id: controls + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: scaleCtrl ; min: 0.1 ; max: 1 ; init: 0.3 ; name: "Scale"} + Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"} + Slider {id: alphaCtrl ; min: 0 ; max: 1 ; init: 1 ; name: "Alpha"} } - } } diff --git a/examples/quick/customitems/painteditem/textballoons.qml b/examples/quick/customitems/painteditem/textballoons.qml index a851794e2f..e498ca3a7c 100644 --- a/examples/quick/customitems/painteditem/textballoons.qml +++ b/examples/quick/customitems/painteditem/textballoons.qml @@ -40,7 +40,7 @@ ****************************************************************************/ import QtQuick 2.0 -import TextBalloonPlugin 1.0 +import "TextBalloonPlugin" 1.0 Item { height: 480 diff --git a/examples/quick/demos/clocks/clocks.qmlproject b/examples/quick/demos/clocks/clocks.qmlproject new file mode 100644 index 0000000000..b15654600e --- /dev/null +++ b/examples/quick/demos/clocks/clocks.qmlproject @@ -0,0 +1,8 @@ +import QmlProject 1.1 + +Project { + mainFile: "clocks.qml" + QmlFiles { directory: "." } + JavaScriptFiles { directory: "." } + ImageFiles { directory: "." } +} diff --git a/examples/quick/demos/demos.pro b/examples/quick/demos/demos.pro index 474b5b1bc0..67128a905f 100644 --- a/examples/quick/demos/demos.pro +++ b/examples/quick/demos/demos.pro @@ -8,4 +8,5 @@ SUBDIRS = samegame \ EXAMPLE_FILES = \ clocks \ photoviewer \ + photosurface \ rssnews diff --git a/examples/quick/demos/photosurface/doc/images/qml-photosurface-example-small.png b/examples/quick/demos/photosurface/doc/images/qml-photosurface-example-small.png Binary files differnew file mode 100644 index 0000000000..a0cd823999 --- /dev/null +++ b/examples/quick/demos/photosurface/doc/images/qml-photosurface-example-small.png diff --git a/examples/quick/demos/photosurface/doc/src/photosurface.qdoc b/examples/quick/demos/photosurface/doc/src/photosurface.qdoc new file mode 100644 index 0000000000..343acce14a --- /dev/null +++ b/examples/quick/demos/photosurface/doc/src/photosurface.qdoc @@ -0,0 +1,37 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \title QML Demo - Photo Surface + \example demos/photosurface + \brief This is the typical touch photo-shuffling example written in QML. + \image qml-photosurface-example-small.png + \ingroup qtquickexamples + + This example demonstrates how to handle dragging, rotation and + pinch zooming within the same item using a PinchArea containing a MouseArea. +*/ diff --git a/examples/quick/demos/photosurface/photosurface.qml b/examples/quick/demos/photosurface/photosurface.qml new file mode 100644 index 0000000000..53e0edffbe --- /dev/null +++ b/examples/quick/demos/photosurface/photosurface.qml @@ -0,0 +1,130 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.0 +import QtQuick.Dialogs 1.0 +import Qt.labs.folderlistmodel 1.0 + +Rectangle { + id: root + width: 1024; height: 600 + color: "black" + visible: true + property int highestZ: 0 + property real defaultSize: 200 + + FileDialog { + id: fileDialog + title: "Choose a folder with some images" + selectFolder: true + onAccepted: folderModel.folder = fileUrl + "/" + } + + Repeater { + model: FolderListModel { + id: folderModel + objectName: "folderModel" + showDirs: false + nameFilters: ["*.png", "*.jpg", "*.gif"] + } + Rectangle { + id: photoFrame + width: image.width * image.scale + 20 + height: image.height * image.scale + 20 + border.color: "black" + border.width: 2 + smooth: true + antialiasing: true + x: Math.random() * root.width - defaultSize + y: Math.random() * root.height - defaultSize + rotation: Math.random() * 13 - 6 + Image { + id: image + anchors.centerIn: parent + fillMode: Image.PreserveAspectFit + source: folderModel.folder + fileName + scale: defaultSize / Math.max(sourceSize.width, sourceSize.height) + antialiasing: true + } + PinchArea { + anchors.fill: parent + pinch.target: photoFrame + pinch.minimumRotation: -360 + pinch.maximumRotation: 360 + pinch.minimumScale: 0.1 + pinch.maximumScale: 10 + onPinchFinished: photoFrame.border.color = "black"; + MouseArea { + id: dragArea + hoverEnabled: true + anchors.fill: parent + drag.target: photoFrame + onPressed: photoFrame.z = ++root.highestZ; + onEntered: photoFrame.border.color = "red"; + onExited: photoFrame.border.color = "black"; + onWheel: { + if (wheel.modifiers & Qt.ControlModifier) { + photoFrame.rotation += wheel.angleDelta.y / 120 * 5; + if (Math.abs(photoFrame.rotation) < 4) + photoFrame.rotation = 0; + } else { + photoFrame.rotation += wheel.angleDelta.x / 120; + if (Math.abs(photoFrame.rotation) < 0.6) + photoFrame.rotation = 0; + var scaleBefore = image.scale; + image.scale += image.scale * wheel.angleDelta.y / 120 / 10; + photoFrame.x -= image.width * (image.scale - scaleBefore) / 2.0; + photoFrame.y -= image.height * (image.scale - scaleBefore) / 2.0; + } + } + } + } + } + } + Text { + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.margins: 10 + color: "darkgrey" + text: "On a touchscreen: use two fingers to zoom and rotate, one finger to drag\n" + + "With a mouse: drag normally, use the vertical wheel to zoom, horizontal wheel to rotate, or hold Ctrl while using the vertical wheel to rotate" + } + + Component.onCompleted: fileDialog.open() +} diff --git a/examples/quick/demos/photosurface/photosurface.qmlproject b/examples/quick/demos/photosurface/photosurface.qmlproject new file mode 100644 index 0000000000..ae2065f59c --- /dev/null +++ b/examples/quick/demos/photosurface/photosurface.qmlproject @@ -0,0 +1,20 @@ +import QmlProject 1.1 + +Project { + mainFile: "photosurface.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + Files { + filter: "*.ts" + directory: "i18n" + } +} diff --git a/examples/quick/demos/photoviewer/PhotoViewerCore/AlbumDelegate.qml b/examples/quick/demos/photoviewer/PhotoViewerCore/AlbumDelegate.qml index 4bd5e33ae3..d94231c9b5 100644 --- a/examples/quick/demos/photoviewer/PhotoViewerCore/AlbumDelegate.qml +++ b/examples/quick/demos/photoviewer/PhotoViewerCore/AlbumDelegate.qml @@ -41,6 +41,7 @@ import QtQuick 2.0 import QtQuick.XmlListModel 2.0 +import QtQml.Models 2.1 Component { id: albumDelegate @@ -69,7 +70,7 @@ Component { Package.name: 'album' id: albumWrapper; width: 210; height: 220 - VisualDataModel { + DelegateModel { id: visualModel; delegate: PhotoDelegate { } model: RssModel { id: rssModel; tags: tag } } diff --git a/examples/quick/demos/photoviewer/photoviewer.qml b/examples/quick/demos/photoviewer/photoviewer.qml index fa7c83f74e..df344accd5 100644 --- a/examples/quick/demos/photoviewer/photoviewer.qml +++ b/examples/quick/demos/photoviewer/photoviewer.qml @@ -40,6 +40,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 import "PhotoViewerCore" Rectangle { @@ -58,7 +59,7 @@ Rectangle { ListElement { tag: "Prague" } } - VisualDataModel { id: albumVisualModel; model: photosModel; delegate: AlbumDelegate {} } + DelegateModel { id: albumVisualModel; model: photosModel; delegate: AlbumDelegate {} } GridView { id: albumView; width: parent.width; height: parent.height; cellWidth: 210; cellHeight: 220 diff --git a/examples/quick/demos/stocqt/stocqt.qml b/examples/quick/demos/stocqt/stocqt.qml index ec353737fe..9bcffd972f 100644 --- a/examples/quick/demos/stocqt/stocqt.qml +++ b/examples/quick/demos/stocqt/stocqt.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 import "./content" ListView { @@ -66,7 +67,7 @@ ListView { } } - model: VisualItemModel { + model: ObjectModel { StockListView { id: listView width: root.width diff --git a/examples/quick/dialogs/ColorDialogs.qml b/examples/quick/dialogs/ColorDialogs.qml new file mode 100644 index 0000000000..7817c8edf8 --- /dev/null +++ b/examples/quick/dialogs/ColorDialogs.qml @@ -0,0 +1,109 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import QtQuick.Dialogs 1.0 +import "../shared" + +Rectangle { + width: 320 + height: 200 + color: palette.window + + SystemPalette { id: palette } + + ColorDialog { + id: colorDialog + visible: colorDialogVisible.checked + modality: colorDialogModal.checked ? Qt.WindowModal : Qt.NonModal + title: "Choose a color" + color: "green" + showAlphaChannel: colorDialogAlpha.checked + onAccepted: { console.log("Accepted: " + color) } + onRejected: { console.log("Rejected") } + } + + Column { + anchors.fill: parent + anchors.margins: 8 + spacing: 8 + Text { + font.bold: true + text: "Color dialog properties:" + } + CheckBox { + id: colorDialogModal + text: "Modal" + checked: true + Binding on checked { value: colorDialog.modality != Qt.NonModal } + } + CheckBox { + id: colorDialogAlpha + text: "Show alpha channel" + Binding on checked { value: colorDialog.showAlphaChannel } + } + CheckBox { + id: colorDialogVisible + text: "Visible" + Binding on checked { value: colorDialog.visible } + } + Row { + id: colorRow + spacing: parent.spacing + height: colorLabel.implicitHeight * 2.0 + Rectangle { + color: colorDialog.color + height: parent.height + width: height * 2 + border.color: "black" + MouseArea { + anchors.fill: parent + onClicked: colorDialog.open() + } + } + Text { + id: colorLabel + color: palette.windowText + text: "<b>current color:</b> " + colorDialog.color + anchors.verticalCenter: parent.verticalCenter + } + } + } +} diff --git a/examples/quick/dialogs/FileDialogs.qml b/examples/quick/dialogs/FileDialogs.qml new file mode 100644 index 0000000000..a6df29bb37 --- /dev/null +++ b/examples/quick/dialogs/FileDialogs.qml @@ -0,0 +1,166 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 +import QtQuick.Dialogs 1.0 +import "../shared" + +Rectangle { + + width: 580 + height: 360 + color: palette.window + SystemPalette { id: palette } + + Rectangle { + id: toolbar + width: parent.width + height: 40 + color: Qt.darker(palette.window, 1.1) + border.color: Qt.darker(palette.window, 1.3) + Row { + spacing: 6 + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 8 + height: parent.height - 6 + width: parent.width + Button { + text: "Open" + anchors.verticalCenter: parent.verticalCenter + onClicked: fileDialog.open() + } + Button { + text: "Close" + anchors.verticalCenter: parent.verticalCenter + onClicked: fileDialog.close() + } + Button { + text: "/tmp" + anchors.verticalCenter: parent.verticalCenter + // TODO: QTBUG-29814 This isn't portable, but we don't expose QDir::tempPath to QML yet. + onClicked: fileDialog.folder = "/tmp" + } + } + } + + FileDialog { + id: fileDialog + visible: fileDialogVisible.checked + modality: fileDialogModal.checked ? Qt.WindowModal : Qt.NonModal + title: fileDialogSelectFolder.checked ? "Choose a folder" : + (fileDialogSelectMultiple.checked ? "Choose some files" : "Choose a file") + selectExisting: fileDialogSelectExisting.checked + selectMultiple: fileDialogSelectMultiple.checked + selectFolder: fileDialogSelectFolder.checked + nameFilters: [ "Image files (*.png *.jpg)", "All files (*)" ] + selectedNameFilter: "All files (*)" + onAccepted: { console.log("Accepted: " + fileUrls) } + onRejected: { console.log("Rejected") } + } + + Column { + anchors.left: parent.left + anchors.right: parent.right + anchors.top: toolbar.bottom + anchors.margins: 8 + spacing: 8 + Text { + color: palette.windowText + font.bold: true + text: "File dialog properties:" + } + CheckBox { + id: fileDialogModal + text: "Modal" + checked: true + Binding on checked { value: fileDialog.modality != Qt.NonModal } + } + CheckBox { + id: fileDialogSelectFolder + text: "Select Folder" + Binding on checked { value: fileDialog.selectFolder } + } + CheckBox { + id: fileDialogSelectExisting + text: "Select Existing Files" + checked: true + Binding on checked { value: fileDialog.selectExisting } + } + CheckBox { + id: fileDialogSelectMultiple + text: "Select Multiple Files" + Binding on checked { value: fileDialog.selectMultiple } + } + CheckBox { + id: fileDialogVisible + text: "Visible" + Binding on checked { value: fileDialog.visible } + } + Text { + color: palette.windowText + text: "<b>current view folder:</b> " + fileDialog.folder + } + Text { + color: palette.windowText + text: "<b>name filters:</b> {" + fileDialog.nameFilters + "}" + width: parent.width + wrapMode: Text.Wrap + } + Text { + color: palette.windowText + text: "<b>current filter:</b>" + fileDialog.selectedNameFilter + width: parent.width + wrapMode: Text.Wrap + } + Text { + color: palette.windowText + text: "<b>chosen files:</b> " + fileDialog.fileUrls + width: parent.width + wrapMode: Text.Wrap + } + Text { + color: palette.windowText + text: "<b>chosen single path:</b> " + fileDialog.fileUrl + width: parent.width + wrapMode: Text.Wrap + } + } +} diff --git a/examples/quick/doc/src/qml-extending.qdoc b/examples/quick/doc/src/qml-extending.qdoc index 5debe9e02c..ee2dd06623 100644 --- a/examples/quick/doc/src/qml-extending.qdoc +++ b/examples/quick/doc/src/qml-extending.qdoc @@ -31,17 +31,17 @@ \brief Exporting C++ Classes \ingroup qmlextendingexamples -The Adding Types Example shows how to add a new element type, \c Person, to QML. +The Adding Types Example shows how to add a new object type, \c Person, to QML. The \c Person type can be used from QML like this: \snippet qml/referenceexamples/adding/example.qml 0 \section1 Declare the Person class -All QML elements map to C++ types. Here we declare a basic C++ Person class +All QML types map to C++ types. Here we declare a basic C++ Person class with the two properties we want accessible on the QML type - name and shoeSize. Although in this example we use the same name for the C++ class as the QML -element, the C++ class can be named differently, or appear in a namespace. +type, the C++ class can be named differently, or appear in a namespace. \snippet qml/referenceexamples/adding/person.h 0 @@ -74,7 +74,7 @@ This example builds on: \endlist The Object and List Property Types example shows how to add object and list -properties in QML. This example adds a BirthdayParty element that specifies +properties in QML. This example adds a BirthdayParty type that specifies a birthday party, consisting of a celebrant and a list of guests. People are specified using the People QML type built in the previous example. @@ -125,8 +125,8 @@ This example builds on: \endlist The Inheritance and Coercion Example shows how to use base classes to assign -elements of more than one type to a property. It specializes the Person element -developed in the previous examples into two elements - a \c Boy and a \c Girl. +types of more than one type to a property. It specializes the Person type +developed in the previous examples into two types - a \c Boy and a \c Girl. \snippet qml/referenceexamples/coercion/example.qml 0 @@ -164,7 +164,7 @@ and their QML name with the QML engine. \section1 Running the example -The BirthdayParty element has not changed since the previous example. The +The BirthdayParty type has not changed since the previous example. The celebrant and guests property still use the People type. \snippet qml/referenceexamples/coercion/birthdayparty.h 0 @@ -204,7 +204,7 @@ The only difference between this example and the last, is the addition of the \snippet qml/referenceexamples/default/birthdayparty.h 0 The default property specifies the property to assign to whenever an explicit -property is not specified, in the case of the BirthdayParty element the guest +property is not specified, in the case of the BirthdayParty type the guest property. It is purely a syntactic simplification, the behavior is identical to specifying the property by name, but it can add a more natural feel in many situations. The default property must be either an object or list property. diff --git a/examples/quick/draganddrop/doc/src/draganddrop.qdoc b/examples/quick/draganddrop/doc/src/draganddrop.qdoc index 4e97902354..381fdd1299 100644 --- a/examples/quick/draganddrop/doc/src/draganddrop.qdoc +++ b/examples/quick/draganddrop/doc/src/draganddrop.qdoc @@ -25,7 +25,7 @@ ** ****************************************************************************/ /*! - \title QtQuick Examples - Drag and Drop + \title Qt Quick Examples - Drag and Drop \example draganddrop \brief This is a collection of QML drag and drop examples \image qml-draganddrop-example.png @@ -49,7 +49,7 @@ \section2 GridView adds drag and drop to a GridView, allowing you to reorder the list. - It uses a VisualDataModel to move a delegate item to the position of another item + It uses a DelegateModel to move a delegate item to the position of another item it is dragged over. \snippet quick/draganddrop/views/gridview.qml 0 diff --git a/examples/quick/draganddrop/views/gridview.qml b/examples/quick/draganddrop/views/gridview.qml index 4df265e8af..f2c9c75e42 100644 --- a/examples/quick/draganddrop/views/gridview.qml +++ b/examples/quick/draganddrop/views/gridview.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 GridView { id: root @@ -50,7 +51,7 @@ GridView { } //! [0] - model: VisualDataModel { + model: DelegateModel { //! [0] id: visualModel model: ListModel { @@ -84,7 +85,7 @@ GridView { delegate: MouseArea { id: delegateRoot - property int visualIndex: VisualDataModel.itemsIndex + property int visualIndex: DelegateModel.itemsIndex width: 80; height: 80 drag.target: icon diff --git a/examples/quick/embeddedinwidgets/TextBox.qml b/examples/quick/embeddedinwidgets/TextBox.qml new file mode 100644 index 0000000000..9664726305 --- /dev/null +++ b/examples/quick/embeddedinwidgets/TextBox.qml @@ -0,0 +1,76 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the demonstration applications of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Digia gives you certain additional +** rights. These rights are described in the Digia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3.0 as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU General Public License version 3.0 requirements will be +** met: http://www.gnu.org/copyleft/gpl.html. +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +FocusScope { + id: root + + width: 100 + height: 30 + + property Item nextInFocus; + property string label; + + Rectangle { + anchors.margins: 2 + anchors.fill: parent + radius: 8 + gradient: Gradient { + GradientStop { position: 0; color: "lightgray" } + GradientStop { position: 1; color: "white" } + } + border.color: "white" + border.width: 2 + antialiasing: true + + TextInput { + anchors.fill: parent + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + focus: true + + text: root.label; + + KeyNavigation.tab: root.nextInFocus; + } + } +} diff --git a/examples/quick/embeddedinwidgets/embeddedinwidgets.pro b/examples/quick/embeddedinwidgets/embeddedinwidgets.pro new file mode 100644 index 0000000000..de47a397ab --- /dev/null +++ b/examples/quick/embeddedinwidgets/embeddedinwidgets.pro @@ -0,0 +1,12 @@ +TEMPLATE = app +QT += widgets quick + +SOURCES += main.cpp + +OTHER_FILES += main.qml TextBox.qml + +RESOURCES += \ + embeddedinwidgets.qrc + +target.path = $$[QT_INSTALL_EXAMPLES]/quick/embeddedinwidgets +INSTALLS += target diff --git a/examples/quick/embeddedinwidgets/embeddedinwidgets.qrc b/examples/quick/embeddedinwidgets/embeddedinwidgets.qrc new file mode 100644 index 0000000000..62e0ed2161 --- /dev/null +++ b/examples/quick/embeddedinwidgets/embeddedinwidgets.qrc @@ -0,0 +1,6 @@ +<RCC> + <qresource prefix="/embeddedinwidgets"> + <file>main.qml</file> + <file>TextBox.qml</file> + </qresource> +</RCC> diff --git a/examples/quick/embeddedinwidgets/main.cpp b/examples/quick/embeddedinwidgets/main.cpp new file mode 100644 index 0000000000..7a30b277de --- /dev/null +++ b/examples/quick/embeddedinwidgets/main.cpp @@ -0,0 +1,73 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the demonstration applications of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Digia gives you certain additional +** rights. These rights are described in the Digia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3.0 as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU General Public License version 3.0 requirements will be +** met: http://www.gnu.org/copyleft/gpl.html. +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include <QWidget> +#include <QApplication> +#include <QVBoxLayout> +#include <QLineEdit> + +#include <QQuickView> + +int main(int argc, char **argv) +{ + QApplication app(argc, argv); + + QWidget rootWidget; + + QVBoxLayout *layout = new QVBoxLayout(); + rootWidget.setLayout(layout); + + QQuickView *view = new QQuickView(); + view->setResizeMode(QQuickView::SizeRootObjectToView); + view->setSource(QUrl(QStringLiteral("qrc:///embeddedinwidgets/main.qml"))); + + QWidget *container = QWidget::createWindowContainer(view); + container->setMinimumSize(view->size()); + container->setFocusPolicy(Qt::TabFocus); + + layout->addWidget(new QLineEdit(QStringLiteral("A QLineEdit"))); + layout->addWidget(container); + layout->addWidget(new QLineEdit(QStringLiteral("A QLineEdit"))); + + rootWidget.show(); + + return app.exec(); +} diff --git a/examples/quick/embeddedinwidgets/main.qml b/examples/quick/embeddedinwidgets/main.qml new file mode 100644 index 0000000000..f5a941a258 --- /dev/null +++ b/examples/quick/embeddedinwidgets/main.qml @@ -0,0 +1,113 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the demonstration applications of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Digia gives you certain additional +** rights. These rights are described in the Digia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3.0 as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU General Public License version 3.0 requirements will be +** met: http://www.gnu.org/copyleft/gpl.html. +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Rectangle { + id: window + + width: 400 + height: 200 + + gradient: Gradient { + GradientStop { position: 0; color: "lightsteelblue" } + GradientStop { position: 1; color: "black" } + } + + Column { + id: column + opacity: 0.99 // work around QTBUG-29037 + + y: 50 + width: 200 + anchors.horizontalCenter: parent.horizontalCenter + + TextBox { + id: input1 + width: parent.width + height: 30 + focus: true + + label: "A QML text box.." + + nextInFocus: input2; + } + + TextBox { + id: input2 + width: parent.width + height: 30 + + label: "Another QML text box.." + + nextInFocus: input1; + } + + layer.enabled: true + layer.smooth: true + } + + ShaderEffect { + anchors.top: column.bottom + width: column.width + height: column.height; + anchors.left: column.left + + property variant source: column; + property size sourceSize: Qt.size(0.5 / column.width, 0.5 / column.height); + + fragmentShader: " + varying highp vec2 qt_TexCoord0; + uniform lowp sampler2D source; + uniform lowp vec2 sourceSize; + uniform lowp float qt_Opacity; + void main() { + + lowp vec2 tc = qt_TexCoord0 * vec2(1, -1) + vec2(0, 1); + lowp vec4 col = 0.25 * (texture2D(source, tc + sourceSize) + + texture2D(source, tc- sourceSize) + + texture2D(source, tc + sourceSize * vec2(1, -1)) + + texture2D(source, tc + sourceSize * vec2(-1, 1)) + ); + gl_FragColor = col * qt_Opacity * (1.0 - qt_TexCoord0.y) * 0.2; + }" + } +} diff --git a/examples/quick/imageelements/doc/src/imageelements.qdoc b/examples/quick/imageelements/doc/src/imageelements.qdoc index d40b51898d..5abcece4fc 100644 --- a/examples/quick/imageelements/doc/src/imageelements.qdoc +++ b/examples/quick/imageelements/doc/src/imageelements.qdoc @@ -27,11 +27,11 @@ /*! \title QML Examples - Image Elements \example imageelements - \brief This is a collection of QML examples relating to image elements. + \brief This is a collection of QML examples relating to image types. \image qml-imageelements-example.png \ingroup qtquickexamples - This is a collection of small QML examples relating to image elements. + This is a collection of small QML examples relating to image types. 'BorderImage' shows off the various scaling modes of the BorderImage item by setting its horizontalTileMode and verticalTileMode properties. @@ -43,7 +43,7 @@ \snippet quick/imageelements/content/ShadowRectangle.qml shadow 'AnimatedSprite' shows how to display a simple animation using an - AnimatedSprite element: + AnimatedSprite object: \snippet quick/imageelements/animatedsprite.qml sprite The sprite animation will loop 3 times. @@ -57,4 +57,3 @@ \snippet quick/imageelements/spritesequence.qml animation At the end of the animation the bear is set back to its initial state. */ - diff --git a/examples/quick/keyinteraction/doc/src/keyinteraction.qdoc b/examples/quick/keyinteraction/doc/src/keyinteraction.qdoc index 129efbf112..d29536c66c 100644 --- a/examples/quick/keyinteraction/doc/src/keyinteraction.qdoc +++ b/examples/quick/keyinteraction/doc/src/keyinteraction.qdoc @@ -25,7 +25,7 @@ ** ****************************************************************************/ /*! - \title QtQuick Examples - Key Interaction + \title Qt Quick Examples - Key Interaction \example keyinteraction \brief This is a collection of QML keyboard interaction examples. \image qml-keyinteraction-example.png diff --git a/examples/quick/keyinteraction/focus/Core/GridMenu.qml b/examples/quick/keyinteraction/focus/Core/GridMenu.qml index 3dd0637344..e18ec1f0d3 100644 --- a/examples/quick/keyinteraction/focus/Core/GridMenu.qml +++ b/examples/quick/keyinteraction/focus/Core/GridMenu.qml @@ -45,7 +45,7 @@ FocusScope { onActiveFocusChanged: { if (activeFocus) - mainView.state = "" + mainView.state = "showGridViews" } Rectangle { @@ -63,6 +63,7 @@ FocusScope { focus: true model: 12 + KeyNavigation.up: tabMenu KeyNavigation.down: listMenu KeyNavigation.left: contextMenu diff --git a/examples/quick/keyinteraction/focus/Core/TabMenu.qml b/examples/quick/keyinteraction/focus/Core/TabMenu.qml new file mode 100644 index 0000000000..5eea611b44 --- /dev/null +++ b/examples/quick/keyinteraction/focus/Core/TabMenu.qml @@ -0,0 +1,104 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +FocusScope { + onActiveFocusChanged: { + if (activeFocus) + mainView.state = "showTabViews" + } + + Rectangle { + anchors.fill: parent + clip: true + gradient: Gradient { + GradientStop { position: 0.0; color: "#193441" } + GradientStop { position: 1.0; color: Qt.darker("#193441") } + } + + Row { + id: tabView + anchors.fill: parent; anchors.leftMargin: 20; anchors.rightMargin: 20 + Repeater { + activeFocusOnTab: false + model: 5 + Item { + id: container + width: 152; height: 152 + activeFocusOnTab: true + focus: true + + KeyNavigation.up: listMenu + KeyNavigation.down: gridMenu + + Rectangle { + id: content + color: "transparent" + antialiasing: true + anchors.fill: parent; anchors.margins: 20; radius: 10 + + Rectangle { color: "#91AA9D"; anchors.fill: parent; anchors.margins: 3; radius: 8; antialiasing: true } + Image { source: "images/qt-logo.png"; anchors.centerIn: parent } + } + + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + + onClicked: { + container.forceActiveFocus() + } + } + + states: State { + name: "active"; when: container.activeFocus + PropertyChanges { target: content; color: "#FCFFF5"; scale: 1.1 } + } + + transitions: Transition { + NumberAnimation { properties: "scale"; duration: 100 } + } + } + } + } + } +} diff --git a/examples/quick/keyinteraction/focus/focus.qml b/examples/quick/keyinteraction/focus/focus.qml index 193b3d7b3a..91fb146e40 100644 --- a/examples/quick/keyinteraction/focus/focus.qml +++ b/examples/quick/keyinteraction/focus/focus.qml @@ -44,7 +44,7 @@ import "Core" Rectangle { id: window - width: 800; height: 480 + width: 800; height: 640 color: "#3E606F" FocusScope { @@ -53,17 +53,24 @@ Rectangle { width: parent.width; height: parent.height focus: true - GridMenu { - id: gridMenu - width: parent.width; height: 320 + TabMenu { + id: tabMenu + y: 160; width: parent.width; height: 160 focus: true - interactive: parent.activeFocus + activeFocusOnTab: true + } + + GridMenu { + id: gridMenu + y: 320; width: parent.width; height: 320 + activeFocusOnTab: true } ListMenu { id: listMenu - y: 320; width: parent.width; height: 320 + y: 640; width: parent.width; height: 320 + activeFocusOnTab: true } Rectangle { @@ -73,11 +80,28 @@ Rectangle { opacity: 0 } - states: State { - name: "showListViews" - PropertyChanges { target: gridMenu; y: -160 } - PropertyChanges { target: listMenu; y: 160 } - } + states: [ + State { + name: "showTabViews" + PropertyChanges { target: tabMenu; y: 160 } + PropertyChanges { target: gridMenu; y: 320 } + PropertyChanges { target: listMenu; y: 640 } + }, + + State { + name: "showGridViews" + PropertyChanges { target: tabMenu; y: 0 } + PropertyChanges { target: gridMenu; y: 160 } + PropertyChanges { target: listMenu; y: 480 } + }, + + State { + name: "showListViews" + PropertyChanges { target: tabMenu; y: -160 } + PropertyChanges { target: gridMenu; y: 0 } + PropertyChanges { target: listMenu; y: 320 } + } + ] transitions: Transition { NumberAnimation { properties: "y"; duration: 600; easing.type: Easing.OutQuint } diff --git a/examples/quick/keyinteraction/keyinteraction.qrc b/examples/quick/keyinteraction/keyinteraction.qrc index 21bde4472c..c719654835 100644 --- a/examples/quick/keyinteraction/keyinteraction.qrc +++ b/examples/quick/keyinteraction/keyinteraction.qrc @@ -8,5 +8,6 @@ <file>focus/Core/GridMenu.qml</file> <file>focus/Core/ListMenu.qml</file> <file>focus/Core/ListViewDelegate.qml</file> + <file>focus/Core/TabMenu.qml</file> </qresource> </RCC> diff --git a/examples/quick/localstorage/doc/src/localstorage.qdoc b/examples/quick/localstorage/doc/src/localstorage.qdoc index 38cb735576..0a5d1cd6fd 100644 --- a/examples/quick/localstorage/doc/src/localstorage.qdoc +++ b/examples/quick/localstorage/doc/src/localstorage.qdoc @@ -25,7 +25,7 @@ ** ****************************************************************************/ /*! - \title QtQuick Examples - Local Storage + \title Qt Quick Examples - Local Storage \example localstorage \brief A collection of QML local storage examples. \image qml-localstorage-example.png diff --git a/examples/quick/mousearea/doc/src/mousearea.qdoc b/examples/quick/mousearea/doc/src/mousearea.qdoc index fc62f41536..b0d9abce8f 100644 --- a/examples/quick/mousearea/doc/src/mousearea.qdoc +++ b/examples/quick/mousearea/doc/src/mousearea.qdoc @@ -25,23 +25,22 @@ ** ****************************************************************************/ /*! - \title QtQuick Examples - MouseArea + \title Qt Quick Examples - MouseArea \example mousearea - \brief This is an example of the MouseArea element in QML + \brief This is an example of the MouseArea type in QML \image qml-mousearea-example.png \ingroup qtquickexamples This example shows you how to respond to clicks and drags with a MouseArea. - When you click inside the red square, the Text element will list several properties + When you click inside the red square, the Text type will list several properties of that click which are available to QML. Signals are emitted by the MouseArea when clicks or other discrete operations occur within it \snippet quick/mousearea/mousearea.qml clicks - The MouseArea can also be used to drag elements around. By setting the parameters of the drag property, + The MouseArea can also be used to drag items around. By setting the parameters of the drag property, the target item will be dragged around if the user starts to drag within the MouseArea. \snippet quick/mousearea/mousearea.qml drag */ - diff --git a/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc b/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc index 7ea5a86149..d4aabc01d8 100644 --- a/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc +++ b/examples/quick/painteditem/textballoons/doc/src/textballoons.qdoc @@ -62,7 +62,7 @@ To implement a QQuickPaintedItem you must implement QQuickPaintedIem's pure virtual function \l {QQuickPaintedItem::}{paint()} which implements the - painting of the element. + painting of the type. \section1 TextBalloon Class Definition @@ -92,7 +92,7 @@ \snippet quick/customitems/painteditem/textballoons.qml 0 - The balloonModel contains two elements at application start which will be + The balloonModel contains two types at application start which will be displayed by the balloonView. The balloonView alernates the TextBalloon delegate items between left-aligned and right-aligned. @@ -102,7 +102,6 @@ The controls part of the UI contains a rectangle with a MouseArea which changes color when the mouse hovers over it. This control 'button' adds - a new element to the end of the model with a random width. + a new object to the end of the model with a random width. */ - diff --git a/examples/quick/particles/affectors/doc/src/affectors.qdoc b/examples/quick/particles/affectors/doc/src/affectors.qdoc index 75bdea8f14..58661d5b70 100644 --- a/examples/quick/particles/affectors/doc/src/affectors.qdoc +++ b/examples/quick/particles/affectors/doc/src/affectors.qdoc @@ -26,13 +26,13 @@ ****************************************************************************/ /*! - \title QtQuick.Particles Examples - Affectors + \title Qt Quick Particles Examples - Affectors \example particles/affectors \brief This is a collection of examples using Affectors in the QML particle system. \image qml-affectors-example.png This is a collection of small QML examples relating to using Affectors in the particle system. - Each example is a small QML file emphasizing a particular element or feature. + Each example is a small QML file emphasizing a particular type or feature. Age demonstrates using an Age affector to prematurely end the lives of particles. \snippet quick/particles/affectors/content/age.qml 0 @@ -78,7 +78,7 @@ moves into the lit group after 100ms. \snippet quick/particles/affectors/content/groupgoal.qml lit The lit group also has TrailEmitters on it for additional fire and smoke, but does not transition anywhere. - There are two more GroupGoal elements that allow particles in the unlit group to transition to the lighting group + There are two more GroupGoal objects that allow particles in the unlit group to transition to the lighting group (and then to the lit group). \snippet quick/particles/affectors/content/groupgoal.qml groupgoal-pilot The first is just an area bound to the location of an image of a pilot flame. When unlit balls pass through the flame, @@ -110,4 +110,3 @@ \snippet quick/particles/affectors/content/wander.qml 0 There are different movements given by applying the Wander to different attributes of the trajectory, so the example makes it easy to play around and see the difference. */ - diff --git a/examples/quick/particles/customparticle/doc/src/customparticle.qdoc b/examples/quick/particles/customparticle/doc/src/customparticle.qdoc index a7ab4c51b8..ccef82c922 100644 --- a/examples/quick/particles/customparticle/doc/src/customparticle.qdoc +++ b/examples/quick/particles/customparticle/doc/src/customparticle.qdoc @@ -26,7 +26,7 @@ ****************************************************************************/ /*! - \title QtQuick.Particles Examples - CustomParticle + \title Qt Quick Particles Examples - CustomParticle \example particles/customparticle \brief This is a collection of examples using CustomParticle in the QML particle system. \image qml-customparticle-example.png diff --git a/examples/quick/particles/emitters/doc/src/emitters.qdoc b/examples/quick/particles/emitters/doc/src/emitters.qdoc index 39e1fdd13c..8eb7919000 100644 --- a/examples/quick/particles/emitters/doc/src/emitters.qdoc +++ b/examples/quick/particles/emitters/doc/src/emitters.qdoc @@ -25,13 +25,13 @@ ** ****************************************************************************/ /*! - \title QtQuick.Particles Examples - Emitters + \title Qt Quick Particles Examples - Emitters \example particles/emitters \brief This is a collection of examples using Emitters in the QML particle system. \image qml-emitters-example.png This is a collection of small QML examples relating to using Emitters in the particle system. - Each example is a small QML file emphasizing a particular element or feature. + Each example is a small QML file emphasizing a particular type or feature. Velocity from motion gives the effect of strong particle motion through primarily moving the emitters: \snippet quick/particles/emitters/content/velocityfrommotion.qml 0 @@ -54,7 +54,7 @@ \snippet quick/particles/emitters/content/shapeanddirection.qml 0 This sends the particles towards the center of the ellipse with proportional speed, keeping the ellipse outline as they move to the center. - TrailEmitter uses that element to add smoke particles to trail the fire particles in the scene. + TrailEmitter uses that type to add smoke particles to trail the fire particles in the scene. \snippet quick/particles/emitters/content/customemitter.qml 0 */ diff --git a/examples/quick/particles/imageparticle/doc/src/imageparticle.qdoc b/examples/quick/particles/imageparticle/doc/src/imageparticle.qdoc index 2c355d78b5..c8f2dc988b 100644 --- a/examples/quick/particles/imageparticle/doc/src/imageparticle.qdoc +++ b/examples/quick/particles/imageparticle/doc/src/imageparticle.qdoc @@ -26,13 +26,13 @@ ****************************************************************************/ /*! - \title QtQuick.Particles Examples - Affectors + \title Qt Quick Particles Examples - Affectors \example particles/imageparticle \brief This is a collection of examples using Affectors in the QML particle system. \image qml-imageparticle-example.png This is a collection of small QML examples relating to using Affectors in the particle system. - Each example is a small QML file emphasizing a particular element or feature. + Each example is a small QML file emphasizing a particular type or feature. All at once shows off several of the features of ImageParticle at the same time. \snippet quick/particles/imageparticle/content/allatonce.qml 0 diff --git a/examples/quick/particles/system/doc/src/system.qdoc b/examples/quick/particles/system/doc/src/system.qdoc index f65ff130cc..04dc1727d2 100644 --- a/examples/quick/particles/system/doc/src/system.qdoc +++ b/examples/quick/particles/system/doc/src/system.qdoc @@ -26,21 +26,21 @@ ****************************************************************************/ /*! - \title QtQuick.Particles Examples - Affectors + \title Qt Quick Particles Examples - Affectors \example particles/system \brief This is a collection of examples using Affectors in the QML particle system. \image qml-system-example.png This is a collection of small QML examples relating to using Affectors in the particle system. - Each example is a small QML file emphasizing a particular element or feature. + Each example is a small QML file emphasizing a particular type or feature. - Dynamic comparison compares using the particle system to getting a similar effect with the following code that dynamically instantiates Image elements. + Dynamic comparison compares using the particle system to getting a similar effect with the following code that dynamically instantiates Image types. \snippet quick/particles/system/content/dynamiccomparison.qml fake - Note how the Image elements are not able to be randomly colorized. + Note how the Image objects are not able to be randomly colorized. Start and Stop simply sets the running and paused states of a ParticleSystem. While the system does not perform any simulation when stopped or paused, a restart restarts the simulation from the beginning, while unpausing resumes the simulation from where it was. - Timed group changes is an example that highlights the ParticleGroup element. While normally referring to groups with a string name is sufficient, additional effects can be + Timed group changes is an example that highlights the ParticleGroup type. While normally referring to groups with a string name is sufficient, additional effects can be done by setting properties on groups. The first group has a variable duration on it, but always transitions to the second group. \snippet quick/particles/system/content/timedgroupchanges.qml 0 @@ -53,6 +53,6 @@ \snippet quick/particles/system/content/dynamicemitters.qml 0 Note that this effect, a flurry of flying rainbow spears, would be better served with TrailEmitter. It is only done with dynamic emitters in this example to show the concept more simply. - Multiple Painters shows how to control paint ordering of individual particles. While the paint ordering of particles within one ImagePainter is not strictly defined, ImageParticle elements follow the normal Z-ordering rules for QtQuick items. This example allow you to paint the inside of the particles above the black borders using a pair of ImageParticles each painting different parts of the same logical particle. + Multiple Painters shows how to control paint ordering of individual particles. While the paint ordering of particles within one ImagePainter is not strictly defined, ImageParticle objects follow the normal Z-ordering rules for QtQuick items. This example allow you to paint the inside of the particles above the black borders using a pair of ImageParticles each painting different parts of the same logical particle. */ diff --git a/examples/quick/positioners/doc/src/positioners.qdoc b/examples/quick/positioners/doc/src/positioners.qdoc index 55e1a4bf09..3a20b145ef 100644 --- a/examples/quick/positioners/doc/src/positioners.qdoc +++ b/examples/quick/positioners/doc/src/positioners.qdoc @@ -25,14 +25,14 @@ ** ****************************************************************************/ /*! - \title QtQuick Examples - Positioners + \title Qt Quick Examples - Positioners \example positioners \brief This is a collection of QML Positioner examples. \image qml-positioners-example.png \ingroup qtquickexamples This is a collection of small QML examples relating to positioners. Each example is - a small QML file emphasizing a particular element or feature. + a small QML file emphasizing a particular type or feature. Transitions shows animated transitions when showing or hiding items in a positioner. It consists of a scene populated with items in a variety of positioners: Column, Row, Grid and Flow. @@ -50,4 +50,3 @@ Attached Properties shows how the Positioner attached property can be used to determine where an item is within a positioner. \snippet quick/positioners/positioners-attachedproperties.qml 0 */ - diff --git a/examples/quick/quick.pro b/examples/quick/quick.pro index e3691a044b..2d8acb3345 100644 --- a/examples/quick/quick.pro +++ b/examples/quick/quick.pro @@ -23,6 +23,11 @@ SUBDIRS = accessibility \ particles \ demos +# Widget dependent examples +qtHaveModule(widgets) { + SUBDIRS += embeddedinwidgets +} + EXAMPLE_FILES = \ ui-components \ shared diff --git a/examples/quick/righttoleft/doc/src/righttoleft.qdoc b/examples/quick/righttoleft/doc/src/righttoleft.qdoc index 4a115c1267..6a207f7233 100644 --- a/examples/quick/righttoleft/doc/src/righttoleft.qdoc +++ b/examples/quick/righttoleft/doc/src/righttoleft.qdoc @@ -25,7 +25,7 @@ ** ****************************************************************************/ /*! - \title QtQuick Examples - Right to Left + \title Qt Quick Examples - Right to Left \example righttoleft \brief This is a collection of QML Right to Left examples. \image qml-righttoleft-example.png diff --git a/examples/quick/scenegraph/customgeometry/beziercurve.cpp b/examples/quick/scenegraph/customgeometry/beziercurve.cpp index 4d1cb5b670..d8d1a189e5 100644 --- a/examples/quick/scenegraph/customgeometry/beziercurve.cpp +++ b/examples/quick/scenegraph/customgeometry/beziercurve.cpp @@ -159,8 +159,10 @@ QSGNode *BezierCurve::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) vertices[i].set(x, y); } + node->markDirty(QSGNode::DirtyGeometry); //! [8] + //! [9] return node; } diff --git a/examples/quick/scenegraph/customgeometry/doc/src/customgeometry.qdoc b/examples/quick/scenegraph/customgeometry/doc/src/customgeometry.qdoc index 9e75298965..d98407b6c1 100644 --- a/examples/quick/scenegraph/customgeometry/doc/src/customgeometry.qdoc +++ b/examples/quick/scenegraph/customgeometry/doc/src/customgeometry.qdoc @@ -27,11 +27,11 @@ /*! \example scenegraph/customgeometry - \title Custom Geometry Example + \title Scene Graph - Custom Geometry \ingroup qtquickexamples \brief Shows how to implement a custom geometry in the Qt Quick Scene Graph. - \brief The custom geometry example shows how to create a QQuickItem which + The custom geometry example shows how to create a QQuickItem which uses the scene graph API to build a custom geometry for the scene graph. It does this by creating a BezierCurve item which is made part of the CustomGeometry module and makes use of this in a QML @@ -186,8 +186,8 @@ \snippet quick/scenegraph/customgeometry/main.qml 1 Our .qml file imports the \c {QtQuick 2.0} module to get the - standard elements and also our own \c {CustomGeometry 1.0} module - which contains our newly created BezierCurve element. + standard types and also our own \c {CustomGeometry 1.0} module + which contains our newly created BezierCurve objects. \snippet quick/scenegraph/customgeometry/main.qml 2 @@ -205,4 +205,3 @@ Finally we overlay a short text outlining what the example shows. */ - diff --git a/examples/quick/scenegraph/customgeometry/main.cpp b/examples/quick/scenegraph/customgeometry/main.cpp index 5df68e87cb..0da803f8dc 100644 --- a/examples/quick/scenegraph/customgeometry/main.cpp +++ b/examples/quick/scenegraph/customgeometry/main.cpp @@ -52,7 +52,7 @@ int main(int argc, char **argv) qmlRegisterType<BezierCurve>("CustomGeometry", 1, 0, "BezierCurve"); QQuickView view; - QSurfaceFormat format; + QSurfaceFormat format = view.format(); format.setSamples(16); view.setFormat(format); view.setSource(QUrl("qrc:///scenegraph/customgeometry/main.qml")); diff --git a/examples/quick/scenegraph/openglunderqml/doc/src/openglunderqml.qdoc b/examples/quick/scenegraph/openglunderqml/doc/src/openglunderqml.qdoc index 475f03cff0..4bf5444d79 100644 --- a/examples/quick/scenegraph/openglunderqml/doc/src/openglunderqml.qdoc +++ b/examples/quick/scenegraph/openglunderqml/doc/src/openglunderqml.qdoc @@ -27,7 +27,7 @@ /*! \example scenegraph/openglunderqml - \title OpenGL Under QML + \title Scene Graph - OpenGL Under QML \ingroup qtquickexamples \brief Shows how to render OpenGL under a Qt Quick scene. diff --git a/examples/quick/scenegraph/openglunderqml/squircle.cpp b/examples/quick/scenegraph/openglunderqml/squircle.cpp index 8e34144af0..84509fb615 100644 --- a/examples/quick/scenegraph/openglunderqml/squircle.cpp +++ b/examples/quick/scenegraph/openglunderqml/squircle.cpp @@ -108,7 +108,7 @@ void Squircle::paint() "uniform lowp float t;" "varying highp vec2 coords;" "void main() {" - " lowp float i = 1. - (pow(coords.x, 4.) + pow(coords.y, 4.));" + " lowp float i = 1. - (pow(abs(coords.x), 4.) + pow(abs(coords.y), 4.));" " i = smoothstep(t - 0.8, t + 0.8, i);" " i = floor(i * 20.) / 20.;" " gl_FragColor = vec4(coords * .5 + .5, i, i);" diff --git a/examples/quick/scenegraph/scenegraph.pro b/examples/quick/scenegraph/scenegraph.pro index 88b8d03dc3..3ddb216615 100644 --- a/examples/quick/scenegraph/scenegraph.pro +++ b/examples/quick/scenegraph/scenegraph.pro @@ -1,2 +1,7 @@ TEMPLATE = subdirs -SUBDIRS += customgeometry simplematerial openglunderqml +SUBDIRS += \ + customgeometry \ + openglunderqml \ + simplematerial \ + textureinsgnode \ + textureinthread \ diff --git a/examples/quick/scenegraph/shared/logorenderer.cpp b/examples/quick/scenegraph/shared/logorenderer.cpp new file mode 100644 index 0000000000..4c5927b543 --- /dev/null +++ b/examples/quick/scenegraph/shared/logorenderer.cpp @@ -0,0 +1,258 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include "logorenderer.h" +#include <QPainter> +#include <QPaintEngine> +#include <math.h> + +LogoRenderer::LogoRenderer() +{ +} + +LogoRenderer::~LogoRenderer() +{ +} + + +void LogoRenderer::paintQtLogo() +{ + program1.enableAttributeArray(normalAttr1); + program1.enableAttributeArray(vertexAttr1); + program1.setAttributeArray(vertexAttr1, vertices.constData()); + program1.setAttributeArray(normalAttr1, normals.constData()); + glDrawArrays(GL_TRIANGLES, 0, vertices.size()); + program1.disableAttributeArray(normalAttr1); + program1.disableAttributeArray(vertexAttr1); +} + + +void LogoRenderer::initialize() +{ + glClearColor(0.1f, 0.1f, 0.2f, 1.0f); + + QOpenGLShader *vshader1 = new QOpenGLShader(QOpenGLShader::Vertex, &program1); + const char *vsrc1 = + "attribute highp vec4 vertex;\n" + "attribute mediump vec3 normal;\n" + "uniform mediump mat4 matrix;\n" + "varying mediump vec4 color;\n" + "void main(void)\n" + "{\n" + " vec3 toLight = normalize(vec3(0.0, 0.3, 1.0));\n" + " float angle = max(dot(normal, toLight), 0.0);\n" + " vec3 col = vec3(0.40, 1.0, 0.0);\n" + " color = vec4(col * 0.2 + col * 0.8 * angle, 1.0);\n" + " color = clamp(color, 0.0, 1.0);\n" + " gl_Position = matrix * vertex;\n" + "}\n"; + vshader1->compileSourceCode(vsrc1); + + QOpenGLShader *fshader1 = new QOpenGLShader(QOpenGLShader::Fragment, &program1); + const char *fsrc1 = + "varying mediump vec4 color;\n" + "void main(void)\n" + "{\n" + " gl_FragColor = color;\n" + "}\n"; + fshader1->compileSourceCode(fsrc1); + + program1.addShader(vshader1); + program1.addShader(fshader1); + program1.link(); + + vertexAttr1 = program1.attributeLocation("vertex"); + normalAttr1 = program1.attributeLocation("normal"); + matrixUniform1 = program1.uniformLocation("matrix"); + + glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR ); + glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR ); + + m_fAngle = 0; + m_fScale = 1; + createGeometry(); +} + +void LogoRenderer::render() +{ + glDepthMask(true); + + glClearColor(0.5f, 0.5f, 0.7f, 1.0f); + glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); + + glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR ); + glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR ); + + glFrontFace(GL_CW); + glCullFace(GL_FRONT); + glEnable(GL_CULL_FACE); + glEnable(GL_DEPTH_TEST); + + QMatrix4x4 modelview; + modelview.rotate(m_fAngle, 0.0f, 1.0f, 0.0f); + modelview.rotate(m_fAngle, 1.0f, 0.0f, 0.0f); + modelview.rotate(m_fAngle, 0.0f, 0.0f, 1.0f); + modelview.scale(m_fScale); + modelview.translate(0.0f, -0.2f, 0.0f); + + program1.bind(); + program1.setUniformValue(matrixUniform1, modelview); + paintQtLogo(); + program1.release(); + + glDisable(GL_DEPTH_TEST); + glDisable(GL_CULL_FACE); + + m_fAngle += 1.0f; +} + +void LogoRenderer::createGeometry() +{ + vertices.clear(); + normals.clear(); + + qreal x1 = +0.06f; + qreal y1 = -0.14f; + qreal x2 = +0.14f; + qreal y2 = -0.06f; + qreal x3 = +0.08f; + qreal y3 = +0.00f; + qreal x4 = +0.30f; + qreal y4 = +0.22f; + + quad(x1, y1, x2, y2, y2, x2, y1, x1); + quad(x3, y3, x4, y4, y4, x4, y3, x3); + + extrude(x1, y1, x2, y2); + extrude(x2, y2, y2, x2); + extrude(y2, x2, y1, x1); + extrude(y1, x1, x1, y1); + extrude(x3, y3, x4, y4); + extrude(x4, y4, y4, x4); + extrude(y4, x4, y3, x3); + + const qreal Pi = 3.14159f; + const int NumSectors = 100; + + for (int i = 0; i < NumSectors; ++i) { + qreal angle1 = (i * 2 * Pi) / NumSectors; + qreal x5 = 0.30 * sin(angle1); + qreal y5 = 0.30 * cos(angle1); + qreal x6 = 0.20 * sin(angle1); + qreal y6 = 0.20 * cos(angle1); + + qreal angle2 = ((i + 1) * 2 * Pi) / NumSectors; + qreal x7 = 0.20 * sin(angle2); + qreal y7 = 0.20 * cos(angle2); + qreal x8 = 0.30 * sin(angle2); + qreal y8 = 0.30 * cos(angle2); + + quad(x5, y5, x6, y6, x7, y7, x8, y8); + + extrude(x6, y6, x7, y7); + extrude(x8, y8, x5, y5); + } + + for (int i = 0;i < vertices.size();i++) + vertices[i] *= 2.0f; +} + +void LogoRenderer::quad(qreal x1, qreal y1, qreal x2, qreal y2, qreal x3, qreal y3, qreal x4, qreal y4) +{ + vertices << QVector3D(x1, y1, -0.05f); + vertices << QVector3D(x2, y2, -0.05f); + vertices << QVector3D(x4, y4, -0.05f); + + vertices << QVector3D(x3, y3, -0.05f); + vertices << QVector3D(x4, y4, -0.05f); + vertices << QVector3D(x2, y2, -0.05f); + + QVector3D n = QVector3D::normal + (QVector3D(x2 - x1, y2 - y1, 0.0f), QVector3D(x4 - x1, y4 - y1, 0.0f)); + + normals << n; + normals << n; + normals << n; + + normals << n; + normals << n; + normals << n; + + vertices << QVector3D(x4, y4, 0.05f); + vertices << QVector3D(x2, y2, 0.05f); + vertices << QVector3D(x1, y1, 0.05f); + + vertices << QVector3D(x2, y2, 0.05f); + vertices << QVector3D(x4, y4, 0.05f); + vertices << QVector3D(x3, y3, 0.05f); + + n = QVector3D::normal + (QVector3D(x2 - x4, y2 - y4, 0.0f), QVector3D(x1 - x4, y1 - y4, 0.0f)); + + normals << n; + normals << n; + normals << n; + + normals << n; + normals << n; + normals << n; +} + +void LogoRenderer::extrude(qreal x1, qreal y1, qreal x2, qreal y2) +{ + vertices << QVector3D(x1, y1, +0.05f); + vertices << QVector3D(x2, y2, +0.05f); + vertices << QVector3D(x1, y1, -0.05f); + + vertices << QVector3D(x2, y2, -0.05f); + vertices << QVector3D(x1, y1, -0.05f); + vertices << QVector3D(x2, y2, +0.05f); + + QVector3D n = QVector3D::normal + (QVector3D(x2 - x1, y2 - y1, 0.0f), QVector3D(0.0f, 0.0f, -0.1f)); + + normals << n; + normals << n; + normals << n; + + normals << n; + normals << n; + normals << n; +} diff --git a/examples/quick/scenegraph/shared/logorenderer.h b/examples/quick/scenegraph/shared/logorenderer.h new file mode 100644 index 0000000000..48fbf87203 --- /dev/null +++ b/examples/quick/scenegraph/shared/logorenderer.h @@ -0,0 +1,77 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#ifndef LOGORENDERER_H +#define LOGORENDERER_H + +#include <QtGui/qvector3d.h> +#include <QtGui/qmatrix4x4.h> +#include <QtGui/qopenglshaderprogram.h> + +#include <QTime> +#include <QVector> + +class LogoRenderer { + +public: + LogoRenderer(); + ~LogoRenderer(); + + void render(); + void initialize(); + +private: + + qreal m_fAngle; + qreal m_fScale; + + void paintQtLogo(); + void createGeometry(); + void quad(qreal x1, qreal y1, qreal x2, qreal y2, qreal x3, qreal y3, qreal x4, qreal y4); + void extrude(qreal x1, qreal y1, qreal x2, qreal y2); + + QVector<QVector3D> vertices; + QVector<QVector3D> normals; + QOpenGLShaderProgram program1; + int vertexAttr1; + int normalAttr1; + int matrixUniform1; +}; +#endif diff --git a/examples/quick/scenegraph/simplematerial/doc/src/simplematerial.qdoc b/examples/quick/scenegraph/simplematerial/doc/src/simplematerial.qdoc index 730bbc7524..1529649798 100644 --- a/examples/quick/scenegraph/simplematerial/doc/src/simplematerial.qdoc +++ b/examples/quick/scenegraph/simplematerial/doc/src/simplematerial.qdoc @@ -27,7 +27,7 @@ /*! \example scenegraph/simplematerial - \title Simple Material Example + \title Scene Graph - Simple Material \ingroup qtquickexamples \brief Shows how to define a scene graph material to fill a shape. diff --git a/examples/quick/scenegraph/textureinsgnode/doc/images/textureinsgnode-example.jpg b/examples/quick/scenegraph/textureinsgnode/doc/images/textureinsgnode-example.jpg Binary files differnew file mode 100644 index 0000000000..306b8bab20 --- /dev/null +++ b/examples/quick/scenegraph/textureinsgnode/doc/images/textureinsgnode-example.jpg diff --git a/examples/quick/scenegraph/textureinsgnode/doc/src/textureinsgnode.qdoc b/examples/quick/scenegraph/textureinsgnode/doc/src/textureinsgnode.qdoc new file mode 100644 index 0000000000..b24b0bd97b --- /dev/null +++ b/examples/quick/scenegraph/textureinsgnode/doc/src/textureinsgnode.qdoc @@ -0,0 +1,36 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \example quick/scenegraph/textureinsgnode + \title Scene Graph - Rendering FBOs + \ingroup qtquickexamples + + \brief Shows how to use FramebufferObjects with Qt Quick. + + \image textureinsgnode-example.jpg + */ diff --git a/examples/quick/scenegraph/textureinsgnode/fboinsgrenderer.cpp b/examples/quick/scenegraph/textureinsgnode/fboinsgrenderer.cpp new file mode 100644 index 0000000000..67df392555 --- /dev/null +++ b/examples/quick/scenegraph/textureinsgnode/fboinsgrenderer.cpp @@ -0,0 +1,129 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include "fboinsgrenderer.h" +#include "logorenderer.h" + +#include <QtGui/QOpenGLFramebufferObject> + +#include <QtQuick/QQuickWindow> +#include <qsgsimpletexturenode.h> + + + + +class TextureNode : public QObject, public QSGSimpleTextureNode +{ + Q_OBJECT + +public: + TextureNode(QQuickWindow *window) + : m_fbo(0) + , m_texture(0) + , m_window(window) + , m_logoRenderer(0) + { + connect(m_window, SIGNAL(beforeRendering()), this, SLOT(renderFBO())); + } + + ~TextureNode() + { + delete m_texture; + delete m_fbo; + delete m_logoRenderer; + } + +public slots: + void renderFBO() + { + QSize size = rect().size().toSize(); + + if (!m_fbo) { + + QOpenGLFramebufferObjectFormat format; + format.setAttachment(QOpenGLFramebufferObject::CombinedDepthStencil); + m_fbo = new QOpenGLFramebufferObject(size, format); + m_texture = m_window->createTextureFromId(m_fbo->texture(), size); + m_logoRenderer = new LogoRenderer(); + m_logoRenderer->initialize(); + setTexture(m_texture); + } + + m_fbo->bind(); + + glViewport(0, 0, size.width(), size.height()); + + m_logoRenderer->render(); + + m_fbo->bindDefault(); + + m_window->update(); + } + +private: + QOpenGLFramebufferObject *m_fbo; + QSGTexture *m_texture; + QQuickWindow *m_window; + + LogoRenderer *m_logoRenderer; +}; + + + +FboInSGRenderer::FboInSGRenderer() +{ + setFlag(ItemHasContents, true); +} + + +QSGNode *FboInSGRenderer::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) +{ + // Don't bother with resize and such, just recreate the node from scratch + // when geometry changes. + if (oldNode) + delete oldNode; + + TextureNode *node = new TextureNode(window()); + node->setRect(boundingRect()); + + return node; +} + +#include "fboinsgrenderer.moc" diff --git a/examples/quick/scenegraph/textureinsgnode/fboinsgrenderer.h b/examples/quick/scenegraph/textureinsgnode/fboinsgrenderer.h new file mode 100644 index 0000000000..42e10aef6d --- /dev/null +++ b/examples/quick/scenegraph/textureinsgnode/fboinsgrenderer.h @@ -0,0 +1,59 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#ifndef FBOINSGRENDERER_H +#define FBOINSGRENDERER_H + +#include <QQuickItem> + + +class FboInSGRenderer : public QQuickItem +{ + Q_OBJECT + +public: + FboInSGRenderer(); + +protected: + QSGNode *updatePaintNode(QSGNode *, UpdatePaintNodeData *); + +}; + +#endif diff --git a/examples/quick/canvas/contents/Button.qml b/examples/quick/scenegraph/textureinsgnode/main.cpp index efdf4eae76..8fa6f6814f 100644 --- a/examples/quick/canvas/contents/Button.qml +++ b/examples/quick/scenegraph/textureinsgnode/main.cpp @@ -38,50 +38,22 @@ ** ****************************************************************************/ -import QtQuick 2.0 +#include <QGuiApplication> -Item { - id: container +#include <QtQuick/QQuickView> - signal clicked +#include "fboinsgrenderer.h" - property string text - width: buttonText.width + 28 - height: buttonText.height + 14 +int main(int argc, char **argv) +{ + QGuiApplication app(argc, argv); - BorderImage { - id: buttonImage - source: "images/toolbutton.sci" - width: container.width - 10 - height: container.height - } - BorderImage { - id: pressed - opacity: 0 - source: "images/toolbutton.sci" - width: container.width - 10 - height: container.height - } - MouseArea { - id: mouseRegion - anchors.fill: buttonImage - onClicked: { container.clicked(); } - } - Text { - id: buttonText - color: "white" - anchors.centerIn: buttonImage - font.bold: true - font.pointSize: 15 - text: container.text - style: Text.Raised - styleColor: "black" - } - states: [ - State { - name: "Pressed" - when: mouseRegion.pressed == true - PropertyChanges { target: pressed; opacity: 1 } - } - ] + qmlRegisterType<FboInSGRenderer>("SceneGraphRendering", 1, 0, "Renderer"); + + QQuickView view; + view.setResizeMode(QQuickView::SizeRootObjectToView); + view.setSource(QUrl("qrc:///scenegraph/textureinsgnode/main.qml")); + view.show(); + + return app.exec(); } diff --git a/examples/quick/scenegraph/textureinsgnode/main.qml b/examples/quick/scenegraph/textureinsgnode/main.qml new file mode 100644 index 0000000000..6f6d7d1c1a --- /dev/null +++ b/examples/quick/scenegraph/textureinsgnode/main.qml @@ -0,0 +1,132 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +import SceneGraphRendering 1.0 + +Item { + width: 400 + height: 400 + + // The checkers background + ShaderEffect { + id: tileBackground + anchors.fill: parent + + property real tileSize: 16 + property color color1: Qt.rgba(0.9, 0.9, 0.9, 1); + property color color2: Qt.rgba(0.85, 0.85, 0.85, 1); + + property size pixelSize: Qt.size(width / tileSize, height / tileSize); + + fragmentShader: + " + uniform lowp vec4 color1; + uniform lowp vec4 color2; + uniform highp vec2 pixelSize; + varying highp vec2 qt_TexCoord0; + void main() { + highp vec2 tc = sign(sin(3.14152 * qt_TexCoord0 * pixelSize)); + if (tc.x != tc.y) + gl_FragColor = color1; + else + gl_FragColor = color2; + } + " + } + + Renderer { + id: renderer + anchors.fill: parent + anchors.margins: 10 + + // The transform is just to show something interesting.. + transform: [ + Rotation { id: rotation; axis.x: 0; axis.z: 0; axis.y: 1; angle: 0; origin.x: renderer.width / 2; origin.y: renderer.height / 2; }, + Translate { id: txOut; x: -renderer.width / 2; y: -renderer.height / 2 }, + Scale { id: scale; }, + Translate { id: txIn; x: renderer.width / 2; y: renderer.height / 2 } + ] + } + + // Just to show something interesting + SequentialAnimation { + PauseAnimation { duration: 5000 } + ParallelAnimation { + NumberAnimation { target: scale; property: "xScale"; to: 0.6; duration: 1000; easing.type: Easing.InOutBack } + NumberAnimation { target: scale; property: "yScale"; to: 0.6; duration: 1000; easing.type: Easing.InOutBack } + } + NumberAnimation { target: rotation; property: "angle"; to: 80; duration: 1000; easing.type: Easing.InOutCubic } + NumberAnimation { target: rotation; property: "angle"; to: -80; duration: 1000; easing.type: Easing.InOutCubic } + NumberAnimation { target: rotation; property: "angle"; to: 0; duration: 1000; easing.type: Easing.InOutCubic } + NumberAnimation { target: renderer; property: "opacity"; to: 0.5; duration: 1000; easing.type: Easing.InOutCubic } + PauseAnimation { duration: 1000 } + NumberAnimation { target: renderer; property: "opacity"; to: 0.8; duration: 1000; easing.type: Easing.InOutCubic } + ParallelAnimation { + NumberAnimation { target: scale; property: "xScale"; to: 1; duration: 1000; easing.type: Easing.InOutBack } + NumberAnimation { target: scale; property: "yScale"; to: 1; duration: 1000; easing.type: Easing.InOutBack } + } + running: true + loops: Animation.Infinite + } + + Rectangle { + id: labelFrame + anchors.margins: -10 + radius: 5 + color: "white" + border.color: "black" + opacity: 0.8 + anchors.fill: label + } + + Text { + id: label + anchors.bottom: renderer.bottom + anchors.left: renderer.left + anchors.right: renderer.right + anchors.margins: 20 + wrapMode: Text.WordWrap + text: "The blue rectangle with the vintage 'Q' is an FBO, rendered by the application on the scene graph rendering thread. It is displayed using a QSGSimpleTextureNode." + } + + +} diff --git a/examples/quick/scenegraph/textureinsgnode/textureinsgnode.pro b/examples/quick/scenegraph/textureinsgnode/textureinsgnode.pro new file mode 100644 index 0000000000..238e20a553 --- /dev/null +++ b/examples/quick/scenegraph/textureinsgnode/textureinsgnode.pro @@ -0,0 +1,16 @@ +QT += qml quick + +HEADERS += fboinsgrenderer.h +SOURCES += fboinsgrenderer.cpp main.cpp + +INCLUDEPATH += ../shared +HEADERS += ../shared/logorenderer.h +SOURCES += ../shared/logorenderer.cpp + +RESOURCES += textureinsgnode.qrc + +target.path = $$[QT_INSTALL_EXAMPLES]/quick/scenegraph/textureinsgnode +INSTALLS += target + +OTHER_FILES += \ + main.qml diff --git a/examples/quick/scenegraph/textureinsgnode/textureinsgnode.qrc b/examples/quick/scenegraph/textureinsgnode/textureinsgnode.qrc new file mode 100644 index 0000000000..9ecf0ada1c --- /dev/null +++ b/examples/quick/scenegraph/textureinsgnode/textureinsgnode.qrc @@ -0,0 +1,5 @@ +<RCC> + <qresource prefix="/scenegraph/textureinsgnode"> + <file>main.qml</file> + </qresource> +</RCC> diff --git a/examples/quick/scenegraph/textureinthread/doc/images/textureinthread-example.jpg b/examples/quick/scenegraph/textureinthread/doc/images/textureinthread-example.jpg Binary files differnew file mode 100644 index 0000000000..59134e07c4 --- /dev/null +++ b/examples/quick/scenegraph/textureinthread/doc/images/textureinthread-example.jpg diff --git a/examples/quick/scenegraph/textureinthread/doc/src/textureinthread.qdoc b/examples/quick/scenegraph/textureinthread/doc/src/textureinthread.qdoc new file mode 100644 index 0000000000..476605b268 --- /dev/null +++ b/examples/quick/scenegraph/textureinthread/doc/src/textureinthread.qdoc @@ -0,0 +1,36 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \example quick/scenegraph/textureinthread + \title Scene Graph - Rendering FBOs in a thread + \ingroup qtquickexamples + + \brief Shows how to use FramebufferObjects in a thread together with Qt Quick. + + \image textureinthread-example.jpg + */ diff --git a/examples/quick/canvas/contents/ScrollBar.qml b/examples/quick/scenegraph/textureinthread/main.cpp index 2c51e0fc48..e415d254a1 100644 --- a/examples/quick/canvas/contents/ScrollBar.qml +++ b/examples/quick/scenegraph/textureinthread/main.cpp @@ -3,7 +3,7 @@ ** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). ** Contact: http://www.qt-project.org/legal ** -** This file is part of the Qt Mobility Components. +** This file is part of the examples of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE:BSD$ ** You may use this file under the terms of the BSD license as follows: @@ -38,37 +38,22 @@ ** ****************************************************************************/ -import QtQuick 2.0 +#include <QGuiApplication> -Item { - id: scrollBar - // The properties that define the scrollbar's state. - // position and pageSize are in the range 0.0 - 1.0. They are relative to the - // height of the page, i.e. a pageSize of 0.5 means that you can see 50% - // of the height of the view. - // orientation can be either 'Vertical' or 'Horizontal' - property real position - property real pageSize - property string orientation : "Vertical" - property alias bgColor: background.color - property alias fgColor: thumb.color +#include <QtQuick/QQuickView> - // A light, semi-transparent background - Rectangle { - id: background - radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1) - color: "white"; opacity: 0.3 - anchors.fill: parent - } - // Size the bar to the required size, depending upon the orientation. - Rectangle { - id: thumb - opacity: 0.7 - color: "black" - radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1) - x: orientation == 'Vertical' ? 1 : (scrollBar.position * (scrollBar.width-2) + 1) - y: orientation == 'Vertical' ? (scrollBar.position * (scrollBar.height-2) + 1) : 1 - width: orientation == 'Vertical' ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2)) - height: orientation == 'Vertical' ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2) - } +#include "threadrenderer.h" + +int main(int argc, char **argv) +{ + QGuiApplication app(argc, argv); + + qmlRegisterType<ThreadRenderer>("SceneGraphRendering", 1, 0, "Renderer"); + + QQuickView view; + view.setResizeMode(QQuickView::SizeRootObjectToView); + view.setSource(QUrl("qrc:///scenegraph/textureinsgnode/main.qml")); + view.show(); + + return app.exec(); } diff --git a/examples/quick/scenegraph/textureinthread/main.qml b/examples/quick/scenegraph/textureinthread/main.qml new file mode 100644 index 0000000000..4493ec46fd --- /dev/null +++ b/examples/quick/scenegraph/textureinthread/main.qml @@ -0,0 +1,132 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +import SceneGraphRendering 1.0 + +Item { + width: 400 + height: 400 + + // The checkers background + ShaderEffect { + id: tileBackground + anchors.fill: parent + + property real tileSize: 16 + property color color1: Qt.rgba(0.9, 0.9, 0.9, 1); + property color color2: Qt.rgba(0.85, 0.85, 0.85, 1); + + property size pixelSize: Qt.size(width / tileSize, height / tileSize); + + fragmentShader: + " + uniform lowp vec4 color1; + uniform lowp vec4 color2; + uniform highp vec2 pixelSize; + varying highp vec2 qt_TexCoord0; + void main() { + highp vec2 tc = sign(sin(3.14152 * qt_TexCoord0 * pixelSize)); + if (tc.x != tc.y) + gl_FragColor = color1; + else + gl_FragColor = color2; + } + " + } + + Renderer { + id: renderer + anchors.fill: parent + anchors.margins: 10 + + // The transform is just to show something interesting.. + transform: [ + Rotation { id: rotation; axis.x: 0; axis.z: 0; axis.y: 1; angle: 0; origin.x: renderer.width / 2; origin.y: renderer.height / 2; }, + Translate { id: txOut; x: -renderer.width / 2; y: -renderer.height / 2 }, + Scale { id: scale; }, + Translate { id: txIn; x: renderer.width / 2; y: renderer.height / 2 } + ] + } + + // Just to show something interesting + SequentialAnimation { + PauseAnimation { duration: 5000 } + ParallelAnimation { + NumberAnimation { target: scale; property: "xScale"; to: 0.6; duration: 1000; easing.type: Easing.InOutBack } + NumberAnimation { target: scale; property: "yScale"; to: 0.6; duration: 1000; easing.type: Easing.InOutBack } + } + NumberAnimation { target: rotation; property: "angle"; to: 80; duration: 1000; easing.type: Easing.InOutCubic } + NumberAnimation { target: rotation; property: "angle"; to: -80; duration: 1000; easing.type: Easing.InOutCubic } + NumberAnimation { target: rotation; property: "angle"; to: 0; duration: 1000; easing.type: Easing.InOutCubic } + NumberAnimation { target: renderer; property: "opacity"; to: 0.5; duration: 1000; easing.type: Easing.InOutCubic } + PauseAnimation { duration: 1000 } + NumberAnimation { target: renderer; property: "opacity"; to: 0.8; duration: 1000; easing.type: Easing.InOutCubic } + ParallelAnimation { + NumberAnimation { target: scale; property: "xScale"; to: 1; duration: 1000; easing.type: Easing.InOutBack } + NumberAnimation { target: scale; property: "yScale"; to: 1; duration: 1000; easing.type: Easing.InOutBack } + } + running: true + loops: Animation.Infinite + } + + Rectangle { + id: labelFrame + anchors.margins: -10 + radius: 5 + color: "white" + border.color: "black" + opacity: 0.8 + anchors.fill: label + } + + Text { + id: label + anchors.bottom: renderer.bottom + anchors.left: renderer.left + anchors.right: renderer.right + anchors.margins: 20 + wrapMode: Text.WordWrap + text: "The blue rectangle with the vintage 'Q' is an FBO, rendered by the application in a dedicated background thread. The background thread juggles two FBOs, one that is being rendered to and one for displaying. The texture to display is posted to the scene graph and displayed using a QSGSimpleTextureNode." + } + + +} diff --git a/examples/quick/scenegraph/textureinthread/textureinthread.pro b/examples/quick/scenegraph/textureinthread/textureinthread.pro new file mode 100644 index 0000000000..b48c2a1863 --- /dev/null +++ b/examples/quick/scenegraph/textureinthread/textureinthread.pro @@ -0,0 +1,16 @@ +QT += quick + +HEADERS += threadrenderer.h +SOURCES += threadrenderer.cpp main.cpp + +INCLUDEPATH += ../shared +HEADERS += ../shared/logorenderer.h +SOURCES += ../shared/logorenderer.cpp + +RESOURCES += textureinthread.qrc + +target.path = $$[QT_INSTALL_EXAMPLES]/quick/scenegraph/textureinthread +INSTALLS += target + +OTHER_FILES += \ + main.qml diff --git a/examples/quick/scenegraph/textureinthread/textureinthread.qrc b/examples/quick/scenegraph/textureinthread/textureinthread.qrc new file mode 100644 index 0000000000..9ecf0ada1c --- /dev/null +++ b/examples/quick/scenegraph/textureinthread/textureinthread.qrc @@ -0,0 +1,5 @@ +<RCC> + <qresource prefix="/scenegraph/textureinsgnode"> + <file>main.qml</file> + </qresource> +</RCC> diff --git a/examples/quick/scenegraph/textureinthread/threadrenderer.cpp b/examples/quick/scenegraph/textureinthread/threadrenderer.cpp new file mode 100644 index 0000000000..90b6b49880 --- /dev/null +++ b/examples/quick/scenegraph/textureinthread/threadrenderer.cpp @@ -0,0 +1,257 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include "threadrenderer.h" +#include "logorenderer.h" + +#include <QtCore/QMutex> +#include <QtCore/QThread> + +#include <QtGui/QOpenGLContext> +#include <QtGui/QOpenGLFramebufferObject> + +#include <QtQuick/QQuickWindow> +#include <qsgsimpletexturenode.h> + + +/* + * The render thread shares a context with the scene graph and will + * render into two separate FBOs, one to use for display and one + * to use for rendering + */ +class RenderThread : public QThread +{ + Q_OBJECT +public: + RenderThread(const QSize &size) + : m_renderFbo(0) + , m_displayFbo(0) + , m_logoRenderer(0) + , m_size(size) + { + // Since we're using queued connections, we need affinity to the rendering thread. + moveToThread(this); + + // Set up the QOpenGLContext to use for rendering in this thread. It is sharing + // memory space with the GL context of the scene graph. This constructor is called + // during updatePaintNode, so we are currently on the scene graph thread with the + // scene graph's OpenGL context current. + QOpenGLContext *current = QOpenGLContext::currentContext(); + m_context = new QOpenGLContext(); + m_context->setShareContext(current); + m_context->setFormat(current->format()); + m_context->create(); + m_context->moveToThread(this); + + // We need a non-visible surface to make current... + m_fakeSurface = new QWindow(); + m_fakeSurface->setGeometry(0, 0, 64, 64); + m_fakeSurface->setSurfaceType(QWindow::OpenGLSurface); + m_fakeSurface->setFormat(current->format()); + m_fakeSurface->create(); + } + +public slots: + void renderNext() + { + m_context->makeCurrent(m_fakeSurface); + + if (!m_renderFbo) { + // Initialize the buffers and renderer + QOpenGLFramebufferObjectFormat format; + format.setAttachment(QOpenGLFramebufferObject::CombinedDepthStencil); + m_renderFbo = new QOpenGLFramebufferObject(m_size, format); + m_displayFbo = new QOpenGLFramebufferObject(m_size, format); + m_logoRenderer = new LogoRenderer(); + m_logoRenderer->initialize(); + } + + m_renderFbo->bind(); + glViewport(0, 0, m_size.width(), m_size.height()); + + m_logoRenderer->render(); + + // We need to flush the contents to the FBO before posting + // the texture to the other thread, otherwise, we might + // get unexpected results. + glFlush(); + + m_renderFbo->bindDefault(); + qSwap(m_renderFbo, m_displayFbo); + + emit textureReady(m_displayFbo->texture(), m_size); + } + +signals: + void textureReady(int id, const QSize &size); + +private: + QOpenGLFramebufferObject *m_renderFbo; + QOpenGLFramebufferObject *m_displayFbo; + + LogoRenderer *m_logoRenderer; + + QWindow *m_fakeSurface; + QOpenGLContext *m_context; + QSize m_size; +}; + + + +class TextureNode : public QObject, public QSGSimpleTextureNode +{ + Q_OBJECT + +public: + TextureNode(QQuickWindow *window) + : m_id(0) + , m_size(0, 0) + , m_texture(0) + , m_window(window) + { + // Our texture node must have a texture, so use the default 0 texture. + m_texture = m_window->createTextureFromId(0, QSize(1, 1)); + setTexture(m_texture); + setFiltering(QSGTexture::Linear); + } + + ~TextureNode() + { + delete m_texture; + } + +signals: + void textureInUse(); + void pendingNewTexture(); + +public slots: + + // This function gets called on the FBO rendering thread and will store the + // texture id and size and schedule an update on the window. + void newTexture(int id, const QSize &size) { + m_mutex.lock(); + m_id = id; + m_size = size; + m_mutex.unlock(); + + // We cannot call QQuickWindow::update directly here, as this is only allowed + // from the rendering thread or GUI thread. + emit pendingNewTexture(); + } + + + // Before the scene graph starts to render, we update to the pending texture + void prepareNode() { + m_mutex.lock(); + int newId = m_id; + QSize size = m_size; + m_id = 0; + m_mutex.unlock(); + if (newId) { + delete m_texture; + m_texture = m_window->createTextureFromId(newId, size); + setTexture(m_texture); + + // This will notify the rendering thread that the texture is now being rendered + // and it can start rendering to the other one. + emit textureInUse(); + } + } + +private: + + int m_id; + QSize m_size; + + QMutex m_mutex; + + QSGTexture *m_texture; + QQuickWindow *m_window; +}; + + + +ThreadRenderer::ThreadRenderer() +{ + setFlag(ItemHasContents, true); +} + + + +QSGNode *ThreadRenderer::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) +{ + TextureNode *node = static_cast<TextureNode *>(oldNode); + + if (!node) { + node = new TextureNode(window()); + m_renderThread = new RenderThread(QSize(512, 512)); + + /* Set up connections to get the production of FBO textures in sync with vsync on the + * rendering thread. + * + * When a new texture is ready on the rendering thread, we use a direct connection to + * the texture node to let it know a new texture can be used. The node will then + * emit pendingNewTexture which we bind to QQuickWindow::update to schedule a redraw. + * + * When the scene graph starts rendering the next frame, the prepareNode() function + * is used to update the node with the new texture. Once it completes, it emits + * textureInUse() which we connect to the FBO rendering thread's renderNext() to have + * it start producing content into its current "back buffer". + * + * This FBO rendering pipeline is throttled by vsync on the scene graph rendering thread. + */ + connect(m_renderThread, SIGNAL(textureReady(int,QSize)), node, SLOT(newTexture(int,QSize)), Qt::DirectConnection); + connect(node, SIGNAL(pendingNewTexture()), window(), SLOT(update()), Qt::QueuedConnection); + connect(window(), SIGNAL(beforeRendering()), node, SLOT(prepareNode()), Qt::DirectConnection); + connect(node, SIGNAL(textureInUse()), m_renderThread, SLOT(renderNext()), Qt::QueuedConnection); + + // Start the render thread and enter let it process events. + m_renderThread->start(); + + // Get the production of FBO textures started.. + QMetaObject::invokeMethod(m_renderThread, "renderNext", Qt::QueuedConnection); + } + + node->setRect(boundingRect()); + + return node; +} + +#include "threadrenderer.moc" diff --git a/examples/quick/scenegraph/textureinthread/threadrenderer.h b/examples/quick/scenegraph/textureinthread/threadrenderer.h new file mode 100644 index 0000000000..f12e6404e5 --- /dev/null +++ b/examples/quick/scenegraph/textureinthread/threadrenderer.h @@ -0,0 +1,62 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#ifndef THREADRENDERER_H +#define THREADRENDERER_H + +#include <QQuickItem> + +class RenderThread; + +class ThreadRenderer : public QQuickItem +{ + Q_OBJECT + +public: + ThreadRenderer(); + +protected: + QSGNode *updatePaintNode(QSGNode *, UpdatePaintNodeData *); + +private: + RenderThread *m_renderThread; +}; + +#endif diff --git a/examples/quick/shadereffects/doc/src/shadereffects.qdoc b/examples/quick/shadereffects/doc/src/shadereffects.qdoc index fd819f2ec1..5d1547a1fe 100644 --- a/examples/quick/shadereffects/doc/src/shadereffects.qdoc +++ b/examples/quick/shadereffects/doc/src/shadereffects.qdoc @@ -34,9 +34,9 @@ This example demonstrates a couple of visual effects that you can perform with shaders in QtQuick 2.0 - ShaderEffects typically operate on other elements, using a ShaderEffectSource + ShaderEffects typically operate on other types, using a ShaderEffectSource \snippet quick/shadereffects/shadereffects.qml source - In the above snippet, theItem is the id of a complex QML element in the file. + In the above snippet, theItem is the id of a complex QML object in the file. ShaderEffects can use this ShaderEffectSource as a texture in their fragment shader. \snippet quick/shadereffects/shadereffects.qml fragment @@ -49,4 +49,3 @@ provides more vertices for you to manipulate, enabling many effects. \snippet quick/shadereffects/shadereffects.qml vertex */ - diff --git a/examples/quick/shadereffects/shadereffects.qml b/examples/quick/shadereffects/shadereffects.qml index 77de356eac..a8f0469b44 100644 --- a/examples/quick/shadereffects/shadereffects.qml +++ b/examples/quick/shadereffects/shadereffects.qml @@ -40,6 +40,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 import "content" Rectangle { @@ -85,7 +86,7 @@ Rectangle { height: 140 clip: true snapMode: ListView.SnapOneItem - model: VisualItemModel { + model: ObjectModel { Text { width: 160 height: 140 diff --git a/examples/quick/shared/Button.qml b/examples/quick/shared/Button.qml index 9bbc01ac01..9942a17b5c 100644 --- a/examples/quick/shared/Button.qml +++ b/examples/quick/shared/Button.qml @@ -43,14 +43,31 @@ import QtQuick 2.0 Item { id: container - property string text: "Button" - property string subText: "" + property alias text: buttonLabel.text + property alias label: buttonLabel signal clicked property alias containsMouse: mouseArea.containsMouse property alias pressed: mouseArea.pressed - implicitHeight: col.height - height: implicitHeight - width: buttonLabel.width + 20 + implicitHeight: buttonLabel.implicitHeight + implicitWidth: buttonLabel.implicitWidth + height: buttonLabel.implicitHeight + 12 + width: Math.max(80, implicitWidth + 8) + + SystemPalette { id: palette } + + Rectangle { + id: frame + anchors.fill: parent + color: palette.button + gradient: Gradient { + GradientStop { position: 0.0; color: mouseArea.pressed ? Qt.darker(palette.button, 1.3) : palette.button } + GradientStop { position: 1.0; color: Qt.darker(palette.button, 1.3) } + } + antialiasing: true + radius: 5 + border.color: Qt.darker(palette.button, 1.5) + border.width: 1 + } MouseArea { id: mouseArea @@ -59,33 +76,12 @@ Item { hoverEnabled: true } - Column { - spacing: 2 - id: col - anchors.verticalCenter: parent.verticalCenter + Text { + id: buttonLabel width: parent.width - Text { - id: buttonLabel - anchors.left: parent.left - anchors.leftMargin: 10 - anchors.right: parent.right - anchors.rightMargin: 10 - text: container.text - color: "black" - font.pixelSize: 22 - wrapMode: Text.WrapAtWordBoundaryOrAnywhere - styleColor: "white" - style: Text.Raised - - } - Text { - id: buttonLabel2 - anchors.left: parent.left - anchors.leftMargin: 10 - text: container.subText - wrapMode: Text.WrapAtWordBoundaryOrAnywhere - color: "#666" - font.pixelSize: 12 - } + horizontalAlignment: Text.Center + text: container.text + color: palette.buttonText + anchors.verticalCenter: parent.verticalCenter } } diff --git a/examples/quick/shared/CheckBox.qml b/examples/quick/shared/CheckBox.qml new file mode 100644 index 0000000000..a3a22b7723 --- /dev/null +++ b/examples/quick/shared/CheckBox.qml @@ -0,0 +1,96 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: root + implicitHeight: frame.height + implicitWidth: row.implicitWidth + width: implicitWidth + height: implicitHeight + property alias text: label.text + property bool checked + property alias pressed: mouseArea.pressed + signal clicked + + SystemPalette { id: palette } + + Row { + id: row + anchors.verticalCenter: parent.verticalCenter + spacing: 6 + Rectangle { + id: frame + gradient: Gradient { + GradientStop { position: 0.0; color: mouseArea.pressed ? Qt.darker(palette.button, 1.3) : palette.button } + GradientStop { position: 1.0; color: Qt.darker(palette.button, 1.3) } + } + height: label.implicitHeight * 1.5 + width: height + anchors.margins: 1 + radius: 3 + antialiasing: true + border.color: Qt.darker(palette.button, 1.5) + Image { + id: theX + source: "images/checkmark.png" + anchors.fill: frame + anchors.margins: frame.width / 5 + fillMode: Image.PreserveAspectFit + smooth: true + visible: checked + } + } + Text { + id: label + color: palette.text + anchors.verticalCenter: frame.verticalCenter + } + } + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: { + parent.checked = !parent.checked + parent.clicked() + } + } +} diff --git a/examples/quick/shared/README b/examples/quick/shared/README index bf16f238c7..2bf26d7c88 100644 --- a/examples/quick/shared/README +++ b/examples/quick/shared/README @@ -7,5 +7,5 @@ new to QML are strongly encouraged to go through the official examples before delving into this directory. For most application use, see the Qt Quick Components project to find -ready-made Components you can use in your own projects. Qt Declarative +ready-made Components you can use in your own projects. Qt Quick examples do not use them only to avoid external dependencies. diff --git a/examples/quick/shared/SimpleLauncherDelegate.qml b/examples/quick/shared/SimpleLauncherDelegate.qml index e89126690f..48dd34fd41 100644 --- a/examples/quick/shared/SimpleLauncherDelegate.qml +++ b/examples/quick/shared/SimpleLauncherDelegate.qml @@ -68,15 +68,52 @@ Rectangle { anchors.rightMargin: 16 } - Button { + Item { id: button anchors.top: parent.top anchors.left: parent.left anchors.bottom: parent.bottom anchors.right:image.left - text: name - subText: description - onClicked: exampleItem.exampleUrl = url; + implicitHeight: col.height + height: implicitHeight + width: buttonLabel.width + 20 + + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: exampleItem.exampleUrl = url + hoverEnabled: true + } + + Column { + spacing: 2 + id: col + anchors.verticalCenter: parent.verticalCenter + width: parent.width + Text { + id: buttonLabel + anchors.left: parent.left + anchors.leftMargin: 10 + anchors.right: parent.right + anchors.rightMargin: 10 + text: name + color: "black" + font.pixelSize: 22 + wrapMode: Text.WrapAtWordBoundaryOrAnywhere + styleColor: "white" + style: Text.Raised + + } + Text { + id: buttonLabel2 + anchors.left: parent.left + anchors.leftMargin: 10 + text: description + wrapMode: Text.WrapAtWordBoundaryOrAnywhere + color: "#666" + font.pixelSize: 12 + } + } } Rectangle { diff --git a/examples/quick/canvas/contents/Slider.qml b/examples/quick/shared/Slider.qml index e0fed95ee8..d310a25bd5 100644 --- a/examples/quick/canvas/contents/Slider.qml +++ b/examples/quick/shared/Slider.qml @@ -42,73 +42,75 @@ import QtQuick 2.0 Item { - id:slider - property real min:0 - property real max:1 - property real value: min + (max - min) * (bar.x / (foo.width - bar.width)) - property real init:min+(max-min)/2 - property string name:"Slider" + id: slider + height: 26 + width: 320 + + property real min: 0 + property real max: 1 + property real value: min + (max - min) * mousearea.value + property real init: min+(max-min)/2 + property string name: "Slider" + property color color: "#0066cc" Component.onCompleted: setValue(init) function setValue(v) { if (min < max) - bar.x = v/(max - min) * (foo.width - bar.width); + handle.x = Math.round( v / (max - min) * + (mousearea.drag.maximumX - mousearea.drag.minimumX) + + mousearea.drag.minimumX); } Rectangle { id:sliderName - anchors.left:parent.left + anchors.left: parent.left + anchors.leftMargin: 16 height: childrenRect.height - width:childrenRect.width - anchors.verticalCenter:parent.verticalCenter + width: Math.max(44, childrenRect.width) + anchors.verticalCenter: parent.verticalCenter Text { - text:slider.name - font.pointSize:12 - } + text: slider.name + ":" + font.pointSize: 12 + color: "#333" + } } - Item { + + Rectangle{ id: foo - height: 6 - width: parent.width - 4 - sliderName.width - anchors.verticalCenter:parent.verticalCenter - anchors.left:sliderName.right - anchors.leftMargin:5 + width: parent.width - 8 - sliderName.width + color: "#eee" + height: 7 + radius: 3 + antialiasing: true + border.color: Qt.darker(color, 1.2) + anchors.left: sliderName.right + anchors.right: parent.right + anchors.leftMargin: 10 + anchors.rightMargin: 24 + anchors.verticalCenter: parent.verticalCenter + Rectangle { height: parent.height anchors.left: parent.left - anchors.right: bar.horizontalCenter - color: "blue" + anchors.right: handle.horizontalCenter + color: slider.color radius: 3 + border.width: 1 + border.color: Qt.darker(color, 1.3) + opacity: 0.8 } - Rectangle { - height: parent.height - anchors.left: bar.horizontalCenter - anchors.right: parent.right - color: "gray" - radius: 3 - } - Rectangle { - anchors.fill: parent - color: "transparent" - radius: 3 - border.width: 2 - border.color: "black" - } - - Rectangle { - id: bar - y: -7 - width: 20 - height: 20 - radius: 15 - color: "white" - border.width: 2 - border.color: "black" + Image { + id: handle + source: "images/slider_handle.png" + anchors.verticalCenter: parent.verticalCenter MouseArea { + id: mousearea anchors.fill: parent + anchors.margins: -4 drag.target: parent drag.axis: Drag.XAxis - drag.minimumX: 0 - drag.maximumX: foo.width - parent.width + drag.minimumX: Math.round(-handle.width / 2 + 3) + drag.maximumX: Math.round(foo.width - handle.width/2 - 3) + property real value: (handle.x - drag.minimumX) / (drag.maximumX - drag.minimumX) } } } diff --git a/examples/quick/shared/images/checkmark.png b/examples/quick/shared/images/checkmark.png Binary files differnew file mode 100644 index 0000000000..821aafccdd --- /dev/null +++ b/examples/quick/shared/images/checkmark.png diff --git a/examples/quick/shared/images/slider_handle.png b/examples/quick/shared/images/slider_handle.png Binary files differnew file mode 100644 index 0000000000..63c518be7d --- /dev/null +++ b/examples/quick/shared/images/slider_handle.png diff --git a/examples/quick/shared/qmldir b/examples/quick/shared/qmldir index 2f1e56aefb..cc4eb3c793 100644 --- a/examples/quick/shared/qmldir +++ b/examples/quick/shared/qmldir @@ -1,3 +1,5 @@ Button 2.0 Button.qml +CheckBox 2.1 CheckBox.qml LauncherList 2.0 LauncherList.qml SimpleLauncherDelegate 2.0 SimpleLauncherDelegate.qml +Slider 2.0 Slider.qml diff --git a/examples/quick/shared/quick_shared.qrc b/examples/quick/shared/quick_shared.qrc index 74a964e5ef..ee706712dd 100644 --- a/examples/quick/shared/quick_shared.qrc +++ b/examples/quick/shared/quick_shared.qrc @@ -3,6 +3,7 @@ <file>LauncherList.qml</file> <file>SimpleLauncherDelegate.qml</file> <file>Button.qml</file> + <file>CheckBox.qml</file> <file>images/back.png</file> <file>images/next.png</file> </qresource> diff --git a/examples/quick/shared/shared.qrc b/examples/quick/shared/shared.qrc index 0c9f39e7b0..0b574ac879 100644 --- a/examples/quick/shared/shared.qrc +++ b/examples/quick/shared/shared.qrc @@ -3,6 +3,9 @@ <file>LauncherList.qml</file> <file>SimpleLauncherDelegate.qml</file> <file>Button.qml</file> + <file>Slider.qml</file> + <file>images/slider_handle.png</file> + <file>CheckBox.qml</file> <file>images/back.png</file> <file>images/next.png</file> </qresource> diff --git a/examples/quick/text/doc/src/text.qdoc b/examples/quick/text/doc/src/text.qdoc index 652065282e..1f173ac843 100644 --- a/examples/quick/text/doc/src/text.qdoc +++ b/examples/quick/text/doc/src/text.qdoc @@ -32,18 +32,18 @@ \ingroup qtquickexamples This is a collection of small QML examples relating to text. Each example is - a small QML file, usually containing or emphasizing a particular element or + a small QML file, usually containing or emphasizing a particular type or feature. You can run and observe the behavior of each example. - 'Hello' shows how to change and animate the letter spacing of a Text element. + 'Hello' shows how to change and animate the letter spacing of a Text type. It uses a sequential animation to first animate the font.letterSpacing property from 0 to 50 over 3 seconds and then move the text to a random position on screen: \snippet quick/text/fonts/hello.qml letterspacing - 'Fonts' shows different ways of using fonts with the Text element. + 'Fonts' shows different ways of using fonts with the Text type. Simply by name, using the font.family property directly: \snippet quick/text/fonts/fonts.qml name - or using a FontLoader element: + or using a FontLoader type: \snippet quick/text/fonts/fonts.qml fontloader or using a FontLoader and specifying a local font file: \snippet quick/text/fonts/fonts.qml fontloaderlocal @@ -52,18 +52,18 @@ 'Available Fonts' shows how to use the QML global Qt object and a list view to display all the fonts available on the system. - The ListView element uses the list of fonts available as its model: + The ListView type uses the list of fonts available as its model: \snippet quick/text/fonts/availableFonts.qml model Inside the delegate, the font family is set with the modelData: \snippet quick/text/fonts/availableFonts.qml delegate 'Banner' is a simple example showing how to create a banner using a row of text - elements and a NumberAnimation. + types and a NumberAnimation. - 'Img tag' shows different ways of displaying images in a text elements using + 'Img tag' shows different ways of displaying images in a text types using the <img> tag. - 'Text Layout' shows how to create a more complex layout for a text element. + 'Text Layout' shows how to create a more complex layout for a text item. This example lays out the text in two columns using the onLineLaidOut handler that allows you to position and resize each line: \snippet quick/text/styledtext-layout.qml layout diff --git a/examples/quick/canvas/contents/TitleBar.qml b/examples/quick/textureprovider/Label.qml index 1698a2a98a..990ac247dc 100644 --- a/examples/quick/canvas/contents/TitleBar.qml +++ b/examples/quick/textureprovider/Label.qml @@ -40,31 +40,10 @@ import QtQuick 2.0 -Item { - id: titleBar - property string title: "" - - BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 } - - Image { - id: quitButton - anchors.left: parent.left//; anchors.leftMargin: 0 - anchors.verticalCenter: parent.verticalCenter - source: "images/quit.png" - MouseArea { - anchors.fill: parent - onClicked: Qt.quit() - } - } - - Text { - id: categoryText - anchors { - left: quitButton.right; right: parent.right; //leftMargin: 10; rightMargin: 10 - verticalCenter: parent.verticalCenter - } - elide: Text.ElideLeft - text: title - font.bold: true; font.pointSize: 20; color: "White"; style: Text.Raised; styleColor: "Black" - } +Text { + font.pixelSize: 26 + style: Text.Outline; styleColor: "white" + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottom: parent.bottom + anchors.bottomMargin: 20 } diff --git a/examples/quick/textureprovider/etcprovider.cpp b/examples/quick/textureprovider/etcprovider.cpp new file mode 100644 index 0000000000..52c2c17cfe --- /dev/null +++ b/examples/quick/textureprovider/etcprovider.cpp @@ -0,0 +1,212 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the demonstration applications of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Digia gives you certain additional +** rights. These rights are described in the Digia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3.0 as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU General Public License version 3.0 requirements will be +** met: http://www.gnu.org/copyleft/gpl.html. +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include "etcprovider.h" + +#include <QFile> +#include <QDebug> +#include <qopenglfunctions.h> +#include <qqmlfile.h> + +//#define ETC_DEBUG + +#ifndef GL_ETC1_RGB8_OES + #define GL_ETC1_RGB8_OES 0x8d64 +#endif + +typedef struct { + char aName[6]; + unsigned short iBlank; + /* NB: Beware endianness issues here. */ + unsigned char iPaddedWidthMSB; + unsigned char iPaddedWidthLSB; + unsigned char iPaddedHeightMSB; + unsigned char iPaddedHeightLSB; + unsigned char iWidthMSB; + unsigned char iWidthLSB; + unsigned char iHeightMSB; + unsigned char iHeightLSB; +} ETCHeader; + +unsigned short getWidth(ETCHeader *pHeader) +{ + return (pHeader->iWidthMSB << 8) | pHeader->iWidthLSB; +} + +unsigned short getHeight(ETCHeader *pHeader) +{ + return (pHeader->iHeightMSB << 8) | pHeader->iHeightLSB; +} + +unsigned short getPaddedWidth(ETCHeader *pHeader) +{ + return (pHeader->iPaddedWidthMSB << 8) | pHeader->iPaddedWidthLSB; +} + +unsigned short getPaddedHeight(ETCHeader *pHeader) +{ + return (pHeader->iPaddedHeightMSB << 8) | pHeader->iPaddedHeightLSB; +} + +EtcTexture::EtcTexture() + : m_texture_id(0), m_uploaded(false) +{ + +} + +EtcTexture::~EtcTexture() +{ + if (m_texture_id) + glDeleteTextures(1, &m_texture_id); +} + +int EtcTexture::textureId() const +{ + if (m_texture_id == 0) + glGenTextures(1, &const_cast<EtcTexture *>(this)->m_texture_id); + return m_texture_id; +} + +void EtcTexture::bind() +{ + if (m_uploaded && m_texture_id) { + glBindTexture(GL_TEXTURE_2D, m_texture_id); + return; + } + + if (m_texture_id == 0) + glGenTextures(1, &m_texture_id); + glBindTexture(GL_TEXTURE_2D, m_texture_id); + +#ifdef ETC_DEBUG + qDebug() << "glCompressedTexImage2D, width: " << m_size.width() << "height" << m_size.height() << + "paddedWidth: " << m_paddedSize.width() << "paddedHeight: " << m_paddedSize.height(); +#endif + + QOpenGLContext *ctx = QOpenGLContext::currentContext(); + Q_ASSERT(ctx != 0); + ctx->functions()->glCompressedTexImage2D(GL_TEXTURE_2D, 0, GL_ETC1_RGB8_OES, + m_size.width(), m_size.height(), 0, + (m_paddedSize.width() * m_paddedSize.height()) >> 1, + m_data.data() + 16); + + // Gracefully fail in case of an error... + GLuint error = glGetError(); + if (error != GL_NO_ERROR) { + qDebug () << "glCompressedTexImage2D for compressed texture failed, error: " << error; + glBindTexture(GL_TEXTURE_2D, 0); + glDeleteTextures(1, &m_texture_id); + m_texture_id = 0; + return; + } + + m_uploaded = true; + updateBindOptions(true); +} + +class QEtcTextureFactory : public QQuickTextureFactory +{ +public: + QByteArray m_data; + QSize m_size; + QSize m_paddedSize; + + QSize textureSize() const { return m_size; } + int textureByteCount() const { return m_data.size(); } + + QSGTexture *createTexture(QQuickWindow *) const { + EtcTexture *texture = new EtcTexture; + texture->m_data = m_data; + texture->m_size = m_size; + texture->m_paddedSize = m_paddedSize; + return texture; + } +}; + +QQuickTextureFactory *EtcProvider::requestTexture(const QString &id, QSize *size, const QSize &requestedSize) +{ + Q_UNUSED(requestedSize); + QEtcTextureFactory *ret = 0; + + size->setHeight(0); + size->setWidth(0); + + QUrl url = QUrl(id); + if (url.isRelative() && !m_baseUrl.isEmpty()) + url = m_baseUrl.resolved(url); + QString path = QQmlFile::urlToLocalFileOrQrc(url); + + QFile file(path); +#ifdef ETC_DEBUG + qDebug() << "requestTexture opening file: " << path; +#endif + if (file.open(QIODevice::ReadOnly)) { + ret = new QEtcTextureFactory; + ret->m_data = file.readAll(); + if (!ret->m_data.isEmpty()) { + ETCHeader *pETCHeader = NULL; + pETCHeader = (ETCHeader *)ret->m_data.data(); + size->setHeight(getHeight(pETCHeader)); + size->setWidth(getWidth(pETCHeader)); + ret->m_size = *size; + ret->m_paddedSize.setHeight(getPaddedHeight(pETCHeader)); + ret->m_paddedSize.setWidth(getPaddedWidth(pETCHeader)); + } + else { + delete ret; + ret = 0; + } + } + +#ifdef ETC_DEBUG + if (ret) + qDebug() << "requestTexture returning: " << ret->m_data.length() << ", bytes; width: " << size->width() << ", height: " << size->height(); + else + qDebug () << "File not found."; +#endif + + return ret; +} + +void EtcProvider::setBaseUrl(const QUrl &base) +{ + m_baseUrl = base; +} diff --git a/examples/quick/textureprovider/etcprovider.h b/examples/quick/textureprovider/etcprovider.h new file mode 100644 index 0000000000..3256ae929d --- /dev/null +++ b/examples/quick/textureprovider/etcprovider.h @@ -0,0 +1,87 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the demonstration applications of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Digia gives you certain additional +** rights. These rights are described in the Digia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3.0 as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU General Public License version 3.0 requirements will be +** met: http://www.gnu.org/copyleft/gpl.html. +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#ifndef ETCPROVIDER_H +#define ETCPROVIDER_H + +#include <qopengl.h> +#include <QQuickImageProvider> +#include <QtQuick/QSGTexture> +#include <QUrl> + +class EtcProvider : public QQuickImageProvider +{ +public: + EtcProvider() + : QQuickImageProvider(QQuickImageProvider::Texture) + {} + + QQuickTextureFactory *requestTexture(const QString &id, QSize *size, const QSize &requestedSize); + + void setBaseUrl(const QUrl &base); + +private: + QUrl m_baseUrl; +}; + +class EtcTexture : public QSGTexture +{ + Q_OBJECT +public: + EtcTexture(); + ~EtcTexture(); + + void bind(); + + QSize textureSize() const { return m_size; } + int textureId() const; + + bool hasAlphaChannel() const { return false; } + bool hasMipmaps() const { return false; } + + QByteArray m_data; + QSize m_size; + QSize m_paddedSize; + GLuint m_texture_id; + bool m_uploaded; +}; + +#endif // ETCPROVIDER_H diff --git a/examples/quick/textureprovider/images/qt-logo.jpg b/examples/quick/textureprovider/images/qt-logo.jpg Binary files differnew file mode 100644 index 0000000000..32d151c2c5 --- /dev/null +++ b/examples/quick/textureprovider/images/qt-logo.jpg diff --git a/examples/quick/textureprovider/images/qt-logo.pkm b/examples/quick/textureprovider/images/qt-logo.pkm Binary files differnew file mode 100644 index 0000000000..3329031ab2 --- /dev/null +++ b/examples/quick/textureprovider/images/qt-logo.pkm diff --git a/examples/quick/textureprovider/main.cpp b/examples/quick/textureprovider/main.cpp new file mode 100644 index 0000000000..6397de874b --- /dev/null +++ b/examples/quick/textureprovider/main.cpp @@ -0,0 +1,58 @@ +/**************************************************************************** +** +** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/legal +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names +** of its contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include <QGuiApplication> +#include <QQuickView> + +#include "etcprovider.h" + +int main(int argc, char* argv[]) +{ + QGuiApplication app(argc,argv); + QQuickView view; + + EtcProvider *provider = new EtcProvider(); + provider->setBaseUrl(QUrl("qrc:///textureprovider/")); + view.engine()->addImageProvider("etc", provider); + + view.setSource(QUrl("qrc:///textureprovider/textureprovider.qml")); + view.show(); + return app.exec(); +} diff --git a/examples/quick/textureprovider/textureprovider.pro b/examples/quick/textureprovider/textureprovider.pro new file mode 100644 index 0000000000..5d9825f7ac --- /dev/null +++ b/examples/quick/textureprovider/textureprovider.pro @@ -0,0 +1,13 @@ +TEMPLATE = app + +QT += quick qml + +HEADERS += etcprovider.h + +SOURCES += main.cpp \ + etcprovider.cpp + +RESOURCES += textureprovider.qrc + +target.path = $$[QT_INSTALL_EXAMPLES]/quick/textureprovider +INSTALLS += target diff --git a/examples/quick/canvas/contents/ToolBar.qml b/examples/quick/textureprovider/textureprovider.qml index 005a6b144e..9854bef229 100644 --- a/examples/quick/canvas/contents/ToolBar.qml +++ b/examples/quick/textureprovider/textureprovider.qml @@ -40,30 +40,26 @@ import QtQuick 2.0 -Item { - id: toolbar +Row { + width: 512 + height: 256 - property variant labels - signal buttonClicked(int index) + Image { + source: "images/qt-logo.jpg" - BorderImage { - source: "images/titlebar.sci" - width: parent.width - height: parent.height + 14 - y: -7 + Label { text: "Original Image" } } - Row { - y: 3 - anchors.horizontalCenter: parent.horizontalCenter - Repeater { - model: toolbar.labels - delegate: - Button { - text: modelData - onClicked: toolbar.buttonClicked(model.index) - } + Image { + source: "image://etc/images/qt-logo.pkm" + + Label { id: clabel; text: "Compressed Texture" } + Text { + text: "(requires ETC1 support)" + anchors.horizontalCenter: clabel.horizontalCenter + anchors.top: clabel.bottom + font.pixelSize: 14 + color: "white" } } - } diff --git a/examples/quick/textureprovider/textureprovider.qrc b/examples/quick/textureprovider/textureprovider.qrc new file mode 100644 index 0000000000..77a568ba1d --- /dev/null +++ b/examples/quick/textureprovider/textureprovider.qrc @@ -0,0 +1,8 @@ +<RCC> + <qresource prefix="/textureprovider"> + <file>images/qt-logo.jpg</file> + <file>images/qt-logo.pkm</file> + <file>textureprovider.qml</file> + <file>Label.qml</file> + </qresource> +</RCC> diff --git a/examples/quick/threading/doc/src/threading.qdoc b/examples/quick/threading/doc/src/threading.qdoc index 47f23a6019..71fcdf820b 100644 --- a/examples/quick/threading/doc/src/threading.qdoc +++ b/examples/quick/threading/doc/src/threading.qdoc @@ -25,7 +25,7 @@ ** ****************************************************************************/ /*! - \title QtQuick Examples - Threading + \title Qt Quick Examples - Threading \example threading \brief This is a collection of QML Multithreading examples. \image qml-threading-example.png @@ -44,6 +44,6 @@ \snippet quick/threading/workerscript/workerscript.qml 0 The workerscript then is free to take a really long time to calculate it: \snippet quick/threading/workerscript/workerscript.js 0 - When it's done, the result returns to the main scene via the WorkerScript element: + When it's done, the result returns to the main scene via the WorkerScript type: \snippet quick/threading/workerscript/workerscript.qml 1 */ diff --git a/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc b/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc index 805ca3563e..164409076c 100644 --- a/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc +++ b/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc @@ -25,7 +25,7 @@ ** ****************************************************************************/ /*! - \title QtQuick Examples - Touch Interaction + \title Qt Quick Examples - Touch Interaction \example touchinteraction \brief This is a collection of QML Touch Interaction examples. \image qml-touchinteraction-example.png @@ -47,10 +47,9 @@ to user input. \snippet quick/touchinteraction/pincharea/flickresize.qml 0 - Flickable is a simple example demonstrating the Flickable element. The element inside the flickable is very big, but the flickable itself is very small: + Flickable is a simple example demonstrating the Flickable type. The object inside the flickable is very big, but the flickable itself is very small: \snippet quick/touchinteraction/flickable/basic-flickable.qml 0 - Corkboards shows a more complex Flickable usecase, with elements on the flickable that respond to mouse and keyboard interaction. - This doesn't require special code, the QtQuick elements automatically cooperate with Flickable for accepting the touch events. + Corkboards shows a more complex Flickable usecase, with types on the flickable that respond to mouse and keyboard interaction. + This doesn't require special code, the Qt Quick types automatically cooperate with Flickable for accepting the touch events. */ - diff --git a/examples/quick/tutorials/dynamicview/dynamicview3/dynamicview.qml b/examples/quick/tutorials/dynamicview/dynamicview3/dynamicview.qml index 09c69df54d..7f353f075a 100644 --- a/examples/quick/tutorials/dynamicview/dynamicview3/dynamicview.qml +++ b/examples/quick/tutorials/dynamicview/dynamicview3/dynamicview.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 //![0] Rectangle { id: root @@ -111,8 +112,8 @@ Rectangle { onEntered: { visualModel.items.move( - drag.source.VisualDataModel.itemsIndex, - dragArea.VisualDataModel.itemsIndex) + drag.source.DelegateModel.itemsIndex, + dragArea.DelegateModel.itemsIndex) } } //![3] @@ -120,7 +121,7 @@ Rectangle { } //![2] //![4] - VisualDataModel { + DelegateModel { id: visualModel model: PetsModel {} diff --git a/examples/quick/tutorials/dynamicview/dynamicview4/dynamicview.qml b/examples/quick/tutorials/dynamicview/dynamicview4/dynamicview.qml index 6ff3f7eb96..82639c2016 100644 --- a/examples/quick/tutorials/dynamicview/dynamicview4/dynamicview.qml +++ b/examples/quick/tutorials/dynamicview/dynamicview4/dynamicview.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 Rectangle { id: root @@ -112,14 +113,14 @@ Rectangle { onEntered: { visualModel.items.move( - drag.source.VisualDataModel.itemsIndex, - dragArea.VisualDataModel.itemsIndex) + drag.source.DelegateModel.itemsIndex, + dragArea.DelegateModel.itemsIndex) } } } } //![0] - VisualDataModel { + DelegateModel { id: visualModel //![4] property var lessThan: [ diff --git a/examples/quick/tutorials/gettingStartedQml/core/FileDialog.qml b/examples/quick/tutorials/gettingStartedQml/core/FileDialog.qml index 3564b0d06d..dc3ad09c9c 100644 --- a/examples/quick/tutorials/gettingStartedQml/core/FileDialog.qml +++ b/examples/quick/tutorials/gettingStartedQml/core/FileDialog.qml @@ -102,8 +102,8 @@ Rectangle { anchors.centerIn: parent text: name color: "#BDCACD" - font.weight: GridView.view.currentIndex == index ? Font.DemiBold : Font.Normal - font.pointSize: GridView.view.currentIndex == index ? 12 : 10 + font.weight: dirView.currentIndex == index ? Font.DemiBold : Font.Normal + font.pointSize: dirView.currentIndex == index ? 12 : 10 elide: Text.ElideMiddle horizontalAlignment: Text.AlignHCenter } @@ -113,8 +113,8 @@ Rectangle { anchors.centerIn: parent radius: 10 antialiasing: true - scale: GridView.view.currentIndex == index ? 1 : 0.5 - opacity: GridView.view.currentIndex == index ? 1 : 0 + scale: dirView.currentIndex == index ? 1 : 0.5 + opacity: dirView.currentIndex == index ? 1 : 0 Text { id: overlay width: parent.width @@ -141,7 +141,7 @@ Rectangle { hoverEnabled: true onClicked: { - GridView.view.currentIndex = index + dirView.currentIndex = index selectedFile = directory.files[index].name selectChanged() } diff --git a/examples/quick/tutorials/gettingStartedQml/core/MenuBar.qml b/examples/quick/tutorials/gettingStartedQml/core/MenuBar.qml index c6edcab836..b53fc1b45a 100644 --- a/examples/quick/tutorials/gettingStartedQml/core/MenuBar.qml +++ b/examples/quick/tutorials/gettingStartedQml/core/MenuBar.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 Rectangle { id: menuBar @@ -128,7 +129,7 @@ Rectangle { } } //a list of visual items already have delegates handling their display - VisualItemModel { + ObjectModel { id: menuListModel FileMenu { diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part2/MenuBar.qml b/examples/quick/tutorials/gettingStartedQml/parts/part2/MenuBar.qml index 929052f0ae..63b2a1c190 100644 --- a/examples/quick/tutorials/gettingStartedQml/parts/part2/MenuBar.qml +++ b/examples/quick/tutorials/gettingStartedQml/parts/part2/MenuBar.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 Rectangle { id: menuBar @@ -99,7 +100,7 @@ Rectangle { } //a list of visual items already have delegates handling their display - VisualItemModel{ + ObjectModel{ id: menuListModel FileMenu{ diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part3/MenuBar.qml b/examples/quick/tutorials/gettingStartedQml/parts/part3/MenuBar.qml index 929052f0ae..63b2a1c190 100644 --- a/examples/quick/tutorials/gettingStartedQml/parts/part3/MenuBar.qml +++ b/examples/quick/tutorials/gettingStartedQml/parts/part3/MenuBar.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 Rectangle { id: menuBar @@ -99,7 +100,7 @@ Rectangle { } //a list of visual items already have delegates handling their display - VisualItemModel{ + ObjectModel{ id: menuListModel FileMenu{ diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part4/MenuBar.qml b/examples/quick/tutorials/gettingStartedQml/parts/part4/MenuBar.qml index 39b74e9d49..7bb1d2d30e 100644 --- a/examples/quick/tutorials/gettingStartedQml/parts/part4/MenuBar.qml +++ b/examples/quick/tutorials/gettingStartedQml/parts/part4/MenuBar.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 Rectangle { id: menuBar @@ -105,7 +106,7 @@ Rectangle { } //a list of visual items already have delegates handling their display - VisualItemModel{ + ObjectModel{ id: menuListModel FileMenu{ diff --git a/examples/quick/tutorials/gettingStartedQml/parts/part5/core/MenuBar.qml b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/MenuBar.qml index 7ffa90c8f4..3600be7868 100644 --- a/examples/quick/tutorials/gettingStartedQml/parts/part5/core/MenuBar.qml +++ b/examples/quick/tutorials/gettingStartedQml/parts/part5/core/MenuBar.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 Rectangle { id: menuBar @@ -129,7 +130,7 @@ Rectangle { } } //a list of visual items already have delegates handling their display - VisualItemModel{ + ObjectModel{ id: menuListModel FileMenu{ diff --git a/examples/quick/ui-components/slideswitch/doc/src/example-slideswitch.qdoc b/examples/quick/ui-components/slideswitch/doc/src/example-slideswitch.qdoc index 6ec2360287..1ebe7eb9f5 100644 --- a/examples/quick/ui-components/slideswitch/doc/src/example-slideswitch.qdoc +++ b/examples/quick/ui-components/slideswitch/doc/src/example-slideswitch.qdoc @@ -36,7 +36,7 @@ This example shows how to create a reusable switch component in QML. The code for this example can be found in the \c examples/quick/ui-components/slideswitch directory. -The elements that compose the switch are: +The objects that compose the switch are: \list \li a \c on property (the interface to interact with the switch), diff --git a/examples/quick/views/doc/src/views.qdoc b/examples/quick/views/doc/src/views.qdoc index 06482ae738..cc8112f4dd 100644 --- a/examples/quick/views/doc/src/views.qdoc +++ b/examples/quick/views/doc/src/views.qdoc @@ -26,7 +26,7 @@ ****************************************************************************/ /*! - \title QtQuick Examples - Views + \title Qt Quick Examples - Views \example views \brief This is a collection of QML model/view examples \image qml-modelviews-example.png @@ -34,7 +34,7 @@ This is a collection of small QML examples relating to model and view functionality. They demonstrate how to show data from a model using the QtQuick view types. - \section2 GridView and PathView demonstrate usage of these elements to display views. + \section2 GridView and PathView demonstrate usage of these types to display views. \snippet quick/views/gridview/gridview-example.qml 0 \section2 Dynamic List demonstrates animation of runtime additions and removals to a ListView. @@ -71,13 +71,12 @@ \snippet quick/views/package/Delegate.qml 0 - A VisualDataModel allows the individual views to access their specific items from + A DelegateModel allows the individual views to access their specific items from the shared package delegate. \snippet quick/views/package/view.qml 0 - \section2 VisualItemModel uses a VisualItemModel for the model instead of a ListModel. + \section2 ObjectModel uses an ObjectModel for the model instead of a ListModel. \snippet quick/views/visualitemmodel/visualitemmodel.qml 0 */ - diff --git a/examples/quick/views/visualitemmodel/visualitemmodel.qml b/examples/quick/views/objectmodel/objectmodel.qml index 90adf39b86..b790053c82 100644 --- a/examples/quick/views/visualitemmodel/visualitemmodel.qml +++ b/examples/quick/views/objectmodel/objectmodel.qml @@ -39,9 +39,10 @@ ****************************************************************************/ // This example demonstrates placing items in a view using -// a VisualItemModel +// an ObjectModel import QtQuick 2.0 +import QtQml.Models 2.1 Rectangle { id: root @@ -51,7 +52,7 @@ Rectangle { property bool printDestruction: false //! [0] - VisualItemModel { + ObjectModel { id: itemModel Rectangle { diff --git a/examples/quick/views/package/view.qml b/examples/quick/views/package/view.qml index 58ae5a4bf8..820eb4068c 100644 --- a/examples/quick/views/package/view.qml +++ b/examples/quick/views/package/view.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 Rectangle { id: root @@ -64,7 +65,7 @@ Rectangle { ListElement { display: "Eight" } } //![0] - VisualDataModel { + DelegateModel { id: visualModel delegate: Delegate {} model: myModel diff --git a/examples/quick/views/parallax/content/ParallaxView.qml b/examples/quick/views/parallax/content/ParallaxView.qml index 5bfed1a297..e8c67c7434 100644 --- a/examples/quick/views/parallax/content/ParallaxView.qml +++ b/examples/quick/views/parallax/content/ParallaxView.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 Item { id: root @@ -63,7 +64,7 @@ Item { orientation: Qt.Horizontal boundsBehavior: Flickable.DragOverBounds - model: VisualItemModel { id: visualModel } + model: ObjectModel { id: visualModel } highlightRangeMode: ListView.StrictlyEnforceRange snapMode: ListView.SnapOneItem diff --git a/examples/quick/views/parallax/parallax.qml b/examples/quick/views/parallax/parallax.qml index 4ec482f581..ddcafc1ee1 100644 --- a/examples/quick/views/parallax/parallax.qml +++ b/examples/quick/views/parallax/parallax.qml @@ -69,7 +69,7 @@ Rectangle { anchors { top: parent.top; topMargin: 10; horizontalCenter: parent.horizontalCenter } width: 300; height: 400 clip: true; - source: "../../../demos/samegame/samegame.qml" + source: "../../demos/samegame/samegame.qml" } } } diff --git a/examples/quick/views/views.qml b/examples/quick/views/views.qml index d1dda2a777..1bc6f6a3d8 100644 --- a/examples/quick/views/views.qml +++ b/examples/quick/views/views.qml @@ -39,80 +39,25 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 import "../shared" as Examples -/*! - \title QtQuick Examples - Views - \example quick/views - \brief This is a collection of QML model and view examples - \image qml-modelviews-example.png - - This is a collection of small QML examples relating to model and view functionality. They - are focused on the views side, which is the visual representation of the data in the models. - - \section2 GridView and PathView demonstrate usage of these elements to display views. - \snippet examples/quick/modelviews/gridview/gridview-example.qml 0 - - \section2 Dynamic List demonstrates animation of runtime additions and removals to a ListView. - - The ListView.onAdd signal handler runs an animation when new items are added to the - view, and the ListView.onRemove another when they are removed. - \snippet examples/quick/modelviews/listview/dynamiclist.qml 0 - \snippet examples/quick/modelviews/listview/dynamiclist.qml 1 - - \section2 Expanding Delegates demonstrates delegates that expand when activated. - - It has a complex delegate the size and appearance of which can change, displacing - other items in the view. - \snippet examples/quick/modelviews/listview/expandingdelegates.qml 0 - \snippet examples/quick/modelviews/listview/expandingdelegates.qml 1 - \snippet examples/quick/modelviews/listview/expandingdelegates.qml 2 - \snippet examples/quick/modelviews/listview/expandingdelegates.qml 3 - - \section2 Highlight demonstrates adding a custom highlight to a ListView. - \snippet examples/quick/modelviews/listview/highlight.qml 0 - - \section2 Highlight Ranges shows the three different highlight range modes of ListView. - \snippet examples/quick/modelviews/listview/highlightranges.qml 0 - \snippet examples/quick/modelviews/listview/highlightranges.qml 1 - \snippet examples/quick/modelviews/listview/highlightranges.qml 2 - - \section2 Sections demonstrates the various section headers and footers available to ListView. - \snippet examples/quick/modelviews/listview/sections.qml 0 - - \section2 Packages demonstrates using Packages to transition delegates between two views. - - It has a Package which defines delegate items for each view and an item that can - be transferred between delegates. - - \snippet examples/quick/modelviews/package/Delegate.qml 0 - - A VisualDataModel allows the individual views to access their specific items from - the shared package delegate. - - \snippet examples/quick/modelviews/package/view.qml 0 - - \section2 VisualItemModel uses a VisualItemModel for the model instead of a ListModel. - - \snippet examples/quick/modelviews/visualitemmodel/visualitemmodel.qml 0 - */ - - Item { - height: 480 - width: 320 - Examples.LauncherList { - id: ll - anchors.fill: parent - Component.onCompleted: { - addExample("GridView", "A simple GridView", Qt.resolvedUrl("gridview/gridview-example.qml")) - addExample("Dynamic List", "A dynamically alterable list", Qt.resolvedUrl("listview/dynamiclist.qml")) - addExample("Expanding Delegates", "A ListView with delegates that expand", Qt.resolvedUrl("listview/expandingdelegates.qml")) - addExample("Highlight", "A ListView with a custom highlight", Qt.resolvedUrl("listview/highlight.qml")) - addExample("Highlight Ranges", "The three highlight ranges of ListView", Qt.resolvedUrl("listview/highlightranges.qml")) - addExample("Sections", "ListView section headers and footers", Qt.resolvedUrl("listview/sections.qml")) - addExample("Packages", "Transitions between a ListView and GridView", Qt.resolvedUrl("package/view.qml")) - addExample("PathView", "A simple PathView", Qt.resolvedUrl("pathview/pathview-example.qml")) - addExample("VisualItemModel", "Using a VisualItemModel", Qt.resolvedUrl("visualitemmodel/visualitemmodel.qml")) - } +Item { + height: 480 + width: 320 + Examples.LauncherList { + id: ll + anchors.fill: parent + Component.onCompleted: { + addExample("GridView", "A simple GridView", Qt.resolvedUrl("gridview/gridview-example.qml")) + addExample("Dynamic List", "A dynamically alterable list", Qt.resolvedUrl("listview/dynamiclist.qml")) + addExample("Expanding Delegates", "A ListView with delegates that expand", Qt.resolvedUrl("listview/expandingdelegates.qml")) + addExample("Highlight", "A ListView with a custom highlight", Qt.resolvedUrl("listview/highlight.qml")) + addExample("Highlight Ranges", "The three highlight ranges of ListView", Qt.resolvedUrl("listview/highlightranges.qml")) + addExample("Sections", "ListView section headers and footers", Qt.resolvedUrl("listview/sections.qml")) + addExample("Packages", "Transitions between a ListView and GridView", Qt.resolvedUrl("package/view.qml")) + addExample("PathView", "A simple PathView", Qt.resolvedUrl("pathview/pathview-example.qml")) + addExample("ObjectModel", "Using a ObjectModel", Qt.resolvedUrl("objectmodel/objectmodel.qml")) } + } } diff --git a/examples/quick/views/views.qrc b/examples/quick/views/views.qrc index e35f128202..434fa788bf 100644 --- a/examples/quick/views/views.qrc +++ b/examples/quick/views/views.qrc @@ -63,7 +63,7 @@ <file>pathview/pics/VideoPlayer_48.png</file> <file>visualdatamodel/slideshow.qml</file> <file>visualdatamodel/dragselection.qml</file> - <file>visualitemmodel/visualitemmodel.qml</file> + <file>objectmodel/objectmodel.qml</file> <file>views.qml</file> </qresource> </RCC> diff --git a/examples/quick/views/visualdatamodel/dragselection.qml b/examples/quick/views/visualdatamodel/dragselection.qml index ec80cc7c16..5578268961 100644 --- a/examples/quick/views/visualdatamodel/dragselection.qml +++ b/examples/quick/views/visualdatamodel/dragselection.qml @@ -39,6 +39,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQml.Models 2.1 Item { id: root @@ -59,7 +60,7 @@ Item { width: 64 height: 64 - enabled: packageRoot.VisualDataModel.inSelected + enabled: packageRoot.DelegateModel.inSelected drag.target: draggable @@ -83,7 +84,7 @@ Item { } DropArea { anchors.fill: parent - onEntered: selectedItems.move(0, visualModel.items.get(packageRoot.VisualDataModel.itemsIndex), selectedItems.count) + onEntered: selectedItems.move(0, visualModel.items.get(packageRoot.DelegateModel.itemsIndex), selectedItems.count) } } Item { @@ -112,7 +113,7 @@ Item { border.width: 2 border.color: "#007423" - state: root.dragging && packageRoot.VisualDataModel.inSelected ? "selected" : "visible" + state: root.dragging && packageRoot.DelegateModel.inSelected ? "selected" : "visible" Text { anchors.fill: parent @@ -126,7 +127,7 @@ Item { Rectangle { anchors { right: parent.right; top: parent.top; margins: 3 } width: 12; height: 12 - color: packageRoot.VisualDataModel.inSelected ? "black" : "white" + color: packageRoot.DelegateModel.inSelected ? "black" : "white" radius: 6 border.color: "white" @@ -134,7 +135,7 @@ Item { MouseArea { anchors.fill: parent - onClicked: packageRoot.VisualDataModel.inSelected = !packageRoot.VisualDataModel.inSelected + onClicked: packageRoot.DelegateModel.inSelected = !packageRoot.DelegateModel.inSelected } } @@ -142,19 +143,19 @@ Item { State { name: "selected" ParentChange { target: content; parent: selectionContainer; x: 3; y: 3 } - PropertyChanges { target: packageRoot; VisualDataModel.inItems: visibleContainer.drag.active } + PropertyChanges { target: packageRoot; DelegateModel.inItems: visibleContainer.drag.active } PropertyChanges { target: gradientStart; color: "#017423" } PropertyChanges { target: gradientStart; color: "#007423" } }, State { name: "visible" - PropertyChanges { target: packageRoot; VisualDataModel.inItems: true } + PropertyChanges { target: packageRoot; DelegateModel.inItems: true } ParentChange { target: content; parent: visibleContainer; x: 3; y: 3 } PropertyChanges { target: gradientStart; color: "#8AC953" } PropertyChanges { target: gradientStart; color: "#8BC953" } } ] transitions: Transition { - PropertyAction { target: packageRoot; properties: "VisualDataModel.inItems" } + PropertyAction { target: packageRoot; properties: "DelegateModel.inItems" } ParentAnimation { target: content NumberAnimation { target: content; properties: "x,y"; duration: 500 } @@ -165,7 +166,7 @@ Item { } } - VisualDataModel { + DelegateModel { id: visualModel model: 35 delegate: packageDelegate diff --git a/examples/quick/views/visualdatamodel/slideshow.qml b/examples/quick/views/visualdatamodel/slideshow.qml index 77fe9809d4..d3a4013503 100644 --- a/examples/quick/views/visualdatamodel/slideshow.qml +++ b/examples/quick/views/visualdatamodel/slideshow.qml @@ -40,6 +40,7 @@ import QtQuick 2.0 import QtQuick.XmlListModel 2.0 +import QtQml.Models 2.1 Rectangle { id: root @@ -50,7 +51,7 @@ Rectangle { color: "black" - VisualDataModel { + DelegateModel { id: visualModel model: XmlListModel { @@ -97,14 +98,14 @@ Rectangle { name: "inDisplay"; ParentChange { target: image; parent: imageContainer; x: 75; y: 75; width: 150; height: 150 } PropertyChanges { target: image; z: 2 } - PropertyChanges { target: delegateItem; VisualDataModel.inItems: false } + PropertyChanges { target: delegateItem; DelegateModel.inItems: false } }, State { when: root.displayItem !== delegateItem name: "inList"; ParentChange { target: image; parent: delegateItem; x: 2; y: 2; width: 75; height: 75 } PropertyChanges { target: image; z: 1 } - PropertyChanges { target: delegateItem; VisualDataModel.inItems: true } + PropertyChanges { target: delegateItem; DelegateModel.inItems: true } } ] @@ -112,7 +113,7 @@ Rectangle { Transition { from: "inList" SequentialAnimation { - PropertyAction { target: delegateItem; property: "VisualDataModel.inPersistedItems"; value: true } + PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: true } ParentAnimation { target: image; via: root @@ -126,7 +127,7 @@ Rectangle { target: image NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 } } - PropertyAction { target: delegateItem; property: "VisualDataModel.inPersistedItems"; value: false } + PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: false } } } ] |
