diff options
| author | Sergio Ahumada <sergio.ahumada@digia.com> | 2013-03-20 09:13:42 +0100 |
|---|---|---|
| committer | Sergio Ahumada <sergio.ahumada@digia.com> | 2013-03-20 09:14:33 +0100 |
| commit | d815621963cee5571ed93fb89561c4884a685b6b (patch) | |
| tree | 4c60b5f69eff56fd324e4203d006e1df677670ce /examples/quick | |
| parent | 9b25a6f39ee59fe1bb4352a5f2e4ef4a91f1f2c3 (diff) | |
| parent | 471645f6dba6a21b85cb6788f0a0a07b6d5a804a (diff) | |
Merge branch 'dev' into stable
This starts Qt 5.1 release cycle
Change-Id: I6178a580b4c99aded1a69032a02169cff502b71d
Diffstat (limited to 'examples/quick')
103 files changed, 3405 insertions, 1010 deletions
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/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/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/draganddrop/doc/src/draganddrop.qdoc b/examples/quick/draganddrop/doc/src/draganddrop.qdoc index 1844c3b4eb..ad32cbcfcd 100644 --- a/examples/quick/draganddrop/doc/src/draganddrop.qdoc +++ b/examples/quick/draganddrop/doc/src/draganddrop.qdoc @@ -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/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/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/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 cc034e34ba..d99deb754f 100644 --- a/examples/quick/scenegraph/customgeometry/doc/src/customgeometry.qdoc +++ b/examples/quick/scenegraph/customgeometry/doc/src/customgeometry.qdoc @@ -27,11 +27,11 @@ /*! \example quick/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 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 5ded717e5f..49f1a825e1 100644 --- a/examples/quick/scenegraph/openglunderqml/doc/src/openglunderqml.qdoc +++ b/examples/quick/scenegraph/openglunderqml/doc/src/openglunderqml.qdoc @@ -27,7 +27,7 @@ /*! \example quick/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 20d244fe99..97cc4677d5 100644 --- a/examples/quick/scenegraph/simplematerial/doc/src/simplematerial.qdoc +++ b/examples/quick/scenegraph/simplematerial/doc/src/simplematerial.qdoc @@ -27,7 +27,7 @@ /*! \example quick/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/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/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/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..507965ca9a --- /dev/null +++ b/examples/quick/textureprovider/etcprovider.cpp @@ -0,0 +1,202 @@ +/**************************************************************************** +** +** 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> + +//#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); + + // resolve paths relative to qrc file + QFile file(QLatin1String(":/textureprovider/") + id); +#ifdef ETC_DEBUG + qDebug() << "requestTexture opening file: " << id; +#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; +} diff --git a/examples/quick/textureprovider/etcprovider.h b/examples/quick/textureprovider/etcprovider.h new file mode 100644 index 0000000000..24570e90e9 --- /dev/null +++ b/examples/quick/textureprovider/etcprovider.h @@ -0,0 +1,82 @@ +/**************************************************************************** +** +** 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> + +class EtcProvider : public QQuickImageProvider +{ +public: + EtcProvider() + : QQuickImageProvider(QQuickImageProvider::Texture) + {} + + QQuickTextureFactory *requestTexture(const QString &id, QSize *size, const QSize &requestedSize); +}; + +class EtcTexture : public QSGTexture +{ + Q_OBJECT + Q_PLUGIN_METADATA(IID "org.qt-project.Qml.QmlOstPlugin") +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..d9d4fb0d38 --- /dev/null +++ b/examples/quick/textureprovider/main.cpp @@ -0,0 +1,56 @@ +/**************************************************************************** +** +** 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; + + view.engine()->addImageProvider("etc", new EtcProvider()); + + 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/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/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/views/doc/src/views.qdoc b/examples/quick/views/doc/src/views.qdoc index e48a66514b..658e51c8fc 100644 --- a/examples/quick/views/doc/src/views.qdoc +++ b/examples/quick/views/doc/src/views.qdoc @@ -71,12 +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 } } } ] |
