Тема: створення програмного проекту побудови графіку функції (лінійної, квадратичної, раціональної) мовою С++.

Мета уроку: після виконання роботи учень повинен:

• пояснювати:
  • призначення й можливості бібліотеки wxWidgets;
  • призначення панелей інструментів середовища CodeBlocks з встановленою бібліотекою wxWidgets;
• уміти:
  • зображувати точки й відрізки на координатній площині;
  • описувати додані розробником події та опрацювання їх;
  • додавати можливості змінювати параметри і масштабувати графік.

Обладнання: комп'ютери зі встановленими ОС, браузером, середовищем CodeBlocks для програмування мовою С++ з використанням бібліотеки wxWidgets, (дана) інструкція.

Структура уроку

1. Організаційний момент.
2. Актуалізація опорних знань.
3. Інструктаж з ТБ.
4. Вивчення нового матеріалу.
5. Вироблення практичних навичок.
6. Підбиття підсумків уроку.
7. Домашнє завдання.

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

2. Актуалізація опорних знань

Дати відповіді на питання.

1. Що таке лінійна функція?
2. Що таке квадратична функція?
3. Що таке раціональна функція?
4. Що таке графік функції?

3. Інструктаж з ТБ
4. Вивчення нового матеріалу

Опис роботи з растровою графікою подано в описі. При розгляді кодів звернути увагу лише на останню (в кожному коді) функцію, де власне й подано вказівки опрацювання й виведення графіки. Ці коди передбачають компіляцію таким самим чином, що й демонстраційні приклади (samples) бібліотеки wxWidgets (без середовища CodeBlocks). У розв'язанні завдання потрібно буде створити об'єкт wxPaintDC — нащадок wxPanel.

5. Вироблення практичних навичок

Завдання. Створити програму для побудови графіків:

1. y(x) = x/2 + 3/4 — лінійної функції;
2. y(x) = x²/4 + x/3 − 1/4 — квадратичної функції;
3. y(x) = (x/8 + 1/16) / (2x − 1) — раціональної функції;
4. x(t) = cos(5t), y(t) = sin(7t) — фігури Ліссажу, координати точок якої задано
   як значення тригонометричні функції деякого параметра t ∈ [−10, 10].

Криві наближати ламаними з вершинами на графіках, які виводити при таких обмеженнях на координати: −1 ≤ x ≤ 1, −1 ≤ y ≤ 1.

1. Cтворити проєкт graphic у вказаній учителем теці у середовищі CodeBlocks з використанням бібліотеки wxWidgets з такими параметрами:

   • Prefered GUI Builders — wxSmith;
   • Application Type — Frame Based.

2. Видалити об'єкти: MenuBar1 і StatusBar1, виділивши їхні зображення (клацнувши на них лівою кнопкою миші) над зображенням форми і натиснувши клавішу Delete. Тут і далі після виконання кожного пункту вказівок зберігати всі файли проєкту. Для цього на панелі інструментів середовища CodeBlocks натиснути кнопку Save all files (Зберегти всі файли).

3. Надати властивостям форми значення (тут і нижче у тексті вказано лише ті властивості, значення яких потрібно змінити):

   • Title — graphics;
   • Width — 400;
   • Height — 430;
   • Background — (255,255,255).

   Щоб змінити значення Вackground (кольору тла), потрібно клацнути лівою кнопкою миші праворуч від початкового значення, з випадного списку вибрати Custom

   

   у вікні діалогу Choose color задати координати кольору схеми RGB і на натиснути кнопку Select.

   

4. Отримати форму такого вигляду,

   

   розташувавши на формі з вкладення Standard (Стандартне):

   • 4 об'єкти wxButton — кнопки з такими значеннями властивостей:

     Label	y = x/2 + 3/4	x^2/4+x/3-1/4	(x/8+1/16) / (2x-1)	Ліссажу
     X	1	91	201	331
     Y	401	401	401	401
     Width	89	109	129	69
     Height	29	29	29	29

   
   
   • wxPanel — панель з такими значеннями властивостей:

     X	0
     Y	0
     Width	400
     Height	400
     Background	(255,255,255)



