Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    QML Keyboard for touch screen

    QML and Qt Quick
    12
    37
    46822
    Loading More Posts
    • 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
      kyleplattner last edited by

      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 Reply Quote 0
      • M
        mario last edited by

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

        1 Reply Last reply Reply Quote 0
        • A
          alexander last edited by

          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 Reply Quote 0
          • K
            kyleplattner last edited by

            Alexander,

            What is behind your Button component?

            1 Reply Last reply Reply Quote 0
            • A
              alexander last edited by

              @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 Reply Quote 0
              • K
                kyleplattner last edited by

                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 Reply Quote 0
                • A
                  alexander last edited by

                  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 Reply Quote 0
                  • K
                    kyleplattner last edited by

                    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 Reply Quote 0
                    • A
                      alexander last edited by

                      @ 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 Reply Quote 0
                      • P
                        parancibia last edited by

                        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 Reply Quote 0
                        • M
                          mario last edited by

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

                          1 Reply Last reply Reply Quote 0
                          • 2
                            2beers last edited by

                            [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 Reply Quote 0
                            • P
                              parancibia last edited by

                              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 Reply Quote 0
                              • P
                                parancibia last edited by

                                [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 Reply Quote 0
                                • X
                                  xsacha last edited by

                                  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 Reply Quote 0
                                  • R
                                    rodrigob last edited by

                                    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 Reply Quote 0
                                    • R
                                      rotoZOOM last edited by

                                      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 Reply Quote 0
                                      • A
                                        aabc last edited by

                                        How do you delete letters with this keyboard ?

                                        1 Reply Last reply Reply Quote 0
                                        • R
                                          rotoZOOM last edited by

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

                                          1 Reply Last reply Reply Quote 0
                                          • A
                                            aabc last edited by

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

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post