Ленинский Букварь - видео - все видео
Новые видео из канала RuTube на сегодня - 18 April 2026 г.
16.04.2026
Видео на тему: Ленинский Букварь - видео
00:00 Начало работы над оформлением страницы настроек • Обсуждение оставшихся задач по оформлению страницы настроек. • Проблемы с заполнением полей со списком и текстовых полей. • Решение уменьшить размер шрифта на кнопках обычного размера. 01:03 Исправление проблем с темами Windows • Проблема с автоматическим выбором темы Windows Light при запуске приложения. • Необходимость исправления отображения текста при наведении курсора в тёмной теме. • Возвращение переднего плана на прежнее значение для устранения проблемы. 01:59 Создание классов для заголовков • Создание трёх классов для заголовков: h, подразделы один и два. • Настройка размера, веса и цвета шрифта для заголовков. • Удаление полей и отступов для улучшения внешнего вида. 03:02 Настройка шрифтов и отступов для подзаголовков • Изменение размера шрифта для подзаголовков. • Увеличение отступов на верхней части для более плотного расположения элементов. • Создание градиента оповещения для улучшения внешнего вида. 04:35 Применение стилей к подкаталогам • Повторное использование стиля подзаголовка для всех подкаталогов. • Создание нового стиля для окна со списком с добавлением полей. • Настройка цвета «успех» и градиента для кнопок. 06:35 Настройка градиентов и цветов • Создание градиента успеха с зелёным цветом. • Настройка предупреждающего градиента с красным цветом. • Компиляция изменений для проверки результатов. 09:01 Настройка интервалов между кнопками • Добавление интервала между кнопками для улучшения визуального восприятия. • Ручная настройка отступов для устранения лишних пространств. • Проверка и корректировка интервалов между элементами. 11:05 Оформление полей списка • Создание нового стиля для полей списка. • Установка фона и рамки для полей списка. • Настройка толщины границы и переднего плана для улучшения внешнего вида. 12:13 Стилизация элементов списка • Добавление эффектов наведения курсора и выбора. • Стилизация выбранного элемента: передний план остаётся прежним, фон выделяется при наведении курсора. • Использование хэштега для подчёркивания презентатора контента. 14:30 Работа с текстовым полем • Создание текстового поля с границами, как у кнопок. • Настройка толщины границы и кисти border brush. • Исправление эффекта зависания текста. 15:15 Анализ шаблона текстового поля • Изучение содержимого шаблона текстового поля. • Настройка прозрачности фона по умолчанию. • Добавление текста в текстовое поле для тестирования. 16:34 Работа с водяными знаками • Добавление водяного знака с именем пользователя. • Проблемы с плавающим водяным знаком при удалении текста. • Решение проблемы путём добавления текста сверху. 18:06 Настройка стиля текстового поля • Определение строк и столбцов для текста. • Изменение цвета текста на белый. • Настройка стиля при наведении курсора и фокусировке. 21:15 Завершение настройки текстового поля • Проверка стиля в тёмном и светлом режимах. • Исправление цвета при фокусировке. • Подготовка к работе с полями со списком. 22:14 Создание поля со списком • Создание базового стиля для поля со списком. • Добавление подкладки и кисти для окантовки. • Привязка поля со списком к источнику элемента. 24:43 Финальные настройки • Исправление заголовка настроек. • Коррекция порядка градиентов для стильного вида. • Завершение работы над пользовательским интерфейсом.00:00 Исправление кнопок меню • Добавили класс `subtle` для кнопок меню, чтобы придать им сдержанный стиль. • Страница настроек стала выглядеть лучше. 00:47 Работа с галочками • Убрали обычную кнопку, чтобы сосредоточиться на галочках. • Добавили несколько галочек для предварительного просмотра. 01:45 Создание сетки и панелей • Создали сетку с двумя столбцами и панель стека. • Добавили флажок и удалили стандартный стиль флажка. 02:30 Анализ структуры флажка • Изучили структуру флажка на GitHub, используя шаблон Avalonia Fluent. • Выделили рамку, прямоугольник и элемент content presenter. 04:24 Проблемы со стилизацией • Попытались изменить стиль рамки, но столкнулись с ошибками. • Обнаружили, что свойства не переопределяются должным образом. 06:22 Переопределение шаблона • Создали шаблонный элемент управления `checkbox` и удалили его. • Переопределили тему элемента управления, чтобы управлять стилем флажков. 08:15 Визуализация стилей флажков • Визуально отобразили стили для разных состояний флажков: не отмечен, отмечен, промежуточное состояние, отключён. • Добавили отключённое состояние для каждой кнопки. 10:13 Упрощение стиля флажков • Удалили рамку вокруг флажка, чтобы упростить элемент. • Привязали текст к фоновому цвету, чтобы текст был одинаковым для отмеченных и неотмеченных элементов. 11:00 Завершение работы со стилями • Привели в порядок текст, удалив ненужные стили. • Обеспечили, чтобы текст был одинаковым независимо от состояния флажка. 12:00 Настройка стилей управления • Удаление стилей переднего плана и промежуточного уровня. • Оставление стилей для content presenter без изменений. • Исключение стилей для отключённого состояния презентатора контента. 13:12 Работа с контуром галочки • Изменение кисти для границы галочки для добавления цвета. • Настройка толщины контура и градиента фона. • Коррекция сетки для идеального совпадения с пикселями. 15:05 Настройка радиуса скругления и привязки шаблона • Установка радиуса скругления углов на 7 пикселей. • Замена динамических ресурсов на привязку к шаблону. • Решение проблемы с ошибкой при привязке шаблона. 17:20 Добавление значка и центрирование • Добавление значка из библиотеки иконок Phosphor. • Центрирование значка по вертикали и горизонтали. • Настройка выравнивания текста над иконкой. 18:57 Стилизация иконки и настройка прозрачности • Стилизация иконки галочки для заполнения блока. • Настройка прозрачности иконки по умолчанию. • Создание эффекта вырезания элемента управления. 20:54 Стилизация состояний элемента управления • Создание состояния без галочки и состояния при наведении. • Настройка цвета обводки и переднего плана при наведении. • Планирование работы над состоянием «отмечено» в будущем. 21:54 Создание состояния «отмечено» • Добавление градиентного фона для состояния «отмечено». • Подбор цвета рамки под цвет фона. • Завершение настройки значка и других элементов для состояния «отмечено». 22:51 Настройка флажка и наведения • Изменение прозрачности флажка для создания метки. • Добавление наведения, но цвет слишком голубой, требуется синий. • Проверка работы стилей по умолчанию. 23:45 Проблемы с наведением • Обнаружение бага: невозможность навести курсор на область между кнопкой и центром. • Решение проблемы путём добавления фона. 25:36 Промежуточное состояние • Определение промежуточного состояния между «выбрано» и «не выбрано». • Замена галочки на метку для выделения текста. • Настройка цвета и контура для промежуточного состояния. 26:33 Стилизация неопределённого состояния • Использование значка «бриллиант» для неопределённого состояния. • Настройка непрозрачности и цвета контура. • Упрощение стилей при наведении. 29:17 Отступы и область клика • Задание отступов для области клика. • Проверка работы эффектов при наведении. 30:52 Стилизация состояний при нажатии • Стилизация состояний при удержании флажка. • Изменение фона и непрозрачности границы. • Настройка глифа и контура в активном состоянии. 33:41 Завершение стилизации • Проверка переходов между состояниями. • Коррекция цветов при щелчке. • Уточнение стилей для перехода между состояниями. 35:35 Настройка состояний переключателя • Определение двух состояний: неопределённого и отмеченного. • Использование глифа для задания неопределённого состояния. • Добавление двоеточия для обозначения отмеченного состояния. 36:05 Проблемы с переходами между состояниями • Трудности с переходом из отмеченного в неопределённое состояние. • Решение игнорировать промежуточное состояние и добавить новый стиль. 37:02 Настройка порядка состояний 38:22 Проблемы с отображением неопределённого состояния 41:15 Стилизация трёх состояний 43:36 Настройка неактивного состояния 45:54 Завершение работы над переключателем 46:49 Планы на будущее00:00 Настройка пользовательской кнопки и шрифта • Создана пользовательская кнопка со значком. • Планируется стилизация страницы настроек по скриншоту. • Удаляется экологичный шрифт, используется шрифт Nunito. • Шрифты добавляются в ресурсы проекта. 01:02 Настройка стилей и выравнивание • В настройках стилей по умолчанию используется шрифт Nunito. • Исправляется вертикальное выравнивание кнопки со значком. • Компиляция проекта для обновления стилей. 02:22 Удаление ненужных стилей • Удаляются стили с использованием шрифта Echo. • Обновляются кнопки со значками. • Перенос стилей в ACOS для упрощения работы. 03:54 Стилизация заголовков • Создаётся класс для заголовков. • Настраиваются отступы, полужирный шрифт и размер шрифта. • Класс добавляется ко всем заголовкам. 06:05 Проблемы с заполнением сетки • Сетка не поддерживает заполнение, что создаёт проблемы со стилями. • Попытки использования CSS-стилей ограничены. • Решение: добавление дополнительных строк и столбцов в сетку. 07:30 Добавление отступов в сетку • Создаются дополнительные столбцы для добавления отступов. • Элементы перемещаются в новые столбцы. • Отступы добавляются сверху и снизу. 09:12 Стилизация кнопок • Разрабатываются стили для различных типов кнопок. • Кнопка меню изменяется на «незаметную». • Настраиваются анимации и эффекты наведения курсора. 11:37 Завершение работы со стилями • Разделение стилей на две части для удобства работы. • Проверка и корректировка стилей. 11:52 Настройка стилей кнопок • Изменение основного фона и переднего плана для каждой кнопки. • Добавление градиента для фона. • Использование чистых цветов: голубого, зелёного, синего и пурпурного. 13:18 Настройка шрифта и контура • Установка размера шрифта: средний или жирный. • Создание кнопки «Контур» с прозрачным фоном. • Настройка толщины границы контура около трёх сантиметров. 15:08 Работа с эффектами наведения курсора • Добавление отступов вокруг кнопок. • Настройка градиента фона для кнопки оповещения. • Улучшение эффектов наведения курсора, устранение мерцания. 17:07 Коррекция прозрачности контура • Изменение прозрачности контура на основной фон для устранения проблем с наведением курсора. • Копирование кисти-рамки для сохранения эффекта. • Изменение цвета текста на чёрный. 22:17 Настройка стилей для разных режимов • Применение разных стилей для кнопок в зависимости от их типа. • Увеличение толщины кисти для кнопок с контуром. • Сохранение эффекта выделения при наведении курсора на цветных кнопках. 25:15 Создание уменьшенных кнопок • Уменьшение размера кнопок и их контуров. • Настройка параметров шрифта и отступов для маленьких кнопок. • Проверка внешнего вида уменьшенных кнопок. 26:38 Завершение работы над стилями • Отправка изменений в исходный код. • Планы по оформлению флажков, выпадающих списков и заголовков.00:00 Введение в оформление пользовательского интерфейса • Обсуждение оформления пользовательского интерфейса на странице настроек. • Цель — сделать стандартную кнопку со значком. • Необходимость добавления XAML для отображения значка, содержимого и текста значка. 00:26 Проблемы с текущим подходом • Описание сложности работы с панелью стека и ярлыками. • Упоминание о необходимости учёта уникальности контента. • Идея использования ярлыка внутри кнопки для доступа к боковому меню. 01:03 Создание пользовательских элементов управления • Создание папки для пользовательских элементов управления. • Создание шаблона кнопки со значком. • Проблемы с переопределением стиля и потерей текста. 02:09 Переопределение стиля кнопки • Попытка переопределить стиль кнопки для исправления внешнего вида. • Потеря индивидуального стиля при переопределении. • Невозможность дальнейшего настройки стиля. 03:22 Использование шаблонов по умолчанию • Замена шаблона кнопки на шаблон по умолчанию из Avalonia. • Копирование шаблона кнопки и его переопределение. • Добавление пространства имён и префикса для доступа к кнопкам. 04:55 Стилизация всех кнопок • Применение стандартного стиля кнопок. • Изменение селектора для стилизации всех кнопок. • Достижение единого стиля для всех кнопок. 06:00 Клонирование шаблона кнопки • Создание идентичного клона шаблона кнопки. • Возможность изменения содержимого кнопки. • Объяснение необходимости стилизации под content presenter. 06:59 Удаление префикса XML • Предложение избавиться от префикса XML для определения кнопок. • Использование определения пространства имён XML. • Улучшение внешнего вида кнопки после удаления префикса. 08:14 Добавление стилизованного свойства • Добавление стилизованного свойства для текста значка. • Вставка значков в кнопку. • Настройка содержимого кнопки через content presenter. 10:15 Привязка контента • Привязка контента к кнопке. • Использование шаблона данных для контента. • Компиляция и проверка результата. 10:51 Работа с шаблонами контента и значками • Создан набор шаблонов контента вместо самого контента. • Добавлен значок и свойство стиля icontext для кнопки icon. • Привязка в стиле CSS упрощает работу с иконками. 11:27 Проверка работы на главном экране • Иконка привязана к тексту значка. • Изменение значений иконки приводит к её исчезновению и появлению. • Проверка работы на главном экране. 12:05 Настройка содержимого кнопки • Содержимое кнопки должно исчезнуть, но иконка сохраняется. • Настройка текста значка для упрощения интерфейса. 12:39 Добавление словаря ресурсов • Создание словаря ресурсов для управления иконками. • Объединение словарей ресурсов и их включение в приложение. 13:12 Очистка XAML-кода • Замена кнопок на кнопки со значками для упрощения кода. • Удаление ненужных элементов для очистки интерфейса. 14:30 Исправление ошибок выравнивания шрифта • Временное размещение содержимого на кнопках до исправления ошибки выравнивания шрифта. • Изменение семейства шрифтов кнопок после исправления ошибки. 15:38 Привязка ярлыков к боковому меню • Привязка ярлыков к боковому меню для сохранения функции расширения и сворачивания. • Решение проблемы с привязкой объекта label к основной модели просмотра. 16:26 Исправление контекста данных • Изменение контекста данных для корректной привязки. • Восстановление работы значков после исправления контекста данных. 16:55 Финальная проверка и завершение • Повторная проверка работы меню после исправления контекста данных. • Восстановление всех значков и текста на них. • Завершение работы над меню.00:00 Введение и исправление ошибки • Добавлены внедрение зависимостей и заводской шаблон для загрузки страниц. • Смоделирован пользовательский интерфейс для страницы настроек в Affinity. • Цель — превратить модель в реальный код и интерфейс с помощью Avalonia, сосредоточившись на структуре, а не на стиле. • Исправлена ошибка с viewmodel времени разработки, требующей фабрику страниц. 00:53 Создание конструктора для разработки • Создан конструктор для установки текущей страницы на новую. • Конструктор прокомментирован как работающий только во время разработки. • Добавлены основной цвет фона и текста для визуального контроля. 01:53 Структура страницы • Основная область страницы разделена на несколько частей. • Верхний уровень представлен сеткой с двумя столбцами и двумя строками. • Сетка содержит заголовок и содержимое, разделённое на две части. 02:54 Работа над заголовком • Заголовок состоит из сетки с фоном и панелью с тремя текстами. • Фон экспортирован в формате SVG и добавлен в ресурсы. • Изображение привязано к источнику и растянуто на всю длину. 03:56 Настройка изображения • Изображение растянуто на всю ширину с сохранением пропорций. • Настроена высота изображения и режим растягивания. 05:58 Панель стека с надписями • Внутри заголовка создана панель стека с тремя надписями «Настройки». • Надписи выровнены по горизонтали по центру. 06:52 Основной контент • Основной контент разделён на две колонки. • Создана панель стека с заголовком для общих данных. • Настроены отступы и поля для элементов. 09:31 Добавление кнопки • Добавлена кнопка с текстом «Лицензия на выпуск» и символом блокировки. • Кнопка будет стилизована отдельно. • Явно определены строки для избежания путаницы. 10:28 Настройка размера окна • Кнопка занимает больше места, чем текст, из-за маленького окна. • Устанавливаем минимальный размер окна на 1240 пикселей для большинства мониторов. • Пропорционально увеличиваем высоту окна. 11:22 Минимальный размер и макет • Устанавливаем минимальный размер, чтобы избежать прокрутки страницы вниз. • Сосредотачиваемся на макете, игнорируя стилистику. • Рассчитываем ширину проекта: 1400 пикселей, учитывая боковое меню и отступы. 12:20 Создание общего раздела • Создаём текстовый блок с переносом текста wrap. • Устанавливаем сетку без отступов, которые добавим позже с помощью стилей. • Игнорируем текущее оформление, сосредотачиваясь на макете. 15:09 Локации и панель стека • Начинаем с метки и сетки для локаций. • Добавляем текстовый блок и кнопку с плюсом. • Визуализируем сетку с помощью линий. 17:50 Управление элементами • Создаём элемент управления элементами для списка. • Привязываем элемент управления к viewmodel. • Исправляем привязку данных для автоматического выбора элементов. 21:30 Правая сторона интерфейса • Создаём панель с ярлыком, текстовым полем и полем со списком. • Копируем настройки левой стороны на правую. • Добавляем панель управления стеком для хоста SolidWorks. 22:39 Текстовый блок и перенос текста • Установка значения wrap для переноса текста в текстовом блоке. • Использование двоеточия в XML для добавления пробелов, но это не идеально. • Добавление специального элемента для переноса строки для более удобного управления пробелами. 23:46 Поле со списком • Поле со списком будет работать с привязкой данных и сервиса, а не с IP-адресами. • Хосты пакетного процесса будут транслировать свои IP-адреса для обнаружения. • Раздел PDM Enterprise будет представлять собой панель со стеками. 24:27 Панель управления стеком • Горизонтальная панель стека с тремя элементами: кнопка «не вводить текст» или «комбинировать», поле со списком и два текстовых поля. • Интервалы должны соответствовать стилю, который будет применяться. 25:33 Сетка и кнопки • Создание сетки с определением столбцов из трёх чётных величин. • Две кнопки: «войти в систему» и «обновить хранилище», расположенные горизонтально. 27:09 Кэш настроек • Кэш настроек аналогичен PDM Enterprise: панель в виде стека с текстом и тремя элементами-кнопками. • Копирование настроек PDM Enterprise и сохранение их в кэше. • Добавление кнопок для очистки кэша, экспорта и импорта кэша. 30:07 Стилизация и выравнивание • Важность единообразия отступов и интервалов между элементами. • Применение визуальных стилей для улучшения внешнего вида интерфейса. • Использование сеток для элементов, занимающих всю ширину или высоту, и стековых панелей для элементов, складывающихся в стопку.00:00 Начало создания приложения • Проверка основ приложения перед переходом к полноценному проекту. • Создание пользовательского интерфейса с поддержкой MVVM. • Планирование добавления внедрения зависимостей для разделения классов и повышения гибкости. 00:56 Добавление внедрения зависимостей • Установка пакета Microsoft Dependency Injection. • Перенос модели основного представления в внедрение зависимостей. 01:37 Концепция внедрения зависимостей • Объяснение важности указания всех зависимостей в одном месте. • Преимущества упрощения модульного тестирования и замены частей приложения. 02:14 Работа с коллекцией сервисов • Добавление одноэлементного объекта в коллекцию сервисов. • Создание поставщика услуг для предоставления сервисов. 03:07 Получение сервисов через внедрение зависимостей • Использование методов getService и getRequiredService для получения сервисов. • Проверка работы основной модели представления после внедрения зависимостей. 04:09 Внедрение дополнительных сервисов • Внедрение модели просмотра домашней страницы в качестве синглтона. • Разделение обязанностей между классами для повышения гибкости приложения. 05:44 Удаление ответственности из основной модели представления • Удаление создания страниц из основной модели представления. • Внедрение моделей просмотра страниц через внедрение зависимостей. 08:22 Проблемы с внедрением зависимостей • Обсуждение проблемы использования анти-шаблонов при внедрении поставщика услуг. • Необходимость создания временных объектов для оптимизации использования памяти. 09:24 Решение проблемы с временными объектами • Создание временных объектов при каждом вызове сервиса. • Избегание постоянного хранения экземпляров моделей просмотра. 10:15 Определение страниц другим способом • Перечисление страниц для оптимизации использования памяти. • Создание моделей просмотра только при необходимости. 10:45 Создание каталога и класса • Создаём новый каталог data. • Внутри каталога добавляем класс application page names в виде перечисления. • Перечисление представляет собой список с целыми числами и текстовыми значениями. 11:09 Модель просмотра страниц • Текущая страница представлена viewmodel, которая не хранит информацию о странице. • Добавляем класс page viewmodel, наследующий от base viewmodel. • В page viewmodel добавляем свойство page name для связи с названием страницы. 12:27 Настройка моделей просмотра • Изменяем все viewmodel на page viewmodel. • Создаём конструкторы для каждой страницы, задавая название страницы. • Проверяем название страницы в главной модели просмотра. 13:57 Генерация новых страниц • Обсуждается необходимость генерации viewmodel при переходе на страницу. • Рассматривается использование поставщика услуг для генерации моделей просмотра. • Подчёркивается проблема статического использования поставщика услуг. 16:09 Фабричный шаблон • Внедряем фабричный шаблон для генерации моделей просмотра страниц. • Создаём папку factories и класс factory pages. • Фабрика страниц создаёт модели просмотра на основе названия страницы. 18:17 Реализация фабрики страниц • Внедряем фабрику страниц в модель основного представления. • Привязываемся к функции, которая генерирует модели просмотра при вызове. • Функция получает доступ к поставщику услуг для генерации моделей. 20:44 Создание новых экземпляров • Используем переключатель для создания новых экземпляров моделей просмотра. • Каждый раз при вызове службы генерируется новый экземпляр модели. • Удаляем старые экземпляры при изменении страниц. 21:19 Перехват по умолчанию • Добавляем функцию перехвата по умолчанию для новых страниц. • Функция перехвата удаляет старые модели при появлении новых страниц. • Обеспечиваем доступ к зависимости для вызова функции генерации моделей. 22:23 Внедрение зависимостей в конструкторе • В конструкторе используется внедрение зависимостей через коллекцию. • Создаётся функция-фабрика PageViewModelFactory, которая возвращает PageViewModel. • Фабрика сохраняется как частная функция, доступная только для чтения. 22:56 Работа с фабрикой страниц • Фабрика страниц представлена как функция-делегат, которую можно вызывать через invoke. • При вызове invoke выполняется метод, который создаёт PageViewModel на основе имени страницы. 24:11 Упрощение кода с помощью нового синтаксиса C# • В новом синтаксисе C# упрощается передача свойств в конструктор. • Создаётся закрытый элемент factory для фабрики страниц. • Функция getPageView используется для получения PageViewModel по имени страницы. 26:57 Преимущества внедрения зависимостей • Внедрение зависимостей усложняет работу, но обеспечивает чистоту классов. • Модель основного представления чётко определена и легко тестируется. • Фабрика страниц должна знать имена всех страниц приложения. 27:54 Анализ работы кода с точками останова 29:47 Принципы внедрения зависимостей 30:45 Заключение и планы на будущее00:00 Введение и цели видео • В предыдущем видео было реализовано боковое меню и анимации. • Теперь нужно добавить страницы для навигации по приложению. • При нажатии на кнопку «Домой» должна загружаться домашняя страница, а при нажатии на другие страницы — соответствующие страницы. • Настройки можно сделать в виде всплывающего окна или переместить в главное окно. 00:44 Реализация навигации по страницам • Тема видео — реализация навигации по страницам. • Начало с изучения шаблона идентификатора в MVVM. • Шаблон идентификатора позволяет указывать моделям данных, какой вид должен загружаться. 01:18 Принцип работы шаблона идентификатора • Match проверяет, соответствует ли модель данных типу viewmodel. • Если совпадение найдено, вызывается метод build, который возвращает элемент управления. • Это позволяет привязывать элементы управления контентом и другие элементы пользовательского интерфейса. 03:33 Создание папок и видов • Создание папки «Просмотры» и перетаскивание в неё основного вида. • Создание пользовательского элемента управления Avalonia для домашней страницы. • Создание второй страницы — страницы процесса. 04:14 Настройка сетки и проверка работы • Размещение видов в сетке на главном экране. • Исправление ошибок с ресурсами и изображениями. • Временное добавление стилей для демонстрации работы страницы. 05:44 Динамическая привязка к viewmodel • Переход от привязки к конкретному виду к привязке к viewmodel. • Создание базы моделей приватного просмотра и концепции текущей страницы. • Привязка к observable свойству текущей страницы. 07:18 Реализация моделей просмотра страниц • Создание модели просмотра домашней страницы и страницы процесса. • Использование view locator для преобразования моделей просмотра в реальные виды. • Временное использование свойств для доказательства работы привязки. 08:43 Настройка конструктора и отладка • Установка текущей страницы по умолчанию в конструкторе. • Привязка содержимого к текущей странице. • Отладка с помощью точек останова для проверки работы привязки. 10:12 Добавление шаблонов данных приложения • Добавление шаблонов данных приложения и локатора просмотра. • Проверка соответствия данных модели просмотра. • Возвращение нового вида домашней страницы при успешной привязке. 11:30 Статический вид домашней страницы • Компиляция возвращает домашнюю страницу, но она статична. • Изменение страницы на страницу процесса не меняет результат. • Необходимо вернуть определённый тип на основе viewmodel. 12:00 Проверка viewmodel и поиск представления • Проверка, содержит ли название viewmodel. • Поиск представления с тем же именем, но с «view» вместо «viewmodel». • Нулевая проверка данных перед возвратом. 13:32 Рефлексия и создание элемента управления • Получение типа viewmodel с помощью рефлексии. • Создание нового элемента управления на основе типа. • Привязка модели представления к представлению через контекст данных. 14:41 Пример с моделью просмотра страницы процесса • Получение модели просмотра страницы процесса. • Замена «viewmodel» на «view» в полном имени. • Создание нового экземпляра представления и привязка контекста данных. 15:26 Тестирование генерации представлений • Проверка работы генерации представлений с моделью просмотра «test». • Настройка datacontext для отображения содержимого. • Временное удаление стилей для тестирования. 16:58 Команды для переключения страниц • Создание команд для перехода на главную страницу и страницу процесса. • Привязка кнопок к командам для изменения текущей страницы. • Исправление ошибок при компиляции. 19:15 Стилизация активных страниц • Настройка цвета фона для активной страницы. • Обновление стилей для активного фона и наведения курсора. • Привязка стиля кнопки к активному состоянию страницы. 22:08 Обновление стилей при изменении страницы • Наблюдение за свойством текущей страницы. • Уведомление об изменении свойства для класса кнопок. • Повторное обновление стилей при изменении текущей страницы. 23:12 Стилизация остальных кнопок • Аналогичная настройка для кнопки «Обработать» и других кнопок. • Использование закрытого класса active button для краткости. 23:45 Открытие двойной панели • Обсуждение процесса нажатия кнопки и открытия двойной панели. • Упоминание о частной строке const и классе кнопки active. 24:07 Привязка и стилизация кнопок • Необходимость выполнения привязки для обновления изображения. • Добавление класса active к кнопке при её активации. • Работа со стилями: границы, надписи, кнопки и указатель мыши. 25:00 Работа с классами и привязками • Изменение фона на значение динамического ресурса primary active background. • Использование массива классов для упрощения задачи. • Привязка к определённому объекту и стилизация представления. 25:58 Свойства активных страниц 26:40 Визуальный стиль и навигация 27:19 Завершение работы03. Реальный мир пользовательского интерфейса Avalonia (Просмотр основ модели) 00:00 Введение в viewmodels • Viewmodels позволяют привязывать элементы пользовательского интерфейса к данным в фоновом режиме. • Без viewmodels обновление интерфейса происходит вручную, что неэффективно. • Изменение данных в базе данных должно автоматически обновлять представление. 00:28 Установка инструментария • В Avalonia используется инструментарий Community MVVM Toolkit. • Установка инструментария через терминал: `dotnet add package community.mvvm`. • Создание папки `viewmodels` и базовой модели представления. 01:20 Базовая модель представления • Базовая модель представления наследуется от `ObservableObject`. • `ObservableObject` управляет автоматическим запуском событий при изменении значений. 01:40 Модель главного окна • Создание модели главного окна, наследуемой от базовой модели. • Переименование главного окна в `MainView`. • Добавление свойства `test` с атрибутом `observable`. 04:12 Привязка данных • Настройка контекста данных окна на основную модель представления. • Привязка текста к свойству `test` в модели представления. • Обновление пользовательского интерфейса при изменении данных. 06:00 Работа с контекстом данных • Перенос настройки контекста данных в серверный код. • Использование специального контекста данных `design.data` для предварительного просмотра. 08:24 Создание разборного меню • Реализация функции сворачивания бокового меню. • Привязка логического значения `expandedSideMenu` к видимости меню. • Использование преобразователя значений для изменения изображения меню. 11:13 Настройка изображения бокового меню • Создание приватного свойства для изображения бокового меню в формате SVG. • Объявление свойства `imageOfSideMenu` как наблюдаемого. 11:31 Обновление изображения Avalonia Skia • Добавление свойства notify для обновления изображения при изменении значения. • Изменение названия свойства и его общедоступность. • Создание исходного кода SVG и передача пути к ресурсу. 12:32 Генерация SVG-кода • Получение исходного текста SVG вместо изображения. • Создание нового изображения с установленным исходным кодом. • Использование интерполированной строки для представления изображений ресурсов. 13:17 Настройка изображения • Установка развёрнутого изображения как логотипа или свёрнутого изображения как значка. • Обновление свойства notify при изменении расширенного бокового меню. • Проверка работы логики обновления изображения. 14:26 Исправление ошибок URL • Решение проблемы с относительным URL-адресом без базового URL-адреса. • Указание проекта и пространства имён для корректной работы ресурсов. • Тестирование обновления изображения при изменении значения. 15:27 Обработка двойного щелчка • Подключение изображения к отображению при двойном щелчке мыши. • Создание команды для обновления бокового меню. • Реализация логики двойного щелчка и вызова команды. 16:19 Создание команды для бокового меню • Определение команды для скрытия или показа меню. • Привязка команды к контексту данных модели представления. • Проверка нулевой безопасности и корректное выполнение команды. 18:54 Изменение размера изображения • Обсуждение специфичности размера изображения для вида. • Использование преобразователя значений для изменения размера изображения. • Привязка видимости изображения к расширенному боковому меню. 21:05 Анимация бокового меню • Настройка анимации расширения и сжатия бокового меню. • Проблемы с высотой при анимации и возможные решения. • Привязка ширины границы к ширине боковой панели для корректной анимации. 22:49 Анимация и модели просмотра • Обсуждение возможности получения анимации при произвольной ширине. • Идея наложения одного изображения на другое для создания эффекта сетки. • Планирование стирания одного изображения и уменьшения другого по ширине. • Фокус на моделях просмотра, а не на анимации. 23:53 Основы моделей просмотра • Объяснение использования команд и свойств для привязки функций и полей. • Объединение элементов пользовательского интерфейса с помощью оператора привязки. • Возвращение значения true по умолчанию. • Переход к созданию страниц и обмену кнопками между ними. • Подчёркивание важности основ моделей просмотра для быстрого продвижения в разработке.00:00 Запуск приложения Avalonia • Запуск нового приложения Avalonia с боковым меню и кнопками. • Цель: улучшить визуальный ряд, добавив значки и улучшив эффекты затухания. 00:23 Работа с кнопками • Добавление элементов внутри кнопки: использование панели стека для размещения ярлыков. • Изменение ориентации кнопки на горизонтальную. • Вставка изображений и значков слева от кнопок. 01:45 Использование шрифтов для значков • Загрузка шрифтов с GitHub или другого источника. • Создание папки «шрифты» в разделе «Ресурсы». • Вставка фосфорных шрифтов и шрифта Aco Pro. 02:52 Настройка шрифтов в Avalonia • Изменение действия «Создать» на «ресурсы Avalonia». • Создание семейства шрифтов и настройка путей к шрифтам. • Указание фактического названия шрифта в Windows и его физического имени. 05:16 Применение шрифтов • Назначение шрифта окну верхнего уровня для каскадного распространения. • Использование селектора window и свойства семейства шрифтов. • Исправление смещения шрифта с помощью отступов. 08:24 Работа с фосфорными шрифтами • Импорт фосфорных шрифтов в приложение XAML. • Создание класса иконок и ввод значений в юникоде. • Пример ввода юникода для символа «дом». 10:10 Ввод юникодов • Объяснение способа ввода юникодов с использованием хэш-тегов. • Пример ввода юникода для символа «uplius». 10:42 Работа со стилями и шрифтами • Важно ставить точку с запятой в конце кода, чтобы избежать ошибок компиляции. • Исправление проблем с выравниванием шрифтов с помощью значков и класса. • Создание стиля для кнопок и надписей, настройка отступов. 11:40 Настройка семейства шрифтов • Применение точечных значков к различным элементам интерфейса. • Настройка свойства семейства шрифтов и люминофорной заливки. • Использование точечного контроля для более гибкой настройки шрифтов. 12:27 Работа с отступами и полями • Настройка отступов для элементов интерфейса. • Копирование и вставка кода для создания пользовательского элемента управления. • Обновление юникодов для соответствия значкам. 13:36 Настройка значка «Настройки» • Создание сетки и строки для значка «Настройки». • Решение проблемы с центрированием значка при использовании полей вместо отступов. • Эксперименты с различными стилями для кнопки «Настройки». 14:27 Исправление ошибок со шрифтом • Временное удаление отступов для демонстрации ошибки в высоте шрифта. • Применение класса «echo» для исправления ошибок со шрифтом. • Настройка стилей для кнопок с разными комбинациями текста и значков. 16:58 Прозрачные кнопки • Добавление прозрачного стиля для кнопок. • Настройка свойства background для прозрачных кнопок. • Проверка работы прозрачных кнопок в реальном приложении. 19:15 Анимация кнопок • Настройка анимации масштабирования текста при наведении курсора. • Определение значения по умолчанию для масштаба рендеринга. • Игнорирование радиуса поворота при масштабировании надписей. 22:18 Завершение настройки анимации • Настройка переходов для анимации кнопок. • Оживление кнопок путём изменения цвета и масштаба. • Финальная проверка работы анимации. 22:44 Настройка переходов • Создаём новый массив переходов для масштабирования. • Устанавливаем длительность перехода в 0,1 секунды. • Проверяем анимацию масштабирования. 23:31 Анимация цвета фона • Копируем переходы для цвета фона. • Масштабируем весь контент, а не только ярлык. • Применяем внутренние переходы для цвета фона. 24:41 Проверка анимации • Проверяем продолжительность анимации. • Анимируем изменение переднего плана от белого до светло-белого. • Убеждаемся, что анимация работает. 25:02 Настройка свойств • Настраиваем свойство render transform по умолчанию. • Включаем анимацию переходов. • Проверяем работу анимации. 26:04 Визуализация приложения • Сравниваем макет и реальное приложение. • Отмечаем приятный эффект при наведении курсора. • Настраиваем отступы и шрифт по вкусу. 26:26 Настройка шрифтов • Выбираем семейство шрифтов для прозрачности. • Устанавливаем семейство шрифтов «динамический ресурс» или «люминофор». • Исправляем ошибку с значком на этикетке. 27:32 Завершение работы • Добавляем пользовательские шрифты и исправляем ошибки. • Добавляем анимацию на кнопки. • Планируем следующую работу: создание моделей просмотра и навигация по страницам.00:00 Введение в Avalonia • Avalonia — кроссплатформенный UI для разработки приложений на Windows, Mac, Linux, мобильных устройствах, веб-приложениях и Tizen. • Автор ранее выпускал статьи об Avalonia и теперь планирует переделать своё коммерческое приложение Batch Process с помощью Avalonia. 00:58 Начало работы с Avalonia • Набросок интерфейса в Affinity Designer будет преобразован в Avalonia. • Установка Avalonia через Visual Studio или JetBrains Rider, который теперь бесплатен. 01:55 Создание проекта • Выбор между кроссплатформенным приложением, приложением MVVM и .NET-приложением. • Создание нового проекта «Пакетная обработка 3» в Rider. 03:45 Проверка работы приложения • Запуск приложения и проверка его работы. • Открытие предварительного просмотра интерфейса. 04:42 Структура приложения • Описание структуры приложения: боковая панель, главное окно с сеткой. • Настройка цвета фона с помощью палитры цветов. 05:40 Работа со стилями • Создание папки styles и документа со стилями Avalonia. • Включение стилей в XAML-файл приложения. 06:39 Ресурсы приложения • Создание ресурса primary background для цвета фона. • Обновление приложения после внесения изменений. 07:38 Использование панелей и сетки • Объяснение различий между панелями стека и сеткой. • Применение сетки для заполнения пространства и фиксированного размера одного из столбцов. 09:23 Применение сетки • Настройка расположения элементов в сетке. • Примеры использования сетки для заполнения пространства и фиксированного размера. 10:20 Использование привязок в пользовательском интерфейсе • Привязки заменяют фиксированные значения, например, FFOOO для красного цвета. • Динамические ресурсы ищутся в ресурсах приложения. • Интерфейс напоминает веб-разработку, используя конструкции, похожие на CSS и HTML. 11:16 Импорт логотипа в формате SVG • Создание папки assets и подпапки images. • Вставка логотипа в папку images и изменение типа сборки на ресурс Avalonia. 12:10 Настройка контейнера и отступов • Использование панели стека и универсального элемента-обёртки Border для добавления отступов. • Задание отступа в 20 пикселей. • Добавление сетки для заполнения оставшегося пространства. 13:08 Привязка SVG-изображения • Настройка источника и вкладки привязки для SVG-изображения. • Установка пакета avalonia.svg.skia для поддержки SVG. • Указание пути к файлу logo.svg. 15:05 Настройка размеров изображения • Задание ширины изображения 220 и изменение на auto для автоматического размера. • Настройка дизайнерского размера 800x450 и реальных размеров 1024x600. 16:55 Создание градиента фона • Добавление линейной градиентной кисти с ключом primary background gradient. • Указание начальной и конечной точек градиента в процентах. • Задание цветов градиента: 111214 и 151E3E. 18:33 Добавление кнопок • Добавление кнопок под изображением, настройка переднего плана на белый. • Выравнивание текста по горизонтали для заполнения кнопки. • Настройка интервала между кнопками в панели стека. 21:02 Добавление кнопки настроек • Создание сетки с параметрами auto и fill для нижней строки. • Размещение кнопки настроек во втором ряду с индексом 1. • Настройка Grid.Row для кнопки настроек. 21:46 Настройка боковой панели и кнопок • Замена кнопки на иконку в настройках. • Боковая панель воссоздана в виде физических элементов. • Внутренняя часть будет настоящей страницей с шаблонным кодом для переходов между страницами. 22:44 Стилизация кнопок • Добавление градиентного фона и установка ширины кнопки 200. • Горизонтальное выравнивание по растяжению для кнопки. • Использование метода setter для настройки свойств кнопки. 23:44 Настройка шрифта и цветов • Установка размера шрифта 20. • Создание сплошной кисти primary text для светлого оттенка. • Применение динамического ресурса primary text для цвета foreground. 24:48 Стилизация наведения курсора • Создание стиля для наведения курсора на кнопку. • Выбор шаблона «Презентация контента» для настройки цвета при наведении. • Изменение цвета переднего плана и фона при наведении. 27:07 Завершение настройки • Проверка эффекта наведения при увеличении масштаба кнопки. • Пересоборка проекта для применения стилей. • Планы по улучшению: увеличение шрифта, уменьшение отступов, добавление иконок, анимация. 28:03 Преимущества Avalonia • Быстрое создание приложения с хорошим внешним видом. • Простота и интуитивность интерфейса Avalonia. • Сравнение с другими UI-фреймворками, такими как Maui. 29:01 Рекомендации по обучению • Приглашение задавать вопросы и смотреть другие видеоуроки по Avalonia. • Рекомендация курса по WPF для понимания основ UI-разработки. • Обещание готового приложения к концу курса.00:00 Введение и цель • Цель: отобразить реальный звук на панели и обеспечить прокрутку графика. • Проблема: значок на измерителе громкости Yulian не сразу реагирует на изменение громкости. 00:24 Обновление графика • Необходимость заставить график прокручиваться. • Использование кнопки «Постоянное изменение» для обновления графика. 00:53 Работа с наблюдаемыми значениями • Обновление рядов графика до наблюдаемых значений. • Создание наблюдаемого набора значений в модели представления. 02:15 Инициализация и проверка • Использование функции инициализации для настройки серии. • Проверка работы графика после изменений. 03:50 Анимация графика • Удаление и добавление элементов для анимации графика. • Добавление случайных значений для создания плавности. 06:08 Проблемы с потоком пользовательского интерфейса • Необходимость работы в потоке пользовательского интерфейса. • Решение проблемы с быстрым обновлением графика. 07:36 Обработка аудиоданных • Вставка значений реального звука в график. • Инверсия и корректировка значений для корректного отображения. 09:16 Настройка диапазона значений • Ограничение диапазона значений для имитации реального звучания. • Имитация белой полосы на графике при разговоре. 10:25 Сравнение с измерителем громкости • Сравнение графика с измерителем громкости Yulian. • Замечание о задержке и усреднении сигнала на измерителе громкости. 11:05 Заключение • Подчёркивание различий в отображении звука на графике и измерителе громкости. 11:16 Отсрочка и буфер • Создание очереди для отсрочки данных. • Рассмотрение возможности создания мини-класса для буфера. • Разделение требований между аудиосервисом и моделью представления. 12:02 Логика и график • Перенос звуковой логики в модель представления. • Добавление значений на график для краткосрочных колебаний. • Настройка уровня громкости. 13:45 Определение кратковременной громкости • Корректировка определений кратковременной громкости. • Обновление значений кратковременной громкости. • Ограничение размеров очередей. 16:04 Задержка и усреднение • Увеличение задержки для краткосрочных лофтов. • Сравнение мгновенных и усреднённых значений звука. • Влияние задержки на форму графика. 17:17 Математические операции • Использование максимального значения вместо среднего. • Анализ формы графика при использовании максимального значения. • Попытка сбалансировать задержку и детализацию графика. 20:26 Усреднение и очередь • Применение усреднения для улучшения графика. • Настройка очереди для средних значений. • Достижение более точного графика. 22:17 Освобождение очереди • Освобождение очереди при превышении средних значений. • Постоянное сокращение среднего значения. • Необходимость корректировки средних показателей. 23:30 Анализ пиков и роста • Обсуждение достижения пика и последующего устойчивого роста. • Упоминание о необходимости говорить громче для достижения пика. 24:09 Проблемы с очередью • Объяснение концепции «когда в среднем» для управления очередью. • Проблема потери среднего показателя при очистке очереди. • Решение увеличить размер очереди до 30 для поддержания среднего значения. 25:10 Сравнение с измерителем громкости • Сравнение текущего поведения с измерителем громкости по Джулиану. • Обнаружение пилообразного движения вверх-вниз вместо плавного. 26:09 Попытки улучшения • Предложение убрать 51 элемент из очереди при заполнении. • Добавление элементов обратно при снижении уровня. • Продолжение тестирования для улучшения поведения. 27:34 Итоги и дальнейшие шаги • Признание сложности математического расчёта обработки звука. • Удовлетворение текущим средним значением для отображения графика. • Планы по улучшению графика и добавлению временных рамок. 29:33 Заключение и планы • Подведение итогов работы над приложением. • Обсуждение возможности создания мобильного и кросс-платформенного приложения. • Призыв к зрителям предложить дальнейшие шаги.00:00 Обзор графиков для аудио • Обсуждение различных вариантов графиков для аудио, найденных через Discord. • Упоминание сюжета Скотта, поддерживаемого Avalonia, и микрокарт. • Переход к основному графику. 00:52 Изучение документации • Отсутствие примеров и документации для графиков. • Обзор PDF-документации, которая выглядит как линейный график. • Предпочтение живых графиков. 01:37 Установка и настройка проекта • Установка пакета Nougat и очистка проекта от ненужных частей. • Обновление проекта до версии preview 8 и .NET 7. • Добавление Live Chart Skier в проект. 03:22 Создание ViewModel и добавление диаграммы • Создание ViewModel и добавление свойства series. • Импорт недостающих ссылок и настройка представления. • Вставка диаграммы в пользовательский интерфейс. 04:44 Тестирование диаграммы • Проверка работы диаграммы и её анимации. • Необходимость автоматической прокрутки и добавления осей. • Настройка масштаба и элементов управления. 05:42 Настройка шкалы и картографирования • Настройка шкалы от 0 до -69. • Работа с картографами и всплывающими подсказками. • Автоматические обновления данных на основе ViewModel. 08:53 Настройка заливки и толщины линий • Использование однотонной краски для заливки. • Настройка толщины штриха и размера геометрии. • Удаление геометрии для улучшения вида графика. 11:33 Финальная настройка • Проверка направления заливки и расположения осей. • Дальнейшая настройка свойств заливки и линий. 11:39 Введение в заливку • Заливка включает сплошной цвет, геометрическую заливку и обводку штрихом. • Геометрическая заливка имеет точки. 11:51 Контроль направления заливки • Направление заливки кажется неконтролируемым. • Область заполняется выше и ниже нуля. 12:12 Создание собственной геометрии • Возможность создания собственной геометрии для заливки. • Идея инверсии данных для изменения направления заливки. 13:04 Управление осями • Отсутствие возможности управления осями в текущей версии. • Анализ API для получения информации об осях. 14:02 Инверсия оси Y • Привязка оси Y к графику. • Установка инвертированного значения оси. 15:23 Проблемы с заливкой • Инверсия оси не решает проблему заливки. • Необходимость изменения данных для инверсии заливки. 16:42 Настройка меток осей • Изменение меток осей и их положения. • Настройка минимального шага и делителя. 18:21 Ограничение данных • Ограничение значений от минимального до максимального. • Игнорирование значений за пределами диапазона. 19:23 Функция label • Функция label преобразует число в метку. • Инверсия функции label для преобразования чисел. 20:59 Преобразование значений • Ограничение значений от 0 до -60. • Преобразование отрицательных значений в положительные. • Преобразование чисел в метки. 22:11 Проблемы с математикой и данными • Обсуждение возможных ошибок в математике при работе с данными. • Манипуляции с данными для правильного заполнения диапазона от 0 до 60. • Необходимость инверсии значений для корректного отображения. 23:10 Обработка данных и создание меток • Обработка данных, поступающих в таблицу, для создания меток. • Получение правильного графика с правильным расположением осей. • Попытка ограничить диапазон отрицательных значений. 23:30 Работа с метками и осью • Обсуждение возможности скрытия меток и использования значений null или blank. • Проблемы с отображением меток при возврате значения null. • Анализ поведения меток при выходе за пределы коллекции. 25:51 Создание собственной оси • Решение скрыть существующую ось и создать новую. • Наложение сетки поверх графика и проведение линий. • Добавление отступов для уменьшения размера оси. 26:52 Настройка сетки и элементов • Использование той же сетки, что и для счётчика. • Создание прямоугольника внутри элемента сетки. • Настройка ориентации и заливки элементов. 28:15 Добавление меток и корректировка стиля • Добавление меток с нулевым значением содержимого. • Корректировка размера надписи и добавление полосы с линией. • Настройка непрозрачности и высоты элементов. 31:07 Проверка и корректировка сетки • Проверка заполнения сетки и устранение проблем с выравниванием. • Корректировка вертикального выравнивания и непрозрачности. • Вставка дополнительных элементов для заполнения пробелов. 35:06 Финальная настройка сетки • Удаление определений столбцов и использование автоопределения. • Размещение всех надписей в один столбец и прямоугольников — в один. • Уточнение настроек сетки и строк для корректного отображения. 35:49 Создание сетки и выравнивание текста • Обсуждение создания сетки с количеством строк до девяти. • Настройка горизонтального выравнивания текста для смещения вправо. • Достижение идеального выравнивания текста и прямой линии. 36:55 Прокрутка графиков 37:54 Работа с данными и диаграммами 38:54 Заключение00:00 Запуск Avalonia на Windows • Программа Avalonia должна быть кроссплатформенной и работать на Windows. • Проект открыт в Visual Studio, приложение для настольных компьютеров запускается. • Звук не воспроизводится, но микрофон работает нормально. 00:38 Добавление панели регулировки громкости • Планируется добавить панель регулировки громкости с анимацией. • Идея: белый цвет расширяется вверх, затем появляется красный при достижении определённой линии. 01:07 Настройка ViewModel • Добавление новой частной собственности для высоты панели регулировки громкости. • Высота контейнера volume задаётся в коде, а не в конструкторе. 02:44 Создание панели регулировки громкости в конструкторе • Создание панели регулировки громкости с именем volume bar. • Связывание высоты полосы громкости с высотой отскока полосы громкости. 04:21 Настройка высоты панели регулировки громкости • Определение высоты панели регулировки громкости в обратном вызове данных. • Расчёт высоты панели на основе уровня громкости в децибелах. 06:04 Исправление ошибок в отображении • Проблема с отображением панели регулировки громкости из-за отсутствия привязки. • Обновление устройства и проверка захвата микрофона. 09:28 Оптимизация отображения панели • Вертикальное выравнивание панели регулировки громкости. • Медленное обновление значений громкости. 10:39 Улучшение отображения стрелки регулировки громкости • Расчёт высоты стрелки регулировки громкости на основе уровня громкости. • Стрелка становится более отзывчивой, но частота обновления остаётся низкой. 11:57 Настройка частоты обновления • Настройка частоты обновления сервиса захвата. • На Mac частота обновления по умолчанию выше, чем на Windows. • Смягчение слишком быстрой частоты обновления. 12:46 Настройка плавности движений • Обсуждение необходимости замедления периода для достижения плавности движений. • Упоминание о возможном увеличении числа до двадцати для достижения желаемого результата. 13:56 Усреднение значений • Применение среднего значения из трёх для сглаживания движений. • Идея удвоения среднего значения для другой стрелки. 14:31 Замедление обновления текста • Предложение использовать счётчик для обновления текста каждые три раза. • Реализация счётчика обновлений для текста и графиков. 17:07 Инверсия значений • Необходимость инверсии значений для правильного отображения громкости. • Объяснение использования поддельных значений для наглядности. 17:48 Ограничение значений • Ограничение максимального значения в пользовательском интерфейсе до 60. • Настройка высоты шкалы громкости и контейнера громкости. 19:00 Работа с аудиосервисом • Переработка кода для повторного использования аудиосервиса. • Добавление функций запуска и остановки записи. 22:21 Инициализация и освобождение устройств • Инициализация захвата звука с определённого устройства. • Освобождение ресурсов при остановке записи. 23:57 Проверка интерфейса • Проверка работы интерфейса после всех изменений. • Подготовка к добавлению графика. 24:15 Исследование графиков • Обзор документации Skia и Avalonia для построения графиков. • Упоминание обновлений и новых возможностей. 26:01 Работа с образцами • Изучение образцов и предварительного просмотра. • Оценка улучшений в документации и образцах. 26:13 Начало обсуждения рисования • Обсуждение рисования в целом, а не только графиков. • Упоминание шаблонов данных, рутины и пользовательских стилей. 26:29 Анализ образцов • Образцы не соответствуют ожиданиям. • Отсутствие конкретных решений в имеющихся образцах. 26:42 Поиск решений • Проверка наличия графиков в доступных решениях. • Поиск дополнительных ресурсов через Google. 27:15 Специфические требования • Необходимость рисования кривых в пользовательском интерфейсе. • Использование специфически настроенного элемента управления. • Возможность полного контроля над процессом рисования. 27:56 Начало реализации • Начало работы над программированием, графикой и анимацией. • Создание эллипсов, линий, многоугольников и графиков. • Планирование создания специального элемента управления для передачи аудиоданных. 27:56 Заключение • Подведение итогов обсуждения. • Надежда на полезность материала. • Анонс следующего выпуска.00:00 Введение и установка библиотеки • Замена кода вывода изображения на код обработки звука. • Использование библиотеки NVVI для обработки звука. • Установка библиотеки через меню Avalonia Loudness. 00:37 Обзор возможностей NVVI • NVVI работает с дискретными сигналами, позволяя обрабатывать аудиосэмплы. • Возможность извлечения данных, таких как уровень громкости и частота. • Утилиты для преобразования сигналов в децибелы и другие единицы измерения. 01:35 Измерение громкости • Фокус на измерении сигнала громкости. • Отображение значения громкости в разных форматах: число, полоса со стрелкой, интегрированная динамика. • Объяснение формата WAV как файла PCM с 16 битами на сэмпл. 02:33 Преобразование буфера данных • Преобразование необработанного буфера данных в значение громкости. • Привязка значения громкости к свойству в модели представления. • Создание приватного вспомогательного класса для обработки данных. 04:55 Захват звука • Создание устройства захвата звука. • Начало захвата звука и обработка данных. • Управление устройством захвата и его удаление при закрытии приложения. 07:49 Анализ данных WAV • Анализ формата WAV как шестнадцатибитного PCM-файла. • Вычисление количества сэмплов в буфере. • Преобразование буфера в дискретный сигнал с частотой дискретизации 44100 Гц. 11:02 Извлечение значений сэмплов • Извлечение шестнадцатибитных значений сэмплов из буфера. • Использование бинарного ридера для чтения данных. • Деление значений на 32768 для преобразования в формат с плавающей запятой. 12:42 Расчёт громкости в децибелах • Выражение значения громкости в децибелах. • Использование вспомогательного класса Scale для преобразования значений. • Получение значения громкости в децибелах с помощью класса Scale. 13:27 Вычисление децибел • Использование RMS для вычисления децибел. • RMS рассматривается как среднее значение энергии сигнала. 13:58 Установка модели представления • Переход в новый поток для установки модели представления. • Выполнение команды для установки значения краткосрочной громкости. 14:31 Проблемы с вычислением • Вычисление лофтов для каждого сэмпла и обновление пользовательского интерфейса. • Обнаружение некорректного поведения значений. 15:35 Анализ краткосрочных значений • Сравнение краткосрочных и усреднённых значений. • Усреднённое значение остаётся на уровне 20, в то время как краткосрочное падает до −50. 16:34 Разработка алгоритма усреднения • Использование таймера для усреднения образцов за секунду. • Расчёт новых средних значений на основе данных за секунду. 17:15 Реализация алгоритма усреднения • Создание массива чисел с плавающей запятой для хранения образцов. • Замена списка на стек для удобства добавления и удаления элементов. 19:16 Исправление ошибок в алгоритме • Исправление логики добавления и удаления элементов в стеке. • Переход на использование очереди для корректного извлечения элементов. 20:23 Тестирование и корректировка • Тестирование усреднённых значений с 40 выборками. • Обнаружение некорректных расчётов и необходимость корректировки средних значений. 21:32 Обработка стрелки и полосы • Сопоставление значения стрелки с кратковременными углами наклона. • Расчёт размера полосы на основе мгновенных углов наклона. 22:01 Заключение • Призыв к участию в Discord для дальнейшего обсуждения и разработки. • Подчёркивание важности наличия информации о звуке и громкости. • Обещание продолжить работу над графиком и функциональностью приложения.00:00 Начало работы со звуком • Настройка звука в LUFs. • Привязка пользовательского интерфейса Avalonia к звуковому коду. • Планирование создания подвижного графика. 00:37 Очистка кода и объединение сервисов • Удаление ненужного кода и очистка основного файла просмотра. • Объединение службы захвата звука и интерфейса. • Переименование объединённого сервиса в «Сервис захвата звука». 02:21 Создание фиктивной модели • Удаление фиктивного снимка и создание объединённого сервиса. • Добавление идентификатора по умолчанию для фиктивных объектов. 03:10 Комментарии и документация • Добавление комментариев к коду для улучшения документации. • Перенос функций в службу захвата звука. 05:01 Оптимизация кода • Удаление ненужных комментариев и очистка кода. • Минимизация количества личных пользователей. 06:37 Инициализация службы захвата • Инициализация службы захвата звука и начало записи. • Обсуждение методов записи звука и обратного вызова. 08:31 Разделение ответственности • Исключение службы захвата из модели основного вида. • Привязка сервиса к модели представления. 10:04 Загрузка настроек и инициализация • Асинхронная загрузка данных и настройка служб. • Динамическое обновление размеров элементов управления. 12:05 Завершение инициализации • Начало захвата звука после инициализации. • Автоматическое начало записи. • Предоставление опций «запись» и «пауза». 13:11 Импорт файлов и настройка громкости • Необходимо импортировать отсутствующие файлы. • Нужно настроить громкость и обеспечить обратный вызов для отправки данных в viewmodel. 13:51 Раскрытие функций и документация • Раскрываются публичные функции «старт» и «стоп». • Используются комментарии для документации, наследуемые от интерфейса. 14:45 Обработка аудиоданных • Создаётся обработчик для возврата изменённых звуков. • Добавляется класс «audio chunk data» для хранения информации об одном фрагменте аудио. 15:53 Анализ громкости • Добавляются кратковременные люфты и интегрированная громкость. • Используется класс «запись» для хранения общедоступных свойств. 18:07 Организация обратного вызова • Организуется обратный вызов для получения следующего фрагмента аудиоданных. • Переименовывается метод «захваченный фрагмент аудио». 19:17 Вычисление значений • Вычисляется полезная информация из звукового фрагмента. • Создаётся новый звуковой фрагмент для обработки данных. 23:08 Привязка данных к интерфейсу • Данные по фрагменту аудио привязываются к пользовательскому интерфейсу. • Привязываются кратковременная громкость и другие параметры. 24:29 Тестирование и корректировка • Тестируется работа системы. • Внедряется базовая служба захвата звука. • Проверяется правильность привязки свойств. 26:30 Визуализация данных • Данные визуализируются на экране. • Лофты умножаются на 0,9 для отображения полезных значений. • Планируется исправление значений при написании аудиокода. 27:15 Обновление пользовательского интерфейса • При запуске программы пользовательский интерфейс обновляется и меняется. • Все элементы интерфейса, кроме громкости, работают корректно. • Наблюдается медленное снижение реальных значений. 27:41 Настройка стрелки громкости • Необходимо сделать так, чтобы стрелка громкости двигалась плавно. • Планируется установить измеритель громкости на панели, которая будет двигаться вверх и вниз вместе с реальными значениями. • Стрелка будет двигаться как упругая пружина с задержкой, создавая эффект S-образной кривой. 28:37 Структура сервиса и модели представления • Важно структурировать сервис и модель представления для чистоты представления. • Не стоит тратить время на создание идеального интерфейса, если он не будет использоваться. • Сначала нужно убедиться, что интерфейс нравится, а потом совершенствовать его. • Не начинайте с идеально доработанного кода, чтобы не пришлось всё переделывать.00:00 Введение и цель 01:04 Начало разработки 01:34 Настройка библиотек 03:27 Использование ChatGPT 04:49 Проблемы с кодом 08:36 Анализ ошибок 10:16 Переход к образцам 11:54 Разработка собственного решения 13:20 Инициализация аудиозаписи 14:40 Настройка параметров записи 15:22 Обработка данных и обратные вызовы 16:54 Управление записью 17:30 Делегаты и события 19:27 Создание экземпляра приложения 20:13 Запись WAV-файлов 21:30 Проверка устройств 25:28 Инициализация и проблемы 26:38 Создание сервиса записи звука 27:12 Управление сервисом 27:36 Инициализация и захват звука 28:06 Работа с буфером 28:49 Запись звука в файл 30:08 Реализация таймера 31:32 Проверка работы 32:29 Исправление ошибок 34:16 Анализ аудиоданных 35:12 Визуализация данных 37:01 Заключение00:00 Введение и цель • Необходимо найти способ записывать и передавать аудио в потоковом режиме с Mac, Windows и Linux. • Если не удастся найти готовое решение, придётся создать код самостоятельно. • Цель — найти код, который позволит передавать аудио с любого подключённого микрофона. 00:31 Начало исследования • Проект использует Avalonia и .NET Core для получения звука. • Начинаем поиск решений через Google, ищем статьи и пакеты NuGet. • Планируем экспериментировать с различными пакетами. 01:45 Обзор OpenTK .NET • OpenTK использует классы захвата звука для сбора данных с микрофона на разных платформах. • Поддерживает Windows, Linux и Mac. • Имеет высокую стабильность и поддержку. 02:42 Анализ других вариантов • Рассматриваем пример с процентной шкалой уровня звука. • Оцениваем документацию и активность разработки. • Сравниваем OpenTK с другими вариантами. 06:31 Проблемы с Naudio • Naudio поддерживает только Windows, что ограничивает его использование. • Для Mac потребуется другое решение. 07:52 Попытка использования SoundLib • Пытаемся использовать оболочку C# для кроссплатформенного аудио SoundLib. • Возникают проблемы с одобрением файлов на Mac. • Исследуем ошибки и пытаемся их исправить. 10:11 Отладка кода • Удаляем устройство вывода, чтобы проверить работу кода. • Обнаруживаем ошибку ввода-вывода звука. • Продолжаем отладку, проверяя использование кольцевого буфера. 11:00 Создание кольцевого буфера • Создание кольцевого буфера для хранения данных. • Длительность буфера вызова составляет 30 секунд. • Переписывание кода под конкретные нужды. 11:16 Работа с указателями и байтами • Считывание свободных байтов из указателя записи. • Использование расширенного указателя чтения для подсчёта байтов в кадре. • Начало чтения с определённого количества кадров. 12:06 Проблемы с задержкой микрофона • Упоминание проблемы с задержкой микрофона. • Серверная часть равна нулю, что указывает на отсутствие проблем. 12:46 Выбор устройства по умолчанию • Если значение device равно null, выбирается устройство по умолчанию. • Регистрация выходных данных при нулевом результате. 13:18 Проверка совместимости частоты дискретизации • Проверка совместимости частоты дискретизации устройства вывода с форматом. • Устройство ввода поддерживает формат и частоту дискретизации. 14:04 Настройка входного потока • Необходимость включения устройства вывода для выбора макета. • Использование одного и того же устройства для входа и выхода. 15:30 Расчёт частоты дискретизации и задержки • Точный расчёт частоты дискретизации, количества байт на кадр и времени задержки. • Сохранение данных в буфере без его создания. 18:43 Чтение данных из потока • Получение каналов, считывание количества байт на выборку. • Копирование данных из потока в буфер памяти. 20:11 Анализ полученных данных • Проверка формата и частоты дискретизации данных. • Анализ необработанного звука с нулями и единицами. 21:12 Исправление ошибок чтения • Удаление цикла for для буфера. • Проверка работы системы после исправления. 22:12 Вывод данных на консоль • Вывод данных на консоль для анализа. • Суммирование байтов и вывод их на экран. 23:28 Анализ значений данных • Анализ значений данных, полученных из аудиозаписи. • Понимание, что данные не обязательно связаны с объёмом. 23:54 Запись звука в код • Запись звука легко включается в код. • Для записи звука требуется небольшой фрагмент кода и обратный вызов. • Можно передавать данные в потоковом режиме вместо записи четырёх байтов. 24:46 Тестирование и интеграция • Автор предлагает протестировать запись звука на разных микрофонах. • Планируется интеграция записи в чтение аудиоданных и их визуальную обработку. • Если тест пройдёт успешно, интеграция будет продолжена.010. Пользовательский интерфейс Avalonia - Всплывающее управление 00:00 Введение в всплывающее окно • Обсуждение специфичности всплывающего окна для исходного кода и SAML. • Упоминание о свойствах всплывающего элемента управления: «открыто», «размещение», «цель». • Решение проверить использование всплывающего элемента управления на YouTube. 01:00 Тестирование всплывающего окна • Вставка всплывающего окна в кнопку и проверка его работы. • Обнаружение проблем: отсутствие анимации и неправильная позиция. 01:35 Настройка свойств всплывающего окна • Прикрепление всплывающего окна к элементам управления без встроенной поддержки. • Эксперименты с выравниванием нижнего и верхнего краёв по левому краю. 02:31 Проблемы с позиционированием • Трудности с настройкой направления открытия всплывающего окна. • Попытка выровнять верхний край по левому краю для вертикального открытия. 04:01 Стилизация всплывающего окна • Начало стилизации всплывающего окна с помощью селектора. • Удаление предустановленных стилей и настройка прозрачности, отступов и полей. 06:06 Анализ предопределённых границ • Обнаружение предопределённых верхних и нижних границ всплывающего окна. • Попытка создать пользовательский стиль с помощью прямоугольника. 07:03 Переопределение всплывающего окна • Просмотр исходного кода всплывающего окна на GitHub. • Переопределение всплывающего презентатора и поиск заранее подготовленных отступов. 09:16 Удаление отступов • Использование отрицательных отступов для удаления запаса всплывающего окна. • Настройка верхних и нижних границ на прозрачные для создания бесшовного стиля. 10:12 Создание пользовательского всплывающего окна • Создание копии стандартного всплывающего окна для настройки вертикального смещения. • Копирование содержимого класса и настройка смещения по вертикали. 12:36 Тестирование смещения • Установка смещения по вертикали для всплывающего окна. • Проверка эффекта изменения положения всплывающего окна. 13:38 Проблемы с всплывающим окном • Всплывающее окно само определяет направление появления. • При нажатии на кнопку вниз возникает странный эффект. • Ошибки из-за проблем с всплывающим окном. 14:37 Анализ кода • Код использует всплывающий класс, который является элементом управления. • При открытии используется всплывающее сообщение с наложением. • Обновление размера, установка дочерних элементов и положения требуют много работы. 15:44 Сложности анимации • Анимация требует времени, а всплывающее окно либо есть, либо нет. • Класс всплывающих окон не поддерживает анимацию и пользовательское позиционирование. • Проблемы с мерцанием и непредсказуемым направлением появления. 16:35 Потенциал и ограничения • Всплывающее окно игнорирует макет и появляется вне заданного положения. • Отсутствие анимации и пользовательского позиционирования. • Большой объём работы для отображения всплывающего окна. 17:15 Планы по улучшению • Создание уникального пользовательского элемента управления для повторного использования. • Запрос функции на GitHub для улучшения всплывающего окна. • Поддержка анимации, вертикального и горизонтального смещения, определённого направления движения. 18:15 Родительский контроль • Использование родительского элемента для определения положения всплывающего окна. • Динамическое создание элемента управления с привязкой к сетке. • Привязка свойств к элементу управления. 20:32 Прикрепление к кнопке • Размещение элемента управления внутри кнопки как прикреплённого свойства. • Определение родителя верхнего уровня для добавления всплывающего окна. • Имитация поведения базового прикреплённого всплывающего экрана. 23:35 Создание нового стиля • Замена элемента управления на пользовательский. • Создание нового стиля «анимированное всплывающее окно». • Добавление стиля в приложение и тестирование на главном экране. 25:26 Работа с шаблоном и содержимым • Использование шаблона для управления содержимым. • Необходимость задания имени для корректной работы. • Настройка всплывающего окна с шаблонным элементом управления по умолчанию. 26:11 Проблемы с границей и выбор типа элемента • Проблема с предопределённой границей, которая мешает правильной работе. • Выбор между различными типами элементов управления: элемент ввода, макет, визуальный элемент. • Создание нового типа элемента управления и его скрытие по умолчанию. 27:18 Управление контентом • Изменение шаблона управления для свободного размещения контента. • Использование элемента управления контентом для размещения ярлыка с контентом. • Настройка переднего плана для лучшего отображения на чёрном фоне. 28:03 Стилизация и привязка контента • Изменение шаблона управления для передачи фактического контента. • Привязка содержимого к шаблону привязки содержимого. • Добавление кнопки в содержимое элемента управления. 29:28 Определение анимированного всплывающего окна 30:27 Настройка z-индекса 31:57 Стилизация и выравнивание 33:35 Проверка работы и дальнейшие улучшения 36:12 Заключение00:00 Создание расширяемого элемента управления • Обсуждение необходимости поддержки расширяемого элемента управления. • Проблема с текущим всплывающим окном: установка размера один раз и отсутствие его изменения. • Создание расширителя и добавление содержимого. 00:57 Настройка расширителя • Проверка состояния расширителя и присвоение свойства `expanded` значения `true`. • Проблема фиксации высоты при расширении. 01:24 Тестирование расширителя в сетке • Вставка расширителя в рамку и наблюдение за его расширением в сетке. • Ожидание поведения, аналогичного обычному всплывающему элементу управления. 02:28 Анимация элемента управления • Объяснение процесса анимации элемента управления до и обратно. • Установка ширины и высоты для активации анимации. 04:00 Проблемы с контрольными точками • Трудности с получением контрольных точек при отладке. • Решение проблемы путём установки ширины и высоты в `NaN`. 06:10 Обновление желаемого размера • Определение момента для обновления желаемого размера при закрытии панели управления. • Использование систем защиты от сбоев для предотвращения дублирования кода. 10:04 Финальная настройка анимации • Обновление желаемого размера на основе текущего размера элемента управления. • Проверка завершения анимации перед обновлением размера. 12:14 Тестирование и завершение • Тестирование анимации и подтверждение её гладкости. • Подтверждение надёжной поддержки расширяемого всплывающего окна. 12:58 Добавление свойства непрозрачности анимации • Создание логического свойства непрозрачности анимации с значением `true` по умолчанию. 13:23 Анимация непрозрачности • Копируем и вставляем код для анимации непрозрачности наложения. • Устанавливаем анимацию непрозрачности на основе свойства. • Сохраняем исходную непрозрачность для элемента управления. 13:57 Проверка анимации • Проверяем, что при полном открытии непрозрачность сбрасывается до исходного значения. • Учитываем, что при короткой анимации непрозрачность может быть ниже 100%. 14:20 Создание расширителя анимации • Создаём модель представления с списком списков для четырёх расширителей. • Каждый элемент списка будет иметь заголовок и подконтент. • Привязываем модель представления к пользовательскому интерфейсу. • В пользовательском интерфейсе появится список с расширителями, привязанными к другому списку. 14:20 Итоги • Поддерживаем расширение и сворачивание с помощью контроля. • Добавляем приятную затухающую непрозрачность.00:00 Начало работы со стрелкой • Обсуждение рисования стрелки-индикатора. • Планирование анимации движения стрелки вверх и вниз. • Подготовка к работе с реальным звуком. 00:50 Создание контура стрелки • Замена прямоугольника контуром для рисования стрелки. • Заполнение контура белым цветом и добавление данных. • Начало рисования стрелки с точек x и y. 02:07 Настройка размера стрелки • Увеличение ширины стрелки до 20 раз. • Сравнение с оригинальной стрелкой измерителя громкости Yulin. • Корректировка размеров стрелки. 04:12 Привязка стрелки к объекту недвижимости • Установка позиции стрелки на холсте. • Создание наблюдаемого свойства «положение в процентах объёма». • Привязка стрелки к объекту недвижимости. 05:41 Анимация стрелки • Разработка функции инициализации и таймера. • Установка интервала таймера на 60 секунд. • Тестирование анимации движения стрелки. 08:16 Реализация синусоидальной волны • Замедление таймера на 5 секунд для более плавной анимации. • Вычисление синусоидальной волны на основе тика таймера. • Умножение синусоидальной волны на масштаб 100. 10:30 Настройка частоты кадров • Разделение тика на число с плавающей запятой для сохранения точности. • Тестирование анимации на 120 кадрах в секунду. • Возвращение к 60 кадрам в секунду и дальнейшее замедление процесса. 11:28 Определение масштаба • Вместо случайного масштабирования предлагается определить масштаб на основе высоты холста. • Используется код анимированных всплывающих окон для определения размера объектов. • При рендеринге запускается таймер для обновления свойства размера. 12:28 Использование таймера • Таймер определения размера используется для получения желаемого размера за вычетом границ сетки. • Таймер тайм-аута определяет завершение автоматического определения размера при масштабировании. • Обновление размера происходит, когда изображение перестаёт двигаться на 100 миллисекунд. 13:45 Создание универсального метода • В конструкторе главного представления создаётся новый таймер. • Метод обновления размеров становится универсальным и может использоваться в разных местах. 15:09 Настройка размера контейнера • Устанавливается процент громкости и размер контейнера для объёма. • Размер контейнера устанавливается на 500, но требуется настройка на фактический размер холста. 18:27 Проблемы с размером • Желаемый размер контейнера для объёма не работает должным образом. • Границы контейнера имеют значение, но расчёты размера не учитываются. 19:36 Коррекция размера • Размер контейнера сокращается вдвое для учёта синусоидальной волны. • Возможность указания размера от 0 до 100 достигается через преобразователь значений. 20:31 Настройка диапазона • Настраиваются минимальные и максимальные значения для масштабируемой стрелки. • Стрелка визуально масштабируется в точном диапазоне. • Планируется добавление реакции стрелки на реальный звук для более реалистичного отображения уровня громкости.