Метеостанция + построение графика + c#

Метеостанция + построение графика + C#

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

Итак, работа заключается в следующем: с известного многим датчика DHT11 (датчик влажности и температуры) принимаем данные через COM порт, далее записываем данные в текстовый файл и по этим данным строим график изменений.

Arduino Uno

Arduino Uno построен на ATmega328. Платформа имеет 14 цифровых вход/выходов, 6 аналоговых входов, кварцевый генератор 16 МГц, разъем USB, силовой разъем, разъем ICSP и кнопку перезагрузки. Для работы необходимо подключить платформу к компьютеру посредством кабеля USB, либо подать питание при помощи адаптера AC/DC или батареи.

Характеристики:

Микроконтроллер ATmega328
Рабочее напряжение 5 В
Входное напряжение (рекомендуемое) 7-12 В
Входное напряжение (предельное) 6-20 В
Цифровые Входы/Выходы 14
Аналоговые входы 6
Постоянный ток через вход/выход 40 мА
Постоянный ток для вывода 3.3 В 50 мА
Флеш-память 32 Кб (ATmega328) из которых 0.5 Кб используются для загрузчика
ОЗУ 2 Кб (ATmega328)
EEPROM 1 Кб (ATmega328)
Тактовая частота 16 МГц

Датчик DHT11

  • разрешение = 16 Bit
  • повторяемость = ±1%
  • точность = если 25℃, то ±5%
  • взаимозаменяемость = полностью взаимозаменяемый
  • время отклика = 1-2 сек
  • гистерезис =

DHT11 цифровой датчик температуры и влажности является составным датчиком, который содержит калиброванный цифровой выходной сигнал с показаниями температуры и влажности. Он имеет высокую надежность и превосходную долговременную стабильность работы. Датчик включает в себя резистивный сенсор влажности и компоненты NTC структуры для измерения температуры.

Подключение

1 — VCC — питание 3,5 — 5,5 V
2 — DATA — передача данных
3 — NC — не используется
4 — GND — отрицательное питание

Для подключения к arduino необходимо подключить между 1 и 2 ножкой резистор = 10кОм.

Схемы подключения

Схема:

Программный код (скетч для датчика DHT11)

Загружаю данный скетч, на каждую минуту и получаю данные в мониторе COM порта

34 — в % относительная влажность
25 — в ℃ температура

Далее я так сказать украшал свою программу, придавал ей товарный вид. Все это я делал в среде программирования Microsoft Visual Studio 2012 .NET. Я сделал приложение, которое через COM порт получает данные и обрабатывает их. Получаю, записываю в файл. Тоже построчно. В первой строке значение, вторая строка — дата и время в момент получения данных. Это пригодится для построения графиков. Кто не знаком с работой в C# очень рекомендую, удобная вещь. Создаю форму с 2-мя текстбоксами, 1- будет выводится значение влажности, 2 — значение температуры. Из них создается файл, если не был создан, если был создан до дописываем в него. 2 файла — 1-График_температуры, 2-График_влажности. Названия можете придумать свои. Элементы, используемые в программе: textbox и textbox1, openFileDialog — для работы с выбором файла для графика, notifyIcon — для работы с иконкой, для сворачивания в трей.

Вот запуск приложения

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

Далее нажимаем — Открыть, и увидим график

Это график относительной влажности. Есть свойство графика — он масштабируется по оси Х. Если большой интервал, мы мышкой выделяем зону, которая нам интересна и он приближает. Если общий график, то на оси Х около 0 нажмем «-» и график будет общим.

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

1ый значок в трее — программа. По нажатию левой кнопки мыши сворачивается или разворачивается программа.

Рисование графиков в С++

Однажды мне нужно было отрисовать пару графиков в консольной программе, написанной на С++. Можно было решить эту проблему двумя способами:

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

Первый способ мне не подходил, так как я проводил тестирование алгоритмов, и лишней возней с копированием данных заниматься не хотелось. Второй способ имеет множество решений, но увы я не нашел быстрого решения, чтобы библиотека для рисования не требовала целую кучу зависимостей. Обычно библиотеки для рисования из С++ программы хотят OpenCV или питон с матлабом. Еще как вариант я знаю SFML и ImGUI. Вопрос — нафига столько всего нужно для обычного графика, если по сути нужен OpenGL и все. Решил исправить эту проблему и набросал header-only С++ библиотеку, которая работает в отдельном потоке и способна рисовать графики зависимостей X от Y и тепловые карты. Из зависимостей библиотека требует FreeGLUT.

