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

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

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

Обладнання: комп’ютери зі встановленими ОС та інтегрованим середовищем програмування Qt Creator.

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

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

Хід уроку

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

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

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

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

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

1. Ознайомитися:

   • теретично — з призначенням бібліотеки Qt;
   • практично — з інтерфейсом середовища програмування Qt Creator

   за наявним описом.

2. Завантажити і розпакувати архів бібліотеки QCustomPlot: на сторінці офіційного сайту перейти за посиланням Download (Завантаження) і вибрати архів (бажано останньої версії) всього пакунку, що містить коди, документацію і приклади — Full package contains source, documentation and examples.

3. Пересвідчитися наявності всіх складових бібліотеки: кодів qcustomplot.cpp і qcustomplot.h, документації англійською мовою у форматі html і теки з прикладами.

4. Проаналізувати частини кодів, необхідні для побудови графіка функції і кривої, заданої параметрично, на об'єкті widget з вивористанням бібліотеки QCustomPlot при стандартних налаштуваннях.

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

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

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

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

• або використати вказівку маню Файл / Зберегти усе;
• або натиснути клавіші Ctrl + Shift + S.

1. Створити програму Qt Widgets з назвою plots у середовищі Qt Creator.

2. Скопіювати у теку проекту файли qcustomplot.cpp і qcustomplot.h.

3. Додати до проекту файли бібліотеки QCustomPlot:

   • викликати контекстне меню проету:
     • виділити проект;
     • натиснути праву кнопку миші;
   • вибрати Додати існуючі файли;
   • вибрати файли qcustomplot.*;
   • натиснути кнопку Відкрити (при ОС Windows Вибрати.
   
   
   
   

4. Відкрити файл проекту plots.pro і дописати слово printsupport у рядок з кодом
   
   greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

   

5. Перейти на форму, клацнувши лівою кнопкою миші на назві файлу maimwindow.ui див. малюнок вище.

6. Розташувати на формі 5 об'єктів:

   • вгорі — Widget з вкладення Containers;
   • знизу — по горизонталі 4 кнопки Push Button з вкладення Buttons.



7. Змінити написи на кнопках на такі:

   • y = x/2 + 3/4;
   • y =x^2/4+x/3-1/4;
   • y = (x/8+1/16) / (2x-1);
   • Ліссажу,

   викликавши натисканням правої кнопки миші контексне меню виділеної кнопки й вибравши Змінити текст...,

   

   або двічі клацнувши на написі. Отримати такий вигляд форми.

   

8. Перетворити Widget на об'єкт, до якого можна застосувати бібліотеку QCustomPlot, діючи таким чином:

   • виділити Widget (див. малюнок вище);
   • викликати контекстне меню;
   • вибрати Перетворити на...;
   
   

   • у вікні діалогу Перетворені віджети вписати QCustomPlot у поле з підписом ліворуч: Ім'я пере­творе­ного класу

   

   і помітити, що одночасно буде заповнено поле з підписом: Файл заголовків назвою заголовного файлу бібліотеки QCustomPlot, приєднаного раніше до проекту;

   • у вікні діалогу Перетворені віджети натиснути кнопку Додати, а після отримання нового вигляду вікна натиснути кнопку Перетворити.

     

9. Створити подію on_pushButton_clicked — натискання першої зліва кнопки з напи­сом: y = x/2 + 3/4, діючи таким чином:

   • виділити кнопку;
   • викликати контекстне меню;
   • вибрати Перейти до слота...;
   

   • у вікні діалогу Перейти до слота при вибраному clicked() натиснути кнопку OK;

     

   • отримати такий вигляд вікна середовища програмування:

     

10. Cтворити код для побудови графіка лінійної функції y(x) = x/2 + 3/4 — обробника події on_pushButton_clicked

    void MainWindow::on_pushButton_clicked(){…}

    Трикрапку потрібно замінити на конкретні вказівки, які завершити вже розглянутою частиною коду. Порівняти з очікуваним. Вставити створений код у файл mainwindow.cpp.



11. Пересвідчитися у коректності роботи проекту щодо побудови графіка лінійної функції:

    • зберегти всі файли проекту:
      • або використати вказівку маню Файл / Зберегти усе;
      • або натиснути клавіші Ctrl + Shift + S;
    • запусти проект на виконання із зневадженням:
      • або натиснути кнопку Почати зневадження;
      • або натиснути клавішу F5;
    • отримати зображення полотна для відображення графіків як усталено;
      
      
    
    
    • при виконанні проекту натиснути кнопку з написом y = x/2 + 3/4;
    • отримати графік лінійної функції;
      
      
    
    
    • закрити вікно проекту натисканням кнопки × у верхньому лівому куті вікна.

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

    • on_pushButton_2_clicked — з написом y = x^2/4 + x/3 - 1/4;
    • on_pushButton_3_clicked — з написом y = (x/8+1/16) / (2x-1);
    • on_pushButton_4_clicked — з написом Ліссажу,

    діючи так само, як при виконанні пункту 9.

13. Створити коди для побудови графіків квадратичної і раціональної функцій, фігури Ліссажу, діючи так само, як при виконанні пункту 10:

    • для квадратичної функції — змінивши у вже створеному коді формули для обчислення координат;

    • для раціональної функції — запровадивши 2 графіки для 2 гілок гіперболи, щоб уникнути ділення на нуль або проведення майже вертикальної лінії, і змінюючи в уже створеному коді формули для обчислення координат;

    • для фігур Ліссажу — змінюючи вже розглянутий код.

    Перед внесенням коду у файл mainwindow.cpp порівняти з очікуваним: 2, 3, 4.

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

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

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

7. Домашнє завдання

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

2. Переробити отримати зображення кривих у файлах формату 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 наявної розробки уроку.

Текст упорядкувала Новіцька Любов Вікторівна, вчитель інформатики НВК "Гуманітарна гімназія "Гармонія" Дніпровського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 30.10.2017 по 03.11.2017.