activities/submarine/Controls.qml

0001 /* GCompris - Controls.qml
0002  *
0003  * SPDX-FileCopyrightText: 2017 RUDRA NIL BASU <rudra.nil.basu.1996@gmail.com>
0004  *
0005  * Authors:
0006  *   Pascal Georges <pascal.georges1@free.fr> (GTK+ version)
0007  *   Rudra Nil Basu <rudra.nil.basu.1996@gmail.com> (Qt Quick port)
0008  *
0009  *   SPDX-License-Identifier: GPL-3.0-or-later
0010  */
0011 import QtQuick 2.12
0012
0013 import "../../core"
0014
0015 Item {
0016     id: controls
0017
0018     /* Engine Controller Properties */
0019     property point enginePosition
0020     property alias engineWidth : engine.width
0021     property alias engineHeight : engine.height
0022     property alias submarineHorizontalSpeed : engineValues.text
0023
0024     /* Ballast tanks Controller Properties */
0025     property alias leftTankVisible : leftBallastTankController.visible
0026     property point leftBallastTankPosition
0027     property alias leftBallastTankWidth : leftBallastTankDisplay.width
0028     property alias leftBallastTankHeight : leftBallastTankDisplay.height
0029     property alias rotateLeftFill: rotateLeftFill
0030     property alias rotateLeftFlush: rotateLeftFlush
0031
0032     property alias centralTankVisible : centralBallastTankController.visible
0033     property point centralBallastTankPosition
0034     property alias centralBallastTankWidth : centralBallastTankDisplay.width
0035     property alias centralBallastTankHeight : centralBallastTankDisplay.height
0036     property alias rotateCentralFill: rotateCentralFill
0037     property alias rotateCentralFlush: rotateCentralFlush
0038
0039     property alias rightTankVisible : rightBallastTankController.visible
0040     property point rightBallastTankPosition
0041     property alias rightBallastTankWidth : rightBallastTankDisplay.width
0042     property alias rightBallastTankHeight : rightBallastTankDisplay.height
0043     property alias rotateRightFill: rotateRightFill
0044     property alias rotateRightFlush: rotateRightFlush
0045
0046     /* Diving Plane Controller properties */
0047     property bool divingPlaneVisible
0048     property point divingPlanePosition
0049     property int divingPlaneWidth
0050     property int divingPlaneHeight
0051
0052     property int buttonSize
0053     property int buttonPlusY
0054     property int buttonMinusY
0055
0056     property string fillColor : "#0DA5CB"
0057
0058     Image {
0059         id: controlBackground
0060         source: url + "board.svg"
0061         width: background.width
0062         height: background.height * 0.40
0063         sourceSize.width: controlBackground.width
0064         sourceSize.height: controlBackground.height
0065         y: background.height - controlBackground.height
0066     }
0067
0068     Item {
0069         Rectangle {
0070             id: engine
0071             x: enginePosition.x
0072             y: enginePosition.y
0073             radius: 10
0074             color: "#323232"
0075             border.width: 4
0076             border.color: "#AEC6DD"
0077             GCText {
0078                 id: engineValues
0079                 anchors {
0080                     horizontalCenter: parent.horizontalCenter
0081                     verticalCenter: parent.verticalCenter
0082                 }
0083                 color: "#D3E1EB"
0084             }
0085         }
0086         Image {
0087             id: incSpeed
0088             source: url + "up.svg"
0089             width: buttonSize
0090             height: buttonSize
0091             sourceSize.width: incSpeed.width
0092             sourceSize.height: incSpeed.height
0093
0094             anchors {
0095                 right: engine.left
0096                 leftMargin: incSpeed.width / 2
0097             }
0098             y: buttonPlusY
0099
0100             MouseArea {
0101                 anchors.fill: parent
0102                 enabled: !tutorial.visible
0103
0104                 onClicked: submarine.increaseHorizontalVelocity(1)
0105             }
0106         }
0107
0108         Image {
0109             id: downSpeed
0110             source: url + "down.svg"
0111             width: buttonSize
0112             height: buttonSize
0113             sourceSize.width: downSpeed.width
0114             sourceSize.height: downSpeed.height
0115
0116             anchors {
0117                 right: engine.left
0118                 leftMargin: downSpeed.width / 2
0119             }
0120             y: buttonMinusY
0121
0122             MouseArea {
0123                 anchors.fill: parent
0124                 enabled: !tutorial.visible
0125
0126                 onClicked: submarine.decreaseHorizontalVelocity(1)
0127             }
0128         }
0129     }
0130
0131     // 3 Ballast Tanks
0132
0133     Item {
0134         id: leftBallastTankController
0135         Rectangle {
0136             id: leftBallastTankDisplay
0137             x: leftBallastTankPosition.x
0138             y: leftBallastTankPosition.y
0139
0140             radius: 2
0141
0142             color: "#323232"
0143             border.width: 4
0144             border.color: "#AEC6DD"
0145
0146             Rectangle {
0147                 width: leftBallastTankWidth * 0.85
0148                 height: (leftBallastTank.waterLevel / leftBallastTank.maxWaterLevel) * (leftBallastTankHeight - 8)
0149                 anchors {
0150                     bottom: parent.bottom
0151                     horizontalCenter: parent.horizontalCenter
0152                     margins: 4
0153                 }
0154
0155                 color: fillColor
0156
0157                 Behavior on height {
0158                     NumberAnimation {
0159                         duration: 1000
0160                     }
0161                 }
0162             }
0163
0164             GCText {
0165                 id: leftBallastTankLabel
0166                 text: qsTr("Left Ballast Tank")
0167                 wrapMode: Text.WordWrap
0168                 anchors.fill: leftBallastTankDisplay
0169                 anchors.margins: 4
0170                 horizontalAlignment: Text.AlignHCenter
0171                 fontSizeMode: Text.Fit
0172                 minimumPixelSize: 8
0173                 font.pixelSize: 70
0174                 color: "#B8D3E1EB"
0175             }
0176         }
0177
0178         Image {
0179             id: leftBallastFill
0180             source: url + "vanne.svg"
0181
0182             x: leftBallastTankDisplay.x - buttonSize * 1.1
0183             y: buttonPlusY
0184             width: buttonSize
0185             height: buttonSize
0186             sourceSize.width: buttonSize
0187             sourceSize.height: buttonSize
0188             rotation: 0
0189
0190             transform: Rotation {
0191                 id: rotateLeftFill;
0192                 origin.x: leftBallastFill.width / 2;
0193                 origin.y: leftBallastFill.height / 2
0194                 axis { x: 0; y: 0; z: 1 } angle: 0
0195             }
0196
0197             MouseArea {
0198                 anchors.fill: parent
0199                 enabled: !tutorial.visible
0200
0201                 onClicked: {
0202                     leftBallastTank.fillBallastTanks()
0203                     updateVannes(leftBallastTank.waterFilling, rotateLeftFill)
0204                 }
0205             }
0206         }
0207
0208         Image {
0209             id: leftBallastFlush
0210             source: url + "vanne.svg"
0211
0212             x: leftBallastTankDisplay.x - buttonSize * 1.1
0213             y: buttonMinusY
0214             width: buttonSize
0215             height: buttonSize
0216             sourceSize.width: buttonSize
0217             sourceSize.height: buttonSize
0218             rotation: 0
0219
0220             transform: Rotation {
0221                 id: rotateLeftFlush;
0222                 origin.x: leftBallastFill.width / 2;
0223                 origin.y: leftBallastFill.height / 2
0224                 axis { x: 0; y: 0; z: 1 } angle: 0
0225             }
0226
0227             MouseArea {
0228                 anchors.fill: parent
0229                 enabled: !tutorial.visible
0230
0231                 onClicked: {
0232                     leftBallastTank.flushBallastTanks()
0233                     updateVannes(leftBallastTank.waterFlushing, rotateLeftFlush)
0234                 }
0235             }
0236         }
0237     }
0238
0239
0240     Item {
0241         id: centralBallastTankController
0242
0243         Rectangle {
0244             id: centralBallastTankDisplay
0245             x: centralBallastTankPosition.x
0246             y: centralBallastTankPosition.y
0247
0248             radius: 2
0249
0250             color: "#323232"
0251             border.width: 4
0252             border.color: "#AEC6DD"
0253
0254             Rectangle {
0255                 width: centralBallastTankWidth * 0.85
0256                 height: (centralBallastTank.waterLevel / centralBallastTank.maxWaterLevel) * (centralBallastTankHeight - 8)
0257                 anchors {
0258                     bottom: parent.bottom
0259                     horizontalCenter: parent.horizontalCenter
0260                     margins: 4
0261                 }
0262
0263                 color: fillColor
0264
0265                 Behavior on height {
0266                     NumberAnimation {
0267                         duration: 1000
0268                     }
0269                 }
0270             }
0271
0272             GCText {
0273                 id: centralBallastTankLabel
0274                 text: qsTr("Central Ballast Tank")
0275                 wrapMode: Text.WordWrap
0276                 anchors.fill: centralBallastTankDisplay
0277                 anchors.margins: 4
0278                 horizontalAlignment: Text.AlignHCenter
0279                 fontSizeMode: Text.Fit
0280                 minimumPixelSize: 8
0281                 font.pixelSize: 70
0282                 color: "#B8D3E1EB"
0283             }
0284         }
0285
0286         Image {
0287             id: centralBallastFill
0288             source: url + "vanne.svg"
0289
0290             x: centralBallastTankDisplay.x - buttonSize * 1.1
0291             y: buttonPlusY
0292             width: buttonSize
0293             height: buttonSize
0294             sourceSize.width: buttonSize
0295             sourceSize.height: buttonSize
0296             rotation: 0
0297
0298             transform: Rotation {
0299                 id: rotateCentralFill;
0300                 origin.x: centralBallastFill.width / 2;
0301                 origin.y: centralBallastFill.height / 2
0302                 axis { x: 0; y: 0; z: 1 } angle: 0
0303             }
0304
0305             MouseArea {
0306                 anchors.fill: parent
0307                 enabled: !tutorial.visible
0308
0309                 onClicked: {
0310                     centralBallastTank.fillBallastTanks()
0311                     updateVannes(centralBallastTank.waterFilling, rotateCentralFill)
0312                 }
0313             }
0314         }
0315
0316         Image {
0317             id: centralBallastFlush
0318             source: url + "vanne.svg"
0319
0320             x: centralBallastTankDisplay.x - buttonSize * 1.1
0321             y: buttonMinusY
0322             width: buttonSize
0323             height: buttonSize
0324             sourceSize.width: buttonSize
0325             sourceSize.height: buttonSize
0326             rotation: 0
0327
0328             transform: Rotation {
0329                 id: rotateCentralFlush;
0330                 origin.x: centralBallastFill.width / 2;
0331                 origin.y: centralBallastFill.height / 2
0332                 axis { x: 0; y: 0; z: 1 } angle: 0
0333             }
0334
0335             MouseArea {
0336                 anchors.fill: parent
0337                 enabled: !tutorial.visible
0338
0339                 onClicked: {
0340                     centralBallastTank.flushBallastTanks()
0341                     updateVannes(centralBallastTank.waterFlushing, rotateCentralFlush)
0342                 }
0343             }
0344         }
0345     }
0346
0347     Item {
0348         id: rightBallastTankController
0349
0350         Rectangle {
0351             id: rightBallastTankDisplay
0352             x: rightBallastTankPosition.x
0353             y: rightBallastTankPosition.y
0354
0355             radius: 2
0356
0357             color: "#323232"
0358             border.width: 4
0359             border.color: "#AEC6DD"
0360
0361             Rectangle {
0362                 width: rightBallastTankWidth * 0.85
0363                 height: (rightBallastTank.waterLevel / rightBallastTank.maxWaterLevel) * (rightBallastTankHeight - 8)
0364                 anchors {
0365                     bottom: parent.bottom
0366                     horizontalCenter: parent.horizontalCenter
0367                     margins: 4
0368                 }
0369
0370                 color: fillColor
0371
0372                 Behavior on height {
0373                     NumberAnimation {
0374                         duration: 1000
0375                     }
0376                 }
0377             }
0378
0379             GCText {
0380                 id: rightBallastTankLabel
0381                 text: qsTr("Right Ballast Tank")
0382                 wrapMode: Text.WordWrap
0383                 anchors.fill: rightBallastTankDisplay
0384                 anchors.margins: 4
0385                 horizontalAlignment: Text.AlignHCenter
0386                 fontSizeMode: Text.Fit
0387                 minimumPixelSize: 8
0388                 font.pixelSize: 70
0389                 color: "#B8D3E1EB"
0390             }
0391         }
0392
0393         Image {
0394             id: rightBallastFill
0395             source: url + "vanne.svg"
0396
0397             x: rightBallastTankDisplay.x - buttonSize * 1.1
0398             y: buttonPlusY
0399             width: buttonSize
0400             height: buttonSize
0401             sourceSize.width: buttonSize
0402             sourceSize.height: buttonSize
0403             rotation: 0
0404
0405             transform: Rotation {
0406                 id: rotateRightFill;
0407                 origin.x: rightBallastFill.width / 2;
0408                 origin.y: rightBallastFill.height / 2
0409                 axis { x: 0; y: 0; z: 1 } angle: 0
0410             }
0411
0412             MouseArea {
0413                 anchors.fill: parent
0414                 enabled: !tutorial.visible
0415
0416                 onClicked: {
0417                     rightBallastTank.fillBallastTanks()
0418                     updateVannes(rightBallastTank.waterFilling, rotateRightFill)
0419                 }
0420             }
0421         }
0422
0423         Image {
0424             id: rightBallastFlush
0425             source: url + "vanne.svg"
0426
0427             x: rightBallastTankDisplay.x - buttonSize * 1.1
0428             y: buttonMinusY
0429             width: buttonSize
0430             height: buttonSize
0431             sourceSize.width: buttonSize
0432             sourceSize.height: buttonSize
0433             rotation: 0
0434
0435             transform: Rotation {
0436                 id: rotateRightFlush;
0437                 origin.x: rightBallastFill.width / 2;
0438                 origin.y: rightBallastFill.height / 2
0439                 axis { x: 0; y: 0; z: 1 } angle: 0
0440             }
0441
0442             MouseArea {
0443                 anchors.fill: parent
0444                 enabled: !tutorial.visible
0445
0446                 onClicked: {
0447                     rightBallastTank.flushBallastTanks()
0448                     updateVannes(rightBallastTank.waterFlushing, rotateRightFlush)
0449                 }
0450             }
0451         }
0452     }
0453
0454     PropertyAnimation {
0455         id: ballastTankOnAnim
0456         properties: "angle"
0457         from: 0
0458         to: 90
0459         duration: 200
0460     }
0461
0462     PropertyAnimation {
0463         id: ballastTankOffAnim
0464         properties: "angle"
0465         from: 90
0466         to: 0
0467         duration: 200
0468     }
0469
0470     function updateVannes(vanneOnCondition, animationTarget) {
0471         if (vanneOnCondition) {
0472             ballastTankOnAnim.target = animationTarget
0473             ballastTankOnAnim.start()
0474         } else {
0475             ballastTankOffAnim.target = animationTarget
0476             ballastTankOffAnim.start()
0477         }
0478     }
0479
0480     function resetVannes() {
0481         if (leftTankVisible) {
0482             rotateLeftFill.angle = 0
0483             rotateLeftFlush.angle = 0
0484         }
0485         if (centralTankVisible) {
0486             rotateCentralFill.angle = 0
0487             rotateCentralFlush.angle = 0
0488         }
0489         if (rightTankVisible) {
0490             rotateRightFill.angle = 0
0491             rotateRightFlush.angle = 0
0492         }
0493     }
0494
0495     Item {
0496         id: divingPlaneController
0497         visible: divingPlaneVisible
0498
0499         property int maxRotationAngle: 30
0500
0501         Image {
0502             id: divingPlanesImage
0503             source: url + "rudder.svg"
0504             width: divingPlaneWidth
0505             height: divingPlaneHeight
0506             sourceSize.width: divingPlaneWidth
0507             sourceSize.height: divingPlaneHeight
0508             x: divingPlanePosition.x
0509             y: divingPlanePosition.y
0510
0511             transform: Rotation {
0512                 id: rotateDivingPlanes;
0513                 origin.x: divingPlanesImage.width;
0514                 origin.y: divingPlanesImage.height / 2
0515                 axis { x: 0; y: 0; z: 1 } angle: (submarine.wingsAngle / submarine.maxWingsAngle) * divingPlaneController.maxRotationAngle
0516             }
0517         }
0518
0519         Image {
0520             id: divingPlanesRotateUp
0521             source: url + "up.svg"
0522             width: buttonSize
0523             height: buttonSize
0524             sourceSize.width: buttonSize
0525             sourceSize.height: buttonSize
0526
0527             anchors {
0528                 left: divingPlanesImage.right
0529             }
0530             y: buttonPlusY
0531
0532             MouseArea {
0533                 anchors.fill: parent
0534                 enabled: !tutorial.visible
0535
0536                 onClicked: submarine.increaseWingsAngle(1)
0537             }
0538         }
0539
0540         Image {
0541             id: divingPlanesRotateDown
0542             source: url + "down.svg"
0543             width: buttonSize
0544             height: buttonSize
0545             sourceSize.width: buttonSize
0546             sourceSize.height: buttonSize
0547
0548             anchors {
0549                 left: divingPlanesImage.right
0550             }
0551             y: buttonMinusY
0552
0553             MouseArea {
0554                 anchors.fill: parent
0555                 enabled: !tutorial.visible
0556
0557                 onClicked: submarine.decreaseWingsAngle(1)
0558             }
0559         }
0560     }
0561 }