QML Keyboard for touch screen

kyleplattner

Is there a onscreen keyboard made with QML that I can steal for the UI of a touch screen display unit?

mario

Please post to this thread if you find a solution. I would also like to have one

alexander

make it:) Example:
@
import Qt 4.7

Grid {
id: keyboard
width: 360
height: 360

property string keys: ""

signal hideKeyboard()
signal letterClicked(string letter)

rows: 6
columns: 5
spacing: 1

Repeater {
    model: keys.length + 1
    Button {
        width: 70; height: 70
        label: {
            if ( index == 0 )
                return "<"
            else
                keys.charAt( index - 1 );
        }
        onClicked: {
            if ( index == 0 )
                hideKeyboard()
            else {
                addLetter( label )
            }
        }
    }
}

}

@

kyleplattner

Alexander,

What is behind your Button component?

alexander

@Button.qml

Rectangle {
id: mainButton
width: 180
height: 70
color: "#00000000"

property alias label: text1.text
property alias image: button_image.source


signal clicked()

Rectangle {
    id: rectangle1
    radius: 17
    gradient: Gradient {
        GradientStop {
            id: gradientstop1
            position: 0
            color: "#ffffff"
        }

        GradientStop {
            id: gradientstop2
            position: 1
            color: "#959595"
        }
    }
    anchors.rightMargin: 2
    anchors.leftMargin: 2
    anchors.bottomMargin: 2
    anchors.topMargin: 2
    border.width: 5
    border.color: "#000000"
    anchors.fill: parent
    smooth: true

    Image {
        z: 0
        id: button_image
        anchors.centerIn: parent
    }

    Text {
        id: text1
        x: 34
        y: 27
        z: 1
        width: 80
        height: 20
        text: "Button Label"
        anchors.centerIn: parent
        font.bold: true
        font.pixelSize: 19
        smooth: true
        verticalAlignment: "AlignVCenter"
        horizontalAlignment: "AlignHCenter"
    }
}

MouseArea {
    onClicked: mainButton.clicked()
    id: mouse_area1
    anchors.fill: parent
}
states: [
    State {
        name: "State1"

        when: mouse_area1.pressed

        PropertyChanges {
            target: gradientstop1
            position: 0
            color: "#959595"
        }

        PropertyChanges {
            target: gradientstop2
            position: 1
            color: "#ffffff"
        }
    }
]

}@

kyleplattner

Alexander,
I am starting to work through a solution for this and your example doesn't make sense to me. You define a letterclicked() signal but never use it and you use a addletter() but never define it. Could you express an example in more simple terms of how I can append each letter press to a string that is both displayed to the user and able to be saved out?

alexander

It's my mistake:)
@import Qt 4.7

Grid {
id: keyboard
width: 360
height: 360

property string keys: ""

signal hideKeyboard()
signal letterClicked(string letter)

rows: 6
columns: 5
spacing: 1

Repeater {
    model: keys.length + 1
    Button {
        width: 70; height: 70
        label: {
            if ( index == 0 )
                return "<"
            else
                keys.charAt( index - 1 );
        }
        onClicked: {
            if ( index == 0 )
                hideKeyboard()
            else {
                letterClicked( label )
            }
        }
    }
}

}@

kyleplattner

What if I set it up such that each letter has its on mouse button. How can I just append to a common string when a button is pressed?

I am not understanding how your example could be outputted for the user to see.

Thanks,

Kyle

alexander

@ TextInput {
id: textInput1;
text: "Sample text"
}

 Keyboard {
     onLetterClicked: textInput1.text = textInput1.text + letter
 }@

where Keyboard is file with
@import Qt 4.7

Grid {
id: keyboard
...
}@

parancibia

Try with the "CLKeyboard Component ":https://projects.forum.nokia.com/colibri/wiki/CLKeyboard included in Colibri (Qt Quick COmponent LIBRary)

!http://realnorth.net/share/ColibryKeyboardDemo.png(CLKeyboard Component)!

mario

Looking good! What licenses is the component released under? BSD-like?

2beers

[quote author="parancibia" date="1291292000"]Try with the "CLKeyboard Component ":https://projects.forum.nokia.com/colibri/wiki/CLKeyboard included in Colibri (Qt Quick COmponent LIBRary)

!http://realnorth.net/share/ColibryKeyboardDemo.png(CLKeyboard Component)![/quote]

can you upload somewhere the source code cause I can't download it from the site. I tried 3 SVN clients without any luck.

Thanks

parancibia

Yes, I have had the same issue with SVN, try download from this "link":http://realnorth.net/share/colibri.tar.gz

parancibia

[quote author="mario" date="1291292466"]Looking good! What licenses is the component released under? BSD-like?[/quote]

I not find any reference to the license in the site, but the source code have the following disclaimer

@
/**

Nokia and Nokia Connecting People are registered trademarks of
Nokia Corporation.
Java and all Java-based marks are trademarks or registered
trademarks of
Sun Microsystems, Inc. Other product and company names
mentioned herein may be
trademarks or trade names of their respective owners.
Subject to the conditions below, you may, without charge:
· Use, copy, modify and/or merge copies of this software and

associated documentation files (the "Software")

· Publish, distribute, sub-licence and/or sell new software

derived from or incorporating the Software.

This file, unmodified, shall be included with all copies or
substantial portions
of the Software that are distributed in source code form.
The Software cannot constitute the primary value of any new
software derived
from or incorporating the Software.
Any person dealing with the Software shall not misrepresent
the source of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A
PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
@

xsacha

Just noticed...

[quote author="paulo" date="1291296977"]
@

Copyright © 2010 Digia Plc
@
[/quote]
Digia has been doing a lot of work in Qt here.
Their "Flow'd":http://www.flowd.com application, their Qt4.5 "Web Browser":http://www.digia.com/browser and plenty of other stuff on their website.
I wonder if they have used this QML keyboard in anything. They certainly didn't use it in Flowd.

rodrigob

Where is there an example on how to use the CLKeyboard ?

I would like to use it "linked to" a TextInput item. How do I create "the link" ?

Thanks for your answer.

rotoZOOM

rodrigob, I've made a simple virtual keyboard for touchscreen displays.
There are also some example to use it with Qt.
https://projects.developer.nokia.com/vk

aabc

How do you delete letters with this keyboard ?

rotoZOOM

There is exists Backspace key on the top/right corner.

aabc

And you just do text += <the backspace code> ?