Как установить

Если использовать Code::Blocks и mingw, то нужно подключить библиотеку freeglut или freeglut_static (во втором случае нужно также установить макрос FREEGLUT_STATIC), а также opengl32, winmm, gdi32. Подключить в проекте заголовочный файл include/easy_plot.hpp, указать С++11 или выше.

Пример того, что может рисовать эта библиотека:


Пример кода

Рисование тепловой карты

Особенности библиотеки:

  • Функция plot может принимать такие параметры, как имя окна, стиль окна (различные настройки цвета и пр., см. WindowSpec), данные графиков и стиль линий.
  • Функция draw_heatmap может принимать такие параметры, как имя окна, стиль окна (различные настройки цвета и пр., см. WindowSpec), данные массива тепловой карты типа float и размер тепловой карты.
  • Если графиков несколько, изначально они будут расположены по всему экрану равномерно.
  • Если навести курсор мыши на график, можно узнать номер линии и данные по осям X и Y.
  • Рисование графиков и тепловой карты происходит в отдельном потоке.
  • При повторном вызове функции с уже существующим именем окна график будет перерисован.
  • Можно сохранить график

Репозиторий: https://github.com/NewYaroslav/easy_plot_cpp

  • Ключевые слова:
  • С++,
  • Графики,
  • рисование на графиках,
  • график,
  • библиотека,
  • алготрейдинг,
  • Инструменты,
  • разработка ПО,
  • разработка,
  • разработка алгоритма,
  • исследования
  • спасибо ₽
  • хорошо
  • 26

  • 06 декабря 2019, 13:30
  • Ответить

И зачем такие сложности. Встроенных возможностей вполне хватает и без OpenGL.

  • 06 декабря 2019, 13:34
  • Ответить

  • 06 декабря 2019, 13:54
  • Ответить

  • 06 декабря 2019, 16:17
  • Ответить

  • 06 декабря 2019, 16:19
  • Ответить

  • 06 декабря 2019, 18:06
  • Ответить

  • 06 декабря 2019, 18:19
  • Ответить

  • 06 декабря 2019, 14:00
  • Ответить

  • 06 декабря 2019, 14:12
  • Ответить

  • 06 декабря 2019, 16:59
  • Ответить

  • 06 декабря 2019, 14:14
  • Ответить

  • 06 декабря 2019, 14:14
  • Ответить

  • 06 декабря 2019, 14:43
  • Ответить

  • 06 декабря 2019, 17:00
  • Ответить

  • 06 декабря 2019, 22:33
  • Ответить

  • 06 декабря 2019, 15:21
  • Ответить

  • 06 декабря 2019, 16:00
  • Ответить

Как всё сложно у С++’ников. серьёзный подход. даже сказал бы профессиональный. На пайтон такие вещи попроще делаются.

последний раз графику использовал на c++ когда учился и писал в borland C. там это было примерно также просто как и на turbo pascal/qbasic. цикл по X, вычисление координат из функции (y) с масштабированием, постановка точки через point (ну или можно и lineto, если точек недостаточно).

  • 06 декабря 2019, 18:48
  • Ответить

Gregori, C++ только для профессионалов.

серьёзный подход. даже сказал бы профессиональный.

  • 07 декабря 2019, 03:56
  • Ответить

  • 07 декабря 2019, 12:53
  • Ответить

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

elektroyar, первая жесть — это потенциально «размножающиеся» static-переменные в заголовочном файле, особенно mutex. Если я разобью свою программу на несколько модулей (файлов), каждый из которых включит заголовочный файл библиотеки, то у меня появится несколько mutex’ов, по одному на каждый модуль. Всё, защита от race condition сломана.

Добиться того, чтобы mutex все равно был только один, можно, вот пример с несколькими модулями, где показано, что из разных модулей в вашем коде получается разный адрес mutex’а, то есть, их там много.

А также дана правильная реализация, чтобы адрес был один на программу, то есть, чтобы mutex был единственным.

Вторая жесть — это то, что код не является exception-safe там, где это жизненно необходимо.

