Data Visualization
Qt Library

 

 

Data Visualization
Qt Library

Qt Data Visualization 은 다양한 종류의 Data 를 손쉽게 3D 로 시각화 할 수 있습니다.

Qt Data Visualization 은 다양한 종류의 Data 를 손쉽게 3D 로 시각화 할 수 있습니다.

Overview

> Qt Data Visualization 모듈은 Qt 5.7 상용 제품에서 제공되는 Add-on Module 로서 Qt C++ 클래스들과 Qt 고유의 UI 제작 Script 언어로 구성된 QML Type을 제공합니다.

> Qt Data Visualization을이용하면 다양한 종류의 Data를 손쉽게 3D로 시각화 할 수 있습니다.

> 본 문서는 Qt Data Visualization으로구현한 예제 모음 입니다. 각 예제 들의 소스코드가 포함된 Tutorial 은 http://doc.qt.io/qt-5/qtdatavisualization-index.html 에서 확인 할 수 있습니다.

> Qt 5.7 상용 제품의 체험 판은 https://www.qt.io/download-eval-for-applications-step-2/ 에서 다운로드 할 수 있습니다. > Qt Data Visualization 구현에 관해 추가적으로 궁금 하신 부분은 qtsales@ocube.co.kr 로 문의 바랍니다.

Features

> 조화로운 UI를 구성하기 위한 3D 형태의 다양한 Data Visualization 옵션을 선택할 수 있습니다: 3D Bars, 3D Scatter, 3D Surface 등

> 3D Data 를 손쉽게 2D Slice View 해 볼 수 있습니다.

> 마우스나(Q3DInputHandler) 터치(QTouch3DInputHandler)를이용해서 회전, 확대 축소 및 데이터 강조 등의 인터랙티브한 시각 효과를 낼 수 있습니다.

> Data Rendering을 위해 OpenGL을 사용합니다.

> 강력한 Customizing 기능을 제공합니다. Data Axes, input handling, theme, item, label, volumetric item 등

> Perspective 와 Orthographic Projection 을 제공합니다.

C++ Examples

C++ Examples

Audio levels Example

> Q3DBars Class를 이용하여 Real-Time Dynamic Data를 Graph 표시하였습니다.

> 실제 마이크에서 입력되는 audio level을 읽어들여 Bar Graph 형태로 표시해 줍니다.

> 마이크에서 Data 를 입력 받기 위해서 QAudioinput Class 가 사용됩니다.

> 효과적인 Memory Allocation과 Data Rendering 을 위해서 고정된 Data array를 사용합니다.

> Graph 각각의 row 는 bar data item의 QVector Class를 이용합니다.

> Qt 의 QVector Class 는 dynamic array 기능을 제공하여 빠르게 Data를 관리 할 수있도록 해줍니다.

Axis Range Dragging with Labels Example

Qt Widget 기반 application 에서 각각의 Axis Label을 Click & Drag 하여 Axis Range 를 동적으로 변경시킬 수 있는 3D Graph Control 를 제작한 예제 입니다.

Graph 에서 선택된 signal을 보내주는 Custom input handler 를 Q3DInputHandler 를 이용하여 구현하였습니다.

Bars Example

> Q3DBars Class와 다양한 Data를 조절하기 위해 Qt Widget 을 함께 이용해서 구현한 3D Bar Graph 입니다.

> Graph에 Data Setting 을 위해서 QBar3DSeriesQBarDataProxy 를 사용하였습니다.

> Negative Value 를 가지는 Data 처리의 예를 보여줍니다.

> Graph rotation, Label Style, Camera Preset.. 등 다양한 control을 적용할 수 있는 Application 형태로 제작되었습니다.

> Zoom 기능을 위해서 QPropertyAnimation 사용됩니다.

> Qt 의 QVector Class 는 dynamic array 기능을 제공하여 빠르게 Data를 관리 할 수 있도록 해줍니다.

Custom Input Example

> Qt Widget Application 상에서 mouse event 를 capture하고 처리할 수 있는 custom graph handler 의 예제입니다.

> QPropertyAnimation 을 이용하여 mouse click 이 아닌 mouse over 만으로 camera 와 item selection이 가능하도록 구현된 예제 입니다.

> QWheelEvent 를 이용한 마우스 휠 액션으로 zoom기능을 구현하였습니다.

Custom Items Example

graph 에 Custom mesh를 추가/삭제 할 수 있는 기능을구현한 예제 입니다.

.obj 확장자의 mesh 파일을 import 하여 사용합니다.

Custom Proxy Example

> QVariantList 를 이용하여 간단하고 유연한 VariantDataSet이라는 data set을 제작하였습니다.

