diff options
Diffstat (limited to 'basicsuite/qt5-everywhere/demos/canvasclock/canvasClock.qml')
| -rw-r--r-- | basicsuite/qt5-everywhere/demos/canvasclock/canvasClock.qml | 404 |
1 files changed, 404 insertions, 0 deletions
diff --git a/basicsuite/qt5-everywhere/demos/canvasclock/canvasClock.qml b/basicsuite/qt5-everywhere/demos/canvasclock/canvasClock.qml new file mode 100644 index 0000000..e2b3bb0 --- /dev/null +++ b/basicsuite/qt5-everywhere/demos/canvasclock/canvasClock.qml @@ -0,0 +1,404 @@ +/**************************************************************************** +** +** 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 + +Rectangle { + id: root + anchors.fill: parent + property color rimColor: Qt.rgba(1,0,0,1) //'#ff0000' + property color dialColor: Qt.rgba(0.2,0.2,0.2,1) //'#333333' + property color bgcolor: Qt.rgba(1,1,1,1) + property int dialStyle: 0 + color: "#333333" + + Text{ + id: codeText + anchors {fill:parent} + text: "" + rotation: 10 + color: "#666666" + font.pixelSize: root.height*.05 + + verticalAlignment:Text.AlignBottom + + property int pos: 0 + + property string code: " +var ctx = clockCanvas.getContext('2d') +ctx.clearRect(0,0,clockContainer.clockRadius,clockContainer.clockRadius) + +var gradient = ctx.createRadialGradient(clockContainer.clockRadius/4, clockContainer.clockRadius/4, 0, clockContainer.clockRadius/4, clockContainer.clockRadius/4, clockContainer.clockRadius) +gradient.addColorStop(0, '#ffffff') +gradient.addColorStop(1, '#888888') + +ctx.fillStyle = gradient +ctx.arc(clockContainer.clockRadius/2, clockContainer.clockRadius/2, clockContainer.clockRadius*.475, 0, 360, false) +ctx.fill() + +drawDials(ctx) + +var gradient2 = ctx.createLinearGradient(0, 0, clockContainer.clockRadius, clockContainer.clockRadius) +gradient2.addColorStop(0, Qt.rgba(0,0,0,.5)) +gradient2.addColorStop(.5, Qt.rgba(1,1,1,.5)) +gradient2.addColorStop(1, Qt.rgba(0,0,0,.5)) + +var gradient3 = ctx.createLinearGradient(0, 0, clockContainer.clockRadius, clockContainer.clockRadius) +gradient3.addColorStop(0, Qt.rgba(1,1,1,.5)) +gradient3.addColorStop(.5, Qt.rgba(0,0,0,.5)) +gradient3.addColorStop(1, Qt.rgba(1,1,1,.5)) + +ctx.lineWidth = clockContainer.clockRadius*.05 +ctx.strokeStyle = root.rimColor + +ctx.beginPath() +ctx.arc(clockContainer.clockRadius/2, clockContainer.clockRadius/2, clockContainer.clockRadius*.45, 0, 360, false) +ctx.stroke() + +ctx.strokeStyle = gradient2 +ctx.arc(clockContainer.clockRadius/2, clockContainer.clockRadius/2, clockContainer.clockRadius*.45, 0, 360, false) +ctx.stroke() + +ctx.beginPath() +ctx.strokeStyle = root.rimColor +ctx.arc(clockContainer.clockRadius/2, clockContainer.clockRadius/2, clockContainer.clockRadius*.475, 0, 360, false) +ctx.stroke() + +ctx.strokeStyle = gradient3 +ctx.arc(clockContainer.clockRadius/2, clockContainer.clockRadius/2, clockContainer.clockRadius*.475, 0, 360, false) +ctx.stroke() +ctx.closePath() + +function drawPointer(context, angle, len, thickness, color){ + context.beginPath() + context.lineWidth = thickness + context.strokeStyle = color + context.moveTo(clockContainer.clockRadius/2, clockContainer.clockRadius/2) + var x1=Math.cos(angle*0.01745)*len + var y1=Math.sin(angle*0.01745)*len + context.lineTo(clockContainer.clockRadius/2+.5+x1,clockContainer.clockRadius/2+.5+y1) + context.stroke() + context.closePath() +}" + + Timer{ + id: textTimer + interval: 10 + onTriggered: { + codeText.pos++ + if (codeText.pos >= codeText.code.length)codeText.pos=0 + codeText.text+=codeText.code.charAt(codeText.pos) + if (codeText.text.length >1000){ + codeText.text=codeText.text.substring(codeText.text.length-1000) + } + } + repeat: true + running: true + } + } + + Rectangle { + anchors.fill: parent + gradient: Gradient { + GradientStop {position: .0; color :"black"} + GradientStop {position: .5; color :"transparent"} + GradientStop {position: 1.0; color :"black"} + + } + opacity: .5 + } + + Item { + id: clockContainer + width: 2* Math.min(root.width*.8, root.height*.8) + height: width + scale: 0.5 + anchors.centerIn: parent + property int clockRadius: width + + ShaderEffectSource{ + id: clockBg + anchors.fill: parent + sourceItem: clockCanvas + hideSource: true + live: false + } + + Canvas { + id: clockCanvas + anchors.fill: parent + onPaint: { + var ctx = clockCanvas.getContext('2d') + + ctx.clearRect(0,0,clockContainer.clockRadius,clockContainer.clockRadius) + + var gradient = ctx.createRadialGradient(clockContainer.clockRadius/4, clockContainer.clockRadius/4, 0, clockContainer.clockRadius/4, clockContainer.clockRadius/4, clockContainer.clockRadius) + + ctx.fillStyle = root.bgcolor + ctx.arc(clockContainer.clockRadius/2, clockContainer.clockRadius/2, clockContainer.clockRadius*.475, 0, 360, false) + ctx.fill() + + gradient.addColorStop(0, Qt.rgba(0,0,0,0)) + gradient.addColorStop(1, Qt.rgba(0,0,0,.5)) + + ctx.fillStyle = gradient + ctx.arc(clockContainer.clockRadius/2, clockContainer.clockRadius/2, clockContainer.clockRadius*.475, 0, 360, false) + ctx.fill() + + drawDials(ctx) + + var gradient2 = ctx.createLinearGradient(0, 0, clockContainer.clockRadius, clockContainer.clockRadius) + gradient2.addColorStop(0, Qt.rgba(0,0,0,.5)) + gradient2.addColorStop(.5, Qt.rgba(1,1,1,.5)) + gradient2.addColorStop(1, Qt.rgba(0,0,0,.5)) + + var gradient3 = ctx.createLinearGradient(0, 0, clockContainer.clockRadius, clockContainer.clockRadius) + gradient3.addColorStop(0, Qt.rgba(1,1,1,.5)) + gradient3.addColorStop(.5, Qt.rgba(0,0,0,.5)) + gradient3.addColorStop(1, Qt.rgba(1,1,1,.5)) + + ctx.lineWidth = clockContainer.clockRadius*.05 + + ctx.strokeStyle = root.rimColor + ctx.beginPath() + ctx.arc(clockContainer.clockRadius/2, clockContainer.clockRadius/2, clockContainer.clockRadius*.45, 0, 360, false) + ctx.stroke() + + ctx.strokeStyle = gradient2 + ctx.arc(clockContainer.clockRadius/2, clockContainer.clockRadius/2, clockContainer.clockRadius*.45, 0, 360, false) + ctx.stroke() + + ctx.beginPath() + ctx.strokeStyle = root.rimColor + ctx.arc(clockContainer.clockRadius/2, clockContainer.clockRadius/2, clockContainer.clockRadius*.475, 0, 360, false) + ctx.stroke() + + ctx.strokeStyle = gradient3 + + ctx.arc(clockContainer.clockRadius/2, clockContainer.clockRadius/2, clockContainer.clockRadius*.475, 0, 360, false) + ctx.stroke() + ctx.closePath() + + + clockBg.scheduleUpdate() + } + + function drawDials(context){ + + context.strokeStyle = "#888888" + context.fillStyle = root.dialColor + context.lineWidth = 2 + context.beginPath() + for (var i=1; i<=60; i++){ + var x1=Math.cos(((i)*6)*0.01745)*clockContainer.clockRadius*.4 + var y1=Math.sin(((i)*6)*0.01745)*clockContainer.clockRadius*.4 + + var x2=Math.cos(((i)*6)*0.01745)*clockContainer.clockRadius*.45 + var y2=Math.sin(((i)*6)*0.01745)*clockContainer.clockRadius*.45 + + context.moveTo(clockContainer.clockRadius/2+.5+x1,clockContainer.clockRadius/2+.5+y1) + context.lineTo(clockContainer.clockRadius/2+.5+x2,clockContainer.clockRadius/2+.5+y2) + context.stroke() + } + context.closePath() + + context.beginPath() + + var romans = ['I','II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'] + + for (i=1; i<=12; i++){ + x1=Math.cos((-90+(i)*30)*0.01745)*clockContainer.clockRadius*.35 -clockContainer.width*0.03 + y1=Math.sin((-90+(i)*30)*0.01745)*clockContainer.clockRadius*.35 +clockContainer.height*0.04 + + if (root.dialStyle === 1) x1-=clockContainer.width*0.01 + + context.font = 'bold '+Math.floor(clockContainer.width*.1)+'px Arial' + + + if (i >= 10) + x1 -= clockContainer.width*0.02 + context.textAlign = 'center'; + context.textBaseline = 'middle' + + var dial = i + + if (root.dialStyle === 1) dial = romans[i-1] + context.text(dial,clockContainer.clockRadius/2+x1,clockContainer.clockRadius/2+y1) + + context.fill() + context.stroke() + } + context.closePath() + } + } + + Canvas { + id: clockPointers + anchors.fill: parent + antialiasing: true + renderTarget: Canvas.Image + onPaint: { + var ctx = clockPointers.getContext('2d') + ctx.clearRect(0,0,clockContainer.clockRadius,clockContainer.clockRadius) + ctx.lineCap = 'round' + drawPointer(ctx, -90+clock.hours*30, clockContainer.clockRadius*.25, clockContainer.clockRadius*.05, "#000000") + drawPointer(ctx, -90+clock.minutes*6, clockContainer.clockRadius*.375, clockContainer.clockRadius*.025, "#333333") + drawPointer(ctx, -90+clock.seconds*6, clockContainer.clockRadius*.40, 4, "#aa0000") + + // Draw nail + ctx.beginPath() + ctx.fillStyle = "#535353" + ctx.ellipse(clockContainer.clockRadius/2-16,clockContainer.clockRadius/2-16,32,32) + ctx.fill() + ctx.closePath() + } + + function drawPointer(context, angle, len, thickness, color){ + context.beginPath() + context.lineWidth = thickness + context.strokeStyle = color + context.moveTo(clockContainer.clockRadius/2, clockContainer.clockRadius/2) + var x1=Math.cos(angle*0.01745)*len + var y1=Math.sin(angle*0.01745)*len + context.lineTo(clockContainer.clockRadius/2+.5+x1,clockContainer.clockRadius/2+.5+y1) + context.stroke() + context.closePath() + } + } + + Timer{ + id: clock + interval: 1000 + repeat: true + running: !mouseArea.pressed + + property int hours: 0 + property int minutes: 0 + property int seconds: 0 + + onTriggered: { + seconds ++ + if (seconds == 60) seconds = 0 + + if (seconds == 0) minutes++ + if (minutes == 60) { + hours++ + minutes=0 + } + + if (hours >= 12) hours=0 + + clockPointers.requestPaint() + } + } + } + + MouseArea { + id: mouseArea + anchors.fill: clockContainer + property bool grabbed: false + + onPressed: { + + var temp = clockContainer.clockRadius/2 + var ang = (90+Math.atan2((mouseY-temp), (mouseX-temp))*57.2957795) + if (ang <0) ang+=360 + + if (ang/6 > clock.minutes-2 && ang/6<clock.minutes+2){ + + grabbed = true + return; + } else { + var y = mouseY-temp + var x = mouseX-temp + var dist = Math.sqrt(y*y+x*x) + + if (dist>clockContainer.clockRadius*.42*clockContainer.scale){ + root.rimColor = newColor() + clockCanvas.requestPaint() + return; + }else if (dist>clockContainer.clockRadius*.32*clockContainer.scale) { + root.dialStyle = Math.round(Math.random()) + root.dialColor = newColor() + clockCanvas.requestPaint() + }else{ + root.bgcolor = newColor() + clockCanvas.requestPaint() + } + } + } + + onPositionChanged: { + if (grabbed) { + var temp = clockContainer.clockRadius/2 + var ang = (90+Math.atan2((mouseY-temp), (mouseX-temp))*57.2957795) + if (ang <0) ang+=360 + + var oldMinutes = clock.minutes + clock.minutes=ang/6 + + if (oldMinutes>55 && clock.minutes <5) clock.hours++ + if (oldMinutes<5 && clock.minutes >50) clock.hours-- + if (clock.hours >12) clock.hours=1 + if (clock.hours <0) clock.hours=11 + + + clockPointers.requestPaint() + } + } + onReleased: grabbed = false; + } + + function newColor(){ + var r=Math.random() + var g=Math.random() + var b=Math.random() + return Qt.rgba(r,g,b,1) + } + + Component.onCompleted: { + var d = new Date() + clock.hours = d.getHours() + if (clock.hours>=12)clock.hours-=12 + clock.minutes = d.getMinutes() + clock.seconds = d.getSeconds() + clockCanvas.requestPaint() + } +} |