QML Keyboard for touch screen
-
Please post to this thread if you find a solution. I would also like to have one
-
make it:) Example:
@
import Qt 4.7Grid {
id: keyboard
width: 360
height: 360property 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.7Grid {
id: keyboard
width: 360
height: 360property 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.7Grid {
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.
- Copyright © 2010 Digia Plc
-
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.