🎮 Функції платформи Studio

My Pie Studio — це дизайнер оверлеїв у реальному часі для стрімерів. Цей посібник є повним довідником для кожного типу елементів, властивостей та клавіатурних скорочень, доступних у редакторі.

🎛️ Спільні властивості елементів #

Більшість візуальних елементів (Текст, Зображення, WebM, Таймер, Біжучий рядок, iFrame) мають спільний набір властивостей на правій панелі Редактор об'єктів:

📍 Позиція та розмір #

  • X, Y — Піксельні координати на полотні. Елементи також можна перетягувати безпосередньо.
  • Ширина, Висота — Розміри в пікселях. Перетягуйте кутові маркери для зміни розміру; утримуйте Shift для збереження пропорцій. Мінімальний розмір — 20×20px.
  • Обертання — Градуси від 0° до 360°. Маркери зміни розміру враховують поточний кут обертання.
  • Віддзеркалення Г / В — Відображення елемента горизонтально або вертикально (через scaleX / scaleY).

🎨 Вигляд та поведінка #

  • Непрозорість — Прозорість від 0.0 (невидимо) до 1.0 (повністю видимо).
  • Порядок шарів — Використовуйте кнопки "Вперед" та "Назад" для переміщення об'єктів на задній чи передній план.
  • Блокування (🔒) — Забороняє перетягування, зміну розміру та клавіатурне переміщення. Блокування папки рекурсивно блокує всіх нащадків.
  • Видимість (👁) — Приховати/показати на оверлеї. Приховування папки рекурсивно приховує всіх нащадків.

🎬 Анімації #

Кожен візуальний елемент підтримує окремі типи анімацій Intro (вхід) та Outro (вихід), наприклад Fade або Slide, з налаштуванням тривалості в мілісекундах.

📦 Типи елементів #

📝 Текст #

Статичні або динамічні текстові мітки з повним керуванням типографікою.

  • Вміст — Багаторядкове введення тексту. Перші 20 символів автоматично стають назвою шару.
  • Шрифт — Вибір із підібраних Google Fonts (Roboto, Montserrat, Pacifico тощо).
  • Розмір шрифту — Розмір у пікселях.
  • Колір — Вибір кольору тексту.
  • Фон — Кольорова плашка за текстом з окремим повзунком непрозорості (напр., rgba(0,0,0,0.5)) для читабельності поверх відео.

🖼️ Зображення #

Відображення статичної або анімованої графіки (PNG, JPG, GIF, WebP).

  • Пряме завантаження — Завантаження локального файлу з вашого комп'ютера. Усі зображення та анімації автоматично стискаються системою для швидкого завантаження на стрім без втрати якості.
  • Завантажити з URL — Вставте будь-яке публічне посилання на зображення. Редактор автоматично визначає GIF-файли та позначає їх як анімовані.
  • Назва — Унікальний ідентифікатор для цього зображення (використовується в панелі Шарів).
  • Прив'язане аудіо — Призначте елемент Аудіо для автоматичного відтворення під час intro-анімації цього зображення.

🎬 WebM Відео #

Відеофайли високої якості з прозорим фоном. Ідеальний вибір для анімованих стікерів та складних пересувних ефектів.

  • URL — Пряме посилання на файл .webm.
  • Зациклення — Перемикач автоматичного перезапуску відео після завершення.
  • Назва — Унікальна назва шару.

⏱️ Таймер #

Зворотний відлік до конкретної дати та часу.

  • Цільова дата — Конкретна дата та час, до яких ведеться зворотний відлік.
  • Текст завершення — Повідомлення, що відображається коли відлік досягає нуля (за замовчуванням: "Time's Up!").
  • Шрифт / Колір / Фон — Ті ж самі налаштування типографіки, що й для елементів Тексту.

📰 Біжучий рядок #

Рухомий текстовий рядок, який безперервно прокручує ваше повідомлення на екрані.

  • Текст — Вміст, що прокручується. Перші 20 символів стають назвою шару.
  • Швидкість — Від 10 (повільно) до 500 (дуже швидко). За замовчуванням 100.
  • Напрямок — left (за замовчуванням), right, up або down.
  • Фон — Кольорова плашка за рядком з незалежною непрозорістю.
  • Шрифт / Колір — Ті ж самі налаштування типографіки, що й для Тексту.

🌐 iFrame (Вбудовування) #

Вбудування будь-якої веб-сторінки безпосередньо в оверлей — чат-віджети, панелі донатів, дашборди тощо.

  • URL — Веб-адреса для вбудування.
  • Ширина / Висота вмісту — Внутрішня роздільна здатність документа (за замовчуванням 1920×1080). Змініть для збільшення/зменшення масштабу вбудованої сторінки.
  • Прокрутка — Перемикач видимості смуг прокрутки iframe.
  • Панорамування — Утримуйте Alt + перетягування на полотні для зсуву вмісту внутрішньої сторінки у фреймі.
  • Масштаб — Утримуйте Alt + коліщатко миші для збільшення/зменшення вбудованого вмісту (мін. масштаб 0.1, крок 0.05).
  • Числові поля — Редактор також надає поля X, Y, Ширина, Висота, Ширина вмісту та Висота вмісту для точного позиціювання.

