Remote-Canvas: nicer UI fades

utils/fgqcanvas/fgcanvaselement.cpp

@@ -244,10 +244,10 @@ bool FGCanvasElement::onChildAdded(LocalProp *prop)
     } else if (nm == "visible") {
         return true;
     } else if (nm == "tf-rot-index") {
-        // ignored, this is noise from the Nasal SVG parswer
+        // ignored, this is noise from the Nasal SVG parser
         return true;
     } else if (nm.startsWith("center-offset-")) {
-        // ignored, this is noise from the Nasal SVG parswer
+        // ignored, this is noise from the Nasal SVG parser
         return true;
     } else if (nm == "center") {
         connect(prop, &LocalProp::valueChanged, this, &FGCanvasElement::onCenterChanged);

utils/fgqcanvas/qml/CanvasFrame.qml

@@ -5,6 +5,7 @@ Item {
     id: root
     property bool showDecorations: true
     property alias canvas: canvasDisplay.canvas
+    property bool showUi: true
 
     //clip: true;
 
@@ -44,6 +45,7 @@ Item {
         anchors.centerIn: parent
         width: parent.width
         height: parent.height
+        visible: showUi
 
         MouseArea {
             anchors.fill: parent

utils/fgqcanvas/qml/mainMenu.qml

@@ -2,26 +2,34 @@ import QtQuick 2.0
 import FlightGear 1.0 as FG
 
 Rectangle {
-    property bool __uiVisible: true
+    property bool uiVisible: true
     width: 1024
     height: 768
     color: "black"
 
+    property double __uiOpacity: uiVisible ? 1.0 : 0.0
+    property bool __uiVisible: true
+
+    Behavior on __uiOpacity {
+        SequentialAnimation {
+            ScriptAction { script: if (uiVisible) __uiVisible = true; }
+            NumberAnimation { duration: 250 }
+            ScriptAction { script: if (!uiVisible) __uiVisible = false; }
+        }
+    }
+
     Image {
-        opacity: visible ? 0.5 : 0.0
+        opacity: __uiOpacity * 0.5
         source: "qrc:///images/checkerboard"
         fillMode: Image.Tile
         anchors.fill: parent
         visible: __uiVisible
-        Behavior on opacity {
-            NumberAnimation { duration: 400 }
-        }
     }
 
     MouseArea {
         anchors.fill: parent
         onClicked: {
-            __uiVisible = !__uiVisible;
+            uiVisible = !uiVisible;
         }
     }
 
@@ -30,6 +38,7 @@ Rectangle {
         delegate: CanvasFrame {
             id: display
             canvas: modelData
+            showUi: __uiVisible
         }
     }
 
@@ -38,10 +47,7 @@ Rectangle {
         anchors.bottom: parent.bottom
         width: 400
         visible: __uiVisible
-        opacity: visible ? 1.0: 0.0
+        opacity: __uiOpacity
-        Behavior on opacity {
-            NumberAnimation { duration: 400 }
-        }
     }
 
     LoadSavePanel {
@@ -50,9 +56,6 @@ Rectangle {
         anchors.right: parent.right
         width: 400
         visible: __uiVisible
-        opacity: visible ? 1.0: 0.0
+        opacity: __uiOpacity
-        Behavior on opacity {
-            NumberAnimation { duration: 400 }
-        }
     }
 }