QML Keyboard for touch screen



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



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



  • 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 )
                }
            }
        }
    }
    

    }

    @



  • Alexander,

    What is behind your Button component?



  • @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"
            }
        }
    ]
    

    }@



  • 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?



  • 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 )
                }
            }
        }
    }
    

    }@



  • 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



  • @ 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
    ...
    }@



  • 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)!



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



  • [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



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



  • [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

    @
    /**

    • Copyright © 2010 Digia Plc
    • Copyright © 2010 Nokia Corporation
    • All rights reserved.
    • 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.
      */
      @


  • 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.


  • 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.



  • 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



  • How do you delete letters with this keyboard ?



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



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



  • No. This is just UI. It sends signal which of key is pressed.
    In case of backspace pressed it sends sigButtonPressed ('backspace').
    Your application should handle it.
    You can see it from my example.



  • Can I use it with QML TextInput ?



  • Yes. You can manual handle sigButtonPressed and in case of button=='backspace' remove character just before cursorPosition of the TextInput.



  • Isnt there is something more generic that use sendEvent(QKeyEvent) that simulate the real Keyboard ?



  • In my example I do
    QCoreApplication::postEvent(_target, key_event_press);
    QCoreApplication::postEvent(_target, key_event_release);

    that, I believe, emulate click on to the key.



  • What is the _target ? Is it the TextInput ?



  • It is QWidget object, that setted by client and accept QKeyEvent



  • Did you try it with a QML Item ?



  • No, I didn't. What's difference between QML Item and QWidget*?
    If you can obtain QTextInput QWidget pointer (and you can), than it'll be work.



  • I try it and it din't work



  • Ok, as soon as I have time I'll check it.



  • Thanks.
    I'll wait



  • you can also try maliit. Its a full framework for input methods. Has virtual keyboards also. I think they have QML keyboards as well now.



  • What is maliit ?





  • For sending emulated events to QML items, see http://qt-project.org/forums/viewthread/17360/



  • i know its pretty late,
    but i just stumbled upon colibri and i had (as rodrigob) quite a hard time to figure how to use clkeyboard together with a lineedit. But it is possible by
    letting the lineedit read the keyboard internal text.
    So basically the lineedit is just used to show a text which belongs to the keyboard itself!

    @CLLineEdit{
    id: textInput
    text: keyboard.text
    }
    Rectangle{
    height: 100
    width: 200
    color: "black"
    CLKeyboard{
    id: keyboard
    anchors.fill: parent
    }
    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.