Создание собственных графиков для данных IOT на Raspberry PI: 3 шага

2025 Автор: John Day | [email protected]. Последнее изменение: 2025-01-23 15:05

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

Я хотел создать диаграммы для отображения данных с моих датчиков IOT в графическом формате на веб-странице. Раньше для этого я использовал сторонние сервисы (некоторые платные) и сторонние графические функции для моей системы баз данных - Mysql, используя язык программирования, известный как Php. Я обнаружил, что эти сторонние сервисы слишком сложны или слишком дороги в развертывании. Поэтому я написал свою собственную простую функцию Php, которая принимает данные в виде массивов из текстового файла или таблицы базы данных (возможно, из Mysql) и отображает их в виде линейного графика на веб-странице. Я сделал весь код php доступным на github - https://github.com/scanos/php-simple-chart. Я также включил сюда часть кода - первый файл php - PhpSimpleChart2.php - содержит файл функции линейного графика. Другой файл, PhpSimpleChart_ex1.php, представляет собой пример файла, показывающий, как его использовать. Я предлагаю вам также посетить страницу github, чтобы получать обновления кода.

Я развертываю это на своем Raspberry Pi. Вот что вам понадобится:

1) Некоторые знания по развертыванию веб-сервера, такого как Apache, базы данных, такой как Mysql, и PHP. В совокупности они известны как LAMP - Linux, Apache, Mysql и PHP. и есть огромное количество информации в Интернете относительно их развертывания на Raspberry Pi. Поэтому я не буду здесь останавливаться на этом.

2) Среда LAMP linux - опять же, например, Raspberry Pi.

3) Средство для загрузки и создания файлов в вашей веб-среде, то есть папок на вашем Raspberry Pi, в которых вы развертываете свои программные файлы php.

Далее я покажу вам, как создавать свои собственные файлы Php, используя два файла php, о которых я упоминал ранее.

Шаг 1. Код функции PHP - PhpSimpleChart2.php

Этот файл называется PhpSimpleChart2.php - вам нужно будет загрузить его из репозитория git, нажав кнопку загрузки / клонирования - см. Изображение выше. Как только вы это сделаете, перенесите два файла php на свой веб-сервер с помощью стандартного FTP-клиента или, возможно, вы настроили общий ресурс samba на своем Raspberry Pi, что делает ваши папки Pi похожими на папки Windows..

Вам действительно не нужно менять код в этом основном файле Php - PhpSimpleChart2.php. Это простая функция создания линейной диаграммы для Php. Обычно функции передаются 2 массива, а также другие аргументы, такие как размеры диаграммы. Первый массив содержит первые необработанные значения, такие как температура и т. Д. Второй массив содержит связанные значения дат. Программа пытается автоматически изменить размер графика в зависимости от диапазона, минимума, максимума и элементов массива. Полученная диаграмма может быть вырезана и вставлена в документы MS office в виде gif,-p.webp

После того, как вы загрузили PhpSimpleChart2.php на свой веб-сервер, вы можете написать свой собственный скрипт для его использования. Это показано на следующей странице.

Шаг 2. Написание собственной программы на основе примера программы

Я показал пример программы PhpSimpleChart_ex1.php, которая снова находится в репозитории git. Первая строка кода - это вызов php-скрипта, который содержит функцию построения графиков -

требуется ("PhpSimpleChart2.php");

В этом случае файл PhpSimpleChart2.php помещается в ту же папку, что и сценарий, который вы пишете для его вызова. Надеюсь, вы знаете, что файлы php должны иметь правильные свойства чтения / записи 755.

Затем вам нужно создать источники данных и заполнить массив. Вот примеры массивов, один для данных, а другой для связанных дат и времени. Очевидно, что в обоих массивах должно быть одинаковое количество значений.

$ data_array = array («12», «15», «18», «12», «11», «23», «11», «24», «15», «18», «12», « 11 "," 23 "," 11 "," 24 ");

$ date_array = array («12-е 14ч», «12-е 15ч», «12-е 16ч», «12-е 17ч», «12-е 18ч», «12-е 19ч», «12-е 20ч», «12-е 21ч», «12-е 15ч», «12-е 16ч», «12-е 17ч», «12-е 18ч», «12-е 19ч», «12-е 20ч», «12-е 21ч»);

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

Далее вам нужно установить параметры для вашего графика. Это довольно просто. Сначала вы устанавливаете заголовки, а затем устанавливаете высоту и ширину графика.

$ chart_text = "Моя тестовая таблица, июль 2018 г.";

$ y_title = "Температурный градус C";

$ x_scale = 1000;

$ y_scale = 400;

Затем вы вызываете функцию следующим образом.

draw_line_chart ($ data_array, $ date_array, $ chart_text, $ x_scale, $ y_scale, $ y_title);

Я показал результат работы этой примерной программы на прилагаемом изображении. Функция построения графиков пытается выполнить автоматическое масштабирование и избежать беспорядка по оси Y и точкам дескриптора диаграммы. Надеюсь, это сработает для вас. Это все, что вам нужно.

Шаг 3: Заключение

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

1) Большинство сторонних сервисов построения графиков IOT работают как онлайн-сервисы, которые обычно доступны в виде API.

2) Пользователи IOT обладают широким спектром компетенций в отношении развертывания функций построения графиков.

ПЛЮСЫ моего решения

а) Может работать в автономном режиме

б) Нулевая стоимость.

в) Небольшая занимаемая площадь

МИНУСЫ

а) Не тестировался с такой же тщательностью, как у крупных разработчиков программного обеспечения.

б) Ограниченная функциональность, т.е. нет гистограмм и т. д.

Пища для размышлений!