Счётчики OBS

Счётчики — страница владельца для чисел канала: смертей, побед, «сколько раз сказал». Каждый счётчик отвечает на свою команду в чате, его меняют правила, кнопки на странице и Stream Deck, а приватная ссылка показывает его в OBS. Все они работают с одним значением: если число изменилось в одном месте, OBS и бот увидят то же число без ручной синхронизации.

У счётчика может быть одно общее значение или отдельные значения для каждой категории.

Нужна помощь разработчика?

Напишите mrgorkiy в Telegram. Укажите страницу, ожидаемый результат, что произошло и шаги для повторения. Можно приложить скриншот или короткое видео. Перед отправкой закройте токены, коды подтверждения и приватные ссылки OBS.

Что на странице

Слева — список счётчиков канала с текущими значениями и пометками: OBS — ссылка для OBS работает, Deck — работают кнопки Stream Deck, выключен — счётчик выключен. На телефоне список становится лентой над деталями. Кнопка Новый счётчик открывает форму создания; если счётчиков ещё нет, она открыта сразу.

Справа — выбранный счётчик: название, состояние Включён или Выключен и четыре плитки-сводки — значение, ссылка для OBS, оформление и Stream Deck. Нажатие на плитку открывает нужную вкладку.

Вкладка	Что там
Пульт	крупное значение, кнопки − и + с настраиваемым шагом, точное значение, Обнулить, таймер «без события» и где ещё меняется счётчик
Настройки	команда, ответ в чат с живым примером, даты таймера, включённость и удаление
Сцена OBS	приватная ссылка для Browser Source и шаблон текста на сцене
Оформление	вид счётчика на сцене, цвета, подпись, значок и свой CSS с живым превью
Stream Deck	токен управления и адреса четырёх кнопок

Команда, ответ, даты, включённость, шаблон текста и оформление сохраняются вместе кнопкой Сохранить на панели внизу страницы. Пока изменения не сохранены, у вкладки и у счётчика в списке стоит жёлтая точка. Если перейти к другому счётчику с несохранёнными правками, страница сначала переспросит. Кнопки пульта, ссылки и токены срабатывают сразу и несохранённые правки не трогают.

Пульт

Кнопки − и + меняют значение на шаг из поля Шаг кнопок, по умолчанию на 1. Установить ставит число из поля Точное значение. Ниже нуля значение не опускается.

Обнулить ставит 0 и сначала переспрашивает: значение обнулится и в чате, и в правилах, и на сцене. Таймер «без события» при этом не меняется.

Выключенный счётчик на пульте меняется как обычно, но в чате бот на его команду молчит, а страница в OBS пустая.

Ответ в чат

Счётчик сам отвечает на свою команду, например !смерти. Текст задаётся во вкладке Настройки в поле Ответ в чат, а под полем сразу видно, что напишет бот.

Плейсхолдер	Что подставляется
{value}	текущее значение
{name}	имя без !, например смерти
{category}	текущая категория у счётчика в режиме по категориям
{timer}	сколько прошло с последнего сброса таймера
{previous}	сколько длился прошлый отрезок, до последнего сброса
{since}	с какой даты ведём счёт, например 29.10.2022

Слово после числа склоняется так: {format({value}, "раз", "раза", "раз")} даст «1 раз», «2 раза», «5 раз». Ответ обязан содержать {value} и быть не длиннее 300 символов.

Зрителям бот отвечает текущим значением. Стример и модераторы могут менять число прямо из чата: !смерти +1, !смерти -5.

Если команду перехватывает правило с Остановить правила ниже, отвечает правило, а этот текст не используется. Пока такое правило на паузе или исчерпало лимит, счётчик снова отвечает своим текстом — если у правила не включён подпункт …и пока правило на паузе или исчерпало лимит.

Команда — это ! и одно слово из букв, цифр, _ и -, до 50 символов. Если сменить команду, правила со старым ключом перестанут менять этот счётчик — поправьте их тоже.

Таймер «без события»

У каждого счётчика есть таймер: сколько прошло с последнего события. Так собираются ответы вида:

3 дня, 4 часа без смертей (умерли уже 57 раз с 29.10.2022)