🔊 Аудіо (Звукові сповіщення) #

Звукові ефекти, які можна запускати через вебхуки або прив'язувати до візуальних елементів. Аудіо не має візуального відображення на полотні.

  • URL аудіо — Пряме посилання на файл (MP3, OGG, WAV тощо).
  • Гучність — Від 0.0 (тиша) до 1.0 (максимум). За замовчуванням 0.5.
  • Назва — Має бути унікальною серед аудіо-елементів. Використовується в команді curl для вебхука.
  • Тестове відтворення — Кнопка "Play" в редакторі дозволяє попередньо прослухати звук локально у браузері.
  • Вебхук-тригер — Запуск звуку віддалено через API. Дивіться Посібник із вебхуків.

✨ Ефекти (Частинки) #

Масштабні повноекранні візуальні ефекти (сніг, дощ тощо). Вони покривають весь екран і відображаються найвище над іншими елементами.

  • Тип — snow (за замовчуванням), rain або leafs.
  • Власний SVG — Можливість вставити власний векторний дизайн, і система перетворить його на падаючі частинки.
  • Кількість — Число частинок (за замовчуванням 100).
  • Швидкість — Швидкість руху (за замовчуванням 2).
  • Розмір — Розмір частинки (за замовчуванням 3).
  • Напрямок — Напрямок падіння: down (за замовчуванням), up, left, right.
  • Затухання — Відсоток висоти, де частинки починають зникати (за замовчуванням 100 = без затухання).

📁 Папка #

Організаційні контейнери для групування шарів.

  • Згорнути/Розгорнути — Перемикання видимості нащадків у панелі Шарів.
  • Блокування — Блокування папки рекурсивно блокує всіх нащадків.
  • Видимість — Приховування папки рекурсивно приховує всіх нащадків.
  • Видалення — Видалення папки видаляє весь вміст всередині.
  • Папки можна вкладати одна в одну та перетягувати у списку шарів, але їх не можна візуально перетягувати чи змінювати їх розмір безпосередньо на полотні. Папки також не можна запускати через вебхуки.

🖥️ Робочий простір #

🚀 Публікація (Стан змін) #

Усі зміни, які ви робите в редакторі, бачите лише ви. Щойно дизайн буде готовий, натисніть Опублікувати — і система миттєво оновить оверлей на вашому стрімі. Натискання Скасувати зміни відкине всі незбережені редагування.

📐 Роздільна здатність полотна #

Натисніть Налаштування полотна на панелі інструментів для зміни роздільної здатності. Оберіть із шаблонів (Десктоп 16:9, Мобільний 9:16) або введіть власні розміри. Кнопка Swap швидко перемикає між альбомною та портретною орієнтацією.

🧲 Сітка та прив'язка #

Увімкніть сітку вирівнювання та розумну прив'язку з панелі інструментів. Прив'язка використовує поріг 8px та орієнтується на краї полотна, центр полотна, та краї і центри інших об'єктів.

🖼️ Фон полотна #

Завантажте фонове зображення або отримайте поточну мініатюру Twitch-стріму прямо з панелі інструментів. Це лише для дизайну — фон не відображається на оверлеї OBS.

⌨️ Клавіатурні скорочення #

Скорочення активні, коли полотно у фокусі (а не при введенні тексту в полях редактора). Не працюють для заблокованих об'єктів, папок та ефектів.

Переміщення та видалення

  • ← → ↑ ↓ — Переміщення виділеного елемента на 1px.
  • Shift + Стрілки — Переміщення виділеного елемента на 10px.
  • Delete / Backspace — Видалення виділеного елемента (з підтвердженням).

Клавіші-модифікатори

  • Shift + кутовий ресайз — Збереження пропорцій при зміні розміру.
  • Alt + перетягування на iFrame — Панорамування вмісту внутрішньої веб-сторінки.
  • Alt + коліщатко миші на iFrame — Збільшення/зменшення масштабу вбудованого вмісту.
💡 Порада: Скорочення працюють лише коли жодне текстове поле, textarea або select не у фокусі. Клацніть на полотно для повернення клавіатурного керування.

🎛️ Дистанційне керування OBS #

My Pie Studio може керувати вашим OBS прямо з веб-редактора — перемикати сцени, запускати/зупиняти стрім, керувати записом тощо. Все працює через API браузерного джерела OBS: без плагінів, без OBS WebSocket сервера.

