adjust to changed requirements:

1. The keyboard collapse button is moved to the lower right, replacing the keys there
2. The button next to m is a hyphen instead of a underscore, it turns to a underscore when the user clicks on shift
3. The input text at the top occupies the full width and is center aligned, when you start typing the text moves in both directions the left and the right

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

@@ -11,6 +11,7 @@ Item {
     property bool toggle: false   // does this button have the toggle behaivor?
     property bool toggled: false  // is this button currently toggled?
     property alias mouseArea: mouseArea1
+    property alias fontFamily: letter.font.family;
 
     function resetToggledMode(mode) {
         toggled = mode;

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

@@ -56,6 +56,8 @@ Rectangle {
             return ">";
         } else if (str === "/") {
             return "?";
+        } else if (str === "-") {
+            return "_";
         } else {
             return str.toUpperCase(str);
         }
@@ -68,6 +70,8 @@ Rectangle {
             return ".";
         } else if (str === "?") {
             return "/";
+        } else if (str === "_") {
+            return "-";
         } else {
             return str.toLowerCase(str);
         }
@@ -86,7 +90,7 @@ Rectangle {
 
     onShiftModeChanged: {
         forEachKey(function (key) {
-            if (/[a-z]/i.test(key.glyph)) {
+            if (/[a-z-_]/i.test(key.glyph)) {
                 if (shiftMode) {
                     key.glyph = keyboardBase.toUpper(key.glyph);
                 } else {
@@ -125,11 +129,11 @@ Rectangle {
             font.family: font.name
             font.pixelSize: 20
             verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignLeft
+            horizontalAlignment: Text.AlignHCenter
             color: "#00B4EF";
             anchors.left: parent.left
             anchors.leftMargin: 10
-            anchors.right: lowerKeyboard.left
+            anchors.right: parent.right
             anchors.top: parent.top
             anchors.bottom: parent.bottom
 
@@ -149,98 +153,6 @@ Rectangle {
                 anchors.fill: parent
             }
         }
-
-        Item {
-            id: lowerKeyboard
-            anchors.right: parent.right
-            anchors.rightMargin: keyboardRect.width - (key_Backspace.x + key_Backspace.width + key_Backspace.contentPadding)
-            width: key_Backspace.width * 2
-            height: parent.height
-
-            Rectangle {
-                id: roundedRect
-                color: "#121212"
-                radius: 6
-                border.color: "#00000000"
-                anchors.fill: parent
-                anchors.margins: 4
-
-                MouseArea {
-                    id: mouseArea
-                    anchors.fill: parent
-                    hoverEnabled: true
-
-                    onClicked: {
-                        webEntity.lowerKeyboard();
-                    }
-
-                    onEntered: {
-                        roundedRect.state = "mouseOver";
-                    }
-
-                    onExited: {
-                        roundedRect.state = "";
-                    }
-
-                    onPressed: {
-                        roundedRect.state = "mouseClicked";
-                    }
-
-                    onReleased: {
-                        if (containsMouse) {
-                            roundedRect.state = "mouseOver";
-                        } else {
-                            roundedRect.state = "";
-                        }
-                    }
-                }
-
-                states: [
-                    State {
-                        name: "mouseOver"
-                        PropertyChanges {
-                            target: roundedRect
-                            color: "#121212"
-                            border.width: 2
-                            border.color: "#00b4ef"
-                        }
-                    },
-                    State {
-                        name: "mouseClicked"
-                        PropertyChanges {
-                            target: roundedRect
-                            border.width: 2
-                            border.color: "#00b4ef"
-                        }
-                        PropertyChanges {
-                            target: colorOverlay
-                            color: '#00B4EF'
-                        }
-                    },
-                    State {
-                        name: "mouseDepressed"
-                        PropertyChanges {
-                            target: roundedRect
-                            color: "#0578b1"
-                            border.width: 0
-                        }
-                    }
-                ]
-
-                Image {
-                    id: buttonImage
-                    anchors.centerIn: parent
-                    source: "../../images/lowerKeyboard.png" // "file:///D:/AI/hifi-elderorb-vs2/interface/resources/images/lowerKeyboard.png";
-                }
-
-                ColorOverlay {
-                    id: colorOverlay
-                    anchors.fill: buttonImage
-                    source: buttonImage
-                    color: 'white'
-                }
-            }
-        }
     }
 
     Rectangle {
@@ -253,6 +165,8 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 0
 
+        FontLoader { id: hiFiGlyphs; source: pathToFonts + "fonts/hifi-glyphs.ttf"; }
+
         Column {
             id: columnAlpha
             width: keyboardWidth
@@ -275,7 +189,7 @@ Rectangle {
                 Key { width: 43; glyph: "i"; }
                 Key { width: 43; glyph: "o"; }
                 Key { width: 43; glyph: "p"; }
-                Key { width: 43; glyph: "←"; id: key_Backspace }
+                Key { width: 43; glyph: "←"; }
             }
 
             Row {
@@ -316,7 +230,7 @@ Rectangle {
                 Key { width: 43; glyph: "b"; }
                 Key { width: 43; glyph: "n"; }
                 Key { width: 43; glyph: "m"; }
-                Key { width: 43; glyph: "_"; }
+                Key { width: 43; glyph: "-"; }
                 Key { width: 43; glyph: "/"; }
                 Key { width: 43; glyph: "?"; }
             }
@@ -335,8 +249,10 @@ Rectangle {
                 Key { width: 231; glyph: " "; }
                 Key { width: 43; glyph: ","; }
                 Key { width: 43; glyph: "."; }
-                Key { width: 43; glyph: "\u276C"; }
+                Key {
-                Key { width: 43; glyph: "\u276D"; }
+                    fontFamily: hiFiGlyphs.name;
+                    width: 86; glyph: "\ue02b";
+                }
             }
         }
 
@@ -423,8 +339,10 @@ Rectangle {
                 Key { width: 231; glyph: " "; }
                 Key { width: 43; glyph: ","; }
                 Key { width: 43; glyph: "."; }
-                Key { width: 43; glyph: "\u276C"; }
+                Key {
-                Key { width: 43; glyph: "\u276D"; }
+                    fontFamily: hiFiGlyphs.name;
+                    width: 86; glyph: "\ue02b";
+                }
             }
         }
     }

libraries/ui/src/ui/OffscreenQmlSurface.cpp

@@ -1038,6 +1038,7 @@ static const uint8_t BACKSPACE_SYMBOL[] = { 0xE2, 0x86, 0x90, 0x00 };
 static const uint8_t LEFT_ARROW[] = { 0xE2, 0x9D, 0xAC, 0x00 };
 static const uint8_t RIGHT_ARROW[] = { 0xE2, 0x9D, 0xAD, 0x00 };
 static const uint8_t RETURN_SYMBOL[] = { 0xE2, 0x8F, 0x8E, 0x00 };
+static const uint8_t COLLAPSE_KEYBOARD[] = { 0xEE, 0x80, 0xAB, 0x00 };
 static const char PUNCTUATION_STRING[] = "123";
 static const char ALPHABET_STRING[] = "abc";
 
@@ -1061,6 +1062,9 @@ void OffscreenQmlSurface::synthesizeKeyPress(QString key, QObject* targetOverrid
         if (equals(utf8Key, SHIFT_ARROW) || equals(utf8Key, NUMERIC_SHIFT_ARROW) ||
             equals(utf8Key, (uint8_t*)PUNCTUATION_STRING) || equals(utf8Key, (uint8_t*)ALPHABET_STRING)) {
             return;  // ignore
+        } else if (equals(utf8Key, COLLAPSE_KEYBOARD)) {
+            lowerKeyboard();
+            return;
         } else if (equals(utf8Key, BACKSPACE_SYMBOL)) {
             scanCode = Qt::Key_Backspace;
             keyString = "\x08";