Update launcher's VKB to version 2.0

Scrolling the focused element visible is not done any more by VKB
so AutoScroller.qml is added. More info in bug report QTRD-3784
Also handwriting recognition is in use.

Change-Id: Ic504d79de374c0c3f4ab5912c7b9887dd6276d10
Task-number: QTRD-3796
Reviewed-by: Teemu Holappa <teemu.holappa@theqtcompany.com>

7 files changed, 443 insertions, 2 deletions

diff --git a/qml/AutoScroller.qml b/qml/AutoScroller.qml
new file mode 100644
index 0000000..b745d05
--- /dev/null
+++ b/qml/AutoScroller.qml
@@ -0,0 +1,99 @@
+/******************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Enterprise Embedded.
+**
+** $QT_BEGIN_LICENSE:COMM$
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** $QT_END_LICENSE$
+**
+******************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Enterprise.VirtualKeyboard 2.0
+
+Item {
+
+    property var innerFlickable
+    property var outerFlickable
+    property var inputItem: InputContext.inputItem
+
+    onInputItemChanged: {
+        innerFlickable = null
+        outerFlickable = null
+        if (inputItem !== null) {
+            var parent_ = inputItem.parent
+            while (parent_) {
+                if (parent_.maximumFlickVelocity) {
+                    if (innerFlickable) {
+                        outerFlickable = parent_
+                        break
+                    } else {
+                        innerFlickable = parent_
+                    }
+                }
+                parent_ = parent_.parent
+            }
+            delayedLoading.triggered()
+        }
+    }
+
+    function ensureVisible(flickable) {
+        if (Qt.inputMethod.visible && inputItem && flickable && flickable.visible && flickable.interactive) {
+
+            var verticallyFlickable = (flickable.flickableDirection === Flickable.HorizontalAndVerticalFlick || flickable.flickableDirection === Flickable.VerticalFlick
+                                       || (flickable.flickableDirection === Flickable.AutoFlickDirection && flickable.contentHeight > flickable.height))
+            var horizontallyFlickable = (flickable.flickableDirection === Flickable.HorizontalAndVerticalFlick || flickable.flickableDirection === Flickable.HorizontalFlick
+                                         || (flickable.flickableDirection === Flickable.AutoFlickDirection && flickable.contentWidth > flickable.width))
+
+            if ((!verticallyFlickable && !horizontallyFlickable) || !inputItem.hasOwnProperty("cursorRectangle"))
+                return
+
+            var cursorRectangle = flickable.contentItem.mapFromItem(inputItem, inputItem.cursorRectangle.x, inputItem.cursorRectangle.y)
+
+            var oldContentY = flickable.contentY
+            if (verticallyFlickable) {
+                var scrollMarginVertical = (flickable && flickable.scrollMarginVertical) ? flickable.scrollMarginVertical : 10
+                if (flickable.contentY >= cursorRectangle.y  - scrollMarginVertical)
+                    flickable.contentY = Math.max(0, cursorRectangle.y  - scrollMarginVertical)
+                else if (flickable.contentY + flickable.height <= cursorRectangle.y  + inputItem.cursorRectangle.height + scrollMarginVertical)
+                    flickable.contentY = Math.min(flickable.contentHeight - flickable.height, cursorRectangle.y + inputItem.cursorRectangle.height - flickable.height + scrollMarginVertical)
+            }
+            if (horizontallyFlickable) {
+                var scrollMarginHorizontal = (flickable && flickable.scrollMarginHorizontal) ? flickable.scrollMarginHorizontal : 10
+                if (flickable.contentX >= cursorRectangle.x - scrollMarginHorizontal)
+                    flickable.contentX = Math.max(0, cursorRectangle.x - scrollMarginHorizontal)
+                else if (flickable.contentX + flickable.width <= cursorRectangle.x + inputItem.cursorRectangle.width + scrollMarginHorizontal)
+                    flickable.contentX = Math.min(flickable.contentWidth - flickable.width, cursorRectangle.x + inputItem.cursorRectangle.width - flickable.width + scrollMarginHorizontal)
+            }
+        }
+    }
+    Timer {
+        id: delayedLoading
+        interval: 10
+        onTriggered: {
+            ensureVisible(innerFlickable)
+            ensureVisible(outerFlickable)
+        }
+    }
+    Connections {
+        ignoreUnknownSignals: true
+        target: inputItem && !Qt.inputMethod.animating ? Qt.inputMethod : null
+        onKeyboardRectangleChanged: delayedLoading.triggered()
+    }
+    Connections {
+        ignoreUnknownSignals: true
+        target: inputItem && inputItem.activeFocus ? inputItem : null
+        onCursorRectangleChanged: delayedLoading.triggered()
+    }
+}
diff --git a/qml/HandwritingModeButton.qml b/qml/HandwritingModeButton.qml
new file mode 100644
index 0000000..267d616
--- /dev/null
+++ b/qml/HandwritingModeButton.qml
@@ -0,0 +1,157 @@
+/******************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Enterprise Embedded.
+**
+** $QT_BEGIN_LICENSE:COMM$
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** $QT_END_LICENSE$
+**
+******************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: handwritingModeButton
+    state: "unavailable"
+    property bool floating
+    property bool flipable
+    readonly property real __minWidthHeight: Math.min(width, height)
+
+    signal clicked()
+    signal doubleClicked()
+
+    Flipable {
+        id: flipableImage
+        anchors.fill: parent
+
+        property bool flipped
+
+        front: Image {
+            sourceSize.width: handwritingModeButton.__minWidthHeight
+            sourceSize.height: handwritingModeButton.__minWidthHeight
+            smooth: false
+            source: "qrc:/qml/images/FloatingButton_Unavailable.svg"
+        }
+
+        back: Image {
+            id: buttonImage
+            sourceSize.width: handwritingModeButton.__minWidthHeight
+            sourceSize.height: handwritingModeButton.__minWidthHeight
+            smooth: false
+            source: "qrc:/qml/images/FloatingButton_Available.svg"
+        }
+
+        states: State {
+            PropertyChanges { target: rotation; angle: 180 }
+            when: flipableImage.flipped
+        }
+
+        transform: Rotation {
+            id: rotation
+            origin.x: flipableImage.width / 2
+            origin.y: flipableImage.height / 2
+            axis { x: 0; y: 1; z: 0 }
+            angle: 0
+        }
+
+        transitions: Transition {
+            enabled: handwritingModeButton.flipable
+            NumberAnimation { target: rotation; property: "angle"; duration: 400 }
+        }
+    }
+
+    states: [
+        State {
+            name: "available"
+            PropertyChanges { target: flipableImage; flipped: true }
+        },
+        State {
+            name: "active"
+            PropertyChanges { target: flipableImage; flipped: true }
+            PropertyChanges { target: buttonImage; source: "qrc:/qml/images/FloatingButton_Active.svg" }
+        }
+    ]
+
+    function snapHorizontal() {
+        if (!floating)
+            return
+        if (mouseArea.drag.maximumX > mouseArea.drag.minimumX) {
+            if (x + 20 >= mouseArea.drag.maximumX) {
+                anchors.left = undefined
+                anchors.right = parent.right
+            } else if (x - 20 <= mouseArea.drag.minimumX) {
+                anchors.right = undefined
+                anchors.left = parent.left
+            }
+        }
+    }
+
+    function snapVertical() {
+        if (!floating)
+            return
+        if (mouseArea.drag.maximumY > mouseArea.drag.minimumY) {
+            if (y + 20 >= mouseArea.drag.maximumY) {
+                anchors.top = undefined
+                anchors.bottom = parent.bottom
+            } else if (y - 20 <= mouseArea.drag.minimumY) {
+                anchors.bottom = undefined
+                anchors.top = parent.top
+            }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        drag {
+            target: handwritingModeButton.floating ? handwritingModeButton : undefined
+            axis: Drag.XAxis | Drag.YAxis
+            minimumX: 0
+            maximumX: handwritingModeButton.parent.width - handwritingModeButton.width
+            onMaximumXChanged: !mouseArea.drag.active && handwritingModeButton.snapHorizontal()
+            minimumY: 0
+            maximumY: handwritingModeButton.parent.height - handwritingModeButton.height
+            onMaximumYChanged: !mouseArea.drag.active && handwritingModeButton.snapVertical()
+        }
+        onPressed: {
+            if (!handwritingModeButton.floating)
+                return
+            handwritingModeButton.anchors.left = undefined
+            handwritingModeButton.anchors.top = undefined
+            handwritingModeButton.anchors.right = undefined
+            handwritingModeButton.anchors.bottom = undefined
+        }
+        onReleased: {
+            handwritingModeButton.snapHorizontal()
+            handwritingModeButton.snapVertical()
+        }
+        onClicked: {
+            handwritingModeButton.snapHorizontal()
+            handwritingModeButton.snapVertical()
+            clickTimer.restart()
+        }
+        onDoubleClicked: {
+            clickTimer.stop()
+            handwritingModeButton.snapHorizontal()
+            handwritingModeButton.snapVertical()
+            handwritingModeButton.doubleClicked()
+        }
+        Timer {
+            id: clickTimer
+            interval: Qt.styleHints ? Qt.styleHints.mouseDoubleClickInterval / 3 : 0
+            repeat: false
+            onTriggered: handwritingModeButton.clicked()
+        }
+    }
+}
diff --git a/qml/Main.qml b/qml/Main.qml
index d89472f..b9e4ec0 100644
--- a/qml/Main.qml
+++ b/qml/Main.qml
@@ -17,7 +17,7 @@
 ****************************************************************************/
 import QtQuick 2.4
 import QtQuick.Window 2.2