> 각각의 data item 은 list 형태로 되어 있으며, index 로 구분되는 여러 가지 값을 가질 수 있습니다.

> Example 에서는 monthly rainfall data 에 index가 0이면 year, index 가 1이면 month, index가 2면 해당 월의 rainfall을나타내도록 되어 있습니다.

> Proxy Data setting 과 Mapping을 위해서 QBarDataProxy Class를 사용합니다.

Item Model Example

> Qt WidgetQ3DBars 를 이용한 간단한 형태의 3D bar graph 를 run-time 에 data 입력에 의해서 수정될 수 있도록 구현한 예제 입니다.

> Graph에 data를 setting 하기 위해서는 QItemModelBarDataProxy 를 사용합니다.

Rotation Example

> 화살표 Item 에 Rotation 효과를 주며 화살표 아이템이 구의 중심을 향하도록 해주는 예제입니다.

> 화살표 Item 이 구의 중심에 접선으로 향하여 Y/Z 축을 따라서 회전시키기 위해서 vector 와 scalar 로구성된 QQuaternion 클래스를 이용합니다.

> 화살표/원구는 .obj 파일을 import 하여 사용합니다.

> 화살표의 색상이 짙어지고 흐려지는 효과는 QLinearGradient 클래스에서 기능을 제공합니다.

Scatter Example

> Q3DScatterQt Widget 을 이용하여 3D 산포 graph 를 제작한 예제 입니다.

> Graph 에 data setting 을 위해서 QScatterDataProxy 를사용합니다.

Qt Widget control 들을 사용해 Label Style, Camera preset, Background Visibility, Grid Visibility, Shadow quality 등 여러가지 graph property를 조절 가능합니다.

Surface Example

> Q3DSurface 를 사용해서 간단한 3D surface graph를 제작한 예제 입니다.

> Data Setting 은 QSurfaceDataProxy을 사용하며 Q3DTheme 를 사용해 선택된 Theme를 메뉴에서 세팅 할 수 있도록 했습니다.

> QLinearGradient class를 사용해 Widget 메뉴의 가장 하단에 두 개의 push 버튼으로 제공되는 custom surface gradients 를 표현합니다.

Textured Surface Example

> Surface 에 image 를 texture로 입히는 예제 입니다. Image로 surface series 를 만들고, zooming 과 panning 을 가능하게 해주는 custom input handler 를 제작하였습니다.

> QSurface3DSeries::setTextureFile 을 이용하면 jpg 파일을texture로 입힐 수 있습니다.

> 마이크에서 Data 를 입력 받기 위해서 QAudioinput Class 가 사용됩니다.

> 지형 Data 는 QSurface3DSeries를이용하여 PNG 파일을 통해 입력 되고 decode 됩니다.

> 마우스 휠을 통한 Zooming 을 위해서 QWheelEvent 를사용합니다.

Volumetric rendering Example

> QCustom3DVolume 을 이용해 volumetric data 를 표현한 예제 입니다.

> QCustom3DVolume::drawSlice 와 QCustom3DVolume::renderSlice 를 사용하면 slice image 를 띄울 수 있습니다.

> Volume의 내부 opaque detail을 보다 확실하게 보여 주려면 QCustom3DVolume::alphaMultiplier 를 활용할 수 있습니다.

> QCustom3DVolume::useHighDefShader 의 값을 조절하면 performance 를 살리면서 low definition shader 를 활성화 할 수 있습니다.

QML Examples

QML Examples

QML Axis Dragging Example

> QML 을 이용해 Axis Label 을 Drag 하여 Axis Range 를 변경할 수 있는 예제 입니다.

> Orthographic Projection 과 dynamic custom item handling을 사용하는 방법을 살펴 볼 수 있습니다.

> Scatter3DMouseArea QML Type 을 사용하며, QML signal 기능을 사용해서 input handling 을 구현하였습니다.

QML Axis Formatter Example

> QML 과 C++ Class 를 결합하여 axis formatter 를 사용하는예제입니다.

> Axis formatter 를 customize 하기 위해서는 C++ Class인 QValue3DAxisFormatter 의 subclass 를 이용합니다.

> QML Type 인 ValueAxis3D 를 이용해 X/Y/Z axis 를 정의합니다. Y 축은 LogValueAxis3DFormatter 로 구성합니다.

QML Bars Example

> QML 을 이용해서 구현한 3D Bar Graph 예제 입니다.

> 시간, 수입, 지출의 3가지 가상 data 를 구현하는데 Bars3DBar3DSeries 가 사용되었습니다.

