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

Лекция 11. Использование графических инструментов и функций в задачах различного содержания Современные программные средства могут обрабатывать данные совершенно разных структур и типов: вещественные, целочисленные, символьные, данные, представляющие дату и время, файловые переменные, указатели на различные объекты (переменные, массивы, функции, окна, графические инструменты и т.д.) Для того, чтобы анализировать ту или иную информацию, иногда надо найти подходящую форму представления этой информации, в этом случае человеку легче осмыслить и усвоить различные сведения. С помощью графических инструментов современной компьютерной техники можно практически любые данные представить в наиболее наглядной или привычной человеку форме. Пример 1. Современный человек для организации своей жизни по нескольку раз в день узнает время. Это можно сделать по-разному. Можно спросить у кого-то и получить словесный ответ, например: «сейчас два часа дня и 35 минут», «сейчас полшестого», «без пяти минут десять» и т.д. Формулировки могут быть разные, но все это символьная информация и для ее правильного понимания требуется еще и наша интерпретация. Если требуется обработка таких данных в компьютере, их надо будет перевести в некий универсальный формат. Например, можно создать структуру (struct) данных c тремя целочисленными полями: часы, минуты и секунды. Привычно для нас видеть время на часах, в виде более удобном, чем символьное представление. Чаще всего – это прибор со стрелками или может быть его электронная версия (таким образом, у нас есть выбор предпочтительного представления информации). Для того, чтобы демонстрировать время на экране компьютера (это могут быть часы, будильник или секундомер), необходимо уметь запросить у операционной системы время и, воспользовавшись графическими инструменты, вывести результат на экран в выбранном формате. Задача. Для правильной организации своего дня необходимо отслеживать, сколько времени потрачено на ту или иную деятельность. Например, создадим программу, которая поможет узнать, сколько времени человек провел за компьютером. Для этого программа должна показывать время от момента ее запуска, например, в электронном виде. На рисунке 1 видно, каким образом могут выглядеть подобные часы (вернее секундомер). Поскольку на рисунке представлены три копии одного окна, видно, что время в окне программы меняется, то есть его обновление происходит каждую секунду – часы идут. Рисунок 1. Время работы программы Рассмотрим программный код, который выводит на экран картинку и «заставляет» наш секундомер работать. Этап 1. В глобальных переменных главного модуля программы необходимо определить переменную, которая запомнит момент старта нашей программы. Это необходимо, поскольку наши часы будут показывать время работы программы, то есть разницу текущего момента и момента запуска программы. Итак, в модуле Unit1: extern long t=0; Переменную t удобно объявить, как внешнюю (extern), так как часы можно расположить в любой форме нашей программы. Начальное значение эта переменная должна получить именно в главном модуле (так как момент создания главного окна совпадает с моментом начала работы программы, а остальные формы-окна могут начать свою работу по мере необходимости). В других модулях можно работать с этой же переменной, если там объявить эту глобальную переменную: extern long t; В модуле Unit1 необходимо создать обработчик события OnCreate (это событие означает, что Windows создал окно, и оно может приступить к работе, в том числе настроить какие-то свои параметры): void __fastcall TForm1::FormCreate(TObject *Sender) { t=GetTickCount(); // При вызове этой функции система возвращает число //миллисекунд, прошедших с момента старта системы. } Создать обработчик FormCreate можно просто двойным щелчком на форме (в данном примере на Form1), так как это событие считается главным для формы. Этап 2. Чтобы часы не исчезали при работе пользователя с окном (сворачивание окна, изменение его размеров), необходимо «рисовать» часы по указанию системы Windows (то есть когда область окна должна быть восстановлена). В этом случае система пришлет программе сообщение OnPaint. В приведенном коде часы работают в форме номер 2 (Form2). Для Form2 надо создать обработчик события FormPaint (список событий находится на вкладке Event в инспекторе объектов). Разместим в этом обработчике код оформления часов (предварительно на Form2 вставили компонент PaintBox1 и для удобства переименовали его Name=PB1): void __fastcall TForm2::FormPaint(TObject *Sender) { PB1->Canvas->Pen->Color=clBlack; // Черный карандаш PB1->Canvas->Brush->Color=clBlack; // Черная кисть // Закрашиваем область часов, то есть всю область PaintBox PB1->Canvas->Rectangle(0,0,PB1->Width,PB1->Height); PB1->Canvas->Pen->Color=clBlue; // Синий карандаш PB1->Canvas->Brush->Color=clBlue; // Синяя кисть PB1->Canvas->Rectangle(0,0,PB1->Width-6,PB1->Height-6); // Оформляем внутреннюю часть часов - табло PB1->Canvas->Pen->Color=RGB(200,200,200); PB1->Canvas->Brush->Color=clGray; PB1->Canvas->Rectangle(4,4,PB1->Width-10,PB1->Height-10); } Конечно, этот код можно изменить и «оформить часы» по своему усмотрению. Этап 3. Теперь надо «заставить» часы «идти». Для этого на Form2 надо добавить компонент Timer1. Именно он будет присылать программе сообщение OnTimer, которое можно рассматривать, как требование изменение времени на нашем «устройстве». Надо создать обработчик этого события разместить в нем код: void __fastcall TForm2::Timer1Timer(TObject *Sender) { long mc; // mc – число секунд с момента старта программы mc=(GetTickCount()-t)/1000; // далее преобразуем полученный интервал в формат часы-минуты-секунды long c = mc % 60; // c - секунды long tm = (mc-c) / 60; long m = tm % 60; // m - минуты long h=(tm-m)/60; // h - часы PB1->Canvas->Brush->Color=clGray; // Серый фон PB1->Canvas->Font->Name="Times New Roman"; // Название шрифта PB1->Canvas->Font->Color=RGB(20,20,255); // Цвет символов PB1->Canvas->Font->Size=18; // Размер символов PB1->Canvas->Font->Style=TFontStyles()<Canvas->TextOut(20,10,str); // Выводим строку на экран } Этап 4. Так как часы расположены на Form2, чтобы посмотреть на них, надо в коде главного модуля Unit1 добавить оператор: Form2->Show(); Это можно сделать при нажатии на кнопке или выборе пункта меню пользователем. В любом случае часы покажут «правильное время» независимо от того были ли они видны пользователю до этого или нет. Пример 2. Построение гистограммы. Гистограмма - это один из способов представления данных в графическом виде, а конкретно в виде столбчатой диаграммы. Высота каждого столбца указывает на частоту появления значений параметров в выбранном диапазоне, а количество столбцов - число выбранных диапазонов. Гистограммы используются часто (их можно увидеть и в документах, и в презентациях, на сайтах и на экранах телевизоров), они очень удобны для восприятия информации человеком, так как позволяют наглядно представить измеряемые параметры, зрительно оценить их и сравнить друг с другом. Задача. Построить гистограмму для оценки результатов сдачи студентами экзаменов по разным дисциплинам в период сессии. Исходные данные: известно количество различных оценок по каждой из дисциплин. Эти данные можно представить в табличном виде (Таблица 1). В сессию студенты сдали четыре экзамена, на всех экзаменах присутствовали 32 человека (студенты одной группы). На диаграмме столбики должны быть сгруппированы по дисциплинам (чтобы сравнить результаты по разным предметам), столбики, соответствующие разным оценкам должны отличаться цветом, чтобы можно было наглядно увидеть и сравнить «сложность» сдачи различных экзаменов. Таблица 1.Итоги сессии Для отображения данных в виде таблицы на форму вставим компонент StringGrid1 (Name=SG1), а для отображения диаграммы поместим на форму компонент PaintBox1 (также изменим его имя Name=PB1 для удобства работы с текстом программы). Затем необходимо продумать, в какой момент времени гистограмма должна появляться на экране и создать соответствующий обработчик события. В простейшем варианте это может быть щелчок на кнопке, которую пользователь будет нажимать после ввода данных в таблицу. Рассмотрим код, который позволит «рисовать» диаграмму. Заметьте, что код составлен таким образом, что внешний вид диаграммы будет изменяться в зависимости от размеров PaintBox1, то есть изображение будет подстраиваться под его размеры – масштабироваться. Результат работы программы представлен на рисунке 2. void __fastcall TForm1::Button1Click(TObject *Sender) { // Для начала определим опорную точку для построения диаграммы // для графика это было бы начало координат int xc=50; int yc=PB1->Height-50; // (xc,yc) – левый нижний угол с отступом от края int n=SG1->ColCount-1; // n - количество экзаменов int dx_zona=(PB1->Width-100)/ n; // Размер зоны по оси Х каждого экзамена int dx=dx_zona/4-6; // Размер одного столбика диаграммы по оси Х // Найдем наибольшее значение среди данных в таблице, результат: max int max=StrToInt(SG1->Cells[1][1]); for (int i=1;i<=n; i++) for (int j=1; j<=4; j++) if (StrToInt(SG1->Cells[i][j])>max) max= StrToInt(SG1->Cells[i][j]); // Находим dy – цена одного деления по оси Y int dy = (PB1->Height-100) / max; // Закрашиваем прямоугольник компонента PaintBox PB1->Canvas->Brush->Color=clWhite; PB1->Canvas->Rectangle(0,0,PB1->Width,PB1->Height); // Проводим линию под гистограммой PB1->Canvas->Pen->Color=clBlack; PB1->Canvas->MoveTo(xc-30,yc); PB1->Canvas->LineTo(PB1->Width-20,yc); int x,y; TColor color; // Вспомогательные переменные: координаты и цвет for (int i=1; i<=4; i++) // Цикл по видам оценок { switch (i) { case 1: color=clRed; break; // Пятерки - красный case 2: color=clYellow; break; case 3: color=clGreen; break; case 4: color=clBlack; break; // Двойки - черный } PB1->Canvas->Brush->Color=color; // Рисуем квадратики для пояснения диаграммы (вверху) x=xc+dx_zona*(i-1); y=16; PB1->Canvas->Rectangle(x,y,x+16,y+16); for (int j=1; j<=n; j++) // Цикл по предметам { // Рисуем столбики гистограммы x=xc+dx_zona*(j-1)+dx*(i-1); y=yc-dy*StrToInt(SG1->Cells[j][i]); if (y==yc) y=yc-2; // Если значение в таблице 0 – низкий прямоугольник PB1->Canvas->Rectangle(x,y,x+dx-2,yc); } } // Параметры шрифта PB1->Canvas->Brush->Color=clWhite; PB1->Canvas->Font->Name="Times New Roman"; PB1->Canvas->Font->Color=clBlue; PB1->Canvas->Font->Size=12; PB1->Canvas->Font->Style=TFontStyles()<Canvas->TextOut(x,y,SG1->Cells[i][0]); .// Дисциплины x=xc+dx_zona*(i-1)+20; y=16; PB1->Canvas->TextOut(x,y,SG1->Cells[0][i]); // Виды оценок } } Кроме гистограмм часто используется другой вид представления информации в графическом виде. Например, для задачи анализа результатов сессии обычно используется характеристика – средний балл. Чтобы сравнить средние баллы, полученных по различным дисциплинам оценкам, хорошо было бы построить график результатов. В окне на рисунке 2 запланирована такая функциональность (кнопка «График»). И наша следующая лабораторная работа подразумевает вывод информации в таком графическом представлении. Рисунок 2. Окно с данными в виде таблицы и в виде гистограммы