5. Створити подію натискання кнопки з написом y = x/2 + 3/4 :
   • виділити кнопку з написом y = x/2 + 3/4, клацнувши на ній лівою кнопкою миші;
   • перейти до розгляду подій, натиснувши кнопку із зображенням фігурних дужок {};
     

   • навести вказівник миші на рядок з написом None (Жодного) праворуч від напису EVT_BUTTON, клацнути лівою кнопкою миші і з випадного меню вибрати Add new handler (Додати новий обробник);

     

   • у вікні діалогу New handler (Новий обробник) підтвердити створення обробника OnButton1Click події натискання кнопки Button1, натис­нувши кнопку OK.

     

6. Вписати вказівки обробника події OnButton1Click у файлі graphicsMain.cpp,

   void graphicsFrame::OnButton1Click(wxCommandEvent& event)
   { itask = 1;
     SendEvent(); // виклик події, створеної розробником
   }

7. Вставити опис з наданням початкового значення глобальній змінній
   
   int itask = 0;
   
   перед кодом OnButton1Click у файлі graphicsMain.cpp.

8. Створити події натискання кнопок з написами:

   • x^2/4+x/3-1/4;
   • (x/8+1/16) / (2x-1);
   • Lissajous

   і вписати вказівки обробників цих подій — такі самі, як для OnButton1Click, але з наданням значення змінній itask відповідно 2, 3, 4.

9. Оголосити про використання:
   • обробника події визначення виду графіка;
   • функції розсилання повідомлення про цю подію
   в розділі private класу graphicsFrame (файл graphicsMain.h) — дописати такі 2 рядки.

   void OnMyEvent(wxCommandEvent& event);// обробник події, створеної розробником
   void SendEvent();                     // розсилання повідомлення про цю подію
   

10. Створити коди:
    • обробника події визначення виду графіка;
    • функції розсилання повідомлення про цю подію,
    доповнивши файл graphicsMain.cpp такими рядками.

    void graphicsFrame::SendEvent()
    {   wxCommandEvent event(MY_EVENT, GetId());     // породження події без спеціального класу
        event.SetEventObject(this);                  // встановлення адресати - даного об'єкта
        event.SetString(_T("№" + to_string(itask))); // передавання даних - при потребі
        ProcessWindowEvent(event);                   // надсилання повідомлення
    }
    
    void graphicsFrame::OnMyEvent(wxCommandEvent& event)
    {int nx=400, // розмір зображення по горизонталі
         ny=400, // розмір зображення по вертикалі
         nj=2000,// кількість ланок ламаної - наближення графіка
         txx=15, // зсув підпису x по горизонталі від краю рисунка
         txy=5, // зсув підпису x по вертикалі від осі абсцис
         tyx=15, // зсув підпису y по горизонталі від осі ординат
         tyy=5, // зсув підпису y по вертикалі від краю рисунка
         ax=3,   // половина розміру по горизонталі стрілки на осі ординат
         ay=8,   // половина розміру по вертикалі   стрілки на осі абсцис
         ix=0,   // екранна координата по горизонталі  поточної   точки
         iy=0,   // екранна координата по  вертикалі   поточної   точки
         ixp=0,  // екранна координата по горизонталі попередньої точки
         iyp=0;  // екранна координата по  вертикалі  попередньої точки
     double
         t0=-10,    // найменше  значення аргумента
         t1=10,     // найбільше значення аргумента
         x0=-1.1,   // найменше  значення абсциси  на рисунку
         x1= 1.1,   // найбільше значення абсциси  на рисунку
         y0=-1.1,   // найменше  значення ординати на рисунку
         y1= 1.1,   // найбільше значення ординати на рисунку
         dx=x1-x0,  // приріст абсциси  на рисунку
         dy=y1-y0,  // прирiст ординати на рисунку
         dt=(t1-t0)/nj,// прирiст аргумента між вершинами ламаної
         t,         //   поточне значення параметра t
         tp;        // попереднє значення параметра t
         wxPaintDC z(Panel1); // об'єкт для малювання
         wxFont font (14,wxFONTFAMILY_DEFAULT,wxFONTSTYLE_ITALIC,wxFONTWEIGHT_NORMAL,false,"Times");
         z.SetFont(font);                         // встановлення властивостей шрифту
         z.SetTextForeground(*wxBLACK);           // чорний колір тексту
         z.SetPen(wxPen(wxColor(255,255,255),2)); // білий колір пензля ширини 2
         z.DrawRectangle(0,0,nx,ny);              // замальовування білим області виведення
         z.SetPen(wxPen(wxColor(0,0,0),2));       // чорний колір пензля ширини 2
         z.DrawText(event.GetString(),5,5);       // виведення переданого рядка
         Panel1 -> Update();                      // виведення на екран
    }

    Тут опис змінних функції OnMyEvent з коментарями не є обов'язковим. Він слугує підказкою для того, як виконати завдання і полегшує порівняння з демонстраційним розв'язанням у разі наявності помилки у створюваному проєкті.

