Опубликовано

Графопостроитель FlexiPlot

По материалам книги В. Яценкова  «Здоровье, спорт и окружающая среда в проектах Arduino» (глава 5. «Визуализация данных»)

Здоровье

Графопостроитель FlexiPlot находится в процессе разработки, но уже сейчас обладает большим количеством настроек и функций. Скачайте архив файлов программы по адресу https://github.com/xcoder123/FlexiPlot/releases. Программа не требует установки. Распакуйте архив в удобное место.

FlexiPlot позволяет открыть несколько рабочих окон графопостроителя (Chart), и в каждом окне можно независимо и одновременно строить до 256-ти графиков. Каждому окну присвоено уникальное имя (индекс окна). Этот индекс необходимо указать в пакете данных, чтобы программа поняла, в какое окно направить пакет.

FlexiPlot может рисовать не только обычные графики в ортогональной системе координат — предусмотрены функции рисования столбчатых диаграмм различного вида и свободный графопостроитель по заданным точкам.

Пакет данных для рисования графика заключен в фигурные скобки, данные разделяются символом вертикальной черты |. Формат пакета имеет следующий вид:

{Index|Name_1|Colour_1|Value_1|Name_2|Colour_2|Value_2}

где:

  • Index — имя окна, в которое отправлен пакет;
  • Name_1 — подпись первой кривой в легенде графика;
  • Colour_1 — цвет первой кривой графика в формате R,G,B (например, 255,0,0);
  • Value_1 — текущее значение для первой кривой графика;
  • Name_2 — подпись второй кривой в легенде графика;
  • Colour_2 — цвет второй кривой графика в формате R,G,B;
  • Value_2 — текущее значение для второй кривой графика,

и так далее — для каждой величины, которая должна быть прорисована в окне с соответствующим индексом.

Пакет должен завершаться символом перевода строки.

Такой объемный пакет данных позволяет очень гибко настраивать отображение графиков. Например, можно на ходу менять цвет линии графика в зависимости от величины отображаемого параметра. Но большая длина пакета вынуждает использовать высокую скорость передачи данных в порт (115200 бод) и выдерживать паузу не менее 5 мс между пакетами, чтобы избежать переполнения буфера порта и потерю данных.

Загрузите в плату Arduino демонстрационный скетч из листинга 5.3. Этот скетч отправляет текущее значение аргумента angle в окно P0, а значения тригонометрических функций sin() и cos() — в окно P1.

Листинг 5.3. Пример работы с графопостроителем FlexiPlot

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#define DEG_TO_RAD 0.01745329
void setup() {
Serial.begin(115200);
}
 
void loop() {
for (float angle = 0; angle < 360; angle++)
{
// Пакет данных для окна P0
Serial.print("{P0|Angle|0,0,255|");
Serial.print(angle);
Serial.println("}");
 
 
// Пакет данных для окна P1
Serial.print("{P1|Sin|255,0,0|");
Serial.print(sin(DEG_TO_RAD * angle)*10);
Serial.print("|Cos|0,255,0|");
Serial.print(cos(DEG_TO_RAD * angle));
Serial.println("}");
}
}
  1. Запустите программу FlexiPlot. Настройте номер последовательного порта (опция Port) и установите скорость обмена 115200 бод (опция Baudrate).
  2. Выберите пункт меню Graph | Add Line Chart или нажмите кнопку графического меню с изображением графика — на экране появится рабочее окно графопостроителя, которое надо настроить. Растяните это окно на всю ширину окна программы и на половину его высоты.
  3. Перейдите на вкладку Settings и введите в поле Title название окна — например, Аргумент функций.
  4. В поле Buffer введите значение 1000 — это размер буфера. С такой настройкой буфер будет хранить 1000 выборок. Вновь поступающие значения вытесняют устаревшие данные.
  5. В поле Refresh Rate введите значение 10 — это интервал между обновлениями изображения в миллисекундах. Чем меньше его значение, тем плавнее движется график, но выше нагрузка на процессор компьютера.
  6. Уберите флажок Auto Scaling Y (автомасштабирование по оси Y). В нашем случае мы заранее знаем, что отображаемое значение изменяется в диапазоне от 0 до 360, поэтому можем настроить масштаб вручную. Для этого в поле Min Y введите 0, а в поле Max Y — 400.
  7. Добавьте еще одно рабочее окно и расположите его под предыдущим окном. Введите заголовок окна — например, Значения функций. Значения Buffer и Refresh Rate скопируйте из настроек первого окна, чтобы графики прорисовывались синхронно.
  8. Уберите флажок Auto Scaling Y. В поле Min Y введите -10, в поле Max Y — 10.
  9. Для сохранения всех настроек и расположения рабочих окон нажмите кнопку с изображением дискеты или выберите пункт меню File | Save.
  10. Вернитесь к вкладкам Chart. Выберите пункт меню Serial | Connect. Плата Arduino перезагрузится и начнется прорисовка графиков (рис. 5.3). Если этого не произошло, проверьте настройку номера и скорости порта, а также настройки рабочих окон.

