Temp hacks to do a video showcase

Home.qml

@@ -2,17 +2,42 @@ import QtQuick 2.0
 import QtQuick.Controls 1.1
 import humanbody 1.0
 
-Item {
+Image {
     id: root
     signal selected(var selectedComponent)
+    source: "file:///tmp/desktop-grub.png"
+    fillMode: Image.PreserveAspectFit
+
+    Text {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: "#ffffff"
+        font.family: "Purisa"
+        font.pointSize: 40
+        text: "Human Atlas"
+    }
 
     ListView {
-        anchors { fill: parent; margins: 10 }
+        anchors { top: parent.top; margins: 100; horizontalCenter: parent.horizontalCenter }
+        width: 400; height: 400
+        spacing: 10
 
         model: OrganSystems {}
-        delegate: Button {
-            text: nameRole
-            onClicked: root.selected(componentNameRole)
+        delegate: Rectangle {
+            width: 400; height: 100
+            color: mouse.containsMouse ? "red" : "brown"
+            radius: 20
+            Text {
+                anchors.centerIn: parent
+                text: nameRole
+                font.pointSize: 20
+                color: "white"
+            }
+
+            MouseArea {
+                id: mouse
+                anchors.fill: parent
+                onClicked: root.selected(componentNameRole)
+            }
         }
     }
 }

Mode.qml

@@ -2,21 +2,58 @@ import QtQuick 2.0
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
 
-Item {
+Image {
     id: root
     signal exploreSelected
     signal quizSelected
+    source: "file:///tmp/desktop-grub.png"
+    fillMode: Image.PreserveAspectFit
+
+    Text {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: "#ffffff"
+        font.family: "Purisa"
+        font.pointSize: 40
+        text: "Human Atlas"
+    }
 
     ColumnLayout {
-        anchors.centerIn: parent
+        anchors { horizontalCenter: parent.horizontalCenter; margins: 100; top: parent.top }
+
+        Rectangle {
+            width: 400; height: 100
+            color: mouse1.containsMouse ? "red" : "brown"
+            radius: 20
+            Text {
+                anchors.centerIn: parent
+                text: "Explore"
+                font.pointSize: 24
+                color: "white"
+            }
 
-        Button {
-            text: "Explore"
-            onClicked: root.exploreSelected()
+            MouseArea {
+                id: mouse1
+                anchors.fill: parent
+                onClicked: root.exploreSelected()
+            }
         }
-        Button {
-            text: "Quiz"
-            onClicked: root.quizSelected()
+
+        Rectangle {
+            width: 400; height: 100
+            color: mouse2.containsMouse ? "red" : "brown"
+            radius: 20
+            Text {
+                anchors.centerIn: parent
+                text: "Quiz"
+                font.pointSize: 24
+                color: "white"
+            }
+
+            MouseArea {
+                id: mouse2
+                anchors.fill: parent
+                onClicked: root.quizSelected()
+            }
         }
     }
 }

components/ModeSelector.qml

 import QtQuick 2.0
 
-Rectangle {
+Item {
     id: root
     anchors.fill: parent
     clip: true
@@ -10,7 +10,29 @@ Rectangle {
     property variant quiz
 
     Loader {
+        focus: true
         anchors.fill: parent
         sourceComponent: mode == "explore" ? root.explore : root.quiz
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.margins: 50
+            width: 300; height: 50
+            color: mouse1.containsMouse ? "red" : "brown"
+            radius: 20
+            Text {
+                anchors.centerIn: parent
+                text: "Switch to " + (mode == "explore" ? "Quiz" : "Explore")
+                font.pointSize: 24
+                color: "white"
+            }
+
+            MouseArea {
+                id: mouse1
+                anchors.fill: parent
+                onClicked: mode = (mode == "explore" ? "quiz" : "explore")
+            }
+        }
     }
 }

main.qml

@@ -6,8 +6,8 @@ import humanbody 1.0 as HumanBody
 ApplicationWindow {
     id: app
     visible: true
-    width: 640
-    height: 480
+    width: 1024
+    height: 760
     title: qsTr("Balaswecha")
 
     property string currentOrganism: "humanbody"

organisms/humanbody/DigestiveSystem/Index.qml

@@ -4,7 +4,7 @@ import QtWebKit 3.0
 
 import components 1.0 as Components
 
-Rectangle {
+Item {
     id: root
     property alias mode: selector.mode
     property string organism: "humanbody"

organisms/humanbody/DigestiveSystem/Organs.qml

@@ -12,8 +12,8 @@ Item {
     Components.OrganImage {
         id: liverImage
         organ: "liver"
-        x: 50
-        y: 70
+        x: 250
+        y: 240
         z: 1
 
         onClicked: root.clicked(organ)
@@ -22,8 +22,8 @@ Item {
     Components.OrganImage {
         id: intestineImage
         organ: "intestine"
-        x: 120
-        y: 90
+        x: 250
+        y: 310
 
         onClicked: root.clicked(organ)
     }
@@ -31,8 +31,8 @@ Item {
     Components.OrganImage {
         id: stomachImage
         organ: "stomach"
-        x: 170
-        y: 20
+        x: 380
+        y: 150
 
         onClicked: root.clicked(organ)
     }

organisms/humanbody/DigestiveSystem/Quiz.qml

@@ -13,11 +13,10 @@ RowLayout {
 
     anchors.fill: parent
 
-    Rectangle {
+    Item {
         id: diagram
         property string currentOrgan
 
-        color: "lightsteelblue"
         Layout.fillWidth: true
         Layout.fillHeight: true
 
@@ -29,9 +28,13 @@ RowLayout {
 
         Text {
             id: questionText
+            color: "brown"
             anchors.right: parent.right
             anchors.top: parent.top
-            text: "Where is " + root.currentQuizOrgan
+            anchors.margins: 50
+            text: "Where is the " + root.currentQuizOrgan + " ?"
+            font.pointSize: 30
+            antialiasing: true
         }
 
         Text {
@@ -41,7 +44,10 @@ RowLayout {
             color: "blue"
             anchors.right: parent.right
             anchors.bottom: parent.bottom
+            anchors.margins: 50
             text: label + ": " + root.score
+            font.pointSize: 30
+            antialiasing: true
         }