Поле	Что значит	В ответе счётчика	В правилах
Считаем с	дата, с которой ведём счёт	{since}	{counter.since:!ключ}
Последний сброс таймера	момент, от которого идёт таймер	{timer}	{counter.timer:!ключ}
Прошлый отрезок	сколько продержались до последнего сброса	{previous}	{counter.previous:!ключ}

Время пишется словами и со склонением: 1 год, 2 месяца, 3 дня, 4 часа, 5 минут. Нулевые части пропускаются — 1 год, 3 дня, меньше минуты — 0 минут. Годы и месяцы считаются по календарю, даты — по московскому времени.

Таймер сбрасывают:

• правило с действием Увеличить счетчик или Умный счетчик и галочкой Сбросить таймер «без события» — готовые примеры есть в конструкторе правил;
• кнопка Сбросить таймер на вкладке Пульт; она сначала переспрашивает.

При сбросе нынешний отрезок становится прошлым, а таймер начинается с 0 минут. Кнопки −, +, Обнулить, Установить, чат-команда !ключ +1 и кнопки Stream Deck таймер не трогают.

У старых счётчиков таймер идёт с момента создания. Если счётчик переехал с другого бота, поставьте Считаем с и Последний сброс таймера во вкладке Настройки и нажмите Сохранить. Время последнего сброса вводится в часовом поясе вашего устройства.

Ссылка для OBS

Ссылка создаётся во вкладке Сцена OBS кнопкой Создать ссылку. Если ссылки ещё нет, она появится и при первом сохранении шаблона текста или оформления.

Публичная ссылка имеет вид:

/{channel}/counter/{link_id}/{token}

Токен показывается только сразу после создания или замены ссылки. PulseCaster хранит только хэш токена, поэтому старую полную ссылку нельзя повторно раскрыть. Если адрес потерялся, нажмите Заменить ссылку и вставьте новый адрес в OBS: старый сразу перестанет открываться, а текст и оформление останутся.

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

Если счётчик удалён или выключен, ссылка выключена, токен неверный или канал не совпадает, публичная страница отдаёт 404.

Как добавить в OBS

1. Откройте Владелец → Счётчики и выберите счётчик.
2. Во вкладке Сцена OBS нажмите Создать ссылку и скопируйте адрес.
3. В OBS добавьте источник Браузер (Browser) и вставьте адрес в поле URL.
4. Задайте размер источника, например 420 × 220. Встроенные виды подстраиваются под размер сами.
5. Выберите вид во вкладке Оформление и сохраните.

Страница прозрачная и обновляется через SSE без перезагрузки источника: значение, текст и оформление приходят сами. Изменения PulseCaster получает от базы событийно, а редкая фоновая сверка нужна только как страховка при временной потере соединения.

Параметры адреса

Параметр	Что делает
?style=none	отключает встроенный вид и цвета из кабинета; остаются число, подпись, значок и свой CSS — для оформления с чистого листа

?style=off и ?style=0 работают так же.

Текст на сцене

По умолчанию на сцене только значение — шаблон {value}. Шаблон меняется во вкладке Сцена OBS в поле Шаблон текста, под ним видно, что сейчас покажет сцена.

Плейсхолдер	Что подставляется
{value}	текущее значение счётчика
{name}	имя без префикса команды, например смерти
{key}	полный ключ, например !смерти
{category}	текущая категория у счётчика в режиме по категориям

Шаблон обязан содержать {value} и быть не длиннее 160 символов. Готовые варианты — кнопками под полем: {value}, Смертей: {value}, {name}: {value} и для счётчика по категориям {category} — {value}.

Таймер «без события» на сцену не выводится: {timer}, {previous} и {since} работают только в ответах чата.

Если шаблон не равен {value}, страница показывает готовую строку одним текстом. Ячейки табло и крупное число рассчитаны на шаблон {value}, поэтому подпись вроде «Смертей» лучше задать во вкладке Оформление: тогда число остаётся отдельным и стилизуется целиком.

Оформление

Вкладка Оформление устроена как у таймера стрима: сверху выбирается вид, рядом живое превью, сбоку настройки выбранной части. Нажмите в превью на число, плашку или подпись — откроются их настройки.