5-3

Рис. 5.3. Рабочее окно программы FlexiPlot с демонстрационными графиками

exclamation При большой нагрузке на процессор компьютера может искажаться прорисовка графиков. В ответственных случаях лучше не запускать на компьютере одновременно с FlexiPlot какие-либо ресурсоемкие программы.

Дополнительные настройки рабочего окна графика

Вы можете также задать следующие дополнительные настройки:

  • Date Format — формат меток реального времени по оси X (часы:минуты:секунды). Можно оставить только нужную метку или полностью убрать метки времени;
  • Auto Filling — автоматическая заливка цветом областей под кривой графика;
  • Auto Fill Opacity — интенсивность цвета заливки. По умолчанию — 20%.

Встроенный терминал

В программе имеется встроенный терминал последовательного порта, доступный в меню Serial | Terminal. Это обычный терминал, который позволяет отправлять символы и шестнадцатеричные числа в плату Arduino и отображать поступающие данные. Опция Filter Plotting Packets отсекает пакеты данных и пропускает только символы, не входящие в пакеты. Эта опция позволяет отправлять в графопостроитель отладочные сообщения в интервале между пакетами данных.

Рисование столбчатых диаграмм

FlexiPlot может в режиме реального времени рисовать наглядные столбчатые диаграммы по данным, поступающим от платы контроллера Arduino. Каждый новый пакет полностью обновляет диаграмму.

Формат пакетов данных для диаграммы представлен в двух вариантах: с автоматическим выбором цвета столбцов и с явным указанием цвета.

Пример пакета данных с автоматическим выбором цвета имеет следующий вид:

{P0|Night;Morning;Day;Evening|Inside|12 15 17 14|Outside|8 15 23 19}

Сначала, как обычно идет индекс (имя) рабочего окна. Далее через точку с запятой задаются имена групп столбцов. Их может быть сколь угодно много. В нашем примере это четыре группы: ночь, утро, день и вечер. Допустим, мы измеряем температуру внутри помещения (Inside) и снаружи (Outside) четыре раза в сутки (то есть получаем по четыре группы значений для каждого типа замеров). Соответственно, после названия величины типа замера в пакете следуют четыре значения, разделенные пробелами. Затем идет название следующей величины и ее значения. Этот шаблон повторяется нужное количество раз.

В строке пакета нельзя использовать кириллицу и специальные символы.

