Развитие графических интерфейсов пользователя

Графический интерфейс пользователя с применением микроконтроллеров Microchip

Графический интерфейс пользователя (Graphical User Interface, GUI) это система средств для взаимодействия пользователя с устройством, основанная на представлении всех доступных пользователю системных объектов и функций в виде графических компонентов экрана (окон, кнопок, полос прокрутки и т. п.). При работе с GUI пользователь имеет произвольный доступ (с помощью клавиатуры или устройств координатного ввода, например, touch-screen) ко всем видимым экранным объектам. Впервые графический интерфейс пользователя был реализован в операционных системах персональных компьютеров, но сейчас элементы GUI стали неотъемлемой частью даже простых бытовых и медицинских приборов, сотовых телефонов, устройств промышленной автоматики и многих других. Поскольку графический интерфейс становится все более и более востребованным, то становится очевидным желание разработчиков интегрировать элементы GUI в свои устройства. Естественно, что разработчики заинтересованы в снижении стоимости готового устройства, но для многих практическая реализация сложного графического интерфейса пользователя становится затруднительной задачей, так как требует много усилий и времени для создания собственной библиотеки или покупки готовых программных продуктов сторонних фирм.

Компания Microchip, ведущий производитель микроконтроллеров, известна своими решениями позволяющими снизить затраты как на разработку, так и общую стоимость изделия благодаря комплексному подходу к реализации проекта. Бесплатная графическая библиотека Microchip позволяет легко реализовать графический интерфейс пользователя с использованием 16-и разрядных микроконтроллеров PIC24 и цветных QVGA дисплеев.

Программный интерфейс приложения (API) графической библиотеки Microchip

Бесплатная графическая библиотека Microchip может обслуживать как монохромные индикаторы, так и многоцветные CSTN/TFT (16, 256 и 65тыс. цветов) дисплеи, имеющие параллельный или последовательный (I2C или SPI) интерфейс связи с микроконтроллером. Применение индикатора с контроллером и графической памятью позволяет минимизировать требования по памяти, быстродействию и числу выводов управляющего микроконтроллера, поэтому, графическим цветным TFT-модулем может управлять даже дешевый, например, 28-выводный контроллер PIC24FJ32GA002 с 32КБ Flash памятью программ и 4КБ ОЗУ.
Библиотека разделена на три уровня: графические объекты (Graphics Objects Layer – GOL), графические примитивы (Graphics Primitive Layer) и драйвера устройств (Device Driver Layer). Уровень графических объектов содержит средства создания и управления сложными графическими объектами, которые, в свою очередь, создаются с помощью платформонезависимых графических примитивов, таких как линия, прямоугольник, окружность и т.п. Драйвера устройств специфичны для конкретного дисплея и предоставляют основные функции для более высоких уровней библиотеки.

Архитектура графической библиотеки Microchip приведена на рисунке 1.

1. Application Layer – пользовательская программа, которая использует графическую библиотеку.
2. User Message Interface – этот уровень должен быть создан пользователем для предоставления сообщений библиотеке. Графическая библиотека поддерживает передачу сообщений с помощью клавиатуры или touch-панели индикатора.
3. Graphics Object Layer – этот уровень отрисовывает такие элементы управления как кнопки, слайдеры, окна и т.д.
4. Graphics Primitives Layer – этот уровень реализует простейшие графические объекты (линии, прямоугольники, окружности и т.п.).
5. Device Display Driver – этот уровень управляет индикатором и зависит от типа применяемого дисплея.
6. Graphics Display Module – графический дисплей

Рис. 1. Архитектура графической библиотеки

Реализация графической библиотеки предоставляет две конфигурации – блокирующую и не блокирующую (Blocking и Non-Blocking). Для блокирующей конфигурации функции вывода графических объектов задерживают выполнение программы, пока графический объект не будет выведен полностью. Для не блокирующей конфигурации функции вывода графических объектов не ждут выполнения отрисовки и передают управление пользовательской программе. Различные конфигурации позволяют включать графическую библиотеку в программы на основе операционных систем реального времени (RTOS) и более эффективно использовать ресурсы микроконтроллера.

Уровень драйверов устройства

Каждый тип дисплея имеет свои характеристики (интерфейс связи, графический контроллер). Для связи библиотеки с дисплеем определен набор функций – драйвер дисплея. Текущая версия графической библиотеки (версия 1.0 на момент написания статьи) поддерживает несколько типов графических контроллеров Samsung S6D0129/S6D0139, Renesas R61505U, Solomon Systech SSD1339, LG LGDP4531 и Densitron HIT1270, однако возможна поддержка и других контроллеров, для этого из всей библиотеки нужно модифицировать лишь функции драйверов устройств. Доступность библиотеки в исходных кодах позволяет осуществить поддержку дисплеев с различными графическими контроллерами.
Программный интерфейс приложения уровня драйверов дисплея используется для сброса дисплея, определения размеров экрана, выделения области, установки текущего цвета и реализации аппаратно-зависимых функций для работы с дисплеем (см. табл. 1.).

Таблица 1. Функции драйвера устройств

Имя функции

Описание

Инициализация дисплея.

Возвращает размер экрана по оси х

Возвращает размер экрана по оси y

Устанавливает текущий цвет отображения

Возвращает текущий цвет отображения

Устанавливает текущую графическую страницу

Устанавливает текущую отображаемую графическую страницу

Модификация пикселя экрана

Возвращает цвет пикселя

Прорисовка изображения на экране

Задает текущие границы региона

Возвращает левую, верхнюю, правую и нижнюю границу региона

Разрешает или запрещает границы региона

Проверяет, если контроллер дисплея занят выполнением предыдущей операции

Установка регистров цветовой гаммы контроллера

Графические примитивы

Уровень графических примитивов содержит базовые графические функции и «общается» с индикатором посредством драйверов устройств, поэтому функции графических примитивов становятся независимыми от типа применяемого дисплея. Функции создания графических примитивов могут быть реализованы в уровне драйверов устройства, если применяемый дисплей имеет графический ускоритель.

Таблица 2. Функции уровня графических примитивов

Имя функции

Описание

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

Очистка экрана, установка курсора в позицию 0,0.

Возвращает положение курсора по координате х.

Возвращает положение курсора по координате y.

Устанавливает курсор в новое положение x, y.

Устанавливает курсор в новое положение относительно текущих координат dX и dY могут быть положительными или отрицательными.

Выводит символ по текущим координатам.

Выводит строку символов по текущим координатам. Строка должна заканчиваться нулем.

Выводит строку символов по координатам x и y. Строка должна заканчиваться нулем.