Вы защищаете mutex’ом изменения drawings. Перед изменением drawings соответствующий mutex lock’чится, после изменения — раз’lock’чивается назад. Как бы, всё хорошо. Но между этими двумя моментами вызываются функции push_back и make_shared, каждая из которых может выбросить исключение. Я, в коде своей программы, могу отловить исключения и продолжить работу дальше. Но, вот, только библиотечный код при этом не раз’lock’чит mutex, и при попытке повторно его за’lock’чить всё повиснет. Для избегания таких вещей в стандартной библиотеке специально имеется lock_guard, который раз’lock’чит mutex при любом развитии событий.

Третья жесть — вы вообще прогоняли свой же тест?
Он не падает где-то на 33-35 строке?

В функцию с переменным числом аргументов передаёте сами объекты, а в самой функции вычитываете их адреса. Но передали-то объекты, а не их адреса. Естественно, всё падает.

В функцию с переменным числом аргументов можно передавать только POD-типы, а вы аж вектор туда запихиваете. И LineSpec не является POD-типом. Чтобы он им стал, требуется оттуда выкинуть всё, что мешает скомпилировать его в pure C. Вам хочется использовать значения по умолчанию, но это можно сделать и с POD-типом, применив вспомогательную функцию. Вот набросок на эту тему. Значение последнего параметра берётся по умолчанию.

Вот здесь рекомендуют вместо функции с переменным числом аргументов использовать variadic templates или initializer_list. Но для этого, конечно, нужно владеть «шаблонной магией» хотя бы на среднем уровне.

Набросок решения с использованием variadic templates — здесь (общее количество пар заранее неизвестно).

Набросок решения с использованием initializer_list — здесь (общее количество пар в данном случае будет заранее известно).

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

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

Метеостанция + построение графика + c#

БлогNot. Visual C++: построение графиков с интерпретацией введённой пользователем функции

Visual C++: построение графиков с интерпретацией введённой пользователем функции

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

Структура основной формы показана на рисунке, компоненты в panel1 перечислены по порядку в форме слева направо, что обеспечивает и нормальный порядок обхода полей по клавише табуляции.

Текстовым полям можно ограничить максимальный размер вводимой строки (свойство MaxLength ). Также panel1 расположена со свойством Dock=Top , а chart1 со свойством Dock=Fill . Это обеспечит нормальное взаимодействие компонент при изменении размеров окна. У самой формы выставлены Size и MinimumSize в значение 640; 400 — чтобы не «исчезали» кнопки при уменьшении окна.

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

Как альтернатива, можно формировать вещественные значения полей динамически в зависимости от текущего разделителя (например, по событию Load формы 1):

В форму также добавлено глобальное свойство типа NumberFormatInfo

которое проинициализировано в её конструкторе:

Основная работа выполняется по нажатию на кнопку OK ( button1_Click ). Сначала проверяем допустимость введённых данных с помощью пары служебных методов Parse (получить число) и Check (проверить правильность записи функции, попробовав получить её значение от 1-го аргумента). Потом метод Go делает цикл по нужным значениям аргумента, формируя диаграмму. Если возникает ошибка парсера, о ней выводится сообщение, но программа не завершается. Просто в данных не будет какой-то пары значений.

Парсер тот же, что по ссылке выше. Вот полный код фрагмента:

Единственная новая по отношению к статье мелочь —

Если национальные стандарты предполагают, что дробная часть вещественного числа отделяется от целой запятой, а не точкой, вместо оператора

Добавим в проект вторую форму, куда можно будет выводить таблицы данных из диаграммы. Для этого обратимся к меню Проект — Добавить новый элемент — Форма Windows Forms и назовём её Form2 . На вторую форму добавим DataGridView , поставим ему свойства Dock=Fill , ScrollBars=Vertical и подготовим 2 столбца для вывода значений X и Y:

У этой формы будет единственный публичный метод — принять пару значений (x,y) и добавить их в таблицу:

Такой код метода Do работает при установке свойства

так как при значении true в таблице есть «дополнительная» пустая строка, которая тоже участвует в нумерации.

А вызывать этот метод будет вторая кнопка tab с первой формы (функция button2_Click ), при этом, сначала создастся новый экземпляр Form2 , чтобы можно было сравнить несколько таблиц:

Чтобы это сработало, заинклудьте заголовки второй формы в начале кода Form1.h :

Разумеется, сам парсер тоже подлючён. Это весь проект, можно собирать. Вот пример работы программы:

Выражения в парсере пишутся «не совсем на C++», загляните в файл parser.cpp и увидите это, ещё лучше, можете модифицировать код парсера под свои нужды. Ну и ещё много что можно улучшить, а я выложу проект в текущем «образовательном» состоянии.

