October 27, 2010

kyleplattner kyleplattner
Lab Rat
242 posts
  • Group Owner L1

QML Keyboard for touch screen

Page  
1
2
3
Next

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

36 replies

October 28, 2010

mario mario
Lab Rat
240 posts
  • Certified developer
  • Groupie L1

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

October 28, 2010

Alexander Kuchumov Alexander Kuchumov
Lab Rat
377 posts
  • Certified Specialist
  • Beta tester

make it:) Example:

  1. import Qt 4.7
  2.  
  3. Grid {
  4.     id: keyboard
  5.     width: 360
  6.     height: 360
  7.  
  8.     property string keys: ""
  9.  
  10.     signal hideKeyboard()
  11.     signal letterClicked(string letter)
  12.  
  13.     rows: 6
  14.     columns: 5
  15.     spacing: 1
  16.  
  17.     Repeater {
  18.         model: keys.length + 1
  19.         Button {
  20.             width: 70; height: 70
  21.             label: {
  22.                 if ( index == 0 )
  23.                     return "<"
  24.                 else
  25.                     keys.charAt( index - 1 );
  26.             }
  27.             onClicked: {
  28.                 if ( index == 0 )
  29.                     hideKeyboard()
  30.                 else {
  31.                     addLetter( label )
  32.                 }
  33.             }
  34.         }
  35.     }
  36. }

October 28, 2010

kyleplattner kyleplattner
Lab Rat
242 posts
  • Group Owner L1

Alexander,

What is behind your Button component?

October 29, 2010

Alexander Kuchumov Alexander Kuchumov
Lab Rat
377 posts
  • Certified Specialist
  • Beta tester

  1. Button.qml
  2.  
  3. Rectangle {
  4.     id: mainButton
  5.     width: 180
  6.     height: 70
  7.     color: "#00000000"
  8.  
  9.     property alias label: text1.text
  10.     property alias image: button_image.source
  11.  
  12.  
  13.     signal clicked()
  14.  
  15.     Rectangle {
  16.         id: rectangle1
  17.         radius: 17
  18.         gradient: Gradient {
  19.             GradientStop {
  20.                 id: gradientstop1
  21.                 position: 0
  22.                 color: "#ffffff"
  23.             }
  24.  
  25.             GradientStop {
  26.                 id: gradientstop2
  27.                 position: 1
  28.                 color: "#959595"
  29.             }
  30.         }
  31.         anchors.rightMargin: 2
  32.         anchors.leftMargin: 2
  33.         anchors.bottomMargin: 2
  34.         anchors.topMargin: 2
  35.         border.width: 5
  36.         border.color: "#000000"
  37.         anchors.fill: parent
  38.         smooth: true
  39.  
  40.         Image {
  41.             z: 0
  42.             id: button_image
  43.             anchors.centerIn: parent
  44.         }
  45.  
  46.         Text {
  47.             id: text1
  48.             x: 34
  49.             y: 27
  50.             z: 1
  51.             width: 80
  52.             height: 20
  53.             text: "Button Label"
  54.             anchors.centerIn: parent
  55.             font.bold: true
  56.             font.pixelSize: 19
  57.             smooth: true
  58.             verticalAlignment: "AlignVCenter"
  59.             horizontalAlignment: "AlignHCenter"
  60.         }
  61.     }
  62.  
  63.     MouseArea {
  64.         onClicked: mainButton.clicked()
  65.         id: mouse_area1
  66.         anchors.fill: parent
  67.     }
  68.     states: [
  69.         State {
  70.             name: "State1"
  71.  
  72.             when: mouse_area1.pressed
  73.  
  74.             PropertyChanges {
  75.                 target: gradientstop1
  76.                 position: 0
  77.                 color: "#959595"
  78.             }
  79.  
  80.             PropertyChanges {
  81.                 target: gradientstop2
  82.                 position: 1
  83.                 color: "#ffffff"
  84.             }
  85.         }
  86.     ]
  87. }

November 22, 2010

kyleplattner kyleplattner
Lab Rat
242 posts
  • Group Owner L1

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?

November 22, 2010

Alexander Kuchumov Alexander Kuchumov
Lab Rat
377 posts
  • Certified Specialist
  • Beta tester

It’s my mistake:)

  1. import Qt 4.7
  2.  
  3. Grid {
  4.     id: keyboard
  5.     width: 360
  6.     height: 360
  7.  
  8.     property string keys: ""
  9.  
  10.     signal hideKeyboard()
  11.     signal letterClicked(string letter)
  12.  
  13.     rows: 6
  14.     columns: 5
  15.     spacing: 1
  16.  
  17.     Repeater {
  18.         model: keys.length + 1
  19.         Button {
  20.             width: 70; height: 70
  21.             label: {
  22.                 if ( index == 0 )
  23.                     return "<"
  24.                 else
  25.                     keys.charAt( index - 1 );
  26.             }
  27.             onClicked: {
  28.                 if ( index == 0 )
  29.                     hideKeyboard()
  30.                 else {
  31.                     letterClicked( label )
  32.                 }
  33.             }
  34.         }
  35.     }
  36. }

