Skip to content

GitLab

Verified Commit a65e9f11 authored by Artem Sidyakin's avatar Artem Sidyakin
Browse files

Got cup 

- cup is a component
- trying to animate brewing
parent 7a411e5f
Hide whitespace changes
Inline Side-by-side
Cup.qml
View file @ a65e9f11
......@@ -5,186 +5,149 @@ Item {
property alias questionVisible: question.visible
property bool showLabels: true
property alias coffeeLabel: cappuccinoLabel.text
property real sugarAmount: 2
property real milkAmount: 4
property real coffeeAmount: 4
Rectangle {
id: rectangle
color: Styles.backgroundColor
anchors.fill: parent
property int foamAmount: 2
property int milkAmount: 4
property int coffeeAmount: 3
Image {
id: background
x: 12
y: 170
source: "qrc:/images/coffee_cup_back.png"
}
Item {
id: foam
x: 12
width: 457
anchors.topMargin: milk.anchors.topMargin - 40
anchors.bottom: background.bottom
anchors.top: background.top
clip: true
Image {
anchors.bottom: parent.bottom
source: "qrc:/images/liquid_foam.png"
}
}
Item {
id: milk
x: 12
width: 457
anchors.topMargin: 400 - coffee.height - root.milkAmount * 15 + 20
anchors.bottom: background.bottom
anchors.top: background.top
clip: true
Image {
source: "qrc:/images/liquid_milk.png"
anchors.bottom: parent.bottom
}
}
Item {
id: coffee
x: 12
width: 457
height: root.coffeeAmount * 40
anchors.bottomMargin: 0
anchors.bottom: background.bottom
clip: true
Image {
anchors.bottom: parent.bottom
source: "qrc:/images/liquid_coffee.png"
}
}
Image {
id: emptySpace
anchors.fill: background
sourceSize.height: background.height
fillMode: Image.PreserveAspectFit
source: "qrc:/images/coffee_cup_back.png"
//visible: false
}
Item {
id: foam
anchors.fill: emptySpace
anchors.topMargin: foamAmount === 0 ? emptySpace.height : emptySpace.height * 0.1//((10 - milkAmount - coffeeAmount - foamAmount) / 10)
clip: true
//visible: false
Image {
id: cupFront
x: 11
y: 170
source: "qrc:/images/coffee_cup_front.png"
}
Text {
x: 499
y: 370
color: "#ffffff"
text: qsTr("Hot Milk")
font.capitalization: Font.AllUppercase
wrapMode: Text.WrapAnywhere
font.pixelSize: 18
visible: root.showLabels
anchors.bottom: foam.bottom
height: emptySpace.height
sourceSize.height: height
fillMode: Image.PreserveAspectFit
source: "qrc:/images/liquid_foam.png"
}
}
Text {
x: 486
y: 468
color: "#ffffff"
text: qsTr("Espresso Coffee")
font.capitalization: Font.AllUppercase
wrapMode: Text.WrapAnywhere
font.pixelSize: 18
visible: root.showLabels
Item {
id: milk
anchors.fill: emptySpace
anchors.topMargin: milkAmount === 0 ? emptySpace.height : emptySpace.height * 0.8 * ((10 - milkAmount - coffeeAmount) / 10)
clip: true
//visible: false
Image {
anchors.bottom: milk.bottom
height: emptySpace.height
sourceSize.height: height
fillMode: Image.PreserveAspectFit
source: "qrc:/images/liquid_milk.png"
}
}
Item {
id: coffee
anchors.fill: emptySpace
anchors.topMargin: coffeeAmount === 0 ? emptySpace.height : emptySpace.height * 0.8 * ((10 - coffeeAmount) / 10)
clip: true
//visible: false
Image {
x: 414
y: 274
visible: root.showLabels
source: "qrc:/images/line.png"
anchors.bottom: coffee.bottom
height: emptySpace.height
sourceSize.height: height
fillMode: Image.PreserveAspectFit
source: "qrc:/images/liquid_coffee.png"
}
}
Text {
x: 512
y: 259
color: "#ffffff"
text: qsTr("Milk Foam")
wrapMode: Text.WrapAnywhere
font.pixelSize: 18
font.capitalization: Font.AllUppercase
visible: root.showLabels
}
LevelMark {
anchors.top: foam.top
//anchors.topMargin: -10
anchors.left: foam.right
anchors.leftMargin: 50
text: qsTr("MILK FOAM")
showIt: root.showLabels
}
Image {
x: 404
y: 382
source: "qrc:/images/line.png"
visible: root.showLabels
}
LevelMark {
anchors.top: milk.top
anchors.topMargin: -10
anchors.left: milk.right
anchors.leftMargin: 50
text: qsTr("HOT MILK")
showIt: root.showLabels
}
Image {
x: 388
y: 482
source: "qrc:/images/line.png"
visible: root.showLabels
}
LevelMark {
anchors.top: coffee.top
anchors.topMargin: -10
anchors.left: coffee.right
anchors.leftMargin: 50
text: qsTr("ESPRESSO COFFEE")
showIt: root.showLabels
}
Text {
id: cappuccinoLabel
color: "#ffffff"
text: qsTr("CAPPUCCINO")
visible: !question.visible
anchors.top: parent.top
anchors.topMargin: 32
anchors.left: parent.left
anchors.leftMargin: Constants.defaultMargin
wrapMode: Text.WrapAnywhere
font.pixelSize: 64
font.capitalization: Font.AllUppercase
}
// Item {
// id: sugarItem
// anchors.horizontalCenter: emptySpace.horizontalCenter
// anchors.bottom: emptySpace.bottom
// // anchors.left: emptySpace.left
// // anchors.right: emptySpace.right
// width: 300//emptySpace.width
// height: width
// // rotation: -45
// Rectangle {
// anchors.bottom: parent.bottom
// anchors.horizontalCenter: parent.horizontalCenter
// // anchors.leftMargin: 150
// width: 48
// height: 48
// color: Styles.labelColor
// opacity: root.sugarAmount / 10
// }
// Rectangle {
// x: 74
// y: 40
// width: 32
// height: 32
// color: Styles.labelColor
// visible: root.sugarAmount > 5
// opacity: root.sugarAmount / 30
// }
// Rectangle {
// x: 45
// y: 62
// width: 24
// height: 24
// color: Styles.labelColor
// opacity: root.sugarAmount / 25
// }
// }
Item {
id: sugarItem
x: 181
y: 419
width: 119
height: 111
rotation: -45
Rectangle {
x: 21
y: 8
width: 48
height: 48
color: "#ffffff"
opacity: root.sugarAmount / 10
}
Rectangle {
x: 74
y: 40
width: 32
height: 32
color: "#ffffff"
visible: root.sugarAmount > 5
opacity: root.sugarAmount / 30
}
Rectangle {
x: 45
y: 62
width: 24
height: 24
color: "#ffffff"
opacity: root.sugarAmount / 25
}
}
Image {
id: background
anchors.centerIn: root
height: parent.height * 0.9
sourceSize.height: height
fillMode: Image.PreserveAspectFit
source: "qrc:/images/coffee_cup_front.png"
}
Image {
id: question
y: 170
anchors.left: parent.left
anchors.leftMargin: 11
anchors.centerIn: root
height: parent.height * 0.9
sourceSize.height: height
fillMode: Image.PreserveAspectFit
source: "qrc:/images/coffee_cup_large.png"
}
}
LevelMark.qml 0 → 100644
View file @ a65e9f11
import QtQuick 2.11
Item {
property alias text: mark.text
property bool showIt: false
Text {
id: mark
text: qsTr("ESPRESSO COFFEE")
color: Styles.labelColor
font.pixelSize: 20
visible: showIt
}
Rectangle {
anchors.right: mark.left
anchors.rightMargin: 10
anchors.verticalCenter: mark.verticalCenter
width: 50
height: 1
color: Styles.labelColor
visible: mark.visible
}
}
NavigationButton.qml
View file @ a65e9f11
......@@ -15,13 +15,14 @@ Row {
Text {
id: label
anchors.verticalCenter: parent.verticalCenter
color: Styles.labelColor
}
Image {
id: image
height: label.height
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenter: label.verticalCenter
source: row.forward ? "qrc:/images/forward.png" : "qrc:/images/back.png"
fillMode: Image.PreserveAspectFit
scale: mouseArea.containsMouse ? 1.1 : 1
......
brewing.qml
View file @ a65e9f11
import QtQuick 2.11
import QtQuick.Layouts 1.11
Item {
id: root
signal brewingReady
signal finished
Rectangle {
anchors.fill: parent
color: Styles.backgroundColor
Cup {
ColumnLayout {
anchors.fill: parent
}
spacing: 0
// debug
MouseArea {
anchors.fill: parent
onClicked: {
root.brewingReady()
Item {
Layout.fillWidth: true
Layout.preferredHeight: parent.height * 0.2
Text {
id: cappuccinoLabel
anchors.centerIn: parent
color: Styles.labelColor
text: qsTr("status")
font.pixelSize: cup.height / 10
}
}
Cup {
id: cup
Layout.fillWidth: true
Layout.fillHeight: true
Layout.bottomMargin: 30
questionVisible: false
state: "empty"
showLabels: false
}
// NavigationButton {
// Layout.alignment: Qt.AlignHCenter
// Layout.preferredHeight: parent.height * 0.2
// text: qsTr("CONTINUE")
// textSize: image.height / 10
// onClicked: {
// root.brewingReady()
// }
// }
}
}
states: [
State {
name: "empty"
PropertyChanges { target: cup; coffeeAmount: 0 }
PropertyChanges { target: cup; milkAmount: 0 }
PropertyChanges { target: cup; foamAmount: 0 }
},
State {
name: "has-coffee"
PropertyChanges { target: cup; coffeeAmount: 4 }
PropertyChanges { target: cup; milkAmount: 0 }
PropertyChanges { target: cup; foamAmount: 0 }
},
State {
name: "has-coffee-milk"
PropertyChanges { target: cup; coffeeAmount: 4 }
PropertyChanges { target: cup; milkAmount: 3 }
PropertyChanges { target: cup; foamAmount: 0 }
},
State {
name: "has-coffee-milk-foam"
PropertyChanges { target: cup; coffeeAmount: 4 }
PropertyChanges { target: cup; milkAmount: 3 }
PropertyChanges { target: cup; foamAmount: 2 }
}
]
function start() {
animation.start()
}
SequentialAnimation {
id: animation
PauseAnimation {
duration: 1500
}
PropertyAction {
target: cup
property: state
value: "has-coffee"
}
PauseAnimation {
duration: 1500
}
PropertyAction {
target: cup
property: state
value: "has-coffee-milk"
}
PauseAnimation {
duration: 1500
}
PropertyAction {
target: cup
property: state
value: "has-coffee-milk-foam"
}
PauseAnimation {
duration: 1500
}
ScriptAction {
script: root.finished()
}
}
Component.onCompleted: {
cup.coffeeAmount = 0;
cup.milkAmount = 0;
cup.foamAmount = 0;
start();
}
}
emptycup.qml
View file @ a65e9f11
......@@ -11,11 +11,13 @@ Item {
color: Styles.backgroundColor
ColumnLayout {
anchors.centerIn: parent
anchors.fill: parent
spacing: 0
Text {
Layout.bottomMargin: 30
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: parent.height * 0.2
Layout.topMargin: 20
text: qsTr("PLEASE, INSERT CUP INTO TRAY")
color: Styles.labelColor
font.pixelSize: image.height / 10
......@@ -23,15 +25,16 @@ Item {
Image {
id: image
Layout.preferredHeight: root.height * 0.6
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.fillWidth: true
Layout.fillHeight: true
height: parent.height
fillMode: Image.PreserveAspectFit
source: "qrc:/images/coffee_cup_outline.png"
}
NavigationButton {
Layout.topMargin: 30
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: parent.height * 0.2
text: qsTr("CONTINUE")
textSize: image.height / 10
onClicked: {
......
images/coffee_cup_back.png
View replaced file @ 7a411e5f View file @ a65e9f11
images/coffee_cup_back.png

10.1 KB | W: | H:

images/coffee_cup_back.png

11.2 KB | W: | H:

images/coffee_cup_back.png
images/coffee_cup_back.png
images/coffee_cup_back.png
images/coffee_cup_back.png
  • 2-up
  • Swipe
  • Onion skin
images/coffee_cup_front.png
View replaced file @ 7a411e5f View file @ a65e9f11
images/coffee_cup_front.png

15.4 KB | W: | H:

images/coffee_cup_front.png

16.5 KB | W: | H:

images/coffee_cup_front.png
images/coffee_cup_front.png
images/coffee_cup_front.png
images/coffee_cup_front.png
  • 2-up
  • Swipe
  • Onion skin
images/liquid_coffee.png
View replaced file @ 7a411e5f View file @ a65e9f11
images/liquid_coffee.png

29.6 KB | W: | H:

images/liquid_coffee.png

30.1 KB | W: | H:

images/liquid_coffee.png
images/liquid_coffee.png
images/liquid_coffee.png
images/liquid_coffee.png
  • 2-up
  • Swipe
  • Onion skin
images/liquid_foam.png
View replaced file @ 7a411e5f View file @ a65e9f11
images/liquid_foam.png

28.2 KB | W: | H:

images/liquid_foam.png

28.8 KB | W: | H:

images/liquid_foam.png
images/liquid_foam.png
images/liquid_foam.png
images/liquid_foam.png
  • 2-up
  • Swipe
  • Onion skin
images/liquid_milk.png
View replaced file @ 7a411e5f View file @ a65e9f11
images/liquid_milk.png

30.7 KB | W: | H:

images/liquid_milk.png

31.2 KB | W: | H:

images/liquid_milk.png
images/liquid_milk.png
images/liquid_milk.png
images/liquid_milk.png
  • 2-up
  • Swipe
  • Onion skin
main.qml
View file @ a65e9f11
......@@ -12,7 +12,7 @@ Window {
Loader {
id: loader
anchors.fill: parent
source: "choice.qml"
source: "qrc:/brewing.qml"//"choice.qml"
Connections {
target: loader.item
......
qml.qrc
View file @ a65e9f11
......@@ -16,16 +16,17 @@
<file>images/coffee_cup_coverplate.png</file>
<file>images/coffee_cup_front.png</file>
<file>images/coffee_cup_outline.png</file>
<file>images/coffee_cup_large.png</file>
<file>images/coffee.png</file>
<file>images/Espresso.png</file>
<file>images/forward.png</file>
<file>images/Latte.png</file>
<file>images/line.png</file>
<file>images/liquid_coffee.png</file>
<file>images/liquid_foam.png</file>
<file>images/liquid_milk.png</file>
<file>images/Macchiato.png</file>
<file>images/milk.png</file>
<file>images/sugar.png</file>
<file>LevelMark.qml</file>
</qresource>
</RCC>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment