diff --git a/src/activities/computer/Computer.qml b/src/activities/computer/Computer.qml index 0e86b4304..a25d33d58 100644 --- a/src/activities/computer/Computer.qml +++ b/src/activities/computer/Computer.qml @@ -1,388 +1,387 @@ /* GCompris - computer.qml * * Copyright (C) 2015 Sagar Chand Agarwal * * Authors: * * Sagar Chand Agarwal (Qt Quick) * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, see . */ import QtQuick 2.1 import GCompris 1.0 import "../../core" import "computer.js" as Activity ActivityBase { id: activity onStart: focus = true onStop: {} pageComponent: Image { id: background anchors.fill: parent source: Activity.url + "images/background.svg" sourceSize.width: parent.width sourceSize.height: parent.height signal start signal stop Component.onCompleted: { activity.start.connect(start) activity.stop.connect(stop) } // Add here the QML items you need to access in javascript QtObject { id: items property Item main: activity.main property alias background: background property alias bar: bar property alias bonus: bonus property alias img: img property alias name: name property alias info: intro_text property alias answers: answers } // show of current part of topic Rectangle { id: intro_textbg x: intro_text.x - 4 y: intro_text.y - 4 width: intro_text.width + 4 height: intro_text.height + 4 color: "#d8ffffff" border.color: "#2a2a2a" border.width: 2 radius: 8 } GCText { id: intro_text font.weight: Font.DemiBold horizontalAlignment: Text.AlignHCenter anchors { top: parent.top topMargin: 10 * ApplicationInfo.ratio right: parent.right rightMargin: 5 * ApplicationInfo.ratio left: parent.left leftMargin: 5 * ApplicationInfo.ratio } width: parent.width wrapMode: Text.WordWrap fontSize: smallSize * 0.5 text: qsTr("Click on the box below.") } // starts with openBox Image { id: closebox source: Activity.url + "images/closebox.svg" sourceSize.width: parent.width*0.15 anchors { centerIn: parent } visible: true NumberAnimation on scale{ id: box_scale running: true loops: Animation.Infinite from: 1 to: 1.5 duration: 2000 } MouseArea { anchors.fill: closebox id: closebox_area onClicked: { openbox.visible = true box_scale.running = false closebox.visible= false show.start() } } } Image { id: openbox source: Activity.url + "images/openbox.svg" sourceSize.width: parent.width*0.15 anchors { centerIn: parent } visible: false } // timer activated on click on close box Timer { id: show interval: 500 repeat: false running: false onTriggered: { intro_text.text = qsTr("Parts of the Computer") holder.visible = true openbox.visible = false show.stop() previous.visible = true next.visible = true intro_text.visible = true Activity.next() holder.visible = true } } // Images are shown here Rectangle { id: holder visible: false width: Math.max(img.width * 1.1, img.height * 1.1) height: name_text.y + name_text.height anchors { horizontalCenter: parent.horizontalCenter top: intro_text.bottom } color: "black" radius: 10 border.width: 2 border.color: "black" gradient: Gradient { GradientStop { position: 0.0; color: "#80FFFFFF" } GradientStop { position: 0.9; color: "#80EEEEEE" } GradientStop { position: 1.0; color: "#80AAAAAA" } } Item { id: spacer height: 20 } Image { id: img anchors.horizontalCenter: holder.horizontalCenter anchors.top: spacer.bottom width: Math.min((background.width - 120 * ApplicationInfo.ratio) * 0.7, (background.height - 100 * ApplicationInfo.ratio) * 0.7) height: width } Rectangle { id: name_text width: holder.width height: name.height * 1.5 anchors.horizontalCenter: holder.horizontalCenter anchors.margins: 20 anchors.top: img.bottom radius: 10 border.width: 2 border.color: "black" gradient: Gradient { GradientStop { position: 0.0; color: "#000" } GradientStop { position: 0.9; color: "#666" } GradientStop { position: 1.0; color: "#AAA" } } } GCText { id: name anchors { horizontalCenter: name_text.horizontalCenter verticalCenter: name_text.verticalCenter } style: Text.Outline; styleColor: "black" color: "white" fontSize: smallSize - visible: false + visible: true } } // Load the previous part Image { visible: false id: previous anchors.right: holder.left anchors.rightMargin: 20 * ApplicationInfo.ratio anchors.verticalCenter: holder.verticalCenter source: "qrc:/gcompris/src/core/resource/bar_previous.svg" sourceSize.height: 80 * ApplicationInfo.ratio Behavior on scale { PropertyAnimation { duration: 100} } MouseArea { anchors.fill: parent hoverEnabled: true onEntered: previous.scale = 1.1 onExited: previous.scale = 1 onClicked: Activity.previous() } } // Load the next part Keys.onRightPressed: Activity.next() Keys.onLeftPressed: Activity.previous() Image { visible: false id: next anchors.left: holder.right anchors.leftMargin: 20 * ApplicationInfo.ratio anchors.verticalCenter: holder.verticalCenter source: "qrc:/gcompris/src/core/resource/bar_next.svg" sourceSize.height: 80 * ApplicationInfo.ratio Behavior on scale { PropertyAnimation { duration: 100} } MouseArea { anchors.fill: parent hoverEnabled: true onEntered: next.scale = 1.1 onExited: next.scale = 1 onClicked: Activity.next() } } //Proceed to nextpart Rectangle { id: proceed anchors { right: parent.right bottom: parent.bottom bottomMargin: parent.height * 0.05 rightMargin: parent.width * 0.05 } border.color: "black" visible: true radius: 4 smooth: true border.width: 0 width: proceed_text.width * 1.1 * ApplicationInfo.ratio height: proceed_text.height * 1.1 * ApplicationInfo.ratio color: "#AAFFFFFF" GCText { id: proceed_text anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter font.bold: true fontSize: smallSize text: qsTr("Visual
Demo") Behavior on scale { PropertyAnimation { duration: 100} } } MouseArea { anchors.fill: proceed hoverEnabled: true onEntered: proceed_text.scale = 1.1 onExited: proceed_text.scale = 1 onClicked: { if(proceed_text.text == qsTr("Visual
Demo")) { reset() proceed_text.text = qsTr("Quiz") page.source = Activity.url + "levels/Level1.qml" } else if(proceed_text.text == qsTr("Quiz")) { reset() Activity.nextQuestion() holder.visible = true proceed.visible = false } } } } function reset () { openbox.visible = false closebox.visible = false holder.visible = false next.visible = false previous.visible = false intro_textbg.visible = false intro_text.visible = false page.source = "" } // loaders for sublevels Loader { id: page anchors.fill: parent source: "" } //quiz Column { id: buttonHolder property bool buttonHolderMouseArea : true spacing: 10 * ApplicationInfo.ratio x: holder.x - width - 10 * ApplicationInfo.ratio y: 30 add: Transition { NumberAnimation { properties: "y"; from: 10; duration: 500 } } Repeater { id: answers AnswerButton { width: 120 * ApplicationInfo.ratio height: 80 * ApplicationInfo.ratio textLabel: modelData onPressed: { if(modelData === Activity.getCorrectAnswer()) Activity.showAnswer() } } } } onStart: { Activity.start(items) } onStop: { Activity.stop() } DialogHelp { id: dialogHelp onClose: home() } Bar { id: bar content: BarEnumContent { value: help | home | level } onHelpClicked: { displayDialog(dialogHelp) } onPreviousLevelClicked: Activity.previousLevel() onNextLevelClicked: Activity.nextLevel() onHomeClicked: activity.home() } Bonus { id: bonus } } - } diff --git a/src/activities/computer/computer.js b/src/activities/computer/computer.js index 350eb9b6b..036fee0cd 100644 --- a/src/activities/computer/computer.js +++ b/src/activities/computer/computer.js @@ -1,214 +1,214 @@ /* GCompris - computer.js * * Copyright (C) 2015 Sagar Chand Agarwal * * Authors: * * Sagar Chand Agarwal (Qt Quick) * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, see . */ .pragma library .import QtQuick 2.0 as Quick .import GCompris 1.0 as GCompris //for Applicationdataset .import "qrc:/gcompris/src/core/core.js" as Core var url = "qrc:/gcompris/src/activities/computer/resource/" // number of levels var dataset = [ [ { desc : qsTr("A monitor or a display is an electronic visual display for computers. The monitor comprises the display device, circuitry and an enclosure."), name : "Monitor", id : "monitor", - img : url + "images/monitor.svg" + img : url + "images/monitor_off.svg" }, { desc : qsTr(" central processing unit (CPU) is the electronic circuitry within a computer that carries out the instructions of a computer program by performing the basic arithmetic, logical, control and input/output (I/O) operations specified by the instructions. "), name : "Central Processing Unit", id :"cpu", img : url + "images/cpu.svg" }, { desc : qsTr(" the keyboard is used as a text entry interface to type text and numbers into a word processor, text editor or other programs.A keyboard is also used to give commands to the operating system of a computer"), name : "Keyboard", id :"keyboard", img : url + "images/keyboard.svg" }, { desc : qsTr("In computing, a mouse is a pointing device that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows for fine control of a graphical user interface."), name : "Mouse", id :"mouse", img : url + "images/mouse.svg" } ], [ { desc : qsTr(""), name : "", id : "", img : url + "images/" }, { desc : qsTr(""), name : "", id : "", img : url + "images/" }, { desc : qsTr(""), name : "", id : "", img : url + "images/" }, { desc : qsTr(""), name : "", id : "", img : url + "images/" } ], [ { desc : qsTr(""), name : "", id : "", img : url + "images/" }, { desc : qsTr(""), name : "", id : "", img : url + "images/" }, { desc : qsTr(""), name : "", id : "", img : url + "images/" }, { desc : qsTr(""), name : "", id : "", img : url + "images/" } ] ] var currentLevel = 0 var numberOfLevel = 0 var items var count = 0 var level = 0 var quiz var proceed = false var index = 0 function start(items_,quiz_) { items = items_ currentLevel = 0 initLevel() count = 0 level = 0 quiz = quiz_ proceed = false index = 0 } function stop() { } function initLevel() { items.bar.level = currentLevel + 1 } function previous() { display() if(count == 0) count = dataset[level].length - 1 else count-- } function next() { display() if( count == dataset[level].length - 1) { count = 0 } else { count++ } } function nextLevel() { if(numberOfLevel <= ++currentLevel ) { proceed = true currentLevel = 0 } initLevel(); } function previousLevel() { if(--currentLevel < 0) { currentLevel = numberOfLevel - 1 } initLevel(); } function display() { items.img.source = dataset[level][count].img items.name.text = dataset[level][count].name items.info.text = dataset[level][count].desc } function nextQuestion() { items.answers.model = [] var answerModel = new Array() for (var i = 0 ;i < dataset[level].length ; ++i) { answerModel.push(dataset[level][i].name) } items.name.text = dataset[level][index].name items.img.source = dataset[level][index].img items.answers.model = answerModel } function getCorrectAnswer() { return dataset[level][index].name } function showAnswer() { console.log(dataset[level][index].name) items.name.visible = true win() } function win () { items.bonus.good("flower") items.name.visible = false if(index != dataset[level].length) { index++ nextQuestion() } else { nextLevel() } } diff --git a/src/activities/computer/resource/images/background.svg b/src/activities/computer/resource/images/background.svg index 141fbe20d..c4bc04237 100755 --- a/src/activities/computer/resource/images/background.svg +++ b/src/activities/computer/resource/images/background.svg @@ -1,1003 +1,600 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1 2 3 4 5 6 7 8 9 10 11 12 image/svg+xml Openclipart diff --git a/src/activities/computer/resource/images/monitor.svg b/src/activities/computer/resource/images/monitor.svg index e7783f0e5..88a1ca8d4 100644 --- a/src/activities/computer/resource/images/monitor.svg +++ b/src/activities/computer/resource/images/monitor.svg @@ -1,226 +1,226 @@ image/svg+xml Openclipart diff --git a/src/activities/computer/resource/levels/Level1.qml b/src/activities/computer/resource/levels/Level1.qml index 5fa3e5053..16ab04372 100644 --- a/src/activities/computer/resource/levels/Level1.qml +++ b/src/activities/computer/resource/levels/Level1.qml @@ -1,172 +1,316 @@ /* GCompris - level1.qml * * Copyright (C) 2015 Sagar Chand Agarwal * * Authors: * Sagar Chand Agarwal (Qt Quick) * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, see . */ import QtQuick 2.1 import GCompris 1.0 import "../../computer.js" as Activity import "../../../../core" Item { + property bool power: false + + Rectangle { + id: help_textbg + x: help_text.x - 4 + y: help_text.y - 4 + width: help_text.width + 4 + height: help_text.height + 4 + color: "#d8ffffff" + border.color: "#2a2a2a" + border.width: 2 + radius: 8 + } + + GCText { + id: help_text + font.weight: Font.DemiBold + horizontalAlignment: Text.AlignHCenter + anchors { + top: parent.top + topMargin: 10 * ApplicationInfo.ratio + right: parent.right + rightMargin: 5 * ApplicationInfo.ratio + left: parent.left + leftMargin: 5 * ApplicationInfo.ratio + } + width: parent.width + wrapMode: Text.WordWrap + fontSize: smallSize * 0.5 + text: qsTr("Click on the power switch to begin") + } + + Image { id: switchboard - sourceSize.width: parent.width*0.15 + sourceSize.width: parent.width*0.1 source: Activity.url + "images/switchoff.svg" anchors { - bottom: table.top - right: table.right - rightMargin: parent.width*0.2 + top: help_textbg.bottom + left: parent.left + leftMargin: parent.width*0.2 bottomMargin: parent.height*0.3 } MouseArea { anchors.fill: switchboard - onClicked: switchboard.source = switchboard.source == Activity.url + "images/switchoff.svg" ? Activity.url + "images/switchon.svg" : Activity.url + "images/switchoff.svg" + onClicked: { + if( switchboard.source == Activity.url + "images/switchoff.svg" ) + { + power = true + switchboard.source = Activity.url + "images/switchon.svg" + cpu_area.visible = true + help_text.text = qsTr("Click on the Central Processing unit to start the system ") + } + else + { + power = false + switchboard.source = Activity.url + "images/switchoff.svg" + poweroff() + } + } } } + + Image { id: table source: Activity.url + "images/table.svg" height: parent.height*0.40 width: parent.width*0.70 anchors { left: parent.left leftMargin: parent.width*0.1*ApplicationInfo.ratio bottom: parent.bottom bottomMargin: 0.1*parent.height*ApplicationInfo.ratio } - - Image { - id:monitor - source: Activity.url + "images/monitor.svg" + id: monitor + source: Activity.url + "images/monitor_off.svg" sourceSize.height: parent.height/2 sourceSize.width :parent.width/2 anchors { bottom: table.bottom left: table.left - leftMargin: table.width *0.2 + leftMargin: table.width*0.2 bottomMargin: table.height*0.9 + } + + Image { + id: cursor + source: Activity.url + "images/cursor.svg" + height: monitor.height*0.2 + width: monitor.width*0.2 + visible: false + } + + Image { + id: wallpaper + opacity: 0 + source: Activity.url + "images/GCompris.png" + sourceSize.height: parent.height/2 + sourceSize.width: parent.width/2 + anchors { + centerIn: parent + } + NumberAnimation on opacity { + id: load + running: false + from: 0 + to: 1 + duration: 10000 + onRunningChanged: { + if(!load.running) { + monitor.source= Activity.url + "images/monitor.svg" + wallpaper.visible = false + } + } + } + MouseArea { + onClicked: { + if(mouse_area.visible == true && monitor_area.visible == true && cursor.visible == true) + { + wallpaper.opacity = 0 + } + } + } } Flickable { id: flick + visible: false width:monitor.width*0.65 height:monitor.height*0.7 contentWidth: edit.paintedWidth contentHeight: edit.paintedHeight clip: true anchors { left:monitor.left leftMargin:monitor.width*0.1 top:monitor.top topMargin:monitor.height*0.1 } function ensureVisible(r) { if (contentX >= r.x) contentX = r.x; else if (contentX+width <= r.x+r.width) contentX = r.x+r.width-width; if (contentY >= r.y) contentY = r.y; else if (contentY+height <= r.y+r.height) contentY = r.y+r.height-height; } TextEdit { id: edit - color:"red" + color:"black" width: flick.width height: flick.height focus: true wrapMode: TextEdit.Wrap onCursorRectangleChanged: flick.ensureVisible(cursorRectangle) } } + MouseArea{ + id: monitor_area + visible: false + anchors.fill: monitor + onEntered: + { + cursor.visible=true + } + onPressed:{ + cursor.x= mouseX + cursor.y= mouseY + } + onExited: {cursor.visible=false} + } visible: true } Image { id:cpu source: Activity.url + "images/cpu.svg" sourceSize.height: parent.height*0.60 sourceSize.width :parent.width/2 anchors { bottom: table.bottom left: monitor.right leftMargin: table.width *0.1 bottomMargin: table.height*0.8 } visible: true Image { id: cpu_switch source: Activity.url + "images/cpuoff.svg" height: parent.height*0.2 width: cpu_switch.height MouseArea { + id: cpu_area + visible: false anchors.fill: cpu_switch onClicked: { - onClicked: cpu_switch.source = cpu_switch.source == Activity.url + "images/cpuoff.svg" ? Activity.url + "images/cpuon.svg" : Activity.url + "images/cpuoff.svg" + if( cpu_switch.source == Activity.url + "images/cpuoff.svg") + { + cpu_switch.source = Activity.url + "images/cpuon.svg" + help_text.text = qsTr("Great, The monitor is switched on.") + load.running = true + } + else + { + cpu_reset() + cpu_switch.source = Activity.url + "images/cpuoff.svg" + } } } + anchors { bottom: parent.bottom right: parent.right bottomMargin: parent.height * 0.1 leftMargin: parent.widhth * 0.1 } } } Image { id:keyboard source: Activity.url + "images/keyboard.svg" sourceSize.height: parent.height/4 sourceSize.width : parent.width/3 anchors { top: monitor.bottom left: table.left leftMargin: table.width *0.3 } visible: true + MouseArea { + id: keyboard_area + anchors.fill: keyboard + onClicked: { + flick.visible = true + } + } } Image { - id:mouse + id: mouse source: Activity.url + "images/mouse.svg" sourceSize.height: parent.height/3 sourceSize.width :parent.width/3 anchors { bottom: table.bottom left: keyboard.right leftMargin: table.width *0.1 bottomMargin :table.height*0.6 } + MouseArea { + id: mouse_area + anchors.fill: mouse + onClicked: { + cursor.visible = true + monitor_area.visible = true + wallpaper.opacity = 1 + } + } visible: true } } + + function poweroff() { + cpu_switch.source = Activity.url + "images/cpuoff.svg" + cpu_reset() + } + + function cpu_reset() { + wallpaper.visible = false + monitor.source = Activity.url + "images/monitor_off.svg" + flick.visible = false + mouse_area.visible = false + keyboard_area.visible = false + } }