Initial import from CES2017 repositorydab_3.99.1dab/3.99.1chinook_3.0.4chinook/3.0.43.99.13.0.4chinook

Pull AGL demo custom QtQuickControls2 widgets out of CES2017 repository.

Bug-AGL: SPEC-462

Change-Id: Iba4391433645941faa0d6f4b11e155c946481181
Signed-off-by: Scott Murray <scott.murray@konsulko.com>

13 files changed, 786 insertions, 0 deletions

diff --git a/imports/agl-demo-controls/AbstractKeyboard.qml b/imports/agl-demo-controls/AbstractKeyboard.qml
new file mode 100644
index 0000000..94e1eeb
--- /dev/null
+++ b/imports/agl-demo-controls/AbstractKeyboard.qml
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2016 The Qt Company Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import QtQuick 2.6
+import QtQuick.Window 2.0
+
+Item {
+    id: root
+    implicitWidth: Screen.width
+    implicitHeight: Screen.height / 3
+    signal show()
+    signal hide()
+    signal toggleMode()
+    property Item target
+
+    onTargetChanged: {
+        var v = target && target.activeFocus && typeof(target.inputMethodComposing) !== 'undefined'
+        if (v)
+            show()
+        else
+            hide()
+    }
+}
diff --git a/imports/agl-demo-controls/Alphabet.qml b/imports/agl-demo-controls/Alphabet.qml
new file mode 100644
index 0000000..3a0fb6f
--- /dev/null
+++ b/imports/agl-demo-controls/Alphabet.qml
@@ -0,0 +1,140 @@
+/*
+ * Copyright (C) 2016 The Qt Company Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import QtQuick 2.6
+import QtQuick.Window 2.0
+import QtQuick.Layouts 1.1
+
+AbstractKeyboard {
+    id: root
+
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: root.height / 10
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Repeater {
+                model: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p']
+                delegate: Key {
+                    text: model.modelData
+                    Layout.preferredWidth: 2
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    capital: shift.checked
+                }
+            }
+        }
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Item {
+                Layout.preferredWidth: 1
+                Layout.fillWidth: true
+            }
+
+            Repeater {
+                model: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l']
+                delegate: Key {
+                    text: model.modelData
+                    Layout.preferredWidth: 2
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    capital: shift.checked
+                }
+            }
+            Item {
+                Layout.preferredWidth: 1
+                Layout.fillWidth: true
+            }
+        }
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Key {
+                id: shift
+                image: './images/Keyboard_Shift.svg'
+                checkable: true
+                Layout.preferredWidth: 2
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+            Repeater {
+                model: ['z', 'x', 'c', 'v', 'b', 'n', 'm', '@']
+                delegate: Key {
+                    text: model.modelData
+                    Layout.preferredWidth: 2
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    capital: shift.checked
+                }
+            }
+            Key {
+                image: './images/Keyboard_Back.svg'
+                Layout.preferredWidth: 2
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                onClicked: {
+                    if (!clearSelctedText()) {
+                        var input = keyboard.target
+                        if (input.cursorPosition > 0)
+                            keyboard.target.remove(input.cursorPosition - 1, input.cursorPosition)
+                    }
+                }
+            }
+        }
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Key {
+                text: '123'
+                Layout.preferredWidth: 2
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                onClicked: root.toggleMode()
+            }
+            Key {
+                text: '.'
+                Layout.preferredWidth: 2
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+            Key {
+                text: ' '
+                image: './images/Keyboard_Space.svg'
+                Layout.preferredWidth: 12
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+            Key {
+                text: '!?'
+                Layout.preferredWidth: 2
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                onClicked: root.toggleMode()
+            }
+            Key {
+                image: './images/Keyboard_Arrow.svg'
+                Layout.preferredWidth: 2
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                onClicked: {
+                    root.hide()
+                }
+            }
+        }
+    }
+}
diff --git a/imports/agl-demo-controls/ImageButton.qml b/imports/agl-demo-controls/ImageButton.qml
new file mode 100644
index 0000000..c8d05b1
--- /dev/null
+++ b/imports/agl-demo-controls/ImageButton.qml
@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2016 The Qt Company Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import QtQuick 2.6
+import QtQuick.Templates 2.0 as T
+
+T.Button {
+    id: control
+    implicitWidth: contentItem.implicitWidth
+    implicitHeight: contentItem.implicitHeight
+
+    property url offImage
+    property url onImage: offImage
+
+    contentItem: Image {
+        source: control.pressed ? control.onImage : control.offImage
+        transform: [
+            Translate {
+                id: translate
+            }
+        ]
+        states: [
+            State {
+                when: control.pressed
+                PropertyChanges {
+                    target: translate
+                    x: 5
+                    y: 5
+                }
+            }
+        ]
+    }
+}
diff --git a/imports/agl-demo-controls/Key.qml b/imports/agl-demo-controls/Key.qml
new file mode 100644
index 0000000..a81a126
--- /dev/null
+++ b/imports/agl-demo-controls/Key.qml
@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2016 The Qt Company Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import QtQuick 2.6
+
+MouseArea {
+    id: root
+    implicitWidth: 50
+    implicitHeight: 80
+    property string text
+    property alias image: image.source
+    property bool checkable: false
+    property bool checked: false
+    property bool capital: false
+
+    onClicked: {
+        if (checkable) {
+            checked = !checked
+        } else {
+            if (label.text.length === 1)
+                insert(label.text)
+        }
+    }
+
+    function clearSelctedText() {
+        var input = keyboard.target
+        if (input.selectedText.length > 0) {
+            input.remove(input.selectionStart, input.selectionEnd)
+            return true
+        }
+        return false
+    }
+
+    function insert(text) {
+        clearSelctedText()
+        var input = keyboard.target
+        keyboard.target.insert(input.cursorPosition, text)
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        border.width: 2
+        border.color: 'white'
+        smooth: true
+        radius: root.height / 10
+        color: 'gray'
+        Rectangle {
+            anchors.fill: parent
+            radius: parent.radius
+            opacity: root.pressed || root.checked ? 0 : 0.5
+            gradient: Gradient {
+                GradientStop {
+                    position: 0.0
+                    color: 'transparent'
+                }
+                GradientStop {
+                    position: 1.0
+                    color: '#66FF99'
+                }
+            }
+        }
+    }
+
+    Text {
+        id: label
+        anchors.centerIn: parent
+        color: 'white'
+        font.pixelSize: root.height / 2
+        text: root.capital ? root.text.toUpperCase() : root.text.toLowerCase()
+    }
+
+    Image {
+        id: image
+        anchors.centerIn: parent
+        scale: 0.8
+    }
+}
diff --git a/imports/agl-demo-controls/Keyboard.qml b/imports/agl-demo-controls/Keyboard.qml
new file mode 100644
index 0000000..f1af9d9
--- /dev/null
+++ b/imports/agl-demo-controls/Keyboard.qml
@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2016 The Qt Company Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import QtQuick 2.6
+import QtQuick.Window 2.0
+import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.0
+
+Item {
+    id: root
+    implicitWidth: Screen.width
+    implicitHeight: Screen.height / 2
+
+    property Item target
+    visible: false
+
+    Rectangle {
+        anchors.fill: parent
+        color: 'black'
+        opacity: 0.5
+    }
+
+    property AbstractKeyboard active: alphabet
+    Alphabet {
+        id: alphabet
+        anchors.fill: parent
+        anchors.margins: parent.height / 20
+        target: root.target
+        visible: root.active === alphabet
+        onShow: root.visible = true
+        onHide: root.visible = false
+        onToggleMode: root.active = symbols
+    }
+
+    Symbols {
+        id: symbols
+        anchors.fill: parent
+        anchors.margins: parent.height / 20
+        target: root.target
+        visible: root.active === symbols
+        onShow: root.visible = true
+        onHide: root.visible = false
+        onToggleMode: root.active = alphabet
+    }
+}
diff --git a/imports/agl-demo-controls/Symbols.qml b/imports/agl-demo-controls/Symbols.qml
new file mode 100644
index 0000000..a47ccea
--- /dev/null
+++ b/imports/agl-demo-controls/Symbols.qml
@@ -0,0 +1,138 @@
+/*
+ * Copyright (C) 2016 The Qt Company Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import QtQuick 2.6
+import QtQuick.Window 2.0
+import QtQuick.Layouts 1.1
+
+AbstractKeyboard {
+    id: root
+
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: root.height / 10
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Repeater {
+                model: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
+                delegate: Key {
+                    text: model.modelData
+                    Layout.preferredWidth: 2
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                }
+            }
+        }
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Item {
+                Layout.preferredWidth: 1
+                Layout.fillWidth: true
+            }
+
+            Repeater {
+                model: ['@', '#', '%', '&', '*', '-', '+', '(', ')']
+                delegate: Key {
+                    text: model.modelData
+                    Layout.preferredWidth: 2
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                }
+            }
+            Item {
+                Layout.preferredWidth: 1
+                Layout.fillWidth: true
+            }
+        }
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Key {
+                id: shift
+                image: './images/Keyboard_Shift.svg'
+                checkable: true
+                Layout.preferredWidth: 2
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+            Repeater {
+                model: ['!', '"', '<', '>', '\'', ':', ';', '/']
+                delegate: Key {
+                    text: model.modelData
+                    Layout.preferredWidth: 2
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    capital: shift.checked
+                }
+            }
+            Key {
+                image: './images/Keyboard_Back.svg'
+                Layout.preferredWidth: 2
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                onClicked: {
+                    if (!clearSelctedText()) {
+                        var input = keyboard.target
+                        if (input.cursorPosition > 0)
+                            keyboard.target.remove(input.cursorPosition - 1, input.cursorPosition)
+                    }
+                }
+            }
+        }
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Key {
+                text: 'ABC'
+                Layout.preferredWidth: 2
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                onClicked: root.toggleMode()
+            }
+            Key {
+                text: '.'
+                Layout.preferredWidth: 2
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+            Key {
+                text: ' '
+                image: './images/Keyboard_Space.svg'
+                Layout.preferredWidth: 12
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+            Key {
+                text: '!?'
+                Layout.preferredWidth: 2
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                onClicked: root.toggleMode()
+            }
+            Key {
+                image: './images/Keyboard_Arrow.svg'
+                Layout.preferredWidth: 2
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                onClicked: {
+                    root.hide()
+                }
+            }
+        }
+    }
+}
diff --git a/imports/agl-demo-controls/ToggleButton.qml b/imports/agl-demo-controls/ToggleButton.qml
new file mode 100644
index 0000000..4a9fc72
--- /dev/null
+++ b/imports/agl-demo-controls/ToggleButton.qml
@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2016 The Qt Company Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import QtQuick 2.6
+import QtQuick.Templates 2.0 as T
+
+T.CheckBox {
+    id: control
+    implicitWidth: contentItem.implicitWidth
+    implicitHeight: contentItem.implicitHeight
+
+    property url onImage
+    property url offImage
+
+    contentItem: Image {
+        source: control.checked ? control.onImage : control.offImage
+    }
+}
diff --git a/imports/agl-demo-controls/agl-demo-controls.pro b/imports/agl-demo-controls/agl-demo-controls.pro
new file mode 100644
index 0000000..988edd1
--- /dev/null
+++ b/imports/agl-demo-controls/agl-demo-controls.pro
@@ -0,0 +1,8 @@
+TEMPLATE = aux
+
+DISTFILES = *.qml qmldir images
+
+files.files = $$DISTFILES
+files.path = $$[QT_INSTALL_QML]/AGL/Demo/Controls
+
+INSTALLS += files
diff --git a/imports/agl-demo-controls/images/Keyboard_Arrow.svg b/imports/agl-demo-controls/images/Keyboard_Arrow.svg
new file mode 100644
index 0000000..0b28afe
--- /dev/null
+++ b/imports/agl-demo-controls/images/Keyboard_Arrow.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 89.6 119.8"
+   style="enable-background:new 0 0 89.6 119.8;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="Keyboard_Arrow.svg"><metadata
+     id="metadata42"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs40" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview38"
+     showgrid="false"
+     inkscape:zoom="1.9699499"
+     inkscape:cx="-219.92755"
+     inkscape:cy="59.900002"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{opacity:0.42;fill:#ACACA5;}
+	.st1{opacity:0.42;fill:url(#SVGID_1_);}
+	.st2{fill:none;stroke:#ACACA5;stroke-miterlimit:10;}
+	.st3{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
+	.st4{fill:#FFFFFF;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><g
+           id="g28"><g
+             id="g30"><polyline
+               class="st3"
+               points="53.7,44 53.7,71.2 22,71.2      "
+               id="polyline32" /><g
+               id="g34"><path
+                 class="st4"
+                 d="M35.7,61.6c0.3,0.5,0.2,1.1-0.3,1.4l-12.9,8.2l12.9,8.2c0.5,0.3,0.6,0.9,0.3,1.4        c-0.3,0.5-0.9,0.6-1.4,0.3l-14.2-9.1c-0.3-0.2-0.5-0.5-0.5-0.8c0-0.3,0.2-0.7,0.5-0.8l14.2-9.1c0.2-0.1,0.4-0.2,0.5-0.2        C35.2,61.2,35.5,61.3,35.7,61.6z"
+                 id="path36" /></g></g></g></g></g></switch></svg>
\ No newline at end of file
diff --git a/imports/agl-demo-controls/images/Keyboard_Back.svg b/imports/agl-demo-controls/images/Keyboard_Back.svg
new file mode 100644
index 0000000..e28b58e
--- /dev/null
+++ b/imports/agl-demo-controls/images/Keyboard_Back.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 78.3 119.8"
+   style="enable-background:new 0 0 78.3 119.8;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="Keyboard_Inactive_Back.svg"><metadata
+     id="metadata21"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs19" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview17"
+     showgrid="false"
+     inkscape:zoom="1.9699499"
+     inkscape:cx="-229.89238"
+     inkscape:cy="59.900002"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{opacity:0.42;fill:#ACACA5;}
+	.st1{fill:none;stroke:#ACACA5;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><path
+           class="st2"
+           d="M61.5,45.1H26.3c-0.5,0-1,0.2-1.3,0.5L10.6,59.9c-0.3,0.3-0.5,0.8-0.5,1.3s0.2,1,0.5,1.3L25,76.9     c0.3,0.3,0.8,0.5,1.3,0.5h35.3c1,0,1.8-0.8,1.8-1.8V46.9C63.4,45.9,62.5,45.1,61.5,45.1z M48.8,65.6c0.9,0.9,0.9,2.2,0,3.1     c-0.8,0.8-2.2,0.8-3.1,0l-4.3-4.3L37,68.7c-0.8,0.9-2.2,0.8-3.1,0c-0.8-0.8-0.9-2.2,0-3.1l4.3-4.3L34,56.9     c-0.8-0.8-0.8-2.2,0-3.1c0.9-0.9,2.2-0.8,3.1,0l4.3,4.3l4.4-4.4c0.8-0.8,2.2-0.8,3.1,0c0.8,0.8,0.8,2.2,0,3.1l-4.4,4.4L48.8,65.6     z"
+           id="path15" /></g></g></switch></svg>
\ No newline at end of file
diff --git a/imports/agl-demo-controls/images/Keyboard_Shift.svg b/imports/agl-demo-controls/images/Keyboard_Shift.svg
new file mode 100644
index 0000000..ff322aa
--- /dev/null
+++ b/imports/agl-demo-controls/images/Keyboard_Shift.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 78.3 119.8"
+   style="enable-background:new 0 0 78.3 119.8;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="Keyboard_Inactive_Shift.svg"><metadata
+     id="metadata21"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs19" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview17"
+     showgrid="false"
+     inkscape:zoom="1.9699499"
+     inkscape:cx="-186.99789"
+     inkscape:cy="59.900002"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{opacity:0.42;fill:#ACACA5;}
+	.st1{fill:none;stroke:#ACACA5;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><polygon
+           class="st2"
+           points="18.7,59.9 39.1,32.2 59.6,59.9 49.6,59.9 49.6,87.6 28.7,87.6 28.7,59.9    "
+           id="polygon15" /></g></g></switch></svg>
\ No newline at end of file
diff --git a/imports/agl-demo-controls/images/Keyboard_Space.svg b/imports/agl-demo-controls/images/Keyboard_Space.svg
new file mode 100644
index 0000000..ee22b48
--- /dev/null
+++ b/imports/agl-demo-controls/images/Keyboard_Space.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 502.4 119.8"
+   style="enable-background:new 0 0 502.4 119.8;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="Keyboard_Inactive_Space.svg"><metadata
+     id="metadata21"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs19" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview17"
+     showgrid="false"
+     inkscape:zoom="1.3375796"
+     inkscape:cx="-58.688095"
+     inkscape:cy="59.900002"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{opacity:0.42;fill:#ACACA5;}
+	.st1{fill:none;stroke:#ACACA5;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-miterlimit:10;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><polyline
+           class="st2"
+           points="204.9,54.3 204.9,76.7 301.9,76.7 301.9,54.3    "
+           id="polyline15" /></g></g></switch></svg>
\ No newline at end of file
diff --git a/imports/agl-demo-controls/qmldir b/imports/agl-demo-controls/qmldir
new file mode 100644
index 0000000..09e4bb7
--- /dev/null
+++ b/imports/agl-demo-controls/qmldir
@@ -0,0 +1,3 @@
+ToggleButton 1.0 ToggleButton.qml
+ImageButton 1.0 ImageButton.qml
+Keyboard 1.0 Keyboard.qml