Скачать этот проект Visual C++ в архиве .zip (21 Кб)

P.S. Для совместимости с Visual Studio 2015 достаточно сделать вот такой главный файл проекта Lab4.cpp :

Самые очевидные улучшения:

  • округлять вводимые и вычисляемые значения до некого удобного количества знаков в дробной части;
  • ограничить максимальное количество узлов сетки, например, некой константой maxCollectionSize . При «слишком большом» размере коллекции Dictionary приложение может зависнуть, а какой размер «слишком большой», знает только Studio;
  • найти минимальное и максимальное значения функции, назначив их затем меткам оси Y, выполнить ту же работу и для оси X;
  • следить, не получилось ли при расчёте «не-число» Y с помощью isnan(y) || isinf(y) ;
  • следить, не добавляются ли повторно в коллекцию элементы с тем же ключом, с помощью ContainsKey и т.д.

Вот набросок чуть «улучшенного» проекта для Studio 2015:

Скачать архив .zip с папкой этого проекта Visual Studio 2015 (21 Кб)

P.P.S. Решение едва ли предназначено для консольных приложений из-за не слишком удобных преобразований между строками библиотеки .NET и «классическими» строками std::string или char * . Тем не менее, поизвращаться, конечно, можно, скажем, вот такой код главного модуля проекта годится для консольного приложения Visual Studio 2015:

Как видно из примера, нам пришлось дополнительно написать собственную функцию str_replace для замены строки char * на другую строку, чтобы обеспечить циклическую подстановку значений x в табулируемую функцию f(x) .

А вот архив с этим проектом Visual Studio 2015, с точностью до платформы (выбирается вверху из списков «Конфигурации решения», «Платформы решения») должно работать везде 🙂 Конечно же, выражение для нужной функции от аргумента «x» малое и нужные пределы изменения аргумента вы можете не только задать константами, но и прочитать откуда-то (с той же консоли или из файла).

Скачать архив .zip с консольной версией проекта построения графика произвольной функции, Visual Studio 2015 (6 Кб)

14.03.2015, 12:47; рейтинг: 36403

Строим график на телефоне по данным с датчика.

Показание с подключенного датчика к Arduino можно вывести на семи сегментный индикатор, на дисплей или в приложении. Как сделать самое простое приложения для вывода данных с датчика на Android телефон рассказывал тут Показание с датчика температуры и влажности на телефоне. dht11 + esp8266

Но как сделать боле наглядный вывод показаний? Можно вывести в виде графика на дисплей или на смартфон. Второй вариант сегодня и рассмотрим.

Для этого подключим к Arduino NANO, Bluetooth модель HC-06 и потенциометр, который будет выполнять роль датчика. Почему именно потенциометр, а не реальный датчик. С помощью потенциометра можно сделать более наглядные графики . А принцип тот же, что и с подключенным датчиком.

Bluetooth модель HC-06 подключаем к пинам 0 и 1 по аппаратному UART порту .

Поэтому подключать к компьютеру во время работы нельзя. Как пользоваться программный UART портом рассказываю тут в середине статьи: 12.2- Дисплей Nextion урок 2. Подключаем и передаемданные на Arduino.

Если возникли вопросы пишите на форум.

Дальше грузим в Ардиино вот такой небольшой код .

Приступим к приложению для телефона на Android . Как сделать подключение по Bluetooth к приложению я рассказывал вот в этой статье: BluetoothHC-06 и ардуино. Приложение андроид дляуправления Реле с телефона.

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

Нам понадобятся 2 невидимых компонента — это Bluetooth и часы для отчета интервалов для построения графика.

Блоки программы в mit app inventor.

Создадим переменные для постройки графика.

Переменную Y берем с показаний которые поступают по Bluetooth. X увеличиваем на 1. Вся программа работает внутри счетчика часов.

Сам график строиться по 2 точкам. Предыдущая и текущая.

Когда блок для выводы у нас заполняется мы его чистим.

Можно сделать сдвиг в лево. Но тут будут больше кода. Для понимания работы постарался сделать как можно проще.

В итоге у нас получаются вот такие графики.

В добавок можно изменить стиль оформления графиков. Изменить толщину и цвет линии графика.

Двумерная графика на C#, классы Graphics, Pen и Brush