Панель керування OBS — Повний доступ: статус стріму/запису, керування сценами, кнопки стріму/запису, буфер повторів, віртуальна камера

⚠️ Обов'язково: Дозволи сторінки в OBS #

За замовчуванням OBS не дозволяє браузерним джерелам керувати собою. Потрібно увімкнути вручну:

  1. Відкрийте OBS → панель Джерела → правий клік на вашому MyPie джерелі → Властивості
  2. Прокрутіть до «Дозволи сторінки» (також «Page permissions» / «Control Access Level»)
  3. Встановіть «Advanced access» або «Full access»
  4. Натисніть OK

Якщо «Дозволи сторінки» залишені на значенні за замовчуванням (без доступу), панель OBS покаже повідомлення «📡 OBS не виявлено» з кнопкою Перевірити знову. Студія визначає рівень дозволу автоматично, коли оверлей підключається.

📊 Рівні дозволів #

🔒 Без доступу (за замовчуванням)

Панель OBS показує повідомлення «📡 OBS не виявлено» з кнопкою Перевірити знову. Елементи керування відсутні.

Це відбувається, коли дозволи сторінки OBS залишені за замовчуванням, або коли OBS не запущено. Кнопка OBS залишається видимою (якщо увімкнена в Дашборді), надаючи інструкцію для підключення.

⚡ Розширений доступ (Рівень 4)

Панель OBS показує активні елементи керування. Ваша команда може:

  • Бачити статус стріму та запису (ON/OFF + таймер тривалості)
  • Переглядати список усіх сцен OBS
  • Перемикати активну сцену (Program)
  • Перемикати сцену попереднього перегляду (у Studio Mode)
  • Оновлювати список сцен

Не може запускати/зупиняти стрім, запис, буфер повторів, віртуальну камеру або змінювати переходи.

🔓 Повний доступ (Рівень 5)

Все з попереднього рівня, плюс повне керування OBS:

  • Стрім — Запуск / Зупинка трансляції
  • Запис — Запуск / Зупинка / Пауза / Продовження запису
  • Буфер повторів — Запуск / Зупинка / Збереження повтору
  • Віртуальна камера — Запуск / Зупинка віртуальної камери
  • Переходи — Перегляд доступних переходів, вибір активного, запуск переходу (Studio Mode)
  • Studio Mode — Коли в OBS увімкнено Studio Mode, панель автоматично показує Preview Scene та Transition

🔧 Як це працює #

Все працює через ваше існуюче браузерне джерело — ніякого додаткового налаштування:

  1. Ваш оверлей (браузерне джерело в OBS) виявляє window.obsstudio — нативний CEF API, який надає OBS
  2. Він повідомляє рівень дозволу на сервер через WebSocket
  3. Редактор студії показує або приховує елементи керування залежно від рівня
  4. Коли ви натискаєте «Set Scene» в редакторі → команда йде через WebSocket → оверлей виконує obsstudio.setCurrentScene() → OBS перемикається

Шлях команди: Редактор → Сервер (WebSocket) → Браузерне джерело OBS → CEF API → OBS

Все відбувається менше ніж за 100мс у локальній мережі.

👥 Контроль доступу для кожного користувача #

Як власник студії, ви контролюєте, хто бачить елементи керування OBS простим перемикачем:

  1. Перейдіть у Дашборд → Команда
  2. Біля кожного прийнятого менеджера є перемикач OBS (зелений = увімкнено, сірий = вимкнено)
  3. Нові менеджери починають з вимкненим OBS доступом — ви повинні увімкнути його вручну
  4. Коли увімкнено, кнопка OBS з'являється в нижній панелі менеджера — навіть якщо OBS не запущено. Якщо OBS офлайн, панель показує повідомлення «📡 Не виявлено» з кнопкою повтору
  5. Коли вимкнено, кнопка OBS повністю прихована і всі OBS команди блокуються на сервері

Це дає вам два незалежних рівні безпеки:

  • Перемикач у Дашборді — контролює хто бачить кнопку OBS (для кожного користувача)
  • Дозволи сторінки OBS — контролює які дії доступні (лише сцени vs повний контроль)

⚠️ Критично: Додайте оверлей у всі сцени #

Браузерне джерело з оверлеєм — це єдине з'єднання вашої команди з OBS. Якщо хтось перемикає на сцену, де оверлей не доданий, WebSocket від'єднується і все керування OBS зупиняється.

Завжди додавайте оверлей MyPie у кожну сцену OBS. Його можна розмістити на найнижчому шарі або сховати за іншими джерелами — головне, щоб він був присутній у кожній сцені і з'єднання не переривалося.

💡 Порада: Якщо ви змінили рівень дозволу у властивостях OBS під час роботи оверлея, студія виявить це автоматично та оновить інтерфейс — перезавантаження не потрібне.