-import QtQuick.Enterprise.VirtualKeyboard 1.2
+import QtQuick.Enterprise.VirtualKeyboard 2.0
 import com.qtcompany.B2QtLauncher 1.0
 
 Window {
@@ -243,6 +243,59 @@ Window {
             }
         }
 
+        /*  Handwriting input panel for full screen handwriting input.
+
+            This component is an optional add-on for the InputPanel component, that
+            is, its use does not affect the operation of the InputPanel component,
+            but it also can not be used as a standalone component.
+
+            The handwriting input panel is positioned to cover the entire area of
+            application. The panel itself is transparent, but once it is active the
+            user can draw handwriting on it.
+        */
+        HandwritingInputPanel {
+            z: 79
+            id: handwritingInputPanel
+            anchors.fill: parent
+            inputPanel: inputPanel
+            Rectangle {
+                z: -1
+                anchors.fill: parent
+                color: "black"
+                opacity: 0.10
+            }
+        }
+
+        /*  Container area for the handwriting mode button.
+
+            Handwriting mode button can be moved freely within the container area.
+            In this example, a single click changes the handwriting mode and a
+            double-click changes the availability of the full screen handwriting input.
+        */
+        Item {
+            z: 89
+            visible: handwritingInputPanel.enabled && Qt.inputMethod.visible
+            anchors { left: parent.left; top: parent.top; right: parent.right; bottom: inputPanel.top; }
+            HandwritingModeButton {
+                id: handwritingModeButton
+                anchors.top: parent.top
+                anchors.right: parent.right
+                anchors.margins: 10
+                floating: true
+                flipable: true
+                width: 76
+                height: width
+                state: handwritingInputPanel.state
+                onClicked: handwritingInputPanel.active = !handwritingInputPanel.active
+                onDoubleClicked: handwritingInputPanel.available = !handwritingInputPanel.available
+            }
+            onVisibleChanged: console.log("hw visible: "+visible)
+            Component.onCompleted: console.log("input visible " +visible)
+        }
+
+        /*  Keyboard input panel.
+            The keyboard is anchored to the bottom of the application.
+        */
         InputPanel {
             id: inputPanel
             z: 99
@@ -252,7 +305,12 @@ Window {
 
             states: State {
                 name: "visible"
-                when: Qt.inputMethod.visible
+                /*  The visibility of the InputPanel can be bound to the Qt.inputMethod.visible property,
+                    but then the handwriting input panel and the keyboard input panel can be visible
+                    at the same time. Here the visibility is bound to InputPanel.active property instead,
+                    which allows the handwriting panel to control the visibility when necessary.
+                */
+                when: inputPanel.active
                 PropertyChanges {
                     target: inputPanel
                     y: root.height - inputPanel.height
@@ -270,6 +328,7 @@ Window {
                     }
                 }
             }
+            AutoScroller {}
         }
 
         Item {
diff --git a/qml/images/FloatingButton_Active.svg b/qml/images/FloatingButton_Active.svg
new file mode 100644
index 0000000..76a38eb
--- /dev/null
+++ b/qml/images/FloatingButton_Active.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="391px" height="391px" viewBox="0 0 390 390" style="enable-background:new 0 0 390 390;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.3;enable-background:new    ;}
+	.st1{opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#5CAA15;}
+	.st4{fill:none;}
+</style>
+<g id="Active">
+	<g>
+		<circle class="st0" cx="195" cy="195" r="191"/>
+		<g class="st1">
+			<path class="st2" d="M195,4c105.5,0,191,85.5,191,191s-85.5,191-191,191S4,300.5,4,195S89.5,4,195,4 M195,0
+				c-26.3,0-51.9,5.2-75.9,15.3c-23.2,9.8-44.1,23.9-62,41.8s-32,38.8-41.8,62C5.2,143.1,0,168.7,0,195s5.2,51.9,15.3,75.9
+				c9.8,23.2,23.9,44.1,41.8,62s38.8,32,62,41.8c24,10.2,49.6,15.3,75.9,15.3s51.9-5.2,75.9-15.3c23.2-9.8,44.1-23.9,62-41.8
+				s32-38.8,41.8-62c10.2-24,15.3-49.6,15.3-75.9s-5.2-51.9-15.3-75.9c-9.8-23.2-23.9-44.1-41.8-62s-38.8-32-62-41.8
+				C246.9,5.2,221.3,0,195,0L195,0z"/>
+		</g>
+	</g>
+	<circle class="st3" cx="195" cy="195" r="141"/>
+</g>
+<g id="icon">
+	<g>
+		<g>
+			<path class="st2" d="M155.6,247.3c-10.1,0-18.9-5-23.1-13.6c-10.1-21,5.4-37.4,21.7-54.7c1.2-1.2,2.4-2.5,3.6-3.8
+				c5.3-5.7,5.2-11.5,3.5-14.8c-1.8-3.4-5.5-4.9-10.2-4.2c-16.5,2.6-21.2,26.4-21.2,26.6l-11.9-2.2c0.3-1.3,6.4-32.3,31.2-36.3
+				c9.8-1.6,18.5,2.4,22.7,10.4c4.7,8.9,2.6,20.1-5.3,28.6c-1.2,1.3-2.4,2.6-3.6,3.8c-16.7,17.8-25.9,28.5-19.6,41.4
+				c3.3,6.8,11.1,7.6,16.9,6.3c9.2-2.1,19.8-11.1,19.7-29.5c-0.2-28.1,16.2-41.8,30.2-44.9c14.5-3.2,28.4,3.6,34.7,17
+				c1.3,2.8,2.3,5.4,3.1,8.1c13.3,0.7,25.5,4.3,26,4.4l-3.4,11.5c-0.1,0-9.7-2.8-20.6-3.8c0.5,16.5-8.6,28.9-20.1,34.7
+				c-11.9,6-24,3.8-28.9-5.2c-3.1-5.6-1.9-14.7,2.9-22.5c7.9-13,21.3-17.4,31.5-18.8c-0.4-1.2-0.9-2.4-1.4-3.4
+				c-3.9-8.3-12.2-12.4-21.1-10.4c-9.7,2.2-21,12.1-20.8,33.1c0.2,25.5-15.6,38.1-29,41.3C160.5,247,158,247.3,155.6,247.3z
+				 M237.8,197.7c-14,1.5-20.6,8.5-23.4,12.9c-3.3,5.2-3.4,9.8-2.9,10.9c1.6,2.9,7.3,3,13,0.2C235.3,216.2,238.3,206.6,237.8,197.7z
+				"/>
+		</g>
+		<rect x="118" y="144" class="st4" width="156" height="104"/>
+	</g>
+</g>
+</svg>
diff --git a/qml/images/FloatingButton_Available.svg b/qml/images/FloatingButton_Available.svg
new file mode 100644
index 0000000..1178c8c
--- /dev/null
+++ b/qml/images/FloatingButton_Available.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="390px" height="390px" viewBox="0 0 390 390" style="enable-background:new 0 0 390 390;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.3;enable-background:new    ;}
+	.st1{opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#26282A;}
+	.st4{fill:none;}
+</style>
+<g id="Available">
+	<g>
+		<circle class="st0" cx="195" cy="195" r="191"/>
+		<g class="st1">
+			<path class="st2" d="M195,4c105.5,0,191,85.5,191,191s-85.5,191-191,191S4,300.5,4,195S89.5,4,195,4 M195,0
+				c-26.3,0-51.9,5.2-75.9,15.3c-23.2,9.8-44.1,23.9-62,41.8s-32,38.8-41.8,62C5.2,143.1,0,168.7,0,195s5.2,51.9,15.3,75.9
+				c9.8,23.2,23.9,44.1,41.8,62s38.8,32,62,41.8c24,10.2,49.6,15.3,75.9,15.3s51.9-5.2,75.9-15.3c23.2-9.8,44.1-23.9,62-41.8
+				s32-38.8,41.8-62c10.2-24,15.3-49.6,15.3-75.9s-5.2-51.9-15.3-75.9c-9.8-23.2-23.9-44.1-41.8-62s-38.8-32-62-41.8
+				C246.9,5.2,221.3,0,195,0L195,0z"/>
+		</g>
+	</g>
+	<circle class="st3" cx="195" cy="195" r="141"/>
+</g>
+<g id="icon">
+	<g>
+		<g>
+			<path class="st2" d="M155.6,247.3c-10.1,0-18.9-5-23.1-13.6c-10.1-21,5.4-37.4,21.7-54.7c1.2-1.2,2.4-2.5,3.6-3.8
+				c5.3-5.7,5.2-11.5,3.5-14.8c-1.8-3.4-5.5-4.9-10.2-4.2c-16.5,2.6-21.2,26.4-21.2,26.6l-11.9-2.2c0.3-1.3,6.4-32.3,31.2-36.3
+				c9.8-1.6,18.5,2.4,22.7,10.4c4.7,8.9,2.6,20.1-5.3,28.6c-1.2,1.3-2.4,2.6-3.6,3.8c-16.7,17.8-25.9,28.5-19.6,41.4
+				c3.3,6.8,11.1,7.6,16.9,6.3c9.2-2.1,19.8-11.1,19.7-29.5c-0.2-28.1,16.2-41.8,30.2-44.9c14.5-3.2,28.4,3.6,34.7,17
+				c1.3,2.8,2.3,5.4,3.1,8.1c13.3,0.7,25.5,4.3,26,4.4l-3.4,11.5c-0.1,0-9.7-2.8-20.6-3.8c0.5,16.5-8.6,28.9-20.1,34.7
+				c-11.9,6-24,3.8-28.9-5.2c-3.1-5.6-1.9-14.7,2.9-22.5c7.9-13,21.3-17.4,31.5-18.8c-0.4-1.2-0.9-2.4-1.4-3.4
+				c-3.9-8.3-12.2-12.4-21.1-10.4c-9.7,2.2-21,12.1-20.8,33.1c0.2,25.5-15.6,38.1-29,41.3C160.5,247,158,247.3,155.6,247.3z
+				 M237.8,197.7c-14,1.5-20.6,8.5-23.4,12.9c-3.3,5.2-3.4,9.8-2.9,10.9c1.6,2.9,7.3,3,13,0.2C235.3,216.2,238.3,206.6,237.8,197.7z
+				"/>
+		</g>
+		<rect x="118" y="144" class="st4" width="156" height="104"/>
+	</g>
+</g>
+</svg>
diff --git a/qml/images/FloatingButton_Unavailable.svg b/qml/images/FloatingButton_Unavailable.svg
new file mode 100644
index 0000000..d8149b5
--- /dev/null
+++ b/qml/images/FloatingButton_Unavailable.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="390px" height="390px" viewBox="0 0 390 390" style="enable-background:new 0 0 390 390;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.3;enable-background:new    ;}
+	.st1{opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:none;}
+</style>
+<g id="Unavailable">
+	<g>
+		<circle class="st0" cx="195" cy="195" r="191"/>
+		<g class="st1">
+			<path class="st2" d="M195,4c105.5,0,191,85.5,191,191s-85.5,191-191,191S4,300.5,4,195S89.5,4,195,4 M195,0
+				c-26.3,0-51.9,5.2-75.9,15.3c-23.2,9.8-44.1,23.9-62,41.8s-32,38.8-41.8,62C5.2,143.1,0,168.7,0,195s5.2,51.9,15.3,75.9
+				c9.8,23.2,23.9,44.1,41.8,62s38.8,32,62,41.8c24,10.2,49.6,15.3,75.9,15.3s51.9-5.2,75.9-15.3c23.2-9.8,44.1-23.9,62-41.8
+				s32-38.8,41.8-62c10.2-24,15.3-49.6,15.3-75.9s-5.2-51.9-15.3-75.9c-9.8-23.2-23.9-44.1-41.8-62s-38.8-32-62-41.8
+				C246.9,5.2,221.3,0,195,0L195,0z"/>
+		</g>
+	</g>
+</g>
+<g id="icon">
+	<g>
+		<g>
+			<path class="st2" d="M155.6,247.3c-10.1,0-18.9-5-23.1-13.6c-10.1-21,5.4-37.4,21.7-54.7c1.2-1.2,2.4-2.5,3.6-3.8
+				c5.3-5.7,5.2-11.5,3.5-14.8c-1.8-3.4-5.5-4.9-10.2-4.2c-16.5,2.6-21.2,26.4-21.2,26.6l-11.9-2.2c0.3-1.3,6.4-32.3,31.2-36.3
+				c9.8-1.6,18.5,2.4,22.7,10.4c4.7,8.9,2.6,20.1-5.3,28.6c-1.2,1.3-2.4,2.6-3.6,3.8c-16.7,17.8-25.9,28.5-19.6,41.4
+				c3.3,6.8,11.1,7.6,16.9,6.3c9.2-2.1,19.8-11.1,19.7-29.5c-0.2-28.1,16.2-41.8,30.2-44.9c14.5-3.2,28.4,3.6,34.7,17
+				c1.3,2.8,2.3,5.4,3.1,8.1c13.3,0.7,25.5,4.3,26,4.4l-3.4,11.5c-0.1,0-9.7-2.8-20.6-3.8c0.5,16.5-8.6,28.9-20.1,34.7
+				c-11.9,6-24,3.8-28.9-5.2c-3.1-5.6-1.9-14.7,2.9-22.5c7.9-13,21.3-17.4,31.5-18.8c-0.4-1.2-0.9-2.4-1.4-3.4
+				c-3.9-8.3-12.2-12.4-21.1-10.4c-9.7,2.2-21,12.1-20.8,33.1c0.2,25.5-15.6,38.1-29,41.3C160.5,247,158,247.3,155.6,247.3z
+				 M237.8,197.7c-14,1.5-20.6,8.5-23.4,12.9c-3.3,5.2-3.4,9.8-2.9,10.9c1.6,2.9,7.3,3,13,0.2C235.3,216.2,238.3,206.6,237.8,197.7z
+				"/>
+		</g>
+		<rect x="118" y="144" class="st3" width="156" height="104"/>
+	</g>
+</g>
+</svg>
diff --git a/resources.qrc b/resources.qrc
index e0bf1f8..1dedbbf 100644
--- a/resources.qrc
+++ b/resources.qrc
@@ -19,5 +19,10 @@
         <file>qml/images/settings.png</file>
         <file>qml/BusyIndicator.qml</file>
         <file>qml/images/spinner.png</file>
+        <file>qml/AutoScroller.qml</file>
+        <file>qml/HandwritingModeButton.qml</file>
+        <file>qml/images/FloatingButton_Active.svg</file>
+        <file>qml/images/FloatingButton_Available.svg</file>
+        <file>qml/images/FloatingButton_Unavailable.svg</file>
     </qresource>
 </RCC>