I am using Qt 5.12 and QtQuick.VirtualKeyboard 2.3 to develop an application on an embedded device. The problem is:
When I click the input field to enter something, only the inputpanel pops up, but there are no keys on the inputpanel. So the screen only shows a black rectangle for the virtual keyboard(As shown in the picture). I am pretty sure the black rectangle is the inputpanel. Because if I change the size of InputPanel in my code, the size of this black rectangle will also change.
I am wondering if anyone has met this problem before. What are the possible reasons for this issue? Are there any methods to display keys on inputPanel? Thanks!
This is image for the black rectangle shown on screen
This is the code for InputPanel:
InputPanel {
id: inputPanel
z: 99
x: 0
y: root.height
width: root.width*2.1
states: State {
name: "visible"
when: inputPanel.active
PropertyChanges {
target: inputPanel
y: root.height - inputPanel.height
}
}
transitions: Transition {
from: ""
to: "visible"
reversible: true
ParallelAnimation {
NumberAnimation {
properties: "y"
duration: 250
easing.type: Easing.InOutQuad
}
}
}
}
}
This is the first line of my main.cpp file:
qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));
And this is the configurations in .pro file:
static {
QT += svg
QTPLUGIN += qtvirtualkeyboardplugin
}
CONFIG += disable-desktop
Related
I'm using debian 11, with a Xorg server running and Qt5.15.2 installed.
Very basic question that I don't know how to tackle: let's say we have a simple QML file with a InputPanel and a Textfield:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.VirtualKeyboard 2.15
import QtQuick.Controls 1.4
Window {
id: window
width: Screen.width
height: Screen.height
visible: true
title: qsTr("Hello World")
InputPanel {
id: inputPanel
z: 99
x: 0
y: window.height
width: window.width
states: State {
name: "visible"
when: inputPanel.active
PropertyChanges {
target: inputPanel
y: window.height - inputPanel.height
}
}
transitions: Transition {
from: ""
to: "visible"
reversible: true
ParallelAnimation {
NumberAnimation {
properties: "y"
duration: 250
easing.type: Easing.InOutQuad
}
}
}
}
TextField {
placeholderText: qsTr("Enter name")
}
}
I've already done in the main.cpp :
qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));
And already inserted this line in the .pro file of my project:
QT += quick virtualkeyboard
The issue I found is: VirtualKeyboard does not type anything if I use the touch screen (it correctly appears but no key is prompted and warning "input method is not set" is raised), untill I click with my USB mouse. Then everything is fine, the virtual keyboard prompts and all is fine.
My question is: why? Is it something with X11, debian or something else(like xinput?)?
I tried some configuration of the Xserver for input handling, and adding focus to some QML elements but none works
I made a QML button component and I used a component named ColorImage for the icon. After searching for a way to change image color. I found out that Qt no longer support ColorOverlay
Hover, I just typed in 'color' in Qt Design Studio and ColorImage popped up. I tried to find documentation online but couldn't find anything. However, when I decided to try it, it just works as I expected:
This is the relevant code from my button:
contentItem: ColorImage {
id: buttonIcon
source: imageSource
fillMode: Image.PreserveAspectFit
height: parent.height
color: iconColor
anchors.fill: actionBarButton
anchors.margins: 4
}
When the hovered state from the button becomes true it enables the following state:
State {
when: (hovered && !checked)
name: "hoveredNotChecked"
PropertyChanges {
target: buttonIcon
color: "white"
}
PropertyChanges {
target: buttonBackground
color: iconColor
}
},
which swaps the icon and the background color on the button.
This works in the preview of the Qt Designer. However, when I try to run it from Pyside, it tells me: ColorImage is not a type and simply fails to load the button.
I tried to find documentation about ColorImage to figure out maybe there's an import missing. However, I could not turn up anything. Qt Designer's internal help did not turn up anything as well. It is as if this component doesn't exist. But it does, and it works in Design Studio.
Here is the full code for my button:
Button {
id: actionBarButton
property color iconColor: "red"
property color backgroundColor: "blue"
property string toolTipText: "Play video!"
property string imageSource: "images/round_play_arrow_white_36dp.png"
property string imageSourceChecked: "images/round_play_arrow_white_36dp.png"
states: [
State {
when: (hovered && !checked)
name: "hoveredNotChecked"
PropertyChanges {
target: buttonIcon
color: "white"
}
PropertyChanges {
target: buttonBackground
color: iconColor
}
},
State {
when: (hovered && checked)
name: "hoveredChecked"
PropertyChanges {
target: buttonIcon
source: imageSourceChecked
color: "white"
}
PropertyChanges {
target: buttonBackground
color: iconColor
}
},
State {
when: checked
name: "checked"
PropertyChanges {
target: buttonIcon
source: imageSourceChecked
}
}
]
transitions: Transition {
ColorAnimation {
duration: 300
}
}
contentItem: ColorImage {
id: buttonIcon
source: imageSource
fillMode: Image.PreserveAspectFit
height: parent.height
color: iconColor
anchors.fill: actionBarButton
anchors.margins: 4
}
onHoveredChanged: {
}
background: Rectangle {
id: buttonBackground
color: backgroundColor
anchors.fill: actionBarButton
}
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: actionBarButton.toolTipText
}
This is how it looks in the designer:
Can someone help me figure out why it complains about ColorImagenot being a type when I try to launch?
Edit:
The imports in the file above:
import QtQuick 2.15
import QtQuick.Controls 2.15
ColorImage is a Qt internal private component:
https://github.com/qt/qtdeclarative/blob/dev/src/quickcontrols2impl/qquickcolorimage.cpp
It doesn't appear to be supported for non-internal use.
If you really want to use it, try import QtQuick.Controls.impl 2.15
Note that ColorOverlay is available again in Qt 6.2 in Qt5Compat:
https://doc.qt.io/qt-6/qml-qt5compat-graphicaleffects-coloroverlay.html
It will eventually be replaced by Qt Quick MultiEffect:
https://marketplace.qt.io/products/qt-quick-multieffect
I have the following QML file. I wan't the rectangle myRect to slide in from the right when the root item is clicked (simplified setup). What actually happens is that myRect appears immediately when the root item is clicked.
I checked the running property on the transition and that seems to be fine. It logs true when I click the root item, and then false after 2 seconds.
Does anyone know why the x property doesn't gradually change?
import QtQuick 2.7
Item{
id: root
MouseArea{
anchors.fill: parent
onClicked: {
myRect.state = "visible"
}
}
Rectangle{
id: myRect
width: root.width
height: root.height
state: "hidden"
color: "yellow"
states: [
State {
name: "hidden"
PropertyChanges{
target: myRect
x: myRect.width
}
},
State {
name: "visible"
PropertyChanges{
target: myRect
x: 0
}
}
]
transitions: [
Transition {
NumberAnimation{
duration: 2000
}
onRunningChanged: {
console.log("Running:", running)
}
}
]
}
}
You have to indicate the property, in your case "x"
NumberAnimation{
duration: 2000
properties: "x"
}
I want to create an animation to move (or resize) my application Window built using QML.
I have the following code (most of it created by default when we create a QT quick Controls application:
main.cpp
#include <QApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();
}
MainForm.ui.qml
import QtQuick 2.6
import QtQuick.Controls 1.5
import QtQuick.Layouts 1.3
Item {
width: 640
height: 480
property alias button1: button1
property alias button2: button2
RowLayout {
anchors.centerIn: parent
Button {
id: button1
text: qsTr("Press Me 1")
}
Button {
id: button2
text: qsTr("Press Me 2")
}
}
}
main.qml
import QtQuick 2.6
import QtQuick.Controls 1.5
import QtQuick.Dialogs 1.2
ApplicationWindow {
id: mainWindow
visible: true
width: 640
height: 480
title: qsTr("Hello World")
flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint
menuBar: MenuBar {
Menu {
title: qsTr("File")
MenuItem {
text: qsTr("&Open")
onTriggered: console.log("Open action triggered");
}
MenuItem {
text: qsTr("Exit")
onTriggered: Qt.quit();
}
}
}
MainForm {
anchors.fill: parent
button1.onClicked: Qt.quit();
button2.onClicked: state = "other";
}
transitions: [
Transition {
from: "*"
to: "other"
NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 2000 }
}
]
states: [
State {
name: "other"
PropertyChanges {
target: mainWindow
x: x + 200
}
}
]
MessageDialog {
id: messageDialog
function show(caption) {
messageDialog.text = caption;
messageDialog.open();
}
}
}
With this code, I was simply trying to move my window 200 pixels to the right. When I try to run it, I get qrc:/main.qml:42 Cannot assign to non-existent property "states". I believe that is weird, because when I start typing "states" and choose to auto-complete, it builds to me the whole structure, so I thought it should exist...
I'm new to QML, and I'm not fully familiar with the several options of animations that exists. This one I've tried based on the example that comes with QT creator (animation.pro - code from transitions).
I believe it should be quite simple, right? Could you help me with this?
Qt Creator has a feature where you can insert code snippets using certain keywords. You can see which snippets are available by going to Tools > Options > Text Editor > Snippets.
Snippets will show up as red in the auto completion popup, and regular properties (or types, as is the case below) will show up as green:
So, ApplicationWindow doesn't have a states property. If you're ever in doubt, go to the documentation for the type you're interested in (e.g. http://doc.qt.io/qt-5/qml-qtquick-controls-applicationwindow.html) and click on the link that says "List of all members, including inherited members". This will show you all properties, functions, etc. belonging
to that type.
If you want to animate the window's position, you can use a NumberAnimation without using states:
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.5
ApplicationWindow {
id: window
width: 400
height: 400
visible: true
NumberAnimation {
id: xyAnimation
target: window
properties: "x,y"
easing.type: Easing.InOutQuad
duration: 2000
to: 500
}
Button {
text: "Start"
onClicked: xyAnimation.start()
}
}
state is a property in Item, however ApplicationWindow is not an Item. To add state/transition to an non-Item type, use StateGroup:
ApplicationWindow {
id: mainWindow
//your code...
MainForm {
button2.onClicked: { myWindowStates.state = "other";}
}
StateGroup {
id: myWindowStates
transitions: [
Transition {
from: "*"; to: "other"
NumberAnimation {
properties: "x,y"; easing.type: Easing.Linear;
duration: 2000
}
}
]
states: [
State {
name: "other"
PropertyChanges {
target: mainWindow
x: mainWindow.x + 200
explicit: true //Remember to set this
}
}
]
}
}
Remember to set PropertyChange.explict to true, otherwise the state behavior is wrong and your window will disappear after the transition finished.
I want to create some sort of Vocabulary Trainer.
I have a Card QML File what shoud represent some kind of a record card where you can see the Vocabulary. When you've answered, the card should turn around 180° and a new Word/Text should be visible on it.
So far I've created a Rectangle for the Card and a Transformation for the Rotation split up in two PropertyAnimations.
For the sake of simplicity I just want the animation to happen when I'm clicking on the Card. Then the Card turns from 0 to 90 degrees. Afterwards the text should be changed. And at last the Card should turn from -90 to 0 degrees. So I'm looking for a logic that allows me to execute an animation, changes a property (text) instantly and executing another animation as a sequence.
Here is my Code so far:
import QtQuick 2.2
import QtGraphicalEffects 1.0
Item {
Rectangle {
id: card
anchors.fill: parent
border.width: 1
border.color: "grey"
antialiasing: true
Text {
id: question
text: "test test test"
anchors.centerIn: card
}
transform: Rotation {
id: rotation
origin.x: (card.width / 2)
origin.y: (card.height / 2)
axis {
x: 0
y: 1
z: 0
}
angle: 0
}
MouseArea {
anchors.fill: card
onClicked: {
// Code for Turning Card arround
rotate_away.start()
question.text = "abcabcabc"
rotate_new.start()
}
}
PropertyAnimation {
id: rotate_away
target: rotation
properties: "angle"
from: 0
to: 90
duration: 1000
}
PropertyAnimation {
id: rotate_new
target: rotation
properties: "angle"
from: -90
to: 0
duration: 1000
}
}
}
So the problem is this part:
rotate_away.start()
question.text = "abcabcabc"
rotate_new.start()
The text changes but only the 2'nd animation will be executed.
I tried
while (rotate_away.running) {}
to wait for the 1st animation but then the application gets stuck.
I think the animations should be played sequently by using SequentialAnimation. Please revisit your code as follows:
MouseArea {
anchors.fill: card
onClicked: {
// Code for Turning Card around
// rotate_away.start()
// question.text = "abcabcabc"
// rotate_new.start()
fullRotate.start();
}
}
SequentialAnimation {
id: fullRotate
PropertyAnimation {
id: rotate_away
target: rotation
properties: "angle"
from: 0
to: 90
duration: 1000
}
PropertyAction {
target: question
property: "text"
value: "abcabcabc"
}
PropertyAnimation {
id: rotate_new
target: rotation
properties: "angle"
from: -90
to: 0
duration: 1000
}
}
Also, I recommend Flipable which is meant for flipping effects.