Возвращает высоту символа. Для выбранного шрифта изображение всех символов имеет одинаковую высоту.

Возвращает длину строки символов для выбранного шрифта.

Устанавливает текущий шрифт для функций OutChar(), OutText() и OutTextXY().

Устанавливает тип линии.

Рисует линию установленного типа от точки x1, y1 в x2, y2.

Рисует линию установленного типа от текущей точки в заданную по смещению.

Рисует линию установленного типа от текущей точки в заданную.

Рисует окружность с заданным центром и радиусом.

Рисует закрашенную окружность с заданным центром и радиусом.

Рисует полигон, установленным типом линии, используя заданное число узловых точек.

Рисует прямоугольник по координатам верхний левый угол, нижний правый угол.

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

Возвращает ширину картинки.

Возвращает высоту картинки.

Графические объекты (Graphics Objects Layer – GOL)

С точки зрения реализации графического интереса, наибольший интерес представляют графические объекты. Графическая библиотека Microchip, реализует 3D графические объекты, такие как кнопки, слайдеры, и др. (см. табл. 3).

Таблица 3. Графические объекты, реализованные в библиотеке Microchip версии v1.0

Имя функции

Вид объекта

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

Графическая библиотека Microchip поддерживает работу с пользовательскими шрифтами в 8-и разрядной кодировке (ASCII), т.е. поддерживает любые языки, в которых меньше 129 символов. Шрифты могут храниться как массивы в памяти программ в секции const, что ограничивает размер секции в 32Кб либо во внешней памяти. Графическая библиотека использует представление символов шрифта как отдельные изображения. Высота каждого символа в одном шрифте одинакова, варьируется только его ширина. Таким образом, размер символа «1» меньше чем символа «Щ». Задание первого и последнего символа используемого шрифта позволяет уменьшить размер памяти, требуемого для хранения знакогенератора. Например, если будут использоваться только заглавные английские буквы, то оригинальная ASCII таблица может быть уменьшена (см.табл. 4).

Таблица 4. Пример уменьшенной таблицы шрифтов

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

Графической библиотекой могут быть использованы все шрифты Windows. Вместе с библиотекой Microchip предлагается программа, которая позволяет конвертировать растровые шрифты (файлы с расширением *.fnt) и true-type шрифты (файлы с расширением *.ttf или *.oft) в массивы данных для использования совместно с библиотекой (см. рис.2.).

Рис. 2. Утилита для преобразования шрифтов и графических файлов в С-массивы данных