Оформление у каждого счётчика своё: оно хранится у его ссылки для OBS рядом с шаблоном текста, поэтому смерти и победы можно оформить по-разному. Чтобы не настраивать одно и то же дважды, вверху настроек появляется список Взять оформление у, если у другого счётчика оформление уже есть. Он переносит его в черновик, а сохраняется оно как обычно.

Превью собрано из тех же правил, что получает OBS. Под ним можно взять для примера текущее значение, 7 или 1234, кнопками −1 и +1 посмотреть анимацию изменения, переключить фон сцены — прозрачный, тёмный или светлый — и размер источника: 420 × 220, 360 × 190, 220 × 300 или 1920 × 1080. Поле Custom CSS в самом OBS превью не видит.

Виды

57

Крупное число Белое число с тенью прямо поверх сцены, без плашки.

09

Неоновая капсула Компактный счётчик для угла экрана или вертикального оверлея.

☠ 57

Счётчик смертей Грубая плашка со значком, хорошо читается поверх игры.

5 7

Табло Чёткая рамка и цифры в ячейках для строгого спортивного вида.

Смертей 14

Нижняя плашка Спокойный формат для сцены с камерой, чатом и донатами.

Вид	Как выглядит
Без оформления	голый текст браузера, как было до редактора; стоит по умолчанию
Крупное число	белое число с тёмной тенью, без плашки; размер подстраивается под источник и длину числа
Неоновая капсула	вертикальная капсула с градиентом и светящейся рамкой, 112 × 252 при числе 66 px; длинное число делает её круглой
Счётчик смертей	тёмное число шрифтом Impact с жёсткой тенью на матовой плашке; при выборе значок сразу становится ☠
Табло	каждая цифра в своей ячейке, рамка и линии, растягивается на весь источник; ячеек столько же, сколько цифр
Нижняя плашка	полупрозрачная плашка, подпись слева, жёлтое число справа; при выборе подпись сразу становится именем счётчика

Счётчик, которому ничего не меняли, показывает в OBS ровно ту же страницу, что и до появления редактора: та же разметка, те же классы и ни одного правила оформления. Custom CSS, который уже вставлен у источника в OBS, работает как раньше.

Смена вида сбрасывает цвета прошлого вида, а подпись, значок и свой CSS сохраняются. Исключение — то, что вид поставил сам: значок ☠ у «Счётчика смертей» и подпись-имя у «Нижней плашки». Если их не меняли, при уходе с вида они убираются.

Что настраивается

Часть	Настройки
Число	цвет числа, шрифт (обычный, жирный, плакатный, моноширинный, с засечками или как в виде), тень или свечение, толчок при изменении
Плашка	фон сверху и снизу — градиент, одинаковые цвета дают сплошной фон, — цвет рамки, непрозрачность фона и скругление углов до 200 px
Подпись и значок	подпись до 40 символов и её цвет; значок до 8 символов — эмодзи или пара символов, например ☠, 🏆, ❤
Свой CSS	обычные CSS-правила для страницы счётчика, до 20 000 символов

Пока поле цвета не трогали, в нём стоит цвет выбранного вида с пометкой из вида. Свой цвет можно вернуть ссылкой как в виде, всю плашку — Вернуть плашку как в виде, всё оформление сразу — кнопкой Вернуть как было.

Свечение у «Нижней плашки» берёт цвет числа, у «Неоновой капсулы» — цвет рамки: перекрасили — перекрасилось и оно. У «Крупного числа» и «Счётчика смертей» вместо свечения тёмная тень, у «Табло» ни того, ни другого. У «Крупного числа» нет плашки. Толчок при изменении — короткое увеличение числа, когда значение меняется; если в системе включено «уменьшить движение», его нет.

В виде «Без оформления» цвета, шрифт и плашка не действуют: страницу оформляет только свой CSS. Подпись и значок появляются и в нём — как обычный текст перед числом.

Что сильнее чего

Правила накладываются в таком порядке, каждое следующее сильнее предыдущего:

1. выбранный вид;
2. цвета, шрифт и плашка из кабинета;
3. свой CSS из кабинета;
4. поле Custom CSS у источника в OBS.