Воспользуемся встроенным инструментом отладки FlexiPlot — Packet Injector — который позволяет имитировать получение пакетов через последовательный порт. Благодаря этому инструменту мы можем экспериментировать с содержимым пакетов и вариантами прорисовки диаграммы без программирования контроллера Arduino.

  1. Выберите пункт меню Graph | Add Bar Graph — чтобы открыть новое окно рисования столбчатых диаграмм.
  2. Выберите пункт меню Tools | Debug Tools — чтобы запустить инструмент отладки. Введите в поле Packet пример пакета данных c автоматическим выбором цвета и нажмите клавишу <Enter>. В рабочем окне должна появиться диаграмма (рис. 5.4). Если ничего не произошло, проверьте правильность ввода пакета данных. Чтобы повторить отправку пакета, выделите нужную строку в поле History.
  3. Перейдите на вкладку Settings в рабочем окне. В вашем распоряжении богатый выбор настроек внешнего вида диаграммы:
  • Name of X Axis и Name Of Y Axis — подписи осей координат. Можно использовать кириллицу;
  • Bar Chart Type — выбор типа диаграммы: обычная (Normal), с наложением столбцов (Stacked), с наложением в процентах (Percent), горизонтальная (Horizontal), горизонтальная с наложением (Horizontal Stacked), горизонтальная в процентах (Horizontal Percent);
  • Animation — анимация при прорисовке диаграммы: без анимации (No Animation), анимация осевой разметки (Grid/Axis Animation), анимация столбцов (Series Animation), анимация всех элементов (All Animations);
  • Theme — выбор темы оформления диаграммы;
  • Anti-Aliasing — сглаживание изображения;
  • Legend — настройка отображения, расположения и шрифта текста легенды диаграммы;
  • Labels — настройка отображения и расположения текстовых меток на диаграмме. По умолчанию числовое значение величины (@value) отображается в середине столбца;
  • Scaling — управление автоматическим масштабированием. Если диапазон значений известен заранее, можно задать минимальное и максимальное значение в полях Min и Max.

5-4

Рис. 5.4. Пример построения столбчатой диаграммы из четырех групп с автовыбором цвета

Попробуйте менять параметры настроек и наблюдайте за изменениями на вкладке Chart. Выберите вариант настройки, который вам больше нравится.

Цвет столбцов в формате R,G,B можно указать непосредственно в пакете. Для этого после названия величины надо вставить в пакет значение цвета:

{P0|Night;Morning;Day;Evening|Inside|255,0,0|12 15 17 14|Outside|0,255,0|8 15 23 19}

В этом примере параметр Inside будет отображен красными столбцами, а параметр Outside — зелеными.

Динамические диаграммы

Программа FlexiPlot не очень хорошо справляется с прорисовкой быстро меняющихся диаграмм. Плавность прорисовки столбцов зависит от быстродействия и загруженности процессора компьютера. Тем не менее, мы можем успешно отображать плавно меняющиеся параметры, изменять цвет столбцов в зависимости от величины параметра, изменять подписи столбцов и групп. Для этого достаточно сформировать нужный пакет данных в скетче Arduino.

Загрузите в плату Arduino скетч примера из листинга 5.4.

Листинг 5.4. Пример отображения динамической диаграммы в FlexiPlot

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

int i, j;
void setup() {
Serial.begin(115200);
}
 
void loop() {
for (i = 0; i &lt; 255; i = i + 5)
{
j = 255 - i;
Serial.println((String)"{P0|S|d1|" + i + ",0," + j +"|" + i + "|d2|0,255,0|" + j + "}");
delay(100);
}
 
for (int i = 255; i &gt; 0; i = i - 5)
{
j = 255 - i;
Serial.println((String)"{P0|S|d1|" + i + ",0," + j +"|" + i + "|d2|0,255,0|" + j + "}");
delay(100);
}
}

В этом скетче мы рисуем диаграмму из двух столбцов, высота которых плавно изменяется в противоположных направлениях от 0 до 255 и обратно. При этом цвет первого столбца плавно меняется в зависимости от текущего значения параметра. Эффект достигается подстановкой переменных значений в компонент цвета в пакете данных.

В настройках графика отключите анимацию, отображение легенды и автомасштабирование. Задайте диапазон значений Min/Max от 0 до 300. Попробуйте менять тип диаграммы Bar Chart Type и выберите наиболее подходящий для ваших задач.

Добавить комментарий