На примере графики наглядно видны преимущества ООП, смысл использования классов, их методов и свойств. Добавляя в пространство имен своего проекта соответствующие библиотеки, вы получаете сразу набор инструментов, необходимых для графики. Это графические примитивы (линии, прямоугольники, эллипсы и т.п.), перо для черчения, кисть для закраски и много других полезных объектов и методов.

2D-графика делится, как вы знаете, на растровую и векторную. Растровое изображение — это набор цветных пикселей, заданных в прямоугольной области, хранящихся в файлах *.bmp, *.jpg, *.png и т.п. Самый простой растровый редактор — программа Paint. Векторная графика намного экономнее (по объемам памяти) растровой. Так для рисования прямоугольника достаточно задать координаты двух точек (левого верхнего и правого нижнего углов) и цвет и толщину линии. В этом разделе в основном рассмотрим методы векторной графики.

Пространство имен System.Drawing (Рисование) обеспечивает доступ к функциональным возможностям графического интерфейса GDI+ , используя около 50 (!) классов, в том числе класс Graphics. Чуть позже мы будем использовать дополнительные пространства имен System.Drawing.Drawing2D, System.Drawing.Imaging, System.Drawing.Printing, System.Drawing.Text, расширяющие функциональные возможности библиотеки System.Drawing.

Класс Graphics предоставляет методы рисования на устройстве отображения (другие термины — графический контекст, «холст»). Определимся сразу, на чем мы хотим рисовать. Далее в примерах он обозначается как объект g.

Способы задания «холста»

1. Графический объект — «холст» для рисования на форме Form1 (указатель this) можно задать, например, одним оператором:
Graphics g = this.CreateGraphics();
Примечание. Заметим, что стандартным образом
Graphics g = new Graphics();
создать объект-холст не удается.
На этом операторе генерируется ошибка:
Для типа «System.Drawing.Graphics» не определен конструктор.

2. Еще пример задания графического контекста на визуальном компоненте PictureBox (ящик для рисования) через растровый объект класса Bitmap. В классе Form1 зададим два объекта:
Graphics g; // графический объект — некий холст
Bitmap buf; // буфер для Bitmap-изображения
В конструктор Form1() добавим следующие операторы:
buf = new Bitmap(pictureBox1.Width, pictureBox1.Height); // с размерами
g = Graphics.FromImage(buf); // инициализация g

3. В принципе, иногда (если все графические операции выполняются внутри одной функции) эти четыре строки могут быть заменены одной строкой:
Graphics g = Graphics.FromImage(new Bitmap(pictureBox1.Width, pictureBox1.Height));
После этого можно задать фон холста белым:
g.Clear(Color.White);

4. Еще один пример задания «холста» на форме через дескриптор окна:
Graphics g = Graphics.FromHwnd(this.Handle);
Далее в примерах конкретизируются эти способы.

Объекты других классов из библиотеки System.Drawing

Такие классы, как Rectangle (прямоугольник) и Point (точка) инкапсулируют элементы GDI+. Отметим, что Point вообще то является структурой (struct) с полями x,y. Это уточнение несущественно, так как в C# структуры похожи на классы, a инициализация объекта-структуры point может выглядеть так же, как инициализация объекта-класса:
Point point= new Point();

Класс Pen (перо) используется для рисования линий и кривых, а классы, производные от класса Brush (кисть) используются для закраски замкнутых контуров (см. ниже).

Класс GraphicsPath позволяет задавать последовательность соединенных линий и кривых, класс Region описывает внутреннюю часть графической формы, состоящей из многоугольников и контуров.

Класс Image – абстрактный базовый класс предоставляет функциональные возможности для производных классов Bitmap и Metafile. Bitmap используется для работы с пиксельными изображениями (см. выше пример). Metafile определяет графический метафайл, содержащий записи, описывающие последовательность графических операций, которые могут быть записаны (созданы) и воспроизведены (отображается). Этот класс не наследуется.

Класс Graphics

Он инкапсулирует поверхность рисования GDI+. Этот класс не наследуется. Методов в этом классе огромное количество, поэтому сначала представим их в таблице, а затем рассмотрим некоторые из них с примерами и пояснениями.
В третьем столбце таблицы указывается число перегрузок метода, различающихся набором параметров (используйте интеллектуальную подсказку IntelliSense для выбора нужного Вам варианта метода).