Вид и цвета из кабинета завёрнуты в :where() с нулевым весом, поэтому любое обычное правило — и своё из кабинета, и из OBS — перебивает их без !important. Свой CSS из кабинета удобнее тем, что его видно в превью и он одинаков во всех сценах и на всех компьютерах. CSS, который уже вставлен в OBS, переносить не обязательно: он продолжает работать.

Свой CSS

Свой CSS вставляется во вкладке Оформление → Свой CSS или в поле Custom CSS у Browser Source в OBS. Кнопка Вставить пример в пустом поле подставляет образец.

Разметка

<div class="pc-counter"
     data-key="!смерти"
     data-name="смерти"
     data-value="57"
     data-text="57"
     data-mode="value"
     data-length="2"
     data-preset="skull"
     data-icon="true"
     data-caption="true"
     style="--pc-counter-digits: 2;">
  <span class="pc-counter-icon" aria-hidden="true">☠</span>
  <span class="pc-counter-caption" aria-hidden="true">Смертей</span>
  <span class="pc-counter-label"></span>
  <span class="pc-counter-value" aria-label="57">
    <span aria-hidden="true">5</span>
    <span aria-hidden="true">7</span>
  </span>
</div>

Селектор	Что это
.pc-counter	весь счётчик
.pc-counter-value	число; каждый его символ — отдельный span внутри, .pc-counter-value > span
.pc-counter-label	готовая строка, если шаблон не {value}
.pc-counter-caption	подпись из кабинета; узла нет, пока подпись не задана
.pc-counter-icon	значок из кабинета; узла нет, пока значок не задан

Атрибут	Что значит
data-mode	value, когда шаблон {value}; template, когда шаблон с текстом
data-length	сколько символов в числе; то же число в переменной --pc-counter-digits
data-preset	выбранный вид; none без оформления и с ?style=none
data-caption, data-icon	стоят, только пока задана подпись или значок
data-change	на долю секунды после изменения: up — число выросло, down — уменьшилось

В режиме data-mode="template" страница показывает .pc-counter-label с готовым текстом, а .pc-counter-value остаётся в HTML, но скрыт. В режиме value скрыт пустой .pc-counter-label. Для табло, капсул и других дизайнов вокруг числа оставьте шаблон {value}.

Переменные

Самая частая правка — цвет — делается одной переменной, плашка и тень при этом остаются:

.pc-counter {
  --pc-counter-ink: #4ade80;
}

Переменная	Что задаёт
--pc-counter-ink	цвет числа
--pc-counter-line	цвет рамки и линий табло
--pc-counter-glow	цвет тени или свечения; transparent убирает их
--pc-counter-panel-top, --pc-counter-panel-bottom	фон плашки сверху и снизу
--pc-counter-radius	скругление плашки
--pc-counter-label-ink	цвет подписи
--pc-counter-font	шрифт
--pc-counter-pop	анимация при изменении; none выключает её

Примеры

Свой шрифт с компьютера стримера и разрядка цифр — поверх любого вида:

@font-face {
  font-family: "Counter Display";
  src: url("file:///C:/Stream/fonts/counter-display.woff2") format("woff2");
}

.pc-counter {
  --pc-counter-font: "Counter Display", system-ui, sans-serif;
}

.pc-counter-value {
  letter-spacing: 0.06em;
}

Вспышка цветом при росте числа и при уменьшении:

.pc-counter[data-change="up"] .pc-counter-value {
  color: #facc15;
}

.pc-counter[data-change="down"] .pc-counter-value {
  color: #f87171;
}

Табло с чистого листа — для адреса с ?style=none. Размер считается от самой Browser Source в OBS:

html,
body {
  width: 100%;
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  font-family: "Arial Black", system-ui, sans-serif;
}

.pc-counter-value {
  display: inline-flex;
  border: 6px solid #ffffff;
  border-radius: 12px;
  background: #0b0b0d;
  color: #ffffff;
  font-size: min(36vw, 72vh);
  font-weight: 900;
  line-height: 0.82;
}

