Парадигмы консольного и графического пользовательского интерфейса
Введение
Пользовательский интерфейс (UI) — это важная часть взаимодействия человека с компьютером. Он определяет, как пользователь воспринимает и использует программное обеспечение. В истории развития компьютеров сформировались две основные парадигмы интерфейсов: консольный интерфейс (CUI, Command Line Interface) и графический интерфейс (GUI, Graphical User Interface). Каждая из этих парадигм имеет свои особенности, преимущества и недостатки.
1. Консольный пользовательский интерфейс (CUI)
1.1. Определение и история
Консольный интерфейс — это текстовый способ взаимодействия пользователя с компьютером. Пользователь вводит команды с клавиатуры, а система выводит результаты в текстовом виде. Этот тип интерфейса был основным в ранних компьютерах (например, в системах с операционными системами Unix, MS-DOS).
1.2. Особенности
- Текстовый ввод/вывод: Все команды и результаты отображаются в виде текста.
- Минимализм: Не требует графических ресурсов, что делает его легковесным.
- Гибкость: Позволяет выполнять сложные операции с помощью команд и скриптов.
- Автоматизация: Легко автоматизируется с помощью сценариев (скриптов).
1.3. Преимущества
- Производительность: Подходит для опытных пользователей, которые могут быстро выполнять задачи.
- Ресурсоэффективность: Не требует мощного железа для работы.
- Универсальность: Подходит для удаленного управления через SSH или Telnet.
1.4. Недостатки
- Высокий порог входа: Требует знания команд и синтаксиса.
- Ограниченная визуализация: Нет графических элементов, что может затруднить восприятие данных.
- Ошибки ввода: Ошибки в командах могут привести к непредсказуемым результатам.
1.5. Примеры использования
- Администрирование серверов.
- Разработка программного обеспечения (например, использование Git через командную строку).
- Автоматизация задач (например, написание bash-скриптов).
2. Графический пользовательский интерфейс (GUI)
2.1. Определение и история
Графический интерфейс — это визуальный способ взаимодействия пользователя с компьютером. Он использует графические элементы, такие как окна, кнопки, иконки и меню. GUI стал популярным с появлением операционных систем, таких как Windows, macOS и графических оболочек для Linux (например, GNOME, KDE).
2.2. Особенности
- Визуальное представление: Информация отображается в виде графических элементов.
- Интуитивность: Пользователь взаимодействует с интерфейсом с помощью мыши и клавиатуры.
- Мультимедийность: Поддержка изображений, видео и других графических элементов.
2.3. Преимущества
- Удобство: Подходит для начинающих пользователей.
- Наглядность: Визуальное представление данных упрощает восприятие.
- Мультизадачность: Возможность работы с несколькими окнами одновременно.
2.4. Недостатки
- Ресурсоемкость: Требует больше вычислительных ресурсов.
- Ограниченная гибкость: Некоторые сложные операции сложнее выполнять через GUI.
- Зависимость от оборудования: Требует наличия графического оборудования (монитор, видеокарта).
2.5. Примеры использования
- Операционные системы (Windows, macOS, Linux с графической оболочкой).
- Офисные приложения (Microsoft Office, LibreOffice).
- Веб-браузеры (Google Chrome, Mozilla Firefox).
3. Сравнение CUI и GUI
Характеристика | CUI (Консольный интерфейс) | GUI (Графический интерфейс) |
---|---|---|
Удобство для новичков | Низкое | Высокое |
Ресурсоемкость | Низкая | Высокая |
Гибкость | Высокая | Ограниченная |
Автоматизация | Легко автоматизируется | Сложнее автоматизировать |
Визуализация | Текстовая | Графическая |
4. Современные тенденции
4.1. Гибридные интерфейсы
Современные системы часто сочетают в себе элементы CUI и GUI. Например, в операционных системах, таких как Windows и macOS, можно использовать командную строку (PowerShell, Terminal) вместе с графическим интерфейсом.
4.2. Веб-интерфейсы
С развитием веб-технологий появились интерфейсы, которые работают в браузере. Они сочетают в себе удобство GUI и возможности удаленного доступа.
4.3. Голосовые интерфейсы
С развитием искусственного интеллекта и технологий распознавания речи появляются новые парадигмы взаимодействия, такие как голосовые помощники (Siri, Alexa).
Заключение
Консольный и графический интерфейсы — это две основные парадигмы взаимодействия пользователя с компьютером. Каждая из них имеет свои сильные и слабые стороны, и выбор между ними зависит от конкретных задач и предпочтений пользователя. В современном мире эти парадигмы часто дополняют друг друга, обеспечивая гибкость и удобство в использовании технологий.
Класс окна в операционных системах, предопределенные классы, получение и изменение данных окна и класса.
1. Введение
В операционных системах (ОС), таких как Windows, окна являются основными элементами графического интерфейса пользователя (GUI). Каждое окно принадлежит определенному классу, который определяет его поведение, внешний вид и функциональность. Класс окна — это шаблон, на основе которого создаются экземпляры окон.
2. Понятие класса окна
Класс окна — это структура данных, которая содержит информацию о: — Процедуре окна (Window Procedure) — функция, обрабатывающая сообщения, отправляемые окну. — Стилях окна (Window Styles) — параметры, определяющие внешний вид и поведение окна (например, наличие рамки, заголовка, кнопок управления). — Иконке и курсоре — ресурсы, используемые окном. — Фоне окна — цвет или кисть, используемая для заливки фона. — Меню — меню по умолчанию, связанное с окном.
Класс окна регистрируется в системе перед созданием окна.
3. Предопределенные классы окон
Операционные системы предоставляют набор предопределенных классов, которые можно использовать для создания стандартных окон. Примеры предопределенных классов в Windows: — BUTTON — класс для создания кнопок. — EDIT — класс для создания текстовых полей. — LISTBOX — класс для создания списков. — COMBOBOX — класс для создания комбинированных списков. — STATIC — класс для создания статических текстовых элементов.
Эти классы уже зарегистрированы в системе, и их можно использовать без дополнительной регистрации.
4. Регистрация пользовательского класса окна
Если предопределенные классы не подходят, можно зарегистрировать собственный класс окна. Для этого используется функция RegisterClass
или RegisterClassEx
(в Windows). Пример:
WNDCLASS wc = {};
wc.lpfnWndProc = WindowProc; // Указатель на процедуру окна
wc.hInstance = hInstance; // Дескриптор экземпляра приложения
wc.lpszClassName = L"MyWindowClass"; // Имя класса
// Регистрация класса
RegisterClass(&wc);
После регистрации класса можно создавать окна на его основе.
5. Получение данных окна и класса
Для получения информации об окне и его классе используются следующие функции: — GetWindowInfo — возвращает информацию об окне. — GetClassInfo — возвращает информацию о классе окна. — GetClassName — возвращает имя класса, к которому принадлежит окно.
Пример:
TCHAR className[256];
GetClassName(hwnd, className, 256); // Получение имени класса окна
6. Изменение данных окна и класса
Некоторые параметры окна и класса можно изменить динамически: — SetWindowLong — изменяет атрибуты окна (например, стили). — SetClassLong — изменяет атрибуты класса (например, иконку или курсор).
Пример:
SetWindowLong(hwnd, GWL_STYLE, WS_OVERLAPPEDWINDOW); // Изменение стиля окна
SetClassLong(hwnd, GCL_HICON, (LONG)newIcon); // Изменение иконки класса
7. Пример использования
Рассмотрим пример создания окна с пользовательским классом:
#include <windows.h>
LRESULT CALLBACK WindowProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) {
switch (uMsg) {
case WM_DESTROY:
PostQuitMessage(0);
return 0;
default:
return DefWindowProc(hwnd, uMsg, wParam, lParam);
}
}
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) {
WNDCLASS wc = {};
wc.lpfnWndProc = WindowProc;
wc.hInstance = hInstance;
wc.lpszClassName = L"MyWindowClass";
RegisterClass(&wc);
HWND hwnd = CreateWindowEx(0, L"MyWindowClass", L"Мое окно", WS_OVERLAPPEDWINDOW,
CW_USEDEFAULT, CW_USEDEFAULT, 500, 300, NULL, NULL, hInstance, NULL);
ShowWindow(hwnd, nCmdShow);
MSG msg = {};
while (GetMessage(&msg, NULL, 0, 0)) {
TranslateMessage(&msg);
DispatchMessage(&msg);
}
return 0;
}
8. Заключение
Класс окна — это важная концепция в разработке графических интерфейсов. Понимание работы с классами окон позволяет создавать гибкие и функциональные приложения. Предопределенные классы упрощают разработку, а возможность регистрации пользовательских классов открывает широкие возможности для кастомизации.
Событийное управление приложениями
1. Событийное управление приложениями
Событийное управление (Event-Driven Programming) — это парадигма, при которой выполнение программы определяется событиями (например, клик мыши, нажатие клавиши, закрытие окна).
Основные понятия:
— Событие (Event):
— Это действие или изменение состояния, которое обрабатывается программой (например, нажатие кнопки).
— Обработчик событий (Event Handler):
— Это функция, которая вызывается при возникновении определенного события.
Цикл обработки событий:
1. Программа ожидает события (например, ввод пользователя).
2. Когда событие происходит, система отправляет его в очередь событий.
3. Программа извлекает событие из очереди и вызывает соответствующий обработчик.
4. Обработчик выполняет необходимые действия.
Примеры событий в графическом интерфейсе:
— Click
— клик мыши.
— KeyPress
— нажатие клавиши.
— Resize
— изменение размера окна.
— Close
— закрытие окна.
Преимущества событийного управления:
— Удобство для создания интерактивных приложений.
— Эффективное использование ресурсов (программа не занимает процессорное время в ожидании).
— Поддержка многозадачности.
2. Пример работы с окнами и событиями (на примере Windows API)
#include <windows.h>
// Обработчик событий (Window Procedure)
LRESULT CALLBACK WindowProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) {
switch (uMsg) {
case WM_DESTROY:
PostQuitMessage(0); // Завершение программы при закрытии окна
return 0;
case WM_PAINT:
// Отрисовка содержимого окна
PAINTSTRUCT ps;
HDC hdc = BeginPaint(hwnd, &ps);
TextOut(hdc, 50, 50, L"Hello, World!", 13);
EndPaint(hwnd, &ps);
return 0;
}
return DefWindowProc(hwnd, uMsg, wParam, lParam);
}
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) {
// Регистрация класса окна
WNDCLASS wc = {};
wc.lpfnWndProc = WindowProc;
wc.hInstance = hInstance;
wc.lpszClassName = L"MainWindowClass";
RegisterClass(&wc);
// Создание окна
HWND hwnd = CreateWindowEx(0, L"MainWindowClass", L"Hello, World!", WS_OVERLAPPEDWINDOW,
CW_USEDEFAULT, CW_USEDEFAULT, 800, 600, NULL, NULL, hInstance, NULL);
ShowWindow(hwnd, nCmdShow);
// Цикл обработки событий
MSG msg = {};
while (GetMessage(&msg, NULL, 0, 0)) {
TranslateMessage(&msg);
DispatchMessage(&msg);
}
return 0;
}
3. Заключение
- Консольный и графический интерфейсы имеют свои преимущества и недостатки, и выбор между ними зависит от задач и аудитории.
- Класс окна — это основа для создания и управления окнами в операционных системах.
- Событийное управление позволяет создавать интерактивные и отзывчивые приложения.
Использование GDI32
Простой пример с рисованием фигур
Пример простого приложения на Win32, которое демонстрирует возможности библиотеки gdi32
, может включать в себя создание окна и рисование различных фигур и текста с использованием функций GDI (Graphics Device Interface). Вот пример такого приложения:
#include <windows.h>
LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, PSTR szCmdLine, int iCmdShow) {
static TCHAR szAppName[] = TEXT("GDIExample");
HWND hwnd;
MSG msg;
WNDCLASS wndclass;
wndclass.style = CS_HREDRAW | CS_VREDRAW;
wndclass.lpfnWndProc = WndProc;
wndclass.cbClsExtra = 0;
wndclass.cbWndExtra = 0;
wndclass.hInstance = hInstance;
wndclass.hIcon = LoadIcon(NULL, IDI_APPLICATION);
wndclass.hCursor = LoadCursor(NULL, IDC_ARROW);
wndclass.hbrBackground = (HBRUSH)GetStockObject(WHITE_BRUSH);
wndclass.lpszMenuName = NULL;
wndclass.lpszClassName = szAppName;
if (!RegisterClass(&wndclass)) {
MessageBox(NULL, TEXT("This program requires Windows NT!"), szAppName, MB_ICONERROR);
return 0;
}
hwnd = CreateWindow(szAppName, TEXT("GDI Example"), WS_OVERLAPPEDWINDOW,
CW_USEDEFAULT, CW_USEDEFAULT, CW_USEDEFAULT, CW_USEDEFAULT,
NULL, NULL, hInstance, NULL);
ShowWindow(hwnd, iCmdShow);
UpdateWindow(hwnd);
while (GetMessage(&msg, NULL, 0, 0)) {
TranslateMessage(&msg);
DispatchMessage(&msg);
}
return msg.wParam;
}
LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) {
HDC hdc;
PAINTSTRUCT ps;
RECT rect;
switch (message) {
case WM_PAINT:
hdc = BeginPaint(hwnd, &ps);
// Рисуем прямоугольник
Rectangle(hdc, 50, 50, 200, 200);
// Рисуем эллипс
Ellipse(hdc, 250, 50, 400, 200);
// Рисуем линию
MoveToEx(hdc, 50, 250, NULL);
LineTo(hdc, 400, 250);
// Выводим текст
SetTextAlign(hdc, TA_CENTER);
TextOut(hdc, 225, 300, TEXT("Hello, GDI!"), 11);
EndPaint(hwnd, &ps);
return 0;
case WM_DESTROY:
PostQuitMessage(0);
return 0;
}
return DefWindowProc(hwnd, message, wParam, lParam);
}
Описание кода:
- WinMain: Это точка входа приложения. Здесь регистрируется класс окна, создается окно и запускается цикл обработки сообщений.
- WndProc: Это процедура окна, которая обрабатывает сообщения, отправляемые окну. В данном примере она обрабатывает сообщение
WM_PAINT
, которое отправляется, когда окно нужно перерисовать. - WM_PAINT: В этом блоке кода используется контекст устройства (HDC) для рисования различных фигур и текста:
Rectangle
рисует прямоугольник.Ellipse
рисует эллипс.MoveToEx
иLineTo
рисуют линию.TextOut
выводит текст на экран.
Компиляция:
Для компиляции этого кода вам понадобится компилятор, поддерживающий WinAPI, например, MinGW или Visual Studio. В Visual Studio можно создать новый проект Win32 Application и вставить этот код в файл main.cpp
.
Запуск:
После компиляции и запуска приложения вы увидите окно с прямоугольником, эллипсом, линией и текстом, нарисованными с использованием функций GDI.
Использование различных режимов наложения
Добавим в пример использование функций для работы с битмапами и различными режимами наложения (ROP2). Мы загрузим битмап из файла, отобразим его на экране и продемонстрируем различные режимы наложения с помощью функции SetROP2
.
#include <windows.h>
LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, PSTR szCmdLine, int iCmdShow) {
static TCHAR szAppName[] = TEXT("GDIExample");
HWND hwnd;
MSG msg;
WNDCLASS wndclass;
wndclass.style = CS_HREDRAW | CS_VREDRAW;
wndclass.lpfnWndProc = WndProc;
wndclass.cbClsExtra = 0;
wndclass.cbWndExtra = 0;
wndclass.hInstance = hInstance;
wndclass.hIcon = LoadIcon(NULL, IDI_APPLICATION);
wndclass.hCursor = LoadCursor(NULL, IDC_ARROW);
wndclass.hbrBackground = (HBRUSH)GetStockObject(WHITE_BRUSH);
wndclass.lpszMenuName = NULL;
wndclass.lpszClassName = szAppName;
if (!RegisterClass(&wndclass)) {
MessageBox(NULL, TEXT("This program requires Windows NT!"), szAppName, MB_ICONERROR);
return 0;
}
hwnd = CreateWindow(szAppName, TEXT("GDI Example with Bitmaps and ROP2"), WS_OVERLAPPEDWINDOW,
CW_USEDEFAULT, CW_USEDEFAULT, CW_USEDEFAULT, CW_USEDEFAULT,
NULL, NULL, hInstance, NULL);
ShowWindow(hwnd, iCmdShow);
UpdateWindow(hwnd);
while (GetMessage(&msg, NULL, 0, 0)) {
TranslateMessage(&msg);
DispatchMessage(&msg);
}
return msg.wParam;
}
LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) {
HDC hdc;
PAINTSTRUCT ps;
HBITMAP hBitmap;
BITMAP bitmap;
HDC hdcMem;
HGDIOBJ oldBitmap;
switch (message) {
case WM_CREATE:
// Загружаем битмап из файла
hBitmap = (HBITMAP)LoadImage(NULL, TEXT("example.bmp"), IMAGE_BITMAP, 0, 0, LR_LOADFROMFILE);
if (hBitmap == NULL) {
MessageBox(hwnd, TEXT("Не удалось загрузить битмап!"), TEXT("Ошибка"), MB_ICONERROR);
}
// Сохраняем битмап в глобальной переменной
SetWindowLongPtr(hwnd, GWLP_USERDATA, (LONG_PTR)hBitmap);
return 0;
case WM_PAINT:
hdc = BeginPaint(hwnd, &ps);
// Получаем битмап из глобальной переменной
hBitmap = (HBITMAP)GetWindowLongPtr(hwnd, GWLP_USERDATA);
if (hBitmap != NULL) {
// Создаем контекст устройства в памяти
hdcMem = CreateCompatibleDC(hdc);
oldBitmap = SelectObject(hdcMem, hBitmap);
// Получаем информацию о битмапе
GetObject(hBitmap, sizeof(bitmap), &bitmap);
// Отображаем битмап на экране
BitBlt(hdc, 50, 50, bitmap.bmWidth, bitmap.bmHeight, hdcMem, 0, 0, SRCCOPY);
// Демонстрация режимов наложения (ROP2)
SetROP2(hdc, R2_NOT); // Инвертирование цвета
Rectangle(hdc, 100, 100, 300, 200);
SetROP2(hdc, R2_XORPEN); // Исключающее ИЛИ
Ellipse(hdc, 150, 150, 350, 250);
SetROP2(hdc, R2_MERGEPEN); // Объединение с цветом пера
MoveToEx(hdc, 50, 300, NULL);
LineTo(hdc, 400, 300);
// Восстанавливаем контекст устройства
SelectObject(hdcMem, oldBitmap);
DeleteDC(hdcMem);
}
EndPaint(hwnd, &ps);
return 0;
case WM_DESTROY:
// Удаляем битмап
hBitmap = (HBITMAP)GetWindowLongPtr(hwnd, GWLP_USERDATA);
if (hBitmap != NULL) {
DeleteObject(hBitmap);
}
PostQuitMessage(0);
return 0;
}
return DefWindowProc(hwnd, message, wParam, lParam);
}
Описание:
- Загрузка битмапа:
- В обработчике
WM_CREATE
загружается битмап из файлаexample.bmp
с помощью функцииLoadImage
. - Битмап сохраняется в глобальной переменной, связанной с окном, с использованием
SetWindowLongPtr
.
- В обработчике
- Отображение битмапа:
- В обработчике
WM_PAINT
создается контекст устройства в памяти (CreateCompatibleDC
), и битмап отображается на экране с помощьюBitBlt
.
- В обработчике
- Режимы наложения (ROP2):
- Используется функция
SetROP2
для изменения режима наложения:R2_NOT
: Инвертирование цвета.R2_XORPEN
: Исключающее ИЛИ.R2_MERGEPEN
: Объединение с цветом пера.
- Эти режимы применяются к прямоугольнику, эллипсу и линии.
- Используется функция
- Удаление битмапа:
- В обработчике
WM_DESTROY
битмап удаляется с помощьюDeleteObject
.
- В обработчике
Как использовать:
- Создайте файл
example.bmp
в той же директории, где находится исполняемый файл. - Скомпилируйте и запустите программу.
- Вы увидите:
- Загруженный битмап.
- Прямоугольник, эллипс и линию, нарисованные с разными режимами наложения.
Примечания:
- Если файл
example.bmp
отсутствует, программа выведет сообщение об ошибке. - Вы можете заменить
example.bmp
на любой другой битмап, чтобы увидеть, как он отображается.
Использование анимации и двойной буферизации
Для создания анимации движения объекта в окне с использованием двойной буферизации (double buffering) в Win32 API, мы будем использовать следующие техники: 1. Двойная буферизация: Рисование происходит в памяти (в буфере), а затем буфер копируется на экран. Это предотвращает мерцание. 2. Таймер: Для обновления позиции объекта и перерисовки окна через определенные интервалы времени.
В этом примере мы создадим анимацию движения круга по экрану.
Пример кода:
#include <windows.h>
#include <math.h>
LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, PSTR szCmdLine, int iCmdShow) {
static TCHAR szAppName[] = TEXT("AnimationExample");
HWND hwnd;
MSG msg;
WNDCLASS wndclass;
wndclass.style = CS_HREDRAW | CS_VREDRAW;
wndclass.lpfnWndProc = WndProc;
wndclass.cbClsExtra = 0;
wndclass.cbWndExtra = 0;
wndclass.hInstance = hInstance;
wndclass.hIcon = LoadIcon(NULL, IDI_APPLICATION);
wndclass.hCursor = LoadCursor(NULL, IDC_ARROW);
wndclass.hbrBackground = (HBRUSH)GetStockObject(WHITE_BRUSH);
wndclass.lpszMenuName = NULL;
wndclass.lpszClassName = szAppName;
if (!RegisterClass(&wndclass)) {
MessageBox(NULL, TEXT("This program requires Windows NT!"), szAppName, MB_ICONERROR);
return 0;
}
hwnd = CreateWindow(szAppName, TEXT("Animation with Double Buffering"), WS_OVERLAPPEDWINDOW,
CW_USEDEFAULT, CW_USEDEFAULT, 800, 600,
NULL, NULL, hInstance, NULL);
ShowWindow(hwnd, iCmdShow);
UpdateWindow(hwnd);
while (GetMessage(&msg, NULL, 0, 0)) {
TranslateMessage(&msg);
DispatchMessage(&msg);
}
return msg.wParam;
}
LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) {
static int x = 100, y = 100; // Начальные координаты круга
static int dx = 5, dy = 5; // Скорость движения по осям X и Y
static int radius = 50; // Радиус круга
switch (message) {
case WM_CREATE:
// Устанавливаем таймер для обновления анимации каждые 16 мс (~60 FPS)
SetTimer(hwnd, 1, 16, NULL);
return 0;
case WM_TIMER:
// Обновляем позицию круга
x += dx;
y += dy;
// Проверяем столкновение с границами окна
RECT rect;
GetClientRect(hwnd, &rect);
if (x - radius < 0 || x + radius > rect.right) {
dx = -dx; // Меняем направление по оси X
}
if (y - radius < 0 || y + radius > rect.bottom) {
dy = -dy; // Меняем направление по оси Y
}
// Перерисовываем окно
InvalidateRect(hwnd, NULL, TRUE);
return 0;
case WM_PAINT: {
PAINTSTRUCT ps;
HDC hdc = BeginPaint(hwnd, &ps);
// Создаем контекст устройства в памяти для двойной буферизации
HDC hdcMem = CreateCompatibleDC(hdc);
HBITMAP hBitmap = CreateCompatibleBitmap(hdc, rect.right, rect.bottom);
SelectObject(hdcMem, hBitmap);
// Очищаем фон
HBRUSH hBrush = (HBRUSH)GetStockObject(WHITE_BRUSH);
FillRect(hdcMem, &rect, hBrush);
// Рисуем круг
HBRUSH hCircleBrush = CreateSolidBrush(RGB(255, 0, 0)); // Красный круг
SelectObject(hdcMem, hCircleBrush);
Ellipse(hdcMem, x - radius, y - radius, x + radius, y + radius);
DeleteObject(hCircleBrush);
// Копируем буфер на экран
BitBlt(hdc, 0, 0, rect.right, rect.bottom, hdcMem, 0, 0, SRCCOPY);
// Освобождаем ресурсы
DeleteObject(hBitmap);
DeleteDC(hdcMem);
EndPaint(hwnd, &ps);
return 0;
}
case WM_DESTROY:
// Удаляем таймер
KillTimer(hwnd, 1);
PostQuitMessage(0);
return 0;
}
return DefWindowProc(hwnd, message, wParam, lParam);
}
Описание кода:
- Двойная буферизация:
- В обработчике
WM_PAINT
создается контекст устройства в памяти (hdcMem
), в котором рисуется весь кадр. - После завершения рисования буфер копируется на экран с помощью
BitBlt
.
- В обработчике
- Таймер:
- В обработчике
WM_CREATE
устанавливается таймер, который срабатывает каждые 16 мс (примерно 60 кадров в секунду). - В обработчике
WM_TIMER
обновляется позиция круга и вызывается перерисовка окна с помощьюInvalidateRect
.
- В обработчике
- Анимация:
- Круг движется по экрану, меняя направление при столкновении с границами окна.
- Позиция круга обновляется в обработчике
WM_TIMER
.
- Столкновение с границами:
- Если круг достигает границы окна, его скорость по соответствующей оси инвертируется.
Как это работает:
- Таймер обновляет позицию круга и вызывает перерисовку окна.
- В
WM_PAINT
используется двойная буферизация для предотвращения мерцания. - Круг рисуется в новом положении, и буфер копируется на экран.
Результат:
- Красный круг движется по экрану, отскакивая от границ окна.
- Анимация плавная, без мерцания, благодаря двойной буферизации.
Примечания:
- Вы можете изменить скорость движения, радиус круга или цвет, чтобы настроить анимацию.
- Для более сложной анимации можно добавить несколько объектов или изменить их траектории.
Наложение с использованием маски
Для демонстрации наложения изображений с использованием маски в Win32 API, мы создадим пример, где два изображения накладываются друг на друга с использованием маски. Маска позволяет определить, какие части изображения будут прозрачными, а какие — непрозрачными. Это часто используется для создания спрайтов с прозрачным фоном.
Пример кода:
#include <windows.h>
LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, PSTR szCmdLine, int iCmdShow) {
static TCHAR szAppName[] = TEXT("MaskedImageExample");
HWND hwnd;
MSG msg;
WNDCLASS wndclass;
wndclass.style = CS_HREDRAW | CS_VREDRAW;
wndclass.lpfnWndProc = WndProc;
wndclass.cbClsExtra = 0;
wndclass.cbWndExtra = 0;
wndclass.hInstance = hInstance;
wndclass.hIcon = LoadIcon(NULL, IDI_APPLICATION);
wndclass.hCursor = LoadCursor(NULL, IDC_ARROW);
wndclass.hbrBackground = (HBRUSH)GetStockObject(WHITE_BRUSH);
wndclass.lpszMenuName = NULL;
wndclass.lpszClassName = szAppName;
if (!RegisterClass(&wndclass)) {
MessageBox(NULL, TEXT("This program requires Windows NT!"), szAppName, MB_ICONERROR);
return 0;
}
hwnd = CreateWindow(szAppName, TEXT("Masked Image Example"), WS_OVERLAPPEDWINDOW,
CW_USEDEFAULT, CW_USEDEFAULT, 800, 600,
NULL, NULL, hInstance, NULL);
ShowWindow(hwnd, iCmdShow);
UpdateWindow(hwnd);
while (GetMessage(&msg, NULL, 0, 0)) {
TranslateMessage(&msg);
DispatchMessage(&msg);
}
return msg.wParam;
}
LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) {
static HBITMAP hBitmapImage = NULL; // Основное изображение
static HBITMAP hBitmapMask = NULL; // Маска
static HBITMAP hBitmapBackground = NULL; // Фоновое изображение
switch (message) {
case WM_CREATE:
// Загружаем изображения
hBitmapImage = (HBITMAP)LoadImage(NULL, TEXT("image.bmp"), IMAGE_BITMAP, 0, 0, LR_LOADFROMFILE);
hBitmapMask = (HBITMAP)LoadImage(NULL, TEXT("mask.bmp"), IMAGE_BITMAP, 0, 0, LR_LOADFROMFILE);
hBitmapBackground = (HBITMAP)LoadImage(NULL, TEXT("background.bmp"), IMAGE_BITMAP, 0, 0, LR_LOADFROMFILE);
if (!hBitmapImage || !hBitmapMask || !hBitmapBackground) {
MessageBox(hwnd, TEXT("Не удалось загрузить изображения!"), TEXT("Ошибка"), MB_ICONERROR);
}
return 0;
case WM_PAINT: {
PAINTSTRUCT ps;
HDC hdc = BeginPaint(hwnd, &ps);
// Получаем размеры клиентской области
RECT rect;
GetClientRect(hwnd, &rect);
// Создаем контекст устройства в памяти для двойной буферизации
HDC hdcMem = CreateCompatibleDC(hdc);
HBITMAP hBitmapBuffer = CreateCompatibleBitmap(hdc, rect.right, rect.bottom);
SelectObject(hdcMem, hBitmapBuffer);
// Рисуем фоновое изображение
HDC hdcBackground = CreateCompatibleDC(hdc);
SelectObject(hdcBackground, hBitmapBackground);
BitBlt(hdcMem, 0, 0, rect.right, rect.bottom, hdcBackground, 0, 0, SRCCOPY);
DeleteDC(hdcBackground);
// Рисуем изображение с маской
if (hBitmapImage && hBitmapMask) {
HDC hdcImage = CreateCompatibleDC(hdc);
HDC hdcMask = CreateCompatibleDC(hdc);
// Выбираем изображение и маску в контексты устройств
SelectObject(hdcImage, hBitmapImage);
SelectObject(hdcMask, hBitmapMask);
// Шаг 1: Наложение маски на фоновое изображение (AND-операция)
BitBlt(hdcMem, 100, 100, rect.right, rect.bottom, hdcMask, 0, 0, SRCAND);
// Шаг 2: Наложение изображения на результат (OR-операция)
BitBlt(hdcMem, 100, 100, rect.right, rect.bottom, hdcImage, 0, 0, SRCPAINT);
// Освобождаем контексты устройств
DeleteDC(hdcImage);
DeleteDC(hdcMask);
}
// Копируем буфер на экран
BitBlt(hdc, 0, 0, rect.right, rect.bottom, hdcMem, 0, 0, SRCCOPY);
// Освобождаем ресурсы
DeleteObject(hBitmapBuffer);
DeleteDC(hdcMem);
EndPaint(hwnd, &ps);
return 0;
}
case WM_DESTROY:
// Удаляем загруженные изображения
if (hBitmapImage) DeleteObject(hBitmapImage);
if (hBitmapMask) DeleteObject(hBitmapMask);
if (hBitmapBackground) DeleteObject(hBitmapBackground);
PostQuitMessage(0);
return 0;
}
return DefWindowProc(hwnd, message, wParam, lParam);
}
Описание кода:
- Загрузка изображений:
- В обработчике
WM_CREATE
загружаются три изображения:- Основное изображение (
image.bmp
). - Маска (
mask.bmp
). - Фоновое изображение (
background.bmp
).
- Основное изображение (
- Маска должна быть черно-белой: черный цвет (0x000000) обозначает прозрачные области, белый цвет (0xFFFFFF) — непрозрачные.
- В обработчике
- Наложение изображений:
- В обработчике
WM_PAINT
используется двойная буферизация для предотвращения мерцания. - Фоновое изображение рисуется на буфере.
- Основное изображение накладывается на фон с использованием маски:
- Сначала маска применяется к фону с помощью операции
SRCAND
(AND-операция). Это делает прозрачные области черными. - Затем основное изображение накладывается с помощью операции
SRCPAINT
(OR-операция). Это заполняет прозрачные области цветами из изображения.
- Сначала маска применяется к фону с помощью операции
- В обработчике
- Освобождение ресурсов:
- В обработчике
WM_DESTROY
удаляются загруженные изображения.
- В обработчике
Как это работает:
- Маска определяет, какие части изображения будут прозрачными.
- Основное изображение накладывается на фон только в тех областях, где маска белая.
- Черные области маски делают соответствующие части фона прозрачными.
Результат:
- На фоновом изображении отображается основное изображение с прозрачными областями, заданными маской.
Примечания:
- Файлы изображений:
- Создайте три файла:
image.bmp
,mask.bmp
иbackground.bmp
. - Маска (
mask.bmp
) должна быть черно-белой. Черный цвет (0x000000) — прозрачные области, белый цвет (0xFFFFFF) — непрозрачные.
- Создайте три файла:
- Пример изображений:
image.bmp
: Основное изображение (например, спрайт).mask.bmp
: Черно-белая маска, соответствующая основному изображению.background.bmp
: Фоновое изображение.
- Компиляция:
- Скомпилируйте код с помощью компилятора, поддерживающего WinAPI (например, MinGW или Visual Studio).
- Запуск:
- Убедитесь, что файлы
image.bmp
,mask.bmp
иbackground.bmp
находятся в той же директории, что и исполняемый файл.
- Убедитесь, что файлы
Ресурсы приложения, их создание и использование
Ресурсы в Windows-приложениях — это данные, которые хранятся внутри исполняемых файлов (EXE, DLL) или в отдельных файлах и используются программой во время выполнения. Ресурсы позволяют включать в приложение такие элементы, как иконки, строки, диалоговые окна, меню, курсоры, изображения и другие данные, не загромождая основной код программы.
1. Типы ресурсов в Windows
Ресурсы в Windows делятся на несколько типов, каждый из которых имеет своё назначение:
1.1. Стандартные типы ресурсов
- Иконки (ICON): используются для отображения значков приложения.
- Курсоры (CURSOR): определяют внешний вид курсора мыши.
- Диалоговые окна (DIALOG): шаблоны для создания окон с элементами управления.
- Меню (MENU): определяют структуру меню приложения.
- Строки (STRINGTABLE): текстовые данные, которые могут быть локализованы.
- Битовые изображения (BITMAP): растровые изображения.
- Версия (VERSIONINFO): информация о версии приложения.
1.2. Пользовательские типы ресурсов
Разработчик может создавать собственные типы ресурсов для хранения любых данных, например, конфигурационных файлов, XML-документов или бинарных данных.
2. Создание ресурсов
Ресурсы в Windows создаются с помощью файлов ресурсов (.rc
), которые компилируются в бинарный формат и включаются в исполняемый файл.
2.1. Файл ресурсов (.rc
)
Файл ресурсов — это текстовый файл, который описывает все ресурсы, используемые в приложении. Пример простого .rc
файла:
// Иконка приложения
IDI_ICON1 ICON "icon.ico"
// Курсор
IDC_CURSOR1 CURSOR "cursor.cur"
// Строковая таблица
STRINGTABLE
BEGIN
101 "Привет, мир!"
102 "Это пример строки."
END
// Диалоговое окно
IDD_DIALOG1 DIALOGEX 0, 0, 200, 100
STYLE DS_MODALFRAME | WS_POPUP | WS_CAPTION
CAPTION "Пример диалога"
BEGIN
DEFPUSHBUTTON "OK", IDOK, 10, 70, 50, 14
PUSHBUTTON "Отмена", IDCANCEL, 70, 70, 50, 14
END
2.2. Компиляция ресурсов
Файл ресурсов компилируется с помощью компилятора ресурсов (rc.exe
), который создает бинарный файл (.res
). Этот файл затем включается в исполняемый файл на этапе линковки.
Пример команды для компиляции:
3. Использование ресурсов
Ресурсы загружаются и используются в коде программы с помощью API Windows.
3.1. Загрузка иконки
Пример загрузки иконки:
HICON hIcon = LoadIcon(hInstance, MAKEINTRESOURCE(IDI_ICON1));
3.2. Загрузка строки
Пример загрузки строки из строковой таблицы:
char buffer[100];
LoadString(hInstance, 101, buffer, sizeof(buffer));
MessageBox(NULL, buffer, "Ресурс", MB_OK);
3.3. Создание диалогового окна
Пример создания диалогового окна:
DialogBox(hInstance, MAKEINTRESOURCE(IDD_DIALOG1), NULL, DialogProc);
3.4. Загрузка битового изображения
Пример загрузки изображения:
HBITMAP hBitmap = LoadBitmap(hInstance, MAKEINTRESOURCE(IDB_BITMAP1));
4. Управление ресурсами
Ресурсы в Windows могут быть как встроенными (внутри EXE или DLL), так и внешними (отдельные файлы). Встроенные ресурсы защищены от изменений, но их сложнее обновлять. Внешние ресурсы проще обновлять, но они менее безопасны.
4.1. Встроенные ресурсы
-
Хранятся внутри исполняемого файла.
-
Загружаются с помощью функций API, таких как
LoadIcon
,LoadString
,LoadBitmap
. -
Пример:
HICON hIcon = LoadIcon(hInstance, MAKEINTRESOURCE(IDI_ICON1));
4.2. Внешние ресурсы
-
Хранятся в отдельных файлах.
-
Загружаются с помощью функций, таких как
LoadImage
,LoadLibrary
(для DLL). -
Пример:
HBITMAP hBitmap = (HBITMAP)LoadImage(NULL, "image.bmp", IMAGE_BITMAP, 0, 0, LR_LOADFROMFILE);
5. Локализация ресурсов
Локализация — это процесс адаптации приложения для разных языков и регионов. В Windows локализация ресурсов достигается за счет создания отдельных файлов ресурсов для каждого языка.
5.1. Создание локализованных ресурсов
-
Создайте отдельный
.rc
файл для каждого языка. -
Используйте директиву
LANGUAGE
для указания языка и кодовой страницы. -
Пример:
LANGUAGE LANG_RUSSIAN, SUBLANG_DEFAULT STRINGTABLE BEGIN 101 "Привет, мир!" END
5.2. Загрузка локализованных ресурсов
-
Используйте функции API, такие как
LoadString
, для загрузки строк на нужном языке. -
Пример:
LoadString(hInstance, 101, buffer, sizeof(buffer));
6. Пример программы с использованием ресурсов
Рассмотрим пример простого Windows-приложения, которое использует ресурсы:
6.1. Файл ресурсов (app.rc
)
IDI_ICON1 ICON "app.ico"
IDD_DIALOG1 DIALOGEX 0, 0, 200, 100
STYLE DS_MODALFRAME | WS_POPUP | WS_CAPTION
CAPTION "Пример диалога"
BEGIN
DEFPUSHBUTTON "OK", IDOK, 10, 70, 50, 14
PUSHBUTTON "Отмена", IDCANCEL, 70, 70, 50, 14
END
6.2. Код программы (main.c
)
#include <windows.h>
INT_PTR CALLBACK DialogProc(HWND hwndDlg, UINT uMsg, WPARAM wParam, LPARAM lParam) {
switch (uMsg) {
case WM_COMMAND:
if (LOWORD(wParam) == IDOK || LOWORD(wParam) == IDCANCEL) {
EndDialog(hwndDlg, LOWORD(wParam));
return TRUE;
}
break;
}
return FALSE;
}
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) {
DialogBox(hInstance, MAKEINTRESOURCE(IDD_DIALOG1), NULL, DialogProc);
return 0;
}
Организация интерфейса на основе меню
Организация интерфейса на основе меню
Меню — это один из основных элементов пользовательского интерфейса в Windows-приложениях. Оно предоставляет пользователю доступ к функциям программы через иерархическую структуру команд. Меню может быть главным (располагаться в верхней части окна), контекстным (появляться при щелчке правой кнопкой мыши) или всплывающим (popup).
1. Типы меню
1.1. Главное меню
Главное меню располагается в верхней части окна под заголовком. Оно содержит основные команды приложения, такие как “Файл”, “Правка”, “Вид” и т.д.
1.2. Контекстное меню
Контекстное меню появляется при щелчке правой кнопкой мыши на определённом элементе интерфейса. Оно содержит команды, актуальные для текущего контекста.
2. Создание меню
Меню в Windows-приложениях создается с помощью файла ресурсов (.rc
) или программно в коде.
2.1. Создание меню в файле ресурсов
Пример создания главного меню в файле ресурсов:
// Файл ресурсов (app.rc)
IDR_MAINMENU MENU
BEGIN
POPUP "&Файл"
BEGIN
MENUITEM "&Открыть", ID_FILE_OPEN
MENUITEM "&Сохранить", ID_FILE_SAVE
MENUITEM SEPARATOR
MENUITEM "В&ыход", ID_FILE_EXIT
END
POPUP "&Правка"
BEGIN
MENUITEM "&Вырезать", ID_EDIT_CUT
MENUITEM "&Копировать", ID_EDIT_COPY
MENUITEM "В&ставить", ID_EDIT_PASTE
END
POPUP "&Справка"
BEGIN
MENUITEM "&О программе", ID_HELP_ABOUT
END
END
2.2. Создание меню программно
Пример создания меню в коде:
HMENU hMenu = CreateMenu();
HMENU hFileMenu = CreatePopupMenu();
HMENU hEditMenu = CreatePopupMenu();
AppendMenu(hFileMenu, MF_STRING, ID_FILE_OPEN, "&Открыть");
AppendMenu(hFileMenu, MF_STRING, ID_FILE_SAVE, "&Сохранить");
AppendMenu(hFileMenu, MF_SEPARATOR, 0, NULL);
AppendMenu(hFileMenu, MF_STRING, ID_FILE_EXIT, "В&ыход");
AppendMenu(hEditMenu, MF_STRING, ID_EDIT_CUT, "&Вырезать");
AppendMenu(hEditMenu, MF_STRING, ID_EDIT_COPY, "&Копировать");
AppendMenu(hEditMenu, MF_STRING, ID_EDIT_PASTE, "В&ставить");
AppendMenu(hMenu, MF_POPUP, (UINT_PTR)hFileMenu, "&Файл");
AppendMenu(hMenu, MF_POPUP, (UINT_PTR)hEditMenu, "&Правка");
SetMenu(hwnd, hMenu);
3. Обработка команд меню
Команды меню обрабатываются в оконной процедуре (WndProc
) с помощью сообщения WM_COMMAND
.
Пример обработки команд:
LRESULT CALLBACK WndProc(HWND hwnd, UINT msg, WPARAM wParam, LPARAM lParam) {
switch (msg) {
case WM_COMMAND:
switch (LOWORD(wParam)) {
case ID_FILE_OPEN:
MessageBox(hwnd, "Команда: Открыть", "Меню", MB_OK);
break;
case ID_FILE_SAVE:
MessageBox(hwnd, "Команда: Сохранить", "Меню", MB_OK);
break;
case ID_FILE_EXIT:
PostQuitMessage(0);
break;
case ID_EDIT_CUT:
MessageBox(hwnd, "Команда: Вырезать", "Меню", MB_OK);
break;
case ID_EDIT_COPY:
MessageBox(hwnd, "Команда: Копировать", "Меню", MB_OK);
break;
case ID_EDIT_PASTE:
MessageBox(hwnd, "Команда: Вставить", "Меню", MB_OK);
break;
case ID_HELP_ABOUT:
MessageBox(hwnd, "О программе", "Меню", MB_OK);
break;
}
break;
case WM_DESTROY:
PostQuitMessage(0);
break;
default:
return DefWindowProc(hwnd, msg, wParam, lParam);
}
return 0;
}
4. Контекстное меню
Контекстное меню создается аналогично главному меню, но отображается при щелчке правой кнопкой мыши.
Пример создания и отображения контекстного меню:
case WM_RBUTTONUP: {
HMENU hMenu = CreatePopupMenu();
AppendMenu(hMenu, MF_STRING, ID_CONTEXT_COPY, "Копировать");
AppendMenu(hMenu, MF_STRING, ID_CONTEXT_PASTE, "Вставить");
POINT pt;
GetCursorPos(&pt);
TrackPopupMenu(hMenu, TPM_RIGHTBUTTON, pt.x, pt.y, 0, hwnd, NULL);
DestroyMenu(hMenu);
break;
}
5. Управление состоянием меню
Состояние пунктов меню (активен/неактивен, отмечен/не отмечен) можно изменять динамически.
5.1. Активация/деактивация пунктов меню
Пример:
EnableMenuItem(hMenu, ID_FILE_SAVE, MF_GRAYED); // Деактивировать пункт
EnableMenuItem(hMenu, ID_FILE_SAVE, MF_ENABLED); // Активировать пункт
5.2. Отметка пунктов меню
Пример:
CheckMenuItem(hMenu, ID_VIEW_TOOLBAR, MF_CHECKED); // Отметить пункт
CheckMenuItem(hMenu, ID_VIEW_TOOLBAR, MF_UNCHECKED); // Снять отметку
6. Пример программы с меню
Рассмотрим пример простого Windows-приложения с главным меню.
6.1. Файл ресурсов (app.rc
)
IDR_MAINMENU MENU
BEGIN
POPUP "&Файл"
BEGIN
MENUITEM "&Открыть", ID_FILE_OPEN
MENUITEM "&Сохранить", ID_FILE_SAVE
MENUITEM SEPARATOR
MENUITEM "В&ыход", ID_FILE_EXIT
END
POPUP "&Правка"
BEGIN
MENUITEM "&Вырезать", ID_EDIT_CUT
MENUITEM "&Копировать", ID_EDIT_COPY
MENUITEM "В&ставить", ID_EDIT_PASTE
END
END
6.2. Код программы (main.c
)
#include <windows.h>
#define ID_FILE_OPEN 101
#define ID_FILE_SAVE 102
#define ID_FILE_EXIT 103
#define ID_EDIT_CUT 201
#define ID_EDIT_COPY 202
#define ID_EDIT_PASTE 203
LRESULT CALLBACK WndProc(HWND hwnd, UINT msg, WPARAM wParam, LPARAM lParam) {
switch (msg) {
case WM_COMMAND:
switch (LOWORD(wParam)) {
case ID_FILE_OPEN:
MessageBox(hwnd, "Открыть файл", "Меню", MB_OK);
break;
case ID_FILE_SAVE:
MessageBox(hwnd, "Сохранить файл", "Меню", MB_OK);
break;
case ID_FILE_EXIT:
PostQuitMessage(0);
break;
case ID_EDIT_CUT:
MessageBox(hwnd, "Вырезать", "Меню", MB_OK);
break;
case ID_EDIT_COPY:
MessageBox(hwnd, "Копировать", "Меню", MB_OK);
break;
case ID_EDIT_PASTE:
MessageBox(hwnd, "Вставить", "Меню", MB_OK);
break;
}
break;
case WM_DESTROY:
PostQuitMessage(0);
break;
default:
return DefWindowProc(hwnd, msg, wParam, lParam);
}
return 0;
}
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) {
WNDCLASS wc = {0};
wc.lpfnWndProc = WndProc;
wc.hInstance = hInstance;
wc.lpszClassName = "MyWindowClass";
RegisterClass(&wc);
HWND hwnd = CreateWindow("MyWindowClass", "Окно с меню", WS_OVERLAPPEDWINDOW,
CW_USEDEFAULT, CW_USEDEFAULT, 400, 300, NULL, NULL, hInstance, NULL);
ShowWindow(hwnd, nCmdShow);
UpdateWindow(hwnd);
MSG msg;
while (GetMessage(&msg, NULL, 0, 0)) {
TranslateMessage(&msg);
DispatchMessage(&msg);
}
return msg.wParam;
}
Диалоговые окна — это специальные окна, которые используются для взаимодействия с пользователем. Они могут отображать информацию, запрашивать данные или предоставлять выбор опций. Диалоговые окна бывают двух типов: модальные и немодальные.
- Модальные окна блокируют взаимодействие с родительским окном до тех пор, пока пользователь не закроет диалог.
- Немодальные окна позволяют пользователю взаимодействовать как с диалогом, так и с родительским окном.
1. Создание диалогового окна
Диалоговые окна создаются с помощью файла ресурсов (.rc
) или программно в коде.
1.1. Создание диалога в файле ресурсов
Пример создания диалогового окна в файле ресурсов:
// Файл ресурсов (app.rc)
IDD_DIALOG1 DIALOGEX 0, 0, 200, 100
STYLE DS_MODALFRAME | WS_POPUP | WS_CAPTION | WS_SYSMENU
CAPTION "Пример диалога"
FONT 8, "MS Sans Serif"
BEGIN
DEFPUSHBUTTON "OK", IDOK, 10, 70, 50, 14
PUSHBUTTON "Отмена", IDCANCEL, 70, 70, 50, 14
LTEXT "Введите текст:", IDC_STATIC, 10, 10, 80, 10
EDITTEXT IDC_EDIT1, 10, 25, 180, 14
END
1.2. Создание диалога программно
Пример создания диалога в коде:
HWND hwndDlg = CreateDialog(hInstance, MAKEINTRESOURCE(IDD_DIALOG1), hwndParent, DialogProc);
ShowWindow(hwndDlg, SW_SHOW);
2. Обработка диалогового окна
Обработка диалогового окна выполняется в специальной процедуре диалога (DialogProc
). Эта процедура обрабатывает сообщения, такие как нажатие кнопок или ввод текста.
Пример процедуры диалога:
INT_PTR CALLBACK DialogProc(HWND hwndDlg, UINT msg, WPARAM wParam, LPARAM lParam) {
switch (msg) {
case WM_INITDIALOG:
// Инициализация диалога
return TRUE;
case WM_COMMAND:
switch (LOWORD(wParam)) {
case IDOK: {
char text[100];
GetDlgItemText(hwndDlg, IDC_EDIT1, text, sizeof(text));
MessageBox(hwndDlg, text, "Введенный текст", MB_OK);
EndDialog(hwndDlg, IDOK);
return TRUE;
}
case IDCANCEL:
EndDialog(hwndDlg, IDCANCEL);
return TRUE;
}
break;
case WM_CLOSE:
EndDialog(hwndDlg, IDCANCEL);
return TRUE;
}
return FALSE;
}
3. Отображение модального диалога
Модальные диалоги блокируют взаимодействие с родительским окном до закрытия. Для отображения модального диалога используется функция DialogBox
.
Пример:
DialogBox(hInstance, MAKEINTRESOURCE(IDD_DIALOG1), hwndParent, DialogProc);
4. Отображение немодального диалога
Немодальные диалоги позволяют пользователю взаимодействовать с родительским окном. Для отображения немодального диалога используется функция CreateDialog
.
Пример:
HWND hwndDlg = CreateDialog(hInstance, MAKEINTRESOURCE(IDD_DIALOG1), hwndParent, DialogProc);
ShowWindow(hwndDlg, SW_SHOW);
5. Работа с элементами управления
Диалоговые окна содержат элементы управления, такие как кнопки, текстовые поля, списки и т.д. Для работы с этими элементами используются функции API, такие как GetDlgItemText
, SetDlgItemText
, SendDlgItemMessage
.
5.1. Получение текста из текстового поля
Пример:
char text[100];
GetDlgItemText(hwndDlg, IDC_EDIT1, text, sizeof(text));
5.2. Установка текста в текстовое поле
Пример:
SetDlgItemText(hwndDlg, IDC_EDIT1, "Привет, мир!");
5.3. Работа с кнопками
Пример обработки нажатия кнопки:
case WM_COMMAND:
if (LOWORD(wParam) == IDC_BUTTON1) {
MessageBox(hwndDlg, "Кнопка нажата!", "Уведомление", MB_OK);
}
break;
6. Пример программы с диалоговым окном
Рассмотрим пример программы, которая отображает модальное диалоговое окно с текстовым полем и кнопками.
6.1. Файл ресурсов (app.rc
)
IDD_DIALOG1 DIALOGEX 0, 0, 200, 100
STYLE DS_MODALFRAME | WS_POPUP | WS_CAPTION | WS_SYSMENU
CAPTION "Пример диалога"
FONT 8, "MS Sans Serif"
BEGIN
DEFPUSHBUTTON "OK", IDOK, 10, 70, 50, 14
PUSHBUTTON "Отмена", IDCANCEL, 70, 70, 50, 14
LTEXT "Введите текст:", IDC_STATIC, 10, 10, 80, 10
EDITTEXT IDC_EDIT1, 10, 25, 180, 14
END
6.2. Код программы (main.c
)
#include <windows.h>
#define IDC_EDIT1 101
INT_PTR CALLBACK DialogProc(HWND hwndDlg, UINT msg, WPARAM wParam, LPARAM lParam) {
switch (msg) {
case WM_INITDIALOG:
return TRUE;
case WM_COMMAND:
switch (LOWORD(wParam)) {
case IDOK: {
char text[100];
GetDlgItemText(hwndDlg, IDC_EDIT1, text, sizeof(text));
MessageBox(hwndDlg, text, "Введенный текст", MB_OK);
EndDialog(hwndDlg, IDOK);
return TRUE;
}
case IDCANCEL:
EndDialog(hwndDlg, IDCANCEL);
return TRUE;
}
break;
case WM_CLOSE:
EndDialog(hwndDlg, IDCANCEL);
return TRUE;
}
return FALSE;
}
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) {
DialogBox(hInstance, MAKEINTRESOURCE(IDD_DIALOG1), NULL, DialogProc);
return 0;
}
Прикладной интерфейс для обработки пользовательского ввода
Обработка пользовательского ввода — это одна из ключевых задач при разработке приложений. Пользовательский ввод может поступать от различных устройств, таких как клавиатура, мышь, сенсорный экран, и даже от голосовых команд. В Windows для обработки пользовательского ввода используется API, который предоставляет функции и сообщения для работы с этими устройствами.
1. Обработка ввода с клавиатуры
Клавиатурный ввод обрабатывается с помощью сообщений WM_KEYDOWN
, WM_KEYUP
, WM_CHAR
и других.
1.1. Сообщения клавиатуры
-
WM_KEYDOWN
: генерируется при нажатии клавиши. -
WM_KEYUP
: генерируется при отпускании клавиши. -
WM_CHAR
: генерируется при вводе символа (с учетом раскладки клавиатуры).
Пример обработки клавиатурного ввода:
LRESULT CALLBACK WndProc(HWND hwnd, UINT msg, WPARAM wParam, LPARAM lParam) {
switch (msg) {
case WM_KEYDOWN:
MessageBox(hwnd, "Клавиша нажата", "Клавиатура", MB_OK);
break;
case WM_CHAR:
if (wParam == 'A') {
MessageBox(hwnd, "Нажата клавиша 'A'", "Клавиатура", MB_OK);
}
break;
case WM_DESTROY:
PostQuitMessage(0);
break;
default:
return DefWindowProc(hwnd, msg, wParam, lParam);
}
return 0;
}
1.2. Параметры сообщений клавиатуры
WPARAM
: виртуальный код клавиши (Virtual Key Code). Например,VK_SPACE
для пробела,VK_RETURN
для Enter.LPARAM
: содержит дополнительную информацию, такую как:- Повторение нажатия (биты 0–15).
- Скан-код клавиши (биты 16–23).
- Флаги расширенных клавиш (бит 24).
- Состояние клавиш-модификаторов (Alt, Ctrl, Shift) (биты 29–31).
Пример обработки WM_KEYDOWN
:
case WM_KEYDOWN:
if (wParam == VK_SPACE) {
MessageBox(hwnd, "Пробел нажат", "Клавиатура", MB_OK);
}
break;
1.3. Функции для работы с клавиатурой
GetAsyncKeyState
: проверяет состояние клавиши (нажата/не нажата).GetKeyboardState
: получает состояние всех клавиш клавиатуры.
Пример использования GetAsyncKeyState
:
if (GetAsyncKeyState(VK_SPACE) {
MessageBox(hwnd, "Пробел нажат", "Клавиатура", MB_OK);
}
2. Обработка ввода с мыши
Мышиный ввод обрабатывается с помощью сообщений, таких как WM_MOUSEMOVE
, WM_LBUTTONDOWN
, WM_RBUTTONDOWN
и других.
2.1. Сообщения мыши
WM_MOUSEMOVE
: генерируется при перемещении мыши.WM_LBUTTONDOWN
: генерируется при нажатии левой кнопки мыши.WM_RBUTTONDOWN
: генерируется при нажатии правой кнопки мыши.WM_MOUSEWHEEL
: генерируется при прокрутке колеса мыши.
Пример обработки мышиного ввода:
LRESULT CALLBACK WndProc(HWND hwnd, UINT msg, WPARAM wParam, LPARAM lParam) {
switch (msg) {
case WM_LBUTTONDOWN:
MessageBox(hwnd, "Левая кнопка мыши нажата", "Мышь", MB_OK);
break;
case WM_RBUTTONDOWN:
MessageBox(hwnd, "Правая кнопка мыши нажата", "Мышь", MB_OK);
break;
case WM_MOUSEMOVE: {
int x = LOWORD(lParam);
int y = HIWORD(lParam);
char buffer[50];
sprintf(buffer, "Мышь: X=%d, Y=%d", x, y);
SetWindowText(hwnd, buffer);
break;
}
case WM_DESTROY:
PostQuitMessage(0);
break;
default:
return DefWindowProc(hwnd, msg, wParam, lParam);
}
return 0;
}
2.2. Параметры сообщений мыши
WPARAM
: состояние клавиш-модификаторов (Ctrl, Shift, Alt) и кнопок мыши.MK_LBUTTON
: нажата левая кнопка мыши.MK_RBUTTON
: нажата правая кнопка мыши.MK_MBUTTON
: нажата средняя кнопка мыши.MK_CONTROL
: нажата клавиша Ctrl.MK_SHIFT
: нажата клавиша Shift.
LPARAM
: координаты курсора (X и Y) относительно верхнего левого угла клиентской области окна.-
LOWORD(lParam)
: координата X. -
HIWORD(lParam)
: координата Y.
-
Пример обработки WM_MOUSEMOVE
:
case WM_MOUSEMOVE: {
int x = LOWORD(lParam);
int y = HIWORD(lParam);
char buffer[50];
sprintf(buffer, "Мышь: X=%d, Y=%d", x, y);
SetWindowText(hwnd, buffer);
break;
}
2.3. Сообщение WM_MOUSEWHEEL
WPARAM
:HIWORD(wParam)
: значение прокрутки (положительное — вверх, отрицательное — вниз).LOWORD(wParam)
: состояние клавиш-модификаторов.
LPARAM
: координаты курсора (X и Y) в экранных координатах.
Пример обработки WM_MOUSEWHEEL
:
case WM_MOUSEWHEEL: {
int delta = GET_WHEEL_DELTA_WPARAM(wParam); // Значение прокрутки
if (delta > 0) {
MessageBox(hwnd, "Прокрутка вверх", "Мышь", MB_OK);
} else {
MessageBox(hwnd, "Прокрутка вниз", "Мышь", MB_OK);
}
break;
}
2.4. Функции для работы с мышью
GetCursorPos
: получает текущие координаты курсора.SetCursorPos
: устанавливает позицию курсора.
Пример использования GetCursorPos
:
POINT pt;
GetCursorPos(&pt);
char buffer[50];
sprintf(buffer, "Курсор: X=%d, Y=%d", pt.x, pt.y);
MessageBox(hwnd, buffer, "Мышь", MB_OK);
3. Обработка сенсорного ввода
Сенсорный ввод обрабатывается с помощью сообщений, таких как WM_TOUCH
, и функций, таких как GetTouchInputInfo
.
3.1. Сообщения сенсорного ввода
WM_TOUCH
: генерируется при касании экрана.
Параметры сообщения WM_TOUCH
: — WPARAM
: количество точек касания. — LPARAM
: дескриптор структуры HTOUCHINPUT
, содержащей информацию о касаниях.
Пример обработки сенсорного ввода:
case WM_TOUCH: {
UINT inputCount = LOWORD(wParam);
HTOUCHINPUT hTouchInput = (HTOUCHINPUT)lParam;
TOUCHINPUT* pTouchInputs = new TOUCHINPUT[inputCount];
if (GetTouchInputInfo(hTouchInput, inputCount, pTouchInputs, sizeof(TOUCHINPUT))) {
for (UINT i = 0; i < inputCount; i++) {
int x = pTouchInputs[i].x / 100;
int y = pTouchInputs[i].y / 100;
char buffer[50];
sprintf(buffer, "Касание: X=%d, Y=%d", x, y);
MessageBox(hwnd, buffer, "Сенсорный ввод", MB_OK);
}
}
delete[] pTouchInputs;
CloseTouchInputHandle(hTouchInput);
break;
}
4. Обработка голосового ввода
Голосовой ввод может быть обработан с помощью API распознавания речи, такого как Windows Speech Recognition или Microsoft Speech API (SAPI).
4.1. Использование SAPI
Пример инициализации распознавания речи:
#include <sapi.h>
ISpRecognizer* pRecognizer = NULL;
CoInitialize(NULL);
CoCreateInstance(CLSID_SpSharedRecognizer, NULL, CLSCTX_ALL, IID_ISpRecognizer, (void**)&pRecognizer);
ISpRecoContext* pRecoContext = NULL;
pRecognizer->CreateRecoContext(&pRecoContext);
pRecoContext->SetNotifyWindowMessage(hwnd, WM_USER, 0, 0);
pRecoContext->SetInterest(SPFEI(SPEI_RECOGNITION), SPFEI(SPEI_RECOGNITION));
ISpRecoGrammar* pGrammar = NULL;
pRecoContext->CreateGrammar(0, &pGrammar);
pGrammar->LoadDictation(NULL, SPLO_STATIC);
pGrammar->SetDictationState(SPRS_ACTIVE);
5. Пример программы для обработки пользовательского ввода
Рассмотрим пример программы, которая обрабатывает клавиатурный и мышиный ввод.
5.1. Код программы (main.c
)
#include <windows.h>
#include <stdio.h>
LRESULT CALLBACK WndProc(HWND hwnd, UINT msg, WPARAM wParam, LPARAM lParam) {
switch (msg) {
case WM_KEYDOWN:
MessageBox(hwnd, "Клавиша нажата", "Клавиатура", MB_OK);
break;
case WM_CHAR:
if (wParam == 'A') {
MessageBox(hwnd, "Нажата клавиша 'A'", "Клавиатура", MB_OK);
}
break;
case WM_LBUTTONDOWN:
MessageBox(hwnd, "Левая кнопка мыши нажата", "Мышь", MB_OK);
break;
case WM_RBUTTONDOWN:
MessageBox(hwnd, "Правая кнопка мыши нажата", "Мышь", MB_OK);
break;
case WM_MOUSEMOVE: {
int x = LOWORD(lParam);
int y = HIWORD(lParam);
char buffer[50];
sprintf(buffer, "Мышь: X=%d, Y=%d", x, y);
SetWindowText(hwnd, buffer);
break;
}
case WM_DESTROY:
PostQuitMessage(0);
break;
default:
return DefWindowProc(hwnd, msg, wParam, lParam);
}
return 0;
}
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) {
WNDCLASS wc = {0};
wc.lpfnWndProc = WndProc;
wc.hInstance = hInstance;
wc.lpszClassName = "MyWindowClass";
RegisterClass(&wc);
HWND hwnd = CreateWindow("MyWindowClass", "Обработка ввода", WS_OVERLAPPEDWINDOW,
CW_USEDEFAULT, CW_USEDEFAULT, 400, 300, NULL, NULL, hInstance, NULL);
ShowWindow(hwnd, nCmdShow);
UpdateWindow(hwnd);
MSG msg;
while (GetMessage(&msg, NULL, 0, 0)) {
TranslateMessage(&msg);
DispatchMessage(&msg);
}
return msg.wParam;
}
Наверх
What are the basic parts of the Windows 10 graphical user interface (GUI)?
Here are a few selected terms from Microsft’s MSDN website called Glossary of UI Terminology.
desktop The visual work area that fills the screen. The desktop is also a container and can be used as a convenient location to place objects stored in the file system.
menu button A command button that displays a menu.
menu command A choice on a menu.
taskbar A special toolbar that docks on an edge of the desktop supplied by the system. The taskbar includes the Start button, a button for each open primary window, and a status area.
The system tray is located in the Windows Taskbar, usually at the bottom right corner next to the clock. It contains miniature icons for easy access to system functions such as antivirus settings, printer, modem, sound volume, battery status, and more.
Если вы нажимаете кнопки в приложении, отправляете файл в корзину, листаете фотографии в ленте, выходите в сеть или просто пользуетесь компьютером, то вы активно используете графический интерфейс. GUI (Graphical User Interface) — графический пользовательский интерфейс придуман для того, чтобы максимально упростить взаимодействие человека с приложением, сайтом, устройством.
В России GUI ещё часто называют ГИП (графический интерфейс пользователя). Графическим его обозвали, потому что он активно использует графику: иконки, кнопки, различные окна. Без ГИП работать в компьютере было бы мукой, пришлось бы постоянно использовать текстовые команды и код.
С GUI же всё просто, потому что графический дизайнер и UI/UX-дизайнер заранее продумали каждый ваш шаг и создали интерфейс, в котором вы разберётесь за несколько секунд. Без этих специалистов просмотр почты, онлайн-шопинг и прочие повседневные вещи были бы не такими приятными, поэтому их так высоко ценят на рынке. Если вы хотите освоить эту профессию и научиться создавать уникальные дизайны, приходите в школу Логомашина, а мы пока вернёмся к статье и разберём, что такое графический интерфейс, как он появился и какие у него есть преимущества, недостатки.
Что такое графический интерфейс?
Представьте, что вам нужно скопировать папку с файлами. Сегодня вы просто нажимаете на неё мышкой и перетаскиваете, даже не задумываясь о своих действиях. Но раньше, когда графических интерфейсов ещё не существовало, пользователи сидели перед чёрным экраном и вводили команды вручную (программный механизм CLI). Для перемещения папки нужно было напечатать целую строку кода — ошиблись в одном символе, и команда не сработает. Никаких иконок, никаких кнопок — только текст.
Команда для копирования папки в системе CLI
Все окна, меню, значки, курсор, другие компоненты, которые вы видите при открытии гаджета — это всё элементы графического пользовательского интерфейса. ГИП сделал компьютер удобным, интуитивно понятным, доступным для большинства людей. Без него пользоваться гаджетами было бы попросту неудобно, люди бы путались во текстовых командах и коде.
Копирование папки в GUI
Краткая история появления
Многие разработчики и специалисты приложили руку к созданию пользовательского интерфейса. До 1970 года компьютеры использовали преимущественно только опытные ИТ-специалисты, так как интерфейс сбивал с толку и требовал знания кода. В 1960 были предприняты первые попытки создать что-то похожее на GUI, но в массы это не пошло.
Первым значительным прорывом стал проект компании Xerox в 1981 году. Они выпустили Xerox Star — компьютер с GUI, разработанный для офисного использования. Он даже был оснащён иконками, окнами, кнопками и показывал пользователю именно то, что впоследствии печатал принтер. Эта функция называлась WYSIWYG — буквально «что видишь, то и получаешь».
GUI от Xerox
В 1984 году Apple представила миру Macintosh, который стал настоящим хитом.
Здесь уже поменяли многое:
- значок «панель меню» — по щелчку мыши выпадал список команд;
- по бокам окон появились ленты прокрутки;
- добавилась анимация для открытия/закрытия окон.
Операционная система System 1
Это был огромный шаг вперёд по сравнению с текстовыми интерфейсами. Год спустя Microsoft выпустила свою первую версию Windows, и GUI стал стандартом для персональных компьютеров.
Позже были разработаны различные ГИП для UNIX, других ОС. А появившиеся впоследствии разнообразные виды графического дизайна способствовали слиянию инженерии с творчеством, создавая удивительные вариации пользовательского интерфейса.
Как работают графические интерфейсы
Графический пользовательский интерфейс отображает то, что пользователь может нажимать для выполнения необходимых ему задач. Обычно он включает:
- Значки — маленькие изображения представляют собой файлы, папки или приложения. Например, значок корзины ассоциируется с местом для удаления файлов. Эта визуальная метафора помогает пользователям интуитивно понимать, что будет происходить при взаимодействии с объектом.
- Кнопки используются для выполнения различных действий, например, «Сохранить», «Закрыть», «Удалить». Нажатие на кнопку вызывает определённое действие в системе, будь то открытие файла или запуск приложения.
- Панель инструментов, меню — это группы кнопок или списки команд, которые облегчают доступ к основным функциям приложения или системы. Например, в текстовом редакторе панель инструментов может содержать кнопки для форматирования текста.
- Полосы прокрутки позволяют перемещаться по содержимому экрана, если оно не умещается целиком.
В зависимости от вида гаджета, действие выполняется с помощью курсора мышки, сенсорного экрана или клавиатуры. При нажатии как раз происходит передача команды, на которую заранее запрограммирована кнопка. Человеку не нужно вводить дополнительные символы, понимать языки программирования. Современные GUI даже дают обратную связь: кнопка может изменить цвет или издать звук, подтверждая, что действие началось.
Абстракция в графических интерфейсах
Графический интерфейс — это, по сути, абстракция, созданная для того, чтобы упростить сложные процессы и сделать их доступными для обычного пользователя. Цель — скрыть технические детали и представить только те элементы, которые нужны для удобного взаимодействия. В GUI это означает, что вместо работы с кодом и системными командами, пользователь видит иконки, кнопки, окна.
Представьте, что вам нужно постирать вещи в стиральной машине. Вы вряд ли будете задумываться о «внутренностях»: как работает мотор, как по трубам поступает вода, как нагревательный элемент доводит воду до нужной температуры. Вы просто нажимаете нужную кнопку. Это и есть абстракция: сложная система скрыта, и вам не нужно вникать во внутренние процессы, чтобы добиться желаемого.
То же самое происходит и с компьютером. Когда вы перетаскиваете файл в корзину, вы не перемещаете его в реальную корзину, а лишь даёте команду системе отметить его для удаления. Вся работа с файлами, их копирование, перемещение, удаление — это абстрактные процессы, скрытые за понятными пользователю действиями.
Возможность упрощения — одно из ключевых достоинств GUI, благодаря которому мы можем использовать компьютеры, даже не задумываясь о внутреннем устройстве.
Примеры
Графический интерфейс окружает нас практически повсюду. Один из них вы наблюдаете прямо сейчас, пока читаете эту статью.
Примеры Graphical User Interface:
- Сайты: google.com, yandex.ru, aeroflot.ru, forbes.com
- Мобильные приложения: от социальных сетей (TikTok) до приложений для покупок (Amazon)
- ПО: AutoCAD, Microsoft Excel, Figma, Renderforest Graphic Macer
- Веб-браузеры: Chrome, Firefox, Internet Explorer, Brave, Opera
- ОС: Windows, HarmonyOS, macOS, Android, Linux
- Игровые консоли: PlayStation, Xbox, Nintendo Switch
GUI Windows
Преимущества графического интерфейса
- Он понятнее, чем текстовые команды. Использовать GUI может каждый, даже тот, кто совсем далёк от техники.
- Некоторые ГИП адаптированы для людей с ограниченными возможностями или нарушениями здоровья. Например, смартфоны могут использовать иконки кнопок большего размера для слабовидящих, голосовое управление для пожилых людей.
- Визуальные элементы более привлекательны для человека, чем обычный текст. Это особенно важно в маркетинговых кампаниях. Современные тенденции в графическом дизайне пытаются любым способом завладеть вниманием пользователя, а с помощью графики это сделать проще.
- Графический интерфейс помогает ускорить выполнение заданий. Одна кнопка может заменить целую команду.
- GUI может адаптироваться под разные устройства и экраны, включая компьютеры, планшеты и смартфоны.
Недостатки GUI
Дружелюбная система управления Graphical User Interface всё же имеет недостатки. К ним относится повышенное потребление системных ресурсов. Поэтому GUI:
- Медленнее относительно Command-Line User Interface.
- Требует большей памяти, поскольку объекты загружены в оперативную память.
- Недостаточно эффективен для работ более продвинутых пользователей, разработчиков.
- Требуется больше усилий, времени, ресурсов при создании. Понадобятся разработчики, грамотные дизайнеры.
Графические интерфейсы: как они сделали компьютеры доступными для всех
Сегодня графические интерфейсы настолько интегрированы в нашу жизнь, что мы редко задумываемся об их значении. Разработка Graphical User Interface очень быстро приобрела массовый характер, сделала компьютеры, телефоны, планшеты незаменимой частью жизни большинства людей. Теперь это не гигантские машины, к которым боишься подойти, а незаменимые помощники для каждого из нас.
При этом технологии продолжают стремительно развиваться. С каждым годом интерфейсы становятся все более интуитивными, и, кто знает, возможно, в будущем нас ждут новые, ещё более удобные способы взаимодействия с компьютерами.
Онлайн-курс: «Профессия UX/UI-дизайнер»
- Научим создавать интуитивно понятные интерфейсы и сайты.
- Дадим безлимитную обратную связь по учебным и реальным проектам.
- Подарим 8 дополнительных курсов: нейросети, английский для дизайнеров и другие.
Краткое содержание
Что такое GUI?
GUI (Graphical User Interface) — графический пользовательский интерфейс, который позволяет взаимодействовать с устройствами через визуальные элементы (кнопки, иконки, окна).
Примеры Graphical Interface:
- сайты;
- мобильные приложения;
- программное обеспечение;
- веб-браузеры;
- операционные системы;
- игровые консоли.
Какие преимущества у графического пользовательского интерфейса?
- Легко освоить.
- Привлекателен визуально.
- Ускоряет выполнение задач — одна кнопка заменяет целую команду.
- Адаптируется под разные устройства и экраны.
- Подходит для людей с ограниченными возможностями (например, крупные иконки для слабовидящих).
А какие у него есть недостатки?
- Требует больше системных ресурсов.
- Работает медленнее, чем текстовый интерфейс (CLI).
- Не всегда удобен для продвинутых пользователей, разработчиков.
- Дорого и сложно разрабатывать — нужны программисты, дизайнеры.
-
Home
-
Knowledge Base
- What is Graphical User Interface (GUI) | Complete Guide
By Vicky |
Last Updated
Graphical user interfaces (GUI) are more friendly to users than command-line interfaces used in early computers. It is an important breakthrough in human-computer iteration interface. Keep reading this article to know GUI more.
GUI refers to graphical user interface which allows users to interact with electronic devices through graphical icons. Graphical user interfaces are visually more acceptable to users than command-line interfaces (CLI) used by computers in the early days.
Overview of GUI
In computing, GUI refers to the computer operational user interface displayed graphically for human-computer interaction. It allows users to use input devices such as a mouse to manipulate icons or menu options on the screen to select commands, invoke files, start programs or perform other daily tasks.
Before the advent of the graphical user interface, computer users mainly rely on command-line interface (CLI) which needs to be implemented by putting command lines to realize the human-computer communication. Things are different since GUI appears.
In the 1980s, Apple first introduced the graphical user interface into the field of microcomputers. The Macintosh launched a revolutionary change in the human-machine interface of the microcomputer with its full mouse, pull-down menu operation and intuitive graphical interface.
Then Microsoft introduced the Windows operating system, which evolved from Windows 3.0 to Windows 10, enabling the GUI to be applied to a wider range of personal computer platforms.
The wide application of GUI is one of the great achievements of computer development nowadays. It greatly facilitates the use of non-professional users. From then on, people no longer need to memorize a large number of commands by rote. Instead, they can operate conveniently through windows, menus, buttons and so on.
The characteristic of the graphical interface is that people do not need to memorize and type cumbersome commands, just use the mouse to directly manipulate the interface. Embedded GUI has the following basic requirements: lightweight, less resources, high performance, high reliability, easy to transplant, configurable and so on.
Structural Elements
The graphical user interface uses visual conventions to display the general information. Some conventions are used to construct the structure of static elements on which users can interact.
Desktop
A desktop is displayed after start-up, sometimes referred to as the “desktop environment” including windows and file browsers. In the general interface, icons for various applications and data are placed on the desktop, so users can start working in the desktop.
In general, the user’s desktop contents are actually saved in the system disk (C drive). Wallpaper, the desktop background which can be set to a variety of pictures and a variety of accessories, becoming one of the important factors of visual beauty.
Window
Windows are the basic units that the application sets in the graphical user interface for using data. A window is an area on the screen where information is displayed. In the window, the user can manipulate the application in the window to manage, generate and edit the data. Usually, there are menus and icons around the window, and the data is placed in the center.
The user can easily manipulate a window: in the window, there are function keys according to the contents of various data/applications, with which the user can display and hide the window, and can move it to any area by dragging the window and so on.
Multiple windows can also be opened at the same time, in which case each window can display a different application or file – which is very useful when working in a multitasking environment. RAM is the only limit to the number of windows that can be opened at one time.
Menu
Menus allow users to execute commands by selecting from a list of options. Users use the mouse or other pointing devices (including the keyboard) in the GUI to select an option. Menus are usually placed at the top or bottom of the screen, all the commands that operating an application needed are grouped together.
Menus are convenient because they show the commands available in the software, so all the users need are just selecting and clicking.
Icons
An icon is a small picture that represents objects such as a file, program, or application. Icons are shortcuts to executing commands, opening documents and running programs. It is a quick way for you to do all these operations.
Tabs
A tab is a rectangular box, usually containing text label or graphical icon associated with a view pane. For example, with a browser, you can open multiple pages simultaneously in a window and navigate quickly between them by clicking the tab associated with the page. Tabs are usually grouped at the top of the window. Tabs also exist in the settings pane of many applications.
Final Words
The graphical user interface brings great convenience to computer users. Its appearance allows users to avoid having to face interfaces with text only, which makes the operation simple and less boring.
About The Author
Position: Columnist
Vicky is a website editor who has been writing tech articles since she was graduated from university. Most of her articles talk about Windows PC and hard disk issues. Some of her articles also touch on YouTube usage and issues.
During her spare time, she likes to spend time reading, watching videos, and sitting on her Yoga mat to relax.
A graphical user interface, or GUI[a], is a form of user interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation. In many applications, GUIs are used instead of text-based UIs, which are based on typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs),[4][5][6] which require commands to be typed on a computer keyboard.
The actions in a GUI are usually performed through direct manipulation of the graphical elements.[7][8][9] Beyond computers, GUIs are used in many handheld mobile devices such as MP3 players, portable media players, gaming devices, smartphones and smaller household, office and industrial controls. The term GUI tends not to be applied to other lower-display resolution types of interfaces, such as video games (where head-up displays (HUDs)[10] are preferred), or not including flat screens like volumetric displays[11] because the term is restricted to the scope of 2D display screens able to describe generic information, in the tradition of the computer science research at the Xerox Palo Alto Research Center.
GUI and interaction design
[edit]
Designing the visual composition and temporal behavior of a GUI is an important part of software application programming in the area of human–computer interaction. Its goal is to enhance the efficiency and ease of use for the underlying logical design of a stored program, a design discipline named usability. Methods of user-centered design are used to ensure that the visual language introduced in the design is well-tailored to the tasks.
The visible graphical interface features of an application are sometimes referred to as chrome or GUI.[12][13][14] Typically, users interact with information by manipulating visual widgets that allow for interactions appropriate to the kind of data they hold. The widgets of a well-designed interface are selected to support the actions necessary to achieve the goals of users. A model–view–controller allows flexible structures in which the interface is independent of and indirectly linked to application functions, so the GUI can be customized easily. This allows users to select or design a different skin or theme at will, and eases the designer’s work to change the interface as user needs evolve. Good GUI design relates to users more, and to system architecture less.
Large widgets, such as windows, usually provide a frame or container for the main presentation content such as a web page, email message, or drawing. Smaller ones usually act as a user-input tool.
A GUI may be designed for the requirements of a vertical market as application-specific GUIs. Examples include automated teller machines (ATM), point of sale (POS) touchscreens at restaurants,[15] self-service checkouts used in a retail store, airline self-ticket and check-in, information kiosks in a public space, like a train station or a museum, and monitors or control screens in an embedded industrial application which employ a real-time operating system (RTOS).
Cell phones and handheld game systems also employ application specific touchscreen GUIs. Newer automobiles use GUIs in their navigation systems and multimedia centers, or navigation multimedia center combinations.
- Sample graphical environments
-
-
-
-
Windows on an example Wayland compositor
-
-
-
-
-
-
-
A GUI uses a combination of technologies and devices to provide a platform that users can interact with, for the tasks of gathering and producing information.
A series of elements conforming a visual language have evolved to represent information stored in computers. This makes it easier for people with few computer skills to work with and use computer software. The most common combination of such elements in GUIs is the windows, icons, text fields, canvases, menus, pointer (WIMP) paradigm, especially in personal computers.[16]
The WIMP style of interaction uses a virtual input device to represent the position of a pointing device’s interface, most often a mouse, and presents information organized in windows and represented with icons. Available commands are compiled together in menus, and actions are performed making gestures with the pointing device. A window manager facilitates the interactions between windows, applications, and the windowing system. The windowing system handles hardware devices such as pointing devices, graphics hardware, and positioning of the pointer.
In personal computers, all these elements are modeled through a desktop metaphor to produce a simulation called a desktop environment in which the display represents a desktop, on which documents and folders of documents can be placed. Window managers and other software combine to simulate the desktop environment with varying degrees of realism.
Entries may appear in a list to make space for text and details, or in a grid for compactness and larger icons with little space underneath for text. Variations in between exist, such as a list with multiple columns of items and a grid of items with rows of text extending sideways from the icon.[17]
Multi-row and multi-column layouts commonly found on the web are «shelf» and «waterfall». The former is found on image search engines, where images appear with a fixed height but variable length, and is typically implemented with the CSS property and parameter display: inline-block;
. A waterfall layout found on Imgur and TweetDeck with fixed width but variable height per item is usually implemented by specifying column-width:
.
Post-WIMP interface
[edit]
Smaller app mobile devices such as personal digital assistants (PDAs) and smartphones typically use the WIMP elements with different unifying metaphors, due to constraints in space and available input devices. Applications for which WIMP is not well suited may use newer interaction techniques, collectively termed post-WIMP UIs.[18]
As of 2011, some touchscreen-based operating systems such as Apple’s iOS (iPhone) and Android use the class of GUIs named post-WIMP. These support styles of interaction using more than one finger in contact with a display, which allows actions such as pinching and rotating, which are unsupported by one pointer and mouse.[19]
Human interface devices, for the efficient interaction with a GUI include a computer keyboard, especially used together with keyboard shortcuts, pointing devices for the cursor (or rather pointer) control: mouse, pointing stick, touchpad, trackball, joystick, virtual keyboards, and head-up displays (translucent information devices at the eye level).
There are also actions performed by programs that affect the GUI. For example, there are components like inotify or D-Bus to facilitate communication between computer programs.
Ivan Sutherland developed Sketchpad in 1963, widely held as the first graphical computer-aided design program. It used a light pen to create and manipulate objects in engineering drawings in realtime with coordinated graphics. In the late 1960s, researchers at the Stanford Research Institute, led by Douglas Engelbart, developed the On-Line System (NLS), which used text-based hyperlinks manipulated with a then-new device: the mouse. (A 1968 demonstration of NLS became known as «The Mother of All Demos».) In the 1970s, Engelbart’s ideas were further refined and extended to graphics by researchers at Xerox PARC and specifically Alan Kay, who went beyond text-based hyperlinks and used a GUI as the main interface for the Smalltalk programming language, which ran on the Xerox Alto computer, released in 1973. Most modern general-purpose GUIs are derived from this system.
The Xerox PARC GUI consisted of graphical elements such as windows, menus, radio buttons, and check boxes. The concept of icons was later introduced by David Canfield Smith, who had written a thesis on the subject under the guidance of Kay.[20][21][22] The PARC GUI employs a pointing device along with a keyboard. These aspects can be emphasized by using the alternative term and acronym for windows, icons, menus, pointing device (WIMP). This effort culminated in the 1973 Xerox Alto, the first computer with a GUI, though the system never reached commercial production.
The first commercially available computer with a GUI was the 1979 PERQ workstation, manufactured by Three Rivers Computer Corporation. Its design was heavily influenced by the work at Xerox PARC. In 1981, Xerox eventually commercialized the ideas from the Alto in the form of a new and enhanced system – the Xerox 8010 Information System – more commonly known as the Xerox Star.[23][24] These early systems spurred many other GUI efforts, including Lisp machines by Symbolics and other manufacturers, the Apple Lisa (which presented the concept of menu bar and window controls) in 1983, the Apple Macintosh 128K in 1984, and the Atari ST with Digital Research’s GEM, and Commodore Amiga in 1985. Visi On was released in 1983 for the IBM PC compatible computers, but was never popular due to its high hardware demands.[25] Nevertheless, it was a crucial influence on the contemporary development of Microsoft Windows.[26]
Apple, Digital Research, IBM and Microsoft used many of Xerox’s ideas to develop products, and IBM’s Common User Access specifications formed the basis of the GUIs used in Microsoft Windows, IBM OS/2 Presentation Manager, and the Unix Motif toolkit and window manager. These ideas evolved to create the interface found in current versions of Microsoft Windows, and in various desktop environments for Unix-like operating systems, such as macOS and Linux. Thus most current GUIs have largely common idioms.
GUIs were a hot topic in the early 1980s. The Apple Lisa was released in 1983, and various windowing systems existed for DOS operating systems (including PC GEM and PC/GEOS). Individual applications for many platforms presented their own GUI variants.[27] Despite the GUI’s advantages, many reviewers questioned the value of the entire concept,[28] citing hardware limits and problems in finding compatible software.
In 1984, Apple released a television commercial which introduced the Apple Macintosh during the telecast of Super Bowl XVIII by CBS,[29] with allusions to George Orwell’s noted novel Nineteen Eighty-Four. The goal of the commercial was to make people think about computers, identifying the user-friendly interface as a personal computer which departed from prior business-oriented systems,[30] and becoming a signature representation of Apple products.[31]
In 1985, Commodore released the Amiga 1000, along with Workbench and Kickstart 1.0 (which contained Intuition). This interface ran as a separate task, meaning it was very responsive and, unlike other GUIs of the time, it didn’t freeze up when a program was busy. Additionally, it was the first GUI to introduce something resembling Virtual Desktops.
Windows 95, accompanied by an extensive marketing campaign,[32] was a major success in the marketplace at launch and shortly became the most popular desktop operating system.[33]
In 2007, with the iPhone[34] and later in 2010 with the introduction of the iPad,[35] Apple popularized the post-WIMP style of interaction for multi-touch screens, and those devices were considered to be milestones in the development of mobile devices.[36][37]
The GUIs familiar to most people as of the mid-late 2010s are Microsoft Windows, macOS, and the X Window System interfaces for desktop and laptop computers, and Android, Apple’s iOS, Symbian, BlackBerry OS, Windows Phone/Windows 10 Mobile, Tizen, WebOS, and Firefox OS for handheld (smartphone) devices.[38][39]
Comparison to other interfaces
[edit]
People said it’s more of a right-brain machine and all that—I think there is some truth to that. I think there is something to dealing in a graphical interface and a more kinetic interface—you’re really moving information around, you’re seeing it move as though it had substance. And you don’t see that on a PC. The PC is very much of a conceptual machine; you move information around the way you move formulas, elements on either side of an equation. I think there’s a difference.
Command-line interfaces
[edit]
Since the commands available in command line interfaces can be many, complex operations can be performed using a short sequence of words and symbols. Custom functions may be used to facilitate access to frequent actions.
Command-line interfaces are more lightweight, as they only recall information necessary for a task; for example, no preview thumbnails or graphical rendering of web pages. This allows greater efficiency and productivity once many commands are learned.[4] But reaching this level takes some time because the command words may not be easily discoverable or mnemonic. Also, using the command line can become slow and error-prone when users must enter long commands comprising many parameters or several different filenames at once. However, windows, icons, menus, pointer (WIMP) interfaces present users with many widgets that represent and can trigger some of the system’s available commands.
GUIs can be made quite hard when dialogs are buried deep in a system or moved about to different places during redesigns. Also, icons and dialog boxes are usually harder for users to script.
WIMPs extensively use modes, as the meaning of all keys and clicks on specific positions on the screen are redefined all the time. Command-line interfaces use modes only in limited forms, such as for current directory and environment variables.
Most modern operating systems provide both a GUI and some level of a CLI, although the GUIs usually receive more attention.
GUI wrappers find a way around the command-line interface versions (CLI) of (typically) Linux and Unix-like software applications and their text-based UIs or typed command labels. While command-line or text-based applications allow users to run a program non-interactively, GUI wrappers atop them avoid the steep learning curve of the command-line, which requires commands to be typed on the keyboard. By starting a GUI wrapper, users can intuitively interact with, start, stop, and change its working parameters, through graphical icons and visual indicators of a desktop environment, for example. Applications may also provide both interfaces, and when they do the GUI is usually a WIMP wrapper around the command-line version. This is especially common with applications designed for Unix-like operating systems. The latter used to be implemented first because it allowed the developers to focus exclusively on their product’s functionality without bothering about interface details such as designing icons and placing buttons. Designing programs this way also allows users to run the program in a shell script.
Three-dimensional graphical user interface
[edit]
This section is about uniquely software 3D UIs. For both software and hardware 3D input/output devices, see 3D UIs.
Many environments and games use the methods of 3D graphics to project 3D GUI objects onto the screen. The use of 3D graphics has become increasingly common in mainstream operating systems (ex. Windows Aero, and Aqua (macOS)) to create attractive interfaces, termed eye candy (which includes, for example, the use of drop shadows underneath windows and the cursor), or for functional purposes only possible using three dimensions. For example, user switching is represented by rotating a cube with faces representing each user’s workspace, and window management is represented via a Rolodex-style flipping mechanism in Windows Vista (see Windows Flip 3D). In both cases, the operating system transforms windows on-the-fly while continuing to update the content of those windows.
The GUI is usually WIMP-based, although occasionally other metaphors surface, such as those used in Microsoft Bob, 3dwm, File System Navigator, File System Visualizer, 3D Mailbox,[41][42] and GopherVR. Zooming (ZUI) is a related technology that promises to deliver the representation benefits of 3D environments without their usability drawbacks of orientation problems and hidden objects. In 2006, Hillcrest Labs introduced the first ZUI for television.[43] Other innovations include the menus on the PlayStation 2; the menus on the Xbox; Sun’s Project Looking Glass; Metisse, which was similar to Project Looking Glass;[44] BumpTop, where users can manipulate documents and windows with realistic movement and physics as if they were physical documents; Croquet OS, which is built for collaboration;[45] and compositing window managers such as Enlightenment and Compiz. Augmented reality and virtual reality also make use of 3D GUI elements.[46]
3D GUIs have appeared in science fiction literature and films, even before certain technologies were feasible or in common use.[47]
- In prose fiction, 3D GUIs have been portrayed as immersible environments, coined as William Gibson’s «cyberspace» and Neal Stephenson’s «metaverse» and «avatars».
- The 1993 American film Jurassic Park features Silicon Graphics’ 3D file manager File System Navigator, a real-life file manager for Unix operating systems.
- The film Minority Report has scenes of police officers using specialized 3D data systems.
- Apple Computer, Inc. v. Microsoft Corp.
- Console user interface
- Computer icon
- Distinguishable interfaces
- General Graphics Interface (software project)
- GUI tree
- Human factors and ergonomics
- Look and feel
- Natural user interface
- Ncurses
- Object-oriented user interface
- Organic user interface
- Rich web application
- Skeuomorph
- Text entry interface
- Transportable Applications Environment
- User experience design
- User interface design
- Vector-based graphical user interface
- ^ ,[1][2] GOO-ee; , JEE—YOO—AI[3]
- ^ Wells, John (2009). Longman Pronunciation Dictionary (3rd ed.). Pearson Longman. ISBN 978-1-4058-8118-0.
- ^ «How to pronounce GUI in English». Cambridge Dictionary. Retrieved 2020-04-03.
- ^ «GUI». Merriam-Webster.com Dictionary. Merriam-Webster. Retrieved 2024-12-07.
- ^ a b «Command line vs. GUI». Computer Hope. Retrieved 2020-04-03.
- ^ «The GUI versus the Command Line: Which is better? (Part 1)». Microsoft.com Operations. Microsoft Learn. 2007-03-12. Retrieved 2024-01-30.
- ^ «The GUI versus the Command Line: Which is better? (Part 2)». Microsoft.com Operations. Microsoft Learn. 2007-03-26. Retrieved 2024-01-30.
- ^ «Graphical user interface». ScienceDaily. Retrieved 2019-05-09.
- ^ Levy, Steven. «Graphical User Interface (GUI)». Britannica.com. Retrieved 2019-06-12.
- ^ «GUI». PC Magazine Encyclopedia. pcmag.com. Retrieved 2019-06-12.
- ^ Greg Wilson (2006). «Off with Their HUDs!: Rethinking the Heads-Up Display in Console Game Design». Gamasutra. Archived from the original on January 19, 2010. Retrieved February 14, 2006.
- ^ «GUI definition». Linux Information Project. October 1, 2004. Retrieved 12 November 2008.
- ^ «chrome». www.catb.org. Retrieved 2020-04-03.
- ^ Nielsen, Jakob (January 29, 2012). «Browser and GUI Chrome». Nngroup. Archived from the original on August 25, 2012. Retrieved May 20, 2012.
- ^ Martinez, Wendy L. (2011-02-23). «Graphical user interfaces: Graphical user interfaces». Wiley Interdisciplinary Reviews: Computational Statistics. 3 (2): 119–133. doi:10.1002/wics.150. S2CID 60467930.
- ^ Bisson, Giselle. «The ViewTouch restaurant system».
- ^ «What is a graphical user interface (GUI)?». IONOS Digitalguide. 14 September 2020. Retrieved 2022-02-25.
- ^ Babich, Nick (30 May 2020). «Mobile UX Design: List View and Grid View». Medium. Retrieved 4 September 2021.
- ^ Van Dam, A. (2000). «Beyond WIMP». IEEE Computer Graphics and Applications. 20: 50–51. doi:10.1109/38.814559.
- ^ «Reality-Based Interaction: A Framework for Post-WIMP Interfaces».
- ^ Lieberman, Henry. «A Creative Programming Environment, Remixed», MIT Media Lab, Cambridge.
- ^ Salha, Nader. «Aesthetics and Art in the Early Development of Human-Computer Interfaces» Archived 2020-08-07 at the Wayback Machine, October 2012.
- ^ Smith, David (1975). «Pygmalion: A Creative Programming Environment».
- ^ The first GUIs
- ^ Xerox Star user interface demonstration, 1982
- ^ «VisiCorp Visi On».
The Visi On product was not intended for the home user. It was designed and priced for high-end corporate workstations. The hardware it required was quite a bit for 1983. It required a minimum of 512k of ram and a hard drive (5 megs of space).
- ^ A Windows Retrospective, PC Magazine Jan 2009. Ziff Davis. January 2009.
- ^ «Magic Desk I for Commodore 64».
- ^ Sandberg-Diment, Erik (1984-12-25). «Value of Windowing is Questioned». The New York Times.
- ^ Friedman, Ted (October 1997). «Apple’s 1984: The Introduction of the Macintosh in the Cultural History of Personal Computers». Archived from the original on October 5, 1999.
- ^ Friedman, Ted (2005). «Chapter 5: 1984». Electric Dreams: Computers in American Culture. New York University Press. ISBN 978-0-8147-2740-9. Retrieved October 6, 2011.
- ^ Grote, Patrick (October 29, 2006). «Review of Pirates of Silicon Valley Movie». DotJournal.com. Archived from the original on November 7, 2006. Retrieved January 24, 2014.
- ^ Washington Post (August 24, 1995). «With Windows 95’s Debut, Microsoft Scales Heights of Hype». Washington Post. Retrieved November 8, 2013.
- ^ «Computers | Timeline of Computer History | Computer History Museum». www.computerhistory.org. Retrieved 2017-04-02.
- ^ Mather, John. iMania, Ryerson Review of Journalism, (February 19, 2007) Retrieved February 19, 2007
- ^ «the iPad could finally spark demand for the hitherto unsuccessful tablet PC» —Eaton, Nick The iPad/tablet PC market defined? Archived 2011-02-01 at the Wayback Machine, Seattle Post-Intelligencer, 2010
- ^ Bright, Peter Ballmer (and Microsoft) still doesn’t get the iPad, Ars Technica, 2010
- ^ «The iPad’s victory in defining the tablet: What it means». InfoWorld. 2011-07-05.
- ^ Hanson, Cody W. (2011-03-17). «Chapter 2: Mobile Devices in 2011». Library Technology Reports. 47 (2): 11–23. ISSN 0024-2586.
- ^ «What is a Graphical User Interface? Definition and FAQs | OmniSci». omnisci.com. Retrieved 2022-01-26.
- ^ Erokan, Dennis (May 1985). «Andrew Fluegelman — PC-Talk and Beyond». MicroTimes. pp. 19–26. Retrieved 2025-03-12.
- ^ «3D Mailbox – 3-Dimensional Email Software. Bring e-mail to life! Email just got cool and fun». 3dmailbox.com. Archived from the original on 2019-07-21. Retrieved 2022-07-14.
- ^ «3D Mailbox». Download.com. Retrieved 2022-07-14.
- ^ Macworld.com November 11, 2006. Dan Moren. CES Unveiled@NY ‘07: Point and click coming to set-top boxes? Archived 2011-11-08 at the Wayback Machine
- ^ «Metisse – New Looking Glass Alternative». 29 June 2004. Retrieved 2 July 2020.
- ^ Smith, David A.; Kay, Alan; Raab, Andreas; Reed, David P. «Croquet – A Collaboration System Architecture» (PDF). croquetconsortium.org. Archived from the original (PDF) on 2007-09-27. Retrieved 2022-09-17.
The efforts at Xerox PARC under the leadership of Alan Kay that drove the development of […] powerful bit-mapped display based user interfaces was key. In some ways, all we are doing here is extending this model to 3D and adding a new robust object collaboration model.
- ^ Purwar, Sourabh (2019-03-04). «Designing User Experience for Virtual Reality (VR) applications». Medium. Retrieved 2022-05-06.
- ^ Dayton, Tom. «Object-Oriented GUIs are the Future». OpenMCT Blog. Archived from the original on 10 August 2014. Retrieved 23 August 2012.
- Evolution of Graphical User Interface in last 50 years by Raj Lal
- The men who really invented the GUI by Clive Akass
- Graphical User Interface Gallery, screenshots of various GUIs
- Marcin Wichary’s GUIdebook, Graphical User Interface gallery: over 5500 screenshots of GUI, application and icon history
- The Real History of the GUI by Mike Tuck
- In The Beginning Was The Command Line by Neal Stephenson
- 3D Graphical User Interfaces (PDF) by Farid BenHajji and Erik Dybner, Department of Computer and Systems Sciences, Stockholm University
- Topological Analysis of the Gibbs Energy Function (Liquid-Liquid Equilibrium Correlation Data). Including a Thermodinamic Review and a Graphical User Interface (GUI) for Surfaces/Tie-lines/Hessian matrix analysis – University of Alicante (Reyes-Labarta et al. 2015–18)
- Innovative Ways to Use Information Visualization across a Variety of Fields Archived 2024-06-20 at the Wayback Machine by Ryan Erwin Digital marketing specialist (CLLAX) (2022-05)