Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to use qtvirtualkeyboard with qwidget?



  • Hi, everyone. I know it supports two alternative integration methods for using the plugin: Desktop or Application. It works well with qml either Desktop or Application by add InputPanel to main.qml. But I have an app implemented by QWidget, I'm wondering if it possible to be integrated to the app implemented by QWidget? Like this(by the way, this is implemented qml):
    0_1525248459115_keyboard test.png



  • Did you ever figure this out? I am trying to do the same thing. I have a legacy application written using QWidgets. I want to add the QtVirtualKeyboard plugin. I have it working in Desktop mode. But I want to integrate it into the application as you have shown.

    Thanks,

    Steve



  • @stevemenke
    Sorry to be so late, I don't login this for a long time. I use a KeyboardPanel which is inherited from QQuichWidget to load a qml file which including the InputPanel. The KeyboardPanel should be a child of mainwindow, so that it couldbe shown over others children widgets. You can contact with me by email: vevinlong@163.com

    <Mainwindow>
    MainWindow::MainWindow(QWidget *parent)
    {
        ...
        m_pKeyboardPanel = KeyboardPanel::getInstance();
        m_pKeyboardPanel->setSource(QUrl(QStringLiteral("qrc:/inputpanel.qml")));
        m_pKeyboardPanel->setParent(this);
        ...
    }
    
    //you need install filter for every lineedit which needs keyboard
    bool MainWindow::eventFilter(QObject* watched, QEvent* event)
    {
        ...
        m_pKeyboardPanel->setNewPos(transformPoint(edit, getCurrentPage()), edit, getCurrentPage());
        ...
    }
    
    <KeyboardPanel >
    
    class KeyboardPanel : public QQuickWidget
    {
        Q_OBJECT
    public:
        static KeyboardPanel* getInstance();
        static QObject* qobject_singletontype_provider(QQmlEngine* engine, QJSEngine* scriptEngine);
        //set the KeyboardPanel shown pos of the page
        void setNewPos(const QPoint& point, QWidget* widget, QWidget* currentPage = nullptr);
        Q_INVOKABLE void hideInput();
    signals:
        
    public slots:
        
    private:
        explicit KeyboardPanel(QWidget* parent = nullptr);
        void setSmallKeyboardPos(const QPoint& point, const QWidget* widget);
        int checkXIsOutOfRange(int x);
        int checkYIsOutOfRange(int y);
        void setFullKeyboardInputPos(const QPoint& point, const QWidget* widget);
    private:
        static KeyboardPanel* ms_pSingleton;
        QWidget* m_pCurrentPage = nullptr;           //the page which it uses the KeyboardPanel 
        int m_movedHeight = 0;
    };
    

    Registe KeyboardPanel to qml

    qmlRegisterSingletonType<KeyboardPanel>("CM780.KeyboardPanel", 1, 0, "KeyboardPanel", qobject_singletontype_provider);
    
    <inputpanel.qml>
    
    import QtQuick 2.7
    import QtQuick.Window 2.0
    import QtQuick.VirtualKeyboard 2.0
    import QtQuick.VirtualKeyboard.Settings 2.0
    import YourApp.KeyboardPanel 1.0
    
    Rectangle {
        id:root
        color: "#eeeeee"
        property var inputMethodHints : InputContext.inputMethodHints;
        
        TextInput{
            anchors.fill: parent
            horizontalAlignment: TextInput.AlignLeft
            verticalAlignment: TextInput.AlignTop
            visible: ((InputContext.inputMethodHints & Qt.ImhDigitsOnly) ||
                      (InputContext.inputMethodHints & Qt.ImhFormattedNumbersOnly)) ? false : true
            readOnly: true
            cursorVisible: false
        }
        
        InputPanel {
            signal closeKeyBoard();
            property int pressKey: -1
            property bool inputpanelVisible: Qt.inputMethod.visible
            
            id: inputPanel
            y:root.height-height 
            width: ((InputContext.inputMethodHints & Qt.ImhDigitsOnly) ||
                    (InputContext.inputMethodHints & Qt.ImhFormattedNumbersOnly)) ? 370 : root.width
            
            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
                    }
                }
            }
            
            onInputpanelVisibleChanged: {
                if (Qt.Key_Escape == pressKey
                        || Qt.Key_Return == pressKey)
                {
                    if (!inputpanelVisible)
                    {
                        closeKeyBoard()
                    }
                }
            }
        }
        
        onInputMethodHintsChanged: {
            inputPanel.closeKeyBoard()
        }
        
        Connections{
            target: inputPanel  
            onCloseKeyBoard:{
                KeyboardPanel.hideInput()
                inputPanel.pressKey = -1
            }
        }
    }
    
    


  • Couple of questions:

    1. Where to register KeyboardPanel to qml ?
    2. What does "CM780.KeyboardPanel" means
      qmlRegisterSingletonType<KeyboardPanel>("CM780.KeyboardPanel", 1, 0, "KeyboardPanel", qobject_singletontype_provider);


  • @Paraddi

    1. You can register it at the constructor, or others before you use it. It makes the qml to KNOWN the type of KeyboardPanel
    2. For "CM780.KeyboardPanel", it is just a NAME, so that you can import it in qml, for example, your do like this
    qmlRegisterSingletonType<KeyboardPanel>("YourAppName.KeyboardPanel", 1, 0, "KeyboardPanel", qobject_singletontype_provider);
    

    then you can import it like this:

    import QtQuick 2.7
    import QtQuick.Window 2.0
    import QtQuick.VirtualKeyboard 2.0
    import QtQuick.VirtualKeyboard.Settings 2.0
    
    //you can import it here like the qt quick modules like aboves
    import YourAppName.KeyboardPanel 1.0
    

    Note: for this case, I register it as singleton type, so you can invoke the method by KeyboardPanel.yourMethod()


Log in to reply