.pc-counter-value > span {
  min-width: 0.78em;
  padding: 0.08em 0.06em 0.13em;
  text-align: center;
}

.pc-counter-value > span + span {
  border-left: 6px solid #ffffff;
}

.pc-counter[data-length="3"] .pc-counter-value {
  font-size: min(27vw, 72vh);
}

Промпт для AI-агента, который сделает свой CSS

Скопируйте текст ниже в ChatGPT, Codex или другой AI-инструмент, если хотите получить оформление под свою сцену.

Сделай CSS для страницы счётчика PulseCaster в OBS Browser Source.

Контекст:
- OBS открывает прозрачную HTML-страницу со счётчиком. Я не могу менять HTML и не хочу добавлять JavaScript.
- Можно использовать только CSS. Я вставлю его в поле «Свой CSS» в кабинете PulseCaster или в Custom CSS у источника в OBS.
- Ссылку я открою с ?style=none, поэтому встроенного оформления нет: всё рисует этот CSS.
- Шаблон текста — {value}, число лежит в .pc-counter-value, каждая цифра — отдельный span внутри.
- HTML-структура такая:

<div class="pc-counter" data-key="!death" data-name="death" data-value="57" data-text="57"
     data-mode="value" data-length="2" data-preset="none" style="--pc-counter-digits: 2;">
  <span class="pc-counter-caption" aria-hidden="true">Смертей</span>
  <span class="pc-counter-label"></span>
  <span class="pc-counter-value" aria-label="57">
    <span aria-hidden="true">5</span>
    <span aria-hidden="true">7</span>
  </span>
</div>

- .pc-counter-caption есть только если я задал подпись в кабинете; тогда у .pc-counter есть data-caption="true".
  Так же .pc-counter-icon и data-icon="true" для значка.
- Пустой .pc-counter-label в этом режиме скрыт самой страницей.
- На долю секунды после изменения у .pc-counter появляется data-change="up" или data-change="down".

