├── .gitignore ├── LICENSE ├── README ├── button ├── Button.qml ├── button.qml └── components │ └── Icon.qml ├── codesnippets-joona.pro ├── codesnippets-joona.qmlproject ├── colorstrips ├── ColorColumn.qml ├── ColorRow.qml ├── colorstrips_columnofrows.qml └── colorstrips_rowofcolumns.qml ├── fallingcubes ├── FallingCube.qml ├── GoochShading.qml ├── fallingcubes.pro ├── fallingcubes.qml └── main.cpp ├── fireworks ├── components │ └── Firework.qml └── fireworks.qml ├── fooddiary └── fooddiary.qml ├── geometry ├── components │ └── Polygon.qml └── geometry.qml ├── horizontalflow ├── AlphabeticScrollbar.qml ├── Delegate.qml ├── HorizontalPathView.qml ├── Model.qml └── horizontalflow.qml ├── howtoscreencapture.txt ├── layoutgrid ├── components │ ├── ContentItem.qml │ ├── Label.qml │ ├── LayoutGrid.qml │ ├── Paragraph.qml │ └── Polygon.qml └── layoutgrid.qml ├── layouts ├── components │ ├── ContentItem.qml │ └── Page.qml └── layouts.qml ├── linegraph ├── linegraph.cpp ├── linegraph.h ├── linegraph.pro ├── linegraph.qml └── main.cpp ├── lines ├── components │ └── Line.qml └── lines.qml ├── livepixels ├── livepixels.qml ├── particle.png └── skull.png ├── navigation ├── App.qml ├── Call.qml ├── CallLog.qml ├── ContactCard.qml ├── ContentGrid.qml ├── PeopleSearch.qml ├── Photo.qml ├── Switcher.qml ├── components │ ├── Arrow.qml │ ├── Avatar.qml │ ├── Button.qml │ ├── ContactDetail.qml │ ├── ContentItem.qml │ ├── DialerButton.qml │ ├── Door.qml │ ├── FavouriteButton.qml │ ├── Keyboard.qml │ ├── Label.qml │ ├── Land.qml │ ├── Line.qml │ ├── LogButton.qml │ ├── OptionsButton.qml │ ├── Page.qml │ ├── Panel.qml │ ├── Platform.qml │ ├── Polygon.qml │ ├── SearchButton.qml │ ├── Stairs.qml │ ├── TextField.qml │ └── Title.qml └── navigation.qml ├── overlappingletters ├── alphabets.qml └── helloworld.qml ├── scalability ├── components │ ├── ActionPanel.qml │ ├── Button.qml │ ├── ContentItem.qml │ ├── EmailViewer.qml │ ├── Inbox.qml │ ├── Label.qml │ ├── MenuBar.qml │ ├── Page.qml │ ├── Panel.qml │ ├── Paragraph.qml │ └── Toolbar.qml └── scalability.qml ├── screenshots ├── component_tree.png ├── layoutgrid.png ├── layouts.png ├── navigation_and_content_views.png ├── scalability.png ├── view_tree.png └── views.png ├── scripts ├── components │ └── Paragraph.qml └── scripts.qml ├── splash ├── SplashText.qml └── splash.qml ├── timepicker ├── Button.qml ├── TimePickerDialog.qml ├── TimePickerItem.qml └── timepicker.qml ├── trees ├── ItemNode.qml ├── ItemNodeItem.qml ├── button.qml ├── components │ ├── BezierLine.qml │ ├── Node.qml │ └── NodeItem.qml └── view.qml ├── view ├── View.qml └── components │ ├── Button.qml │ ├── ContentItem.qml │ ├── SearchButton.qml │ └── TextParagraph.qml └── views ├── AudioPlayer.qml ├── Calendar.qml ├── Card.qml ├── ContentFlow.qml ├── ContentGrid.qml ├── Conversation.qml ├── Form.qml ├── Keypad.qml ├── List.qml ├── LockScreen.qml ├── Map.qml ├── Search.qml ├── SignIn.qml ├── Switcher.qml ├── Tutorial.qml ├── Viewfinder.qml ├── WebView.qml ├── Widgets.qml ├── components ├── BezierLine.qml ├── Bubble.qml ├── Button.qml ├── ContentItem.qml ├── Keyboard.qml ├── Label.qml ├── Line.qml ├── OptionsButton.qml ├── Page.qml ├── Panel.qml ├── Polygon.qml ├── SearchButton.qml └── TextField.qml └── views.qml /.gitignore: -------------------------------------------------------------------------------- 1 | # C++ objects and libs 2 | 3 | *.slo 4 | *.lo 5 | *.o 6 | *.a 7 | *.la 8 | *.lai 9 | *.so 10 | *.dll 11 | *.dylib 12 | 13 | # Qt-es 14 | 15 | /.qmake.cache 16 | /.qmake.stash 17 | *.pro.user 18 | *.pro.user.* 19 | *.qbs.user 20 | *.qbs.user.* 21 | *.moc 22 | moc_*.cpp 23 | qrc_*.cpp 24 | ui_*.h 25 | Makefile* 26 | *-build-* 27 | 28 | # QtCreator 29 | 30 | *.autosave 31 | 32 | #QtCtreator Qml 33 | *.qmlproject.user 34 | *.qmlproject.user.* 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015-2020 Joona Petrell 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README: -------------------------------------------------------------------------------- 1 | Code snippets for UI programming blog http://www.joona.net. -------------------------------------------------------------------------------- /button/Button.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "components" 3 | 4 | Item { 5 | property real unit: 10 6 | property color primaryColor: "#F4EEE5" 7 | property color secondaryColor: "#E3EDF3" 8 | property color highlightColor: "#203864" 9 | property color backgroundColor: "#F34955" 10 | property color contentColor: "#E7DD73" 11 | property color buttonColor: "#E7DD73" 12 | 13 | height: 6*unit 14 | width: 18*unit 15 | 16 | Rectangle { 17 | id: background 18 | 19 | radius: unit 20 | color: mouseArea.containsMouse ? highlightColor : backgroundColor 21 | anchors.fill: parent 22 | } 23 | MouseArea { 24 | id: mouseArea 25 | 26 | anchors.fill: parent 27 | onClicked: console.log("Button clicked") 28 | } 29 | Row { 30 | x: unit 31 | spacing: unit 32 | width: parent.width - 3*x 33 | anchors.verticalCenter: parent.verticalCenter 34 | Icon { 35 | id: icon 36 | width: 4*unit 37 | height: 4*unit 38 | highlighted: mouseArea.containsMouse 39 | anchors.verticalCenter: parent.verticalCenter 40 | } 41 | Text { 42 | id: label 43 | 44 | text: "Favorite" 45 | font.pixelSize: 26 46 | elide: Text.ElideRight 47 | width: parent.width - parent.spacing - icon.width 48 | anchors.verticalCenter: parent.verticalCenter 49 | color: mouseArea.containsMouse ? secondaryColor : primaryColor 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /button/button.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: "#A8C7D9" 5 | width: button.width + 30 6 | height: button.height + 20 7 | Button { 8 | id: button 9 | anchors.centerIn: parent 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /button/components/Icon.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Canvas { 4 | id: icon 5 | 6 | property bool highlighted 7 | property color color: highlighted ? secondaryColor : buttonColor 8 | property int numberOfPoints: 5 9 | onColorChanged: requestPaint() 10 | onPaint: { 11 | var numberOfPoints = 5 12 | var radius = width/2 13 | var ctx = getContext('2d') 14 | ctx.save(); 15 | ctx.beginPath() 16 | ctx.fillStyle = icon.color 17 | ctx.clearRect(0, 0, width, height) 18 | ctx.translate(width/2, height/2) 19 | ctx.moveTo(0,0-radius); 20 | for (var i = 0; i < numberOfPoints; i++) 21 | { 22 | ctx.rotate(Math.PI / numberOfPoints) 23 | ctx.lineTo(0, 0 - (radius*0.45)) 24 | ctx.rotate(Math.PI / numberOfPoints) 25 | ctx.lineTo(0, 0 - radius) 26 | } 27 | ctx.fill() 28 | ctx.restore() 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /codesnippets-joona.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = aux 2 | 3 | PROJECTS = button colorstrips fallingcubes geometry scripts \ 4 | horizontalflow layoutgrid layouts livepixels navigation \ 5 | overlappingletters scalability splash timepicker trees \ 6 | view views 7 | 8 | message($${PROJECTS}) 9 | OTHER_FILES += *.qml *.js 10 | for (PROJECT, PROJECTS) { 11 | OTHER_FILES += $${PROJECT}/*.qml \ 12 | $${PROJECT}/*.js \ 13 | $${PROJECT}/components/*.qml \ 14 | $${PROJECT}/components/*.js 15 | } 16 | -------------------------------------------------------------------------------- /codesnippets-joona.qmlproject: -------------------------------------------------------------------------------- 1 | /* File generated by QtCreator */ 2 | 3 | import QmlProject 1.0 4 | 5 | Project { 6 | /* Include .qml, .js, and image files from current directory and subdirectories */ 7 | QmlFiles { 8 | directory: "." 9 | } 10 | JavaScriptFiles { 11 | directory: "." 12 | } 13 | ImageFiles { 14 | directory: "." 15 | } 16 | /* List of plugin directories passed to QML runtime */ 17 | // importPaths: [ " ../exampleplugin " ] 18 | } 19 | -------------------------------------------------------------------------------- /colorstrips/ColorColumn.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Column { 4 | width: 800; height: 400 5 | property real pixelsPerRelativeHeight 6 | function rectangleColor() { 7 | var value = Math.random() 8 | var red = value < 0.4 ? 0.8+0.2*Math.random() : 0.1+0.4*Math.random() 9 | var green = value > 0.4 && value < 0.8 ? 0.7+0.3*Math.random() : 0.4+0.3*Math.random() 10 | var blue = value > 0.8 ? 0.6+0.2*Math.random() : 0.2*Math.random() 11 | return Qt.rgba(red, green, blue) 12 | } 13 | Component.onCompleted: { 14 | var totalRelativeHeight = 0 15 | for (var index = 0; index < children.length; index++) { 16 | if (children[index] !== repeater) 17 | totalRelativeHeight += children[index].relativeHeight 18 | } 19 | pixelsPerRelativeHeight = height/totalRelativeHeight 20 | } 21 | Repeater { 22 | id: repeater 23 | model: 40 24 | Rectangle { 25 | width: parent.width 26 | color: rectangleColor() 27 | height: Math.ceil(relativeHeight*pixelsPerRelativeHeight) 28 | property real value: Math.random() 29 | property real relativeHeight: Math.pow(Math.random(),3) 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /colorstrips/ColorRow.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Row { 4 | width: 800; height: 400 5 | property real pixelsPerRelativeWidth 6 | function rectangleColor() { 7 | var isRed = Math.random() < 0.1 8 | var grayness = 0.2+0.6*Math.random() 9 | var red = isRed ? grayness+0.6*Math.random()*(1-grayness) : grayness 10 | var green = isRed ? 0.5*grayness+0.5*Math.random()*grayness : 1.3*grayness 11 | var blue = isRed ? 0.8*grayness+0.4*Math.random()*grayness : 1.3*grayness 12 | return Qt.rgba(red, green, blue) 13 | } 14 | Component.onCompleted: { 15 | var totalRelativeWidth = 0 16 | for (var index = 0; index < children.length; index++) { 17 | if (children[index] !== repeater) 18 | totalRelativeWidth += children[index].relativeWidth 19 | } 20 | pixelsPerRelativeWidth = width/totalRelativeWidth 21 | } 22 | Repeater { 23 | id: repeater 24 | model: 80 25 | Rectangle { 26 | height: parent.height 27 | color: rectangleColor() 28 | width: Math.ceil(relativeWidth*pixelsPerRelativeWidth) 29 | property real relativeWidth: Math.pow(Math.random(),3) 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /colorstrips/colorstrips_columnofrows.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Column { 4 | width: 800; height: 400 5 | property real pixelsPerRelativeHeight 6 | Component.onCompleted: { 7 | var totalRelativeHeight = 0 8 | for (var index = 0; index < children.length; index++) { 9 | if (children[index] !== repeater) 10 | totalRelativeHeight += children[index].relativeHeight 11 | } 12 | pixelsPerRelativeHeight = height/totalRelativeHeight 13 | } 14 | Repeater { 15 | id: repeater 16 | model: 40 17 | ColorRow { 18 | width: parent.width 19 | height: Math.ceil(relativeHeight*pixelsPerRelativeHeight) 20 | property real relativeHeight: Math.pow(Math.random(),3) 21 | function rectangleColor() { 22 | var isBlue = Math.random() < 0.2 23 | var grayness = 0.2+0.6*Math.random() 24 | var red = isBlue ? 0.5*grayness+0.5*Math.random()*grayness : grayness 25 | var green = isBlue ? grayness+0.6*Math.random()*(1-grayness) : 1.3*grayness 26 | var blue = isBlue ? 0.7*grayness+0.3*Math.random()*grayness : 1.3*grayness 27 | return Qt.rgba(red, green, blue) 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /colorstrips/colorstrips_rowofcolumns.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Row { 4 | width: 800; height: 400 5 | property real pixelPerRelativeWidth 6 | Component.onCompleted: { 7 | var totalRelativeWidth = 0 8 | for (var index = 0; index < children.length; index++) { 9 | if (children[index] !== repeater) 10 | totalRelativeWidth += children[index].relativeWidth 11 | } 12 | pixelPerRelativeWidth = width/totalRelativeWidth 13 | } 14 | Repeater { 15 | id: repeater 16 | model: 50 17 | ColorColumn { 18 | height: parent.height 19 | width: Math.ceil(relativeWidth*pixelPerRelativeWidth) 20 | property real relativeWidth: Math.pow(Math.random(),3) 21 | function rectangleColor() { 22 | var value = Math.random() 23 | var blue = value < 0.4 ? 0.8+0.2*Math.random() : 0.1+0.4*Math.random() 24 | var red = value > 0.4 && value < 0.8 ? 0.7+0.3*Math.random() : 0.4+0.3*Math.random() 25 | var green = value > 0.8 ? 0.2+0.2*Math.random() : 0.2*Math.random() 26 | return Qt.rgba(red, green, blue) 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /fallingcubes/FallingCube.qml: -------------------------------------------------------------------------------- 1 | import Qt3D 2.0 2 | import QtQuick 2.0 3 | import Qt3D.Shapes 2.0 4 | 5 | Item3D { 6 | id: fallingCube 7 | property color coolColor 8 | function reset() { 9 | yBehavior.enabled = false; 10 | fallingCube.y = 25 11 | yBehavior.enabled = true; 12 | fallingCube.x = 40*Math.random(); 13 | fallingCube.y = -15 14 | } 15 | Component.onCompleted: y = -15 16 | x: 40*Math.random(); y: 30*Math.random()-10; z: 20*(Math.random()-0.5) 17 | Behavior on x { SmoothedAnimation { velocity: 2*Math.random() } } 18 | Behavior on y { 19 | id: yBehavior 20 | SmoothedAnimation { velocity: 6+Math.random()*6 } 21 | } 22 | Timer { 23 | interval: 100; repeat: true; running: true 24 | onTriggered: if (fallingCube.y < -9) fallingCube.reset() 25 | } 26 | Cube { 27 | scale: 2 28 | effect: GoochShading { 29 | coolColor: fallingCube.coolColor 30 | warmColor: Qt.rgba(0.9 + 0.1*Math.random(), 31 | 0.2 + 0.2*Math.random(), 32 | 0.2*Math.random()) 33 | } 34 | transform: Rotation3D { 35 | axis: Qt.vector3d(Math.random(), Math.random(), Math.random()) 36 | SequentialAnimation on angle { 37 | id: angleAnimation 38 | property real offset: 360*Math.random() 39 | property real duration: 3000+3000*Math.random() 40 | running: true; loops: Animation.Infinite 41 | NumberAnimation { 42 | from: angleAnimation.offset; to: 360 43 | duration: (360-angleAnimation.offset)*angleAnimation.duration/360 44 | } 45 | NumberAnimation { 46 | from: 0; to: angleAnimation.offset 47 | duration: angleAnimation.offset*angleAnimation.duration/360 48 | } 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /fallingcubes/GoochShading.qml: -------------------------------------------------------------------------------- 1 | import Qt3D 2.0 2 | import QtQuick 2.0 3 | 4 | ShaderProgram { 5 | property color warmColor 6 | property color coolColor 7 | vertexShader: " 8 | attribute highp vec4 qt_Vertex; 9 | attribute highp vec3 qt_Normal; 10 | 11 | uniform lowp vec4 warmColor; 12 | uniform lowp vec4 coolColor; 13 | 14 | uniform highp mat3 qt_NormalMatrix; 15 | uniform highp mat4 qt_ModelViewProjectionMatrix; 16 | uniform highp mat4 qt_ModelViewMatrix; 17 | 18 | varying float facingProjector; 19 | 20 | struct qt_SingleLightParameters { 21 | mediump vec4 position; 22 | mediump vec3 spotDirection; 23 | mediump float spotExponent; 24 | mediump float spotCutoff; 25 | mediump float spotCosCutoff; 26 | mediump float constantAttenuation; 27 | mediump float linearAttenuation; 28 | mediump float quadraticAttenuation; 29 | }; 30 | uniform qt_SingleLightParameters qt_Light; 31 | 32 | void main(void) 33 | { 34 | highp vec4 vertex = qt_ModelViewMatrix * qt_Vertex; 35 | highp vec3 normal = normalize(qt_NormalMatrix * qt_Normal); 36 | highp vec3 light = normalize(qt_Light.position.xyz - vertex.xyz); 37 | facingProjector = clamp(dot(normal, light), 0.0, 1.0); 38 | gl_Position = qt_ModelViewProjectionMatrix * qt_Vertex; 39 | } 40 | " 41 | fragmentShader: " 42 | uniform lowp vec4 warmColor; 43 | uniform lowp vec4 coolColor; 44 | 45 | varying float facingProjector; 46 | 47 | void main(void) 48 | { 49 | highp float ratio = 0.5 * (facingProjector + 1.0); 50 | gl_FragColor = mix(warmColor, coolColor, ratio); 51 | } 52 | " 53 | } 54 | -------------------------------------------------------------------------------- /fallingcubes/fallingcubes.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = app 2 | TARGET = fallingcubes 3 | SOURCES += main.cpp 4 | CONFIG += qt3dquick 5 | -------------------------------------------------------------------------------- /fallingcubes/fallingcubes.qml: -------------------------------------------------------------------------------- 1 | import Qt3D 2.0 2 | import QtQuick 2.0 3 | import Qt3D.Shapes 2.0 4 | 5 | Viewport { 6 | id: fallingCubes 7 | width: 800; height: 480 8 | property color coolColor: Qt.rgba(0.3 + 0.1*Math.random(), 9 | 0.3 * Math.random(), 10 | 0.5 + 0.1*Math.random()) 11 | Item3D { 12 | x: -4.2; y: -1.62; scale: 0.23 13 | Quad { 14 | x: 18.4; y: 6.8; z: -10; scale: 18 15 | transform: Rotation3D { 16 | angle: 90; axis: Qt.vector3d(1.0, 0.0, 0.0) 17 | } 18 | effect: Effect { 19 | property real fade 20 | SequentialAnimation on fade { 21 | id: fadeAnimation 22 | property real offset: Math.random() 23 | property real duration: 4000+4000*Math.random() 24 | running: true; loops: Animation.Infinite 25 | NumberAnimation { 26 | from: 0.0; to: 1.0 27 | duration: fadeAnimation.duration/2 28 | } 29 | NumberAnimation { 30 | from: 1.0; to: 0.0 31 | duration: fadeAnimation.duration/2 32 | } 33 | } 34 | color: Qt.rgba(0.95 + 0.05*Math.random(), 35 | 0.5 + 0.2*fade, 36 | 0.1 + 0.1*Math.random()) 37 | } 38 | } 39 | Repeater { 40 | model: 200 41 | FallingCube { coolColor: fallingCubes.coolColor } 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /fallingcubes/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | QApplication app(argc, argv); 7 | QDeclarativeView3D view; 8 | view.setSource(QUrl::fromLocalFile(QLatin1String("fallingcubes.qml"))); 9 | 10 | if (QApplication::arguments().contains(QLatin1String("-maximize"))) 11 | view.showMaximized(); 12 | else if (QApplication::arguments().contains(QLatin1String("-fullscreen"))) 13 | view.showFullScreen(); 14 | else 15 | view.show(); 16 | 17 | return app.exec(); 18 | } 19 | -------------------------------------------------------------------------------- /fireworks/components/Firework.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | 3 | Rectangle { 4 | color: "transparent" 5 | border.color: "transparent" // "white" 6 | border.width: 1 7 | RotationAnimator on rotation { 8 | from: 0 9 | to: (Math.random() > 0.5 ? -1 : 1) * 360 10 | loops: Animation.Infinite 11 | running: Qt.application.active 12 | duration: 5000 + Math.random() * 4000 13 | } 14 | 15 | Canvas { 16 | property color color: "white" 17 | anchors.fill: parent 18 | onPaint: { 19 | var ctx = getContext('2d') 20 | ctx.save() 21 | ctx.clearRect(0, 0, width, height) 22 | ctx.strokeStyle = "white" 23 | ctx.lineWidth = unit 24 | 25 | var count = Math.round(4 + 4 * Math.random()) 26 | 27 | var angle = 0 28 | var granularity = Math.PI/12 29 | ctx.beginPath() 30 | while (angle < 2*Math.PI) { 31 | ctx.strokeStyle = Qt.rgba(0.6 + 0.4*Math.random(), 0.6 + 0.4*Math.random(), 0.6, 1) 32 | angle = granularity*Math.round((angle + 2*Math.PI/count*(0.5 + Math.random())) / granularity) 33 | if (angle > 2*Math.PI) continue 34 | ctx.moveTo(round(width/2), round(height/2)) 35 | ctx.lineTo(round(width/2 + Math.cos(angle)*width/2*(1.3 + 0.4*Math.random())), 36 | round(height/2 + Math.sin(angle)*height/2*(1.3 + 0.4*Math.random()))) 37 | } 38 | ctx.stroke() 39 | ctx.restore() 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /fireworks/fireworks.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | import "components" 3 | 4 | Rectangle { 5 | readonly property int unit: 2 6 | readonly property int small: 6*unit 7 | readonly property int medium: 2*small 8 | readonly property int large: 2*medium 9 | readonly property int huge: 2*large 10 | 11 | function round(value) { 12 | return 2*unit*Math.round(0.5*value/unit) 13 | } 14 | 15 | width: 2560 16 | height: 1386 17 | gradient: Gradient { 18 | GradientStop { 19 | position: 0.0 20 | color: "#222222" 21 | } 22 | GradientStop { 23 | position: 1.0 24 | color: "#111111" 25 | } 26 | } 27 | 28 | Item { 29 | id: content 30 | width: parent.width 31 | height: parent.height 32 | 33 | Repeater { 34 | model: 500 35 | property var existing: [] 36 | function overlap(a, b) { 37 | var m = unit*4 38 | var A = Qt.rect(a.x - m, a.y - m, a.width + 2*m, a.height + 2*m) 39 | var B = Qt.rect(b.x - m, b.y - m, b.width + 2*m, b.height + 2*m) 40 | return (A.x + A.width > B.x) && (B.x + B.width > A.x) && (A.y + A.height > B.y) && (B.y + B.height > A.y) 41 | } 42 | 43 | Component.onCompleted: { 44 | for (var i = 0; i < count; i++) { 45 | var item = itemAt(i) 46 | 47 | var overlaps = true 48 | var maxTries = 20 49 | var tries = 0 50 | while (overlaps) { 51 | overlaps = false 52 | item.x = round(Math.random()*parent.width - item.width/2) 53 | item.y = round(Math.random()*parent.height - item.height/2) 54 | for (var j = 0; j < existing.length; j++) { 55 | var other = existing[j] 56 | if (overlap(item, other)) { 57 | overlaps = true 58 | tries = tries + 1 59 | break 60 | } 61 | } 62 | if (tries >= maxTries) { 63 | item.visible = false 64 | break 65 | } 66 | } 67 | if (!overlaps) existing.push(item) 68 | } 69 | } 70 | 71 | Firework { 72 | x: Math.random()*parent.width - width/2 73 | y: Math.random()*parent.height - height/2 74 | width: round(Math.round(3+5*Math.random())*4*unit) 75 | height: round(width*(0.7+0.6*Math.random())) 76 | } 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /fooddiary/fooddiary.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Rectangle { 4 | 5 | color: "white" 6 | width: column.width + 6 * paddingLarge 7 | height: column.height + 4 * paddingLarge 8 | 9 | property int unit: 60 10 | property int fontSizeTiny: unit/3 11 | property int fontSizeHuge: unit * 1.5 12 | property int paddingSmall: unit/10 13 | property int paddingMedium: 2 * paddingSmall 14 | property int paddingLarge: 2 * paddingMedium 15 | 16 | Label { 17 | id: dummyText 18 | text: "Dummy" 19 | width: 3*unit 20 | font.pixelSize: fontSizeTiny 21 | visible: false 22 | } 23 | 24 | Column { 25 | id: column 26 | 27 | spacing: 2 * paddingLarge 28 | anchors { 29 | centerIn: parent 30 | verticalCenterOffset: paddingLarge 31 | } 32 | 33 | Label { 34 | text: "Ruokapäiväkirja - Syksy 2019" 35 | font.pixelSize: fontSizeHuge 36 | anchors.horizontalCenter: parent.horizontalCenter 37 | } 38 | 39 | Grid { 40 | columns: repeater.model.count/2 41 | rowSpacing: paddingLarge 42 | 43 | Repeater { 44 | id: repeater 45 | 46 | Column { 47 | width: 2 * unit 48 | spacing: paddingMedium 49 | 50 | Label { 51 | text: model.weekday 52 | anchors.horizontalCenter: parent.horizontalCenter 53 | opacity: model.weekday === "La" || model.weekday === "Su" ? 1.0 : 0.6 54 | font.pixelSize: fontSizeTiny 55 | } 56 | 57 | Rectangle { 58 | height: 3 * unit 59 | width: 1 * unit - 2 * paddingSmall 60 | anchors.horizontalCenter: parent.horizontalCenter 61 | color: Qt.rgba(0.8, 0.8, 0.8, model.level >= 0 ? 0.5 : 0.4) 62 | 63 | Label { 64 | text: "?" 65 | visible: model.level < 0 66 | anchors.centerIn: parent 67 | } 68 | 69 | Rectangle { 70 | color: { 71 | if (model.level < 0) return "transparent" 72 | if (model.level >= 3) return "red" 73 | else if (model.level <= 1) return Qt.rgba(0.9, 0.9, 0.4) 74 | else return "orange" 75 | } 76 | width: parent.width 77 | anchors.bottom: parent.bottom 78 | height: parent.height * model.level / 5 79 | } 80 | } 81 | 82 | Label { 83 | opacity: 0.6 84 | text: model.day + "." 85 | font.pixelSize: fontSizeTiny 86 | anchors.horizontalCenter: parent.horizontalCenter 87 | } 88 | 89 | Item { 90 | width: 1 91 | anchors.horizontalCenter: parent.horizontalCenter 92 | height: (model.index % 2 ? dummyText.height * 5 + paddingLarge : 0) 93 | Rectangle { 94 | width: 1 95 | opacity: 0.6 96 | color: "black" 97 | y: paddingMedium 98 | visible: model.index % 2 99 | height: parent.height - y - paddingSmall 100 | anchors.horizontalCenter: parent.horizontalCenter 101 | } 102 | } 103 | 104 | Column { 105 | anchors.horizontalCenter: parent.horizontalCenter 106 | width: parent.width + unit - 2 * paddingSmall 107 | Label { 108 | text: model.food 109 | width: parent.width 110 | font.pixelSize: fontSizeTiny 111 | horizontalAlignment: Text.AlignHCenter 112 | } 113 | Label { 114 | opacity: 0.7 115 | color: "darkred" 116 | text: model.drinks 117 | width: parent.width 118 | font.pixelSize: fontSizeTiny 119 | height: Math.max(2 * dummyText.height, implicitHeight) 120 | } 121 | } 122 | } 123 | 124 | model: ListModel { 125 | ListElement { 126 | day: "9" 127 | weekday: "Ke" 128 | food: "Glut. hampurilainen salaatilla, 10kpl wings" 129 | drinks: "4 olutta" 130 | level: -1 131 | } 132 | ListElement { 133 | day: "10" 134 | weekday: "To" 135 | food: "Int. kana ja riisi, kalasushi, suklaakakun pala" 136 | drinks: "" 137 | level: 4 138 | } 139 | ListElement { 140 | day: "11" 141 | weekday: "Pe" 142 | food: "Tomaattipasta, tortilloja suklaajäätelöä 2dl" 143 | drinks: "2 lasia viiniä" 144 | level: 1 145 | } 146 | ListElement { 147 | day: "12" 148 | weekday: "La" 149 | food: "Maitorahkavälipala, soijawokki riisillä" 150 | drinks: "" 151 | level: 2 152 | } 153 | ListElement { 154 | day: "13" 155 | weekday: "Su" 156 | food: "Soijawokki riisillä, kanapullia ja muusia" 157 | drinks: "Glut. olut" 158 | level: 2 // 4 159 | } 160 | ListElement { 161 | day: "14" 162 | weekday: "Ma" 163 | food: "Lohisalaatti" 164 | drinks: "" 165 | level: 2 166 | } 167 | ListElement { 168 | day: "15" 169 | weekday: "Ti" 170 | food: "Kanaa ja riisiä, tofua ja perunaa" 171 | drinks: "" 172 | level: 2 173 | } 174 | ListElement { 175 | day: "16" 176 | weekday: "Ke" 177 | food: "Kanaa ja riisiä, kananmuna" 178 | drinks: "" 179 | level: 2 180 | } 181 | ListElement { 182 | day: "17" 183 | weekday: "To" 184 | food: "Lohisalaatti, mozzarellatortillapizza" 185 | drinks: "" 186 | level: 1 187 | } 188 | ListElement { 189 | day: "18" 190 | weekday: "Pe" 191 | food: "Lohisalaatti, seitä ja perunaa" 192 | drinks: "2 olutta, toinen ei glut." 193 | level: 2 194 | } 195 | ListElement { 196 | day: "19" 197 | weekday: "La" 198 | food: "Glut. makaroni ja kalapihvejä, vehnätortilloja, suklaakakkua, pizzaa" 199 | drinks: "2 lasia viiniä" 200 | level: 3 201 | } 202 | ListElement { 203 | day: "20" 204 | weekday: "Su" 205 | food: "Minidonitsi, glut. kanahampurilainen" 206 | drinks: "Glut. olut" 207 | level: 3 208 | } 209 | ListElement { 210 | day: "21" 211 | weekday: "Ma" 212 | food: "Lohisalaatti" 213 | drinks: "" 214 | level: 2 215 | } 216 | ListElement { 217 | day: "22" 218 | weekday: "Ti" 219 | food: "Lohisalaatti, tomaattikastike ja glut. makaroni" 220 | drinks: "" 221 | level: 2 222 | } 223 | ListElement { 224 | day: "23" 225 | weekday: "Ke" 226 | food: "Glut. kasvishampurilainen" 227 | drinks: "" 228 | level: 2 229 | } 230 | ListElement { 231 | day: "24" 232 | weekday: "To" 233 | food: "Halloumisalaatti, Tofua ja perunaa" 234 | drinks: "2 lasia viiniä" 235 | level: 1 236 | } 237 | ListElement { 238 | day: "25" 239 | weekday: "Pe" 240 | food: "Glut. kanaleipä, lohisushia" 241 | drinks: "2 olutta" 242 | level: 2 243 | } 244 | ListElement { 245 | day: "26" 246 | weekday: "La" 247 | food: "Kalapihvejä ja glut. makaronia, tortilloja" 248 | drinks: "Glut. olut" 249 | level: 3 250 | } 251 | ListElement { 252 | day: "3" 253 | weekday: "Su" 254 | food: "Täytetty vehnäsämpylä, kanaa riisillä" 255 | drinks: "" 256 | level: -1 257 | } 258 | ListElement { 259 | day: "4" 260 | weekday: "Ma" 261 | food: "Kanasalaatti, glut. tomaattipasta" 262 | drinks: "" 263 | level: 2 264 | } 265 | ListElement { 266 | day: "5" 267 | weekday: "Ti" 268 | food: "?" 269 | drinks: "" 270 | level: 2 271 | } 272 | ListElement { 273 | day: "6" 274 | weekday: "Ke" 275 | food: "Lohisushia, maitorahka ja marjoja" 276 | drinks: "" 277 | level: -1 278 | } 279 | ListElement { 280 | day: "7" 281 | weekday: "To" 282 | food: "Kanaa riisillä, kanasalaatti" 283 | drinks: "" 284 | level: 3 285 | } 286 | ListElement { 287 | day: "8" 288 | weekday: "Pe" 289 | food: "Sushi, glut. kanahampurilainen" 290 | drinks: "" 291 | level: 3 292 | } 293 | ListElement { 294 | day: "9" 295 | weekday: "La" 296 | food: "Kanaa, riisiä, lohta, 3 pientä ribs, lohisushia" 297 | drinks: "2 glut. olutta\nLasi viiniä" 298 | level: 1 299 | } 300 | ListElement { 301 | day: "10" 302 | weekday: "Su" 303 | food: "Kanaa ja nuudeleita" 304 | drinks: "Lasi viiniä" 305 | level: 1 // aamulla 0, illalla 2 306 | } 307 | ListElement { 308 | day: "11" 309 | weekday: "Ma" 310 | food: "Katkaraputortilla, kasvispihvejä ja muusia" 311 | drinks: "" 312 | level: 1 313 | } 314 | ListElement { 315 | day: "12" 316 | weekday: "Ti" 317 | food: "Lohisushi, kasvistortilloja, juustokakun pala" 318 | drinks: "Glut. olut" 319 | level: 2 320 | } 321 | ListElement { 322 | day: "13" 323 | weekday: "Ke" 324 | food: "Lohisalaatti, glut. sämpylä, kananmuna" 325 | drinks: "" 326 | level: 1 327 | } 328 | ListElement { 329 | day: "14" 330 | weekday: "To" 331 | food: "hernekeitto, pannukakku, glut. tonnikalapizza" 332 | drinks: "" 333 | level: 2 334 | } 335 | ListElement { 336 | day: "15" 337 | weekday: "Pe" 338 | food: "Kanatortilla, glut. avokadopasta" 339 | drinks: "2 glut. olutta\nLasi viiniä" 340 | level: 3 341 | } 342 | ListElement { 343 | day: "16" 344 | weekday: "La" 345 | food: "Glut. kalapizza, mansikkasmoothie" 346 | drinks: "Olut" 347 | level: 3 348 | } 349 | ListElement { 350 | day: "17" 351 | weekday: "Su" 352 | food: "Glut. pasta, vihanneksia ja tofua, täytetyt kasvispaprikat, konvehteja" 353 | drinks: "" 354 | level: 3 355 | } 356 | ListElement { 357 | day: "18" 358 | weekday: "Ma" 359 | food: "Lohisalaatti, glut. tomaattipasta" 360 | drinks: "" 361 | level: 2 362 | } 363 | ListElement { 364 | day: "21" 365 | weekday: "To" 366 | food: "Kalaa ja riisiä, sisäfile ja perunoita" 367 | drinks: "Lasi punaviiniä\n2 drinkkiä" 368 | level: 1 369 | } 370 | ListElement { 371 | day: "22" 372 | weekday: "Pe" 373 | food: "Lohisushia, kasvishampurilainen" 374 | drinks: "2 olutta" 375 | level: 3 376 | } 377 | } 378 | } 379 | } 380 | } 381 | } 382 | -------------------------------------------------------------------------------- /geometry/components/Polygon.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | 3 | Rectangle { 4 | property int sides 5 | property int radius: width/2 6 | property int lineWidth: unit 7 | 8 | color: "transparent" 9 | border.color: "transparent" // "white" 10 | border.width: 1 11 | 12 | RotationAnimator on rotation { 13 | from: 0 14 | to: (Math.random() > 0.5 ? -1 : 1) * 360 15 | loops: Animation.Infinite 16 | running: Qt.application.active 17 | duration: 5000 + Math.random() * 4000 18 | } 19 | 20 | Canvas { 21 | property color color: "white" 22 | rotation: Math.round(4*sides*Math.random())*(360/(sides*4)) 23 | anchors.fill: parent 24 | onPaint: { 25 | var ctx = getContext('2d') 26 | ctx.save() 27 | ctx.clearRect(0, 0, width, height) 28 | ctx.strokeStyle = "white" 29 | ctx.lineWidth = lineWidth 30 | 31 | ctx.beginPath() 32 | var angle = 0 33 | var angleStep = 2*Math.PI/sides 34 | 35 | ctx.moveTo(width/2 + Math.cos(angle)*radius, 36 | height/2 + Math.sin(angle)*radius) 37 | angle = angle + angleStep 38 | 39 | for (var i = 0; i <= sides; i++) { 40 | ctx.lineTo(width/2 + Math.cos(angle)*radius, 41 | height/2 + Math.sin(angle)*radius) 42 | angle = angle + angleStep 43 | } 44 | ctx.stroke() 45 | ctx.restore() 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /geometry/geometry.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | import "components" 3 | 4 | Rectangle { 5 | readonly property int unit: 2 6 | readonly property int small: 6*unit 7 | readonly property int medium: 2*small 8 | readonly property int large: 2*medium 9 | readonly property int huge: 2*large 10 | 11 | function round(value) { 12 | return 2*unit*Math.round(0.5*value/unit) 13 | } 14 | 15 | width: 2560 16 | height: 1386 17 | gradient: Gradient { 18 | GradientStop { 19 | position: 0.0 20 | color: "#222222" 21 | } 22 | GradientStop { 23 | position: 1.0 24 | color: "#111111" 25 | } 26 | } 27 | 28 | Item { 29 | id: content 30 | width: parent.width 31 | height: parent.height 32 | 33 | Repeater { 34 | model: 500 35 | property var existing: [] 36 | function overlap(a, b) { 37 | var m = unit*2 38 | var A = Qt.rect(a.x - m, a.y - m, a.width + 2*m, a.height + 2*m) 39 | var B = Qt.rect(b.x - m, b.y - m, b.width + 2*m, b.height + 2*m) 40 | return (A.x + A.width > B.x) && (B.x + B.width > A.x) && (A.y + A.height > B.y) && (B.y + B.height > A.y) 41 | } 42 | 43 | Component.onCompleted: { 44 | for (var i = 0; i < count; i++) { 45 | var item = itemAt(i) 46 | 47 | var overlaps = true 48 | var maxTries = 20 49 | var tries = 0 50 | while (overlaps) { 51 | overlaps = false 52 | item.x = round(Math.random()*parent.width - item.width/2) 53 | item.y = round(Math.random()*parent.height - item.height/2) 54 | for (var j = 0; j < existing.length; j++) { 55 | var other = existing[j] 56 | if (overlap(item, other)) { 57 | overlaps = true 58 | tries = tries + 1 59 | break 60 | } 61 | } 62 | if (tries >= maxTries) { 63 | item.visible = false 64 | break 65 | } 66 | } 67 | if (!overlaps) existing.push(item) 68 | } 69 | } 70 | 71 | Polygon { 72 | sides: 3+Math.floor(Math.random()*4) 73 | width: round(Math.round(4+4*Math.random())*small) 74 | height: width 75 | } 76 | } 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /horizontalflow/AlphabeticScrollbar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | MouseArea { 4 | width: 400; height: 50 5 | property variant view 6 | property variant alphabets 7 | property variant alphabetIndeces 8 | property int currentIndex 9 | property real letterWidth: (width + 10)/alphabets.length 10 | onPressed: updatePosition(mouse.x) 11 | onPositionChanged: updatePosition(mouse.x) 12 | function updatePosition(x) { 13 | var index = Math.round((x-10)/letterWidth); 14 | if (index >= 0 && index < alphabetIndeces.length) { 15 | currentIndex = index; 16 | view.currentIndex = alphabetIndeces[index]; 17 | } 18 | } 19 | Rectangle { 20 | radius: 10 21 | color: "white" 22 | visible: parent.pressed 23 | height: letterWidth+60; width: letterWidth+30 24 | x: Math.min(Math.max(0,parent.mouseX-width/2), parent.width-width) 25 | anchors { bottom: parent.bottom; bottomMargin: -10 } 26 | Text { 27 | font.pixelSize: 34 28 | text: alphabets[currentIndex] 29 | anchors { centerIn: parent; verticalCenterOffset: -20 } 30 | } 31 | } 32 | Rectangle { 33 | height: 20 34 | color: Qt.rgba(1.0, 1.0, 1.0, 0.2) 35 | anchors {left: parent.left; right: parent.right; bottom: parent.bottom } 36 | } 37 | } 38 | 39 | -------------------------------------------------------------------------------- /horizontalflow/Delegate.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Rectangle { 4 | width: 200; height: 200 5 | scale: PathView.iconScale 6 | z: PathView.view.zLevel(index) 7 | color: Qt.rgba(0.5+(PathView.view.count - number)*Math.random()/PathView.view.count, 8 | 0.3+number*Math.random()/PathView.view.count, 0.3*Math.random(), 0.7) 9 | signal clicked 10 | Keys.onReturnPressed: clicked() 11 | onClicked: PathView.view.currentIndex = index 12 | MouseArea { 13 | id: delegateMouse 14 | anchors.fill: parent 15 | onClicked: parent.clicked() 16 | } 17 | Rectangle { 18 | color: Qt.rgba(0.2, 0.3, 0.8) 19 | opacity: delegateMouse.pressed ? 0.8 : 0.0 20 | anchors.fill: parent 21 | } 22 | Text { 23 | smooth: true 24 | color: "white" 25 | font.pixelSize: 30 26 | text: "ITEM\n" + item 27 | anchors.centerIn: parent 28 | horizontalAlignment: Text.AlignHCenter 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /horizontalflow/HorizontalPathView.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | PathView { 4 | id: horizontalPathView 5 | focus: true 6 | highlight: Item {} 7 | pathItemCount: 11 8 | preferredHighlightBegin: 0.5; preferredHighlightEnd: 0.5 9 | path: Path { 10 | startX: -400; startY: horizontalPathView.height/2-70 11 | PathAttribute { name: "iconScale"; value: 0.5 } 12 | PathQuad { 13 | x: horizontalPathView.width/2 14 | y: horizontalPathView.height/2-20 15 | controlX: horizontalPathView.width/4 16 | controlY: horizontalPathView.height/2-45 17 | } 18 | PathAttribute { name: "iconScale"; value: 1.0 } 19 | PathQuad { 20 | x: horizontalPathView.width+400 21 | y: horizontalPathView.height/2-70 22 | controlX: 3*horizontalPathView.width/4 23 | controlY: horizontalPathView.height/2-45 24 | } 25 | PathAttribute { name: "iconScale"; value: 0.5 } 26 | } 27 | Keys.onLeftPressed: decrementCurrentIndex() 28 | Keys.onRightPressed: incrementCurrentIndex() 29 | function zLevel(index) { 30 | var dist = Math.abs((currentIndex - index) % count) 31 | if (dist > (pathItemCount/2.0 + 1)) 32 | dist = count - dist 33 | return Math.floor(pathItemCount/2.0) - dist 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /horizontalflow/Model.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | ListModel { 4 | property variant alphabets: [] 5 | property variant alphabetIndeces: [] 6 | function calculateAlphabets() { 7 | var newAlphabets = [] 8 | var newAlphabetIndeces = [] 9 | var previousItem, item = " " 10 | for (var index = 0; index < count; index++) { 11 | previousItem = item 12 | item = get(index).item 13 | if (previousItem.charAt(0) != item.charAt(0)) { 14 | newAlphabets[newAlphabets.length] = item.charAt(0) 15 | newAlphabetIndeces[newAlphabetIndeces.length] = index 16 | } 17 | } 18 | alphabets = newAlphabets 19 | alphabetIndeces = newAlphabetIndeces 20 | } 21 | Component.onCompleted: populate() 22 | function populate() { 23 | // go from A to Z 24 | for (var index = 65; index < 91; index++) { 25 | var alphabet = String.fromCharCode(index) 26 | var alphabetCount = Math.floor(Math.random()*5) 27 | for (var index2 = 0; index2 < alphabetCount; index2++) 28 | append({"number": count, "item": alphabet}) 29 | } 30 | calculateAlphabets() 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /horizontalflow/horizontalflow.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Rectangle { 4 | color: "black" 5 | width: 800; height: 280 6 | HorizontalPathView { 7 | id: horizontalPathView 8 | model: Model { id: model } 9 | delegate: Delegate {} 10 | anchors.fill: parent 11 | } 12 | AlphabeticScrollbar { 13 | view: horizontalPathView 14 | alphabets: model.alphabets 15 | alphabetIndeces: model.alphabetIndeces 16 | anchors { 17 | left: parent.left 18 | right: parent.right 19 | bottom: parent.bottom 20 | margins: 3 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /howtoscreencapture.txt: -------------------------------------------------------------------------------- 1 | How to do screen capture on Ubuntu 2 | 3 | 1. Install screen capture software 4 | sudo apt-get install recordmydesktop 5 | 6 | 2. Open application you want to capture 7 | qmlscene myproject.qml 8 | 9 | 3. Use xwindinfo to determine the window id of the application window you want to capture 10 | xwininfo # click on the window you want to record to determine the window id 11 | 12 | 4. Start recording. If you want you can specify delay in seconds. 13 | recordmydesktop --fps=60 --delay=3 --no-frame --stop-shortcut=Control+s --no-sound --windowid=windowidhere # e.g. --windowid=0x300000d 14 | 15 | 5. a.) Convert the Ogg Vorbis clip to divx 16 | 17 | sudo apt-get install mencoder 18 | mencoder out.ogv -ovc xvid -oac mp3lame -xvidencopts pass=1 -o out.avi 19 | 20 | or 21 | 22 | 5. b.) If you need to clip the recording use PiTiVi (executable pitivi). 23 | 24 | Render the clipped video. In PiTiVi click Render project toolbar button. Modify Export settings to your liking: 25 | Video output: Custom 26 | Width: 800 # change width to match the size of the window 27 | Height: 480 # change height to match the size of the window 28 | Framerate: 15fps # to match recordmydesktop capture parameters 29 | Container: Avi Muxer [avimux] # Vimeo doesn't support the default Ogg Vorbis encoder 30 | Video Codec: FFmpeg MPEG-4 part 2 encoder [ffenc_mpeg4]. 31 | 32 | -------------------------------------------------------------------------------- /layoutgrid/components/ContentItem.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | id: root 5 | color: contentColor 6 | 7 | border { 8 | width: wireframe ? lineWidth : 0 9 | color: Qt.rgba(primaryColor.r, primaryColor.g, primaryColor.b, 0.4) 10 | } 11 | Binding { 12 | target: root 13 | when: wireframe 14 | property: "color" 15 | value: "transparent" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /layoutgrid/components/Label.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Item { 4 | property alias color: rectangle.color 5 | width: parent.width 6 | height: unit/2 7 | Rectangle { 8 | id: rectangle 9 | color: primaryColor 10 | anchors.verticalCenter: parent.verticalCenter 11 | height: wireframe ? lineWidth : parent.height 12 | width: parent.width 13 | radius: wireframe ? 0 : height/2 14 | } 15 | } 16 | 17 | -------------------------------------------------------------------------------- /layoutgrid/components/LayoutGrid.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Item { 4 | z: 1000 5 | anchors.fill: parent 6 | 7 | Row { 8 | x: pageMargin - lineWidth/2 9 | height: parent.height 10 | spacing: 5*unit - lineWidth 11 | Repeater { 12 | model: 5 13 | Rectangle { 14 | opacity: 0.4 15 | width: lineWidth 16 | height: parent.height 17 | color: layoutGridColor 18 | } 19 | } 20 | } 21 | Repeater { 22 | model: [2, 3, 6, 7, 12, 13, 17, 18, 23, 24, 28, 29, 31] 23 | Rectangle { 24 | y: modelData*unit - lineWidth/2 25 | opacity: 0.4 26 | height: lineWidth 27 | width: parent.width 28 | color: layoutGridColor 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /layoutgrid/components/Paragraph.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Column { 4 | property int lineCount: 3 5 | spacing: unit/2 6 | Repeater { 7 | model: lineCount 8 | Label { 9 | width: model.index % lineCount === lineCount-1 ? parent.width/2 + Math.random()*parent.width/2 10 | : parent.width 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /layoutgrid/components/Polygon.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Canvas { 4 | property var array 5 | property color color: primaryColor 6 | 7 | onPaint: { 8 | var ctx = getContext('2d') 9 | ctx.save() 10 | ctx.clearRect(0, 0, width, height) 11 | ctx.fillStyle = color 12 | ctx.beginPath() 13 | ctx.moveTo(array[0][0], array[0][1]) 14 | for (var i = 1; i < array.length; i++) { 15 | ctx.lineTo(array[i][0], array[i][1]) 16 | } 17 | ctx.closePath() 18 | ctx.fill() 19 | ctx.restore() 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /layoutgrid/layoutgrid.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | // View component, background overlay as the root item 5 | Rectangle { 6 | 7 | property real unit: 10 8 | property real lineWidth: 2 9 | property real buttonWidth: 3/2*unit 10 | property real pageMargin: 2*unit 11 | property bool wireframe 12 | property alias layoutGridVisible: layoutGrid.visible 13 | 14 | property color primaryColor: wireframe ? "white" : "#f8f1e0" 15 | property color backgroundColor: wireframe ? "#575757" : "#99dbcd" 16 | property color contentColor: wireframe ? "transparent" : "#7295a6" 17 | property color highlightBackgroundColor: wireframe ? "transparent" : "#a791c9" 18 | property color layoutGridColor: "#ffffff" 19 | 20 | property int fontSizeSmall: 14 21 | property int fontSizeMedium: 16 22 | 23 | width: 24*unit 24 | height: 32*unit 25 | color: backgroundColor 26 | 27 | // Combined scroll area and list layout 28 | Column { 29 | anchors { 30 | top: parent.top 31 | bottom: toolbar.top 32 | } 33 | spacing: unit 34 | width: parent.width 35 | 36 | // Status area 37 | Rectangle { 38 | 39 | color: contentColor 40 | width: parent.width 41 | height: 2*unit 42 | 43 | Row { 44 | x: unit 45 | anchors.verticalCenter: parent.verticalCenter 46 | spacing: unit/2 47 | Repeater { 48 | model: 2 49 | Rectangle { 50 | height: unit 51 | width: unit 52 | color: primaryColor 53 | } 54 | } 55 | } 56 | Row { 57 | anchors { 58 | right: parent.right 59 | rightMargin: unit 60 | verticalCenter: parent.verticalCenter 61 | } 62 | spacing: unit/2 63 | Repeater { 64 | model: 3 65 | Rectangle { 66 | height: unit 67 | width: unit 68 | color: primaryColor 69 | } 70 | } 71 | } 72 | } 73 | 74 | // Notification 75 | Row { 76 | id: row 77 | x: pageMargin 78 | spacing: unit 79 | width: parent.width - 2*x 80 | 81 | ContentItem { 82 | id: image 83 | height: 3*unit 84 | width: 3*unit 85 | opacity: wireframe ? 0.5 : 1.0 86 | } 87 | Paragraph { 88 | id: paragraph 89 | width: parent.width - parent.spacing - image.width 90 | lineCount: 3 91 | } 92 | } 93 | 94 | // Audio player widget 95 | Rectangle { 96 | color: highlightBackgroundColor 97 | x: pageMargin 98 | width: parent.width - 2*x 99 | height: content.height + unit 100 | Row { 101 | id: content 102 | 103 | x: unit/2 104 | y: unit/2 105 | spacing: unit/2 106 | width: parent.width - 2*x 107 | 108 | // Album art 109 | ContentItem { 110 | id: album 111 | opacity: wireframe ? 1.0 : 0.2 112 | color: primaryColor 113 | 114 | height: audioControls.height + audioControls.y 115 | width: height 116 | } 117 | Column { 118 | id: audioControls 119 | 120 | y: unit 121 | spacing: unit 122 | width: parent.width - album.width - parent.spacing 123 | Row { 124 | spacing: 3*unit 125 | anchors.horizontalCenter: parent.horizontalCenter 126 | height: 1.5*unit 127 | 128 | // Previous button 129 | Row { 130 | width: 2*unit 131 | Rectangle { 132 | color: primaryColor 133 | width: lineWidth*2 134 | height: buttonWidth 135 | } 136 | Polygon { 137 | color: primaryColor 138 | width: buttonWidth 139 | height: buttonWidth 140 | array: [[width,0], [0, height/2], [width, height]] 141 | } 142 | } 143 | 144 | // Play button 145 | Item { 146 | width: buttonWidth 147 | height: buttonWidth 148 | Polygon { 149 | color: primaryColor 150 | width: buttonWidth 151 | height: buttonWidth 152 | array: [[0,0], [width, height/2], [0, height]] 153 | anchors { 154 | centerIn: parent 155 | horizontalCenterOffset: lineWidth*2 156 | } 157 | } 158 | } 159 | 160 | // Next button 161 | Row { 162 | Polygon { 163 | color: primaryColor 164 | width: buttonWidth 165 | height: buttonWidth 166 | array: [[0,0], [width, height/2], [0, height]] 167 | } 168 | Rectangle { 169 | color: primaryColor 170 | width: lineWidth*2 171 | height: buttonWidth 172 | } 173 | } 174 | } 175 | 176 | // Progress bar 177 | Rectangle { 178 | color: Qt.rgba(primaryColor.r, primaryColor.g, primaryColor.b, 0.6) 179 | height: unit/2 180 | width: parent.width 181 | Rectangle { 182 | color: primaryColor 183 | width: parent.width/2 184 | height: parent.height 185 | } 186 | } 187 | } 188 | } 189 | } 190 | 191 | // Shortcut row 192 | Rectangle { 193 | x: pageMargin 194 | width: parent.width - 2*x 195 | height: shortcutRow.height + unit 196 | color: wireframe ? "transparent" : Qt.rgba(primaryColor.r, primaryColor.g, primaryColor.b, 0.5) 197 | 198 | Row { 199 | id: shortcutRow 200 | anchors.verticalCenter: parent.verticalCenter 201 | Repeater { 202 | model: 4 203 | Column { 204 | width: 5*unit 205 | spacing: unit/2 206 | ContentItem { 207 | width: 2*unit 208 | height: 2*unit 209 | anchors.horizontalCenter: parent.horizontalCenter 210 | } 211 | Label { 212 | x: unit/2 213 | width: 4*unit 214 | } 215 | } 216 | } 217 | } 218 | } 219 | 220 | // Gallery widget 221 | Row { 222 | x: pageMargin 223 | Repeater { 224 | model: [0.9, 0.4, 1, 0.1] 225 | 226 | // Gallery photo 227 | ContentItem { 228 | opacity: wireframe ? 0.0 : 1.0 229 | color: Qt.tint(primaryColor, Qt.rgba(contentColor.r, contentColor.g, contentColor.b, 0.3+0.7*modelData)) 230 | anchors.verticalCenter: parent.verticalCenter 231 | height: 5*unit 232 | width: 5*unit 233 | Polygon { 234 | color: highlightBackgroundColor 235 | opacity: 0.5 236 | width: parent.width 237 | height: parent.height 238 | rotation: model.index * 90 239 | array: [[0,0], [width, 0], [0, height]] 240 | } 241 | } 242 | } 243 | } 244 | 245 | // Event widget 246 | Row { 247 | x: pageMargin 248 | width: parent.width - 2*x 249 | spacing: unit 250 | 251 | // Date item 252 | Rectangle { 253 | id: dateItem 254 | 255 | height: 4*unit 256 | width: 5*unit 257 | color: contentColor 258 | Column { 259 | anchors.centerIn: parent 260 | Text { 261 | text: "JUL" 262 | color: primaryColor 263 | font.pixelSize: fontSizeSmall 264 | anchors.horizontalCenter: parent.horizontalCenter 265 | } 266 | Text { 267 | text: "15" 268 | font.weight: Font.Bold 269 | color: primaryColor 270 | font.pixelSize: fontSizeMedium 271 | anchors.horizontalCenter: parent.horizontalCenter 272 | } 273 | } 274 | } 275 | 276 | // Date details 277 | Column { 278 | width: parent.width - dateItem.width - parent.spacing 279 | spacing: unit 280 | Row { 281 | spacing: unit 282 | width: parent.width 283 | Label { 284 | height: unit 285 | width: parent.width*2/3 286 | } 287 | Label { 288 | height: unit 289 | width: parent.width/3 - parent.spacing 290 | } 291 | } 292 | Paragraph { 293 | lineCount: 2 294 | width: parent.width 295 | } 296 | } 297 | } 298 | } 299 | 300 | // Toolbar 301 | Item { 302 | id: toolbar 303 | 304 | width: parent.width 305 | anchors.bottom: parent.bottom 306 | 307 | Row { 308 | property int count: 3 309 | property real toolButtonWidth: 2*unit 310 | 311 | x: pageMargin 312 | width: parent.width - 2*pageMargin 313 | spacing: Math.round((width - count*toolButtonWidth)/(count-1)) 314 | anchors { 315 | bottom: parent.bottom 316 | bottomMargin: unit 317 | } 318 | 319 | Repeater { 320 | model: parent.count 321 | 322 | // Tool button 323 | Rectangle { 324 | radius: width/2 325 | color: primaryColor 326 | width: parent.toolButtonWidth 327 | height: parent.toolButtonWidth 328 | } 329 | } 330 | } 331 | } 332 | LayoutGrid { 333 | id: layoutGrid 334 | } 335 | } 336 | -------------------------------------------------------------------------------- /layouts/components/ContentItem.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | property alias text: label.text 5 | 6 | width: large 7 | height: large 8 | color: contentColor 9 | Text { 10 | id: label 11 | text: model.index + 1 12 | color: primaryColor 13 | anchors.centerIn: parent 14 | font.pixelSize: fontSize 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /layouts/components/Page.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: pageColor 5 | width: 8*medium 6 | height: 12*medium 7 | } 8 | -------------------------------------------------------------------------------- /layouts/layouts.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | FocusScope { 5 | 6 | property real tiny: Math.round(extraSmall*2/3) 7 | property real extraSmall: Math.round(small*2/3) 8 | property real small: 7 9 | property real medium: 2*small 10 | property real large: 2*medium 11 | property real pageMargin: small + extraSmall 12 | property real fontSize: 18 13 | 14 | property color primaryColor: "#f8f1e0" 15 | property color pageColor: "#99dbcd" 16 | property color backgroundColor: "#f2e6c9" 17 | property color titleColor: "#587280" 18 | property color contentColor: "#7295a6" 19 | 20 | Component.onCompleted: forceActiveFocus() 21 | 22 | focus: true 23 | width: grid.width + large + medium 24 | height: grid.y + grid.height + medium 25 | 26 | Rectangle { 27 | anchors.fill: parent 28 | color: backgroundColor 29 | } 30 | 31 | Keys.onSpacePressed: jump() 32 | Keys.onLeftPressed: jump() 33 | Keys.onRightPressed: jump() 34 | 35 | function jump() { 36 | pathView.currentIndex = 3 37 | focus = false 38 | } 39 | 40 | Grid { 41 | id: grid 42 | columns: 6 43 | 44 | rowSpacing: small 45 | columnSpacing: medium + tiny 46 | anchors.horizontalCenter: parent.horizontalCenter 47 | y: large 48 | 49 | // Top-to-bottom vertical list 50 | Page { 51 | clip: true 52 | ListView { 53 | spacing: small 54 | anchors { 55 | fill: parent 56 | margins: pageMargin 57 | bottomMargin: 0 58 | } 59 | model: 20 60 | delegate: ContentItem { 61 | text: model.index + 1 62 | width: parent.width 63 | height: medium + small 64 | } 65 | } 66 | } 67 | 68 | // Left-to-right horizontal list 69 | Page { 70 | clip: true 71 | ListView { 72 | anchors { 73 | fill: parent 74 | leftMargin: pageMargin 75 | topMargin: pageMargin 76 | bottomMargin: pageMargin 77 | } 78 | orientation: ListView.Horizontal 79 | model: 20 80 | spacing: small 81 | delegate: ContentItem { 82 | anchors.verticalCenter: parent.verticalCenter 83 | text: model.index + 1 84 | height: large*2 85 | width: large - extraSmall 86 | } 87 | } 88 | 89 | } 90 | 91 | // Left-to-right and top-to-bottom grid 92 | Page { 93 | clip: true 94 | Grid { 95 | columns: 3 96 | spacing: small 97 | anchors { 98 | fill: parent 99 | margins: pageMargin 100 | } 101 | 102 | Repeater { 103 | model: 11 104 | ContentItem { 105 | text: model.index + 1 106 | width: (parent.width - parent.spacing*(parent.columns-1))/parent.columns 107 | height: width + extraSmall 108 | } 109 | } 110 | } 111 | } 112 | 113 | // Bottom-to-top vertical list 114 | Page { 115 | clip: true 116 | ListView { 117 | spacing: small 118 | verticalLayoutDirection: ListView.BottomToTop 119 | anchors { 120 | fill: parent 121 | margins: pageMargin 122 | } 123 | 124 | model: [medium + small, large+extraSmall, medium+small, large, large+small+tiny] 125 | delegate: ContentItem { 126 | property bool received: model.index % 2 == 1 127 | width: parent.width - medium 128 | x: received ? medium : 0 129 | text: model.index + 1 130 | height: modelData 131 | radius: small/2 132 | Canvas { 133 | width: medium 134 | height: small + tiny 135 | anchors { 136 | top: parent.bottom 137 | topMargin: -extraSmall 138 | right: received ? parent.right : undefined 139 | } 140 | Component.onCompleted: requestPaint() 141 | onPaint: { 142 | var ctx = getContext('2d') 143 | ctx.save() 144 | ctx.clearRect(0, 0, width, height) 145 | ctx.fillStyle = parent.color 146 | ctx.beginPath() 147 | if (parent.received) { 148 | ctx.lineTo(width, 0) 149 | ctx.lineTo(width, height) 150 | } else { 151 | ctx.lineTo(0,height) 152 | ctx.lineTo(width, 0) 153 | } 154 | ctx.lineTo(0, 0) 155 | ctx.closePath() 156 | ctx.fill() 157 | ctx.restore() 158 | } 159 | } 160 | } 161 | } 162 | } 163 | 164 | // Looping list 165 | Page { 166 | clip: true 167 | PathView { 168 | id: pathView 169 | anchors { 170 | fill: parent 171 | leftMargin: small 172 | rightMargin: small 173 | } 174 | pathItemCount: 9 175 | model: 12 176 | preferredHighlightBegin: 0.5; preferredHighlightEnd: 0.5 177 | highlight: Item {} 178 | highlightMoveDuration: 600 179 | path: Path { 180 | startY: -pathView.height/6; startX: pathView.width/2 181 | PathAttribute { name: "iconScale"; value: 0.6 } 182 | PathQuad { 183 | x: pathView.width/2 184 | y: pathView.height/2 185 | controlY: 0 186 | controlX: pathView.width/2 187 | } 188 | PathAttribute { name: "iconScale"; value: 1.0 } 189 | PathQuad { 190 | y: pathView.height * 7/6 191 | x: pathView.width/2 192 | controlY: pathView.height 193 | controlX: pathView.width/2 194 | } 195 | PathAttribute { name: "iconScale"; value: 0.6 } 196 | } 197 | delegate: ContentItem { 198 | width: PathView.iconScale*parent.width 199 | height: PathView.iconScale*large 200 | text: { 201 | if (model.index == PathView.view.count - 1) { 202 | return "N" 203 | } else if (model.index < PathView.view.count/2) { 204 | return model.index + 1 205 | } else { 206 | return "N - " + (PathView.view.count - model.index - 1) 207 | } 208 | } 209 | } 210 | } 211 | } 212 | 213 | // Particle layout 214 | Page { 215 | Repeater { 216 | model: [[parent.width/2 - extraSmall, parent.height/2], 217 | [parent.width - large - small, large + small], 218 | [large+extraSmall, parent.height - large - small], 219 | [parent.width - large , parent.height - large - extraSmall], 220 | [large, large], 221 | [parent.width/2 + large + small, parent.height/2 - small] 222 | ] 223 | ContentItem { 224 | property real distance: Math.sqrt(Math.pow((parent.width/2-modelData[0])/(parent.width/2), 2), Math.pow((parent.height/2-modelData[1])/(parent.height/2), 2)) 225 | 226 | width: medium + (large + small) * (1-distance) 227 | height: medium + tiny + (large + small) * (1-distance) 228 | text: String.fromCharCode(65 + model.index) 229 | x: modelData[0] - width/2 230 | y: modelData[1] - height/2 231 | } 232 | } 233 | } 234 | 235 | // Titles 236 | Repeater { 237 | model: ["Vertical", "Horizontal", "Grid", "Inverted", "Looping", "No path"] 238 | Text { 239 | width: 8*medium 240 | color: titleColor 241 | text: modelData 242 | font.pixelSize: fontSize 243 | horizontalAlignment: Text.AlignHCenter 244 | verticalAlignment: Text.AlignVCenter 245 | } 246 | } 247 | } 248 | } 249 | -------------------------------------------------------------------------------- /linegraph/linegraph.cpp: -------------------------------------------------------------------------------- 1 | #include "linegraph.h" 2 | #include 3 | #include 4 | 5 | class LineNode : public QSGGeometryNode 6 | { 7 | public: 8 | LineNode(); 9 | 10 | void updateGeometry(const QRectF &bounds, const QList &values, float lineWidth, const QColor &color); 11 | 12 | QSGGeometry m_geometry; 13 | QSGFlatColorMaterial m_material; 14 | }; 15 | 16 | LineNode::LineNode() 17 | : m_geometry(QSGGeometry::defaultAttributes_Point2D(), 0) 18 | { 19 | setGeometry(&m_geometry); 20 | m_geometry.setDrawingMode(GL_LINES); 21 | 22 | m_material.setFlag(QSGMaterial::Blending); 23 | setMaterial(&m_material); 24 | } 25 | 26 | void LineNode::updateGeometry(const QRectF &bounds, const QList &values, float lineWidth, const QColor &color) 27 | { 28 | m_geometry.allocate(2 * values.size()); 29 | 30 | float x = bounds.x(); 31 | float y = bounds.y(); 32 | float width = bounds.width(); 33 | float height = bounds.height() - lineWidth; 34 | 35 | float dx = width / (values.size() - 1); 36 | 37 | QSGGeometry::Point2D *data = m_geometry.vertexDataAsPoint2D(); 38 | 39 | for (int i = 0; i < values.size() - 1; ++i) { 40 | data[2*i].set(x + dx * i, y + height - values.at(i) * height); 41 | data[2*i + 1].set(x + dx * (i + 1), y + height - values.at(i + 1) * height); 42 | } 43 | 44 | m_material.setColor(color); 45 | m_geometry.setLineWidth(lineWidth); 46 | 47 | markDirty(QSGNode::DirtyGeometry); 48 | } 49 | 50 | LineGraph::LineGraph() 51 | : m_arrayChanged(false) 52 | , m_geometryChanged(false) 53 | , m_lineWidth(1.0f) 54 | { 55 | setFlag(ItemHasContents, true); 56 | } 57 | 58 | float LineGraph::lineWidth() const 59 | { 60 | return m_lineWidth; 61 | } 62 | 63 | void LineGraph::setLineWidth(float lineWidth) 64 | { 65 | if (m_lineWidth != lineWidth) { 66 | m_lineWidth = lineWidth; 67 | update(); 68 | emit lineWidthChanged(); 69 | } 70 | } 71 | 72 | QVariantList LineGraph::values() const 73 | { 74 | return m_values; 75 | } 76 | 77 | void LineGraph::setValues(const QVariantList &values) 78 | { 79 | m_values = values; 80 | m_array.clear(); 81 | for (const QVariant &value : values) { 82 | m_array.append(value.toReal()); 83 | } 84 | m_arrayChanged = true; 85 | update(); 86 | } 87 | 88 | QColor LineGraph::color() const 89 | { 90 | return m_color; 91 | } 92 | 93 | void LineGraph::setColor(const QColor &color) 94 | { 95 | if (m_color != color) { 96 | m_color = color; 97 | update(); 98 | emit colorChanged(); 99 | } 100 | } 101 | 102 | void LineGraph::geometryChanged(const QRectF &newGeometry, const QRectF &oldGeometry) 103 | { 104 | m_geometryChanged = true; 105 | update(); 106 | QQuickItem::geometryChanged(newGeometry, oldGeometry); 107 | } 108 | 109 | QSGNode *LineGraph::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) 110 | { 111 | LineNode *n = static_cast(oldNode); 112 | 113 | QRectF rect = boundingRect(); 114 | 115 | if (rect.isEmpty()) { 116 | delete n; 117 | return 0; 118 | } 119 | 120 | if (!n) { 121 | n = new LineNode(); 122 | } 123 | 124 | if (m_geometryChanged || m_arrayChanged || m_lineWidth != n->m_geometry.lineWidth() 125 | || m_color != n->m_material.color()) { 126 | n->updateGeometry(rect, m_array, m_lineWidth, m_color); 127 | } 128 | 129 | m_geometryChanged = false; 130 | m_arrayChanged = false; 131 | 132 | return n; 133 | } 134 | -------------------------------------------------------------------------------- /linegraph/linegraph.h: -------------------------------------------------------------------------------- 1 | #ifndef LINEGRAPH_H 2 | #define LINEGRAPH_H 3 | 4 | #include 5 | 6 | class LineGraph : public QQuickItem 7 | { 8 | Q_OBJECT 9 | Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged) 10 | Q_PROPERTY(float lineWidth READ lineWidth WRITE setLineWidth NOTIFY lineWidthChanged) 11 | Q_PROPERTY(QVariantList values READ values WRITE setValues CONSTANT) 12 | 13 | public: 14 | LineGraph(); 15 | 16 | QColor color() const; 17 | void setColor(const QColor &color); 18 | float lineWidth() const; 19 | void setLineWidth(float lineWidth); 20 | QVariantList values() const; 21 | void setValues(const QVariantList &values); 22 | 23 | protected: 24 | QSGNode *updatePaintNode(QSGNode *, UpdatePaintNodeData *); 25 | void geometryChanged(const QRectF &newGeometry, const QRectF &oldGeometry); 26 | 27 | signals: 28 | void colorChanged(); 29 | void lineWidthChanged(); 30 | 31 | private: 32 | QVariantList m_values; 33 | QList m_array; 34 | 35 | bool m_arrayChanged; 36 | bool m_geometryChanged; 37 | QColor m_color; 38 | float m_lineWidth; 39 | }; 40 | 41 | QML_DECLARE_TYPE(LineGraph) 42 | 43 | #endif // LINEGRAPH_H 44 | -------------------------------------------------------------------------------- /linegraph/linegraph.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = app 2 | TARGET = linegraph 3 | SOURCES += main.cpp linegraph.cpp 4 | HEADERS += linegraph.h 5 | QT += qml quick 6 | OTHER_FILES = *.qml 7 | -------------------------------------------------------------------------------- /linegraph/linegraph.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | import LineGraph 1.0 3 | 4 | Rectangle { 5 | property int unit: 100 6 | width: 12 * unit 7 | height: 4 * unit 8 | 9 | LineGraph { 10 | lineWidth: unit/10 11 | color: "black" 12 | values: [0.0, 1.0, 0.5, 0.75, 0.25, 0.0] 13 | anchors { 14 | fill: parent 15 | margins: unit 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /linegraph/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include "linegraph.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | QGuiApplication app(argc, argv); 8 | 9 | QQuickView view; 10 | 11 | qmlRegisterType("LineGraph", 1, 0, "LineGraph"); 12 | 13 | view.setSource(QUrl::fromLocalFile(QLatin1String("linegraph.qml"))); 14 | view.show(); 15 | 16 | return app.exec(); 17 | } 18 | -------------------------------------------------------------------------------- /lines/components/Line.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | 3 | Rectangle { 4 | property int topMultiplier 5 | property int bottomMultiplier 6 | property color topColor: "#DDDDDD" 7 | property color centerColor: "#DDDDDD" 8 | property color bottomColor: "#555555" 9 | 10 | width: small 11 | anchors { 12 | top: parent.top 13 | bottom: parent.bottom 14 | topMargin: topMultiplier*large 15 | bottomMargin: bottomMultiplier*large 16 | } 17 | 18 | gradient: Gradient { 19 | GradientStop { 20 | position: 0.0 21 | color: topColor 22 | } 23 | GradientStop { 24 | position: large/height 25 | color: topColor 26 | } 27 | GradientStop { 28 | position: large/height+0.01 29 | color: centerColor 30 | } 31 | GradientStop { 32 | position: 1 - large/height-0.01 33 | color: centerColor 34 | } 35 | GradientStop { 36 | position: 1 - large/height 37 | color: bottomColor 38 | } 39 | GradientStop { 40 | position: 1.0 41 | color: bottomColor 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /lines/lines.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | import "components" 3 | 4 | Rectangle { 5 | readonly property int unit: 2 6 | readonly property int small: unit 7 | readonly property int medium: 14*unit 8 | readonly property int large: 2*medium 9 | readonly property int huge: 2*large 10 | 11 | width: row.width + 4*huge 12 | height: row.height + 2*large 13 | gradient: Gradient { 14 | GradientStop { 15 | position: 0.0 16 | color: "#222222" 17 | } 18 | GradientStop { 19 | position: 1.0 20 | color: "#111111" 21 | } 22 | } 23 | 24 | Row { 25 | id: row 26 | height: 10*large 27 | anchors.centerIn: parent 28 | 29 | Line { topMultiplier: 3*Math.random(); bottomMultiplier: 3*Math.random() } 30 | Item { width: medium; height: 1 } 31 | Line { topMultiplier: 3*Math.random(); bottomMultiplier: 3*Math.random() } 32 | 33 | Item { width: large; height: 1 } 34 | 35 | Line { topMultiplier: 3*Math.random(); bottomMultiplier: 3*Math.random() } 36 | Item { width: medium; height: 1 } 37 | Line { topMultiplier: 3*Math.random(); bottomMultiplier: 3*Math.random() } 38 | 39 | Item { width: large; height: 1 } 40 | 41 | Line { topMultiplier: 3*Math.random(); bottomMultiplier: 3*Math.random() } 42 | Item { width: medium; height: 1 } 43 | Line { topMultiplier: 3*Math.random(); bottomMultiplier: 3*Math.random() } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /livepixels/livepixels.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtQuick.Particles 2.0 3 | 4 | Rectangle{ 5 | width: 800; height: 480 6 | ParticleSystem { 7 | width: image.width 8 | height: image.height 9 | anchors.centerIn: parent 10 | Emitter { 11 | size: 15 12 | sizeVariation: 10 13 | velocity: PointDirection { xVariation: 8; yVariation: 8 } 14 | emitRate: 10000 15 | lifeSpan: 2000 16 | anchors.fill: parent 17 | } 18 | CustomParticle { 19 | property real maxWidth: parent.width 20 | property real maxHeight: parent.height 21 | property variant particleTexture: ShaderEffectSource { 22 | sourceItem: Image { source: "particle.png" } 23 | hideSource: true 24 | } 25 | property variant pictureTexture: ShaderEffectSource { 26 | sourceItem: sourceImage 27 | hideSource: true 28 | live: true 29 | } 30 | vertexShader:" 31 | uniform highp float maxWidth; 32 | uniform highp float maxHeight; 33 | varying highp vec2 fTex2; 34 | varying lowp float fFade; 35 | uniform lowp float qt_Opacity; 36 | 37 | void main() { 38 | fTex2 = vec2(qt_ParticlePos.x / maxWidth, qt_ParticlePos.y / maxHeight); 39 | highp float t = (qt_Timestamp - qt_ParticleData.x) / qt_ParticleData.y; 40 | fFade = min(t*4., (1.-t*t)*.75) * qt_Opacity; 41 | defaultMain(); 42 | } 43 | " 44 | fragmentShader: " 45 | uniform sampler2D particleTexture; 46 | uniform sampler2D pictureTexture; 47 | varying highp vec2 qt_TexCoord0; 48 | varying highp vec2 fTex2; 49 | varying lowp float fFade; 50 | void main() { 51 | gl_FragColor = texture2D(pictureTexture, fTex2) * texture2D(particleTexture, qt_TexCoord0).w * fFade; 52 | }" 53 | } 54 | } 55 | Item { 56 | id: sourceImage 57 | width: image.width; height: image.height 58 | anchors.centerIn: parent 59 | Image{ 60 | id: image 61 | source: "skull.png" 62 | scale: 1 + 0.15*Math.random() 63 | Behavior on scale { 64 | NumberAnimation { duration: 3000; easing.type: Easing.InOutQuad } 65 | } 66 | Timer { 67 | interval: 3000 68 | repeat: true; running: true 69 | onTriggered: parent.scale = 1 + 0.15*Math.random() 70 | } 71 | transform: Rotation { 72 | id: rotation 73 | property real value: Math.random() 74 | property bool reverse: Math.random() > 0.5 75 | origin.x: image.width/2; origin.y: image.height/2 76 | axis.x: Math.random() < 0.2 || value < 0.5 77 | axis.y: Math.random() < 0.2 || value >= 0.5 78 | SequentialAnimation on angle { 79 | loops: Animation.Infinite 80 | NumberAnimation { 81 | from: 0.0; to: rotation.reverse ? -8.0 : 8.0 82 | duration: 2500; easing.type: Easing.InOutQuad 83 | } 84 | NumberAnimation { 85 | from: rotation.reverse ? -8.0 : 8.0; to: 0.0 86 | duration: 2500; easing.type: Easing.InOutQuad 87 | } 88 | } 89 | } 90 | } 91 | } 92 | } 93 | 94 | 95 | -------------------------------------------------------------------------------- /livepixels/particle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jpetrell/codesnippets-joona/b9dc6dd49aed262fa64220372b62b148cbb8cab2/livepixels/particle.png -------------------------------------------------------------------------------- /livepixels/skull.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jpetrell/codesnippets-joona/b9dc6dd49aed262fa64220372b62b148cbb8cab2/livepixels/skull.png -------------------------------------------------------------------------------- /navigation/App.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "components" 3 | 4 | Page { 5 | clip: true 6 | 7 | // Platforms 8 | Platform { 9 | width: parent.width/3 10 | y: parent.height/2 - medium 11 | Door { 12 | x: parent.width/2 - width 13 | } 14 | } 15 | Platform { 16 | id: topPlatform 17 | 18 | width: parent.width/2+small 19 | y: parent.height/3 - 2*medium 20 | x: parent.width/4 + extraSmall 21 | Door { 22 | x: parent.width/3 23 | } 24 | } 25 | Platform { 26 | id: rightPlatform 27 | 28 | width: parent.width/2 - medium 29 | y: parent.height*2/3 - 2*medium 30 | anchors.right: parent.right 31 | Door { 32 | x: large 33 | } 34 | } 35 | 36 | Stairs { 37 | anchors { 38 | top: topPlatform.top 39 | left: rightPlatform.left 40 | leftMargin: small 41 | bottom: rightPlatform.top 42 | } 43 | } 44 | 45 | // Land 46 | Land { 47 | x: -medium 48 | width: large+medium 49 | height: parent.height/3 + medium 50 | } 51 | Land { 52 | width: medium+small 53 | height: parent.height/3 + medium 54 | anchors { 55 | right: parent.right 56 | rightMargin: small 57 | } 58 | } 59 | Land { 60 | width: large 61 | height: parent.height/3 + large 62 | anchors.horizontalCenter: parent.right 63 | } 64 | 65 | // Water 66 | Canvas { 67 | property var array 68 | property color color: Qt.tint(backgroundColor, Qt.rgba(1,1,1,0.1)) 69 | height: parent.height/6 70 | width: parent.width 71 | anchors.bottom: parent.bottom 72 | opacity: 0.6 73 | onPaint: { 74 | var radius = width/16 75 | var ctx = getContext('2d') 76 | ctx.save() 77 | ctx.clearRect(0, 0, width, height) 78 | ctx.fillStyle = color 79 | ctx.beginPath() 80 | 81 | for (var i = 0; i < width/radius; i++) { 82 | ctx.arc(radius + 2*i*radius - radius,0,radius,Math.PI,0, true); 83 | } 84 | ctx.lineTo(width, height) 85 | ctx.lineTo(0, height) 86 | ctx.closePath() 87 | ctx.fill() 88 | ctx.restore() 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /navigation/Call.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "components" 3 | 4 | Page { 5 | Rectangle { 6 | id: statusPanel 7 | height: medium 8 | width: parent.width 9 | color: Qt.rgba(0.3,0.8,0.3,1) 10 | Label { 11 | x: small 12 | anchors.verticalCenter: parent.verticalCenter 13 | width: parent.width/2 14 | } 15 | } 16 | Avatar { 17 | id: avatar 18 | 19 | x: large+tiny 20 | height: width 21 | width: parent.width - 2*x 22 | anchors { 23 | top: statusPanel.bottom 24 | topMargin: medium 25 | } 26 | } 27 | 28 | // Call duration 29 | Text { 30 | text: "01:23:45" 31 | color: primaryColor 32 | font.pixelSize: fontSizeMedium 33 | verticalAlignment: Text.AlignVCenter 34 | height: large 35 | anchors { 36 | top: avatar.bottom 37 | bottom: column.top 38 | horizontalCenter: parent.horizontalCenter 39 | } 40 | } 41 | 42 | Column { 43 | id: column 44 | 45 | width: parent.width 46 | anchors.bottom: parent.bottom 47 | 48 | // End call button 49 | Rectangle { 50 | width: parent.width 51 | height: large - extraSmall 52 | color: highlightColor 53 | 54 | // End call icon 55 | Polygon { 56 | height: small+tiny 57 | width: 3*medium 58 | color: primaryColor 59 | anchors { 60 | centerIn: parent 61 | verticalCenterOffset: height/5 62 | } 63 | array: [[0, height], [0, 0], [width, 0], [width,height], [width*4/5, height], 64 | [width*4/5, height*3/5],[width/5, height*3/5], [width/5, height]] 65 | } 66 | } 67 | 68 | // Toolbar 69 | Panel { 70 | Row { 71 | spacing: medium 72 | anchors.centerIn: parent 73 | Repeater { 74 | model: 4 75 | Button {} 76 | } 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /navigation/CallLog.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | Column { 7 | y: small 8 | width: parent.width 9 | Repeater { 10 | model: 7 11 | 12 | Item { 13 | property bool highlighted: model.index === 1 14 | width: parent.width 15 | height: large - tiny 16 | Row { 17 | id: row 18 | x: small 19 | spacing: small 20 | width: parent.width - 2*x 21 | anchors.verticalCenter: parent.verticalCenter 22 | 23 | ContentItem { 24 | id: contentItem 25 | height: extraSmall 26 | width: extraSmall 27 | opacity: model.index === 0 || model.index === 3 ? 0.0 : 1.0 28 | color: highlighted ? highlightColor : implicitColor 29 | } 30 | Column { 31 | id: column 32 | spacing: extraSmall 33 | width: parent.width - 2*parent.spacing - contentItem.width - button.width 34 | anchors.verticalCenter: parent.verticalCenter 35 | Label { 36 | color: highlighted ? highlightColor : primaryColor 37 | } 38 | Row { 39 | width: parent.width 40 | spacing: small 41 | Label { 42 | color: highlighted ? highlightColor : primaryColor 43 | width: parent.width*2/3 44 | height: extraSmall 45 | opacity: 0.7 46 | } 47 | } 48 | 49 | } 50 | Rectangle { 51 | id: button 52 | color: highlighted ? highlightColor : primaryColor 53 | width: buttonWidth 54 | height: buttonWidth 55 | radius: width/3 56 | } 57 | } 58 | } 59 | } 60 | } 61 | Panel { 62 | anchors.bottom: parent.bottom 63 | height: buttonRow.height + small 64 | 65 | Row { 66 | id: buttonRow 67 | spacing: large 68 | anchors.centerIn: parent 69 | 70 | LogButton { 71 | anchors.verticalCenter: parent.verticalCenter 72 | } 73 | DialerButton { 74 | id: dialerIcon 75 | anchors.verticalCenter: parent.verticalCenter 76 | 77 | } 78 | FavouriteButton { 79 | anchors.verticalCenter: parent.verticalCenter 80 | width: height 81 | height: dialerIcon.height + lineWidth 82 | } 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /navigation/ContactCard.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | Column { 6 | width: parent.width 7 | spacing: small + tiny 8 | 9 | Panel { 10 | Button { 11 | x: small 12 | anchors.verticalCenter: parent.verticalCenter 13 | } 14 | OptionsButton { 15 | anchors { 16 | right: parent.right 17 | rightMargin: small 18 | verticalCenter: parent.verticalCenter 19 | } 20 | } 21 | } 22 | 23 | Row { 24 | x: small 25 | width: parent.width - 2*x 26 | spacing: small 27 | 28 | Avatar { 29 | id: avatar 30 | color: highlightColor 31 | width: 1/3 * parent.width 32 | height: column.height 33 | } 34 | Column { 35 | id: column 36 | spacing: small 37 | width: 2/3 * parent.width - parent.spacing 38 | Repeater { 39 | model: 4 40 | Label {} 41 | } 42 | } 43 | } 44 | 45 | Column { 46 | width: parent.width 47 | spacing: small 48 | Repeater { 49 | model: 2 50 | Row { 51 | spacing: small 52 | x: small 53 | width: parent.width - 2*x 54 | Repeater { 55 | model: 2 56 | ContactDetail { 57 | width: (parent.width-parent.spacing)/2 58 | } 59 | } 60 | } 61 | } 62 | } 63 | 64 | ContactDetail { 65 | x: small 66 | lineCount: 3 67 | width: parent.width - 2*x 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /navigation/ContentGrid.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | clip: true 7 | Grid { 8 | width: parent.width 9 | columns: 4 10 | Repeater { 11 | model: 24 12 | ContentItem { 13 | value: 0.2+0.5*Math.random() 14 | width: parent.width/parent.columns 15 | height: width 16 | color: model.index === 5 ? highlightColor : implicitColor 17 | } 18 | } 19 | } 20 | 21 | Panel { 22 | anchors.bottom: parent.bottom 23 | Row { 24 | spacing: large 25 | anchors.centerIn: parent 26 | Repeater { 27 | model: 3 28 | Button {} 29 | } 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /navigation/PeopleSearch.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "components" 3 | 4 | Page { 5 | 6 | Column { 7 | y: small 8 | width: parent.width 9 | spacing: small+tiny 10 | 11 | Row { 12 | x: small 13 | spacing: small + extraSmall 14 | width: parent.width - 2*x 15 | 16 | TextField { 17 | width: parent.width - button.width - parent.spacing 18 | } 19 | SearchButton { 20 | id: button 21 | anchors.verticalCenter: parent.verticalCenter 22 | } 23 | } 24 | Column { 25 | x: small 26 | spacing: small 27 | width: parent.width - 2*x 28 | Repeater { 29 | model: 4 30 | Row { 31 | property bool highlighted: model.index === 1 32 | id: row 33 | spacing: small 34 | width: parent.width 35 | ContentItem { 36 | id: contentItem 37 | anchors.verticalCenter: parent.verticalCenter 38 | height: column.height 39 | width: column.height 40 | color: highlighted ? highlightColor : implicitColor 41 | } 42 | Column { 43 | id: column 44 | spacing: extraSmall 45 | width: parent.width - parent.spacing - contentItem.width 46 | anchors.verticalCenter: parent.verticalCenter 47 | Label { 48 | color: highlighted ? highlightColor : primaryColor 49 | } 50 | Label { 51 | opacity: 0.7 52 | color: highlighted ? highlightColor : primaryColor 53 | } 54 | } 55 | } 56 | } 57 | } 58 | } 59 | 60 | Keyboard {} 61 | } 62 | -------------------------------------------------------------------------------- /navigation/Photo.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "components" 3 | 4 | Page { 5 | clip: true 6 | 7 | // Clouds 8 | Rectangle { 9 | x: parent.width/2 10 | anchors.verticalCenter: parent.top 11 | width: 2*large 12 | height: 2*large 13 | radius: width/2 14 | color: primaryColor 15 | } 16 | Rectangle { 17 | anchors { 18 | horizontalCenter: parent.right 19 | verticalCenter: parent.top 20 | } 21 | width: 3*large 22 | height: 3*large 23 | radius: width/2 24 | color: primaryColor 25 | } 26 | 27 | // Sun 28 | Rectangle { 29 | x: medium 30 | y: medium 31 | width: large 32 | height: large 33 | radius: width/2 34 | color: Qt.rgba(0.95,0.95,0.4,1) 35 | } 36 | 37 | // Birds 38 | Repeater { 39 | model: [[2*large, large], [parent.width/2, large + medium], [medium, parent.height/3]] 40 | 41 | Canvas { 42 | property real radius: small/2 43 | property real lineWidth: radius/2 44 | x: modelData[0] 45 | y: modelData[1] 46 | width: 4*radius 47 | height: radius+lineWidth 48 | onPaint: { 49 | var ctx = getContext('2d') 50 | ctx.save() 51 | ctx.clearRect(0, 0, width, height) 52 | ctx.strokeStyle = primaryColor 53 | ctx.lineWidth = lineWidth 54 | ctx.beginPath() 55 | ctx.moveTo(width/2, height) 56 | ctx.arc(radius,height,radius,0, Math.PI*6/5, true); 57 | ctx.moveTo(width/2, height) 58 | ctx.arc(3*radius,height,radius,Math.PI, Math.PI*9/5); 59 | ctx.stroke() 60 | ctx.restore() 61 | } 62 | } 63 | } 64 | 65 | // Mountains 66 | Polygon { 67 | id: firstMountain 68 | 69 | x: parent.width/4 70 | color: contentColor 71 | width: parent.width/3 72 | height: parent.width/5 - small 73 | array: [[0, height], [width/2, 0], [width, height]] 74 | anchors.bottom: land.top 75 | } 76 | Polygon { 77 | color: contentColor 78 | width: parent.width/2 79 | height: parent.width/4 80 | array: [[0, height], [width/2, 0], [width, height]] 81 | x: parent.width/4 82 | anchors { 83 | left: firstMountain.right 84 | bottom: land.top 85 | } 86 | } 87 | 88 | // Land 89 | Rectangle { 90 | id: land 91 | 92 | color: Qt.tint(contentColor, Qt.rgba(1,1,1,0.3)) 93 | width: parent.width 94 | height: parent.height*2/5 95 | anchors.bottom: parent.bottom 96 | 97 | // Road 98 | Line { 99 | color: contentColor 100 | anchors.fill: parent 101 | array: [[0, height*9/10], [width/2, height*7/10], [width/2-medium, height*5/10], [width, height*2/10]] 102 | } 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /navigation/Switcher.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | id: page 6 | clip: true 7 | 8 | Panel { 9 | height: row.height 10 | 11 | Row { 12 | id: row 13 | x: extraSmall 14 | width: parent.width - 2*x 15 | spacing: extraSmall 16 | height: extraSmall+2*tiny 17 | Repeater { 18 | model: 2 19 | Rectangle { 20 | y: tiny 21 | height: extraSmall 22 | width: height 23 | color: primaryColor 24 | } 25 | } 26 | Item { 27 | height: parent.height 28 | width: parent.width - 10*extraSmall 29 | } 30 | 31 | Repeater { 32 | model: 3 33 | Rectangle { 34 | y: tiny 35 | height: extraSmall 36 | width: height 37 | color: primaryColor 38 | } 39 | } 40 | } 41 | 42 | 43 | } 44 | 45 | Row { 46 | property int count: 3 47 | anchors.horizontalCenter: parent.horizontalCenter 48 | y: medium+small+tiny 49 | 50 | Repeater { 51 | model: parent.count 52 | 53 | Item { 54 | property bool currentItem: model.index === 1 55 | width: page.width*2/3 56 | height: page.height*2/3 57 | scale: currentItem ? 1 : 0.8 58 | 59 | ContentItem { 60 | width: parent.width 61 | height: parent.height 62 | color: currentItem ? highlightColor : implicitColor 63 | 64 | Panel { 65 | height: medium 66 | } 67 | } 68 | } 69 | } 70 | } 71 | 72 | // Row layout 73 | Row { 74 | property int count: 5 75 | width: parent.width - 2*small 76 | spacing: (width - count * medium)/(count-1) 77 | anchors { 78 | bottom: parent.bottom 79 | bottomMargin: small 80 | horizontalCenter: parent.horizontalCenter 81 | } 82 | Repeater { 83 | model: parent.count 84 | 85 | Rectangle { 86 | color: primaryColor 87 | width: medium 88 | height: medium 89 | radius: width/4 90 | } 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /navigation/components/Arrow.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Item { 4 | id: arrow 5 | 6 | property color color: primaryColor 7 | 8 | width: large 9 | height: large 10 | 11 | Rectangle { 12 | width: line.lineWidth 13 | anchors.horizontalCenter: parent.horizontalCenter 14 | height: parent.height 15 | color: arrow.color 16 | 17 | // Arrow head 18 | Line { 19 | id: line 20 | 21 | anchors { 22 | bottom: parent.bottom 23 | bottomMargin: -lineWidth 24 | horizontalCenter: parent.horizontalCenter 25 | } 26 | 27 | width: large 28 | height: medium+extraSmall 29 | array: [[lineWidth, lineWidth], [width/2, height-lineWidth], [width-lineWidth, lineWidth]] 30 | color: arrow.color 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /navigation/components/Avatar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | clip: true 5 | color: highlightColor 6 | 7 | Rectangle { 8 | id: head 9 | y: height/3 10 | anchors.horizontalCenter: parent.horizontalCenter 11 | color: contentColor 12 | radius: width/4 13 | height: parent.width/2 14 | width: parent.width*3/10 15 | } 16 | 17 | Rectangle { 18 | anchors { 19 | horizontalCenter: parent.horizontalCenter 20 | top: head.bottom 21 | topMargin: -head.radius - tiny 22 | bottom: parent.bottom 23 | bottomMargin: -radius 24 | } 25 | width: parent.width * 2/3 26 | radius: head.radius 27 | color: contentColor 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /navigation/components/Button.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: primaryColor 5 | width: buttonWidth 6 | height: buttonWidth 7 | radius: width/2 8 | } 9 | -------------------------------------------------------------------------------- /navigation/components/ContactDetail.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Rectangle { 4 | property int lineCount: 1 5 | 6 | radius: tiny 7 | height: column.height + 2*extraSmall 8 | color: Qt.rgba(primaryColor.r, primaryColor.g, primaryColor.b, 0.5) 9 | Column { 10 | id: column 11 | spacing: extraSmall 12 | width: parent.width 13 | anchors.verticalCenter: parent.verticalCenter 14 | Repeater { 15 | model: lineCount 16 | Label { 17 | anchors.horizontalCenter: parent.horizontalCenter 18 | width: parent.width - 2*small 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /navigation/components/ContentItem.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | property real value: 0.2+0.5*Math.random() 5 | property color implicitColor: Qt.tint("white", Qt.rgba(contentColor.r, contentColor.g, contentColor.b, 1-value)) 6 | 7 | width: huge 8 | height: huge 9 | color: implicitColor 10 | } 11 | -------------------------------------------------------------------------------- /navigation/components/DialerButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Grid { 4 | columns: 3 5 | columnSpacing: tiny 6 | rowSpacing: lineWidth/2 7 | 8 | Repeater { 9 | model: 12 10 | 11 | Rectangle { 12 | color: primaryColor 13 | width: small/2 14 | height: small/2 15 | opacity: model.index === 9 || model.index === 11 ? 0.0 : 1.0 16 | radius: height/3 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /navigation/components/Door.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Rectangle { 4 | z: -1 5 | radius: tiny 6 | color: primaryColor 7 | width: small 8 | height: medium+small 9 | anchors { 10 | bottom: parent.top 11 | bottomMargin: -radius 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /navigation/components/FavouriteButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Canvas { 4 | id: icon 5 | 6 | property color color: primaryColor 7 | property int numberOfPoints: 5 8 | onColorChanged: requestPaint() 9 | onPaint: { 10 | var numberOfPoints = 5 11 | var radius = width/2 12 | var ctx = getContext('2d') 13 | ctx.save(); 14 | ctx.beginPath(); 15 | ctx.fillStyle = color 16 | ctx.clearRect(0, 0, width, height) 17 | ctx.translate(width/2, height/2); 18 | ctx.moveTo(0,0-radius); 19 | for (var i = 0; i < numberOfPoints; i++) 20 | { 21 | ctx.rotate(Math.PI / numberOfPoints); 22 | ctx.lineTo(0, 0 - (radius*0.45)); 23 | ctx.rotate(Math.PI / numberOfPoints); 24 | ctx.lineTo(0, 0 - radius); 25 | } 26 | ctx.fill(); 27 | ctx.restore(); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /navigation/components/Keyboard.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Rectangle { 4 | color: panelColor 5 | width: parent.width 6 | height: column.height + 2*small 7 | anchors.bottom: parent.bottom 8 | 9 | Column { 10 | id: column 11 | spacing: small 12 | anchors.centerIn: parent 13 | x: small 14 | width: parent.width - 2*x 15 | Repeater { 16 | model: 5 17 | 18 | Row { 19 | property int count: 10 20 | spacing: (width - count*small) / (count-1) 21 | width: parent.width 22 | Repeater { 23 | model: parent.count 24 | Rectangle { 25 | radius: 2 26 | width: small 27 | height: small 28 | color: primaryColor 29 | } 30 | } 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /navigation/components/Label.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: primaryColor 5 | width: parent.width 6 | height: extraSmall 7 | radius: height/2 8 | } 9 | -------------------------------------------------------------------------------- /navigation/components/Land.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | ContentItem { 4 | radius: large 5 | anchors { 6 | bottom: parent.bottom 7 | bottomMargin: -radius 8 | } 9 | } -------------------------------------------------------------------------------- /navigation/components/Line.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Canvas { 4 | property var array 5 | property color color: "white" 6 | property real lineWidth: navigation.lineWidth 7 | 8 | onPaint: { 9 | var ctx = getContext('2d') 10 | ctx.save() 11 | ctx.clearRect(0, 0, width, height) 12 | ctx.strokeStyle = color 13 | ctx.lineWidth = lineWidth 14 | ctx.beginPath() 15 | ctx.moveTo(array[0][0], array[0][1]) 16 | for (var i = 1; i < array.length; i++) { 17 | ctx.lineTo(array[i][0], array[i][1]) 18 | } 19 | ctx.stroke() 20 | ctx.restore() 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /navigation/components/LogButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Column { 4 | id: button 5 | property color color: highlightColor 6 | spacing: lineWidth+tiny 7 | width: medium 8 | 9 | Repeater { 10 | model: 2 11 | 12 | // Arrow body 13 | Rectangle { 14 | property bool invert: model.index === 0 15 | height: tiny 16 | width: parent.width 17 | color: button.color 18 | 19 | // Arrow head 20 | Line { 21 | anchors { 22 | left: invert ? parent.left : undefined 23 | right: invert ? undefined : parent.right 24 | verticalCenter: parent.verticalCenter 25 | margins: -tiny 26 | } 27 | lineWidth: tiny 28 | height: buttonWidth+extraSmall 29 | width: small+tiny 30 | color: button.color 31 | array: invert ? [[width-tiny, tiny], [tiny, height/2], [width-tiny, height-tiny]] 32 | : [[tiny, tiny], [width-tiny, height/2], [tiny, height-tiny]] 33 | 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /navigation/components/OptionsButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Column { 4 | spacing: tiny 5 | width: medium 6 | property color color: primaryColor 7 | Repeater { 8 | model: 3 9 | 10 | Rectangle { 11 | height: tiny 12 | color: parent.color 13 | width: parent.width 14 | radius: height/2 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /navigation/components/Page.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: pageColor 5 | width: pageWidth 6 | height: pageHeight 7 | } 8 | -------------------------------------------------------------------------------- /navigation/components/Panel.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | height: large 5 | width: parent.width 6 | color: panelColor 7 | } 8 | -------------------------------------------------------------------------------- /navigation/components/Platform.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Rectangle { 4 | height: medium 5 | color: highlightColor 6 | } -------------------------------------------------------------------------------- /navigation/components/Polygon.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Canvas { 4 | property var array 5 | property color color: primaryColor 6 | 7 | onPaint: { 8 | var ctx = getContext('2d') 9 | ctx.save() 10 | ctx.clearRect(0, 0, width, height) 11 | ctx.fillStyle = color 12 | ctx.beginPath() 13 | ctx.moveTo(array[0][0], array[0][1]) 14 | for (var i = 1; i < array.length; i++) { 15 | ctx.lineTo(array[i][0], array[i][1]) 16 | } 17 | ctx.closePath() 18 | ctx.fill() 19 | ctx.restore() 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /navigation/components/SearchButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Item { 4 | width: buttonWidth 5 | height: buttonWidth 6 | 7 | Canvas { 8 | width: parent.width 9 | height: parent.height 10 | anchors { 11 | centerIn: parent 12 | verticalCenterOffset: lineWidth 13 | } 14 | 15 | Rectangle { 16 | width: small+extraSmall 17 | height: small+extraSmall 18 | anchors { 19 | verticalCenter: parent.top 20 | horizontalCenter: parent.left 21 | } 22 | radius: width/2 23 | color: "transparent" 24 | border { width: tiny; color: primaryColor } 25 | } 26 | 27 | onPaint: { 28 | var ctx = getContext('2d') 29 | ctx.save() 30 | ctx.clearRect(0, 0, width, height) 31 | ctx.strokeStyle = primaryColor 32 | ctx.lineWidth = lineWidth 33 | ctx.beginPath() 34 | ctx.moveTo(lineWidth, lineWidth) 35 | ctx.lineTo(width - 1, height - 1) 36 | ctx.stroke() 37 | ctx.restore() 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /navigation/components/Stairs.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Row { 4 | Rectangle { 5 | height: parent.height 6 | width: tiny 7 | } 8 | Column { 9 | spacing: extraSmall 10 | Repeater { 11 | model: (parent.parent.height + parent.spacing)/(tiny+parent.spacing) 12 | Rectangle { 13 | width: small 14 | height: tiny 15 | } 16 | } 17 | } 18 | Rectangle { 19 | height: parent.height 20 | width: tiny 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /navigation/components/TextField.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: primaryColor 5 | width: parent.width 6 | height: medium 7 | radius: height/4 8 | } 9 | -------------------------------------------------------------------------------- /navigation/components/Title.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Text { 4 | color: panelColor 5 | width: pageWidth 6 | font.pixelSize: fontSizeLarge 7 | horizontalAlignment: Text.AlignHCenter 8 | } 9 | -------------------------------------------------------------------------------- /navigation/navigation.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Rectangle { 5 | id: navigation 6 | 7 | property real tiny: 3 8 | property real extraSmall: 6 9 | property real small: 8 10 | property real medium: 16 11 | property real large: 32 12 | property real huge: 48 13 | 14 | property real lineWidth: 3 15 | property real buttonWidth: 12 16 | property real pageWidth: 10*medium 17 | property real pageHeight: 13*medium 18 | 19 | property color primaryColor: "#F4EEE5" 20 | property color pageColor: "#A8C7D9" 21 | property color backgroundColor: "#E3EDF3" 22 | property color panelColor: "#203864" 23 | property color highlightColor: "#f34955" 24 | property color contentColor: "#e3d43e" 25 | 26 | property int fontSizeMedium: 16 27 | property int fontSizeLarge: 20 28 | 29 | width: 800 30 | height: grid.height + 2*large 31 | color: backgroundColor 32 | 33 | Grid { 34 | id: grid 35 | 36 | columns: 4 37 | columnSpacing: large 38 | rowSpacing: small 39 | anchors.centerIn: parent 40 | 41 | CallLog {} 42 | ContentGrid {} 43 | PeopleSearch {} 44 | Switcher {} 45 | Repeater { 46 | model: ["Call history", "Photo grid", "Contact search", "App switcher"] 47 | Title { 48 | text: modelData 49 | } 50 | } 51 | 52 | Repeater { 53 | model: 4 54 | Item { width: 1; height: 1 } 55 | } 56 | 57 | Repeater { 58 | model: 4 59 | Page { 60 | height: 2*medium 61 | color: "transparent" 62 | Arrow { 63 | color: pageColor 64 | anchors.centerIn: parent 65 | } 66 | } 67 | } 68 | 69 | Repeater { 70 | model: 4 71 | Item { width: 1; height: small } 72 | } 73 | 74 | Call {} 75 | Photo {} 76 | ContactCard {} 77 | App {} 78 | Repeater { 79 | model: ["Call", "Photo", "Contact", "App"] 80 | Title { 81 | color: chromeColor 82 | text: modelData 83 | } 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /overlappingletters/alphabets.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Rectangle { 4 | width: grid.width+100; height: grid.height+100 5 | property real letterHeight 6 | property real letterWidth 7 | property string alphabets: "abcdefghijklmnopqrstuvwxyzåäö" 8 | property variant fontFamilies: [ "Castellar", "Century Gothic", 9 | "Courier New", "Bodoni MT Condensed", 10 | "AngsanaUPC", "Bodoni MT Black", 11 | "Copperplate Gothic Bold", "Pistilli", 12 | "Rockwell Extra Bold"] 13 | function randomFont() { 14 | return fontFamilies[Math.floor(Math.random()*fontFamilies.length)] 15 | } 16 | function resizeLetters() { 17 | var rows = alphabets.length/grid.columns 18 | letterHeight = Math.round(grid.height/rows) 19 | letterWidth = Math.round(grid.width/grid.columns) 20 | for (var index = 0; index < grid.children.length; index++) { 21 | var child = grid.children[index] 22 | if (child.width != undefined) { 23 | child.height = letterHeight 24 | child.width = letterWidth 25 | } 26 | } 27 | } 28 | Timer { 29 | interval: 50 30 | running: true 31 | onTriggered: resizeLetters() 32 | } 33 | Grid { 34 | columns: 6 35 | anchors { centerIn: parent; verticalCenterOffset: -15 } 36 | Repeater { 37 | model: alphabets.length 38 | Rectangle { 39 | height: letterHeight 40 | width: letterWidth 41 | color: Qt.rgba(0.4+0.6*Math.random(), 42 | 0.4+0.6*Math.random(), 43 | 0.4+0.6*Math.random()) 44 | } 45 | } 46 | } 47 | Grid { 48 | id: grid 49 | columns: 6 50 | anchors { centerIn: parent; verticalCenterOffset: -15 } 51 | Repeater { 52 | model: alphabets.length 53 | Text { 54 | text: alphabets[index] 55 | font { 56 | pixelSize: 120 57 | family: randomFont() 58 | capitalization: Font.AllUppercase 59 | } 60 | Repeater { 61 | model: 3+Math.random()*2 62 | Text { 63 | text: parent.text 64 | anchors.centerIn: parent 65 | font { 66 | pixelSize: 120 67 | family: randomFont() 68 | capitalization: Font.AllUppercase 69 | } 70 | } 71 | } 72 | } 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /overlappingletters/helloworld.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Rectangle { 4 | width: 800; height: 200 5 | property string label: "Hello world!" 6 | property variant fontFamilies: [ "Georgia", "Verdana", "Tahoma", 7 | "Lucida Console", "Century Gothic", 8 | "Courier New", "Times New Roman"] 9 | function randomFont() { 10 | return fontFamilies[Math.floor(Math.random()*fontFamilies.length)] 11 | } 12 | Row { 13 | id: row 14 | spacing: -10-10*Math.random() 15 | anchors.centerIn: parent 16 | Repeater { 17 | model: label.length 18 | Text { 19 | text: label[index] 20 | opacity: 0.5+0.5*Math.random() 21 | anchors.verticalCenter: parent.verticalCenter 22 | property real distance: 2*Math.abs(index-label.length/2) / 23 | label.length 24 | font { 25 | family: randomFont() 26 | capitalization: Font.AllUppercase 27 | pixelSize: 130+30*Math.random()-50*distance 28 | } 29 | Repeater { 30 | model: 5+5*Math.random() 31 | Text { 32 | text: parent.text 33 | opacity: 0.6+0.4*Math.random() 34 | anchors.centerIn: parent 35 | font { 36 | family: randomFont() 37 | capitalization: Font.AllUppercase 38 | pixelSize: 130+30*Math.random()-50*distance 39 | } 40 | } 41 | } 42 | } 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /scalability/components/ActionPanel.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Panel { 4 | color: contentColor 5 | height: medium + small 6 | Row { 7 | spacing: small 8 | x: pageMargin 9 | anchors.verticalCenter: parent.verticalCenter 10 | Repeater { 11 | model: 4 12 | Rectangle { 13 | color: pageColor 14 | width: small 15 | height: small 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /scalability/components/Button.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: primaryColor 5 | width: buttonWidth 6 | height: buttonWidth 7 | radius: width/2 8 | } 9 | -------------------------------------------------------------------------------- /scalability/components/ContentItem.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | width: large 5 | height: large 6 | color: contentColor 7 | } 8 | -------------------------------------------------------------------------------- /scalability/components/EmailViewer.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: primaryColor 5 | Column { 6 | x: pageMargin 7 | y: pageMargin 8 | width: parent.width - 2*x 9 | spacing: small + extraSmall 10 | Column { 11 | spacing: small 12 | width: parent.width 13 | Label { 14 | width: 3*large 15 | } 16 | Row { 17 | spacing: extraSmall 18 | Label { 19 | width: large + medium 20 | } 21 | Label { 22 | width: large 23 | } 24 | Label { 25 | width: large 26 | } 27 | } 28 | } 29 | 30 | Label { 31 | color: backgroundColor 32 | } 33 | Column { 34 | spacing: small 35 | width: parent.width 36 | Row { 37 | width: parent.width 38 | spacing: small 39 | ContentItem { 40 | id: picture 41 | color: pageColor 42 | width: large + medium 43 | height: paragraph.height 44 | } 45 | Paragraph { 46 | id: paragraph 47 | width: parent.width - parent.spacing - picture.width 48 | lineCount: 4 49 | } 50 | } 51 | Paragraph { 52 | width: parent.width 53 | lineCount: 24*large/parent.width 54 | } 55 | } 56 | Label { 57 | width: parent.width/2 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /scalability/components/Inbox.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Item { 4 | property real itemHeight: medium + small 5 | ListView { 6 | model: 20 7 | spacing: small 8 | anchors { 9 | fill: parent 10 | margins: pageMargin 11 | bottomMargin: 0 12 | } 13 | delegate: ContentItem { 14 | width: parent.width 15 | height: itemHeight 16 | } 17 | } 18 | } 19 | 20 | -------------------------------------------------------------------------------- /scalability/components/Label.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: pageColor 5 | width: parent.width 6 | height: extraSmall 7 | radius: height/2 8 | } 9 | -------------------------------------------------------------------------------- /scalability/components/MenuBar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Panel { 4 | id: panel 5 | 6 | height: medium + small 7 | Row { 8 | x: pageMargin 9 | spacing: small 10 | anchors.verticalCenter: parent.verticalCenter 11 | Repeater { 12 | model: [panel.width/10, panel.width/8, panel.width/9, panel.width/11] 13 | Label { 14 | width: modelData 15 | color: primaryColor 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /scalability/components/Page.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Column { 4 | property alias title: label.text 5 | default property alias children: content.children 6 | property alias contentHeight: content.height 7 | 8 | spacing: small 9 | width: 8*medium 10 | 11 | Rectangle { 12 | id: content 13 | color: pageColor 14 | width: parent.width 15 | height: 12*medium 16 | clip: true 17 | } 18 | Text { 19 | id: label 20 | width: parent.width 21 | color: titleColor 22 | text: modelData 23 | font.pixelSize: fontSize 24 | horizontalAlignment: Text.AlignHCenter 25 | verticalAlignment: Text.AlignVCenter 26 | } 27 | } 28 | 29 | -------------------------------------------------------------------------------- /scalability/components/Panel.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | height: large 5 | width: parent.width 6 | color: panelColor 7 | } 8 | -------------------------------------------------------------------------------- /scalability/components/Paragraph.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Column { 4 | property int lineCount 5 | property real lineHeight: extraSmall 6 | spacing: small 7 | 8 | Repeater { 9 | model: lineCount 10 | Label { 11 | width: parent.width 12 | height: lineHeight 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /scalability/components/Toolbar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Panel { 4 | id: toolbar 5 | property int count: 3 6 | anchors.bottom: parent.bottom 7 | Row { 8 | spacing: large 9 | anchors.centerIn: parent 10 | Repeater { 11 | model: toolbar.count 12 | Button {} 13 | } 14 | } 15 | } 16 | 17 | -------------------------------------------------------------------------------- /scalability/scalability.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Rectangle { 5 | 6 | property real tiny: Math.round(extraSmall*2/3) 7 | property real extraSmall: Math.round(small*2/3) 8 | property real small: 7 9 | property real medium: 2*small 10 | property real large: 2*medium 11 | property real pageMargin: small + extraSmall 12 | property real fontSize: 18 13 | property real buttonWidth: 9 14 | 15 | property color primaryColor: "#f8f1e0" 16 | property color pageColor: "#99dbcd" 17 | property color backgroundColor: "#ebdfc3" 18 | property color titleColor: "#587280" 19 | property color contentColor: "#7295a6" 20 | property color panelColor: "#a791c9" 21 | 22 | width: row.width + 2*large 23 | height: row.y + row.height + medium 24 | color: backgroundColor 25 | 26 | Row { 27 | id: row 28 | 29 | y: large 30 | spacing: medium + tiny 31 | anchors.horizontalCenter: parent.horizontalCenter 32 | 33 | Page { 34 | title: "Phone" 35 | anchors.bottom: parent.bottom 36 | Inbox { anchors.fill: parent } 37 | Toolbar {} 38 | } 39 | 40 | Page { 41 | title: "Tablet" 42 | width: 18*medium 43 | contentHeight: 13*medium 44 | anchors.bottom: parent.bottom 45 | Row { 46 | anchors.fill: parent 47 | Inbox { 48 | width: parent.width/3 49 | height: parent.height 50 | itemHeight: medium + extraSmall 51 | } 52 | EmailViewer { 53 | height: parent.height 54 | width: parent.width *2/3 55 | Toolbar { count: 4 } 56 | } 57 | } 58 | } 59 | 60 | Page { 61 | title: "Desktop" 62 | width: 24*medium 63 | contentHeight: 14*medium 64 | Column { 65 | anchors.fill: parent 66 | MenuBar { id: menuBar } 67 | Row { 68 | width: parent.width 69 | height: parent.height - menuBar.height 70 | Inbox { 71 | itemHeight: medium 72 | height: parent.height 73 | width: parent.width/4 74 | } 75 | Column { 76 | width: parent.width * 3/4 77 | height: parent.height 78 | ActionPanel { 79 | id: actionPanel 80 | } 81 | EmailViewer { 82 | height: parent.height - actionPanel.height 83 | width: parent.width 84 | } 85 | } 86 | } 87 | } 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /screenshots/component_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jpetrell/codesnippets-joona/b9dc6dd49aed262fa64220372b62b148cbb8cab2/screenshots/component_tree.png -------------------------------------------------------------------------------- /screenshots/layoutgrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jpetrell/codesnippets-joona/b9dc6dd49aed262fa64220372b62b148cbb8cab2/screenshots/layoutgrid.png -------------------------------------------------------------------------------- /screenshots/layouts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jpetrell/codesnippets-joona/b9dc6dd49aed262fa64220372b62b148cbb8cab2/screenshots/layouts.png -------------------------------------------------------------------------------- /screenshots/navigation_and_content_views.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jpetrell/codesnippets-joona/b9dc6dd49aed262fa64220372b62b148cbb8cab2/screenshots/navigation_and_content_views.png -------------------------------------------------------------------------------- /screenshots/scalability.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jpetrell/codesnippets-joona/b9dc6dd49aed262fa64220372b62b148cbb8cab2/screenshots/scalability.png -------------------------------------------------------------------------------- /screenshots/view_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jpetrell/codesnippets-joona/b9dc6dd49aed262fa64220372b62b148cbb8cab2/screenshots/view_tree.png -------------------------------------------------------------------------------- /screenshots/views.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jpetrell/codesnippets-joona/b9dc6dd49aed262fa64220372b62b148cbb8cab2/screenshots/views.png -------------------------------------------------------------------------------- /scripts/components/Paragraph.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Column { 4 | property alias title: titleLabel.text 5 | property alias description: descriptionLabel.text 6 | property string fontFamily 7 | property bool enlarge 8 | 9 | width: parent.width/grid.columns 10 | spacing: unit 11 | 12 | Text { 13 | id: titleLabel 14 | font.family: "Source Sans Pro" 15 | font.weight: Font.Light 16 | font.pixelSize: fontSizeLarge 17 | horizontalAlignment: Text.AlignHCenter 18 | width: parent.width 19 | color: primaryColor 20 | } 21 | 22 | Text { 23 | id: descriptionLabel 24 | font.pixelSize: (enlarge ? 1.2 : 1.0) * fontSizeMedium 25 | font.weight: Font.Light 26 | wrapMode: Text.Wrap 27 | width: parent.width 28 | color: primaryColor 29 | visible: text.length > 0 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /scripts/scripts.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "components" 3 | 4 | Item { 5 | width: 800 6 | height: grid.height + 4*unit 7 | 8 | function percentage(population) { 9 | return Math.round(100*population/worldPopulation) + "%" 10 | } 11 | 12 | property int unit: width/60 13 | property int fontSizeMedium: width/50 14 | property int fontSizeLarge: fontSizeMedium*1.6 15 | property color primaryColor: "black" 16 | property int worldPopulation: 7461 17 | property var scripts: [ 18 | { 19 | "script": "Latin", 20 | "places": "Western Europe, Americas, Africa", 21 | "population": 4900, 22 | "fontFamily": "Source Sans Pro", 23 | "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", 24 | "enlarge": true 25 | }, 26 | { 27 | // Simplified Chinese: China, Singapore 28 | // Traditional Chinese: Hong Kong, Taiwan, Malaysia 29 | "script": "Chinese", 30 | "places": "China, Southeast Asia", 31 | "population": 1340, 32 | "fontFamily": "WenQuanYi", 33 | "text": "在另一方面，我们谴责与义愤和不喜欢的人谁是如此引诱，士气低落的时刻愉悦的魅力，被欲望蒙蔽这样，他们无法预见的痛苦。" 34 | }, 35 | { 36 | "script": "Devanagari", 37 | "places": "India", 38 | "population": 420, // Devanagari 420, other Indian scripts 910 39 | "fontFamily": "Lohit Devanagari", 40 | "text": "दूसरी ओर, हम तो वे दर्द और पीछा करने के लिए बाध्य कर रहे हैं कि मुसीबत उम्मीद नहीं कर सकते कि, इतनी इच्छा से अंधे, पल की खुशी का आकर्षण द्वारा और हतोत्साहित कर रहे हैं" 41 | }, 42 | { 43 | "script": "Arabic", 44 | "places": "Middle east, North Africa", 45 | "population": 660, 46 | "fontFamily": "Amiri", 47 | "text": "غير ألمانيا ليتسنّى وبولندا ثم. تصرّف الإثنان تم حتى, اليميني المتحدة عل ذات. أن شدّت لليابان اقتصادية أخذ, كان أثره، وعُرفت وإعلان إذ. وحتى بالرّغم بها ما, حيث إذ تمهيد بقسوة." 48 | }, 49 | { 50 | "script": "Other Indic scripts" 51 | }, 52 | { 53 | "script": "Cyrillic", 54 | "places": "Russia, Eastern Europe", 55 | "population": 250, 56 | "fontFamily": "Source Sans Pro", 57 | "text": "Лорем ипсум долор сит амет, ин нулла сцаевола вих, не про еверти сусципиантур, демоцритум персеяуерис ад мел. " 58 | }, 59 | { 60 | "script": "Japanese", 61 | "places": "Japan", 62 | "population": 120, 63 | "text": "ちのめんょ露巣そきみ、氏保、課御絵無え。日やらててあっおちてぬひた課屋派ょノセンレヘ巣屋にのと。" 64 | }, 65 | { 66 | "script": "Korean", 67 | "places": "North and South Korea", 68 | "population": 79, 69 | "text": "대한민국의 경제질서는 개인과 기업의 경제상의 자유와 창의를 존중함을 기본으로 한다. 직전대통령이 없을 때에는 대통령이 지명한다. 공무원은 국민전체에 대한 봉사자이며." 70 | }, 71 | 72 | /*{ 73 | "script": "Thai", 74 | "places": "Thailand", 75 | "population": 38, 76 | "text": "เป็นข้อความแทนที่ใช้เพื่อลดความสนใจต่อข้อความที่นำมาแสดง สำหรับการแสดงลักษณะของ ฟอนต์ การพิมพ์และการจัดหน้า" 77 | }*/ 78 | ] 79 | 80 | Grid { 81 | id: grid 82 | 83 | y: 2*unit 84 | x: unit 85 | columns: 2 86 | width: parent.width - 2*x 87 | spacing: 2*unit 88 | Repeater { 89 | /* 90 | - Simplified world map https://commons.wikimedia.org/wiki/Category:Blank_SVG_maps_of_the_world#/media/File:World_map_-_low_resolution.svg 91 | - World map: http://www.worldstandards.eu/WordPress/wp-content/uploads/alphabets-spread-around-the-world-1024x645.jpg 92 | - Population https://en.wikipedia.org/wiki/List_of_writing_systems#List_of_writing_scripts_by_adoption 93 | - SVG renderer where you can pick values to bound to 94 | */ 95 | 96 | model: scripts 97 | Paragraph { 98 | id: paragraph 99 | title: modelData.script + " " + (modelData.population ? percentage(modelData.population) : "") 100 | description: modelData.text 101 | enlarge: modelData.script == "Latin" 102 | Component.onCompleted: { 103 | if (modelData.script == "Other Indic scripts") { 104 | description = "" 105 | indicScriptsLabel.parent = paragraph 106 | height = indicScriptsLabel.height 107 | } 108 | } 109 | 110 | } 111 | } 112 | } 113 | Text { 114 | id: indicScriptsLabel 115 | width: parent.width 116 | text: "Bengali " + percentage(220) + ", Gurmukhi " + percentage(100) + ", Telegu " + percentage(74) + ", Tamil " + percentage(70) + ", Malayalam " + percentage(62) + ", etc." 117 | font.family: "Source Sans Pro" 118 | font.weight: Font.Light 119 | font.pixelSize: fontSizeLarge/1.2 120 | wrapMode: Text.Wrap 121 | color: primaryColor 122 | } 123 | } 124 | 125 | -------------------------------------------------------------------------------- /splash/SplashText.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Rectangle { 4 | id: splashText 5 | property string text: "Splash!" 6 | width: 440; height: 160 7 | property bool reverse: Math.random() > 0.5 8 | color: Qt.rgba(0.5+0.5*Math.random(), 0.2+0.4*Math.random(), 9 | 0.2+0.2*Math.random()) 10 | transform: Rotation { 11 | origin.x: splashText.width/2 12 | origin.y: splashText.height/2 13 | property real value: Math.random() 14 | axis.x: Math.random() < 0.2 || value < 0.3 15 | axis.y: Math.random() < 0.2 || value >= 0.3 && value < 0.7 16 | axis.z: Math.random() < 0.2 || value >= 0.7 17 | SequentialAnimation on angle { 18 | loops: Animation.Infinite 19 | NumberAnimation { 20 | from: 0.0; to: reverse ? -20.0 : 20.0 21 | duration: 500; easing.type: Easing.InOutQuad 22 | } 23 | NumberAnimation { 24 | from: reverse ? -20.0 : 20.0; to: 0.0 25 | duration: 500; easing.type: Easing.InOutQuad 26 | } 27 | } 28 | } 29 | Repeater { 30 | model: 20 31 | Rectangle { 32 | height: Math.random()*parent.height 33 | width: 0.4*Math.random()*parent.width 34 | color: Qt.rgba(0.6+0.5*Math.random(), 0.4+0.4*Math.random(), 35 | 0.2+0.4*Math.random(), 0.5+0.5*Math.random()) 36 | x: Math.random() > 0.3 ? Math.random()*parent.width - width/2 : 37 | Math.random()*width - width + (Math.random() > 0.5 ? parent.width : 0) 38 | y: Math.random()*parent.height - height/2 39 | } 40 | } 41 | Repeater { 42 | model: 5 43 | Text { 44 | text: splashText.text 45 | color: "white" 46 | font.pixelSize: 70+Math.random()*10 47 | anchors { 48 | centerIn: parent 49 | horizontalCenterOffset: 3*Math.random() 50 | verticalCenterOffset: 4*Math.random() 51 | } 52 | } 53 | } 54 | } -------------------------------------------------------------------------------- /splash/splash.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Rectangle { 4 | width: 800; height: 400 5 | Loader { 6 | anchors.centerIn: parent 7 | Component.onCompleted: reload() 8 | function reload() { 9 | source = "" 10 | source = "SplashText.qml" 11 | parent.color = Qt.rgba(0.7 + 0.2*Math.random(), 12 | 0.7 + 0.2*Math.random(), 13 | 0.9 + 0.1*Math.random()) 14 | } 15 | Timer { 16 | interval: 1000; running: true; repeat: true 17 | onTriggered: parent.reload() 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /timepicker/Button.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Rectangle { 4 | property string text 5 | radius: 4.0 6 | color: "black" 7 | width: 107; height: 70 8 | scale: buttonMouse.pressed ? 0.95 : 1.0 9 | Behavior on scale { 10 | NumberAnimation { duration: 100; easing.type: Easing.InOutQuad } 11 | } 12 | signal clicked 13 | Text { 14 | color: "white" 15 | text: parent.text 16 | font.pixelSize: 28 17 | elide: Text.ElideRight 18 | smooth: buttonMouse.pressed 19 | anchors.centerIn: parent 20 | } 21 | MouseArea { 22 | id: buttonMouse 23 | anchors.fill: parent 24 | onClicked: parent.clicked() 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /timepicker/TimePickerDialog.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Rectangle { 4 | id: timePicker 5 | property int hours 6 | property int minutes 7 | property string text: qsTr("Set time to") 8 | z: 2 9 | radius: 4 10 | scale: 0.0 11 | color: Qt.rgba(0.1, 0.1, 0.1, 0.9) 12 | width: 320; height: contentColumn.height + 4 13 | border { width: 2; color: Qt.rgba(1.0, 1.0, 1.0, 0.2) } 14 | signal finished 15 | signal canceled 16 | onFinished: timePicker.state = "" 17 | onCanceled: timePicker.state = "" 18 | function show() { 19 | state = "visible" 20 | } 21 | function formatTime() { 22 | var time = new Date() 23 | time.setHours(hours) 24 | time.setMinutes(5*Math.round(minutes/5)) 25 | return Qt.formatDateTime(time, "hh:mm") 26 | } 27 | Column { 28 | id: contentColumn 29 | x: 2; width: parent.width - 4 30 | Text { 31 | color: "white" 32 | height: 80 33 | font.pixelSize: 32 34 | text: timePicker.text + " " + timePicker.formatTime() 35 | elide: Text.ElideRight 36 | verticalAlignment: Text.AlignVCenter 37 | anchors.horizontalCenter: parent.horizontalCenter 38 | } 39 | Rectangle { 40 | color: Qt.rgba(0.9, 0.9, 0.9) 41 | x: 10; y: 6; height: 300; width: parent.width - 20 42 | Row { 43 | clip: true 44 | spacing: 1 45 | anchors.fill: parent 46 | ListView { 47 | id: hourList 48 | width: parent.width/2; height: 300 49 | model: ListModel { 50 | id: hourModel 51 | Component.onCompleted: { 52 | for (var index = 0; index < 24; index++) 53 | append({"hours": index}) 54 | hourList.currentIndex = 55 | Math.ceil(new Date().getHours()) 56 | } 57 | } 58 | delegate: TimePickerItem { 59 | number: hours 60 | onIsCurrentItemChanged: { 61 | if (isCurrentItem) 62 | timePicker.hours = hours 63 | } 64 | } 65 | snapMode: ListView.SnapToItem 66 | flickDeceleration: 1000 67 | preferredHighlightBegin: 120; preferredHighlightEnd: 120 68 | highlightRangeMode: ListView.StrictlyEnforceRange 69 | highlight: Item {} 70 | } 71 | ListView { 72 | id: minuteList 73 | width: parent.width/2; height: 300 74 | model: ListModel { 75 | id: minuteModel 76 | Component.onCompleted: { 77 | for (var index = 0; index < 12; index++) 78 | append({"minutes": 5*index}) 79 | minuteList.currentIndex = 80 | Math.ceil(new Date().getMinutes()/5) 81 | } 82 | } 83 | delegate: TimePickerItem { 84 | number: minutes 85 | onIsCurrentItemChanged: { 86 | if (isCurrentItem) 87 | timePicker.minutes = minutes 88 | } 89 | } 90 | snapMode: ListView.SnapToItem 91 | flickDeceleration: 1000 92 | preferredHighlightBegin: 120; preferredHighlightEnd: 120 93 | highlightRangeMode: ListView.StrictlyEnforceRange 94 | highlight: Item {} 95 | } 96 | } 97 | Rectangle { 98 | // highlight 99 | height: 60; width: parent.width 100 | color: Qt.rgba(0.2, 0.5, 0.8, 0.4) 101 | anchors.centerIn: parent 102 | } 103 | Rectangle { 104 | height: 55; width: parent.width 105 | gradient: Gradient { 106 | GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0) } 107 | GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0.6) } 108 | } 109 | anchors.top: parent.top 110 | } 111 | Rectangle { 112 | height: 55; width: parent.width 113 | gradient: Gradient { 114 | GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0) } 115 | GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0.6) } 116 | } 117 | anchors.bottom: parent.bottom 118 | } 119 | } 120 | Item { width: 1; height: 10 } 121 | Row { 122 | height: 70; width: parent.width 123 | Button { 124 | text: qsTr("Ok") 125 | width: parent.width/2 - 2 126 | onClicked: timePicker.finished() 127 | } 128 | Rectangle { 129 | width: 2; height: 70 130 | color: Qt.rgba(1.0, 1.0, 1.0, 0.2) 131 | } 132 | Button { 133 | text: qsTr("Cancel") 134 | width: parent.width/2-2 135 | onClicked: timePicker.canceled() 136 | } 137 | } 138 | } 139 | Rectangle { 140 | id: fadeBackground 141 | z: 1 142 | opacity: 0.0 143 | color: Qt.rgba(0.0, 0.0, fadeBackgroundMouse.pressed ? 0.5 : 0.45) 144 | parent: timePicker.parent 145 | anchors.fill: parent 146 | MouseArea { 147 | id: fadeBackgroundMouse 148 | enabled: false 149 | anchors.fill: parent 150 | onClicked: timePicker.canceled() 151 | } 152 | } 153 | states: State { 154 | name: "visible" 155 | PropertyChanges { target: timePicker; scale: 1.0 } 156 | PropertyChanges { target: fadeBackgroundMouse; enabled: true } 157 | PropertyChanges { target: fadeBackground; opacity: 0.45 } 158 | } 159 | transitions: Transition { 160 | NumberAnimation { 161 | properties: "opacity, scale" 162 | duration: 500; easing.type: Easing.InOutQuad 163 | } 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /timepicker/TimePickerItem.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Rectangle { 4 | id: timePickerItem 5 | property int number 6 | property bool pressed: itemMouse.pressed || highlightTimer.running 7 | property bool isCurrentItem: ListView.isCurrentItem 8 | color: index % 2 ? "white" : "lightgray" 9 | height: 60; width: parent.width 10 | Rectangle { 11 | color: "black" 12 | opacity: parent.pressed ? 0.3 : 0.0 13 | anchors { fill: parent; margins: -1 } 14 | Behavior on opacity { 15 | NumberAnimation { duration: 200; easing.type: Easing.InOutQuad } 16 | } 17 | } 18 | MouseArea { 19 | id: itemMouse 20 | anchors.fill: parent 21 | enabled: !ListView.isCurrentItem 22 | onClicked: ListView.view.currentIndex = index 23 | } 24 | Text { 25 | text: number >= 0 ? number : "" 26 | font.pixelSize: 26 27 | anchors.centerIn: parent 28 | } 29 | Timer { 30 | id: highlightTimer 31 | interval: 200 32 | running: parent.pressed 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /timepicker/timepicker.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 1.0 2 | 3 | Rectangle { 4 | color: Qt.rgba(1.0, 0.9, 0.6) 5 | width: 800; height: 500 6 | TimePickerDialog { 7 | id: timePickerDialog 8 | anchors.centerIn: parent 9 | } 10 | Button { 11 | width: 130 12 | text: "Open" 13 | anchors.centerIn: parent 14 | onClicked: timePickerDialog.show() 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /trees/ItemNode.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "components" 3 | 4 | Node { 5 | id: node 6 | property string text 7 | property color color: "transparent" 8 | content: ItemNodeItem { 9 | text: node.text 10 | color: node.color 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /trees/ItemNodeItem.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "components" 3 | 4 | NodeItem { 5 | id: root 6 | property string text 7 | property color color: "transparent" 8 | Rectangle { 9 | id: box 10 | color: panelColor 11 | height: colorIndicator.height + 2*unit 12 | width: node.width 13 | radius: 3 14 | anchors.verticalCenter: parent.verticalCenter 15 | 16 | Rectangle { 17 | id: colorIndicator 18 | x: unit 19 | width: visible ? height : 0 20 | height: label.height + unit 21 | color: root.color 22 | border { 23 | width: Math.ceil(unit/10) 24 | color: colorIndicator.color === box.color ? Qt.rgba(primaryColor.r, primaryColor.g, primaryColor.b, 0.5) : "transparent" 25 | } 26 | visible: color != transparentColor 27 | anchors.verticalCenter: parent.verticalCenter 28 | property color transparentColor: "transparent" 29 | } 30 | 31 | Text { 32 | id: label 33 | text: root.text 34 | color: primaryColor 35 | anchors { 36 | verticalCenter: parent.verticalCenter 37 | left: colorIndicator.right 38 | right: parent.right 39 | margins: unit 40 | } 41 | 42 | font.pixelSize: unit*2.8 43 | elide: Text.ElideRight 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /trees/button.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "components" 3 | import "../button" 4 | 5 | Rectangle { 6 | property real unit: 5 7 | property real lineWidth: 2 8 | property color backgroundColor: "#A8C7D9" 9 | property color primaryColor: "#F4EEE5" 10 | property color panelColor: "#203864" 11 | property color highlightColor: "#f34955" 12 | property color buttonColor: "#E7DD73" 13 | 14 | width: 800 15 | height: 160 16 | color: "#E3EDF3" 17 | 18 | Row { 19 | id: row 20 | spacing: 6*unit 21 | anchors.centerIn: parent 22 | 23 | Button { 24 | id: view 25 | anchors.verticalCenter: parent.verticalCenter 26 | } 27 | Node { 28 | text: "Background" 29 | color: highlightColor 30 | width: 22*unit 31 | 32 | Node { 33 | text: "List layout" 34 | Node { 35 | text: "Icon" 36 | color: buttonColor 37 | width: 14*unit 38 | } 39 | Node { 40 | text: "Label" 41 | color: primaryColor 42 | width: 14*unit 43 | } 44 | } 45 | Node { 46 | text: "Touch area" 47 | color: "transparent" 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /trees/components/BezierLine.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Canvas { 4 | property var contextPoint 5 | property var firstControlPoint 6 | property var secondControlPoint 7 | property var endPoint 8 | property color color: panelColor 9 | 10 | onPaint: { 11 | var ctx = getContext('2d') 12 | ctx.save() 13 | ctx.clearRect(0, 0, width, height) 14 | ctx.strokeStyle = color 15 | ctx.lineWidth = lineWidth 16 | ctx.beginPath() 17 | ctx.moveTo(contextPoint[0], contextPoint[1]) 18 | ctx.bezierCurveTo(firstControlPoint[0], firstControlPoint[1], 19 | secondControlPoint[0], secondControlPoint[1], 20 | endPoint[0], endPoint[1]) 21 | ctx.stroke() 22 | ctx.restore() 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /trees/components/Node.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Item { 4 | id: node 5 | 6 | width: 16*unit 7 | objectName: "node" 8 | 9 | property bool root: !(parent && parent.objectName === "node") 10 | property real spacing: 6*unit 11 | property int depth 12 | property int maxDepth 13 | property int childrenCount 14 | property Component content 15 | property Item item 16 | 17 | Component.onCompleted: if (root) create(parent) 18 | 19 | function create(parentItem) { 20 | item = content.createObject(parentItem, {"node": node}) 21 | 22 | if (item.objectName !== "nodeItem") { 23 | console.log("Error: Trying to create nodeItem of wrong type") 24 | return 25 | } 26 | 27 | console.log(content, "item", item, item.layout) 28 | 29 | if (!root) { 30 | depth = parent.depth + 1 31 | } 32 | 33 | for (var i = 0; i < children.length; i++) { 34 | var child = children[i] 35 | if (child.objectName === "node") { 36 | child.create(item.layout) 37 | } 38 | } 39 | childrenCount = item.layout.children.length 40 | 41 | if (parent.objectName === "node") { 42 | parent.maxDepth = Math.max(parent.maxDepth, maxDepth, depth) 43 | } 44 | return item 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /trees/components/NodeItem.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Item { 4 | property QtObject node 5 | property alias layout: layoutItem 6 | default property alias content: loader.sourceComponent 7 | property alias contentItem: loader.item 8 | 9 | objectName: "nodeItem" 10 | width: row.width 11 | height: row.height 12 | 13 | Row { 14 | id: row 15 | spacing: node.spacing 16 | 17 | Loader { 18 | id: loader 19 | anchors.verticalCenter: parent.verticalCenter 20 | } 21 | 22 | Column { 23 | id: layoutItem 24 | anchors.verticalCenter: parent.verticalCenter 25 | spacing: node.maxDepth == (node.depth+1) ? unit : 4*unit 26 | } 27 | } 28 | 29 | Repeater { 30 | model: node.childrenCount 31 | 32 | BezierLine { 33 | property Item targetItem: layoutItem.children[model.index] 34 | property real originY: loader.y + (2+model.index)*loader.height/(3+node.childrenCount) 35 | property real targetY: targetItem.y + targetItem.height/2 36 | z: -1 37 | x: node.width - unit 38 | width: row.spacing + unit 39 | height: parent.height 40 | 41 | contextPoint: [-lineWidth, originY] 42 | firstControlPoint: [width/3, originY] 43 | secondControlPoint: [width*2/3, targetY] 44 | endPoint: [width, targetY] 45 | } 46 | } 47 | } 48 | 49 | -------------------------------------------------------------------------------- /trees/view.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "components" 3 | import "../view" 4 | 5 | Rectangle { 6 | id: root 7 | 8 | property int unit: 5 9 | property int lineWidth: Math.round(unit*2/5) 10 | property color backgroundColor: "#A8C7D9" 11 | property color primaryColor: "#F4EEE5" 12 | property color panelColor: "#203864" 13 | property color highlightColor: "#f34955" 14 | property color buttonColor: "#E7DD73" 15 | property color contentColor: Qt.tint("white", Qt.rgba(highlightColor.r, highlightColor.g, highlightColor.b, 0.5)) 16 | 17 | width: row.width+unit*6 18 | height: row.height+unit*4 19 | color: "#E3EDF3" 20 | 21 | Row { 22 | id: row 23 | spacing: 6*unit 24 | anchors.centerIn: parent 25 | 26 | View { 27 | id: view 28 | unit: 2*root.unit 29 | anchors.verticalCenter: parent.verticalCenter 30 | } 31 | 32 | ItemNode { 33 | text: "Background" 34 | color: backgroundColor 35 | width: 22*unit 36 | ItemNode { 37 | text: "Background" 38 | color: primaryColor 39 | width: 22*unit 40 | ItemNode { 41 | text: "View logo" 42 | color: highlightColor 43 | width: 25*unit 44 | } 45 | ItemNode { 46 | text: "Search button" 47 | color: backgroundColor 48 | width: 25*unit 49 | } 50 | } 51 | 52 | ItemNode { 53 | text: "Scroll area" 54 | width: 22*unit 55 | ItemNode { 56 | text: "List layout" 57 | Repeater { 58 | model: 4 59 | ItemNode { 60 | property bool more: model.index === 2 61 | text: more ? "..." : "List item" 62 | color: more ? "transparent" : contentColor 63 | width: 18*unit 64 | } 65 | } 66 | } 67 | } 68 | 69 | ItemNode { 70 | text: "Background" 71 | width: 22*unit 72 | color: panelColor 73 | ItemNode { 74 | text: "List layout" 75 | Repeater { 76 | model: 4 77 | ItemNode { 78 | text: "Button" 79 | color: buttonColor 80 | width: 18*unit 81 | } 82 | } 83 | } 84 | } 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /view/View.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | // View component, background overlay as the root item 5 | Rectangle { 6 | 7 | property real unit: 20 8 | property color backgroundColor: "#A8C7D9" 9 | property color primaryColor: "#F4EEE5" 10 | property color panelColor: "#203864" 11 | property color highlightColor: "#f34955" 12 | property color buttonColor: "#E7DD73" 13 | property color contentColor: Qt.tint("white", Qt.rgba(highlightColor.r, highlightColor.g, highlightColor.b, 0.5)) 14 | 15 | width: 24*unit 16 | height: 32*unit 17 | color: backgroundColor 18 | 19 | // Combined scroll area and list layout 20 | ListView { 21 | anchors { 22 | top: parent.top 23 | bottom: toolbar.top 24 | } 25 | width: parent.width 26 | model: 30 27 | 28 | // Heading panel 29 | header: Column { 30 | width: parent.width 31 | 32 | // Heading background 33 | Rectangle { 34 | 35 | color: primaryColor 36 | width: parent.width 37 | height: 4*unit 38 | 39 | // View logo 40 | ContentItem { 41 | x: unit 42 | anchors.verticalCenter: parent.verticalCenter 43 | color: highlightColor 44 | width: 3*unit 45 | height: 3*unit 46 | } 47 | 48 | // Search button 49 | SearchButton { 50 | anchors { 51 | verticalCenter: parent.verticalCenter 52 | right: parent.right 53 | rightMargin: unit 54 | } 55 | } 56 | } 57 | 58 | // Empty spacer item 59 | Item { 60 | height: unit/2 61 | width: parent.width 62 | } 63 | } 64 | 65 | // Content item 66 | delegate: Item { 67 | 68 | height: 4*unit 69 | width: parent.width 70 | 71 | Row { 72 | id: row 73 | x: unit 74 | spacing: unit 75 | width: parent.width - 2*x 76 | anchors.verticalCenter: parent.verticalCenter 77 | 78 | // Image 79 | ContentItem { 80 | id: image 81 | anchors.verticalCenter: parent.verticalCenter 82 | height: 3*unit 83 | width: 3*unit 84 | } 85 | 86 | // Paragraph 87 | TextParagraph { 88 | width: parent.width - parent.spacing - image.width 89 | anchors.verticalCenter: parent.verticalCenter 90 | } 91 | } 92 | } 93 | } 94 | 95 | Item { 96 | id: toolbar 97 | 98 | height: 4*unit 99 | width: parent.width 100 | anchors.bottom: parent.bottom 101 | 102 | // Toolbar background 103 | Rectangle { 104 | anchors.fill: parent 105 | color: panelColor 106 | } 107 | 108 | // Row layout 109 | Row { 110 | property int count: 4 111 | width: parent.width - 2*unit 112 | spacing: (width - count * 2*unit)/(count-1) 113 | anchors.centerIn: parent 114 | Repeater { 115 | model: parent.count 116 | 117 | // Button 118 | Button {} 119 | } 120 | } 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /view/components/Button.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Rectangle { 4 | color: buttonColor 5 | width: 2*unit 6 | height: 2*unit 7 | radius: width/2 8 | } 9 | -------------------------------------------------------------------------------- /view/components/ContentItem.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Rectangle { 4 | color: contentColor 5 | } 6 | -------------------------------------------------------------------------------- /view/components/SearchButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Item { 4 | id: button 5 | 6 | width: 1.5*unit 7 | height: 1.5*unit 8 | property color color: backgroundColor 9 | 10 | Canvas { 11 | width: parent.width 12 | height: parent.height 13 | anchors { 14 | centerIn: parent 15 | verticalCenterOffset: unit/2 16 | } 17 | 18 | Rectangle { 19 | width: 2*unit 20 | height: 2*unit 21 | anchors { 22 | verticalCenter: parent.top 23 | horizontalCenter: parent.left 24 | } 25 | radius: width/2 26 | color: "transparent" 27 | border { width: unit/2; color: button.color } 28 | } 29 | 30 | onPaint: { 31 | var ctx = getContext('2d') 32 | ctx.save() 33 | ctx.clearRect(0, 0, width, height) 34 | ctx.strokeStyle = button.color 35 | ctx.lineWidth = unit/2 36 | ctx.beginPath() 37 | ctx.moveTo(unit/2, unit/2) 38 | ctx.lineTo(width - 1, height - 1) 39 | ctx.stroke() 40 | ctx.restore() 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /view/components/TextParagraph.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Column { 4 | spacing: unit/2 5 | Repeater { 6 | model: 3 7 | Rectangle { 8 | color: primaryColor 9 | width: model.index % 3 === 2 ? parent.width/2 + Math.random()*parent.width/2 10 | : parent.width 11 | height: unit/2 12 | radius: height/2 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /views/AudioPlayer.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "components" 3 | 4 | Page { 5 | 6 | Column { 7 | width: parent.width 8 | height: parent.height 9 | 10 | ContentItem { 11 | // album art 12 | value: 0.1+0.1*Math.random() 13 | width: parent.width 14 | height: parent.height - panel.height 15 | 16 | Repeater { 17 | model: [ 18 | [[0,0], [medium, 0], [large, large], [0, huge]], 19 | [[parent.width/3, 0], [parent.width, 0], [parent.width, small], [parent.width - medium, huge], [parent.width - huge, medium], [parent.width/2, large]], 20 | [[0, parent.height/2], [parent.width/4, parent.height/3 + medium + small], [parent.width/2, parent.height/2 - medium], [parent.width*3/4 - small, parent.height/3 + large], [parent.width-large, parent.height/2 - small], [parent.width, parent.height/2], [parent.width, parent.height*5/6], [parent.width - medium, parent.height*3/4], [parent.width*2/3, parent.height*2/3+medium], [parent.width/3, parent.height/2+small], [0,parent.height*3/4]] 21 | ] 22 | Polygon { 23 | property real value: 0.4+0.3*Math.random() 24 | color: Qt.tint("white", Qt.rgba(contentColor.r, contentColor.g, contentColor.b, value)) 25 | anchors.fill: parent 26 | array: modelData 27 | } 28 | } 29 | 30 | Row { 31 | // song info 32 | x: medium 33 | anchors { 34 | bottom: parent.bottom 35 | bottomMargin: small 36 | } 37 | width: parent.width - 2*x 38 | Column { 39 | spacing: small 40 | width: parent.width/2 41 | Label {} 42 | Label {} 43 | } 44 | Item { 45 | height: 1 46 | width: parent.width/2 - buttonWidth 47 | } 48 | Button { 49 | anchors.bottom: parent.bottom 50 | } 51 | } 52 | } 53 | 54 | Panel { 55 | id: panel 56 | width: parent.width 57 | height: column.height + column.y + medium 58 | 59 | Column { 60 | id: column 61 | y: small 62 | spacing: extraSmall 63 | x: medium 64 | width: parent.width - 2*x 65 | Text { 66 | text: "0:31" 67 | color: primaryColor 68 | anchors.horizontalCenter: parent.horizontalCenter 69 | font.pixelSize: fontSizeSmall 70 | } 71 | Rectangle { 72 | color: primaryColor 73 | width: parent.width 74 | height: extraSmall 75 | } 76 | Item { width: 1; height: 1 } 77 | Row { 78 | spacing: large 79 | anchors.horizontalCenter: parent.horizontalCenter 80 | Button {} 81 | Polygon { 82 | color: primaryColor 83 | width: buttonWidth 84 | height: buttonWidth 85 | array: [[0,0], [width, height/2], [0, height]] 86 | } 87 | Button {} 88 | } 89 | } 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /views/Calendar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | Column { 7 | x: medium 8 | y: medium 9 | width: parent.width - 2*x 10 | spacing: medium 11 | 12 | Grid { 13 | property int count: 25 14 | columns: 5 15 | width: parent.width 16 | columnSpacing: medium 17 | rowSpacing: small 18 | 19 | Repeater { 20 | model: parent.count 21 | 22 | Rectangle { 23 | width: (parent.width - parent.columns*parent.columnSpacing + parent.columnSpacing)/parent.columns 24 | height: width 25 | color: model.index == 8 ? highlightColor : primaryColor 26 | radius: width/2 27 | Rectangle { 28 | anchors.centerIn: parent 29 | width: parent.width + small 30 | height: width 31 | color: "transparent" 32 | border { width: tiny; color: primaryColor } 33 | radius: width/2 34 | visible: model.index % 9 == 1 35 | } 36 | } 37 | } 38 | } 39 | 40 | Column { 41 | spacing: small 42 | width: parent.width 43 | Repeater { 44 | model: 3 45 | Label {} 46 | } 47 | } 48 | 49 | } 50 | 51 | Panel { 52 | anchors.bottom: parent.bottom 53 | Row { 54 | spacing: large 55 | anchors.centerIn: parent 56 | Repeater { 57 | model: 3 58 | Button {} 59 | } 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /views/Card.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | Column { 7 | width: parent.width 8 | spacing: medium 9 | 10 | Panel { 11 | Button { 12 | x: medium 13 | anchors.verticalCenter: parent.verticalCenter 14 | } 15 | OptionsButton { 16 | anchors { 17 | right: parent.right 18 | rightMargin: medium 19 | verticalCenter: parent.verticalCenter 20 | } 21 | } 22 | } 23 | 24 | Row { 25 | x: medium 26 | width: parent.width - 2*x 27 | spacing: medium 28 | Column { 29 | id: column 30 | spacing: medium 31 | width: 1/2 * parent.width 32 | Label {} 33 | Label {} 34 | Label {} 35 | } 36 | ContentItem { 37 | id: avatar 38 | color: highlightColor 39 | width: 1/2 * parent.width - medium 40 | height: column.height 41 | } 42 | } 43 | 44 | Label { 45 | width: parent.width/2 46 | anchors.horizontalCenter: parent.horizontalCenter 47 | } 48 | Label { 49 | x: medium 50 | width: parent.width - 2*x 51 | } 52 | Label { 53 | width: parent.width/2 54 | anchors.horizontalCenter: parent.horizontalCenter 55 | } 56 | Label { 57 | x: medium 58 | width: parent.width - 2*x 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /views/ContentFlow.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | Row { 7 | id: buttonRow 8 | 9 | property int count: 4 10 | x: medium 11 | width: parent.width - 2*medium 12 | height: large 13 | spacing: small 14 | 15 | Button { 16 | anchors.verticalCenter: parent.verticalCenter 17 | } 18 | Item { 19 | height: medium 20 | width: parent.width - 3*buttonWidth - 3*parent.spacing 21 | } 22 | Button { 23 | anchors.verticalCenter: parent.verticalCenter 24 | } 25 | Button { 26 | anchors.verticalCenter: parent.verticalCenter 27 | } 28 | } 29 | 30 | Item { 31 | 32 | property real spacing: small 33 | 34 | clip: true 35 | x: medium 36 | width: parent.width - 2*x 37 | anchors { 38 | top: buttonRow.bottom 39 | bottom: parent.bottom 40 | } 41 | 42 | ContentItem { 43 | id: firstItem 44 | width: parent.width/2 - parent.spacing/2 45 | height: 2*large 46 | } 47 | ContentItem { 48 | id: secondItem 49 | color: highlightColor 50 | anchors.right: parent.right 51 | width: parent.width/2 - parent.spacing/2 52 | height: large 53 | } 54 | ContentItem { 55 | anchors { 56 | top: firstItem.bottom 57 | topMargin: parent.spacing 58 | } 59 | color: highlightColor 60 | height: medium 61 | width: parent.width/2 - parent.spacing/2 62 | } 63 | ContentItem { 64 | id: fourthItem 65 | height: large + medium 66 | anchors { 67 | top: secondItem.bottom 68 | left: firstItem.right 69 | margins: parent.spacing 70 | } 71 | 72 | width: parent.width/2 - parent.spacing/2 73 | } 74 | ContentItem { 75 | id: fifthItem 76 | 77 | width: parent.width 78 | height: medium 79 | anchors { 80 | top: fourthItem.bottom 81 | topMargin: parent.spacing 82 | } 83 | } 84 | Row { 85 | anchors { 86 | top: fifthItem.bottom 87 | topMargin: parent.spacing 88 | } 89 | width: parent.width 90 | spacing: parent.spacing 91 | ContentItem { 92 | width: parent.width/2 - parent.spacing/2 93 | } 94 | ContentItem { 95 | color: highlightColor 96 | width: parent.width/2 - parent.spacing/2 97 | } 98 | } 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /views/ContentGrid.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | Grid { 7 | width: parent.width 8 | columns: 4 9 | Repeater { 10 | model: 20 11 | ContentItem { 12 | value: 0.2+0.5*Math.random() 13 | width: parent.width/parent.columns 14 | height: width 15 | } 16 | } 17 | } 18 | 19 | Panel { 20 | anchors.bottom: parent.bottom 21 | Row { 22 | spacing: large 23 | anchors.centerIn: parent 24 | Repeater { 25 | model: 3 26 | Button {} 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /views/Conversation.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | clip: true 6 | 7 | Column { 8 | x: medium 9 | width: parent.width - 2*x 10 | y: -medium 11 | spacing: small 12 | 13 | Repeater { 14 | model: [medium + small, large, medium, small + extraSmall, medium+extraSmall, small + extraSmall] 15 | 16 | Rectangle { 17 | property bool received: model.index % 2 == 1 18 | width: parent.width - medium 19 | x: received ? medium : 0 20 | color: received ? highlightColor : Qt.tint("white", Qt.rgba(contentColor.r, contentColor.g, contentColor.b, 0.4)) 21 | height: modelData 22 | radius: small/2 23 | Canvas { 24 | width: medium 25 | height: small + extraSmall 26 | anchors { 27 | top: parent.bottom 28 | topMargin: -extraSmall 29 | right: received ? parent.right : undefined 30 | } 31 | Component.onCompleted: requestPaint() 32 | onPaint: { 33 | var ctx = getContext('2d') 34 | ctx.save() 35 | ctx.clearRect(0, 0, width, height) 36 | ctx.fillStyle = parent.color 37 | ctx.beginPath() 38 | if (parent.received) { 39 | ctx.lineTo(width, 0) 40 | ctx.lineTo(width, height) 41 | } else { 42 | ctx.lineTo(0,height) 43 | ctx.lineTo(width, 0) 44 | } 45 | ctx.lineTo(0, 0) 46 | ctx.closePath() 47 | ctx.fill() 48 | ctx.restore() 49 | } 50 | } 51 | } 52 | } 53 | 54 | Item { width: 1; height: 1 } 55 | 56 | Row { 57 | spacing: small 58 | width: parent.width 59 | TextField { 60 | height: medium 61 | width: parent.width - button.width - parent.spacing 62 | } 63 | Button { 64 | id: button 65 | anchors.bottom: parent.bottom 66 | } 67 | } 68 | } 69 | 70 | } 71 | -------------------------------------------------------------------------------- /views/Form.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | Column { 7 | x: medium 8 | y: medium 9 | spacing: medium 10 | width: parent.width - 2*x 11 | 12 | Row { 13 | spacing: small 14 | width: parent.width 15 | 16 | Column { 17 | id: column 18 | spacing: small 19 | width: parent.width - parent.spacing - icon.width 20 | Label {} 21 | Label {} 22 | } 23 | ContentItem { 24 | id: icon 25 | color: highlightColor 26 | width: medium 27 | height: column.height 28 | } 29 | } 30 | 31 | Column { 32 | spacing: small 33 | width: parent.width 34 | Repeater { 35 | model: 2 36 | Row { 37 | spacing: extraSmall 38 | width: parent.width 39 | Button { 40 | id: button 41 | anchors.verticalCenter: parent.verticalCenter 42 | } 43 | Label { 44 | width: parent.width - parent.spacing - button.width 45 | anchors.verticalCenter: parent.verticalCenter 46 | } 47 | } 48 | } 49 | } 50 | 51 | Column { 52 | spacing: small 53 | width: parent.width 54 | Label { width: parent.width/2 } 55 | Label {} 56 | TextField {} 57 | } 58 | 59 | Column { 60 | spacing: small 61 | width: parent.width 62 | Label { width: parent.width/2 } 63 | TextField {} 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /views/Keypad.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | Item { 7 | width: parent.width 8 | height: parent.height - panel.height 9 | 10 | Row { 11 | anchors.centerIn: parent 12 | spacing: small 13 | Repeater { 14 | model: 5 15 | Rectangle { 16 | color: primaryColor 17 | width: small 18 | height: small 19 | radius: width/2 20 | } 21 | } 22 | } 23 | } 24 | 25 | Panel { 26 | id: panel 27 | height: grid.height + medium 28 | anchors.bottom: parent.bottom 29 | 30 | Grid { 31 | id: grid 32 | columns: 3 33 | spacing: small 34 | anchors.centerIn: parent 35 | Repeater { 36 | model: 9 37 | 38 | Text { 39 | text: model.index+1 40 | horizontalAlignment: Text.AlignHCenter 41 | verticalAlignment: Text.AlignVCenter 42 | height: large 43 | width: medium+small 44 | font.pixelSize: fontSizeMedium 45 | color: primaryColor 46 | } 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /views/List.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | Column { 7 | y: small 8 | width: parent.width 9 | Repeater { 10 | model: 6 11 | 12 | Item { 13 | width: parent.width 14 | height: large 15 | Row { 16 | id: row 17 | x: medium 18 | spacing: small 19 | width: parent.width - 2*x 20 | anchors.verticalCenter: parent.verticalCenter 21 | 22 | ContentItem { 23 | id: contentItem 24 | anchors.verticalCenter: parent.verticalCenter 25 | height: column.height 26 | width: column.height 27 | } 28 | Column { 29 | id: column 30 | spacing: extraSmall 31 | width: parent.width - parent.spacing - contentItem.width 32 | anchors.verticalCenter: parent.verticalCenter 33 | Label {} 34 | Label {} 35 | } 36 | } 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /views/LockScreen.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | Column { 7 | y: parent.height/6 8 | width: parent.width - 2*x 9 | x: large 10 | spacing: small 11 | 12 | Text { 13 | text: "12:03" 14 | color: primaryColor 15 | anchors.horizontalCenter: parent.horizontalCenter 16 | font.pixelSize: fontSizeLarge 17 | } 18 | Label {} 19 | Label {} 20 | } 21 | 22 | Row { 23 | spacing: small 24 | anchors { 25 | bottom: parent.bottom 26 | bottomMargin: large 27 | horizontalCenter: parent.horizontalCenter 28 | } 29 | 30 | Button {} 31 | Button {} 32 | Button {} 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /views/Map.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | property real ratio: unit/2 7 | Repeater { 8 | // land areas 9 | model: [ 10 | [[55*ratio, 35*ratio], [70*ratio, 30*ratio], [65*ratio, 45*ratio], [57*ratio, 45]*ratio], 11 | [[0, 0], [0, 38*ratio], [22*ratio, 29*ratio], [32*ratio, 40*ratio], [45*ratio, 32*ratio], [35*ratio, 15*ratio], [47*ratio, 0]], 12 | [[56*ratio, 0], [85*ratio, 0*ratio], [95*ratio, 9], [85*ratio, 26*ratio], [70*ratio, 14*ratio], [60*ratio, 19*ratio], [56*ratio, 0]], 13 | [[0, 70*ratio], [30*ratio, 65*ratio], [38*ratio, 82*ratio], [55*ratio, 90*ratio], [42*ratio, 110*ratio], [60*ratio, parent.height], [0, parent.height]], 14 | [[parent.width, parent.height], [parent.width*2/3, parent.height], [parent.width*2/3-medium, parent.height-large], [parent.width*2/3 -medium, parent.height*3/4], [parent.width*3/4, parent.height*1/2], [parent.width*4/5, parent.height/3], [parent.width, parent.height/3 - medium] 15 | ] 16 | ] 17 | 18 | Polygon { 19 | property real value: 0.4+0.3*Math.random() 20 | color: Qt.tint("white", Qt.rgba(contentColor.r, contentColor.g, contentColor.b, value)) 21 | anchors.fill: parent 22 | array: modelData 23 | } 24 | } 25 | 26 | Line { 27 | // road 28 | anchors.fill: parent 29 | array: [[-small, parent.height*2/3+medium], [parent.width/3, parent.height*2/3], [parent.width/2+medium, parent.height*3/4], [parent.width*2/3+medium, parent.height*3/4 - extraSmall], [parent.width+small, parent.height*2/3 - medium]] 30 | } 31 | 32 | Repeater { 33 | // places of interests 34 | model: [[medium, medium-extraSmall], [large+small, parent.height*7/8], [parent.width*6/7, parent.height*2/5], [large-medium, parent.height*4/5]] 35 | 36 | Rectangle { 37 | x: modelData[0] 38 | y: modelData[1] 39 | height: width 40 | radius: width/2 41 | color: highlightColor 42 | width: medium-extraSmall 43 | Polygon { 44 | height: width 45 | width: parent.width 46 | color: highlightColor 47 | anchors { 48 | top: parent.bottom 49 | topMargin: -extraSmall 50 | horizontalCenter: parent.horizontalCenter 51 | } 52 | array: [[0,0], [width, 0], [width/2, height]] 53 | } 54 | } 55 | } 56 | 57 | OptionsButton { 58 | anchors { 59 | margins: medium 60 | right: parent.right 61 | bottom: parent.bottom 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /views/Search.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import "components" 3 | 4 | Page { 5 | 6 | Column { 7 | y: medium 8 | width: parent.width 9 | spacing: medium 10 | 11 | Row { 12 | x: medium 13 | spacing: small 14 | width: parent.width - 2*x 15 | 16 | SearchButton { 17 | id: button 18 | anchors.verticalCenter: parent.verticalCenter 19 | } 20 | TextField { 21 | width: parent.width - button.width - parent.spacing 22 | } 23 | } 24 | 25 | Column { 26 | x: medium 27 | spacing: small 28 | width: parent.width - 2*x 29 | Repeater { 30 | model: 4 31 | Label {} 32 | } 33 | } 34 | } 35 | 36 | Keyboard {} 37 | } 38 | -------------------------------------------------------------------------------- /views/SignIn.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | ContentItem { 7 | id: banner 8 | value: 0.5 9 | width: parent.width; height: logo.height+2*medium 10 | 11 | ContentItem { 12 | id: logo 13 | value: 0.1 14 | anchors.centerIn: parent 15 | width: large 16 | height: large 17 | } 18 | } 19 | 20 | Column { 21 | anchors { 22 | top: banner.bottom 23 | topMargin: medium 24 | } 25 | 26 | x: medium 27 | spacing: small + extraSmall 28 | width: parent.width - 2*x 29 | 30 | Column { 31 | width: parent.width 32 | spacing: extraSmall 33 | 34 | TextField {} 35 | TextField {} 36 | 37 | Item { width: 1; height: 1 } 38 | 39 | Row { 40 | spacing: extraSmall 41 | width: parent.width 42 | height: label.height 43 | Button { 44 | id: button 45 | anchors.verticalCenter: parent.verticalCenter 46 | } 47 | Label { 48 | id: label 49 | width: parent.width - parent.spacing - button.width 50 | anchors.verticalCenter: parent.verticalCenter 51 | } 52 | } 53 | Label {} 54 | } 55 | 56 | Row { 57 | spacing: small 58 | width: parent.width 59 | 60 | Rectangle { 61 | color: primaryColor 62 | width: parent.width/2 - parent.spacing/2 63 | height: buttonWidth 64 | radius: width/4 65 | } 66 | Rectangle { 67 | color: highlightColor 68 | width: parent.width/2 - parent.spacing/2 69 | height: buttonWidth 70 | radius: width/4 71 | } 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /views/Switcher.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | id: page 6 | clip: true 7 | 8 | Column { 9 | property int count: 5 10 | width: parent.width 11 | y: small 12 | 13 | Repeater { 14 | model: parent.count 15 | 16 | Item { 17 | width: parent.width 18 | height: large * scale 19 | scale: 0.5 + 0.5*(model.index/(parent.count-1)) 20 | 21 | ContentItem { 22 | x: medium 23 | width: parent.width - 2*x 24 | height: page.height - 2*large 25 | 26 | Panel { 27 | height: medium 28 | } 29 | } 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /views/Tutorial.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | Panel { 7 | Label { 8 | x: medium 9 | anchors.verticalCenter: parent.verticalCenter 10 | width: parent.width/4 11 | } 12 | OptionsButton { 13 | id: button 14 | color: highlightColor 15 | anchors { 16 | right: parent.right 17 | rightMargin: medium 18 | verticalCenter: parent.verticalCenter 19 | } 20 | } 21 | } 22 | 23 | Bubble { 24 | id: firstBubble 25 | 26 | y: parent.height/4 - tiny 27 | x: medium+small 28 | width: parent.width*2/3 29 | lineCount: 3 30 | 31 | BezierLine { 32 | width: large-extraSmall 33 | height: large 34 | x: parent.width/2 - lineWidth + small 35 | anchors.bottom: parent.top 36 | contextPoint: [lineWidth, height] 37 | firstControlPoint: [lineWidth, height/2] 38 | secondControlPoint: [width/2, height/5] 39 | endPoint: [width, lineWidth] 40 | 41 | Line { 42 | // arrow head 43 | rotation: 25 44 | transformOrigin: Item.TopRight 45 | anchors.right: parent.right 46 | anchors.rightMargin: -small 47 | width: medium+extraSmall 48 | height: medium+extraSmall 49 | array: [[lineWidth, lineWidth], [width-lineWidth, lineWidth], [width-lineWidth, height-lineWidth]] 50 | y: 1 51 | } 52 | } 53 | } 54 | Bubble { 55 | anchors { 56 | top: firstBubble.bottom 57 | right: parent.right 58 | topMargin: medium 59 | rightMargin: medium+tiny 60 | } 61 | width: parent.width/2 62 | lineCount: 2 63 | 64 | BezierLine { 65 | width: large-small 66 | height: large 67 | anchors { 68 | top: parent.verticalCenter 69 | topMargin: -lineWidth 70 | right: parent.left 71 | } 72 | contextPoint: [width, lineWidth] 73 | firstControlPoint: [width/2, lineWidth] 74 | secondControlPoint: [lineWidth, height/2] 75 | endPoint: [lineWidth, height] 76 | 77 | Line { 78 | // arrow head 79 | x: 1 80 | rotation: -30 81 | width: medium+extraSmall 82 | height: medium+extraSmall 83 | transformOrigin: Item.BottomLeft 84 | anchors.bottom: parent.bottom 85 | anchors.bottomMargin: -small 86 | array: [[lineWidth,lineWidth], [lineWidth, width-lineWidth], [width-lineWidth, height-lineWidth]] 87 | } 88 | } 89 | } 90 | 91 | Row { 92 | spacing: large 93 | anchors { 94 | bottom: parent.bottom 95 | bottomMargin: medium 96 | horizontalCenter: parent.horizontalCenter 97 | } 98 | Repeater { 99 | model: 3 100 | 101 | Button { 102 | color: model.index === 0 ? highlightColor : primaryColor 103 | } 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /views/Viewfinder.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | Item { 6 | // focus indicator 7 | width: huge 8 | height: huge 9 | anchors.centerIn: parent 10 | Repeater { 11 | anchors.fill: parent 12 | model: [ 13 | [[lineWidth, height/3], [lineWidth, lineWidth], [width/3, lineWidth]], 14 | [[width*2/3, lineWidth], [width-lineWidth, lineWidth], [width-lineWidth, height/3]], 15 | [[lineWidth, height*2/3], [lineWidth, height-lineWidth], [width/3, height-lineWidth]], 16 | [[width*2/3, height-lineWidth], [width-lineWidth, height-lineWidth], [width-lineWidth, height*2/3]] 17 | 18 | ] 19 | 20 | Line { 21 | array: modelData 22 | anchors.fill: parent 23 | } 24 | } 25 | } 26 | 27 | Rectangle { 28 | // zoom indicator 29 | y: medium 30 | anchors.horizontalCenter: parent.horizontalCenter 31 | width: parent.width/2 32 | height: extraSmall 33 | color: primaryColor 34 | 35 | Rectangle { 36 | // zoom level 37 | color: highlightColor 38 | x: parent.width*2/3 39 | anchors.verticalCenter: parent.verticalCenter 40 | height: small + extraSmall 41 | width: extraSmall 42 | } 43 | Rectangle { 44 | // zoom in icon 45 | height: extraSmall 46 | width: small + extraSmall 47 | color: primaryColor 48 | anchors { 49 | left: parent.right 50 | leftMargin: extraSmall 51 | verticalCenter: parent.verticalCenter 52 | } 53 | Rectangle { 54 | width: extraSmall 55 | height: small + extraSmall 56 | anchors.centerIn: parent 57 | color: primaryColor 58 | } 59 | } 60 | Rectangle { 61 | // zoom out icon 62 | height: extraSmall 63 | width: small + tiny 64 | color: primaryColor 65 | 66 | anchors { 67 | right: parent.left 68 | rightMargin: extraSmall 69 | verticalCenter: parent.verticalCenter 70 | } 71 | } 72 | } 73 | 74 | Row { 75 | spacing: large 76 | anchors { 77 | bottomMargin: medium 78 | bottom: parent.bottom 79 | horizontalCenter: parent.horizontalCenter 80 | } 81 | 82 | Button { 83 | anchors.bottom: parent.bottom 84 | } 85 | Button { 86 | anchors.bottom: parent.bottom 87 | Rectangle { 88 | anchors.centerIn: parent 89 | width: parent.width + small 90 | height: width 91 | color: "transparent" 92 | border { width: tiny; color: primaryColor } 93 | radius: width/2 94 | } 95 | } 96 | Rectangle { 97 | 98 | radius: width/2 99 | height: medium+extraSmall 100 | width: medium 101 | color: "transparent" 102 | anchors { 103 | bottom: parent.bottom 104 | bottomMargin: -tiny 105 | } 106 | border { width: tiny; color: primaryColor } 107 | Rectangle { 108 | width: small 109 | height: small 110 | radius: width/2 111 | color: primaryColor 112 | anchors { 113 | bottom: parent.bottom 114 | bottomMargin: lineWidth 115 | horizontalCenter: parent.horizontalCenter 116 | } 117 | } 118 | } 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /views/WebView.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | 6 | ContentItem { 7 | id: clippedItem 8 | x: medium 9 | height: large + small 10 | width: parent.width - x 11 | } 12 | 13 | ContentItem { 14 | id: secondClippedItem 15 | 16 | width: parent.width/2 17 | height: rightColumn.height 18 | anchors { 19 | top: clippedItem.bottom 20 | topMargin: medium 21 | } 22 | } 23 | 24 | Column { 25 | id: rightColumn 26 | 27 | clip: true 28 | spacing: medium 29 | anchors { 30 | top: secondClippedItem.top 31 | left: secondClippedItem.right 32 | leftMargin: medium 33 | right: parent.right 34 | } 35 | 36 | ContentItem { 37 | height: secondClippedItem.height/2 38 | width: parent.width 39 | } 40 | Column { 41 | spacing: small 42 | width: parent.width + small 43 | Repeater { 44 | model: 3 45 | Label {} 46 | } 47 | } 48 | } 49 | 50 | 51 | Panel { 52 | id: panel 53 | anchors.bottom: parent.bottom 54 | 55 | Label { 56 | anchors { 57 | left: parent.left 58 | right: buttons.left 59 | margins: medium 60 | verticalCenter: parent.verticalCenter 61 | } 62 | } 63 | Row { 64 | id: buttons 65 | spacing: small 66 | anchors { 67 | right: parent.right 68 | rightMargin: medium 69 | verticalCenter: parent.verticalCenter 70 | } 71 | 72 | Button {} 73 | Button {} 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /views/Widgets.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Page { 5 | clip: true 6 | 7 | Column { 8 | y: medium 9 | x: medium 10 | width: parent.width - 2*x 11 | spacing: small 12 | 13 | Row { 14 | width: parent.width 15 | spacing: small 16 | 17 | Grid { 18 | id: grid 19 | width: parent.width*2/3 - parent.spacing 20 | columns: 3 21 | Repeater { 22 | model: 9 23 | 24 | ContentItem { 25 | value: 0.3+0.6*Math.random() 26 | width: parent.width/parent.columns 27 | height: width 28 | } 29 | } 30 | } 31 | ContentItem { 32 | height: grid.height 33 | width: parent.width/3 34 | } 35 | } 36 | 37 | Column { 38 | width: parent.width 39 | spacing: small 40 | 41 | ContentItem { 42 | height: medium 43 | width: parent.width 44 | Button { 45 | width: small 46 | height: small 47 | x: extraSmall 48 | anchors.verticalCenter: parent.verticalCenter 49 | } 50 | } 51 | ContentItem { 52 | height: medium 53 | width: parent.width 54 | Button { 55 | width: small 56 | height: small 57 | x: extraSmall 58 | anchors.verticalCenter: parent.verticalCenter 59 | } 60 | } 61 | } 62 | 63 | Row { 64 | property int count: 5 65 | width: parent.width 66 | spacing: (width - count*buttonWidth) / (count-1) 67 | Repeater { 68 | model: parent.count 69 | Button { color: highlightColor } 70 | } 71 | } 72 | 73 | Row { 74 | property int count: 3 75 | width: parent.width 76 | spacing: small 77 | Repeater { 78 | model: parent.count 79 | ContentItem { 80 | width: (parent.width - parent.count*parent.spacing + parent.spacing)/parent.count 81 | } 82 | } 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /views/components/BezierLine.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Canvas { 4 | property var contextPoint 5 | property var firstControlPoint 6 | property var secondControlPoint 7 | property var endPoint 8 | 9 | onPaint: { 10 | var ctx = getContext('2d') 11 | ctx.save() 12 | ctx.clearRect(0, 0, width, height) 13 | ctx.strokeStyle = primaryColor 14 | ctx.lineWidth = lineWidth 15 | ctx.beginPath() 16 | ctx.moveTo(contextPoint[0], contextPoint[1]) 17 | ctx.bezierCurveTo(firstControlPoint[0], firstControlPoint[1], 18 | secondControlPoint[0], secondControlPoint[1], 19 | endPoint[0], endPoint[1]) 20 | ctx.stroke() 21 | ctx.restore() 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /views/components/Bubble.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | property int lineCount 5 | radius: small 6 | color: primaryColor 7 | height: column.height + 2*small 8 | 9 | Column { 10 | id: column 11 | x: small 12 | spacing: small 13 | anchors.verticalCenter: parent.verticalCenter 14 | width: parent.width - 2*x 15 | 16 | Repeater { 17 | model: lineCount 18 | 19 | Label { color: contentColor } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /views/components/Button.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: primaryColor 5 | width: buttonWidth 6 | height: buttonWidth 7 | radius: width/2 8 | } 9 | -------------------------------------------------------------------------------- /views/components/ContentItem.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | property real value: 0.4+0.3*Math.random() 5 | 6 | width: huge 7 | height: huge 8 | color: Qt.tint("white", Qt.rgba(contentColor.r, contentColor.g, contentColor.b, 1-value)) 9 | } 10 | -------------------------------------------------------------------------------- /views/components/Keyboard.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Rectangle { 4 | color: panelColor 5 | width: parent.width 6 | height: column.height + 2*small 7 | anchors.bottom: parent.bottom 8 | 9 | Column { 10 | id: column 11 | spacing: small 12 | anchors.centerIn: parent 13 | x: small 14 | width: parent.width - 2*x 15 | Repeater { 16 | model: 5 17 | 18 | Row { 19 | property int count: 8 20 | spacing: (width - count*small) / (count-1) 21 | width: parent.width 22 | Repeater { 23 | model: parent.count 24 | Rectangle { radius: 2; width: small ; height: small } 25 | } 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /views/components/Label.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: primaryColor 5 | width: parent.width 6 | height: extraSmall 7 | radius: height/2 8 | } 9 | -------------------------------------------------------------------------------- /views/components/Line.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Canvas { 4 | property var array 5 | property color color: primaryColor 6 | 7 | onPaint: { 8 | var ctx = getContext('2d') 9 | ctx.save() 10 | ctx.clearRect(0, 0, width, height) 11 | ctx.strokeStyle = color 12 | ctx.lineWidth = lineWidth 13 | ctx.beginPath() 14 | ctx.moveTo(array[0][0], array[0][1]) 15 | for (var i = 1; i < array.length; i++) { 16 | ctx.lineTo(array[i][0], array[i][1]) 17 | } 18 | ctx.stroke() 19 | ctx.restore() 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /views/components/OptionsButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Column { 4 | spacing: tiny 5 | width: medium 6 | property color color: primaryColor 7 | Repeater { 8 | model: 3 9 | 10 | Rectangle { 11 | height: tiny 12 | color: parent.color 13 | width: parent.width 14 | radius: height/2 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /views/components/Page.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: pageColor 5 | width: 9*medium 6 | height: 12*medium 7 | } 8 | -------------------------------------------------------------------------------- /views/components/Panel.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | height: large 5 | width: parent.width 6 | color: panelColor 7 | } 8 | -------------------------------------------------------------------------------- /views/components/Polygon.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Canvas { 4 | property var array 5 | property color color: primaryColor 6 | 7 | onPaint: { 8 | var ctx = getContext('2d') 9 | ctx.save() 10 | ctx.clearRect(0, 0, width, height) 11 | ctx.fillStyle = color 12 | ctx.beginPath() 13 | ctx.moveTo(array[0][0], array[0][1]) 14 | for (var i = 1; i < array.length; i++) { 15 | ctx.lineTo(array[i][0], array[i][1]) 16 | } 17 | ctx.closePath() 18 | ctx.fill() 19 | ctx.restore() 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /views/components/SearchButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Item { 4 | width: buttonWidth 5 | height: buttonWidth 6 | 7 | Canvas { 8 | width: parent.width 9 | height: parent.height 10 | anchors { 11 | centerIn: parent 12 | verticalCenterOffset: extraSmall/2 13 | horizontalCenterOffset: extraSmall/2 14 | } 15 | 16 | Rectangle { 17 | width: small+extraSmall 18 | height: small+extraSmall 19 | anchors { 20 | verticalCenter: parent.top 21 | horizontalCenter: parent.left 22 | } 23 | radius: width/2 24 | color: "transparent" 25 | border { width: tiny; color: primaryColor } 26 | } 27 | 28 | onPaint: { 29 | var ctx = getContext('2d') 30 | ctx.save() 31 | ctx.clearRect(0, 0, width, height) 32 | ctx.strokeStyle = primaryColor 33 | ctx.lineWidth = 3 // extraSmall 34 | ctx.beginPath() 35 | ctx.moveTo(2, 2) 36 | ctx.lineTo(width - 1, height - 1) 37 | ctx.stroke() 38 | ctx.restore() 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /views/components/TextField.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | 3 | Rectangle { 4 | color: primaryColor 5 | width: parent.width 6 | height: small + extraSmall 7 | radius: height/4 8 | } 9 | -------------------------------------------------------------------------------- /views/views.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import "components" 3 | 4 | Rectangle { 5 | 6 | property int unit: 3 7 | property int tiny: unit 8 | property int extraSmall: 2*tiny 9 | property int small: 3*tiny 10 | property int medium: 2*small 11 | property int large: 2*medium 12 | property int huge: 6*small 13 | 14 | property int fontSizeSmall: 6*unit 15 | property int fontSizeMedium: 9*unit 16 | property int fontSizeLarge: 12*unit 17 | 18 | property int lineWidth: unit*1.5 19 | property real buttonWidth: 4*unit 20 | 21 | property color primaryColor: "#fdf5e0" 22 | property color pageColor: "#6fbfa8" 23 | property color backgroundColor: "#fdf5e0" 24 | property color panelColor: "#353537" 25 | property color highlightColor: "#f87d60" 26 | property color contentColor: "#e3d43e" 27 | 28 | width: grid.width + 2*large 29 | height: grid.height + 2*large 30 | color: backgroundColor 31 | 32 | Grid { 33 | id: grid 34 | 35 | columns: 6 36 | spacing: medium+small 37 | anchors.centerIn: parent 38 | 39 | ContentGrid {} 40 | Card {} 41 | Keypad {} 42 | Map {} 43 | Widgets {} 44 | Switcher {} 45 | 46 | SignIn {} 47 | Viewfinder {} 48 | ContentFlow {} 49 | Calendar {} 50 | LockScreen {} 51 | Form {} 52 | 53 | Conversation {} 54 | AudioPlayer {} 55 | List {} 56 | Tutorial {} 57 | Search {} 58 | WebView {} 59 | } 60 | } 61 | --------------------------------------------------------------------------------