¶ 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)
![8tr179z[1].png](/assets/8tr179z%5B1%5D.png)
GTA 5 RP Majestic helper [Alt:V] (https://eyeauras.net/share/S20240121210358gpJJuNtIZRSQ)
![f9882rg[1].png](/assets/f9882rg%5B1%5D.png)
Lineage 2 Essence auto flags (https://eyeauras.net/share/S20240325120506y5CPVmuwLvC3)
![hrux7lu[1].png](/assets/hrux7lu%5B1%5D.png)
Time Alert (https://eyeauras.net/share/S20230424095833g0ccyvLqWNNo)
![d83bcbeeac554d2e9b939[1].png](/assets/d83bcbeeac554d2e9b939%5B1%5D.png)
¶ Редактор кода и распространение
Одно из главных преимуществ 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, рекомендуется использовать только код из доверенных источников. Сам код компилируется на стороне клиента, что позволяет выполнить статический анализ до запуска.