Custom UI Overlay

Custom UI Overlay — самый гибкий и одновременно самый сложный тип оверлея в EyeAuras. Он позволяет создавать полностью собственный интерфейс с помощью C# и Razor pages.

В основе этого оверлея лежит сразу несколько продвинутых технологий. Одна из них — Microsoft WebView2, браузерный компонент на базе Chromium. Вместе с ним используется Blazor — фреймворк для создания интерактивного клиентского веб-интерфейса на .NET, который связывает WebView2 с вашим C#-кодом.

Основные возможности

• Полностью настраиваемый интерфейс на C# и Razor pages
• Использование WebView2 и Blazor для построения браузерного интерфейса
• Возможность работать с внешними источниками данных и API
• Удобное распространение кода: интерфейсы легко экспортировать, импортировать и делиться ими
• Полный доступ к внутренним возможностям EyeAuras, благодаря чему пользовательский интерфейс может управлять широким спектром аспектов приложения

Custom UI Overlay — важный шаг к тому, чтобы сделать EyeAuras более настраиваемой и ориентированной на пользователя платформой. За счет своей гибкости он открывает очень широкий спектр сценариев и позволяет адаптировать EyeAuras под самые разные задачи.

Примеры

WebUI позволяет реализовать практически ЛЮБОЙ интерфейс, который вы можете придумать. Ниже — несколько примеров рабочих аур с пользовательским UI.

Lineage 2 Scryde autofarm Behavior Tree (https://eyeauras.net/share/S202403150219539BfeOJ0eRl1q)

GTA 5 RP Majestic helper [Alt:V] (https://eyeauras.net/share/S20240121210358gpJJuNtIZRSQ)

Lineage 2 Essence auto flags (https://eyeauras.net/share/S20240325120506y5CPVmuwLvC3)

Time Alert (https://eyeauras.net/share/S20230424095833g0ccyvLqWNNo)

Редактор кода и распространение

Одно из главных преимуществ Custom UI Overlay — его портативность и удобство редактирования. Весь код, связанный с таким оверлеем, хранится прямо в его свойствах, поэтому его можно быстро редактировать, экспортировать и импортировать для распространения.

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

Поскольку встроенный редактор довольно требователен, для более плавной и оптимальной работы рекомендуется использовать опцию "Load editor in a separate window". Либо вы можете экспортировать код и работать с ним во внешней среде разработки, например в JetBrains Rider, Visual Studio или SharpDevelop. Ниже эти сценарии описаны подробнее.

Export, Import и Monitor для Custom UI

Функции Export, Import и Monitor — центральная часть работы с Custom UI Overlay в EyeAuras. Они дают удобный набор инструментов, который позволяет без проблем переносить проект между EyeAuras и вашей предпочитаемой IDE в обе стороны.

Export Project

Функция Export Project позволяет экспортировать весь ваш Custom UI как отдельный C#-проект. В него входит код оверлея, а также ссылка на специальный NuGet-пакет EyeAuras.SDK, который содержит все необходимые ссылки и объявления.

Экспорт проекта Custom UI дает сразу несколько преимуществ. Во-первых, вы можете работать в любой IDE по своему выбору. Во-вторых, вам становятся доступны все возможности обычного C#-проекта: контроль версий, unit-тесты и привычные инструменты редактирования кода. Кроме того, проект легко передавать другим пользователям или использовать для совместной разработки.

Import Project

Функция Import Project позволяет импортировать ранее экспортированный проект EyeAuras обратно в приложение. Это особенно полезно, если вы внесли значительные изменения в код через внешнюю IDE и хотите вернуть их в EyeAuras.

В будущем EyeAuras планирует добавить возможность подключать дополнительные package references прямо во время импорта, что еще сильнее расширит возможности Custom UI Overlay.

Monitor Project

Функция Monitor Project развивает идею импорта и добавляет обновление кода в реальном времени. Пока проект находится под наблюдением, любые изменения, внесенные во внешней IDE, автоматически обнаруживаются и применяются в EyeAuras.

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

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

Отладка через DevTools

Разработчики могут использовать встроенные DevTools из WebView2 для отладки своего кода. Это дает доступ к мощным инструментам отладки и профилирования производительности, упрощая разработку, тестирование и оптимизацию Custom UI Overlay.

Чтобы открыть DevTools, нажмите F12, пока оверлей активен и находится в фокусе.

Пользовательские CSS и JS

Custom UI Overlay поддерживает подключение пользовательских CSS и JavaScript — как встроенных прямо в код, так и подключаемых через CDN. Это дает еще больше контроля над внешним видом и поведением оверлея. По умолчанию EyeAuras включает Bootstrap 5 и связанные с ним CSS- и JavaScript-файлы, что дает хорошую базу для создания адаптивных mobile-first проектов.

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

Поскольку Custom UI Overlay позволяет пользовательскому коду глубоко взаимодействовать с внутренними механизмами EyeAuras, рекомендуется использовать только код из доверенных источников. Сам код компилируется на стороне клиента, что позволяет выполнить статический анализ до запуска.