Qt графики в реальном времени

Qt графики в реальном времени

На данном ресурсе совсем недавно появилось несколько довольно интересных статей по введению в программирование графики на Qt (см. "Отрисовка графических примитивов на Qt/C++", "Создание простой анимации с использованием QML"). К сожалению, ни в одной из них не рассматривается прикладной характер использования программирования графики. Под "прикладным характером" я подразумеваю возможность реального использования и быстроты разработки. В Qt реализован отличный механизм UI, который позволяет создавать окна буквально в два клика, используя технологию drag&drop. По сути, сама форма является лишь xml файлом, в котором обозначены расположения всех объектов. Использование данного механизма позволяет разработчику тратить меньше времени на реализацию интерфейса, и сосредоточиться на разработке самой логики программы.

В данном уроке я объясню вам как использовать данную технологию для создания программы отрисовки графиков, что будет являться отличным примером прикладного программирования графики на Qt.

Начать следует с создания проекта. В меню создания вам предложат создать форму, и если в других уроках рекомендовалось её не создавать, то в этом её следует создать.
При окончании создания проекта у вас будет четыре файла:
1) main.cpp — главный файл, который должен присутствовать во всех проектах (за редким исключением)
2) MainWindow.h — заголовочный файл окна, в котором будут описаны необходимые нам методы.
3) MainWindow.cpp — файл, в котором будут реализованы методы, объявленные в mainwindow.h
4) MainWindow.ui — файл формы.

Хочется заметить, что последние три файла могут у вас называться по-другому, если вы решили назвать главный класс "не по дефолту".

Кликнув два раза по файлу mainwindow.ui в Qt Creator, вы перейдете в меню создания интерфейса. С помощью layout’ов (как и в других средах программирования) зададим приблизительную разметку интерфейса и поместим на форму нужные нам кнопки и поля.
Объект label будет использоваться для отображения картинки.

Читайте также:  Hp pavilion g6 2214sr драйвера

Вот что у меня получилось:

Если есть желание — можете поменять названия объектов кнопок. Чтобы определить методы нажатия на кнопки, достаточно кликнуть по ней (кнопке) правой кнопкой мыши, перейти к пункту меню "перейти к слоту" и выбрать on_click().

Теперь перейдем к коду. Я сразу приведу код файлов mainwindow.h и mainwindow.cpp с комментариями.

В итоге у нас получается что-то вроде такого:

Как вы видите, использование ui очень упрощает работу программисту, так как ему не надо так много времени тратить на программирование интерфейса.

В статье показывается пример установки и демонстрации возможностей библиотеки QCustomPlot для рисования графиков на QtWidgets.

25.05.2014 38 комментариев 79 130 просмотров

В статье показывается пример установки и демонстрации возможностей библиотеки QCustomPlot для рисования графиков на QtW >

Как известно, одним из недостатков системы Qt в том, что в стандартной бесплатной версии нет компонентов для рисования графиков. Для платной есть графики, но стоят они дороговато. И есть одна из бесплатных библиотек, которые эти самые графики (двумерные) позволяет рисовать.

Где найти?

  1. Идем на сайт http://www.qcustomplot.com/

И скачиваем библиотеку из соответствующего раздела:

А можно скачать отсюда версию 1.3.1: qcustomplot-1.3.1.zip

Из всей библиотеки нам потребуется только два файла: qcustomplot.cpp и qcustomplot.h :

Подключение библиотеки

  1. Создадим для примера приложение Qt Widgets:

В папку с исходными кодами проекта скинем наши два файла библиотеки. Обратите на этот шаг внимание! Многие данный шаг, как показывает практика, пропускают, и загружают потом в проект эти файлы из распакованного архива, а не из папки своего проекта!

Щелкнем правой кнопкой по проекту в Qt Creator и выберем добавление существующих файлов Add Existing Files. :

Читайте также:  Pls адаптер цифровое тв

Выберем два наших файла библиотеки:

Они добавятся к нашему проекту:

Перейдем в файл проекта .pro и допишем там слово printsupport :

Перейдем на форму:

Разместим там кнопку и Widget :

Щелкнем по Widget правой кнопкой и перейдем к Promote to.

Там пропишем класс графиков QCustomPlot и нажмем на Add. :

А потом на Promote :

Внешне ничего не изменилось, но, если мы запустим приложение, то увидим координатную сетку:


Иногда после данных действий кнопка запуска неактивна и серая вместо того, чтобы быть зеленой. Данный глюк, можно, например, быстро решить, переключить режим компилирования с Debug на Release (или наоборот), а потом обратно переключить.

Теперь нарисуем какой-нибудь график. Нам потребуется имя компонента Widget, чтобы обращаться к нему:

Библиотека QCustomPlot имеет возможность построения графиков по шкале времени, что удобно при анализе данных, которые изменяются во времени. Для этого необходимо установить тип подписи к Оси Времени в качестве QCPAxis::ltDateTime. И после этого выставить формат даты и времени. То есть имеется возможность отображать на Оси или дату, или время, или одновременно и то и другое, в зависимости от того, какое форматирование Вы зададите. Правила форматирования для QCustomPlot используются те же, что и для классов QDateTime, QDate, QTime.

Координата времени передаётся в виде числа типа double , которое начинает отсчёт в секундах от времени 1970-01-01T00:00:00 . Что необходимо учитывать при построении графика.

Предлагаю написать приложение, которое будет строить псевдослучайный график дохода и рублях в зависимости от текущей координаты времени. При этом с графиком можно будет взаимодействовать, то есть приближать и удалять его, а также передвигать, но только по горизонтальной Оси. То есть по высоте отображение графика изменяться не будет. Также сделаем возможность изменения формат координат времени в зависимости видимой области графика по Оси Времени. То есть, если видна часть графика меньше, чем за один день, то по оси времени формат подписей будет следующий: hh:mm . В противном случае формат будет "dd MMM yy" .

Читайте также:  Crucial mx500 m 2 2280 500gb

Строим График

Создаём проект и подключаем в него библиотеку QCustomPlot. Модификации будут подвергаться только файлы mainwindow.h и mainwindow.cpp. Новые файлы добавляться не будут.

mainwindow.h

Объявляем экземпляр класса QCustomPlot, а также экземпляр самого графика. И объявим СЛОТ, в который будет передаваться сигнал об изменении области отображения по Оси Времени.

mainwindow.cpp

В результате у Вас должен получиться график подобный тому, что показан на ниже следующем рисунке. Отмечу, что при прокручивании колёсика мыши и передвижении графика мышью, сам График будет изменяться только по Оси X, как и было задумано в данном примере.

Демонстрацию работы приложения Вы можете увидеть в видеоуроке.

Видеоурок