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