3.1 MiB
«Санкт-Петербургский государственный электротехнический университет
«ЛЭТИ» им. В.И.Ульянова (Ленина)»
(СПбГЭТУ «ЛЭТИ»)
| Направление | 11.03.02 – «Инфокоммуникационные технологии и системы связи» | |
|---|---|---|
| Профиль | «Системы радиосвязи и радиодоступа» | |
| Факультет | РТ | |
| Кафедра | РЭС | |
| К защите допустить | ||
| Зав. кафедрой | Малышев В.Н. | |
ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА
БАКАЛАВРА
Тема: Пользовательский интерфейс отображения данных сетевого лабораторного стенда
| Студентка | Никонова А.В. | |||
|---|---|---|---|---|
| подпись | ||||
| Руководитель | доцент каф. РЭС | Воронов А.В. | ||
| (Уч. степень, уч. звание) | подпись | |||
| Консультант | ассистент каф. РЭС | Проценко И.М. | ||
| (Уч. степень, уч. звание) | подпись |
Санкт-Петербург
2023
ЗАДАНИЕ
на выпускную квалификационную работу
| Утверждаю | |
|---|---|
| Зав. кафедрой РЭС | |
| ____________ Малышев В.Н. | |
| «___»______________20___ г. |
| Студентка | Никонова А.В. | Группа | 9181 | |||||
|---|---|---|---|---|---|---|---|---|
| Тема работы: Пользовательский интерфейс отображения данных сетевого лабораторного стенда | ||||||||
| Место выполнения ВКР: кафедра РЭС | ||||||||
| Исходные данные (технические требования): разработка прикладной программы для персонального компьютера с GUI на языке программирования Python. Среда разработки программы: Qt Designer. | ||||||||
| Содержание ВКР: описание лабораторного стенда, пользовательские интерфейсы, язык программирования Python, подготовка к разработке интерфейса, разработка интерфейса | ||||||||
| Перечень отчетных материалов: пояснительная записка, иллюстративный материал, код программы | ||||||||
| Дополнительные разделы: Безопасность жизнедеятельности | ||||||||
| Дата выдачи задания | Дата представления ВКР к защите | |||||||
| «___»______________20___ г. | «___»______________20___ г. | |||||||
| Студентка | Никонова А.В. | |||||||
| Руководитель доцент каф. РЭС | Воронов А.В. | |||||||
| (Уч. степень, уч. звание) | ||||||||
| Консультант ассистент каф. РЭС | Проценко И.М. | |||||||
| (Уч. степень, уч. звание) | ||||||||
календарный план выполнения
выпускной квалификационной работы
| Утверждаю | |
|---|---|
| Зав. кафедрой РЭС | |
| ____________ Малышев В.Н. | |
| «___»______________20___ г. |
| Студентка | Никонова А.В. | Группа | 9181 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Тема работы: Пользовательский интерфейс отображения данных сетевого лабораторного стенда | ||||||||||
| № п/п | Наименование работ | Срок выполнения | ||||||||
| 1 | Описание лабораторного стенда | 13.04 – 17.04 | ||||||||
| 2 | Пользовательские интерфейсы | 18.04 – 23.04 | ||||||||
| 3 | Язык программирования Python | 24.04 – 30.04 | ||||||||
| 4 | Подготовка к разработке интерфейса | 02.05 – 10.05 | ||||||||
| 5 | Разработка интерфейса | 10.05 – 25.05 | ||||||||
| 6 | Оформление пояснительной записки | 24.05 – 27.05 | ||||||||
| 7 | Оформление иллюстративного материала | 27.05 | ||||||||
| Студентка | Никонова А.В. | |||||||||
| Руководитель доцент каф. РЭС | Воронов А.В. | |||||||||
| (Уч. степень, уч. звание) | ||||||||||
| Консультант ассистент каф. РЭС | Проценко И.М. | |||||||||
| (Уч. степень, уч. звание) | ||||||||||
РЕФЕРАТ
QT DESIGNER, ЯЗЫК ПРОГРАММИРОВАНИЯ PYTHON, ГРАФИЧЕСКИЙ ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС
Целью данной дипломной работы является разработка в среде Qt Designer пользовательского интерфейса для работы с учебным макетом в рамках лабораторных работ по дисциплине «Проектирование встроенных приложений».
В ходе выполнения работы был сделан выбор среды программирования, проведен анализ работы лабораторного стенда, были разработаны различные варианты пользовательского интерфейса.
Разработанное в ходе дипломной работы приложение при использовании сетевого взаимодействия позволяет получать и отображать различные данные с учебного макета. Также реализована возможность графического представления показаний датчиков, входящий в структуру лабораторного стенда.
ABSTRACT
The purpose of this final qualifying work is to develop the graphic user interface in the environment Qt Designer for working with a laboratory stand.
While this work was in progress, a choice of programming environment was made, an analysis of the laboratory stand was carried out, and various user interface options were developed.
Developed application allows user to receive and display data from laboratory stand.
СОДЕРЖАНИЕ
| Введение | ||
|---|---|---|
| 1. | Описание лабораторного стенда | |
| 1.1. | Структура лабораторного стенда | |
| 1.2. | Сетевое взаимодействие с макетом | |
| 2. | Пользовательские интерфейсы | |
| 2.1. | Понятие пользовательских интерфейсов | |
| 2.2. | Среда разработки Qt Designer | |
| 3. | Язык программирования Python | |
| 3.1. | Обзор языка программирования Python | |
| 3.2. | Наследование в PyQt | |
| 3.3. | Редактор кода PyCharm | |
| 4. | Подготовка к разработке интерфейса | |
| 4.1. | Функциональные требования к интерфейсу | |
| 4.2. | Сценарий использования | |
| 4.3. | Анализ первоначального варианта интерфейса | |
| 5. | Создание интерфейса | |
| 5.1. | Блок отображения значений | |
| 5.2. | Блок формирования и обработки запросов | |
| 5.3. | Блок работы с графиками | |
| 5.4. | Компоновка блоков | |
| 6. | Безопасность жизнедеятельности | |
| 6.1. | Аспект эргономики программного обеспечения | |
| 6.2. | Соответствие интерфейса разработанного ПО требованиям ГОСТ Р ИСО 9241 | |
| 6.3. | Пригодность использования Qt Designer | |
| Заключение | ||
Список использованных источников Приложение А |
ВВЕДЕНИЕ
Современному человеку при решении множества задач приходится использовать аппаратные и программные средства. Пользовательские интерфейсы позволяют обеспечить обмен данными между человеком и названными средствами, именно поэтому пользовательские интерфейсы очень широко распространены на сегодняшний день. Регулирование масштаба изображения на экране осциллографа, ввод запроса в поисковую строку браузера, выбор времени разогрева пищи в микроволновой печи, установка времени срабатывания будильника – это лишь несколько примеров ситуаций, в которых человек взаимодействует с пользовательским интерфейсом.
Целью данной дипломной работы является разработка пользовательского интерфейса для взаимодействия с лабораторным стендом.
Для достижения поставленной цели необходимо выполнить несколько задач:
проанализировать устройство лабораторного макета и определить функционал приложения, а также данные, которыми необходимо обмениваться с учебными стендом;
продумать модель потенциального пользователя приложения, на основе её рассмотрения выдвинуть требования к интерфейсу;
разработать в программном обеспечении Qt Designer интерфейс, реализующий необходимый функционал.
1. ОПИСАНИЕ ЛАБОРАТОРНОГО СТЕНДА
1.1. Структура лабораторного макета
На рисунке 1 показан внешний вид лабораторного макета.
Рисунок 1 – Внешний вид лабораторного стенда
Управляющую функцию в макете выполняет плата NodeMCU на базе микроконтроллера ESP8266. По сравнению с другими моделями микроконтроллеров данное устройство обладает преимуществами, среди которых можно привести следующие:
наличие встроенного Wi-Fi модуля с поддержкой двух режимов – точки доступа и клиента;
наличие интерфейса UART-USB, что обеспечивает удобство подключения платы к компьютеру.
Среда программирования Arduino позволяет применять языка программирования высокого уровня C++ для задания логики работы платы NodeMCU.
Лабораторный макет позволяет производить измерения различных параметров с помощью датчиков. Датчик – это устройство, которое преобразует измеряемую физическую величину в сигнал, удобный для регистрации и передачи.
В лабораторном макете установлены следующие датчики физических величин:
Модуль измерения освещенности;
Модуль измерения давления и температуры BMP-180;
Акселерометр GY-291 на основе система измерения ускорения ADLX345;
Цифровой датчик освещенности и цвета APDS-9960.
Аналоговый модуль измерения освещенности построен на основе резистивного сенсора.
Модуль измерения давления и температуры включает миниатюрный датчик BMP-180. Данное устройство производит измерения давления в гектопаскалях (гПа). Диапазон измеряемых значений давления: от 300 до 1100 гПа. Измерение температуры возможно в пределах от -40°C до 85°C. Между давлением и температурой существует связь, значение температуры учитывается при расчете окончательного значения давления. Именно по этой причине эти две физические величины измеряются одним устройством.
ADXL345 – это комплексная 3-осевая система измерения ускорения. Данная система измеряет динамическое ускорение, вызванное движением, а также статическое ускорение, возникающее в результате действия гравитации. У данного датчика присутствует возможность выбора диапазона измерения, минимальный диапазон составляет ±2 g, максимальный достигает ±16 g, где g – ускорение свободного падения.
Цифровой датчик освещенности и цвета APDS-9960 определяет уровень освещенности и цвет с помощью соответствующих фотодиодов. Также в схему данного устройства входит светодиод, излучающий в инфракрасном диапазоне. Прием фотодиодами отраженного от объекта, например, руки, инфракрасного излучения позволяет определять приближение объекта и жесты.
На рисунке 2 показана схема, поясняющая соединения различных компонентов лабораторного макета.
Рисунок 2 – Схема соединений модулей стенда
Помимо датчиков в макете также установлены:
светодиодная линейка;
тумблеры;
светодиоды индикаторные («лампочки»).
Светодиодная линейка состоит из восьми светодиодов. У каждого из них имеется индивидуальный микроконтроллер (МК). Данные о цвете от управляющего МК поступают на МК первого светодиода, при передаче последующей порции данных первая порция вытесняется ко второму светодиоду. Так происходит, пока на микроконтроллеры всех светодиодов не поступят данные для отображения цвета, после чего управляющий МК дает сигнал к отображению данных.
1.2. Сетевое взаимодействие с макетом
Лабораторный макет поддерживает клиент-серверную сетевую архитектуру. Клиент – это система, отправляющая запросы на получение пакетов данных. Сервером называют систему, которая занимается обработкой запросов клиента. Таким образом, в рассматриваемой сетевой архитектуре предусмотрено четкое разделение на подсистемы, ставящие задачи и выполняющие их. В этом основное отличие клиент-серверной модели от децентрализованных сетей, все участники которых обладают равными правами, то есть могут выполнять функции как клиента, так и сервера.
Сервер поддерживает режим работы с несколькими клиентами. При этом у сервера предусматривается система приоритетов для определения очередности выполнения запросов клиентов.
В лабораторных работах предполагается использование лабораторного стенда в качестве сервера, персональный компьютер выступает в роли клиента.
Клиент и серверы взаимодействуют посредством обмена сообщениями определенной формы (клиент отправляет запросы, сервер – ответы). Для того чтобы формализовать процесс обмена информацией, можно реализовать API (Application Programming Interface – программный интерфейс приложения). API представляет собой совокупность правил, по которым взаимодействуют между собой программы или системы.
Широкое распространение получила такая технология обмена информацией как REST API. REST – это способ создания API с использованием протокола HTTP. RESTful является более строгим подходом к реализации REST-технологии. В RESTful имеются методы HTTP, которые используют для взаимодействия с данными на серверах:
GET (получение информации о данных или списка объектов);
DELETE (удаление данных);
POST (добавление или обновление данных);
PUT (регулярное обновление данных);
PATCH (частичное обновление данных);
HEAD (получение заголовков ответа сервера);
OPTIONS (получение информации о методах запроса);
TRACE (запрос для отладки и диагностики сети);
CONNECT (установка туннеля для защищенного соединения).
На рисунке 3 показано, как с помощью описанных методов происходит взаимодействие с макетом.
Рисунок 3 – Представление путей обращения для Web-сервера
При работе с лабораторным макетом используются два RESTful метода: GET для получения информации со стенда и POST для отправки макету обновленных данных.
Запросы содержат URL, c помощью которого определяется местонахождение ресурса. URL (Uniform Resource Locator) – это система адресов электронных ресурсов.
Сообщения, формируемые в процессе обмена информацией с макетом, представляются в особой форме, а именно в формате JSON.
JSON (аббревиатура от JavaScript Object Notation) – это текстовый формат обмена данными. Основан данный формат на языке JavaScript, но используется во многих других языках программирования. JSON-объект представляет собой неупорядоченное множество пар «ключ-значение». Ключом называют идентификатор параметра, передаваемого серверу. Значениями могут выступать числа, строки, массивы, логические константы, другие JSON-объекты. Ключ и значение отделяются друг от друга двоеточием. Пары «ключ-значение» разделяются запятыми, а всё их множество заключено в фигурные скобки. В листинге 1 приведен пример сформированного лабораторным стендом JSON-объекта.
Листинг 1 - Пример JSON-объекта
{"pressure":1048,"temperature":24,"button1State":"True","button2State":"True","button3State":"True","ambient_light":335,"red_light":109,"green_light":102,"blue_light":149,"lightness":7,"acceleration_x":"5.82626219","acceleration_y":"6.7824","acceleration_z":"15.2933120","Led1State":"True","Led2State":"True","Led3State":"False","led_data":{"leds1":{"red":125,"green": 192,"blue":65}, "leds2":{"red":181,"green":176,"blue":104},"leds3":{"red":127,"green":82,"blue":168},"leds4":{"red":37,"green":34,"blue":18},"leds5"{"red":132,"green":193,"blue":89},"leds6":{"red":21,"green": 234,"blue":49},"leds7":{"red":175,"green":145,"blue":251},"leds8":{"red":201,"green":234,"blue":78}}
При получении JSON-строки производится парсинг, представляющий собой процесс выделения и структурирования данных. Из пар «ключ-значение» JSON-объекта необходимо выделить передаваемую информацию для последующей обработки. Информацией являются показания датчиков, состояния тумблеров, «лампочек» и светодиодов.
Рассчитаем минимальную скорость соединения, необходимую для стабильного обновления данных при отправлении GET-запросов серверу через фиксированный временной интервал.
Ответ сервера содержит status line (строка статуса) в первой строке, заголовки и тело ответа. При успешной обработке запроса строка статуса содержит код состояния «200» и текст статуса «OK». Заголовок Server содержит информацию о сервере, обработавшем запрос. Тело ответа представляет собой JSON-объект.
В листинге 2 приведен пример ответа сервера. В качестве тела сообщения представлена JSON-строка, у которой для каждого ключа подобрано максимальное по количеству символов значение.
Листинг 2 - Пример ответа сервера
HTTP/1.1 200 OK
Server: esp8266
{"pressure":1100,"temperature":-10,"button1State":"False","button2State":"False","button3State":"False","ambient_light":1200,"red_light":116,"green_light":144,"blue_light":215,"lightness":1200,"acceleration_x":+10.11223344,"acceleration_y":12.12345671,"acceleration_z":15.98736415,"leds1":{"red":170,"green":179,"blue":255},"leds2":{"red":170,"green":179,"blue":255},"leds3":{"red":170,"green":179,"blue":255},"leds4":{"red":170,"green":179,"blue":255},"leds5":{"red":170,"green":179,"blue":255},"leds6":{"red":170,"green":179,"blue":255},"leds7":{"red":170,"green":179,"blue":255},"leds8":{"red":170,"green":179,"blue":255},"LED1":false,"LED2":false,"LED3":false}
В данном ответе сервера содержится 691 символов, с учетом пробелов – 694 символов. Кодирование каждого символа ответа осуществляется в кодировке ASCII, в коде программы символ хранится как переменная типа char, занимающая 8 бит (1 байт). Таким образом, объем ответа сервера составит 694 байт.
Для выбранного максимально возможного периода обновления данных, равного 60 секунд, каждую минуту необходимо получать 1 кадр обновления, то есть, минимальная необходимая скорость составляет 694 байт/мин.
Для выбранного минимально возможного периода обновления, равного 1 секунде, за минуту необходимо производить 60 циклов обновлений, поэтому минимальная необходимая скорость составит:
694*60=41640байт/мин=20,66кбайт/мин.694*60 = 41640\ байт/мин = 20,66\ кбайт/мин.
2. ПОЛЬЗОВАТЕЛЬСКИЕ ИНТЕРФЕЙСЫ
2.1. Понятие пользовательских интерфейсов
Интерфейс – это совокупность средств, с помощью которых осуществляется взаимодействие между элементами системы. Взаимодействие может происходить между различными устройствами, между программами, между устройством и программой его управления.
Пользовательский интерфейс (ПИ) – набор методов, а также программных и технических средств, которые позволяют пользователю взаимодействовать с программой. В качестве примеров взаимодействия можно привести такие активности пользователя, как:
ввод данных;
получение информации;
запуск или отмена различных процессов, происходящих в программе.
Существует несколько видов пользовательского интерфейса:
• командный интерфейс (взаимодействие происходит посредством ввода определенных текстовых команд с клавиатуры);
• графический интерфейс (информация представляется на экране в виде графических элементов, через которые и осуществляется взаимодействие).
Сейчас широкое распространение имеет графический интерфейс (Graphical User Interface – GUI). Данный факт связан с легкостью освоения ключевых функций и большим удобством использования программы с таким ПИ. Использование GUI не требует запоминания самих команд и правил их написания.
GUI очень часто используется как для программ, работающих на персональных компьютерах, так и для приложений, реализованных для использования на мобильных устройствах (таких, как смартфоны и планшеты).
Хороший пользовательский интерфейс должен обладать следующими свойствами:
• согласованность в стиле представления информации, элементов управления;
• простота;
• четкость иерархии элементов;
• эстетическая привлекательность;
• интуитивная понятность каждой из частей интерфейса;
• удобство управления всеми элементами ПИ.
2.2. Среда разработки Qt Designer
В данной работе для проектирования графического пользовательского интерфейса используется программа Qt Designer.
Qt – программная платформа, предназначенная для разработки программного обеспечения на высокоуровневом языке программирования C++. Qt содержит все необходимые для создания программного обеспечения классы, в том числе предназначенные для работы с элементами графического интерфейса.
PyQt5 является набором библиотек на языке Python, предназначенным для разработки графического интерфейса на основе платформы Qt5.
Qt Designer – это инструмент Qt, применяемый для создания графического интерфейса. В Qt Designer реализованы все типовые элементы интерфейса. Среди них можно перечислить наиболее часто используемые при реализации интерфейсов:
кнопка;
метка (используется для отображения текста);
поле ввода текста;
ползунок (используется для регулирования значений при изменении положения ползунка);
радиокнопка (позволяет выбрать только одну опцию из нескольких возможных);
электронный индикатор (служит для отображения чисел);
вкладки (позволяют управлять показом заранее определенным набором элементов интерфейса)
флаговая кнопка (имеет два состояния — включено и выключено);
список (используется для отображения списка; если список настолько длинный, что невозможно одновременно отобразить все его элементы, к списку добавляется полоса прокрутки);
строка состояния (служит для отображения статуса процесса).
Окно программы Qt Designer показано на рисунке 4.
Рисунок 4 – Окно Qt Designer
В центральной части окна расположена основная рабочая область, в которой размещаются элементы разрабатываемого интерфейса.
В левой части окна представлена вкладка Widget Box, в которой располагаются все доступные для добавления виджеты. Виджеты – это графические компоненты, на основе которых и строится интерфейс разрабатываемого приложения. Добавление элементов интерфейса осуществляется путем перетаскивания необходимого виджета из вкладки Widget Box в центральную область.
В верхней части расположена панель управления, содержащая инструменты для работы с файлами, макетами, в этой же части реализована возможность выбора того, что редактируется в данный момент – виджет, связь сигнал/слот, партнерские связи, порядок нумерации виджетов.
Среди основных свойств виджетов можно привести в пример следующие: название виджета, его геометрические размеры (в том числе максимально и минимально допустимые), положение на макете, параметры шрифта. У разных виджетов наборы свойств могут отличаться, в частности, у электронного индикатора можно установить форму счисления отображаемых чисел; для ползунка есть возможность задать максимально и минимально возможные устанавливаемые значение, а также шаг изменения значения.
В правой части окна располагаются три раздела. В Object Inspector располагаются все объекты, созданные в данном проекте. Каждый объект можно выбрать, чтобы в дальнейшем просматривать и редактировать его свойства. В Property Editor представлены свойства выбранного виджета. В третьем разделе можно переключаться между следующими вкладками: Signal/Slot Editor (реализация связи сигналов и слотов), Action Editor (создание и редактирование событий), Resource Browser (работа с файлами ресурсов).
При создании нового проекта Qt Designer предоставляет возможность выбора из нескольких представленных готовых шаблонов: диалоговое окно с кнопкой снизу или справа, диалоговое окно без кнопки, оконное приложение, виджет.
В Qt взаимодействие объектов реализовано через систему сигналов и слотов. Сигнал генерируется, когда происходит определенное событие. Событием называют объекты, создаваемые Qt в ответ на некоторые ситуации.
Сигнал – метод объекта, который может создать событие. Слот – метод объекта, который вызывается при появлении сигнала. Можно подключить слот к сигналу и автоматически вызывать его при появлении сигнала.
У каждого виджета могут быть сигналы и слоты. Один сигнал можно подключить к нескольким слотам, к одному слоту можно подключить несколько сигналов.
В Qt Designer в разделе Signals/Slots можно создавать связи сигналов и слотов, для чего нужно указать источник сигнала (Sender), сигнал (Signal), получателя (Receiver), слот (Slot). На рисунке 5 показан пример связи сигнал-слот, с помощью которой окно MainWindow можно закрыть, нажав на кнопку pushButton.
Рисунок 5 – Создание связи сигнал/слот
3. ЯЗЫК ПРОГРАММИРОВАНИЯ PYTHON
3.1. Обзор языка программирования Python
Python – это высокоуровневый язык программирования. «Высокоуровневость» языка подразумевает тот факт, что он ориентирован на удобство и быстроту использования программистом. Это является основным отличием от низкоуровневых языков, конструкции которых близки к командам машинного кода и зачастую могут быть длинны и сложны для понимания.
Python является интерпретируемым языком программирования, то есть, исполнение текста программы на Python осуществляется построчно, а не целиком, как в компилируемых языках.
Рассматриваемый язык программирования поддерживает различные методики программирования, например, императивное, процедурное, функциональное, логическое, структурное, а также объектно-ориентированное (ООП).
Ключевым понятием в ООП является объект. Данный термин обозначает группу связанных данных и функций, которые с ними можно выполнять. Переменные внутри объекта называются атрибутами, а функции – методами. Объекты являются независимыми друг от друга, изменения в одном объекте никак не отражаются на других. По этой причине использование принципов объектно-ориентированного программирования упрощает разработку кода.
Объекты строятся на основе классов. Класс – это модель, по образцу которой создаются объекты заданного типа. Формирование объекта из класса обозначается понятием создание экземпляра. В языках программирования реализованы особые функции, которые вызываются только при первом создании объекта (конструктор) и при необходимости уничтожить объект (деструктор).
Существует четыре основополагающих принципа объектно-ориентированного программирования:
инкапсуляция (контроль доступа к данным объекта);
наследование (создание новых классов на базе существующих);
полиморфизм (реализация одних и тех же методов и свойств различными способами);
абстракция (фокусировка на важных для решения конкретной задачи свойствах модели).
При разработке графических пользовательских интерфейсов используются типовые элементы. В языке Python каждый элемент интерфейса реализуется на базе соответствующего класса. Например, ползунок является экземпляром класса QSlider, а кнопка представляет собой экземпляр класса QPushButton. В общем счете набор библиотек PyQt содержит более 400 различных классов.
3.2. Наследование в PyQt
Такой принцип объектно-ориентированного программирования как наследование позволяет удобным образом задавать свойства экземпляров классов, поскольку наследникам передаются атрибуты и методы родительского класса. Кроме этого наследоваться могут слоты, сигналы, а также дополнительные члены.
Для того чтобы указать, какую часть содержимого класса могут использовать его наследники, используются модификаторы доступа. Существует три типа модификаторов доступа:
публичный — public (доступ к методам и переменным открыт вне класса);
приватный — private (доступ открыт только внутри класса);
защищенный — protected (доступ открыт внутри самого класса и его наследников).
Все классы, которые описывают элементы интерфейса, являются наследниками класса QObject. Методы данного класса реализуют работу механизма связи сигналов и слотов, они же и наследуются от QObject. На рисунке 6 показано дерево наследования некоторых классов набора библиотек PyQt.
Рисунок 6 – Дерево наследований классов PyQt
Непосредственно наследуют QObjects множество классов. Кроме указанных на рисунке 6 классов можно также привести в пример QSound, QTimer, QWebFrame.
В классе QCoreApplication реализуются инструменты обработки сообщений для консольного приложения Qt. Экземпляр данного класса создается при разработке приложений с командным интерфейсом. Единственным наследником QCoreApplication является класс QApplication, в котором имеются циклы обработки сообщений оконной системы графического пользовательского интерфейса. Для любого приложения с GUI, использующего Qt, существует единственный экземпляр QApplication вне зависимости от того, какое количество окон имеет данное приложение. QApplication наследует от QObject один атрибут – название объекта objectName, от QCoreApplication наследуются следующие атрибуты: версия приложения, а также имя и адрес интернет-домена организации, разработавшей данное приложение.
Базовым для всех элементов пользовательского интерфейса является класс QWidget. Widget – это элементарный элемент ПИ, получающий информацию о различных событиях, например, щелчках мыши или нажатии на кнопки клавиатуры. От QWidget наследуются такие атрибуты как, например, положение в пространстве, минимальные и максимальные размеры.
Экземпляром QComboBox является элемент интерфейса, представляющий собой поле с раскрывающимся списком, из которого можно выбрать один элемент. В данном классе реализованы методы работы с вариантами выбора, такие, как функции исключения повтора или определения текущего варианта. QLineEdit – это класс, на основе которого создается поле ввода однострочного текста. Данный редактор позволяет пользователю изменять текст. В классе QLineEdit добавляется описание методов работы с текстом, например, ограничение длины или задание условий для текста. У обоих описанных классов – QComboBox и QLineEdit – нет наследников.
QAbstractSlider – это родительский класс для всех элементов интерфейса, предназначенных для настройки некоторых значений. Наследниками QAbstractSlider являются:
QScrollBar;
QSlider;
QDial.
QScrollBar – это класс полосы прокрутки. С помощью данного элемента управления можно перемещать данные в видимую область, делая удобным отображение данных, по размеру превышающих определенную для них область. QScrollBar не содержит дополнительных методов или сигналов, расширяющих функционал базового класса QAbstractSlider.
Экземпляром класса QSlider является ползунок, также называемый слайдер. В данном классе реализован метод, позволяющий задавать положение и шаг шкалы ползунка.
QDial является классом виджета установщика. Данный элемент интерфейса представляет собой круглую шкалу с ползунком, который можно перемещать по кругу. По функциональным возможностям установщик похож на слайдер, с отличием в виде возможности перехода к минимальному значению сразу после достижения максимального. В данном классе реализованы методы настройки отображения и количества рисок, а также сигнал управления их видиимостью.
Описанным выше образом работает наследование методов и свойств различными классами элементов интерфейса.
3.3. Редактор кода PyCharm
Существует большое количество редакторов кода для языка программирования Python. В данной работе в качестве среды разработки на Python был выбран редактор PyCharm, поскольку он обладает рядом достоинств, благодаря которым процесс написания программ становится проще и удобнее:
автоматическое дополнение кода при написании;
мгновенная подсветка ошибок;
автоматическое создание отступов.
Некоторые функции редактора кода PyCharm позволяют ускорить процесс разработки программ. Функция автоматического дополнения текста программы работает следующим образом: пользователь печатает начало ключевых слов или переменных, а PyCharm предлагает различные варианты завершения слова, среди которых пользователь выбирает наиболее подходящий. Чем больше вводится символов, тем меньше программа предлагает вариантов.
Окно программы PyCharm показано на рисунке 7.
Рисунок 7 – Окно PyCharm
В верхней области находится панель управления, содержащая инструменты для навигации в редакторе кода, работы с файлами, текстом программы.
В левой части располагается вкладка Projects, с помощью которой можно просматривать файлы, входящие в состав того или иного проекта, а также переключаться между ними.
В правой части представлена рабочая область, в которой можно редактировать код. Каждая строка нумеруется, что упрощает ориентирование в написанном коде.
В нижней части окна приложения находится консоль с несколькими вкладками. На рисунке 7 представлены следующие подразделы: Run (отображение информации, выводимой программой в консоль), TODO (список TODO-комментариев, найденных в тексте программы), Problems (представление списка ошибок и предупреждений), Terminal, Python Packages (список используемых модулей и библиотека языка Python), Python Console (командная строка внутри среды разработки PyCharm). Помимо уже перечисленных вкладок имеется возможность добавлять и другие, например, Find (отображение результатов поиска по тексту программы) или Version Control (работа с различными версиями текущего файла).
В среде разработки предусмотрено автоматическое отображение пользователю справочной информации об используемых в тексте программы объектах, методах, модулях языка Python. Для использования данной функции пользователю достаточно навести курсор на интересующий объект. Редактор кода использует документацию из различных электронных ресурсов, расположенных по следующим адресам: docs.python.org, а также doc.qt.io.
Среда разработки PyCharm поддерживает различные системы контроля версий, среди которых: Git, GitHub, Mercurial, SVN. Данные программные инструменты позволяют отслеживать изменения в тексте программы и управлять ими.
4. ПОДГОТОВКА К РАЗРАБОТКЕ ИНТЕРФЕЙСА
4.1. Функциональные требования к интерфейсу
При разработке приложения, прежде всего, необходимо определить, какие действия сможет выполнить пользователь при использовании данной программы.
В результате анализа устройства макета был составлен перечень функциональных требований к интерфейсу. Перечислим функциональные требования:
Отображение данных о состоянии всех датчиков, а также «лампочек» и тумблеров.
Изменение состояния индикаторных светодиодов и возможность управления цветом каждого светодиода.
Обращение к макету с запросами следующего содержания:
запрос на отправку данных с макета;
запрос на получение макетом обновленных данных.
Представление данных в виде графиков.
4.2. Сценарий использования
Для формулирования требований к поведению приложения при разработке программного обеспечения часто используются сценарии использования.
Сценарий использования – это описание взаимодействия модели пользователя с системой приложения для выполнения тех или иных действий.
Предполагается, что разрабатываемое приложение будет использоваться студентами для выполнения лабораторных работ, поэтому и в качестве модели пользователя будет выступать студент.
При выполнении лабораторной работы предполагается, что студент ознакомлен с устройством макета. При этом допускается, что он недостаточно хорошо ориентируется в работе датчиков.
В процессе выполнения лабораторной работы студент запускает приложение для взаимодействия с макетом. Пользователь работает с приложением ограниченное время – в пределах одной-двух пар.
Для пользователя-студента, выполняющего лабораторную работу, доминирующими данными являются показания датчиков, поскольку состояния «лампочек» и тумблеров, а также цвет каждого светодиода пользователь может определить напрямую, глядя на лабораторный стенд, а для показаний датчиков в устройстве макета не предусмотрены элементы индикации.
Рассмотрим действия, которые пользователь может выполнить с программой.
Обновление данных о состоянии всех датчиков, а также «лампочек» и тумблеров.
Пользователь запускает формирование запроса на отправку данных с макета.
Программа формирует и отправляет запрос макету.
Программа принимает данные, отправленные макетом
Программа отображает полученные значения.
Управление работой «лампочек» и цветом светодиодной линейки.
Пользователь задает необходимые состояния «лампочек» и цвет каждого из светодиодов.
Пользователь запускает формирование запроса.
Программа формирует и отправляет запрос макету.
Обновление графика.
Пользователь запускает обновление графика.
Программа через фиксированные промежутки времени формирует и отправляет запрос на получение данных макету.
Программа принимает запрошенные данные.
При завершении обновления данных программа формирует новый график.
Учитывая специфику пользователя-студента, можно сформулировать следующие требования к интерфейсу:
понятное ориентирование в структуре интерфейса;
наглядное представление функций каждого датчика;
наличие подписей, поясняющих назначение всех элементов интерфейса.
4.3. Анализ первоначального варианта интерфейса.
В качестве отправной точки для проектирования графического пользовательского интерфейса было предложено выбрать представленную на рисунке 8 заготовку.
Рисунок 8 – Первоначальный вариант интерфейса
На светло-сером фоне расположены все основные элементы управления. Цвет фона приложения может быть представлен в цветовой модели RGB следующим образом: (240, 240, 240), где значения в круглых скобках – это составляющие трех базовых цветов (красный, зеленый, синий соответственно), принимающие значения от 0 до 255.
В верхней части приложения расположены поля ввода текста, предназначенные для указания URL. Верхнее поле предназначено для задания адреса устройства, которому будут отправлены POST-запросы, нижнее поле для URL устройства-получателя GET-запроса. Рядом с описанными полями находятся две кнопки с надписями «SEND Post» «SEND Get Request», данные элементы нужны для отправки POST- и GET-запросов соответственно.
При нажатии на кнопку «SEND Post» автоматически формируется запрос в формате JSON, учитывающий состояние «лампочек» и цвет светодиодов в приложении.
В левой части приложения расположен элемент с названием «Body message», предусмотренный для отображения полученных от макета и отправляемых ему данных.
Правее находятся три кнопки с одинаковой надписью «Вкл». Данные элементы интерфейса позволяют управлять состоянием «лампочек». При одинарном нажатии на какую-либо из кнопок изображение над ней изменится на картинку с горящей «лампочкой», надпись изменится на «Выкл», «лампочка» при этом «включится». При повторном нажатии вернутся исходные изображение и надпись. На рисунке 9 показан вид данных элементов после «включения» двух «лампочек».
Рисунок 9 – Блок управления «лампочками»
Ниже элементов, предназначенных для управления «лампами», в два столбца расположены элементы, реализующие электронные индикаторы, и названия величин, значения которых данные индикаторы отображают. Шрифт и размер текста одинаковы для подписей всех индикаторов. Всего подписей шесть, что совпадает с количеством величин, которые измеряются всеми включенными в состав лабораторного макета датчиками.
Правее находятся три изображения, сопровождаемые надписью «Тумблеры». Для отображения состояния тумблеров используются два изображения, показанные на рисунке 10. Тумблер в положении «включен» показан слева, в положении «выключен» – справа.
Рисунок 10 – Состояния тумблеров
Ниже расположен элемент интерфейса, с помощью которого отображаются построенные приложением графики.
В правой части приложения находятся индикаторы, представляющие собой элементы управления светодиодами, и три кнопки. Индикаторов – восемь, что соответствует количеству светодиодов в макете. При нажатии на любой из них открывается окно, показанное на рисунке 11.
Рисунок 11 – Окно выбора цвета
В данном окне пользователь может выбрать цвет из палитры или группы «basic colors». Также присутствует возможность задать цвет в цветовой модели RGB или HSV. При нажатии кнопки «Ok» светодиод поменяет цвет на выбранный. При нажатии на «Cancel» произойдет отмена выбора цвета. Данное окно является стандартным диалоговым окно выбора цвета библиотек Qt.
Три кнопки, расположенные в той же области, что и индикаторы, позволяют задавать цвета всех восьми светодиодов одновременно. Кнопка с надписью «Вкл» задает желтый цвет, представляемый в цветовой модели RGB как (255, 255, 0). Кнопка, подписанная «Выкл», задает черный цвет, представимый как (0, 0, 0). «Цвет» открывает окно, показанное на рисунке 11. В цвет, который выбран в окне Select Color, окрашиваются все восемь светодиодов.
При анализе существующего варианта интерфейса были выявлены следующие недостатки:
Различные размеры текстовых полей, предназначенных для ввода URL. Это может запутать пользователя, поскольку создается впечатление того, что данные элементы интерфейса имеют сильно отличные друг от друга предназначения.
Отсутствие подписи над индикаторами, управляющими светодиодами.
Не прослеживается четкое деление на отдельные «блоки», что затрудняет ориентирование в приложении.
Среди подписей к электронным индикаторам три раза встречается «Освещенность». Самая последняя из «Освещенностей» соответствует значению цвета, измеренному цифровым датчиком освещенности. Также нет указания, какой из индикаторов выводит на экран показания аналогового модуля измерения освещенности, а какой – цифрового.
Не предусмотрено никаких элементов взаимодействия с графиками, имеется только элемент отображения. При этом также нет никаких подписей, позволяющих понять, зависимость каких именно величин представлена.
При создании нового интерфейса необходимо учесть и исправить описанные выше недостатки.
5. СОЗДАНИЕ ИНТЕРФЕЙСА
Необходимо выбрать расположение различных элементов интерфейса таким образом, чтобы выполнить следующие задачи:
отразить связи между различными элементами;
обеспечить наилучшее ориентирование пользователя в приложении;
реализовать понятное и удобное для восприятия человеком представление информации, получаемой с лабораторного датчика.
Для этого можно использовать деление на отдельные блоки, которые формируются, сообразуясь с функцией, которую в приложении выполняют те или иные элементы интерфейса. В соответствии с функциональными требованиями к интерфейсу, изложенными выше, можно выделить следующие блоки:
блок отображения значений, полученных с макета;
блок формирования и отправки запросов;
блок работы с графиками.
5.1. Блок отображения значений
Данный блок необходим для представления пользователю значений, измеренных каждым из датчиков.
Для отображения числовых данных в среде разработки Qt Designer лучше всего подходит электронный индикатор.
Подписи, которыми сопровождаются электронные индикаторы, необходимо изменить. Следует добавить пояснения относительно того, показания освещенности аналогового или цифрового датчика отражает данный индикатор.
Стоит изменить цвета подписей под индикаторами цвета. Выбранный цвет подписи «R» представляется в цветовой модели RGB следующим образом: (255, 0, 0), цвет подписи «G» имеет представление (0, 255, 0), цвет подписи «B» - (0, 0, 255). Такое изменение позволит сделать отражение цвета в модели RGB более наглядным. Подпись слева от индикатора цвета необходимо изменить на «Цвет», чтобы точнее передать, значение какой величины отображает индикатор.
Добавление рамки вокруг всего блока и применение описанных выше изменений показано на рисунке 12.
Рисунок 12 – Первый вариант компоновки блока
Было бы удобно визуально объединить электронные индикаторы в некоторые подгруппы. Для более наглядной демонстрации работы лабораторного макета можно было бы произвести объединение в соответствии с физическими устройствами, то есть показать, какой датчик измеряет значение той или иной физической величины. Применение данного изменения показано на рисунке 13.
Рисунок 13 – Второй вариант компоновки блока
Показаниями акселерометра могут быть вещественные числа со знаком, имеющие до 9 знаков после запятой. По этой причине необходимо увеличить в длину индикаторы отображения показаний акселерометра.
Для большего удобства восприятия можно добавить цветные подписи с названиями каждого из датчиков, тем самым также визуально их объединяя. Выбранный оттенок голубого цвета, который можно представить в модели RGB как (206, 213, 255), выделяется на светло-сером фоне всего приложения, но при этом не является слишком ярким и не перетягивает тем самым на себя внимание.
Стоит окрасить индикатор, поясняющую подпись и пространство между ними в один цвет, например, в оттенок серого цвета, который представим в модели RGB как (210, 210, 210). Такое изменение необходимо для более четкого объединения подписи и индикатора. Окончательный вид блока отображения значений датчиков показан на рисунке 14.
Рисунок 14 – Третий вариант компоновки блока
Кроме показаний датчиков необходимо также отображать состояния «лампочек», тумблеров и светодиодов. Наиболее наглядным было бы расположение элементов интерфейсов так же, как на макете. То есть, слева в верхней части нужно разместить «лампочки», правее них – тумблеры, под которыми поместить светодиодную линейку. На рисунке 15 показана итоговая компоновка блока отображения данных. Все элементы интерфейса, отображающие данные различных составляющих макета, отделены друг от друга линиями.
Рисунок 15 – Итоговый вид блока отображения данных
5.2. Блок формирования и обработки запросов
Данный блок должен включать в себя все элементы интерфейса, связанные с формированием и отправкой запросов, а также отображением их результатов.
Для удобства можно было бы добавить возможность автоматического обновления значений, измеренных датчиками. При этом требуется реализовать возможность выбора режима обновления данных и интервала времени, через которое происходила бы отправка запросов макету на получение с него данных. Необходимо также предусмотреть возможность возврата к «ручному» режиму обновления. «Ручной» режим обновления состоит в следующем: запрос на получение данных формируется только после того, как пользователь запустит данный процесс.
Показанная на рисунке 16 часть интерфейса реализована в соответствии с представленными выше соображениями.
Рисунок 16 – Блок автообновления данных
Две радиокнопки с надписями «Ручной» и «Авто» позволяют выбрать режим обновления данных. По умолчанию при запуске программы выбран «ручной» режим обновления данных. Индикатор показывает период, через который происходит отправка запросов на получение данных с макета. Ниже индикатора и подписи к нему расположен ползунок с рисками, имеющими шаг, равный 5 секундам. Слайдер предназначен для указания значения периода обновления в диапазоне от 1 до 60 секунд с шагом, равным одной секунде. При выборе «ручного» режима обновления ползунок недоступен. При изменении положения ползунка меняется также и значение на индикаторе.
На рисунке 17 показан итоговый вид блока работы с запросами.
Рисунок 17 – Компоновка блока работы с запросами
В левой части блока расположены два поля редактирования текста с полупрозрачными надписями «URL для GET-запроса» и «URL для POST-запроса». При вводе текста пользователем данные надписи пропадают. Данная особенность реализована с помощью такого свойства текстового поля как placeholderText. Напротив каждого поля редактирования текста расположена кнопка, предназначенная для отправки соответствующего типа запроса. Ниже расположен описанный ранее режим обновления данных.
В правой половине блока расположено текстовое поле с надписью «Текст запроса». Данный элемент отображает полученные от макета и отправляемые ему данные.
5.3. Блок работы с графиками
Данный блок необходим для реализации функции графического представления данных.
В виде гистограмм удобно отображать изменение измеряемых величин, в частности, освещенности (показания с аналогового и цифрового датчиков), давления и температуры.
Таким образом, необходимо предусмотреть размещение четырех графиков. Реализовать это можно с использованием нескольких виджетов. На рисунке 18 показан один из вариантов с применением такого элемента интерфейса как выпадающий список.
Рисунок 18 – Первый вариант размещения графиков
При нажатии на выпадающий список отображаются все доступные варианты, как это показано на рисунке 19.
Рисунок 19 – Раскрытие выпадающего списка
Другой вариант размещения графиков показан на рисунке 20. В этом случае используется элемент интерфейса, который носит название «вкладки».
Рисунок 20 – Второй вариант размещения графиков
При сравнении первого и второго вариантов размещения графиков различных физических величин более удачным оказался тот, в котором используются вкладки, поскольку данный элемент ннтерфейса позволяет одновременно отображать весь список доступных вариантов. В этом случае пользователю не нужно дополнительно нажимать на выпадающий список, чтобы просмотреть все доступные опции.
Вертикальная ось отражает значение физической величины. Горизонтальная ось показывает порядок получения того или иного значения величины. То есть, столбец под номером 1 был построен раньше, чем имеющий номер 10. При построении нового столбца крайний слева столбец исчезает, остальные перемещаются на одну позицию влево, новое значение становится крайним справа.
Стоит добавить возможность быстрого перестроения всего графика, с помощью которой пользователь мог бы запустить процесс быстрого автоматического получения и отображения 10 новых значений. Такая функция позволила бы оценивать разброс значений представляемых параметров.
Итоговый вид блока работы с графиками показан на рисунке 21.
Рисунок 21 – Итоговый вид блока
Ниже элемента, предназначенного для отображения графиков, расположены две кнопки – «Перестроить» и «Таблица значений». Первая кнопка позволяет полностью перестроить график. При нажатии на кнопку «Таблица значений» открывается новое окно, в котором приводятся все значения, отображенные в данный момент на всех четырех графиках. Вид таблицы значений показан на рисунке 22.
Рисунок 22 – Таблица со значениями точек
5.4. Компоновка блоков
В русском языке направление письма следующее: слева направо и сверху вниз. Поэтому и информация воспринимается в Z-образном направлении. Шаблон, выстроенный в соответствии с описанным направлением, носит название Z-паттерна. На рисунке 23 показан макет приложения, на котором схематично представлено расположение блоков.
Рисунок 23 – Схема расположения блоков
При запуске пользователю, вероятнее всего, в первую очередь понадобится получить данные с макета, затем просмотреть значения, которые измерили датчики, после чего оценить изменение значений по графикам. Именно в таком порядке и расположены блоки: в левой верхней области – блок работы с запросами. В правой области – блок отображения данных, слева снизу – блок с графиками. На рисунке 24 показан вариант интерфейса приложения, структура которого построена на основании приведенного выше макета.
Рисунок 24 – Первый вариант компоновки интерфейса
Чтобы сделать деление по блокам более наглядным, каждый из блоков можно выделить рамкой. Цвет пространства внутри рамки представим в модели RGB таким образом: (235, 235, 235). Этот оттенок немного более темный, чем цвет фона всего приложения, благодаря чему более четко выделяются блоки.
Можно также добавить подписи в рамках с пояснением содержания данного блока. В дизайне интерфейсов для акцентирования внимания применяется изменение размера, формы, цвета элементов, которые нужно выделить.
На рисунке 25 показан вариант макета интерфейса приложения с применением всех указанных выше изменений.
Рисунок 25 – Второй вариант компоновки интерфейса
Шрифт подписей блоков выбран крупнее (16), чем шрифт всех остальных подписей (14 для подписей к датчикам и элементам макета и 8 для остальных подписей). Контраст в размере привлекает внимание к более крупному элементу, в данному случае, к подписи блока.
Для лучшего выделения фон к подписям выполнен в зеленом цвете, который представим в цветовой модели RGB следующим образом: (209, 255, 194). Такой оттенок хорошо выделяется на фоне всего приложения, а также он ярче, чем использованный для объединения показаний датчиков оттенок голубого цвета. Пользователь сначала обращает внимание на надписи с фоном более яркого зеленого оттенка, поэтому упрощается нахождение нужного блока.
Голубой и зеленый цвета, оттенки которых были использованы для выделения названий датчиков цвета и вкладок соответственно, находятся близко друг к другу на цветовом круге. По этой причине данные цвета хорошо комбинируются, а также создают мягкое сочетание, приятное для глаз пользователя. На рисунке 26 цифрой 1 обозначено расположение использованного зеленого цвета, цифрой 2 – голубого.
Рисунок 26 – Расположение цветов на цветовом круге
Стоит изменить иконку приложения. Выбранный вариант иконки показан на рисунке 27.
Рисунок 27 – Иконка приложения
На представленном выше варианте изображен символ, ассоциирующийся с технологией беспроводной передачи информации. Данный вариант иконки был выбран, поскольку лабораторный стенд, для работы с которым разрабатывалось приложение, поддерживает беспроводной режим обмена данными.
6. БЕЗОПАСНОСТЬ ЖИЗНЕДЕЯТЕЛЬНОСТИ
6.1. Аспект эргономики программного обеспечения
В ГОСТ Р ИСО 9241 серия 100 приводится следующее определение эргономики: это наука, которая занимается рассмотрением вопросов взаимодействия человека с другими элементами системы. Теоретические данные и принципы эргономики применяются на практике в процессе проектирования различных систем для повышения их производительности, также для обеспечения сохранности здоровья человека.
Эргономика программного обеспечения занимается рассмотрением вопросов, связанных с использованием эргономики применительно к программным аспектам интерактивных систем.
6.2. Соответствие интерфейса разработанного ПО требованиям ГОСТ Р ИСО 9241
Стандарт ГОСТ Р ИСО 9241 был разработан для того, чтобы предотвратить возникновение у пользователей создаваемого программного обеспечения проблем с пригодностью его использования, например, таких, как:
недостаточное количество информации в пользовательском интерфейсе;
наличие вводящей в заблуждение информации;
выполнение действий, не требующихся для решения той или иной производственной задачи.
У различных разработчиков программного обеспечения использование и наименование элементов интерфейса могут сильно варьироваться. Данное обстоятельство может привести к понижению комфортности использования разрабатываемых приложений, поскольку пользователю приходится иметь дело с нестандартными представлением функций и управлением элементами интерфейса. Для обеспечения единообразного характера представления и функциональности графических элементов был введен в действие стандарт ГОСТ Р ИСО 9241-161-2016. В данном нормативно-правовом документе не устанавливаются стиль изображения элементов интерфейса, то есть, отсутствуют ограничения свободы творчества разработчиков.
В указанном стандарте приводятся перечень и общее определение элементов графического интерфейса. Для каждого элемента описание содержит перечисление компонентов и возможных состояний, условия уместности применения, способы использования.
В разработанном интерфейсе используются следующие элементы интерфейса:
Ползунок. Его внешний вид в приложении показан на рисунке 28.
Рисунок 28 – Ползунок
Данный ползунок состоит из стандартных для данного элемента компонентов: заголовка (1), отображения текущего значения данных (2), средства измерения величины (3).
В разработанном приложении слайдер используется для установки периода обновления данных по той причине, что данный параметр может принимать значения в промежутке от 0 до 60 секунд. Такой случай применения соответствует условию, указанному в указанном выше стандарте.
Рассматриваемый элемент используется исключительно для ввода данных (значения периода обновления, измеряемого в секундах). Таким образом, данный компонент соответствует своему описанию в ГОСТ.
Радиокнопка. Группа данных элементов показана на рисунке 29.
Рисунок 29 – Группа радиокнопок
Радиокнопка состоит из двух стандартных компонентов: индикатора (1) и подписи (2). На рисунке 29 радиокнопка с надписью «Ручной» находится в состоянии «не выбрано», вторая радиокнопка – в состоянии «выбрано», других состояний у данного элемента интерфейса нет.
В разработанном интерфейсе радиокнопки используются для выбора режима обновления данных, который не может быть ручным и автоматическим одновременно, то есть, можно выбрать только один вариант из двух. Данные радиокнопки расположены в одной строке и объединены общей подписью, что отражает связь радиокнопок. Такой случай применения радиокнопок соответствует ГОСТ.
Набор вкладок. Данный элемент с подписью показан на рисунке 30.
Рисунок 30 – Набор вкладок
Набор вкладок состоит из трех стандартных компонентов: заголовка набора вкладок (1), заголовка отдельных вкладок (2) и области содержимого отдельных вкладок (3). На рисунке 30 активной является вкладка с заголовком «Давление», при этом остальные три вкладки находятся в состоянии неактивности.
Данный элемент интерфейса выбран для отображения пользователю графиков различных физических величин по той причине, что неудобно отображать на экране все графики одновременно из-за их малого их размера. Размер окна приложения позволяет использовать набор вкладок и четко идентифицировать каждую из них. Набор вкладок позволяет переключаться между различными графиками, при этом размер каждого из них значительно больше, чем при единовременном отображении. Такое использование набора вкладок соответствует обоим условиям, указанным в ГОСТ Р ИСО 9241 серия 161.
Текстовое поле. Одно из текстовых полей показано на рисунке 31.
Рисунок 31 – Текстовое поле
Представленный выше элемент редактирования текста включает стандартные для данного элемента интерфейса компоненты: подпись (1) и поле ввода текста (2). Данное текстовое поле является активным, то есть, готовым к вводу данных пользователем. Размеры текстового поля четко обозначены.
В разработанном интерфейсе все текстовые поля используются для ввода буквенных и цифровых данных. Такое применение данного элемента интерфейса соответствует условию, указанному в ГОСТ.
Кнопка. Две кнопки показаны на рисунке 32.
Рисунок 32 – Кнопки
Кнопки состоят из двух стандартных для данного элемента интерфейса компонентов: поясняющей функциональное назначение кнопки надписи (1) и области отображения надписи (2). Кнопка, расположенная слева, находится в состоянии «не нажата», кнопка справа – в состоянии «нажата».
Данные кнопки используются для включения «лампочек». Такое применение соответствует условию, приведенному в ГОСТ Р ИСО 9241 серия 161.
У обеих кнопок есть краткие подписи, отражающие всю необходимую информацию о функции каждой их кнопок. Каждая из кнопок активируется пользователем после одинарного нажатия на нее. Такой способ применения соответствует указанному в стандарте.
Таким образом, все используемые в разработанном интерфейсе элементы соответствуют стандарту ГОСТ Р ИСО 9241-161-2016.
6.3. Пригодность использования Qt Designer
Qt Designer – это среда разработки, которая содержит набор инструментов из библиотеки Qt для разработки графических пользовательских интерфейсов (Graphical User Interface, GUI). У Qt Designer есть ряд важных качеств, благодаря которым данное программное обеспечение пользуется популярностью среди разработчиков графических интерфейсов:
Кроссплатформенность. Код, созданный на основе библиотек Qt, может применяться для различных платформ и физических устройств;
Возможность быстрого старта разработки GUI благодаря использованию готовых шаблонов приложений;
Возможность создания связи между элементами интерфейса при помощи механизма сигнал/слот.
В рассматриваемой среде разработки реализованы все основные элементы интерфейса: кнопки, поля редактирования текста, слайдеры, радиокнопки, флаговые кнопки, а также множество других графических элементов. Добавление элементов интерфейса осуществляется достаточно просто: необходимо перетащить в рабочую область нужный элемент из списка доступных к добавлению элементов. Такой механизм способствует быстроте и удобству процесса разработки графических пользовательских интерфейсов.
Соответствие среды разработки стандартам эргономики программного обеспечения позволяет достичь высокой пригодности использования.
В стандарте ИСО 9241 часть 110 рассмотрены принципы диалога внутри интерактивной системы. При этом диалогом называют взаимодействие между пользователем и интерактивной системой, которое представляет собой последовательность действий пользователя и ответных реакций системы с целью достижения установленных целей. У принципов диалога нет приоритетов. В зависимости от специфики проектируемой системы каждому принципу диалога присваивается вес – величина, которая отражает влияние параметра на эффективность работы системы.
Данные принципы диалога используются при проектировании и оценке интерактивных систем. Предполагается их рассмотрение как целей при проектировании и критериев оценки диалога.
Ниже приведены семь принципов диалога, указанных в упомянутом выше стандарте, а также пояснения относительно соответствия им среды разработки Qt Designer:
Информативность. У всех панелей инструментов имеются подписи, поясняющие их назначение, благодаря чему пользователю проще ориентироваться в функциях.
Соответствие ожиданиям пользователей. В среде разработка Qt Designer используются термины, применяющиеся в сфере разработки интерфейсов приложений. В качестве примеров таких понятий можно привести следующие термины: Widget (Виджет – это элемент графического интерфейса) и Signal/Slot (Сигнал/Слот – это механизм создания связи между элементами интерфейса).
Приемлемость организации диалога для выполнения задания.
При создании новой формы пользователю предоставляется возможность изменения типовых настроек (выбор шаблона, наличие или отсутствие автоматически созданных элементов интерфейса и размер окна приложения). Окно создания новой формы показано на рисунке 33.
Рисунок 33 – Окно создания нового проекта
Пригодность для обучения. Qt Designer предоставляет возможность получения подробной информации о работе приложения и добавляемых пользователем элементах управления.
Контролируемость. Пользователь имеет возможность запустить демонстрацию разрабатываемого интерфейса в любой момент.
Устойчивость к ошибкам. При возникновении ошибки среда разработки предлагает пользователю ознакомиться с дополнительной информацией об ошибке.
Возможность индивидуализации. В Qt Designer можно передвигать различные панели инструментов, располагая их наиболее удобным пользователю образом.
Таким образом, среда разработки Qt Designer соответствует требованиям ГОСТ Р ИСО 9241-110-2016.
ЗАКЛЮЧЕНИЕ
В ходе выполнения дипломной работы были решены все поставленные задачи: выполнен анализ структуры и работы лабораторного стенда, создана модель пользователя-студента, разработан внешний вид и функционал приложения.
Разработанный вариант пользовательского интерфейса полностью соответствует сформулированным в работе функциональным требованиям. Всё приложение визуально четко делится на три блока, выполняющие следующие функции: отображение полученных от макета данных, различные действия с запросами макету, графическое представление значений, измеренных датчиками.
Соответствующая проверка показала, что интерфейс разработанного приложения соответствует ГОСТ Р ИСО 9241.
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
Назаренко Н.А., Назаренко Д.Э. UX/UI-проектирование информационных систем: учеб. пособие. СПб: Изд-во СПбГЭТУ «ЛЭТИ», 2023. 62 с.
Воронов А.В. Методические указания к лабораторным работам по курсу «Проектирование встроенных приложений» / Воронов А.В., Проценко И.М., Шеллер А.Н.
HTTP-запросы: структура, методы, строка статуса и коды состояния // Академия Selectel URL: https://selectel.ru/blog/http-request/ (дата обращения: 18.05.2023)
Композиция в веб-дизайне: как применять правила на практике // vc URL: https://vc.ru/design/402778-kompoziciya-v-veb-dizayne-kak-primenyat-pravila-na-praktike (дата обращения: 06.05.2023)
What is OOP // Microsoft URL: https://learn.microsoft.com/ru-ru/training/modules/python-object-oriented-programming/2-what-is-oop (дата обращения: 08.05.2023)
Qt Core C++ Classes // Qt Documentation URL: https://doc.qt.io/qt-6/qtcore-module.html (дата обращения: 08.05.2023)
ПРИЛОЖЕНИЕ А