Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML Keyboard for touch screen

QML Keyboard for touch screen

Scheduled Pinned Locked Moved QML and Qt Quick
37 Posts 12 Posters 49.7k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K Offline
    K Offline
    kyleplattner
    wrote on last edited by
    #1

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

    1 Reply Last reply
    0
    • M Offline
      M Offline
      mario
      wrote on last edited by
      #2

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

      1 Reply Last reply
      0
      • A Offline
        A Offline
        alexander
        wrote on last edited by
        #3

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

        }

        @

        1 Reply Last reply
        0
        • K Offline
          K Offline
          kyleplattner
          wrote on last edited by
          #4

          Alexander,

          What is behind your Button component?

          1 Reply Last reply
          0
          • A Offline
            A Offline
            alexander
            wrote on last edited by
            #5

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

            }@

            1 Reply Last reply
            0
            • K Offline
              K Offline
              kyleplattner
              wrote on last edited by
              #6

              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?

              1 Reply Last reply
              0
              • A Offline
                A Offline
                alexander
                wrote on last edited by
                #7

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

                }@

                1 Reply Last reply
                0
                • K Offline
                  K Offline
                  kyleplattner
                  wrote on last edited by
                  #8

                  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

                  1 Reply Last reply
                  0
                  • A Offline
                    A Offline
                    alexander
                    wrote on last edited by
                    #9

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

                    1 Reply Last reply
                    0
                    • P Offline
                      P Offline
                      parancibia
                      wrote on last edited by
                      #10

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

                      1 Reply Last reply
                      0
                      • M Offline
                        M Offline
                        mario
                        wrote on last edited by
                        #11

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

                        1 Reply Last reply
                        0
                        • 2 Offline
                          2 Offline
                          2beers
                          wrote on last edited by
                          #12

                          [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

                          1 Reply Last reply
                          0
                          • P Offline
                            P Offline
                            parancibia
                            wrote on last edited by
                            #13

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

                            1 Reply Last reply
                            0
                            • P Offline
                              P Offline
                              parancibia
                              wrote on last edited by
                              #14

                              [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.
                                */
                                @
                              1 Reply Last reply
                              0
                              • X Offline
                                X Offline
                                xsacha
                                wrote on last edited by
                                #15

                                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.
                                • Sacha
                                1 Reply Last reply
                                0
                                • R Offline
                                  R Offline
                                  rodrigob
                                  wrote on last edited by
                                  #16

                                  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.

                                  1 Reply Last reply
                                  0
                                  • R Offline
                                    R Offline
                                    rotoZOOM
                                    wrote on last edited by
                                    #17

                                    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

                                    1 Reply Last reply
                                    0
                                    • A Offline
                                      A Offline
                                      aabc
                                      wrote on last edited by
                                      #18

                                      How do you delete letters with this keyboard ?

                                      1 Reply Last reply
                                      0
                                      • R Offline
                                        R Offline
                                        rotoZOOM
                                        wrote on last edited by
                                        #19

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

                                        1 Reply Last reply
                                        0
                                        • A Offline
                                          A Offline
                                          aabc
                                          wrote on last edited by
                                          #20

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

                                          1 Reply Last reply
                                          0

                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Groups
                                          • Search
                                          • Get Qt Extensions
                                          • Unsolved