Contents

Qt Data Visualization

Features

Qt Data Visualization Example with C++ Classes

Audio Levels Example
Axis Range Dragging with Labels Example
Bars Example
Custom Input Example
Custom Items Example
Custom Proxy Example
Item Model Example
Rotation Example
Scatter Example
Surface Example
Textured Surface Example
Volumetric rendering Example

Qt Data Visualization QML Types
Qt Data Visualization Example with QML Types

QML Axis Dragging Example
QML Axis Formatter Example
QML Bars Example
QML Custom Input Example
QML Legend Example
QML Multiple Graphs Example
QML Oscilloscope Example
QML Scatter Example
QML Spectrogram Example
QML Surface Example
QML Surface Multiseries Example

 

Qt Data Visualization

> 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 구현에 관해 추가적으로 궁금 하신 부분은 june.joe@ocube.co.kr 로 문의 바랍니다.

 

Feature

> 조화로운 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 을 제공합니다.

 

Qt DataVisualization C++ Classes

Q3DBars

Q3DCamera

Q3DInputHandler

Q3DLight

Q3DObject

Q3DScatter

Q3DScene

Q3DSurface

Q3DTheme

QAbstract3DAxis

QAbstract3DGraph

QAbstract3DInputHandler

QAbstract3DSeries

QAbstractDataProxy

QBar3DSeries

QBarDataItem

QBarDataProxy

QCategory3DAxis

QCustom3DItem

QCustom3DLabel

QCustom3DVolume

QItemModelBarDataProxy

QItemModelScatterDataProxy

QItemModelSurfaceDataProxy

QLogValue3DAxisFormatter

QScatter3DSeries

QScatterDataItem

QScatterDataProxy

QSurface3DSeries

QSurfaceDataItem

QSurfaceDataProxy

QTouch3DInputHandler

QValue3DAxis

QValue3DAxisFormatter

 

Audio levels Example
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
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
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 사용됩니다.

 

Custom Input Example
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
custom items example
  • graph 에 Custom mesh를 추가/삭제 할 수 있는 기능을구현한 예제 입니다.
  • .obj 확장자의 mesh 파일을 import 하여 사용합니다.

 

Custom Proxy Example
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
item model example
  • Qt WidgetQ3DBars 를 이용한 간단한 형태의 3D bar graph 를 run-time 에 data 입력에 의해서 수정될 수 있도록구현한 예제 입니다.
  • Graph에 data를 setting 하기 위해서는 QItemModelBarDataProxy 를 사용합니다.

 

Rotation Example
rotation example
  • 화살표 Item 에 Rotation 효과를 주며 화살표 아이템이 구의 중심을 향하도록 해주는 예제입니다.
  • 화살표 Item 이 구의 중심에 접선으로 향하여 Y/Z 축을 따라서 회전시키기 위해서 vector 와 scalar 로구성된 QQuaternion 클래스를 이용합니다.
  • 화살표/원구는 .obj 파일을 import 하여 사용합니다.
  • 화살표의 색상이 짙어지고 흐려지는 효과는 QLinearGradient 클래스에서 기능을 제공합니다.

 

Scatter Example
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
surface example
  • Q3DSurface 를 사용해서 간단한 3D surface graph를 제작한 예제 입니다.
  • Data Setting 은 QSurfaceDataProxy을 사용하며 Q3DTheme 를 사용해 선택된 Theme를 메뉴에서 세팅 할 수 있도록 했습니다.
  • QLinearGradient class를 사용해 Widget 메뉴의 가장 하단에 두 개의 push 버튼으로 제공되는 custom surface gradients 를 표현합니다.

 

Textured Surface Example
textured surface example
  • Surface 에 image 를 texture로 입히는 예제 입니다. Image로 surface series 를 만들고, zooming 과 panning 을 가능하게 해주는 custom input handler 를 제작하였습니다.
  • QSurface3DSeries::setTextureFile 을 이용하면 jpg 파일을texture로 입힐 수 있습니다.
  • 지형 Data 는 QSurface3DSeries를이용하여 PNG 파일을 통해 입력 되고 decode 됩니다.
  • 마우스 휠을 통한 Zooming 을 위해서 QWheelEvent 를사용합니다.

 

Volumetric rendering Example
volumetric rendering example

 

Qt DataVisualization QML types

Abstract3DSeries

AbstractAxis3D

AbstractDataProxy

AbstractGraph3D

AbstractInputHandler3D

Bar3DSeries

BarDataProxy

Bars3D

ScatterDataProxy

Camera3D

CategoryAxis3D

ColorGradient

ColorGradientStop

Custom3DItem

Custom3DLabel

Custom3DVolume

Scene3D

HeightMapSurfaceDataProxy

InputHandler3D

ItemModelBarDataProxy

ItemModelScatterDataProxy

ItemModelSurfaceDataProxy

Light3D

LogValueAxis3DFormatter

Scatter3D

Scatter3DSeries

Surface3D

Surface3DSeries

SurfaceDataProxy

Theme3D

ThemeColor

TouchInputHandler3D

ValueAxis3D

ValueAxis3DFormatter

 

QML Axis Dragging Example
aml 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 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 bars example
  • QML 을 이용해서 구현한 3D Bar Graph 예제 입니다.
  • 시간, 수입, 지출의 3가지 가상 data 를 구현하는데 Bars3DBar3DSeries 가 사용되었습니다.
  • Data 의 정규 표현 식을 다루기 위해서 QString::replace 함수가 사용되었습니다.
  • QML 로 작성된 control 을 사용하여 원하는 data 를 선별하여 볼 수 있도록 하였습니다.

 

QML Custom Input Example
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 legend example
  • QML 을 이용해 구현한 3D graph에 Interactive Legend 표시를 추가로 구현한 예제 입니다.
  • Legend 는 ColumnLayoutRowLayout 으로 구성하며, 표시되는 item selection 은 Bar3DSeries::selectedBar 를 이용하여 구분 합니다.

 

QML Multiple Graphs Example
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
qml oscilloscope 1 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
qml scatter example
  • Scatter3D 를 이용한 scatter graph 입니다.  QML 을이용한 Data visualization 의 기본 적인 기능들을 포함하고 있습니다.
  • Theme3D 를 이용해 Visual property 를 설정하였습니다.
  • Data Setting 을 위해서 ItemModelScatterDataProxy 가 활용됩니다.

 

QML Spectrogram Example
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
qml surface example

 

QML Surface Multiseries Example
qml surface multiseries example
  • Surface3D 를 이용하여 여러 개의 (3개) 레이어를 가진 3D surface plot 예제 입니다.  3개의 각기 다른 png height map으로 구성하였습니다.
  • 레이어별 색상에 대한 gradient 는 ColorGradient를이용합니다.
  • 3개의 각기 다른 Surface3DSeriesSurface3D 의 children graph 로 add 합니다.
  • Graph 의 control 은 GroupBox CheckBox 등을 이용해 제작하였습니다.