Имя метода Описание Число перегрузок
Clear(Color) Очищает всю поверхность рисования и выполняет заливку поверхности указанным цветом фона. 1
CopyFromScreen(Point, Point, Size) Выполняет передачу данных о цвете, соответствующих прямоугольной области пикселей, блоками битов с экрана на поверхность рисования объекта Graphics. 4
Dispose() Освобождает все ресурсы, используемые данным объектом Graphics. 1
DrawArc(Pen, Rectangle, Single, Single) Рисует дугу, которая является частью эллипса, заданного структурой Rectangle. 4
DrawBezier(Pen, Point, Point, Point, Point) Рисует кривую Безье, определяемую четырьмя структурами Point. 3
DrawBeziers(Pen, Point[]) Рисует несколько (N) кривых Безье, определяемых массивом из (3N+1) структур Point. 2
DrawCloseCurve(Pen, Point[ ]) Рисует замкнутый фундаментальный сплайн 4
DrawEllipse(Pen, Rectangle) Рисует эллипс 4
DrawIcon(Icon, Rectangle) Рисует значок 2
DrawImage(Image image, int x, int y) Рисует заданное изображение image, используя его фактический размер в месте с координатами (x,y) 30
DrawLine(Pen, Point, Point) Проводит линию, соединяющую две структуры Point. 4
DrawLines(Pen, Point[ ]) Рисует набор сегментов линий, которые соединяют массив структур Point. 2
DrawPath(Pen, gp) Рисует пером Pen объект GraphicsPath gp. 1
DrawPie(Pen, Rectangle, Single, Single) Рисует сектор, который определяется эллипсом, заданным структурой Rectangle и двумя радиалtьными линиями. 4
DrawPolygon(Pen, Point[]) Рисует многоугольник, определяемый массивом структур Point. 2
DrawRectangle(Pen, Rectangle) Рисует прямоугольник, определяемый структурой Rectangle. 3
DrawRectangles(Pen, Rectangle[]) Рисует набор прямоугольников, определяемых структурами Rectangle. 2
DrawString(String, Font, Brush, PointF) Создает указываемую текстовую строку в заданном месте с помощью определяемых объектов Brush и Font. 6
Equals(Object) Определяет, равен ли заданный объект текущему объекту. (Унаследовано от Object.) 1
ExcludeClip(Rectangle) Обновляет вырезанную область данного объекта Graphics, чтобы исключить из нее часть, определяемую структурой Rectangle. 1
ExcludeClip(Region) Обновляет вырезанную область данного объекта Graphics, чтобы исключить из нее часть, определяемую структурой Region. 1
FillClosedCurve(Brush, Point[]) Заполняет внутреннюю часть замкнутой фундаментальной кривой, определяемой массивом структур Point. 6
FillEllipse(Brush, Rectangle) Заполняет внутреннюю часть эллипса, определяемого ограничивающим прямоугольником, который задан структурой Rectangle. 4
FillPath(Brush, GraphicsPath) Заполняет внутреннюю часть объекта GraphicsPath. 1
FillPie(Brush, Rectangle, Single, Single) Заполняет внутреннюю часть сектора, определяемого эллипсом, который задан структурой RectangleF, и двумя радиальными линиями. 3
FillPolygon(Brush, Point[]) Заполняет внутреннюю часть многоугольника, определяемого массивом точек, заданных структурами Point. 4
FillRectangle(Brush, Rectangle) Заполняет внутреннюю часть прямоугольника, определяемого структурой Rectangle. 4
FillRegion(Brush, Region) Заполняет внутреннюю часть объекта Region. 1
Flush() Вызывает принудительное выполнение всех отложенных графических операций и немедленно возвращается, не дожидаясь их окончания. 2
IntersectClip(Region) Обновляет вырезанную область данного объекта, включая в нее пересечение текущей вырезанной области и указанной структуры 3
ResetClip() Сбрасывает выделенную область g, делая ее бесконечной 1

Подробнее еще о двух классах.

Класс Pen

