Warning, /education/gcompris/src/activities/programmingMaze/resource/TutorialBase.qml is written in an unsupported language. File is not indexed.
0001 /* GCompris - TutorialBase.qml 0002 * 0003 * SPDX-FileCopyrightText: 2021 Timothée Giet <animtim@gcompris.net> 0004 * 0005 * Authors: 0006 * Timothée Giet <animtim@gcompris.net> 0007 * 0008 * SPDX-License-Identifier: GPL-3.0-or-later 0009 */ 0010 import QtQuick 2.12 0011 import GCompris 1.0 0012 0013 import "../../../core" 0014 import "../" 0015 import "../programmingMaze.js" as Activity 0016 0017 Image { 0018 id: tutorialBase 0019 anchors.fill: parent 0020 fillMode: Image.PreserveAspectFit 0021 source: "qrc:/gcompris/src/activities/programmingMaze/resource/background-pm.svg" 0022 readonly property int levelNumber: items.currentLevel 0023 property string activeAreaTuto: "instruction" 0024 property bool instructionTextVisible 0025 property bool mainVisible: false 0026 property bool procedureVisible: false 0027 property bool loopVisible: false 0028 0029 Item { 0030 id: layoutTuto 0031 width: parent.paintedWidth 0032 height: parent.paintedHeight 0033 anchors.verticalCenter: parent.verticalCenter 0034 anchors.horizontalCenter: parent.horizontalCenter 0035 property int buttonWidth: width / 10 0036 property int buttonHeight: height / 15.3 0037 property int stepX: layoutTuto.width / 10 0038 property int stepY: (layoutTuto.height - layoutTuto.height / 10) / 10 0039 0040 Repeater { 0041 id: mazeModelTuto 0042 anchors.left: layoutTuto.left 0043 anchors.top: layoutTuto.top 0044 model: items.levels[levelNumber].map 0045 0046 Image { 0047 id: iceBlockTuto 0048 x: modelData.x * width 0049 y: modelData.y * height 0050 width: layoutTuto.stepX 0051 height: layoutTuto.stepY 0052 source: Activity.reverseCountUrl + "ice-block.svg" 0053 } 0054 } 0055 0056 Image { 0057 id: fishTuto 0058 width: layoutTuto.width / 12 0059 sourceSize.width: width 0060 source: Activity.reverseCountUrl + "fish-blue.svg" 0061 x: items.levels[levelNumber].fish.x * layoutTuto.stepX + (layoutTuto.stepX - width) / 2 0062 y: items.levels[levelNumber].fish.y * layoutTuto.stepY + (layoutTuto.stepY - height) / 2 0063 } 0064 0065 Image { 0066 id: playerTuto 0067 source: "qrc:/gcompris/src/activities/maze/resource/tux_top_south.svg" 0068 width: fishTuto.width 0069 sourceSize.width: width 0070 rotation: 270 0071 x: items.levels[levelNumber].map[0].x * layoutTuto.stepX + (layoutTuto.stepX - width) / 2 0072 y: items.levels[levelNumber].map[0].y * layoutTuto.stepY + (layoutTuto.stepY - height) / 2 0073 } 0074 0075 Rectangle { 0076 id: activeCodeAreaTuto 0077 color: "#1dade4" 0078 opacity: 0.5 0079 radius: 8 * ApplicationInfo.ratio 0080 border.width: 2 * ApplicationInfo.ratio 0081 border.color: "white" 0082 anchors.fill: activeAreaTuto === "instruction" ? instructionAreaTuto : 0083 ( activeAreaTuto === "main" ? wholeMainArea : wholeProcedureArea) 0084 } 0085 0086 GridView { 0087 id: instructionAreaTuto 0088 width: layoutTuto.width * 0.5 0089 height: layoutTuto.height * 0.17 0090 cellWidth: layoutTuto.buttonWidth 0091 cellHeight: layoutTuto.buttonHeight 0092 0093 anchors.left: layoutTuto.left 0094 anchors.top: mazeModelTuto.bottom 0095 anchors.topMargin: layoutTuto.height * 0.4 0096 0097 interactive: false 0098 model: instructionModel 0099 header: HeaderArea { 0100 width: instructionAreaTuto.width 0101 height: layoutTuto.height / 11 0102 radius: 4 * ApplicationInfo.ratio 0103 headerOpacity: 1 0104 headerText: instructionArea.instructionText 0105 } 0106 0107 delegate: Item { 0108 id: instructionItemTuto 0109 width: layoutTuto.buttonWidth 0110 height: layoutTuto.buttonHeight * 1.18 0111 0112 Rectangle { 0113 id: imageHolderTuto 0114 width: parent.width - 1 * ApplicationInfo.ratio 0115 height: parent.height - 1 * ApplicationInfo.ratio 0116 border.width: 1.2 * ApplicationInfo.ratio 0117 border.color: "#2a2a2a" 0118 anchors.centerIn: parent 0119 radius: width / 18 0120 color: "#ffffff" 0121 0122 Image { 0123 id: iconTuto 0124 source: Activity.url + name + ".svg" 0125 width: Math.round(parent.width / 1.2) 0126 height: Math.round(parent.height / 1.2) 0127 sourceSize.width: height 0128 sourceSize.height: height 0129 anchors.centerIn: parent 0130 fillMode: Image.PreserveAspectFit 0131 mipmap: true 0132 } 0133 } 0134 } 0135 } 0136 0137 ListModel { 0138 id: mainFunctionModelTuto1 0139 ListElement { 0140 name: "move-forward" 0141 } 0142 } 0143 0144 ListModel { 0145 id: mainFunctionModelTuto2 0146 ListElement { 0147 name: "call-procedure" 0148 } 0149 } 0150 0151 ListModel { 0152 id: mainFunctionModelTuto3 0153 ListElement { 0154 name: "execute-loop" 0155 } 0156 } 0157 0158 ListModel { 0159 id: procedureModelTuto 0160 ListElement { 0161 name: "move-forward" 0162 } 0163 ListElement { 0164 name: "move-forward" 0165 } 0166 ListElement { 0167 name: "turn-right" 0168 } 0169 } 0170 0171 HeaderArea { 0172 id: mainFunctionHeaderTuto 0173 headerText: mainFunctionHeader.headerText 0174 headerOpacity: activeAreaTuto === "main" ? 1 : 0.5 0175 width: parent.width * 0.4 0176 height: parent.height / 10 0177 radius: 4 * ApplicationInfo.ratio 0178 anchors.top: layoutTuto.top 0179 anchors.right: layoutTuto.right 0180 visible: mainVisible 0181 } 0182 0183 GridView { 0184 id: mainFunctionCodeAreaTuto 0185 visible: mainVisible 0186 width: parent.width * 0.4 0187 height: parent.height * 0.29 0188 cellWidth: layoutTuto.buttonWidth 0189 cellHeight: layoutTuto.buttonHeight 0190 0191 anchors.right: parent.right 0192 anchors.top: mainFunctionHeaderTuto.bottom 0193 0194 interactive: false 0195 model: activeAreaTuto === "procedure" ? mainFunctionModelTuto2 : (activeAreaTuto === "loop" ? mainFunctionModelTuto3 : mainFunctionModelTuto1) 0196 0197 delegate: Item { 0198 id: mainItemTuto 0199 width: layoutTuto.buttonWidth 0200 height: layoutTuto.buttonHeight 0201 0202 Rectangle { 0203 width: parent.width - 1 * ApplicationInfo.ratio 0204 height: parent.height - 1 * ApplicationInfo.ratio 0205 border.width: 1.2 * ApplicationInfo.ratio 0206 border.color: "#2a2a2a" 0207 anchors.centerIn: parent 0208 radius: width / 18 0209 color: "#ffffff" 0210 0211 Image { 0212 source: Activity.url + name + ".svg" 0213 width: Math.round(parent.width / 1.2) 0214 height: Math.round(parent.height / 1.2) 0215 sourceSize.width: height 0216 sourceSize.height: height 0217 anchors.centerIn: parent 0218 fillMode: Image.PreserveAspectFit 0219 mipmap: true 0220 } 0221 } 0222 } 0223 } 0224 0225 Item { 0226 id: wholeMainArea 0227 width: mainFunctionHeaderTuto.width 0228 height: mainFunctionHeaderTuto.height + mainFunctionCodeAreaTuto.height 0229 anchors.top: mainFunctionHeaderTuto.top 0230 anchors.left: mainFunctionHeaderTuto.left 0231 } 0232 0233 HeaderArea { 0234 id: procedureHeaderTuto 0235 headerText: procedureHeader.headerText 0236 headerIcon: procedureHeader.headerIcon 0237 headerOpacity: 1 0238 width: parent.width * 0.4 0239 height: parent.height / 10 0240 radius: 4 * ApplicationInfo.ratio 0241 visible: procedureVisible || loopVisible 0242 anchors.top: mainFunctionCodeAreaTuto.bottom 0243 anchors.right: parent.right 0244 } 0245 0246 Item { 0247 id: loopCounterTuto 0248 visible: loopVisible 0249 width: layoutTuto.buttonWidth * 3 0250 height: layoutTuto.buttonHeight 0251 anchors.top: procedureHeaderTuto.bottom 0252 anchors.horizontalCenter: procedureHeaderTuto.horizontalCenter 0253 0254 Rectangle { 0255 id: decreaseButton 0256 width: parent.width * 0.3 0257 height: parent.height 0258 anchors.left: parent.left 0259 anchors.leftMargin: 1.2 * ApplicationInfo.ratio 0260 border.width: 1.2 * ApplicationInfo.ratio 0261 border.color: "grey" 0262 radius: decreaseButton.width * 0.1 0263 0264 GCText { 0265 id: decreaseSign 0266 anchors.fill: parent 0267 horizontalAlignment: Text.AlignHCenter 0268 verticalAlignment: Text.AlignVCenter 0269 fontSizeMode: Text.Fit 0270 wrapMode: Text.WordWrap 0271 color: "#373737" 0272 text: Activity.LoopEnumValues.MINUS_SIGN 0273 } 0274 } 0275 0276 Rectangle { 0277 id: loopCounter 0278 width: parent.width * 0.3 0279 height: parent.height 0280 anchors.left: decreaseButton.right 0281 anchors.leftMargin: 1.2 * ApplicationInfo.ratio 0282 border.width: 1.2 * ApplicationInfo.ratio 0283 border.color: "grey" 0284 radius: loopCounter.width * 0.1 0285 0286 GCText { 0287 id: loopCounterText 0288 anchors.fill: parent 0289 horizontalAlignment: Text.AlignHCenter 0290 verticalAlignment: Text.AlignVCenter 0291 fontSizeMode: Text.Fit 0292 wrapMode: Text.WordWrap 0293 color: "#373737" 0294 text: "1" 0295 } 0296 } 0297 0298 Rectangle { 0299 id: increaseButton 0300 width: parent.width * 0.3 0301 height: parent.height 0302 anchors.left: loopCounter.right 0303 anchors.leftMargin: 1.2 * ApplicationInfo.ratio 0304 border.width: 1.2 * ApplicationInfo.ratio 0305 border.color: "grey" 0306 radius: increaseButton.width * 0.1 0307 0308 GCText { 0309 id: increaseSign 0310 anchors.fill: parent 0311 horizontalAlignment: Text.AlignHCenter 0312 verticalAlignment: Text.AlignVCenter 0313 fontSizeMode: Text.Fit 0314 wrapMode: Text.WordWrap 0315 color: "#373737" 0316 text: Activity.LoopEnumValues.PLUS_SIGN 0317 } 0318 } 0319 } 0320 0321 GridView { 0322 id: procedureCodeAreaTuto 0323 visible: procedureVisible || loopVisible 0324 width: parent.width * 0.4 0325 height: parent.height * 0.29 0326 cellWidth: layoutTuto.buttonWidth 0327 cellHeight: layoutTuto.buttonHeight 0328 0329 anchors.right: parent.right 0330 anchors.top: loopVisible ? loopCounterTuto.bottom : procedureHeaderTuto.bottom 0331 0332 interactive: false 0333 model: procedureModelTuto 0334 0335 delegate: Item { 0336 id: procedureItemTuto 0337 width: layoutTuto.buttonWidth 0338 height: layoutTuto.buttonHeight 0339 0340 Rectangle { 0341 width: parent.width - 1 * ApplicationInfo.ratio 0342 height: parent.height - 1 * ApplicationInfo.ratio 0343 border.width: 1.2 * ApplicationInfo.ratio 0344 border.color: "#2a2a2a" 0345 anchors.centerIn: parent 0346 radius: width / 18 0347 color: "#ffffff" 0348 0349 Image { 0350 source: Activity.url + name + ".svg" 0351 width: Math.round(parent.width / 1.2) 0352 height: Math.round(parent.height / 1.2) 0353 sourceSize.width: height 0354 sourceSize.height: height 0355 anchors.centerIn: parent 0356 fillMode: Image.PreserveAspectFit 0357 mipmap: true 0358 } 0359 } 0360 } 0361 } 0362 0363 Item { 0364 id: wholeProcedureArea 0365 width: procedureHeaderTuto.width 0366 height: procedureHeaderTuto.height + procedureCodeAreaTuto.height 0367 anchors.top: procedureHeaderTuto.top 0368 anchors.left: procedureHeaderTuto.left 0369 } 0370 0371 Rectangle { 0372 id: highlightArea 0373 color: "#00000000" 0374 border.width: 3 * ApplicationInfo.ratio 0375 border.color: "#E63B3B" 0376 anchors.fill: activeAreaTuto === "instruction" ? instructionAreaTuto : 0377 ( activeAreaTuto === "main" ? wholeMainArea : wholeProcedureArea) 0378 scale: 1.05 0379 } 0380 0381 Rectangle { 0382 id: constraintInstructionTuto 0383 anchors.left: parent.left 0384 anchors.top: instructionAreaTuto.bottom 0385 anchors.topMargin: 5 * ApplicationInfo.ratio 0386 width: parent.width / 2.3 0387 height: parent.height / 8.9 0388 radius: 5 0389 z: 3 0390 color: "#E8E8E8" //paper white 0391 border.width: 1 * ApplicationInfo.ratio 0392 border.color: "#87A6DD" //light blue 0393 visible: instructionTextVisible 0394 0395 GCText { 0396 id: instructionTextTuto 0397 anchors.fill: parent 0398 anchors.margins: parent.border.width 0399 horizontalAlignment: Text.AlignHCenter 0400 verticalAlignment: Text.AlignVCenter 0401 fontSizeMode: Text.Fit 0402 wrapMode: Text.WordWrap 0403 0404 text: instructionText.text 0405 } 0406 } 0407 0408 Item { 0409 id: runCodeLayout 0410 height: constraintInstructionTuto.height 0411 anchors.left: constraintInstructionTuto.right 0412 anchors.right: mainFunctionCodeAreaTuto.left 0413 anchors.verticalCenter: constraintInstructionTuto.verticalCenter 0414 0415 Image { 0416 id: runCode 0417 height: Math.min(parent.width, parent.height) 0418 width: height 0419 sourceSize.width: height 0420 sourceSize.height: height 0421 anchors.centerIn: parent 0422 source:"qrc:/gcompris/src/core/resource/bar_ok.svg" 0423 fillMode: Image.PreserveAspectFit 0424 } 0425 } 0426 0427 } 0428 }