Doc: Update Grue Sensor example

Fix a number of issues with the example:
    - Add \omit to generated doc sections, we don't want
      qdoc to process these (not part of Qt docs)
    - Combine the 5 separate examples into a single \example
      and discuss each subproject in a subsection
    - Add example image to doc
    - Fix deployment/build target directories and import paths
    - Define a 'reading' property for the sensor to make it work
      on QtSensors 5.1
    - Fix the Grue QML application to avoid flicker from frequent
      updates.

Task-number: QTBUG-32881
Change-Id: I2785faead1baaf5b1ae9d05df3398e018e945418
Reviewed-by: Jerome Pasion <jerome.pasion@digia.com>
Reviewed-by: Lorn Potter <lorn.potter@jollamobile.com>

1 files changed, 39 insertions, 15 deletions

diff --git a/examples/sensors/grue/grue.qml b/examples/sensors/grue/grue.qml
index 6598016..acafdb6 100644
--- a/examples/sensors/grue/grue.qml
+++ b/examples/sensors/grue/grue.qml
@@ -43,33 +43,56 @@ import QtSensors 5.0
 import Grue 1.0
 
 Rectangle {
+    id: root
     width: 320
     height: 480
     color: "black"
 
+    property int percent: 0
+    property string text: ""
+    property real grueOpacity: 0.0
+
+    function updateStatus(newPercent, newOpacity, newText) {
+        if (root.percent === newPercent)
+            return;
+
+        // Delay updating the visual status to prevent flicker
+        timer.interval = (newPercent < root.percent) ? 500 : 0;
+
+        root.percent = newPercent;
+        root.text = newText;
+        root.grueOpacity = newOpacity;
+
+        timer.start()
+    }
+
+    Timer {
+        id: timer
+        running: false
+        repeat: false
+        onTriggered: {
+            text.text = root.text
+            grueimg.opacity = root.grueOpacity
+        }
+    }
+
     GrueSensor {
         id: sensor
         active: true
         onReadingChanged: {
             var percent = reading.chanceOfBeingEaten;
-            var thetext = "";
-            var theopacity = 0;
             if (percent === 0) {
-                thetext = "It is light. You are safe from Grues.";
+                updateStatus(percent, 0.0, "It is light.<br>You are safe from Grues.");
             }
             else if (percent === 100) {
-                thetext = "You have been eaten by a Grue!";
+                updateStatus(percent, 1.0, "You have been eaten by a Grue!");
                 sensor.active = false;
-                theopacity = 1;
             }
             else if (percent > 0) {
-                thetext = "It is dark. You are likely to be eaten by a Grue. "
-                        + "Your chance of being eaten by a Grue: "+percent+" percent.";
-                theopacity = 0.05 + (percent * 0.001);
+                updateStatus(percent, 0.05 + (percent * 0.001),
+                             "It is dark.<br>You are " + percent +" % " +
+                             "likely to be eaten by a Grue.");
             }
-            text.font.pixelSize = 30;
-            text.text = "<p>" + thetext + "</p>";
-            grueimg.opacity = theopacity;
         }
     }
 
@@ -79,10 +102,10 @@ Rectangle {
         anchors.topMargin: 0
         anchors.left: parent.left
         anchors.right: parent.right
-        text: "I can't tell if you're going to be eaten by a Grue or not. You're on your own!"
         wrapMode: Text.WordWrap
-        font.pixelSize: 50
-        color: "white"
+        text: "I can't tell if you're going to be eaten by a Grue or not. You're on your own!"
+        font.pixelSize: 30
+        color: "lightgray"
     }
 
     Image {
@@ -90,6 +113,7 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.horizontalCenter: parent.horizontalCenter
         source: "grue.png"
-        opacity: 0
+        opacity: 0.0
+        Behavior on opacity { PropertyAnimation { duration: 250 } }
     }
 }