Warning, /education/gcompris/src/core/DominoNumber.qml is written in an unsupported language. File is not indexed.
0001 /* GCompris - DominoNumber.qml
0002 *
0003 * SPDX-FileCopyrightText: 2014 Bruno Coudoin <bruno.coudoin@gcompris.net>
0004 *
0005 * Authors:
0006 * Bruno Coudoin <bruno.coudoin@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 /**
0014 * A QML component to display integers(0-9) on Domino.
0015 * Numbers are displayed in the form of specified representation.
0016 *
0017 * @inherit QtQuick.Item
0018 */
0019 Item {
0020 id: item
0021
0022 /**
0023 * type:int
0024 * Integer to display on the domino
0025 */
0026 property int value
0027
0028 /**
0029 * type:string
0030 * String to specify representation of Domino
0031 */
0032 property string mode
0033
0034 /**
0035 * type:int
0036 * Highest number visible on domino.
0037 */
0038 property int valueMax
0039
0040 /**
0041 * type:color
0042 * color of the dots to display an integer.
0043 */
0044 property color color
0045
0046 /**
0047 * type:color
0048 * Border color of the dots to display an integer.
0049 */
0050 property color borderColor
0051
0052 /**
0053 * type:int
0054 * Border width of the dots to display an integer.
0055 */
0056 property int borderWidth
0057
0058 /**
0059 * type:int
0060 * Radius of the dots to display an integer.
0061 */
0062 property int radius
0063
0064 /**
0065 * type:boolean
0066 * Set false to disable mouse/touch inputs on domino.
0067 */
0068 property bool isClickable: true // Default value
0069
0070 /**
0071 * type:GCAudio
0072 * To play sound and audio effects.
0073 */
0074 property GCSfx audioEffects
0075
0076 readonly property var romans: ["", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"]
0077
0078 // Source of the images should be in the same format as below with the number associated and svg format
0079 property string source: "qrc:/gcompris/src/activities/memory-enumerate/resource/butterfly.svg"
0080
0081 /**
0082 * type:var
0083 * the butterflies model for the image mode
0084 */
0085 readonly property var butterfliesModel: [
0086 [
0087 [{ "itemX": 0, "itemY": 0, "itemSize": 0, "itemRotation": 0, "itemSource": source}], ''
0088 ],
0089 [
0090 [{ "itemX": 0.3, "itemY": 0.45, "itemSize": 0.3, "itemRotation": 30, "itemSource": source}], ''
0091 ],
0092 [
0093 [{ "itemX": 0.25, "itemY": 0.1, "itemSize": 0.3, "itemRotation": 50, "itemSource": source},
0094 { "itemX": 0.4, "itemY": 0.6, "itemSize": 0.3, "itemRotation": -50, "itemSource": source}], ''
0095 ],
0096 [
0097 [{ "itemX": 0.1, "itemY": 0.05, "itemSize": 0.3, "itemRotation": -10, "itemSource": source},
0098 { "itemX": 0.6, "itemY": 0.35, "itemSize": 0.3, "itemRotation": -25, "itemSource": source},
0099 { "itemX": 0.2, "itemY": 0.55, "itemSize": 0.3, "itemRotation": 30, "itemSource": source}], ''
0100 ],
0101 [
0102 [{ "itemX": 0.5, "itemY": 0.05, "itemSize": 0.3, "itemRotation": -40, "itemSource": source},
0103 { "itemX": 0.1, "itemY": 0.3, "itemSize": 0.3, "itemRotation": 45, "itemSource": source},
0104 { "itemX": 0.6, "itemY": 0.5, "itemSize": 0.3, "itemRotation": -15, "itemSource": source},
0105 { "itemX": 0.25, "itemY": 0.65, "itemSize": 0.3, "itemRotation": -30, "itemSource": source}], ''
0106 ],
0107 [
0108 [{ "itemX": 0.55, "itemY": 0.05, "itemSize": 0.3, "itemRotation": -15, "itemSource": source},
0109 { "itemX": 0.1, "itemY": 0.15, "itemSize": 0.3, "itemRotation": -150, "itemSource": source},
0110 { "itemX": 0.5, "itemY": 0.35, "itemSize": 0.3, "itemRotation": 45, "itemSource": source},
0111 { "itemX": 0.1, "itemY": 0.55, "itemSize": 0.3, "itemRotation": -45, "itemSource": source},
0112 { "itemX": 0.6, "itemY": 0.75, "itemSize": 0.3, "itemRotation": -10, "itemSource": source}], ''
0113 ],
0114 [
0115 [{ "itemX": 0.1, "itemY": 0.05, "itemSize": 0.3, "itemRotation": -75, "itemSource": source},
0116 { "itemX": 0.6, "itemY": 0.05, "itemSize": 0.3, "itemRotation": 15, "itemSource": source},
0117 { "itemX": 0.25, "itemY": 0.35, "itemSize": 0.3, "itemRotation": -10, "itemSource": source},
0118 { "itemX": 0.65, "itemY": 0.4, "itemSize": 0.3, "itemRotation": 10, "itemSource": source},
0119 { "itemX": 0.1, "itemY": 0.65, "itemSize": 0.3, "itemRotation": 45, "itemSource": source},
0120 { "itemX": 0.6, "itemY": 0.7, "itemSize": 0.3, "itemRotation": -45, "itemSource": source}], ''
0121 ],
0122 [
0123 [{ "itemX": 0.1, "itemY": 0.02, "itemSize": 0.3, "itemRotation": 60, "itemSource": source},
0124 { "itemX": 0.6, "itemY": 0.05, "itemSize": 0.3, "itemRotation": -10, "itemSource": source},
0125 { "itemX": 0.25, "itemY": 0.25, "itemSize": 0.3, "itemRotation": -165, "itemSource": source},
0126 { "itemX": 0.65, "itemY": 0.3, "itemSize": 0.3, "itemRotation": -135, "itemSource": source},
0127 { "itemX": 0.1, "itemY": 0.5, "itemSize": 0.3, "itemRotation": 75, "itemSource": source},
0128 { "itemX": 0.65, "itemY": 0.6, "itemSize": 0.3, "itemRotation": 10, "itemSource": source},
0129 { "itemX": 0.3, "itemY": 0.75, "itemSize": 0.3, "itemRotation": -10, "itemSource": source}
0130 ], ''
0131 ],
0132 [
0133 [{ "itemX": 0.05, "itemY": 0.02, "itemSize": 0.3, "itemRotation": -25, "itemSource": source},
0134 { "itemX": 0.65, "itemY": 0.03, "itemSize": 0.3, "itemRotation": -10, "itemSource": source},
0135 { "itemX": 0.35, "itemY": 0.15, "itemSize": 0.3, "itemRotation": 5, "itemSource": source},
0136 { "itemX": 0.05, "itemY": 0.3, "itemSize": 0.3, "itemRotation": 15, "itemSource": source},
0137 { "itemX": 0.65, "itemY": 0.35, "itemSize": 0.3, "itemRotation": 170, "itemSource": source},
0138 { "itemX": 0.15, "itemY": 0.55, "itemSize": 0.3, "itemRotation": 50, "itemSource": source},
0139 { "itemX": 0.65, "itemY": 0.65, "itemSize": 0.3, "itemRotation": -10, "itemSource": source},
0140 { "itemX": 0.35, "itemY": 0.8, "itemSize": 0.3, "itemRotation": 5, "itemSource": source}], ''
0141 ],
0142 [
0143 [{ "itemX": 0.06, "itemY": 0.01, "itemSize": 0.3, "itemRotation": -10, "itemSource": source},
0144 { "itemX": 0.65, "itemY": 0.02, "itemSize": 0.3, "itemRotation": -40, "itemSource": source},
0145 { "itemX": 0.35, "itemY": 0.18, "itemSize": 0.3, "itemRotation": 10, "itemSource": source},
0146 { "itemX": 0.05, "itemY": 0.27, "itemSize": 0.3, "itemRotation": 170, "itemSource": source},
0147 { "itemX": 0.65, "itemY": 0.35, "itemSize": 0.3, "itemRotation": 20, "itemSource": source},
0148 { "itemX": 0.32, "itemY": 0.45, "itemSize": 0.3, "itemRotation": -40, "itemSource": source},
0149 { "itemX": 0.05, "itemY": 0.6, "itemSize": 0.3, "itemRotation": 5, "itemSource": source},
0150 { "itemX": 0.65, "itemY": 0.65, "itemSize": 0.3, "itemRotation": 175, "itemSource": source},
0151 { "itemX": 0.35, "itemY": 0.8, "itemSize": 0.3, "itemRotation": -10, "itemSource": source}], ''
0152 ]
0153 ]
0154
0155 GCText {
0156 id: numberText
0157 visible: (item.mode == "number" || item.mode == "roman")
0158 fontSize: ((item.mode == "number") ? 30 : (item.value == 8) ? 20 : (item.value == 7 || item.value == 3) ? 25 : 30)
0159 anchors.horizontalCenter: item.horizontalCenter
0160 anchors.verticalCenter: item.verticalCenter
0161 color: item.color
0162 anchors.margins: ApplicationInfo.ratio * 5
0163 text: (mode == "number") ? item.value : romans[item.value]
0164 }
0165
0166 Item {
0167 id: contentImage
0168 anchors.fill: parent
0169 visible: (item.mode == "image")
0170 Repeater {
0171 model: butterfliesModel[item.value][0]
0172 Image {
0173 source: modelData.itemSource
0174 x: contentImage.width * modelData.itemX
0175 y: contentImage.height * modelData.itemY
0176 width: contentImage.width * modelData.itemSize
0177 height: width
0178 sourceSize.width: width
0179 rotation: modelData.itemRotation
0180 }
0181 }
0182 }
0183
0184 function isVisible(index) {
0185 var value = item.value
0186 var visible = false
0187 switch(index) {
0188 case 0:
0189 if(value >= 2) visible = true
0190 break
0191 case 1:
0192 if(value >= 6) visible = true
0193 break
0194 case 2:
0195 if(value >= 4) visible = true
0196 break
0197 case 3:
0198 if(value >= 8) visible = true
0199 break
0200 case 4:
0201 if(value === 1 || value === 3 || value === 5 ||
0202 value === 7 || value === 9) visible = true
0203 break
0204 case 5:
0205 if(value >= 8) visible = true
0206 break
0207 case 6:
0208 if(value >= 4) visible = true
0209 break
0210 case 7:
0211 if(value >= 6) visible = true
0212 break
0213 case 8:
0214 if(value >= 2) visible = true
0215 break
0216 }
0217 return visible
0218 }
0219
0220 Grid {
0221 columns: 3
0222 spacing: 3
0223 visible: (item.mode == "dot")
0224 anchors.horizontalCenter: item.horizontalCenter
0225 anchors.verticalCenter: item.verticalCenter
0226 horizontalItemAlignment: Grid.AlignHCenter
0227 verticalItemAlignment: Grid.AlignVCenter
0228
0229 Repeater {
0230 model: 9
0231 Rectangle {
0232 width: radius
0233 height: radius
0234 border.width: item.borderWidth
0235 color: item.color
0236 border.color: item.borderColor
0237 radius: item.radius
0238 opacity: isVisible(index)
0239
0240 Behavior on opacity { PropertyAnimation { duration: 200 } }
0241 }
0242 }
0243 }
0244
0245 // Increase the displayed integer value by one.
0246 function up() {
0247 audioEffects.play('qrc:/gcompris/src/core/resource/sounds/scroll.wav')
0248 if(item.value == item.valueMax)
0249 item.value = 0
0250 else
0251 item.value++
0252 }
0253
0254 // Decrease the displayed integer by one.
0255 function down() {
0256 audioEffects.play('qrc:/gcompris/src/core/resource/sounds/scroll.wav')
0257 if(item.value == 0)
0258 item.value = item.valueMax
0259 else
0260 item.value--
0261 }
0262
0263 MouseArea {
0264 enabled: !ApplicationInfo.isMobile && item.isClickable
0265 anchors.fill: parent
0266 acceptedButtons: Qt.LeftButton | Qt.RightButton
0267 onClicked: {
0268 if (mouse.button == Qt.LeftButton)
0269 up()
0270 else
0271 down()
0272 }
0273 }
0274
0275 MultiPointTouchArea {
0276 enabled: ApplicationInfo.isMobile && item.isClickable
0277 anchors.fill: parent
0278 maximumTouchPoints: 1
0279 onPressed: {
0280 up()
0281 }
0282 }
0283
0284 }