> Data 의 정규 표현 식을 다루기 위해서 QString::replace 함수가 사용되었습니다.

> QML 로 작성된 control 을 사용하여 원하는 data 를 선별하여 볼 수 있도록 하였습니다.

QML Custom Input Example

> QML 의 MouseArea 타입을 이용해서 mouse event 를처리하여 3D Graph 를 보여주는 예제 입니다.  Click 이 아닌 mouse over 만으로 item selection 이 가능합니다.

> NumberAnimationSequentialAnimation QML type 을 이용하여 camera control 하는 방법이 구현되어 있습니다.

> Timer QML type을 사용하여 선택된 data item의 rendering 을 refresh합니다.

QML Legend Example

> QML 을 이용해 구현한 3D graph에 Interactive Legend 표시를 추가로 구현한 예제 입니다.

> Legend 는 ColumnLayoutRowLayout 으로 구성하며, 표시되는 item selection 은 Bar3DSeries::selectedBar 를 이용하여 구분 합니다.

QML Multiple Graphs Example

> QML 을 이용해 하나의 window 안에 여러 개의 graph를 배열하는 예제 입니다.

> QML type 의 GridLayout 에서 2×2 grid 를 맞추고 단순히 여러 개의 graph를 배열하는 것으로 간단하게 구현할 수 있습니다.

> 각각의 graph 의 grid 를 구분하기 위해서 Rectangle QML type 을 사용하였습니다.

> 각각의 graph 는 Surface3D Scatter3D Bars3D 를 사용하여 구현되었습니다.

QML Oscilloscope Example

> C++ 과 QML application을 결합 하는 방법의 대표적인 예제를 realtime 으로 변화하는 data를 표시하는 그래프 형태로 구현하였습니다.

> Realtime 으로 변화하는 data는 Qobject 에 기반한 QML이 처리할 수 있는 data가 아니기 때문에 basic proxy 는 C++ 형태로 구현이 됩니다.

> C++ 로 간단한 형태의 DataSource 클래스를 구현하고 QML에서 호출이 가능한 method 를 포함시켰습니다.

> DataSource 의 method 를 이용해서 cache 된 oscilloscope data 는 QSurfaceDataProxy 에서 받아 들일 수 있는 format으로 입력됩니다.

> QML graph 는 Surface3D 를 이용합니다.

> 다량의 realtime data rendering 의 performance 를 위해서 direct rendering 을 사용합니다. Direct rendeinrg mode에서 antialiasing 을 지원하기 위해서
QML type 인 renderingMode 의 property 를 사용합니다.

QML Scatter Example

> Scatter3D 를 이용한 scatter graph 입니다.  QML 을 이용한 Data visualization 의 기본 적인 기능들을 포함하고 있습니다.

> Theme3D 를 이용해 Visual property 를 설정하였습니다.

> Data Setting 을 위해서 ItemModelScatterDataProxy 가 활용됩니다.

QML Spectrogram Example

> QML 을 이용해 Polar/Cartesian Spectrogram 을 제작한 예제 입니다. Orthographic projection을 2D에 나타내는 방식을 살펴 볼 수 있습니다.

> 2D effect 효과를 강조하기 위해서 TouchInputHandler3D 를 통해 마우스나 터치를 통한 graph rotation 기능을 제거했습니다.

> Surface3D 을 이용해서 2D spectrogram 을 제작합니다. 이를 위해  orthoProjection 과 scene.activeCamera.cameraPreset 를 이용해 perspective 를 삭제하고 camera 를 Y축 맨 위에서만 바라보도록 setting 합니다.

> Polar angle Spectrogram 은 polar 를 이용해 제작합니다. 예제에서는 Button을 통해 Polar/Cartesian Switch 가 가능하도록 구현하였습니다.

QML Surface Example

> Surface3D 를 이용해 만든 3D surface Plot  입니다.

> Height 값이 함께 포함된 png 파일(heightmap)을 import합니다.

> HeightMapSurfaceDataProxyItemModelSurfaceDataProxy를 이용해 data 를 setting 하며, ColorGradient 를 이용해서 color position 을 정합니다.

QML Surface Multiseries Example

> Surface3D 를 이용하여 여러 개의 (3개) 레이어를 가진 3D surface plot 예제 입니다.  3개의 각기 다른 png height map으로 구성하였습니다.

> 레이어별 색상에 대한 gradient 는 ColorGradient를이용합니다.

> 3개의 각기 다른 Surface3DSeriesSurface3D 의 children graph 로 add 합니다.

> Graph 의 control 은 GroupBox CheckBox 등을 이용해 제작하였습니다.