QT QML 가상키보드_virtual keyboard_영어/한글 전환

QT QML 가상키보드_virtual keyboard_영어/한글 전환_Ubuntu

heisanbug
Coding/QT
2020. 5. 21.

1. 개요

Qt5에서 가상키보드인 Qt Virtual Keyborad를 사용하는 방법에 대한 설명입니다.

글쓴이가 Qt 프로그래밍에 대한 이해가 많이 부족하고,

Qt가 설치된 OS나 Version에 따라 동작 여부가 달라질 수 있다는 것을 참고하시면 됩니다.

- OS : Ubuntu 18.04.3 LTS

- Qt Creator 4.5.2

- Qt 5.9.5(GCC 7.3.0, 64 bit)

- qtvirtualkeyboard 5.7

원하는 기능은 Qt에서 qml로 구현한 응용프로그램에서

한글과 영어가 지원되는 Virtual Keyboard를 사용하는 것입니다.

여러 가지 방법을 서치한 결과 Qt에서 기본 제공되는 Qt Virtual Keyboard를 사용하는 방법을 채택했고,

apt-get을 이용한 설치가 아닌 git을 이용하여 직접 한글 지원이 가능하도록 컴파일하였습니다.

Qt, Qt Creator 설치는 완료된 상태로 가정합니다.

2. 의존성 패키지 설치

sh@sh-desktop:~ $ sudo apt install cmake build-essential git

sh@sh-desktop:~ $ sudo apt install cmake build-essential gitsudo apt install qt5-default qtbase5-dev qt5-qmake libqt5gui5 qtscript5-dev qtquickcontrols2-5-dev libqt5network5 qtdeclarative5-dev

sh@sh-desktop:~ $ sudo apt install qml-module-qtquick*

sh@sh-desktop:~ $ sudo apt install qml-module-qt-labs-folderlistmodel

sh@sh-desktop:~ $ sudo apt-get install libqt5svg5-dev

sh@sh-desktop:~ $ sudo apt install qtbase5-private-dev

3. qtvirtualkeyboard 다운로드

sh@sh-desktop:~ $ git clone git://code.qt.io/qt/qtvirtualkeyboard.git

sh@sh-desktop:~ $ cd qtvirtualkeyboard/

sh@sh-desktop:~/qtvirtualkeyboard $ git checkout 5.7

터미널 커맨드 라인을 이용하여 qtvirtualkeyboard를 다운로드합니다.

4. 한글 사용을 위한 커스텀 컴파일

sh@sh-desktop:~/qtvirtualkeyboard $ vim src/config.pri

...
...
...

#Default language
!contains(CONFIG, lang-.*)
	contains(QT_CONFIG, private_tests{ # CI or developer build, use all languages
    	CONFIG += lang-all
    } else {
    	CONFIG += lang-en_GB
    }
}

...
...
...

config.pri 파일에서 기본 언어팩이 "lang-en_GB" (영어)로 설정되어 있습니다.

여기에 한국어 언어팩도 포함하여 컴파일하기 위해

"lang-ko_KR"를 추가합니다.

...
...
...

#Default language
!contains(CONFIG, lang-.*)
	contains(QT_CONFIG, private_tests{ # CI or developer build, use all languages
    	CONFIG += lang-all
    } else {
    	CONFIG += lang-en_GB lang-ko_KR
    }
}

...
...
...

이후 컴파일을 진행합니다.

sh@sh-desktop:~/qtvirtualkeyboard $ qmake

sh@sh-desktop:~/qtvirtualkeyboard $ make

5. 컴파일 이후 qml & 플러그인 디렉터리 복사

컴파일이 완료되면 QT에서 사용 가능하도록 qml과 플러그인 파일을 QT가 설치된 폴더에 복사합니다.

sh@sh-desktop:~/qtvirtualkeyboard/qml $ sudo cp -r QtQuick/ /usr/lib/aarch64-linux-gnu/qt5/qml/
sh@sh-desktop:~/qtvirtualkeyboard/plugins $ sudo cp -r platforminputcontexts/ /usr/lib/aarch64-linux-gnu/qt5/plugins/

여기까지 완료되면 한글 지원이 되는 가상 키보드 활용이 가능합니다.

6. QT qml을 이용한 테스트

qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard")); 를 main.cpp에 추가하면

컴파일한 가상 키보드를 불러올 수 있게 됩니다.

컴파일된 qtvirtualkeyboard를 테스트하기 위한 코드를 첨부합니다.

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QEvent>
#include <QCloseEvent>
#include <QQmlContext>
#include "qsvdsettingvalue.h"


int main(int argc, char *argv[])
{
    qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));

    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;

    QSVDSettingValue qSVDSettingValue;
    engine.rootContext()->setContextProperty("svdsettingvalue", &qSVDSettingValue);
    engine.load(QUrl(QStringLiteral("qrc:/qml/QMLTest.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    qputenv("QSG_RENDER_LOOP", "threaded");


    return app.exec();
}

QMLTest.qml

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Dialogs 1.2
import QtQuick.Controls 2.0
import QtQuick.VirtualKeyboard 2.1
import QtQuick.VirtualKeyboard.Settings 2.0

Window {
    id:window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


   TextField{
       width: 250
       height: 70
       anchors.top: parent.top
       anchors.topMargin: 30
       anchors.horizontalCenter: parent.horizontalCenter
   }


   InputPanel {
       id: inputPanel
       z: 99
       x: 0
       y: window.height
       width: window.width

       Component.onCompleted: {
           //VirtualKeyboardSettings.styleName = "retro"
           console.log("locales available: " + VirtualKeyboardSettings.availableLocales)
           //VirtualKeyboardSettings.local = "fi_FI"
       }

       states: State{
           name: "visible"
           when: inputPanel.active
           PropertyChanges{
               target: inputPanel
               y: window.height - inputPanel.height
           }
       }

       transitions: Transition{
           from: ""
           to: "visivle"
           reversible: true
           ParallelAnimation {
               NumberAnimation {
                   properties: "y"
                   duration: 250
                   easing.type: Easing.InOutQuad
               }
           }
       }
   }
}

본 예제 코드를 사용하여 가상키보드로 한글과 영어를 입력 하는 것을 테스트 가능합니다.