Как правило, шрифты защищены авторскими правами, поэтому необходимо убедиться, что вы имеете право использовать тот или иной шрифт. Существуют бесплатные, свободно распространяемые шрифты, часть из которых можно найти по ссылке http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&item_id=OFL_fonts
Для получения лучшего результата отображения шрифтов на выбранном дисплее, возможно, понадобится редактирование изображения шрифтов или создание собственного шрифта. Для этого может использовать, например, бесплатный редактор растровых шрифтов Fony (рис. 3., доступный по ссылке http://hukka.furtopia.org).

Рис. 3. Редактор шрифтов Fony

Графическая библиотека так же поддерживает вывод пользовательских изображений. Изображения хранятся в памяти с расположением точек слева направо и сверху вниз. Цветовая палитра задается таким образом, что цвету с кодом 0 соответствует первая строка в таблице палитры и цвету с кодом 255 (если такой существует), соответствует 256-я строка палитры. Для изображений с более чем 256 цветами, палитра цветов не требуется.

Таблица 5. Поддерживаемые форматы изображений

Кодировка

Тип изображения

Описание

черно-белое

Каждый байт содержит 8 пикселей (точек), старшему биту соответствует левый пиксель. Цветовая палитра содержит 2 значения.

16-и цветные изображения

Каждый байт хранит 2 пикселя. Правой тетраде соответствует левый пиксель. Цветовая палитра содержит 16 значений.

256-и цветные изображения

Каждый байт хранит 1 пиксель. Цветовая палитра содержит 256 значений.

Каждые 2 байта (16 бит) хранит один пиксель. Цветовая палитра не требуется. Цвета кодируются в формате 5-6-5:

Bits = Красный (RED)

Bits = Зеленый (GREEN)

Bits = Синий (BLUE)

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

Библиотека поддерживает масштабирование изображений, и пользователь может изменить размер выводимого на экран изображения (рис. 4.).

Рис. 4. Масштабирование изображений

Взаимодействие объектов графической библиотеки

Состояния объектов

Графические объекты могут иметь два типа статуса: статус состояния и статус отображения. Статус состояния определяет действия над объектом и его вид. Статус отображения показывает, что объект требует частичной или полной перерисовки, или должен быть спрятан. Некоторые общие статусы объектов приведены в табл. 6 и проиллюстрированы на рис. 5. Разные типы графических объектов имеет свои статусы, о которых можно узнать в документации на API графической библиотеки.

Таблица 6. Состояния графических объектов

Описание

Статус состояния

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

Статус состояния

Объект в неактивном состоянии и игнорирует все сообщения.

Статус отображения

Выделенное состояние объекта должно быть перерисовано.

Статус отображения

Объект должен быть перерисован полностью.

Статус отображения

Объект должен быть спрятан путем закраски объекта цветом фона. Наивысший приоритет. Если объект имеет состояние OBJ_HIDE, то другие статусы объекта игнорируются.

Рис. 5. Демонстрация состояний объектов. Кнопка «Disabled» имеет статус OBJ_DISABLED, кнопка «Focused» – OBJ_FOCUSED

Поясним на примере, как изменяются статусы объектов при работе библиотеки совместно с индикатором с сенсорной панелью. Если (см. рис.5) происходит касание сенсорного экрана на одной из кнопок, то эта кнопка получает статус состояния BTN_FOCUSED, BTN_PRESSED (признак того, что кнопка имеет нажатое состояние) и статус отображения BTN_DRAW_FOCUS. Полученные статусы сообщают библиотеке о том, что фокус перемещается на выбранную кнопку, эта кнопка нажата и должна быть перерисована в новом виде. После того как кнопка будет перерисована, ее статус отображения сбросится и изображение кнопки останется в неизменном состоянии до тех пор, пока не будут произведены другие действия и не будет изменен ее статус отображения. Если используется клавиатурный ввод то, как правило, одной из механических кнопок перемещается фокус между графическими объектами на экране дисплея (та или иная графическая кнопка получает статус BTN_FOCUSED и BTN_DRAW_FOCUS), а другой «фиксируется» нажатие выбранной графической кнопки, которая дополнительно получает статус BTN_PRESSED. Если какая либо из кнопок имеет состояние BTN_DISABLED, то эта кнопка игнорирует все сообщения до тех пор, пока пользовательская программа не отменит этот статус.

Цветовые схемы

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

Таблица 7. Параметры цветовой схемы

Параметр

Описание

Темный цвет боковой грани 3D объекта

Светлый цвет боковой грани 3D объекта

Цвет текста, используемый для подписи объекта.

TextColorDisabled

Цвет текста, используемый для подписи объекта в состоянии «disable».

Цвет объекта.

Цвет объекта в состоянии «disable».

Цвет фона. Обычно используется для скрытия объекта на экране.

Указатель на шрифт, используемый в объекте.

На рисунке 6 изображена цветовая схема графического объекта «кнопка» (button).

Рис. 6. Цветовая схема графического объекта «Button»

Список активных объектов

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

Отображение графических объектов

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

Механизм передачи сообщений

Переносимость и мобильность является одной из ключевых особенностей графической библиотеки Microchip. Библиотека поддерживает ввод данных от различных устройств ввода, каких как сенсорный экран (touch screen), клавиатура, мышь и т.п. Любое устройство ввода может послать сообщение графическому объекту. Сообщения имеет следующую структуру:

typedef struct {
BYTE type;
BYTE event;
int param1;
int param2;
} GOL_MSG;

Поле type определяет идентификатор устройства ввода. Поле event определяет тип действия. Поля type и event будут определять как параметры param1 и param2 будут интерпретироваться графической библиотекой. Для некоторых случаев используется только параметр param1. Например, при использовании индикатора с сенсорным экраном поля структуры GOL_MSG будет иметь поля, определенные в таблице 8.

Таблица 8. Определение сообщений сенсорного экрана

Определение

Описание

TYPE_TOUCHSCREEN

В качестве устройства ввода используется сенсорный экран

Может принимать несколько значений

Перемещение

Произошло нажатие

Произошло отпускание

x-координата точки касания

y-координата точки касания

После определения нажатия на сенсорный экран, пользовательская программа должна заполнить структуру сообщения и передать ее в библиотеку функцией GOLMsg(GOL_MSG* pMsg). Графический объект, который содержит координату x и y изменит свой статус, основываясь на своем текущем состоянии и переданном событии.

Практическая реализация графического интерфейса пользователя

Графическая библиотека Microchip написана для работы с 16-и разрядными микроконтроллерами PIC24F и 32-х разрядными PIC32, которые имеют интегрированный параллельный мастер-порт (Parallel Master Port – PMP). Наличие параллельного мастер порта (PMP) в микроконтроллерах Microchip позволяет осуществить быстрый обмен данными между микроконтроллером и дисплеем. Большой объем памяти микроконтроллеров (до 512Кб) и широкий набор периферии (по 2 USART, SPI, I2C, часы реального времени, модуль вычисления CRC), делает контроллеры PIC24F и PIC32MX идеальными для широкого класса приложений.

В состав библиотеки входят подробные примеры использования графической библиотеки с PIC контроллерами Microchip. При задействовании всех функций библиотеки требуется примерно 24Кб программной памяти. Каждый объект динамически выделяет от 2 до 24 Байт ОЗУ, таким образом, графическим цветным TFT-индикатором может управлять даже дешевый, 28-и выводный контроллер PIC24FJ32GA002 с 32КБ Flash памятью программ и 4КБ ОЗУ. При необходимости, пользовательские шрифты и картинки могут храниться во внешней энергонезависимой памяти.

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

Рассмотрим пример применения графической библиотеки Microchip. На рис. 7 представлен простой алгоритм программы.

Рис. 7. Алгоритм программы

Для начала использования библиотеки программисту требуется создать небольшой код. Во-первых, в программе должны быть подключены модули библиотеки и драйвер дисплея. Далее нужно выполнить инициализацию дисплея, вызвав функцию InitGraph(), в которой производится сброс дисплея, установка курсора в начало координат (положение 0, 0). Затем вызывается функция GOLCreateScheme(), с помощью которой задается текущая цветовая схема для используемых графических объектов. Если не предусматривается изменений в используемой цветовой схеме, то можно вместо вызовов функций InitGraph() и GOLCreateScheme() применить вызов только функции GOL_Init(). Если создается новая цветовая схема, то нужно вставить примерно такой код:

GOL_SCHEME* altScheme; // объявляем альтернативную цветовую схему
altScheme = GOLCreateScheme(); // создаем альтернативную цветовую схему
altScheme->TextColor0 = BLACK; // устанавливаем цвет для color 0
altScheme->TextColor1 = BRIGHTBLUE; // устанавливаем цвет для color 1

Следующий шаг это создание графических объектов. Функции ObjCreate(,) предоставляют возможность создания различных графических объектов. Это может быть одиночный вызов функции BtnCreate(,) который создаст объект «Button» или вызов нескольких функций для создания нескольких объектов. Для примера создадим три графических объекта (две кнопки и один слайдер, см. рис 8.):

BtnCreate(ID_BTN1, // Идентификатор кнопки 1
20, 160, 150, 210, // Размер и положение кнопки
0, // радиус скругления углов
BTN_DRAW, // установить статус объекта:
// отрисовать кнопку
NULL, // не использовать картинку в качестве изображения
"LEFT", // написать на кнопке этот текст

BtnCreate(ID_BTN2, // Идентификатор кнопки 2
170, 160, 300, 210,
0, //
BTN_DRAW,
NULL,
"RIGHT",
NULL);
SldCreate(ID_SLD1, // Идентификатор слайдера
20, 105, 300, 150, // Размер и положение слайдера
SLD_DRAW, // установить статус объекта:
// отрисовать слайдер
100, // диапазон значений
5, // приращение значения
30, // установить ползунок в это значение
NULL); // использовать цветовую схему по умолчанию

Все эти вызовы функций отображены на рис. 7 как ObjCreate(), где Obj заменяется на Btn для кнопок и на Sld для слайдера. Каждый объект библиотеки имеет свою функцию ObjCreate(), которые возвращают указатель на новый созданный объект. Если объект успешно создан, то он автоматически добавляется в активный список объектов.

Рис. 8. Графические объекты созданные в примере программы

После того как графические объекты созданы, их нужно прорисовать на экране, для этого служит функция GOLDraw(). Эта функция анализирует состояние объектов. Если объект требует отрисовки, то этот объект будет перерисован. В приведенном примере задано состояние кнопок BTN_DRAW, а слайдера SLD_DRAW, т.е. данные объекты требуют прорисовки. После вызова функции GOLDraw() объекты будут отображены на дисплее, а запрос на прорисовку объектов будет сброшен. Состояние объекта может быть изменено программно или с помощью запросов от устройств ввода, таких как клавиатура, сенсорный экран и т.п. Для данного примера используем индикатор с сенсорным экраном.

Сенсорный экран заполняет структуру сообщений, если произошло касание экрана (рис. 7, шаг 5). Это сообщение будет обработано библиотекой при вызове функции GOLMsg(), в которой происходит анализ того, какой из объектов создал сообщение. Состояние объекта будет изменено в соответствии с сообщением и при следующем вызове функции GOLDraw() этот объект будет перерисован на экране. Кнопка будет отображена нажатой при касании экрана в ее области, а движок слайдера будет перемещен при «перетаскивании» его по экрану (см. рис.9).

Рис. 9. Изменение состояния кнопки при касании сенсорного экрана

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

WORD GOLMsgCallback(WORD objMsg, OBJ_HEADER* pObj, GOL_MSG* pMsg){
WORD objectID;
SLIDER *pSldObj;
// получение идентификатора объекта, который создал сообщение
objectID = GetObjID(pObj);
if (objectID == ID_BTN1) { // проверяем что сообщение от 1-й кнопки
// и кнопка нажата



// уменьшение значения положения движка слайдера
SldDecPos(pSldObj);


}
}
if (objectID == ID_BTN2) { // проверяем что сообщение от 2-й кнопки
// и кнопка нажата
if (objMsg == BTN_MSG_PRESSED) {
// устанавливаем указатель на слайдер с именем ID_SLD1
pSldObj = (SLIDER*)GOLFindObject(ID_SLD1);
// увеличение значения положения движка слайдера
SldIncPos(pSldObj);
// установить перерисовку движка слайдера
SetState(pSldObj, SLD_DRAW_THUMB);
}
}
// мы должны возвратить 1 для обновления кнопок (эффекты нажатия и отпускания)
return 1;
}

Приведенный код изменяет положение движка слайдера при касании сенсорного экрана в области одной из графических кнопок. Кнопка LEFT сдвигает движок влево, кнопка RIGHT – вправо. Функция GOLMsgCallback() должна возвращать 1 для разрешения действий графических объектов, присущих им по умолчанию, т.е. кнопки будут прорисовываться в нажатом или нормальном состоянии, а движок слайдера будет иметь возможность передвигаться с помощью сенсорного экрана.

Как видим, нам потребовалось написать минимум кода для создания трех графических объектов и осуществления взаимодействия между ними с помощью сенсорного экрана дисплея.
Графическая библиотека Microchip предоставляет широкое поле деятельности для разработчика и позволяет осуществлять различные действия с целыми графическими объектами или с дисплеем на уровне драйверов. Так, например, иллюстрации отображаемых графических объектов в этой статье получены путем получения цвета отдельных пикселей, формирования bmp-файла и передачи копии экрана дисплея через COM-порт в компьютер.

Для начала работы с графической библиотекой, компания Microchip предлагает дочернюю плату Graphics PICtail™ Plus (номер для заказа AC164127). Плата Graphics PICtail™ Plus это демонстрационная плата для изучения графической библиотеки и для освоения работы с цветными ЖКИ дисплеями. Плата содержит графический (65К цветов) QVGA модуль с разрешением 320x240 точек и с резистивной touch-панелью. Модуль поддерживает портретную и ландшафтную ориентацию, содержит встроенную 4 Мбит Flash память для возможности хранения графических элементов, звуковой излучатель и разъем для подключения к плате Explorer 16. Дочерняя плата подключается к демонстрационной плате Explorer 16.
Демонстрационная плата Explorer 16 (номер для заказа DM240001) это дешевое средство отладки для ознакомления и начала работы с высокопроизводительными семействами 16-и разрядных микроконтроллеров Microchip PIC24 и контроллерами цифровой обработки сигналов dsPIC33F. Плата имеет возможность работы с внутрисхемным отладчиком ICD-2 и внутрисхемным эмулятором REAL-ICE для быстрой отладки приложений. Комплект содержит 2 дочерние платы с контроллерами PIC24FJ128GA010 и dsPIC33FJ256GP710, возможно подключение процессорных модулей с 32-х разрядным контроллером PIC32. К плате предусмотрено подключение дополнительных интерфейсных модулей расширения, таких как модули IrDA, Ethernet интерфейсов, SD и MMC карт памяти, плат для работы со звуком, и, конечно же, плату с графическим индикатором.

К бесплатному графическому интерфейсу пользователя (Graphical User Interface, GUI) Microchip, добавлены драйвера устройств (Device Driver Layer) для работы с TFT-дисплеями фирмы Ampire, с LCD- и Touch-контроллерами «на борту».

Для демонстрации возможностей графической библиотеки предлагается готовый проект на базе популярной платы Explorer 16 с микроконтроллером PIC24FJ128GA010. Включена поддержка модулей:

AM320240NTMQW-TW0H(R). Разрешение 320х240, диагональ 5.7”;

AM480272C2TMQW-TW0H. Разрешение 480х272, диагональ 4.3”;

AM320240L8TNQW-TB4H. Разрешение 320х240, диагональ 3,5”.

Схема соединений микроконтроллера с LCD-модулем приведена в таблице:

Драйвер включает 2 составные части: графическая (Ampire.c и Ampire.h) и сенсорного управления (TouchScreen.c и TouchScreen.h). Для выбора индикатора (AM320240NTMQW-TW0H(R), AM320240L8TNQW-TB4H или AM480272C2TMQW-TW0H) необходимо в файле Ampire.h раскомментировать нужную строку (#define R320X240, #define R320X240L8 или #define R480X272).

Перечень доступных TFT LCD-модулей Ampire, с интегрированными LCD- и Touch-контроллерами, приведен в таблице:

320240N6TNQW-TW0H

480272C3TMQW-TW0H

AM320240L8TNQWB3H

Тип экрана

Диагональ экрана

Разрешение

Интерфейс

Габаритный размер

Число цветов

Контрастность

Тем. Диапазон(раб.)

20˚C ….+70˚C

20˚C ….+70˚C

20˚C ….+70˚C

Touch panel controller

Подсветка

Драйверы для ЖКИ Ampire - GUIampire.rar

Демонстрационный проект для ЖКИ Ampire - gui13amp.rar

Для ознакомления и скорейшего освоения управления ЖКИ Ampire на базе графической библиотеки Microchip предлагается готовый набор: ЖКИ Ampire, отладочная плата Explorer 16 (с 16-и или 32-битным микроконтроллером PIC) и плата-переходник (опционально с DC/DC преобразователем ASA01F18-L или ASA01A18-L для формирования нужных напряжений питания ЖКИ). На плате также имеется "макетка", обеспечивающая доступ непосредственно ко всем выводам микроконтроллера.

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

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

Работа пользователя осуществляется с экранными формами, содержащими объекты управления, панели инструментов с пиктограммами режимов и команд обработки.

Стандартный графический интерфейс пользователя должен отвечать ряду требований:

    поддерживать информационную технологию работы пользователя с программным продуктом;

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

    удовлетворять принципу «шести», когда в одну линейку меню включают не более 6 понятий, каждое из которых содержит не более 6 опций;

    графические объекты сохраняют свое стандартизованное назначение и по возможно­сти местоположение на экране.

Рассмотрим некоторые приемы по разработке графического пользовательского интер­фейса .

Панель приложения обычно разделяют на три части:

    меню действий;

    тело панели;

    область функциональных клавиш.

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

Тело панели содержит элементы:

    разделители областей;

    идентификатор и заголовок панели;

    инструкцию;

    заголовки столбца, группы, поля;

    указатель протяжки;

    области сообщений и команд;

    поля ввода и выбора.

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

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

Разбивка панели на области основана на принципе «объект - действие».

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

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

В первичном окне начинается диалог, и если в приложении не нужно создавать другие окна, окном считается весь экран.

Первичное окно может содержать столько панелей, сколько нужно для ведения диало­га.

Вторичные же окна вызываются из первичных. В них пользователь ведет диалог парал­лельно с первичным окном. Часто вторичные окна используются для подсказки.

Первичные и вторичные окна имеют заголовок в верхней части окна.

Пользователь может переключаться из первичного окна во вторичное и наоборот.

Существует также понятие «всплывающие окна», которые позволяют улучшить диалог пользователя с приложением, ведущийся из первичного или вторичного окна.

Рассмотрим кратко принципы проектирования диалогов . Когда пользователь и ЭВМ обмениваются сообщениями, диалог движется по одному из путей приложения, т.е. пользователь перемещается по приложению, выполняя конкретные действия.

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

Он может быть изображен в виде графа, где узлы - действия, дуги - переходы.

Диалог состоит из двух частей: запросов на обработку информации и навигации по приложению.

Часть запросов на обработку и навигацию является унифицированной.

Унифицированные действия диалога - это действия, имеющие одинаковый смысл во всех приложениях.

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

К унифицированным действиям диалога относятся:

  • «команда»;

  • «подсказка»;

    «регенерация»;

    «извлечение»;

    «идентификаторы»;

    «клавиши»;

    «справка».

При оценивании информационных технологий в качестве критериев используют также оценки пользовательского интерфейса. Так, в качестве показателя рассматривают эффектив­ность как критерий функциональности интерфейса, а соответствие пользовательским требо­ваниям - критерий эргономичности.

20.09.16 7.1K

Интерфейс пользователя (user interface или сокращенно UI ) – это интерфейс, с помощью которого человек может управлять программным обеспечением или аппаратным оснащением. UI должны быть удобными в использовании, чтобы взаимодействие с ними происходило на максимально интуитивном уровне. Интерфейсы программного обеспечения также называют графическими пользовательскими интерфейсами (graphical user interface или GUI ).

Этапы развития и типы пользовательских интерфейсов

В отличие от современных реалий, первые компьютеры были слишком слабыми для графических пользовательских интерфейсов. Поэтому, в самом начале люди могли пользоваться только командной строкой (CLI или command line interface ), в которой команды задавались с помощью запросов. Позже это переросло в TUI – интерфейсы, которые сегодня используются в процессе инсталляции операционных систем. Доступность компьютеров привела необходимости разработки удобного пользовательского интерфейса.

Графический интерфейс пользователя – тип интерфейсов, который прочно закрепился наряду с постоянно увеличивающейся производительностью ПК. В ближайшем будущем могут появиться пользовательские аудио-интерфейсы (VUI или voice user interface ), которые позволят людям взаимодействовать с компьютером с помощью речи.

В различных компьютерных играх применяется натуральный пользовательский интерфейс (NUI или natural user interface ). Его система анализирует движения человека, и преобразует их в движения в игре. На данный момент в стадии разработки находится перцептивный пользовательский интерфейс (PUI ), а также интерфейс мозг-компьютер (BCI или brain-computer interface ). Последняя разработка направлена на то, чтобы обеспечить людям возможность управлять компьютерами силой мысли.

Интерфейс командной строки (Command Line Interface или CLI)

Среди областей применения интерфейса командной строки можно выделить DOS-компьютеры . Взаимодействие происходит с помощью ввода команд. Компьютер обрабатывает эти команды и выводит на экран очередную строку. Данный тип UI давно устарел. Большинство CLI заменены графическими интерфейсами.

Текстовый интерфейс пользователя (Text User Interface или TUI)

Этот тип интерфейса пользователя предназначен для работы с символами. Исполнение происходит в режиме аппаратного текста, однако часто используется и дисплей. В данном случае на каждый источник у программиста имеется 256 символов. Навигация производится клавиатурой, а не мышью. В качестве примера можно привести Norton Commander или Turbo Pascal . Этот интерфейс также используется в загрузчиках ОС и BIOS-программах . Данный тип интерфейса также используется для установки операционных систем.

Графический пользовательский интерфейс (Graphical User Interface или GUI)

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

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

Реальный мир как модель

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

Даже при использовании современных изображений и иконок дизайнеры стараются хотя бы минимально отразить их предназначение. Это позволяет облегчить интуитивное взаимодействие с интерфейсом. Цель GUI заключается в том, что люди могли легко определить предназначение каждой кнопки. Благодаря этому нам не приходится запоминать все команды, как это было в случае с командной строкой.

Инструкции и правила

При разработке GUI применяются определенные своды правил, которые помогают сделать программы удобнее в использовании. В качестве примера можно привести 8 золотых правил от Бена Шнайдермана . Ниже приведем несколько сносок из этих правил:

  • Согласованность: взаимодействие должно происходить всегда похожим образом. То есть, следует избегать использования панелей управления с опциями типа “скопировать выделенную область ”, “удалить выделенную область ”, “добавить выделенную область ”. Данный пример показывает отсутствие согласованности в GUI , чего следует избегать;
  • Информативная обратная связь: все действия, производимые пользователем, должны быть подкреплены обратной связью. Например, если двойной клик открывает программу, то человеку приходится подождать пару секунд, прежде чем он сможет пользоваться этой программой. Чтобы пользователь знал, что его действия принесли результат, нужно проинформировать его об этом. Это можно реализовать сменой курсора. Один из старейших и привычных примеров – это курсор с песочными часами в Windows ;
  • Не перегружайте память пользователей: пользователи не в силах запомнить все и сразу. В длинных сегментах взаимодействия, где пользователь вынужден переходить по нескольким окнам, информация всегда должна отображаться в одной и той же области. Менее востребованная информация, которая отображалась в самом начале, должна быть скрыта.

Пользовательский аудио-интерфейс (VUI или voice user interface)

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

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

Среди примеров можно отметить голосового помощника Apple , Siri , S-Voice у Samsung или голосовой поиск Google . Одна из главных задач при проектировании этого интерфейса пользователя (аудио-интерфейсов ) заключается в том, чтобы предоставить аудитории комфортные условия для взаимодействия. То есть, при использовании голосовых синтезаторов в техподдержке, важно не обременять клиентов длинными сообщениями.

Тактильные интерфейсы пользователя (TUI или tangible user interface)

В них взаимодействие происходит за счет применения мячей или других физических объектов. Сегодня данный тип интерфейсов редко используется в повседневной жизни. Если рабочий компьютер постоянно стоит на одном столе, применение тактильных интерфейсов приобретает новый смысл, однако чаще всего они просто неприменимы в повседневной жизни. Музеи и выставки – отличный пример сферы применения TUI .

Физическое взаимодействие запоминается лучше любого другого. Кроме этого тактильные интерфейсы дают простор реализации объектов: форма, фактура, цвет. От песочницы с деревянными кубиками до увеличительного стекла для изображений – возможно практически все.

Натуральный пользовательский интерфейс (NUI или natural user interface)

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

Данный тип интерфейса пользователя также можно комбинировать с VUI . Благодаря прямому отклику устройства взаимодействие происходит естественней, нежели при вводе мышью или клавиатуры. Кроме сенсорных устройств NUI также можно использовать в игровых приставках.

К примеру, Nintendo Wii позволяет воспроизводить действия на экране за счет перемещения контроллера рукой. Среди других примеров – дополнение Kinect к Xbox , которое позволяет управлять игровым персонажем на экране движениями собственного тела. Что делает взаимодействие более натуральным.

Перцептивный пользовательский интерфейс (PUI или perceptual user interface)

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

Интерфейс мозг-компьютер (BCI и brain-computer interface)

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

Ценность оптимизации под поисковые системы

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

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

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

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

Данная публикация представляет собой перевод статьи «User Interface » , подготовленной дружной командой проекта

Хорошо Плохо

ГРАФИЧЕСКИЙ ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС

Графический пользовательский интерфейс предназначен для создания пользователю комфортных условий при работе с операционной системой Windows NT. Интерфейс Windows NT интуитивно понятный, простой и удобный. Он удобен при запуске программ, открытии и сохранении файлов, работе с файлами, дисками и сетевыми серверами. Графический многооконный пользовательский интерфейс GUI (Graphics User Interface ) в Windows NT основан на реализации объектно-ориентированного подхода, при котором работа пользователя ориентирована в первую очередь на документы, а не на программы. Загрузку любого имеющегося документа можно осуществить путем открытия файла, содержащего этот документ, одновременно автоматически загрузится программа, с помощью которой открываемый файл был создан.

Пользовательский интерфейс Windows NT включает следующие элементы: Рабочий стол, Панель задач, Стартовое меню, Контекстное меню, Систему меню приложений, ярлыки: Мой компьютер, Сетевое окружение, Корзина, Проводник Интернета, Входящие, Портфель, Окно, Шрифты, Справочная система Windows NT .

В пользовательском интерфейсе Windows NT заложена концепция ярлыков. Ярлыки ( Shortcuts ) представляют собой маленькие (менее 1 Кбайта) файлы с расширением Ink (от слова link - связь), связанные с соответствующими объектами. Они могут храниться в любой Папке, включая Рабочий стол. Ярлык - это указатель на объект. Это значит, что можно создавать и удалять ярлыки, и это не будет влиять на сами объекты.

Ярлыки обеспечивают быстрый доступ к таким объектам, как программы, папки, документы, устройства компьютера или сети. Для этого следует дважды щелкнуть на соответствующем ярлыке.

Ярлыки представляются в виде специального значка (пиктограммы). В отличие от системных ярлыков, в создаваемых пользователем ярлыках в левом нижнем углу располагается черная стрелка.

Внешний облик Windows NT, отображаемый на экране, представлен в виде Рабочего стола ( Desktop ), все элементы которого - ярлыки, изображающие программы, документы, устройства, - расположены в удобном для пользователя порядке.

Все элементы, расположенные на Рабочем столе Windows NT, являются объектами, обладающими определенными свойствами, и ими можно манипулировать.

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

Папка ( folder ) - место для хранения программ, документов и дополнительных папок. Папка в Windows NT представляет аналог каталога, директории в MS DOS.

Рабочий стол - это тоже папка, находящаяся на вершине иерархии папок Windows NT. Но эта папка не закрывается и не открывается, она всегда присутствует на экране.

В нижней части Рабочего стола расположена Панель задач ( Taskbar ) , являющаяся основным средством взаимодействия пользователя с системой.

Слева, на Панели задач, находится кнопка Пуск ( Start ), за которой следует панель быстрого запуска ( Quick Launch ), кнопки с именами открытых приложений, а справа расположен системный лоток ( System Tray ).

При нажатии кнопки Пуск открывается Стартовое меню, Main Menu (Главное меню, меню Пуск). Активизация кнопок с именами работающих приложений позволяет быстро переключаться в нужное приложение. При необходимости Панель задач можно переместить в другое место экрана или сделать её исчезающей, если щелкнуть кнопкой мыши на пустом месте Панели задач и, удерживая её в нажатом состоянии, перетащить на новое место.

Стартовое меню открывается в левой нижней части Рабочего стола непосредственно над кнопкой Пуск. Стартовое меню обеспечивает пользователю доступ почти ко всем функциям Windows NT: открытие документа, запуск приложения, быстрый поиск документов, находящихся на локальных и сетевых дисках (по имени, типу, размеру, дате, содержанию), выполнение настройки компьютера, получение справочной информации, завершение работы в Windows NT.

Стартовое меню состоит из нескольких пунктов:

Строка Завершение работы ( Shut Down ) позволит выключить компьютер или перезагрузиться.

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

Выключение Сохранение всех измененных параметров Windows, запись всех несохраненных данных из памяти на жесткий диск. Это подготовит компьютер к выключению.

Сохранение всех измененных параметров Windows, запись всех несохраненных данных из памяти на жесткий диск и перезапуск компьютера.

MS - DOS Сохранение всех измененных параметров Windows, запись всех несохраненных данных из памяти на жесткий диск и перезапуск компьютера в режиме MS-DOS.

Строка Завершение сеанса имя_пользовател позволит быстро завершить сеанс Windows для смены пользователя

Строка Выполнить ( Run ) позволяет однократно запускать программы.

Строка Справка ( Help ) главного меню, а также нажатие клавиши F1 позволяют обратиться к справочной системе.

Строка Поиск ( Find ) содержит инструменты, помогающие искать объекты в компьютере. Позволяет найти на диске файл по полному имени или его части, по размещению, по содержащейся в файле фразе или определенному слову, если имя файла неизвестно, а также файлы, созданные или измененные в конкретном диапазоне дат и определенного типа или размера. После завершения поиска можно сохранить результаты и/или условия поиска на рабочем столе.

С помощью меню Настройка ( Setting ) можно изменить характеристики системы по желанию пользователя.

Панель управления ( Control Panel ) позволяет выполнить общую настройку системы (Языки и стандарты, Экран, Шрифты, Установка оборудования, Установка и удаление программ, Управление электропитанием, Темы рабочего стола, Телефонные соединения, Система, Свойства обозревателя, Сеть, Принтеры, Почта, Пользователи, Поиск файлов, Пароли, Мышь, Мультимедиа, Модемы, Клавиатура, Игровые устройства, Звук, Дата и время).

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

Настройка панели задач или главного меню позволяет изменить нужные параметры на вкладках Параметры панели задач и Настройка меню.

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

Рабочий стол Active Desktop позволяет настраивать, а также включать и выключать интерфейс рабочего стола Active Desktop. Интерфейс рабочего стола Active Desktop позволяет размещать на рабочем столе «активное» содержимое Web-страниц. Можно расположить в подходящем месте постоянно меняющуюся строку новостей или использовать в качестве фонового рисунка какую-либо электронную газету. Можно превратить рабочий стол в «личный уголок», поместив на нем активные элементы: последние известия, сводки погоды, новости спорта, биржевые новости и т. д.

Windows update обновляет систему через Интернет.

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

Строка Избранное ( Favorites ) позволяет быстро перейти к нужной интернетовской странице, к любому файлу или папке.

Строка Программы ( Programs ) содержит сложное иерархическое подменю, состоящее из групп программ и самих программ. Предназначено для запуска приложений, проинсталлированных в системе. В ходе установки Windows создается также папка Программы, попавшие в меню автоматически запускаются при каждом запуске системы.

В ходе установки создается также папка Стандартные.

Справа от некоторых элементов стартового меню отображается черный треугольник, показывающий, что этот элемент тоже является меню (папкой). Каждая из помеченных треугольником папок имеет свое каскадное подменю, которое раскрывается сразу же при установке курсора указателя на соответствующем пункте. При необходимости можно добавлять или удалять пункты Стартового меню.

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

Системный лоток - прямоугольная область, отведенная для некоторых программ, которые запущены постоянно (их называют резидентными). Сюда же попадают значки программы которые по мере необходимости запускает система. Каждый из значков в лотке выдает о себе всплывающую подсказку.

Контекстное (контекстно-зависимое) меню вызывается щелчком правой кнопки мыши на значке файла, папки или пустом месте на Панели задач или на Рабочем столе.

Оно содержит некоторый список свойств, или набор команд (или то и другое), доступных в данный момент для работы с выбранным объектом. Список команд зависит от конкретного объекта. С помощью этого меню осуществляется быстрый доступ к свойствам объекта, нужным командам. Чтобы открыть контекстное меню, содержащее все доступные команды для файла или папки, выберите файл или папку, а затем щелкните объект правой кнопкой, удерживая клавишу SHIFT.

https://pandia.ru/text/79/101/images/image003_103.jpg" width="170" height="348">

Контекстные меню широко используются в Windows NT. Они доступны в любом месте интерфейса.

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

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

Сетевое окружение ( Network Neighborhood ) - папка, содержащая ярлыки всех компонентов рабочей группы или домена, а также ярлык Вся сеть, предоставляющий доступ к другим доменам и рабочим группам.

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

Корзина ( Recycle Bin ) - ограниченная область памяти на жестком диске компьютера, служит местом хранения удаленных файлов. Корзина запоминает имя, исходное местоположение, дату удаления, тип и размер всех удаленных файлов. Удаленные файлы могут быть восстановлены. Активизация Корзины вызывает открытие окна папки со списком последних удаленных файлов. При переполнении Корзины файлы, хранящиеся в ней дольше всех, удаляются безвозвратно.

Портфель ( My Briefcase ) - специальная папка для пользователей, работающих с настольными и портативными компьютерами, - область памяти, в которую помещены документы, с которыми осуществляется работа в разных местах: дома, на работе и т. д. Файлы, копируемые в Портфель и из него, автоматически обновляются на портативных компьютерах (т. е. последняя версия заменяет предыдущую).

Проводник Интернета ( Internet Explorer ) - Web -броузер от Internet - вызывает работу программы Проводник Интернета для просмотра всех доступных данных и отправки новых сообщений и вызывает её на экран.

Папка Мои документы ( My Documents ) содержит рабочие материалы: тексты, рисунки, таблицы и т. д.

В пользовательском интерфейсе Windows NT реализован принцип WYSIWYG ( What You See Is What You Get - что видишь, то и получаешь). Такая возможность появляется в связи с тем, что Windows NT встроена поддержка контурных шрифтов формата True Type, Не зависящих от типа принтера.

Интерфейс администратора сети не отличается от интерфейса пользователя. Графический интерфейс значительно облегчает работу администратора сети Windows NT. Так, информация о новых пользователях вводится администратором в графические формы, отображаемые на экране. Определение организационных групп и представление прав доступа осуществляются несколькими операциями с помощью технологии буксировки и освобождения ( Drag and Drop - перетащить и бросить). Изменение группы, в которую помещается учетная запись пользователя, и соответственно автоматическое изменение его прав осуществляются путем перетаскивания идентификатора пользователя из одной группы в другую и т. д.

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

Окно представляет собой прямоугольник, размер которого может изменяться пользователем. Окно может быть нормальным (2/3 экрана), полноэкранным, произвольным и свернутым, представленным в виде кнопки с подписью (в свернутом окне программа продолжает выполняться).

ДИАЛОГОВЫЕ ОКНА

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

DIV_ADBLOCK292">

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

Вкладка - отдельная страница диалогового окна. Диалоговое окно может содержать несколько вкладок. Вкладка состоит из корешка, на котором написано название вкладки, и страницы, на которой располагаются элементы управления. Чтобы выбрать определенную вкладку, достаточно щелкнуть на её корешке. Если название вкладки выбрано (обведено пунктирной рамкой), то для перехода к другим вкладкам можно использовать клавиши “←” и “→”.

DIV_ADBLOCK293">

Регулятор используется для установки параметров от минимального до максимального с помощью движка.

Группа элементов. Несколько элементов управления диалогового окна, тематически связанные между собой, могут быть объединены в группу и заключены в рамку, которая может быть снабжена подписью. Это делается исключительно для наглядности.

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

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

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

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

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

Большинство окон в WINDOWS - прикладные окна, в которых выполняются конкретные приложения. Распознать прикладное окно легко по двум отличительным признакам:

В заголовке указывается имя приложения, которому принадлежит это окно;

Под заголовком располагается управляющее меню.

ЭЛЕМЕНТЫ ПРИКЛАДНОГО ОКНА.

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

Заголовок окна, Title bar - это выделенный прямоугольник в верхней части окна, содержащий название окна, используется для перемещения окна по экрану. Если открыто несколько окон, то заголовок активного окна выделяется подсветкой. Название окна в зависимости от типа окна может представлять собой название: программы, документа, группы, директории, файла данных.

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

Свернуть, Minimize - свернуть окно в значок, который будет размещен в панели задач;

Развернуть, Maximize или Восстановить, Restore - развернуть окно на весь экран. Можно переключить окно из оконного в полноэкранный и наоборот и другим способом - двойной щелчок левой кнопкой мыши на заголовке окна;

Закрыть, Close - закрыть окно. Если это окно приложения, то при этом завершится его работа.

https://pandia.ru/text/79/101/images/image009_38.jpg" width="199" height="202">

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

Панель инструментов - включение/выключение инструментальной строки.

Панель обозревателя - подключение панелей поискав Интернет, списка избранных ссылок на Интернете - ресурсы, журнал посещений Web-узлов, каналов.

Строка состояния -содержит краткую информацию о выбранном объекте, в том числе о свободном месте на диске (если выбран диск). Возможно включение/выключение строки состояния (статуса).

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

Кнопка перемещения по страницам, Slider box . Эта кнопка используется для перемещения информации в окне на целую страницу.

Окно папки отражает содержимое папки. Оно напоминает окно небольшого приложения. Окно папки может быть просмотрено в одном из четырех режимов: Крупные значки, Мелкие значки, Списки, Таблица.

Здравствуйте уважаемые читатели моего блога, сегодня я хочу рассказать о графических интерфейсах пользователя в исторической ретроспективе на примере самой популярной OS Windows. Но для начала речь пойдет о графических пользовательских оболочках различных операционных систем, их еще называют gui или гуи , в менее профессиональной среде просто «окна» или «рабочий стол», так как большинство операционных систем оснащены оконным интерфейсом или имеют возможность его так или иначе установить и использовать. Однако, существуют системы и с текстовым оконным интерфейсом, вернее, с имитацией оконного интерфейса через псевдографику.

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

Оконный текстовый интерфейс во всей красе.

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

Тут стоит оговориться! В графическом интерфейсе пользователя тоже можно работать с помощью клавиатуры, через специальные комбинации клавиш, которые часто пересекаются в разных OS, будь то Windows, OS X или Linux. Можно даже сказать, что в GUI абсолютно всем можно управлять через клавиатуру, правда это не очень удобно, ведь оболочка создается с учетом наличия у вас манипулятора. Правда, в многообразном мире Linux существуют специальные графические оболочки с оконным интерфейсом но разработанные с учетом того, что из всех средств управления у вас есть только клавиатура.

Все равно до сих пор не утихают споры о том, что лучше — консоль или гуи? Особенно такие темы часто поднимаются в сообществе программистов. Многие специалисты считают пользовательский графический интерфейс — эволюцией компьютерных технологий, удобной средой для работы за компьютером, часто (но не обязательно) это приверженцы программных продуктов и технологий Microsoft. Сторонники исключительно консольного интерфейса из числа профессионалов рассматривают gui как отступление от истинного примера взаимодействия человека с компьютером, считают использование в работе графического интерфейса — лишь иллюзией удобства и указывают на наличие большого количества отличных консольных утилит, разработчики которых по разным причинам не стали писать графическую оболочку. Ссылаются на тяжеловесность многих гуишных программ и часто на не стабильную работу. Примером таких консольным программ могут являться , или известный всем веб-программистам .

Единственным объективным фактом в этом споре можно считать то, что умелое сочетание интерфейса командной строки с графическим предоставляет пользователю очень мощные возможности. От себя могу добавить, что работая в операционной системе установленной без gui, например в Linux, можно по-настоящему почувствовать машину, в то время как в операционных системах семейства Windows и OS X с предустановленным гуи меня не покидает чувство «игрушечности». А теперь обещанная ретроспектива.

Графический интерфейс пользователя MS Windows


Рабочий стол с запущенными приложениями в Windows 1.01


Рабочий стол с запущенными приложениями в Windows 2.03


Рабочий стол с запущенными приложениями в Windows 3.0


Рабочий стол с запущенными приложениями в Windows 3.1


Рабочий стол с запущенными приложениями в Windows NT 3.1 Workstation, визуально практически не отличим от другой версии Windows NT 3.51 Workstation.


Рабочий стол с запущенными приложениями в революционной операционной системе Windows 95, также практически не отличим от версии Windows NT 4.0 Workstation.


Рабочий стол с запущенными приложениями в Windows 98


Рабочий стол с запущенными приложениями в Windows 2000, визуально практически не отличим от другой версии Windows Me, а также от Windows Server 2003, хотя это абсолютно разные по назначению и программной начинке системы.


Рабочий стол с запущенными приложениями в Windows XP

На этом пока все, но в будущем я обязательно пополню этот список скринами рабочих столов операционных систем семейства OS X и Linux, правда в случае с Linux и его многообразием дистрибутивов, учитывая различные реализации DE и WE могут потребоваться годы на сбор информации) Удачи вам, подписывайтесь на мой блог!

Развитие графических интерфейсов пользователя was last modified: Март 3rd, 2016 by Admin



Понравилась статья? Поделиться с друзьями: