finished calibration-ui updates

interface/resources/qml/controls-uit/ImageMessageBox.qml

@@ -18,15 +18,47 @@ Item {
     anchors.fill: parent
     property alias source: image.source
     property alias imageWidth: image.width
-    proeprty alias imageHeight: image.height
+    property alias imageHeight: image.height
+
     Rectangle {
-        acnhors.fill: parent
+        anchors.fill: parent
         color: "black"
-        opacity: 0.5
+        opacity: 0.3
     }
 
     Image {
         id: image
+        anchors.centerIn: parent
+
+        HiFiGlyphs {
+            id: closeGlyphButton
+            text: hifi.glyphs.close
+            size: 25
+
+            anchors {
+                top: parent.top
+                topMargin: 15
+                right: parent.right
+                rightMargin: 15
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+
+                onEntered: {
+                    parent.text = hifi.glyphs.closeInverted;
+                }
+
+                onExited: {
+                    parent.text = hifi.glyphs.close;
+                }
+
+                onClicked: {
+                    imageBox.visible = false;
+                }
+            }
+        }
     }
 
 }

interface/resources/qml/hifi/tablet/ControllerSettings.qml

@@ -16,6 +16,7 @@ import "../../controls-uit" as HifiControls
 StackView {
     id: stack
     initialItem: inputConfiguration
+    property alias messageVisible: imageMessageBox.visible
     Rectangle {
         id: inputConfiguration
         anchors.fill: parent
@@ -26,6 +27,15 @@ StackView {
 
         property var pluginSettings: null
 
+        HifiControls.ImageMessageBox {
+            id: imageMessageBox
+            anchors.fill: parent
+            z: 2000
+            imageWidth: 442
+            imageHeight: 670
+            source: "../../../images/calibration-help.png"
+        }
+
         Rectangle {
             width: inputConfiguration.width
             height: 1
@@ -167,7 +177,7 @@ StackView {
                         loader.item.pluginName = box.currentText;
                     }
                 }
-                
+
                 if (loader.item.hasOwnProperty("displayInformation")) {
                     loader.item.displayConfiguration();
                 }
@@ -183,20 +193,20 @@ StackView {
             return InputConfiguration.activeInputPlugins();
         }
     }
-    
+
     function initialize() {
         changeSource();
     }
-    
+
     function changeSource() {
         loader.source = "";
         var source = "";
         if (box.currentText == "Vive") {
             source = InputConfiguration.configurationLayout("OpenVR");
-        } else { 
+        } else {
             source = InputConfiguration.configurationLayout(box.currentText);
         }
-        
+
         loader.source = source;
         if (source === "") {
             box.label = "(not configurable)";
@@ -204,14 +214,14 @@ StackView {
             box.label = "";
         }
     }
-    
+
     Timer {
         id: timer
         repeat: false
         interval: 300
         onTriggered: initialize()
     }
-    
+
     Component.onCompleted: {
         timer.start();
     }

interface/resources/qml/hifi/tablet/OpenVrConfiguration.qml

@@ -50,9 +50,12 @@ Rectangle {
         readonly property int apply: 1
         readonly property int applyAndCalibrate: 2
         readonly property int calibrate: 3
-        
+
     }
-        
+
+
+
+
 
     MouseArea {
         id: mouseArea
@@ -64,6 +67,7 @@ Rectangle {
             mouse.accepted = false;
         }
     }
+
     color: hifi.colors.baseGray
 
     RalewayBold {
@@ -162,14 +166,14 @@ Rectangle {
             stepSize: 0.0254
             decimals: 4
             colorScheme: hifi.colorSchemes.dark
-            
+
             onEditingFinished: {
                 sendConfigurationSettings();
             }
         }
     }
-        
+
-    
+
     RalewayBold {
         id: hands
 
@@ -245,7 +249,7 @@ Rectangle {
         anchors.left: openVrConfiguration.left
         anchors.leftMargin: leftMargin + 10
         spacing: 10
-        
+
         HifiControls.SpinBox {
             id: handYOffset
             decimals: 4
@@ -269,7 +273,7 @@ Rectangle {
             stepSize: 0.0254
             decimals: 4
             colorScheme: hifi.colorSchemes.dark
-            
+
             onEditingFinished: {
                 sendConfigurationSettings();
             }
@@ -302,12 +306,37 @@ Rectangle {
             verticalCenter: additional.verticalCenter
         }
 
+        Rectangle {
+            id: selected
+            color: hifi.colors.blueHighlight
+
+            width: info.width
+            height: 1
+
+            anchors {
+                top: info.bottom
+                topMargin: 1
+                left: info.left
+                right: info.right
+            }
+
+            visible: false
+        }
+
         MouseArea {
             anchors.fill: parent;
+            hoverEnabled: true
 
-            onEntered: info.color = hifi.colors.blueAccent
+            onEntered: {
-            onExited: info.color = hifi.colors.blueHighlight
+                selected.visible = true;
-            onClicked: console.log("text clicked");
+            }
+
+            onExited: {
+                selected.visible = false;
+            }
+            onClicked: {
+                stack.messageVisible = true;
+            }
         }
     }
 
@@ -486,7 +515,7 @@ Rectangle {
         anchors.leftMargin: leftMargin
 
         radius: hifi.buttons.radius
-        
+
         gradient: Gradient {
             GradientStop {
                 position: 0.2
@@ -502,7 +531,7 @@ Rectangle {
                     }
                 }
             }
-            
+
             GradientStop {
                 position: 1.0
                 color: {
@@ -518,10 +547,10 @@ Rectangle {
                 }
             }
         }
-    
 
 
-       
+
+
         HiFiGlyphs {
             id: glyphButton
             color: enabled ? hifi.buttons.textColor[calibrationButton.color]
@@ -535,7 +564,7 @@ Rectangle {
                 bottomMargin: 1
             }
         }
-            
+
         RalewayBold {
             id: calibrationText
             font.capitalization: Font.AllUppercase
@@ -550,7 +579,7 @@ Rectangle {
                 topMargin: 7
             }
         }
-    
+
 
         MouseArea {
             anchors.fill: parent
@@ -572,19 +601,19 @@ Rectangle {
                     }
                 }
             }
-            
+
             onPressed: {
                 calibrationButton.pressed = true;
             }
-            
+
             onReleased: {
                 calibrationButton.pressed = false;
             }
-            
+
             onEntered: {
                 calibrationButton.hovered = true;
             }
-            
+
             onExited: {
                 calibrationButton.hovered = false;
             }
@@ -690,14 +719,14 @@ Rectangle {
             calibratingScreen = screen.createObject();
             stack.push(calibratingScreen);
         }
-        
+
         if (status["calibrated"]) {
             calibrationScreen.success();
 
             if (status["UI"]) {
                 logAction("mocap_ui_success", status);
             }
-            
+
         } else if (!status["calibrated"]) {
             calibrationScreen.failure();
 
@@ -809,11 +838,11 @@ Rectangle {
         var handOverride = handSetting["override"];
 
         var settingsChanged = false;
-        
+
         if (lastConfiguration["bodyConfiguration"] !== bodySetting) {
             settingsChanged = true;
         }
-        
+
         var lastHead = lastConfiguration["headConfiguration"];
         if (lastHead["override"] !== headOverride) {
             settingsChanged = true;
@@ -823,13 +852,13 @@ Rectangle {
         if (lastHand["override"] !== handOverride) {
             settingsChanged = true;
         }
-        
+
         if (settingsChanged) {
             if ((!handOverride) && (!headOverride) && (bodySetting === "None")) {
                 state = buttonState.apply;
             } else {
                 state = buttonState.applyAndCalibrate;
-            }   
+            }
         } else {
             if (state == buttonState.apply) {
                 state = buttonState.disabled;
@@ -837,7 +866,7 @@ Rectangle {
                 state = buttonState.calibrate;
             }
         }
-        
+
         lastConfiguration = settings;
     }
 
@@ -854,7 +883,7 @@ Rectangle {
             state = buttonState.disabled;
         } else {
             state = buttonState.calibrate;
-        }   
+        }
     }
 
     function updateCalibrationButton() {
@@ -920,11 +949,11 @@ Rectangle {
             "Y": handYOffset.value,
             "Z": handZOffset.value
         }
-        
+
         var settingsObject = {
             "bodyConfiguration": trackerConfiguration,
             "headConfiguration": headObject,
-            "handConfiguration": handObject 
+            "handConfiguration": handObject
         }
 
         return settingsObject;