Таймер стрима¶
Таймер стрима — это секундомер для сцены OBS. Он считает время вперёд от нуля: включили перед
перерывом, поставили на паузу, продолжили, сбросили. Одно и то же состояние видят страница в OBS, кабинет,
пульт в окне OBS, кнопки Stream Deck и чат: сверять их вручную не нужно.
У канала один таймер.
Нужна помощь разработчика?
Напишите mrgorkiy в Telegram. Укажите страницу, ожидаемый результат, что произошло и шаги для повторения. Можно приложить скриншот или короткое видео. Перед отправкой закройте токены, коды подтверждения и приватные ссылки OBS.
Что на странице¶
Страница Владелец → Таймер стрима разбита на вкладки. Над ними — текущее состояние таймера и четыре
плитки-сводки: работает ли ссылка для OBS, какое выбрано оформление, настроен ли пульт для OBS и Stream
Deck, включена ли команда !таймер. Нажатие на плитку открывает нужную вкладку.
| Вкладка | Что там |
|---|---|
Пульт |
крупное время и кнопки Старт, Пауза, Сброс; где ещё можно управлять таймером |
Сцена OBS |
приватная ссылка для Browser Source, формат времени и задержка скрытия после сброса |
Оформление |
вид таймера, цвета, подпись и свой CSS с живым превью |
Док и Stream Deck |
токен управления, пульт для панели в OBS и адреса кнопок Stream Deck |
Команды чата |
тумблеры команды !таймер и её английского алиаса !timer |
Формат, задержка и оформление сохраняются вместе кнопкой Сохранить на панели внизу страницы. Пока
изменения не сохранены, у вкладки стоит жёлтая точка, а на сцене остаётся прежний вид. Кнопки пульта,
ссылки и тумблеры команд срабатывают сразу.
Как таймер ведёт себя на сцене¶
| Состояние | Что на сцене |
|---|---|
| Идёт | цифры видны и меняются каждую секунду |
| Пауза | цифры видны и стоят на месте |
| Сброшен | ещё несколько секунд видно 00:00, потом источник пустеет |
Задержка после сброса настраивается на вкладке Сцена OBS: по умолчанию 5 секунд, 0 — исчезает
сразу, максимум 3600. Пауза не скрывает таймер никогда: пока идёт перерыв, зритель должен видеть,
сколько уже прошло.
Сброс из кабинета переспрашивает, если таймер идёт или стоит на паузе: время обнулится сразу у всех.
Секунды считает сама страница в OBS. Сервер присылает только точку отсчёта — момент старта и накопленное время, — поэтому цифры идут ровно даже при коротком обрыве связи, а после переподключения сходятся снова.
Формат времени¶
| Формат | Пример | Когда выбирать |
|---|---|---|
| Авто | 07:42, после часа 01:07:42 |
обычные перерывы, где час — редкость |
Минуты и секунды (mm:ss) |
67:42 |
нужно постоянное число ячеек, а часы не нужны |
Всегда с часами (hh:mm:ss) |
01:07:42 |
сцена рассчитана на шесть цифр с самого начала |
В режиме Авто источник становится шире в тот момент, когда появляется час. Если оформление в OBS
рассчитано на фиксированную ширину, выбирайте постоянный формат.
Ссылка для OBS¶
Публичная ссылка имеет вид:
Токен показывается только сразу после создания или замены. PulseCaster хранит только хэш токена, поэтому
старую полную ссылку нельзя повторно раскрыть из настроек. Если URL потерялся, нажмите Заменить ссылку
и вставьте новый адрес в OBS. Замена и выключение переспрашивают: источник в OBS опустеет.
Если ссылка выключена, токен неверный или канал не совпадает, страница отдаёт 404.
Как добавить в OBS¶
- Откройте
Владелец→Таймер стрима→ вкладкаСцена OBS. - Нажмите
Создать ссылкуи скопируйте адрес. - В OBS добавьте источник
Browser/Браузери вставьте ссылку в поле URL. - Задайте размер источника, например
520x180. Цифры подстраиваются под размер сами. - Больше ничего не нужно: таймер приходит в оформлении из вкладки
Оформление.
Страница прозрачная. Обновляется она через SSE: перезагружать источник не нужно ни при старте и паузе, ни после сохранения нового оформления в кабинете.
Параметры адреса¶
| Параметр | Что делает |
|---|---|
?style=none |
отключает встроенный вид и цвета из кабинета: остаются цифры, подпись и свой CSS |
style=none нужен, когда оформление целиком пишется в поле Custom CSS у источника OBS. Если вы так
уже сделали раньше, ничего менять не нужно: такой источник выглядит как прежде. Правила видимости от
параметра не зависят: сброшенный таймер всё так же исчезает со сцены сам.
Оформление¶
Вкладка Оформление устроена как редактор сцен в разделе
Ивенты роста: сверху выбирается вид, слева живое превью, справа настройки выбранной
части. Нажмите в превью на цифры, панель или подпись — откроются их настройки.
Превью собрано из тех же правил, что получает OBS. Под ним можно переключить пример: Идёт, Пауза,
Сброшен (так таймер выглядит до конца задержки скрытия), время больше или меньше часа для формата
Авто, фон сцены — прозрачный, тёмный или светлый — и размер источника: 520 × 180, 400 × 120,
800 × 260 или 1920 × 1080. Поле Custom CSS в самом OBS превью не видит.
Виды¶
01:07:00
01:07:05
07:42
Перерыв
04:58
| Вид | Как выглядит |
| --- | --- |
| Электронное табло | красные светящиеся цифры на тёмной панели; стоит по умолчанию |
| Табло с ячейками | каждая цифра в своей клетке, двоеточия розовые, секунды жёлтые; на паузе все клетки жёлтые |
| Просто цифры | белое время с тёмной тенью, без плашки; на паузе мигает двоеточие |
| Плашка с подписью | полупрозрачная плашка, подпись слева, жёлтое время справа; при выборе подпись сразу становится `Перерыв` |
| Без оформления | только цифры без цвета и размера — то же, что `?style=none`, но из кабинета |
Канал, который ничего не менял, видит электронное табло ровно таким, каким оно было до появления
редактора. Смена вида сбрасывает цвета прошлого вида, а подпись и свой CSS сохраняются. Исключение —
подпись `Перерыв`, которую поставила «Плашка с подписью»: если её не меняли, при уходе с плашки она
убирается.
### Что настраивается
| Часть | Настройки |
| --- | --- |
| Цифры | цвет цифр, цвет на паузе, цвет двоеточий, цвет секунд, свечение (у табло и плашки) или тень (у «Просто цифры») |
| Панель | фон сверху и снизу — градиент, одинаковые цвета дают сплошной фон, — непрозрачность фона и скругление углов до `60` px |
| Подпись | короткий текст до `40` символов над цифрами или слева от них и его цвет; пустое поле — подписи нет |
| Свой CSS | обычные CSS-правила для страницы таймера, до `20 000` символов |
Пока поле цвета не трогали, в нём стоит цвет выбранного вида с пометкой `из вида`. Свой цвет можно
вернуть ссылкой `как в виде`, всю панель — `Вернуть панель как в виде`, всё оформление сразу — кнопкой
`Вернуть стандартное оформление`.
Свечение у табло и плашки берёт цвет цифр: перекрасили цифры — перекрасилось и оно. У вида «Табло с
ячейками» свечения нет, у «Просто цифры» нет панели.
### Что сильнее чего
Правила накладываются в таком порядке, каждое следующее сильнее предыдущего:
1. выбранный вид;
2. цвета, панель и подпись из кабинета;
3. свой CSS из кабинета;
4. поле `Custom CSS` у источника в OBS.
Вид и цвета из кабинета завёрнуты в `:where()` с нулевым весом, поэтому любое обычное правило — и своё
из кабинета, и из OBS — перебивает их без `!important`. Свой CSS из кабинета удобнее тем, что его видно
в превью и он одинаков во всех сценах и на всех компьютерах. CSS, который уже вставлен в OBS, переносить
не обязательно: он продолжает работать.
## Свой CSS
Свой CSS вставляется во вкладке `Оформление` → `Свой CSS` или в поле `Custom CSS` у Browser Source в OBS.
Самая частая правка — цвет — делается одной переменной, панель и свечение при этом остаются:
.pc-timer {
--pc-timer-ink: #4ade80;
--pc-timer-glow: rgba(74, 222, 128, 0.85);
--pc-timer-glow-soft: rgba(74, 222, 128, 0.45);
}
<div class="pc-timer"
data-state="running"
data-visible="true"
data-format="auto"
data-preset="led"
data-text="01:07:05"
data-length="8"
data-digits="6"
style="--pc-timer-chars: 8; --pc-timer-digits: 6;">
<span class="pc-timer-label">Перерыв</span>
<span class="pc-timer-value" aria-label="01:07:05">
<span class="pc-timer-char pc-timer-digit" data-unit="hours">0</span>
<span class="pc-timer-char pc-timer-digit" data-unit="hours">1</span>
<span class="pc-timer-char pc-timer-sep">:</span>
<span class="pc-timer-char pc-timer-digit" data-unit="minutes">0</span>
<span class="pc-timer-char pc-timer-digit" data-unit="minutes">7</span>
<span class="pc-timer-char pc-timer-sep">:</span>
<span class="pc-timer-char pc-timer-digit" data-unit="seconds">0</span>
<span class="pc-timer-char pc-timer-digit" data-unit="seconds">5</span>
</span>
</div>
html body .pc-timer[data-visible] { display: grid; }
.pc-timer { transition: opacity 0.4s ease; }
.pc-timer[data-visible="false"] { opacity: 0; }
@font-face {
font-family: "DS-Digital";
src: url("file:///C:/Stream/fonts/ds-digital.woff2") format("woff2");
}
Сделай CSS для таймера PulseCaster, который показывается в OBS через Browser Source.
Контекст:
- OBS открывает прозрачную HTML-страницу, на которой есть только время и, если задана, короткая подпись.
- Я не могу менять HTML и не хочу добавлять JavaScript.
- Можно использовать только CSS. Я вставлю его в поле «Свой CSS» в кабинете или в Custom CSS источника OBS.
- Время идёт вперёд от нуля: старт, пауза, продолжение, сброс.
- Встроенное оформление завёрнуто в :where() с нулевым весом, поэтому мои обычные правила его перебивают
без !important. Если стиль совсем другой, я выберу в кабинете вид «Без оформления» — тогда встроенной
темы нет вовсе, рассчитывай на чистый лист.
- HTML-структура такая:
<div class="pc-timer"
data-state="running"
data-visible="true"
data-format="auto"
data-preset="none"
data-text="01:07:05"
data-length="8"
data-digits="6"
style="--pc-timer-chars: 8; --pc-timer-digits: 6;">
<span class="pc-timer-label">Перерыв</span>
<span class="pc-timer-value" aria-label="01:07:05">
<span class="pc-timer-char pc-timer-digit" data-unit="hours">0</span>
<span class="pc-timer-char pc-timer-digit" data-unit="hours">1</span>
<span class="pc-timer-char pc-timer-sep">:</span>
<span class="pc-timer-char pc-timer-digit" data-unit="minutes">0</span>
<span class="pc-timer-char pc-timer-digit" data-unit="minutes">7</span>
<span class="pc-timer-char pc-timer-sep">:</span>
<span class="pc-timer-char pc-timer-digit" data-unit="seconds">0</span>
<span class="pc-timer-char pc-timer-digit" data-unit="seconds">5</span>
</span>
</div>
Что меняется само:
- data-state равен running, paused или idle;
- data-visible становится false после сброса, и страница сама убирает таймер со сцены;
- в формате mm:ss символов пять (00:00), в hh:mm:ss — восемь (00:00:00), в формате «Авто» пять до первого часа и восемь после;
- data-length и data-digits, а также переменные --pc-timer-chars и --pc-timer-digits, всегда совпадают с текущей строкой;
- .pc-timer-label есть только тогда, когда подпись задана.
Задача:
- Фон страницы должен быть прозрачным.
- Цифры должны хорошо читаться поверх игры или камеры.
- Нужен стиль: [опиши стиль: электронное табло, неон, минимализм, ретро, киберпанк и т.д.].
- Цвета сцены: [впиши основные цвета].
- Размер источника OBS: [например 520x180 или 1920x1080].
- Подпись: [нужна или нет; где стоит — над временем или слева].
- Шрифт: [системный или file:///путь/к/моему-шрифту.woff2].
Требования к ответу:
- Верни только готовый CSS.
- Не используй внешние URL, кроме моего file:/// шрифта, если я его указал.
- Используй селекторы .pc-timer, .pc-timer-label, .pc-timer-value, .pc-timer-char, .pc-timer-digit, .pc-timer-sep.
- Не скрывай .pc-timer-value.
- Не пытайся скрывать таймер сам: это делает страница через data-visible.
- Задай все нужные свойства явно, не рассчитывая на встроенное оформление.
- Учитывай, что символов может быть пять или восемь; используй селекторы .pc-timer[data-digits="4"] и .pc-timer[data-digits="6"], если размер должен подстраиваться.
- Добавь font-variant-numeric: tabular-nums или фиксированную ширину цифр, чтобы строка не дёргалась при смене секунд.
- Сделай отдельный вид для паузы через .pc-timer[data-state="paused"].
- Добавь text-shadow или контрастную плашку, чтобы время читалось на ярком фоне.
- Если добавляешь анимацию, сделай её медленной и ненавязчивой.
POST /{channel}/timer-webhook/{link_id}/{token}/start
POST /{channel}/timer-webhook/{link_id}/{token}/pause
POST /{channel}/timer-webhook/{link_id}/{token}/toggle
POST /{channel}/timer-webhook/{link_id}/{token}/reset