Задача:
- Фон страницы прозрачный. Счётчик хорошо читается поверх игры или камеры.
- Стиль: [неоновая капсула, хоррор, пиксельное табло, минимальная плашка, ретро, киберпанк и т.д.].
- Цвета сцены: [основные цвета].
- Размер источника OBS: [например 420x220 или 1920x1080].
- Шрифт: [системный или file:///путь/к/моему-шрифту.woff2].

Требования к ответу:
- Верни только готовый CSS.
- Не используй внешние URL, кроме моего file:/// шрифта, если я его указал.
- Используй селекторы .pc-counter, .pc-counter-value, .pc-counter-value > span, .pc-counter-caption, .pc-counter-icon.
- Не скрывай .pc-counter-value.
- Для ячеек табло используй .pc-counter[data-length="2"], [data-length="3"] и т.д., чтобы размер подстраивался под длину числа.
- Добавь text-shadow или контрастную плашку, чтобы число читалось на яркой игре.
- Анимацию, если она нужна, привяжи к [data-change] и сделай короткой.

Управление из Stream Deck

У каждого счётчика может быть отдельный токен управления. Он не совпадает с токеном ссылки для OBS: ссылку для показа можно заменить или выключить независимо от кнопок Stream Deck.

1. Выберите счётчик и откройте вкладку Stream Deck.
2. Нажмите Создать токен.
3. Задайте шаг для кнопок Увеличить и Уменьшить, например 1 или 5, и значение для Установить.
4. Скопируйте нужные адреса кнопками Копировать.
5. В Stream Deck создайте действие HTTP Request и выберите метод POST.

Шаг и значение попадают прямо в адрес. Поменяли их — скопируйте адрес заново. Обычное открытие ссылки в браузере отправляет GET и не изменяет счётчик. Для проверки используйте действие HTTP Request с методом POST или одну из команд curl ниже.

Готовые адреса имеют вид:

POST /{channel}/counter-webhook/{link_id}/{token}/increment?delta=1
POST /{channel}/counter-webhook/{link_id}/{token}/decrement?delta=1
POST /{channel}/counter-webhook/{link_id}/{token}/reset
POST /{channel}/counter-webhook/{link_id}/{token}/set?value=42

delta должен быть положительным целым числом. Если параметр не указан, используется 1. value для set обязателен и должен быть целым числом от 0 до 2147483647. Значение счётчика никогда не опускается ниже нуля.

Примеры для проверки из терминала:

curl -X POST 'https://pulsecaster.ru/evikey/counter-webhook/7/SECRET/increment?delta=5'
curl -X POST 'https://pulsecaster.ru/evikey/counter-webhook/7/SECRET/decrement?delta=2'
curl -X POST 'https://pulsecaster.ru/evikey/counter-webhook/7/SECRET/reset'
curl -X POST 'https://pulsecaster.ru/evikey/counter-webhook/7/SECRET/set?value=42'

Успешный ответ содержит новое значение. На одну ссылку разрешено до 10 запросов в секунду с коротким burst до 20. При превышении лимита сервер отвечает 429, поэтому для обычных нажатий Stream Deck запас большой, а случайный цикл запросов не сможет бесконечно нагружать систему.

Полный токен показывается только сразу после создания или замены. После перезагрузки страницы видно, что токен настроен, но сам секрет скрыт. Заменить токен выдаёт новый комплект адресов, старые сразу перестают работать. Выключить останавливает все четыре кнопки; включить их снова можно только новым токеном — кнопкой Включить с новым токеном. Замена и выключение сначала переспрашивают.

Безопасность

• Не публикуйте ссылку для OBS в чате или описании канала.
• Не показывайте адреса кнопок Stream Deck на стриме: любой, кто знает такой URL, сможет менять значение счётчика.
• Если ссылка для OBS утекла, нажмите Заменить ссылку во вкладке Сцена OBS: старый адрес сразу перестанет открываться.
• Если утекли адреса кнопок, нажмите Заменить токен во вкладке Stream Deck.
• Если источник больше не нужен, нажмите Выключить; сам счётчик при этом останется.
• Свой CSS и подпись видят все зрители сцены — вставляйте только то, в чём уверены.

Удаление

Кнопка Удалить — в самом низу вкладки Настройки. Перед удалением страница переспрашивает и перечисляет, что пропадёт: значение, команда, ссылка для OBS и кнопки Stream Deck, а у счётчика по категориям — ещё и значения всех категорий вместе с подключёнными старыми значениями. Если правило потом снова изменит этот ключ, счётчик создастся заново — уже с нуля и без ссылок.

Отдельно для каждой категории

При создании выберите Как считать → Отдельно для каждой игры. Команда, правила, кнопки на странице и Stream Deck изменяют значение текущей категории. При смене категории выбирается её сохранённое значение; новая категория начинает с нуля. Возврат в прежнюю категорию восстанавливает её число и таймер. Начальное значение и указанные даты относятся только к текущей категории. Режим и префикс после создания не меняются.

Ссылка для OBS остаётся одной: категория переключается автоматически, без команды в чате. Подстановка {category} доступна в ответе счётчика и в тексте на сцене, например {category} — {value}. Категория берётся из сохранённого состояния Twitch-канала; после окончания эфира используется последняя известная категория. Если её ID ещё неизвестен, OBS показывает «Категория не определена», а кнопки пульта не работают, пока категория не появится.

Идентичность категории определяется по ID Twitch: изменение названия не сбрасывает значение. На вкладке Пульт показаны текущая категория и таблица сохранённых значений, текущая отмечена сейчас.

Подключение существующего правила

Для правила с ключом death:{category} создайте новый счётчик, например !смерти, в режиме по категориям и укажите death: в поле Подключить значения из правил. Не используйте команду, на которую уже отвечает правило, если не хотите двух ответов. Старые значения отображаются сразу; при первом изменении значение связывается с ID категории. Старое правило можно оставить: его ключ для текущей категории и новая команда обращаются к одному значению. В новых правилах удобнее указывать ключ нового счётчика напрямую: !смерти, {counter:!смерти}.

Для каждой группы выбирайте уникальный префикс. При подключении оставьте начальное значение равным нулю, чтобы не перезаписать текущий результат старого правила. После подключения удаление родительского счётчика удаляет также присоединённые значения категорий; страница предупреждает об этом перед удалением. Неприсоединённые старые значения сохраняются.