Графики TFT:графики живой истории

Эта часть кода рисует контур графика, линии осей x и y, а также метки и метки оси y значениями.

• Прочитать Температура

  chk =DHT.read11 (22); temp =(DHT.temperature);  

Эта короткая строка кода считывает температуру с датчика DHT 11 и затем сохраняет ее в переменной.

• Рисовать График

  if (blockPos <8) {// выводим время tft.setCursor ((mark [valuePos] - 5), (originY + 16)); tft.setTextColor (graphColor, БЕЛЫЙ); tft.setTextSize (1); tft.println (timeBlock [valuePos]); // сопоставляем значение locationBlock [valuePos] =map (temp, 0, graphRange, originY, (originY - sizeY)); // рисуем точку tft.fillRect ((mark [valuePos] - 1), (locationBlock [valuePos] - 1), markSize, markSize, pointColor); // пытаемся подключиться к предыдущей точке if (valuePos! =0) {tft.drawLine (mark [valuePos], locationBlock [valuePos], mark [(valuePos - 1)], locationBlock [(valuePos - 1)], lineColor); } blockPos ++; } else {// очищаем холст графика tft.fillRect ((originX + 2), (originY - sizeY), sizeX, sizeY, WHITE); // отображаем значение - текущая точка locationBlock [valuePos] =map (temp, 0, graphRange, originY, (originY - sizeY)); // рисование точки - текущая точка tft.fillRect ((mark [7]), (locationBlock [valuePos] - 1), markSize, markSize, pointColor); // рисуем все точки для (int i =0; i <8; i ++) {tft.fillRect ((mark [(blockPos - (i + 1))] - 1), (locationBlock [(valuePos - i)] - 1), markSize, markSize, pointColor); } // рисуем все линии для (int i =0; i <7; i ++) {tft.drawLine (mark [blockPos - (i + 1)], locationBlock [valuePos - i], mark [blockPos - (i + 2)], locationBlock [valuePos - (i + 1)], lineColor); } // меняем метки времени для (int i =0; i <=8; i ++) {tft.setCursor ((mark [(blockPos - i)] - 5), (originY + 16)); tft.setTextColor (graphColor, БЕЛЫЙ); tft.setTextSize (1); tft.println (timeBlock [valuePos - i]); }} valuePos ++;  

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

Персонализация графика

Самое интересное в этом графике то, что он на 100% редактируется, поэтому пользователь может редактировать размер графика, его расположение и цвет, а благодаря его гибкости пользователь также может отображать любые данные на графике. Это все переменные, о которых вам следует позаботиться.

  bool proDebug =0; uint16_t graphColor =СИНИЙ; uint16_t pointColor =ЧЕРНЫЙ; uint16_t lineColor =ЗЕЛЕНЫЙ; String graphName ="Временной график"; int graphRange =50; int markSize =3;  

• proDebug - это утилита отладки, встроенная в проект, по умолчанию она установлена ​​на 0, при установке на 1 / true она будет печатать текущую температуру в Serial Monitor, это утилита отладки, обратите внимание, что если она включена, Serial Monitor должен быть открыт для запуска кода.

• graphColor задает цвет графика, линии x и y и их метки устанавливаются на этот цвет.

• pointColour представляет цвет точки, показывающей значение на графике.

• lineColour устанавливает цвет линии, соединяющей точки на графике, на выбранный цвет.

• graphRange является основой графика, обратите внимание, что действительно важно, чтобы он был установлен правильно, он представляет максимальное значение, которое можно изобразить, я использую датчик температуры, я не ожидал, что значение превысит 50 ° C, поэтому я установил значение 50, если вы хотите построить график аналогового входа Raw, вы можете установить для graphRange значение 1024, максимальное значение, которое может отображать аналоговый вывод.

• markSize представляет размер точки, обозначающей значение датчика на графике, значение представляет длину квадрата.

И это все, о чем вам нужно беспокоиться, остальные переменные будут вычислены автоматически Arduino.

Изменение the Значение

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

Собираюсь Далее

Вы можете продолжить эксперименты с проектом, попробовать отредактировать константы originX, originY, sizeX и sizeY, чтобы изменить размер и положение вашего графика на экране. К основному эскизу прикреплен заголовочный файл, он содержит цветовые коды некоторых цветов, попробуйте изменить цвет диаграммы и полос. Вот и все, ваш персональный график готов.

Библиотеки

• Библиотеки Elegoo - Copyright (c) Adafruit Industries, 2012 г., под лицензией BSD.

• DHT - Автор Роб Тиллаарт, эта библиотека находится в общественном достоянии.

Фон

Недавно я опубликовал проект, который отображает 1, 2, 3 или 4 значения на гистограмме. Решил опубликовать еще один шаблон для построения графиков. Не существует шаблонов для гистограмм, в которых бы не было линий, которые могли бы запутать, поэтому я решил снова посчитать и опубликовать простой проект, который позволяет каждому изобразить свои данные на графике истории в реальном времени.