November 22, 2010

kyleplattner kyleplattner
Lab Rat
242 posts
  • Group Owner L1

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

November 23, 2010

Alexander Kuchumov Alexander Kuchumov
Lab Rat
377 posts
  • Certified Specialist
  • Beta tester

  1.      TextInput {
  2.          id: textInput1;
  3.          text: "Sample text"
  4.      }
  5.      
  6.      Keyboard {
  7.          onLetterClicked: textInput1.text = textInput1.text + letter
  8.      }

where Keyboard is file with

  1. import Qt 4.7
  2.  
  3. Grid {
  4.     id: keyboard
  5. ...
  6. }

December 2, 2010

paulo paulo
Hobby Entomologist
174 posts
  • Group Owner L1
  • Groupie L1

Try with the CLKeyboard Component [projects.forum.nokia.com] included in Colibri (Qt Quick COmponent LIBRary)

CLKeyboard Component

December 2, 2010

mario mario
Lab Rat
240 posts
  • Certified developer
  • Groupie L1

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

December 2, 2010

2beers 2beers
Lab Rat
149 posts
  • Groupie L1

parancibia wrote:
Try with the CLKeyboard Component [projects.forum.nokia.com] included in Colibri (Qt Quick COmponent LIBRary)

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

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

December 2, 2010

paulo paulo
Hobby Entomologist
174 posts
  • Group Owner L1
  • Groupie L1

Yes, I have had the same issue with SVN, try download from this link [realnorth.net]

December 2, 2010

paulo paulo
Hobby Entomologist
174 posts
  • Group Owner L1
  • Groupie L1
mario wrote:
Looking good! What licenses is the component released under? BSD-like?

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

  1. /**
  2.  *  Copyright © 2010 Digia Plc
  3.  *  Copyright © 2010 Nokia Corporation
  4.  *
  5.  *  All rights reserved.
  6.  *
  7.  *  Nokia and Nokia Connecting People are registered trademarks of
  8.  *  Nokia Corporation.
  9.  *  Java and all Java-based marks are trademarks or registered
  10.  *  trademarks of
  11.  *  Sun Microsystems, Inc. Other product and company names
  12.  *  mentioned herein may be
  13.  *  trademarks or trade names of their respective owners.
  14.  *
  15.  *
  16.  *  Subject to the conditions below, you may, without charge:
  17.  *
  18.  *  ·  Use, copy, modify and/or merge copies of this software and
  19.  *     associated documentation files (the "Software")
  20.  *
  21.  *  ·  Publish, distribute, sub-licence and/or sell new software
  22.  *     derived from or incorporating the Software.
  23.  *
  24.  *
  25.  *  This file, unmodified, shall be included with all copies or
  26.  *  substantial portions
  27.  *  of the Software that are distributed in source code form.
  28.  *
  29.  *  The Software cannot constitute the primary value of any new
  30.  *  software derived
  31.  *  from or incorporating the Software.
  32.  *
  33.  *  Any person dealing with the Software shall not misrepresent
  34.  *  the source of the Software.
  35.  *
  36.  *  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
  37.  *  KIND, EXPRESS OR IMPLIED,
  38.  *  INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  39.  *  MERCHANTABILITY, FITNESS FOR A
  40.  *  PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  41.  *  AUTHORS OR COPYRIGHT
  42.  *  HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
  43.  *  WHETHER IN AN ACTION
  44.  *  OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  45.  *  CONNECTION WITH THE
  46.  *  SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  47.  */

December 3, 2010

xsacha xsacha
Lab Rat
517 posts
  • Groupie L1
  • Qt DevNet Moderator

Just noticed…

paulo wrote:

  1.  *  Copyright © 2010 Digia Plc


Digia has been doing a lot of work in Qt here.
Their Flow’d [flowd.com] application, their Qt4.5 Web Browser [digia.com] 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.

 Signature 

- Sacha

March 23, 2011

rodrigob rodrigob
Lab Rat
3 posts

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.

Page  
1
2
3
Next

  ‹‹ Video and Audio elements      QML Cheat Sheet ››

You must log in to post a reply. Not a member yet? Register here!

 
Selected by the fine Qt Content Robot based on tags and ratings.

Possibly related content

Wiki articles

Forum posts and FAQ

© 2013 Qt Project Hosting. Qt® and the Qt logo is a registered trade mark of Digia plc and/or its subsidiaries and is used pursuant to a license from Digia plc and/or its subsidiaries.
All other trademarks are property of their respective owners. Privacy Policy
This site is hosted by Gitorious AS. Your use of this web site is governed by these terms of service.

Qt Project Hosting, P.O. Box 4332 Nydalen, 0402 Oslo, Norway. Org. Nr. 997 447 913