Warning, /education/gcompris/src/core/NumPad.qml is written in an unsupported language. File is not indexed.
0001 /* GCompris - NumPad.qml 0002 * 0003 * SPDX-FileCopyrightText: 2014 Aruna Sankaranarayanan <arunasank@src.gnome.org> 0004 * 0005 * Authors: 0006 * Aruna Sankaranarayanan <arunasank@src.gnome.org> 0007 * 0008 * SPDX-License-Identifier: GPL-3.0-or-later 0009 */ 0010 import QtQuick 2.12 0011 import GCompris 1.0 0012 0013 /** 0014 * A QML component providing an on screen numpad. 0015 * 0016 * Numpad displays integers from 0 to 9 that can be used 0017 * in applications that need numerical inputs from the user. 0018 * By default it shows integer 0 - 4 in a column on left and 0019 * integers 5 - 9 on right in a column. 0020 * It also contains the backspace button to remove the last input value. 0021 * It is also only displayed when the "virtual keyboard" is enabled in the options. 0022 * 0023 * @inherit QtQuick.Item 0024 */ 0025 Item { 0026 id: containerPanel 0027 anchors.top: parent.top 0028 anchors.bottom: bar.top 0029 anchors.left: parent.left 0030 anchors.right: parent.right 0031 anchors.bottomMargin: bar.height * 0.2 0032 0033 /** 0034 * type:list 0035 * 0036 * Default keys-rectangle color used unless the user provides another. 0037 */ 0038 property var colours: ["#ea7025", "#67c111", "#00bde3", "#bde300","#e3004c"] 0039 0040 /** 0041 * type:list 0042 * 0043 * Default sequence of numbers displayed unless the user provides another. 0044 */ 0045 property var numbers: [0, 1, 2, 3, 4] 0046 0047 /** 0048 * type:string 0049 * 0050 * String containing the numbers selected by user. 0051 */ 0052 property string answer: "" 0053 0054 /** 0055 * type:bool 0056 * 0057 * Set to true when good answer is submitted and to 0058 * avoid the inputs until required. 0059 */ 0060 property bool answerFlag: false 0061 0062 /** 0063 * type:var 0064 * 0065 * Column containing containing first half integers i.e. 0066 * 0 - 4, displayed at the left edge of the activity window. 0067 */ 0068 property var leftPanelComponent: leftPanel 0069 0070 /** 0071 * type:var 0072 * 0073 * Column containing containing second half integers i.e. 0074 * 5 - 9, displayed at the right edge of the activity window. 0075 */ 0076 property var rightPanelComponent: rightPanel 0077 0078 /** 0079 * type:var 0080 * 0081 * Button for displaying backSpace key. 0082 * Removes last input from answer on clicked or pressed. 0083 */ 0084 property var backspaceButtonComponent: backspaceButton 0085 0086 /** 0087 * type:var 0088 * 0089 * Button for displaying decimal point character. 0090 */ 0091 property var decimalPointButton: decimalPointButton 0092 0093 /** 0094 * type:bool 0095 * 0096 * Enable or disable the button for the decimal point character. 0097 */ 0098 property bool displayDecimalButton: false 0099 0100 /** 0101 * type:readonly string 0102 * 0103 * Stores the decimal point character of the current locale. 0104 */ 0105 readonly property string decimalPoint: ApplicationSettings.locale == "system" ? Qt.locale().decimalPoint : Qt.locale(ApplicationSettings.locale).decimalPoint 0106 0107 /** 0108 * type:int 0109 * 0110 * Stores the maximum length of the correct answer. 0111 */ 0112 property int maxDigit: 2 0113 0114 /** 0115 * type:int 0116 * 0117 * Stores the width of each key container. 0118 */ 0119 property int columnWidth: 80 * ApplicationInfo.ratio 0120 0121 /** 0122 * type:bool 0123 * 0124 * Enable or disable press input 0125 */ 0126 property bool enableInput: true 0127 0128 signal answer 0129 0130 visible: ApplicationSettings.isVirtualKeyboard 0131 0132 Column { 0133 id: leftPanel 0134 width: columnWidth 0135 height: parent.height - 90 * ApplicationInfo.ratio 0136 opacity: 0.8 0137 0138 Repeater { 0139 model: 5 0140 0141 Rectangle{ 0142 width: parent.width 0143 height: parent.height/5 0144 color: colours[index] 0145 border.color: Qt.darker(color) 0146 border.width: 2 0147 0148 GCText { 0149 anchors.horizontalCenter: parent.horizontalCenter 0150 anchors.verticalCenter: parent.verticalCenter 0151 text: numbers[index] 0152 fontSize: 28 0153 font.bold: true 0154 } 0155 0156 MouseArea { 0157 // Create a bigger area than the top rectangle to suit fingers 0158 anchors { 0159 left: parent.left 0160 top: parent.top 0161 bottom: parent.bottom 0162 } 0163 width: parent.width * 2 0164 enabled: ApplicationSettings.isVirtualKeyboard && 0165 containerPanel.opacity > 0 && containerPanel.enableInput 0166 0167 onClicked: { 0168 if(answer.length < maxDigit) 0169 answer += numbers[index] 0170 } 0171 onPressed: { 0172 leftPanel.children[index].color = Qt.lighter(colours[index]) 0173 leftPanel.children[index].border.width = 5 0174 } 0175 onReleased: { 0176 leftPanel.children[index].color = colours[index] 0177 leftPanel.children[index].border.width = 2 0178 } 0179 } 0180 } 0181 } 0182 0183 Rectangle { 0184 id: decimalPointButton 0185 visible: containerPanel.displayDecimalButton 0186 width: parent.width 0187 height: containerPanel.height - leftPanel.height 0188 color: "white" 0189 border.color: "black" 0190 border.width: 2 0191 0192 GCText { 0193 id: decimalPointCharacter 0194 anchors.horizontalCenter: parent.horizontalCenter 0195 anchors.verticalCenter: parent.verticalCenter 0196 text: containerPanel.decimalPoint 0197 fontSize: 28 0198 font.bold: true 0199 } 0200 0201 MouseArea { 0202 anchors.fill: parent 0203 enabled: answer.length && answer.indexOf(containerPanel.decimalPoint) == -1 0204 0205 onClicked: { 0206 answer += containerPanel.decimalPoint 0207 } 0208 0209 onPressed: { 0210 decimalPointButton.color = Qt.lighter("white") 0211 decimalPointButton.border.width = 5 0212 } 0213 0214 onReleased: { 0215 decimalPointButton.color = "white" 0216 decimalPointButton.border.width = 2 0217 } 0218 } 0219 } 0220 } 0221 0222 Column { 0223 id: rightPanel 0224 width: columnWidth 0225 height: parent.height - 90 * ApplicationInfo.ratio 0226 x: parent.width - columnWidth 0227 opacity: 0.8 0228 0229 Repeater { 0230 model: 5 0231 0232 Rectangle { 0233 width: parent.width 0234 height: parent.height/5 0235 color: colours[index] 0236 border.color: Qt.darker(color) 0237 border.width:2 0238 0239 GCText { 0240 anchors.horizontalCenter: parent.horizontalCenter 0241 anchors.verticalCenter: parent.verticalCenter 0242 text: numbers[index] + 5 0243 fontSize: 28 0244 font.bold: true 0245 } 0246 MouseArea { 0247 // Create a bigger area than the top rectangle to suit fingers 0248 anchors { 0249 right: parent.right 0250 top: parent.top 0251 bottom: parent.bottom 0252 } 0253 width: parent.width * 2 0254 enabled: ApplicationSettings.isVirtualKeyboard && 0255 containerPanel.opacity > 0 0256 0257 onClicked: { 0258 if(answer.length < maxDigit) 0259 answer += numbers[index] + 5 0260 } 0261 onPressed: { 0262 rightPanel.children[index].color = Qt.lighter(colours[index]) 0263 rightPanel.children[index].border.width = 5 0264 } 0265 onReleased: { 0266 rightPanel.children[index].color = colours[index] 0267 rightPanel.children[index].border.width = 2 0268 } 0269 } 0270 } 0271 } 0272 0273 Rectangle { 0274 id: backspaceButton 0275 width: parent.width 0276 height: containerPanel.height - rightPanel.height 0277 color: "white" 0278 border.color: "black" 0279 border.width: 2 0280 0281 GCText { 0282 anchors.horizontalCenter: parent.horizontalCenter 0283 anchors.verticalCenter: parent.verticalCenter 0284 text: "←" 0285 fontSize: 28 0286 font.bold: true 0287 } 0288 0289 MouseArea { 0290 anchors.fill: parent 0291 enabled: ApplicationSettings.isVirtualKeyboard && 0292 containerPanel.opacity > 0 && 0293 containerPanel.enableInput 0294 0295 onClicked: { 0296 answer = answer.substring(0,answer.length - 1) 0297 } 0298 onPressed: { 0299 backspaceButton.color = Qt.lighter("white") 0300 backspaceButton.border.width = 5 0301 } 0302 0303 onReleased: { 0304 backspaceButton.color = "white" 0305 backspaceButton.border.width = 2 0306 } 0307 } 0308 } 0309 } 0310 0311 function resetText() { 0312 answer = "" 0313 } 0314 0315 function updateAnswer(key, isKeyPressed) { 0316 if(!containerPanel.enableInput) 0317 return; 0318 0319 var keyValue; 0320 0321 switch(key) 0322 { 0323 case Qt.Key_0: 0324 keyValue = 0; 0325 break; 0326 case Qt.Key_1: 0327 keyValue = 1; 0328 break; 0329 case Qt.Key_2: 0330 keyValue = 2; 0331 break; 0332 case Qt.Key_3: 0333 keyValue = 3; 0334 break; 0335 case Qt.Key_4: 0336 keyValue = 4; 0337 break; 0338 case Qt.Key_5: 0339 keyValue = 5; 0340 break; 0341 case Qt.Key_6: 0342 keyValue = 6; 0343 break; 0344 case Qt.Key_7: 0345 keyValue = 7; 0346 break; 0347 case Qt.Key_8: 0348 keyValue = 8; 0349 break; 0350 case Qt.Key_9: 0351 keyValue = 9; 0352 break; 0353 case Qt.Key_Backspace: 0354 keyValue = 10; 0355 break; 0356 case Qt.Key_Period: 0357 case Qt.Key_Comma: 0358 keyValue = containerPanel.decimalPoint; 0359 } 0360 0361 if(isKeyPressed && !answerFlag) 0362 { 0363 if(keyValue < 5 && answer.length < maxDigit) 0364 { 0365 answer += keyValue; 0366 leftPanel.children[keyValue].color = Qt.lighter(colours[keyValue]) 0367 leftPanel.children[keyValue].border.width = 5 0368 } 0369 else if(keyValue < 10 && answer.length < maxDigit) 0370 { 0371 answer += keyValue; 0372 rightPanel.children[keyValue - 5].color = Qt.lighter(colours[keyValue - 5]) 0373 rightPanel.children[keyValue - 5].border.width = 5 0374 } 0375 else if(keyValue === 10) 0376 { 0377 answer = answer.substring(0,answer.length - 1); 0378 backspaceButton.color = Qt.lighter("white") 0379 backspaceButton.border.width = 5 0380 } 0381 //In case the button for the decimal point character is enabled, and 0382 //In case the key entered by the user is a decimal point character, and 0383 //In case the length of the answer is less than the maximum digits, and 0384 //In case the answer isn't empty string (to avoid having decimal point as a first character in the answer), and 0385 //In case the answer doesn't contain a decimal point (to avoid having 2 decimal point characters in the answer). 0386 else if(containerPanel.displayDecimalButton && keyValue === containerPanel.decimalPoint && answer.length < maxDigit && answer.length != 0 && answer.indexOf(keyValue) == -1) 0387 { 0388 answer += keyValue; 0389 decimalPointButton.color = Qt.lighter("white") 0390 decimalPointButton.border.width = 5 0391 } 0392 } 0393 else 0394 { 0395 if(keyValue < 5) 0396 { 0397 leftPanel.children[keyValue].color = colours[keyValue] 0398 leftPanel.children[keyValue].border.width = 2 0399 } 0400 else if(keyValue < 10) 0401 { 0402 0403 rightPanel.children[keyValue - 5].color = colours[keyValue - 5] 0404 rightPanel.children[keyValue - 5].border.width = 2 0405 } 0406 else if(keyValue === 10) 0407 { 0408 backspaceButton.color = "white" 0409 backspaceButton.border.width = 2 0410 } 0411 else if(keyValue === containerPanel.decimalPoint) 0412 { 0413 decimalPointButton.color = "white" 0414 decimalPointButton.border.width = 2 0415 } 0416 } 0417 } 0418 } 0419