11. Пересвідчитися у коректності роботи проєкту щодо події, описаної розробником. Для цього на панелі інструментів середовища CodeBlocks натиснути кнопки:
    Build (Побудувати);
    Run (Запустити).
    
    Замість натискання двох останніх кнопок можна натиснути одну:
    Build and run (Побудувати і запустити).
    
    Натискаючи кнопки на формі, отримати виведення у лівому верхньому куті панелі запису курсивом вигляду №*, де замість * буде цифра 1, 2, 3, 4 залежно від того, яку кнопку натиснуто.

    

12. Доповнити вказівками креслення графіку, осей координат і виведення підписів осей код функції OnMyEvent у файлі graphicsMain.cpp безпосередньо перед останньою вказівкою
    
    Panel1 -> Update();

13. Пересвідчитися у коректності роботи проекту щодо побудови графіків усіх 4 функцій, діючи так само, як при виконанні пункту 11.

14. Зберегти проект у вказану вчителем теку.
15. Повідомити учителя про завершення роботи над проектом.

6. Підбиття підсумків уроку
Виставлення оцінок.

7. Домашнє завдання
Подати отримані зображення кривих у файлах формату svg.

SVG — Scalable Vector Graphics (англійською: масштабована векторна графіка) — специфікація мови розмітки на основі XML або формат файлу двовимірної векторної графіки (статичної, анімованої, інтерактивної).

Ця специфікація є відкритим стандартом, розробленим робочою групою SVG Working Group організації World Wide Web Consortium.

Файл svg можна створити і редагувати:

• у середовищі редактора векторної графіки, наприклад, Inkscape;
• у середовищі текстового редактора;
• за допомогою програми, написаної довільною мовою програмування.

Потрібно використати останній варіант. Інакше кажучи, створити програму (мовою Python), яка створить іншу програму (мовою розмітки) для зображення кривої, у тому числі графіка функції: лінійної, квадратичної, раціональної. Для цього немає необхідності вивчати детальний опис (англійською) з прикладами. Достатньо використати лише такі відомості.

<svg>…</svg> — контейнер, всередині якого (замість трьох крапок) записують всі інші вказівки svg (при створення статичного малюнку у файлі формату svg). Наприклад, контейнер:

<svg width="600" height="400" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg">
</svg>

передбачає створення малюнку розміру 600×400 пікселів.

<line /> — вказівка для побудови зображення відрізка прямої.

Наприклад, вказівка:

<line x1="12" y1="34" x2="56" y2="78" style="stroke:rgb(0,0,0);stroke-width:2" />

передбачає створення зображення відрізка прямої:

• суцільна лінія чорного кольору — див. style="stroke:rgb(0,0,0);
• товщини 2 — див. stroke-width:2;
• сполучено точки з екранними координатами (12; 34) і (56, 78).

<text>…</text> — контейнер, що описує форматування символів тексту і всередині якого записуєть контейнери для виведення послідовностей символів.

<tspan>…</tspan> — контейнер, що вказує яку послідовність символів і у якому місці потрібно розташувати.

Наприклад, вказівка:

<text style="font-size:12px;font-style:italic;font-weight:normal;font-family:Ubuntu,Calibri"><tspan x="12" y="34">текст для виведення</tspan></text>

передбачає таке виведення тексту:

• гарнітура — Ubuntu або Calibri, якщо Ubuntu немає;
• розмір — 12рх;
• накреслення — курсив (italic) звичайний (normal);
• відносні екранні координати верхнього лівого кута тексту — (12; 34).

Примітка. У разі потреби можна використати демонстраційне розв'язання мовою Ruby наявної розробки уроку.

Текст упорядкував Олександр Рудик.