티스토리

코딩 연구소

검색하기

블로그 홈

코딩 연구소

donggyu.tistory.com/m

코딩 연구소

구독자: 3

방명록 방문하기

주요 글 목록

[QT QML] QT QML anchors, parent등을 활용한 위치 속성 값 지정하기 💡 가운데 설정 import QtQuick 2.6 import QtQuick.Window 2.2 import QtQuick.Controls 1.4 Window { visible: true width: 800 height: 680 title: qsTr("위치 속성 지정") Button { id: btn_center anchors.centerIn: parent width: 130 height: 50 text: "가운데 버튼" } } 💡 실행 사진 💡 가운데 버튼 왼쪽에 위치 넣기 import QtQuick 2.6 import QtQuick.Window 2.2 import QtQuick.Controls 1.4 Window { visible: true width: 800 height: 680 title: qsT.. 공감수 3 댓글수 0 2021. 7. 8.
[C++ QT QML] C++과 QML을 이용하여 QML 계산기 만들기 QML calculator 💡 실행 화면 💡 main.cpp #include #include #include #include #include #include int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine; engine.load(QUrl(QStringLiteral("main.qml"))); // set Calculator *ca = new Calculator(); engine.rootContext()->setContextProperty("Calculator", ca); return app.exec(); } main.cpp에서 calculator 객체를 생성합니다. 그 후 engine.rootContext().. 공감수 3 댓글수 0 2021. 7. 8.
[QT QML Code] QML Loading spinner with animated image 💡 실행사진 이미지를 구해서 넣어주세요. QML로 로딩 스피너를 빠르게 만드는 방법입니다. 로딩 스피너는 앱이 백그라운드에서 작업을 수행 할 때 몇 초가 걸리고 사용자가 사용자 인터페이스를 클릭하는 것을 원하지 않을 때 항상 중요합니다. 매우 나쁜 정적 창을 표시하는 대신 사용자에게 무슨 일이 일어나고 있는지 보여줍니다. 앱이 몇 초만 걸리는 경우 진행률 표시기를 표시 할 필요가 없습니다. 논리에 실제 진행 값이 없으면 어쨌든 매우 까다로워집니다. 로딩 스피너를 표시하는 동안 중단되지 않도록 백그라운드 스레드에서 작업을 처리합니다. 💡 animated loading spinner with QML Row { spacing: 8 // Rotating icon Text { id: loadingSpinner f.. 공감수 0 댓글수 0 2021. 7. 2.
[QT QML] QML Spin Progress Spinner QML의 아름답고 부드러운 QT Spin Progress QT 자료 : https://wiki.qt.io/QML_Progress_Spinner QT 자료 : https://doc.qt.io/qt-5/qml-qtquick-controls2-busyindicator.html 개발자 내용 : 디자인의 대부분은 여기 에서 가져 왔습니다 . 다양한 장소에서 가져온 다른 디자인도 있습니다. 출처 및 자료 : https://github.com/Furkanzmc/QML-Loaders 💡 Supported Types Sharingan BlockLoader FishSpinner DoubleFishSpiner PulseLoader LineSpinner RectangleLoader (Concept by Enes Özgör) .. 공감수 0 댓글수 0 2021. 7. 1.
[QT QML] QML Code Conventions , QML 기초, 기본적인 기초 QT 자료 : https://doc.qt.io/qt-5/qmltypes.html 💡 ID 소문자로 첫자 시작하는 규칙 모든 객체들은 ID를 가질 수 있고, QML 하나의 문서 내에서 동일한 ID 부여는 안된다. 상위에서 하위를, 혹은 하위에서 상위를 호출할때 사용되며 자식이 부모를 이를 때만 별도의 부여 없이 parent로 호출이 가능하다. 💡 Width / height / x / y 가로, 세로, x축, y축 위치 설정 하는 것으로 int 값으로 작성해야 된다. 여러가지 옵션 세팅 시, 중간에 세미콜론(;)을 넣어 한줄로 이어 작성이 가능하다. 라인이 짧아지는 장점은 있으나 가독성이 떨어지기 때문에 anchors를 쓰게 된다. 💡 Color 내부의 색상 설정으로 color값은 "#000000", "bl.. 공감수 0 댓글수 0 2021. 7. 1.
[QT QML] QML Customizing qml databinding : qml 재사용하기 💡 QML Customizing qml databinding QML 작업을 하다보면 같은 코드 패턴이지만 width, height, anchors만 다르고 나머지는 다 똑같은 경우가 발생한다. 이런 경우 Customizing DataBinding으로 하나의 qml을 만들고 그곳에 signal로 연결하여 사용이 가능하다. 그러면 우리는 main에서 같은 코드를 반복할 필요없이 하나의 qml을 만들고 signal과 property를 지정하여 Rectangles로 더 효율적인 코드 활용이 가능하다. 내용이 어렵다면 아래 코드를 참고하면 됩니다. 이 코드를 활용하여 QML MVVM 패턴 View - View Model 활용도 가능합니다. 💡 main.qml Rectangles { id: anchors.left:.. 공감수 1 댓글수 0 2021. 6. 30.
[C++ QT QML] Listview Item을 다른 곳에 출력하기 currentIndex활용 💡 실행 사진 참고 자료 : https://doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html#mouse-and-touch-handling 참고 자료 : https://doc.qt.io/qt-5/qml-qtqml-models-listmodel.html#append-method 뷰는 콘텐츠의 드래그 및 플릭을 처리하지만 개별 델리게이트와의 터치 상호 작용은 처리하지 않습니다. 예를 들어 currentIndex를 설정하기 위해 델리게이트가 터치 입력에 반응하려면 델리게이트가 적절한 터치 처리 로직이있는 MouseArea를 제공해야합니다. 키 입력은 기본적으로 작동하지만 델리게이트에서 마우스 / 터치 이벤트를 명시 적으로 포착 하고 선택한 델리게이트 항목 값에 따라 .. 공감수 1 댓글수 0 2021. 6. 29.
[C++ QT QML] QML내에서의 시그널 슬롯 시스템 QML Signal Slot 💡 실행 사진 Qt는 기본적으로 QObject를 기반으로 시그널, 슬롯 시스템으로 동작된다. 이 것은 QML에서도 마찬가지이며 간단한 예제들을 통해 QML내에서 어떻게 사용되는지 알아보자. 💡 기본 시그널 모든 qml 아이템은 다음과 같은 기본 시그널들이 있다. completed() 객체가 생성될 때 발생 destruction() 객체가 파괴될 때 발생 💡 SignalItem.qml import QtQuick 2.12 QtObject { signal signalItemCreated(string name) Component.onCompleted: { signalItemCreated("SignalItem") } } 💡 main.qml import QtQuick 2.13 import QtQuick.Window.. 공감수 0 댓글수 0 2021. 6. 29.
[C++ QT QML] QML 가상 키보드 사용하기 virtual keyboard 리눅스 키보드 💡 실행 사진 Qt5에서 제공하는 가상키보드(Qt Virtual Keyboard)를 사용하는 방법에 대해서 설명한다. 다만 Qt Wayland환경에서 사용하는 방법은 설명하지 않으므로 자세한 내용은 다음글을 참고하면 된다. https://doc.qt.io/qt-5/qtvirtualkeyboard-deployment-guide.html 가상키보드가 화면에 보여지기 위한 벙법에는 두가지가 있다. 데스크탑(Windows 또는 Linux/X11 환경) : 이 경우 응용프로그램을 수정 할 필요가 없이 키보드는 자체적인 최상위 창으로 보여지게된다. 임베디드 장치(특히 eglfs 같은 환경) : 이 경우 응용프로그램의 QML에 InputPanel 을 배치함으로써 화면에 보여진다. 멀티 윈도우를 지원하지 않는 (윈도우.. 공감수 0 댓글수 0 2021. 6. 29.
[C++ QT QML] C++에서 QML ListView로 값 나타내기 💡 실행 사진 💡 main.cpp #include #include #include #include #include class ListModel : public QAbstractListModel { Q_OBJECT public: ListModel() { for (int i = 0; i < 10; ++i) { mContents.append(QString::fromLatin1("Item %1").arg(i)); } } int rowCount(const QModelIndex &parent = QModelIndex()) const override { Q_UNUSED(parent); return mContents.size(); } QVariant data(const QModelIndex &index, int rol.. 공감수 1 댓글수 0 2021. 6. 17.
[C++ QT QML] Model-View-Delegate 구현과 개념 및 설명 💡 개념 및 설명 Qt Quick에서 데이터는 모델-뷰 분리를 통해 프레젠테이션과 분리됩니다. 각보기에 대해 각 데이터 요소의 시각화가 델리게이트로 분리됩니다. Qt Quick은 미리 정의 된 모델 및보기 세트와 함께 제공됩니다. 시스템을 활용하려면 이러한 클래스를 이해하고 올바른 모양과 느낌을 얻기 위해 적절한 델리게이트를 만드는 방법을 알아야합니다. 사용자 인터페이스를 개발할 때 가장 중요한 측면 중 하나는 데이터 표현을 시각화와 별도로 유지하는 것입니다. 예를 들어, 전화 번호부는 텍스트 항목의 세로 목록 또는 연락처 사진 그리드로 정렬 될 수 있습니다. 두 경우 모두 데이터는 동일합니다. 전화 번호부이지만 시각화가 다릅니다. 이 분할을 일반적으로 모델 뷰 패턴이라고합니다. 이 패턴에서 데이터는 모.. 공감수 1 댓글수 0 2021. 6. 16.
[C++ QT QML] QML 새로운 DelegateChooser 구현하기 💡 실행 사진 💡 DelegateChooser란? DelegateChooser는 당신이 더 나은 방식으로 대표단을 구성 시켜서 QML에서보다 역동적의 ListView를 구축하는 데 도움이됩니다. 위의 예제 응용 프로그램을 세 부분으로 나눌 수 있습니다. 모델 ListView DelegateChooser 💡 코드 import QtQuick 2.0 ListModel { ListElement { type: "empty"; } ListElement { type: "owner"; name: "Erik Larsson"; info: "Just a happy Qt hacker"; avatar: "avatar.jpg" } ListElement { type: "empty"} ListElement { type: "bool".. 공감수 1 댓글수 0 2021. 6. 16.
[C++ QT QML] 리눅스에서 QML WIFI list 불러오게 구현 💡 실행 사진 💡 list_ssid.pro QT -= gui QT += dbus SOURCES += list_ssid.cpp 코드 : https://pastebin.com/Mkvbu01c 💡 main.cpp #include #include #include #include #include #include int main(int argc, char **argv) { QCoreApplication app(argc, argv); QDBusInterface nm("org.freedesktop.NetworkManager", "/org/freedesktop/NetworkManager", "org.freedesktop.NetworkManager", QDBusConnection::systemBus()); if(!nm.i.. 공감수 0 댓글수 0 2021. 6. 16.
[C++ QT QML] Signal slot으로 C++에서 QML로 데이터 전송 이 예제는 signal slot을 활용하여 QML에서 C++이 아닌 C++에서 QML로 데이터 전송하여 출력하는 예제입니다. 💡 실행 사진 💡 main.cpp #include #include //#include "myclass.h" #include #include int main(int argc, char *argv[]) { // QML 불러오기 QGuiApplication app(argc, argv); QQmlApplicationEngine engine; engine.load(QUrl::fromLocalFile("main.qml")); ConnectEvent *event = new ConnectEvent(); QObject *root = engine.rootObjects()[0];//qrc:/main... 공감수 1 댓글수 0 2021. 6. 15.
[C++ QT QML] Signal slot 활용하여 화면 클릭 시 이벤트 처리 이 예제는 signal slot을 활용하여 QML에서 화면 클릭 시 문구를 출력하는 예제입니다. 💡 실행 사진 💡 Main.cpp #include #include #include #include "receiver.h" int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine; Receiver receiver; QQmlContext* ctx = engine.rootContext(); ctx->setContextProperty("receiver", &receiver); engine.load(QUrl(QStringLiteral("qrc:///main.qml"))); receiver.sendToQ.. 공감수 1 댓글수 0 2021. 6. 15.
[C++ QT widget] Linux Ubuntu에서 Makefile, qmake, .pro 설명 및 화면 구현하기 💡 실행 화면 💡 Makefile 설명입니다. (따라하는건 아래 부분부터있습니다.) Makefile을 사용하는 이유는 위와 같은 복잡한 과정을 생략할 수 있어서이기도 하지만, Makefile이 제공하는 강력한 기능 중 하나인 Incremental build 를 사용하기 위해서다. Incremaental build 란? 반복적인 빌드 과정에서 변경된 소스코드에 의존성(Dependency)이 있는 대상들만 추려서 다시 빌드하는 기능이다. 예를 들어, 위의 빌드 예제에서 main.c의 한 줄만 바꾸고 다시 빌드를 할 때, main.o 컴파일(gcc -c -o main.o main.c)과 app.out링크(gcc -o a.out main.o a.o b.o)만 수행하는 경우가 이에 해당한다. Makefile 은 .. 공감수 0 댓글수 0 2021. 6. 14.
[C++ QT QML] Linux Ubuntu에서 Makefile 만들기 버전[2](Windows/Ubuntu) 💡 파일 코드 function.cpp 파일 생성 #include "function.h" void function() { cout 공감수 0 댓글수 0 2021. 6. 14.
[C++ QT QML] Visual Studio Code에서 Makefile 만들기 버전[1](Windows/Ubuntu) 💡 MinGW 설치 및 설정 https://sourceforge.net/projects/mingw-w64/files/ x86_64-8.1.0-release-posix-seh-rt_v6-rev0 라는 파일이 생길겁니다. 알집을 풀어주세요. 그 후 아래 사진처럼 C드라이브에 넣어주세요. C드라이브에 다 넣으셨다면 변수를 설정해주세요. C:\mingw64\bin 입니다. 이렇게 나오면 설정되었습니다. 💡 vscode로 코드 작성 hello.h #include void print_hello(); hello.c #include "hello.h" void print_hello() { printf("hello\n"); } makefile CC = gcc CFLAGS = -c -g #소스 코드 컴파일 옵션 추가하기 위.. 공감수 0 댓글수 0 2021. 6. 14.
[C++ QT QML] Signal slot 활용하여 Button 클릭 시 이벤트 처리 이 예제는 signal slot을 활용하여 QML에서 button 클릭 시 qDebug로 msg문구를 출력하는 예제입니다. 💡 버튼 클릭 시 처리되는 실행 화면 💡 QML에 버튼 추가 signal qmlSignal(string msg) Button { id: add anchors.horizontalCenter: parent.horizontalCenter text: qsTr("add") onClicked: qmlSignal(text) } 코드 : https://pastebin.com/HXug1VQ0 💡 Main.cpp // main cpp #include #include #include "myclass.h" int main(int argc, char *argv[]) { QGuiApplication app(.. 공감수 1 댓글수 0 2021. 6. 14.
[QT QML] QML로 버튼 클릭시 Dialog 창 구현하기 💡 실행 화면 💡 QML 코드 import QtQuick 2.10 import QtQuick.Window 2.10 import QtQuick.Controls 2.3 ApplicationWindow{ visible: true; width: 1280; height: 720; Dialog { id: dialog x:(parent.width-width)/2 y:(parent.height-height)/2 implicitWidth: 500; implicitHeight: 300; title: "Title" modal: true; standardButtons: Dialog.Ok | Dialog.Cancel onAccepted: console.log("Ok clicked") onRejected: console.log(.. 공감수 0 댓글수 0 2021. 6. 11.
[C++ QT QML] QML 버튼, 시간 표시 등의 기능을 C++에 연동 개발 환경 구현 : https://donggyu.tistory.com/9 QML이 혼합 된 QT Quick의 C ++를 배우고, 주로 QML이 C ++ 슬롯 함수에 응답하는 C ++ 객체 유형을 호출하는 방법입니다. 💡 실행 화면 💡 TestObj.h 코드 //TestObj.h #ifndef TESTOBJ_H #define TESTOBJ_H #include #include #include #include #include class TestObj : public QObject { Q_OBJECT Q_ENUMS(GenerateAlgorithm) Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChange) Q_PROPERTY(QColor time.. 공감수 1 댓글수 0 2021. 6. 10.
[PyQt5 QT QML] QtQuick 활용하여 Image 불러오기 개발 환경 구현 : https://donggyu.tistory.com/9 Image 관련 설명 : https://doc.qt.io/qt-5/qml-qtquick-image.html 💡 실행 화면 💡 Image 설명 이미지의 소스 는 source 속성을 사용하여 URL로 지정됩니다 . PNG 및 JPEG와 같은 비트 맵 형식 및 SVG와 같은 벡터 그래픽 형식을 포함하여 QT에서 지원하는 모든 표준 이미지 형식으로 이미지를 제공 할 수 있습니다. 애니메이션 이미지를 표시해야하는 경우 AnimatedSprite 또는 AnimatedImage를 사용해야합니다. 경우 너비 및 높이 속성이 지정되지 않은, 이미지가 자동으로로드 된 이미지의 크기를 사용합니다. 기본적으로 항목의 너비와 높이를 지정하면 이미지가 해당.. 공감수 0 댓글수 0 2021. 6. 9.
[PyQt5 QT QML] QtQuick 활용하여 CheckBox 구현하기 개발 환경 구현 : https://donggyu.tistory.com/9 CheckBox 관련 설명 : https://doc.qt.io/qt-5/qml-qtquick-controls2-checkbox.html 💡 실행 화면 💡 CheckBox는 무엇인가? heckBox는 설정 (선택) 또는 해제 (선택 해제) 할 수있는 옵션 버튼을 제공합니다. 확인란은 일반적으로 옵션 집합에서 하나 이상의 옵션을 선택하는 데 사용됩니다. 목록에있는 옵션과 같이 더 큰 옵션 세트의 경우 대신 CheckDelegate 를 사용하는 것이 좋습니다. CheckBox는 AbstractButton 에서 API를 상속합니다 . 예를 들어 체크 박스의 상태는 checked 속성 으로 설정할 수 있습니다 . 확인 된 상태와 선택되지 않.. 공감수 0 댓글수 0 2021. 6. 9.
[PyQt5 QT QML] QtQuick 활용하여 Fragment, Loader 구현하기 개발 환경 구현 : https://donggyu.tistory.com/9 Loader 관련 설명 : https://doc.qt.io/qt-5/qml-qtquick-loader.html 💡 실행 화면 💡 Loader는 무엇인가? 로더는 QML 구성 요소를 동적으로로드하는 데 사용됩니다. 로더는 QML 파일 (source 속성 사용) 또는Component 객체 (SourceComponent속성 사용)로드 할 수 있습니다. 구성 요소 생성을 필요할 때까지 지연하는 데 유용합니다. 예를 들어 구성 요소를 요청시 생성해야하거나 성능상의 이유로 구성 요소를 불필요하게 생성해서는 안되는 경우입니다. 💡 Main QML 생성 import QtQuick 2.12 import QtQuick.Window 2.12 impor.. 공감수 0 댓글수 0 2021. 6. 9.
[PyQt5 QT QML] QtQuick 활용하여 Dial구현하기 개발 환경 구현 : https://donggyu.tistory.com/9 Dial 관련 설명 : https://doc.qt.io/qt-5/qml-qtquick-controls2-dial.html 💡 Dial은 무엇인가? 다이얼은 스테레오 또는 산업 장비와 같은 장치에서 볼 수있는 기존 다이얼 노브와 유사합니다. 사용자가 범위 내에서 값을 지정할 수 있습니다. 💡 코드 import QtQuick 2.10 import QtQuick.Window 2.10 import QtQuick.Controls 2.3 ApplicationWindow{ visible: true; width: 1280; height: 720; Label{ id: lbl; text: "0"; font.bold: true; font.pixelSi.. 공감수 0 댓글수 0 2021. 6. 9.
[PyQt5 QT QML] QtQuick 활용하여 Container 구현하기 개발 환경 구현 : https://donggyu.tistory.com/9 Container 설명 : https://doc.qt.io/qt-5/qml-qtquick-controls2-container.html 💡 Container 란? 컨테이너는 항목의 동적 삽입 및 제거를 허용하는 컨테이너와 유사한 사용자 인터페이스 컨트롤의 기본 유형입니다. 💡 Container 구현하기 import QtQuick 2.10 import QtQuick.Window 2.10 import QtQuick.Controls 2.3 ApplicationWindow{ visible: true; width: 1280; height: 720; Row { anchors.fill: parent; TabBar { id: tabBar curre.. 공감수 0 댓글수 0 2021. 6. 9.
[PyQt5 QT Qml] Python과 QML 활용하여 GUI Window 창 만들기 💡 VS Code 및 Python 설치 사이트 : https://code.visualstudio.com/ 사이트 : https://www.python.org/ 💡 VS Code에서 Python 설치 💡 Python 생성 및 코드 작성 마우스 우측 > 새 파일 > 파일명.py 로 저장해주세요. """ Main """ from PyQt5.QtGui import QGuiApplication from PyQt5.QtQml import QQmlApplicationEngine from PyQt5.QtCore import QObject, pyqtSignal, pyqtSlot class Main(QObject): def __init__(self): QObject.__init__(self) if __name__ == ".. 공감수 4 댓글수 0 2021. 6. 7.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.