Commit def64ced authored by Thomas Hartmann's avatar Thomas Hartmann

Add some work in progress examples to playground

Such unpolished examples should be in a repository.
parent 867c680e
Pipeline #1517 canceled with stages
import QtQuick 2.10
import Demo 1.0
Rectangle {
id: rectangle11
width: 62
height: 164
gradient: Gradient {
GradientStop {
position: 0
color: "#c65efc"
}
GradientStop {
position: 0.543
color: "#6871f2"
}
GradientStop {
position: 1
color: "#487bee"
}
}
}
import QtQuick 2.10
import Demo 1.0
Rectangle {
id: rectangle12
width: 62
height: 164
gradient: Gradient {
GradientStop {
position: 0
color: "#5adca9"
}
GradientStop {
position: 0.543
color: "#53bdc1"
}
GradientStop {
position: 1
color: "#5d76f1"
}
}
}
import QtQuick 2.10
import Demo 1.0
Item {
width: Constants.width
height: Constants.height
Screen01 {
}
}
/* File generated by Qt Creator */
import QmlProject 1.1
Project {
mainFile: "Demo.qml"
/* Include .qml, .js, and image files from current directory and subdirectories */
QmlFiles {
directory: "."
}
JavaScriptFiles {
directory: "."
}
ImageFiles {
directory: "."
}
Files {
filter: "*.conf"
files: ["qtquickcontrols2.conf"]
}
Files {
filter: "qmldir"
directory: "."
}
Environment {
QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
QT_AUTO_SCREEN_SCALE_FACTOR: "1"
}
/* List of plugin directories passed to QML runtime */
importPaths: [ "imports" ]
/* Required for deployment */
targetDirectory: "/opt/Demo"
}
import QtQuick 2.10
import Demo 1.0
import QtQuick.Studio.Effects 1.0
import QtQuick.Studio.Components 1.0
import QtQuick.Timeline 1.0
Item {
id: element
Rectangle {
id: rectangle
x: 43
y: 43
width: 154
height: 154
color: "#00000000"
radius: 76
border.width: 12
border.color: "#1a1a2c"
}
ZoomBlurItem {
id: zoomBlur
zoomBlurSamples: 10
zoomBlurLength: 24
Item {
id: element4
width: 240
height: 240
ArcItem {
id: arc
x: 40
y: 40
width: 160
height: 160
antialiasing: true
end: 99
begin: -19
strokeColor: "#c65efc"
strokeWidth: 6
}
}
}
Timeline {
id: timeline
animations: [
TimelineAnimation {
id: timelineAnimation
pingPong: true
to: 1000
from: 0
running: true
loops: -1
duration: 1000
}
]
enabled: true
startFrame: 0
endFrame: 1000
KeyframeGroup {
target: zoomBlur
property: "zoomBlurLength"
Keyframe {
value: 4
frame: 0
}
Keyframe {
value: 24
frame: 500
}
Keyframe {
value: 12
frame: 825
}
}
}
ZoomBlurItem {
id: zoomBlur1
zoomBlurSamples: 10
Item {
id: element5
width: 240
height: 240
ArcItem {
id: arc4
x: 40
y: 40
width: 160
height: 160
antialiasing: true
begin: 101
strokeWidth: 6
strokeColor: "#53bdc1"
end: 209
}
}
zoomBlurLength: 24
}
ZoomBlurItem {
id: zoomBlur2
zoomBlurSamples: 10
Item {
id: element6
width: 240
height: 240
ArcItem {
id: arc8
x: 40
y: 40
width: 160
height: 160
antialiasing: true
begin: 211
strokeWidth: 6
strokeColor: "#7285f4"
end: 339
}
}
zoomBlurLength: 12
}
Rectangle {
id: rectangle1
x: 19
y: 20
width: 200
height: 200
color: "#00000000"
radius: 100
border.color: "#7285f4"
border.width: 2
}
}
/*##^## Designer {
D{i:0;height:233;width:237}D{i:1;timeline_expanded:true}D{i:18;timeline_expanded:true}
D{i:23;timeline_expanded:true}
}
##^##*/
This diff is collapsed.
This diff is collapsed.
pragma Singleton
import QtQuick 2.10
QtObject {
readonly property int width: 720
readonly property int height: 1280
readonly property FontLoader mySystemFont: FontLoader { name: "Arial" }
/* Edit this comment to add your custom font */
/* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */
readonly property font font: Qt.font({
family: mySystemFont.name,
pointSize: Qt.application.font.pixelSize
})
readonly property font largeFont: Qt.font({
family: mySystemFont.name,
pointSize: Qt.application.font.pixelSize * 1.6
})
readonly property color backgroundColor: "#c2c2c2"
}
singleton Constants 1.0 Constants.qml
import QtQuick 2.0
import QtQuick 2.9
import QtQuick.Shapes 1.0
Shape {
id: root
implicitWidth: 100
implicitHeight: 100
property alias gradient: path.fillGradient
property alias strokeStyle: path.strokeStyle
property alias strokeWidth: path.strokeWidth
property alias strokeColor: path.strokeColor
property alias dashPattern: path.dashPattern
property alias joinStyle: path.joinStyle
property alias fillColor: path.fillColor
property alias capStyle: path.capStyle
property alias dashOffset: path.dashOffset
property real begin: 0
property real end: 90
property real arcWidth: 10
property real alpha: end - begin
property bool antialiasing: false
layer.enabled: antialiasing
layer.smooth: antialiasing
layer.textureSize: Qt.size(width * 2, height * 2)
property bool outlineArc: false
function myCos(angleInDegrees) {
var angleInRadians = angleInDegrees * Math.PI / 180.0;
return Math.cos(angleInRadians)
}
function mySin(angleInDegrees) {
var angleInRadians = angleInDegrees * Math.PI / 180.0;
return Math.sin(angleInRadians)
}
function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = angleInDegrees * Math.PI / 180.0;
var x = centerX + radius * Math.cos(angleInRadians)
return x
}
function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = angleInDegrees * Math.PI / 180.0;
var y = centerY + radius * Math.sin(angleInRadians);
return y
}
function calc()
{
path.__xRadius = root.width / 2 - root.strokeWidth / 2
path.__yRadius = root.height / 2 - root.strokeWidth / 2
path.__Xcenter = root.width / 2
path.__Ycenter = root.height / 2
path.startX = root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.begin - 180)
path.startY = root.polarToCartesianY(path.__Xcenter, path.__Ycenter, path.__yRadius, root.begin - 180)
arc1.x = root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.end - 180)
arc1.y = root.polarToCartesianY(path.__Xcenter, path.__Ycenter, path.__yRadius, root.end - 180)
arc1.radiusY = path.__yRadius
arc1.radiusX = path.__xRadius
arc1.useLargeArc = root.alpha > 180
}
onWidthChanged: calc()
onBeginChanged: calc()
onEndChanged: calc()
onAlphaChanged: calc()
ShapePath {
//closed: true
id: path
property real __xRadius
property real __yRadius
property real __Xcenter
property real __Ycenter
fillColor: "transparent"
strokeColor: Qt.transparent
strokeWidth: 1
capStyle: ShapePath.FlatCap
}
Item {
id: shapes
PathArc {
id: arc1
property bool add: true
}
PathLine {
relativeX: root.arcWidth * myCos(root.end)
relativeY: root.arcWidth * mySin(root.end)
property bool add: root.outlineArc && root.alpha < 360
}
PathMove {
relativeX: root.arcWidth * myCos(root.end)
relativeY: root.arcWidth * mySin(root.end)
property bool add: root.outlineArc && root.alpha == 360
}
PathArc {
id: arc2
useLargeArc: arc1.useLargeArc
radiusX: arc1.radiusX - root.arcWidth
radiusY: arc1.radiusY - root.arcWidth
x: path.startX + root.arcWidth * myCos(root.begin)
y: path.startY + root.arcWidth * mySin(root.begin)
direction: PathArc.Counterclockwise
property bool add: root.outlineArc
}
PathLine {
x: path.startX
y: path.startY
property bool add: root.outlineArc && root.alpha < 360
}
PathMove {
x: path.startX
y: path.startY
property bool add: root.outlineArc && root.alpha == 360
}
}
function invalidatePaths() {
if (!root.__completed)
return
for (var i = 0; i < shapes.resources.length; i++) {
var s = shapes.resources[i];
if (s.add)
path.pathElements.push(s)
}
}
property bool __completed: false
Component.onCompleted: {
root.__completed = true
invalidatePaths()
calc()
}
}
import QtQuick 2.10
import QtQuick.Shapes 1.0
Shape {
id: root
width: 200
height: 150
property int radius: 10
property int topLeftRadius: radius
property int bottomLeftRadius: radius
property int topRightRadius: radius
property int bottomRightRadius: radius
//property alias gradient: path.fillGradient
property alias strokeStyle: path.strokeStyle
property alias strokeWidth: path.strokeWidth
property alias strokeColor: path.strokeColor
property alias dashPattern: path.dashPattern
property alias joinStyle: path.joinStyle
property alias dashOffset: path.dashOffset
//property alias fillColor: path.fillColor
property bool drawTop: true
property bool drawBottom: true
property bool drawRight: true
property bool drawLeft: true
property bool antialiasing: false
layer.enabled: antialiasing
layer.smooth: antialiasing
layer.textureSize: Qt.size(width * 2, height * 2)
Item {
anchors.fill: parent
anchors.margins: -root.strokeWidth / 2
}
ShapePath {
id: path
joinStyle: ShapePath.MiterJoin
strokeWidth: 4
strokeColor: "red"
fillColor: "transparent"
startX: root.topLeftRadius
startY: 0
}
Item {
id: shapes
PathLine {
x: root.width - root.topRightRadius
y: 0
property bool add: root.drawTop
}
PathArc {
x: root.width
y: root.topRightRadius
radiusX: root.topRightRadius
radiusY: root.topRightRadius
property bool add: root.drawTop && root.drawRight
}
PathMove {
x: root.width
y: root.topRightRadius
property bool add: !root.drawTop
}
PathLine {
x: root.width
y: root.height-root.bottomRightRadius
property bool add: root.drawRight
}
PathArc {
x: root.width-root.bottomRightRadius
y: root.height
radiusX: root.bottomRightRadius
radiusY: root.bottomRightRadius
property bool add: root.drawRight && root.drawBottom
}
PathMove {
x: root.width-root.bottomRightRadius
y: root.height
property bool add: !root.drawRight
}
PathLine {
x: root.bottomLeftRadius
y: root.height
property bool add: root.drawBottom
}
PathArc {
x: 0
y: root.height-root.bottomLeftRadius
radiusX: root.bottomLeftRadius
radiusY: root.bottomLeftRadius
property bool add: root.drawBottom && root.drawLeft
}
PathMove {