Класс Pen определяет объект, используемый для рисования прямых линий и кривых. Этот класс не наследуется. Конструкторы класса (тоже пример перегрузки методов):
1) Pen(Color) инициализирует новый экземпляр класса Pen с указанным цветом.
2) Pen(Color, Single) инициализирует новый экземпляр класса Pen с указанными свойствами Color и Width. (Width — устанавливает ширину пера Pen, в единицах объекта Graphics, используемого для рисования
Например:
Pen redPen = new Pen(Color.Red); // толщина пера по умолчанию 1 пиксель
или используя промежуточную переменную green
Color green = Color.Green;
Pen greenPen = new Pen(green, 4.5f);
Можно вводить новый объект без указания явного имени пера (пример создания динамического объекта — пера):
g.DrawRectangle(new Pen(Color.Red, 3), r);
например, для рисования прямоугольника r красным пером толщиной 3 пикселя, используя графический контекст («холст») g.

Класс Brush

Класс Brush определяет объекты, которые используются для заливки внутри графических фигур, таких как прямоугольники, эллипсы, круги, многоугольники и дорожки. Это абстрактный базовый класс, который не может быть реализован. Для создания объекта «кисть» используются классы, производные от Brush, такие как SolidBrush, TextureBrush и LinearGradientBrush, например:
SolidBrush br = new SolidBrush(Color.Aqua);
g.FillRectangle(br, r); // закраска прямоугольника r на «холсте» g
Или без явного объявления объекта «кисть» br:
g.FillRectangle(new SolidBrush(Color.Red), r);

Для первоначального привыкания к стилю ООП в графике рассмотрим первый пример рисования.

5.4 Визуализация графика функции. (Рисование графиков в C#, OpenGL).

Создание визуализации анимированного графика функции на С# и OpenGL

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

Это будет реализовано следующим образом: по графику двигается красная точка, принимающая значения y для заданного x в нашем графике (по всей видимой области). Помимо этого возле курсора будут визуализироваться его координаты (рис. 1).

Рисунок 1. Визуализация анимированного графика функции.
Создайте основу приложения так, как это было описано в главе 4.4. Только не добавляйте кнопки «Визуализировать» и «Закрыть», ограничьтесь элементом SimpleOpenGLControl.

Окно должно иметь форму, как показано на рисунке 1.

Добавьте в проект таймер, назовите его (параметр name в свойствах таймера) PointInGrap и установите в его свойствах интервал 30 миллисекунд. После этого щелкните по нему дважды, чтобы создалась функция PointInGrap_Tick, отвечающая за обработку события ontimer.

Теперь, когда основа приложения создана, мы перейдем к исходному коду. Он будет основан на 7 функциях, которые мы сейчас рассмотрим, но сначала перед кодом функции-конструктора класса добавьте инициализацию следующих переменных:

Перед каждой переменной закомментировано ее назначение, так что вопросов возникнуть не должно.
Теперь вернемся к нашим 7 функциям.

Первая функция – это обработчик события загрузки формы Form1_Load. Здесь при загрузке приложения будет произведена инициализация OpenGL для последующей визуализации.

Инициализацию OpenGL с двухмерной проекцией мы рассмотрели в предыдущей части главы, так что здесь все должно быть понятно. Единственным отличием является то, что код стал немного более подробным. Код этой функции:

Как видите, почти ничего не изменилось. Теперь обратимся к функции PointInGrap_Tick. Эта функция вызывается с задержкой в 30 миллисекунд.

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

Код этой функции:

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

Начтем с функции AnT_MouseMove. Эта функция добавляется созданием события MouseMove для элемента SimpleOpnGLControl (AnT). Событие создается аналогично тому, как мы его создавали в главе 2.2. Только в данном случае мы переходим к свойствам элемента AnT и уже в них переходим во вкладку Event и добавляем событие MouseMove.

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

Код этой функции выглядит следующим образом:

Теперь рассмотрим функцию, которая будет осуществлять визуализацию текстовых строк. Эта функция устанавливает координаты вывода растровых символов в соответствии с координатами, переданными в параметрах x и y, а затем в цикле перебирает все символы из указанной в параметре строки текста. Каждый из символов визуализируется с помощью функции. В этой функции указывается шрифт для вывода и переменная типа char для визуализации.

Код функции выглядит следующим образом:

Следующая функция, которой мы коснемся — это функция, вычисляющая координаты для построения графика. В ней инициализируется массив координат и производится вычисление всех координат графика в зависимости от указанного диапазона значений x и шага приращения этих значений.

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

Код этой функции с подробными комментариями:

Функция, выполняющая визуализацию графика

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

В этой функции сначала будет проверен флаг, сигнализирующий о том, что координаты графика вычислены и занесены в массив (переменная not_calculate). В том случае, если флаг указывает, что просчета значений еще не было, вызывается функция, которая посчитает значения координат точек графика и заполнит ими массив.

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

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

Исходный код данной функции:

И теперь нам осталось просмотреть последнюю функцию – функцию Draw.

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

Код этой функции выглядит следующим образом: