172 lines
17 KiB
HTML
172 lines
17 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Сплит-тренер</title>
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='8' width='12' height='16' rx='3' fill='%233b6cff'/%3E%3Crect x='18' y='8' width='12' height='16' rx='3' fill='%233b6cff'/%3E%3C/svg%3E">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<header class="top">
|
|
<div class="brand">
|
|
<svg width="30" height="30" viewBox="0 0 32 32" aria-hidden="true"><rect x="2" y="7" width="12" height="18" rx="3" fill="currentColor"/><rect x="18" y="7" width="12" height="18" rx="3" fill="currentColor"/><g fill="var(--panel)"><rect x="5" y="11" width="2.6" height="2.6" rx=".8"/><rect x="9" y="11" width="2.6" height="2.6" rx=".8"/><rect x="5" y="16" width="2.6" height="2.6" rx=".8"/><rect x="9" y="16" width="2.6" height="2.6" rx=".8"/><rect x="21" y="11" width="2.6" height="2.6" rx=".8"/><rect x="25" y="11" width="2.6" height="2.6" rx=".8"/><rect x="21" y="16" width="2.6" height="2.6" rx=".8"/><rect x="25" y="16" width="2.6" height="2.6" rx=".8"/></g></svg>
|
|
<span>Сплит-тренер</span>
|
|
</div>
|
|
<nav id="nav" aria-label="Разделы"></nav>
|
|
</header>
|
|
|
|
<main id="app">
|
|
<section class="view" id="v-lessons"></section>
|
|
<section class="view" id="v-practice"></section>
|
|
<section class="view" id="v-keyboard"></section>
|
|
<section class="view" id="v-account"></section>
|
|
<section class="view" id="v-overlay">
|
|
<div class="page-head">
|
|
<div>
|
|
<h1>Оверлей для обучения слоям</h1>
|
|
<p class="muted">SplitOverlay (приложение KeyOverlay): полупрозрачная подсказка с раскладкой вашей клавиатуры поверх любых окон. Смотрите на экран, а не на клавиши, пока слои не запомнились. Только для Windows.</p>
|
|
</div>
|
|
<div class="row">
|
|
<a class="btn primary" href="#ov-download">Скачать</a>
|
|
<a class="btn" href="https://gittea.khad1997pav.ru/khadzhibekovpa/SplitOverlay" target="_blank" rel="noopener noreferrer">Репозиторий</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel ov-block">
|
|
<h2>Что это</h2>
|
|
<p>Оверлей рисует вашу плату по файлу раскладки Vial (<kbd>.vil</kbd>) и держит её поверх всех окон. Он прозрачен для мыши и не забирает фокус, поэтому не мешает работать. Сделан для программируемых (Vial / QMK) split-клавиатур, сейчас рассчитан на Silakka54.</p>
|
|
<ul class="ov-list">
|
|
<li><b>Все слои</b>: переключатели <kbd>MO</kbd>, <kbd>TG</kbd>, <kbd>LT</kbd>, mod-tap, <kbd>Shift</kbd>+цифра. Прозрачные клавиши слоя показываются приглушённо с нижнего слоя, как в QMK.</li>
|
|
<li><b>Слой определяется с платы</b> автоматически (нужна альтернативная прошивка ниже). Без неё слой переключается вручную.</li>
|
|
<li><b>Символы по языку ввода</b>: буквы на клавишах меняются вместе с раскладкой Windows (русская, английская и любая другая).</li>
|
|
<li><b>Две половины отдельными окнами</b>, которые можно двигать независимо.</li>
|
|
<li><b>Подсветка нажатых клавиш</b>, регулировка прозрачности и размера, значок в трее.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="panel ov-block">
|
|
<h2>Как это выглядит</h2>
|
|
<div class="ov-gallery wide">
|
|
<figure>
|
|
<a href="overlay/screenshot-layer0.png" target="_blank" rel="noopener"><img src="overlay/screenshot-layer0.png" width="981" height="452" loading="lazy" alt="Оверлей, слой 0: буквы и цифры, нажатые клавиши Shift и 1 подсвечены синим, клавиши переключения слоёв TG 1 и MO 2 выделены янтарным"></a>
|
|
<figcaption><b>Слой 0.</b> Нажатые клавиши подсвечены (здесь <kbd>Shift</kbd>+<kbd>1</kbd>), клавиши переключения слоёв выделены янтарным (<kbd>TG 1</kbd>, <kbd>MO 2</kbd>).</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="overlay/screenshot-layer1.png" target="_blank" rel="noopener"><img src="overlay/screenshot-layer1.png" width="981" height="452" loading="lazy" alt="Оверлей, слой 1: символы и скобки слева, цифровой блок справа"></a>
|
|
<figcaption><b>Слой 1.</b> Символы и скобки слева, цифровой блок справа. Приглушённые клавиши прозрачны: они работают как на слое ниже.</figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="ov-gallery narrow">
|
|
<figure>
|
|
<a href="overlay/screenshot-split-left.png" target="_blank" rel="noopener"><img src="overlay/screenshot-split-left.png" width="394" height="395" loading="lazy" alt="Режим разделения: левая половина отдельным окном, подпись «Слой 0 с платы»"></a>
|
|
<figcaption><b>Левая половина</b> отдельным окном. Подпись «с платы» значит, что слой определяется клавиатурой.</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="overlay/screenshot-split-right.png" target="_blank" rel="noopener"><img src="overlay/screenshot-split-right.png" width="394" height="395" loading="lazy" alt="Режим разделения: правая половина отдельным окном"></a>
|
|
<figcaption><b>Правая половина</b>: окна двигаются независимо.</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="overlay/screenshot-lang-ru.png" target="_blank" rel="noopener"><img src="overlay/screenshot-lang-ru.png" width="394" height="395" loading="lazy" alt="Оверлей при русской раскладке Windows: на клавишах русские буквы"></a>
|
|
<figcaption><b>Язык RU.</b> Буквы на клавишах русские…</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<a href="overlay/screenshot-lang-en.png" target="_blank" rel="noopener"><img src="overlay/screenshot-lang-en.png" width="394" height="395" loading="lazy" alt="Оверлей при английской раскладке Windows: на клавишах латинские буквы"></a>
|
|
<figcaption><b>Язык EN.</b> …и латинские после смены раскладки.</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel ov-block" id="ov-download">
|
|
<h2>Скачать</h2>
|
|
<div class="dl-grid">
|
|
<div class="dl-card">
|
|
<b>Установщик</b>
|
|
<span class="muted small">KeyOverlay-1.0.0-setup.exe · 58 МБ</span>
|
|
<p class="small">Ставится без прав администратора, создаёт ярлык; автозапуск по желанию, прошивки идут отдельным компонентом.</p>
|
|
<a class="btn primary" href="https://gittea.khad1997pav.ru/khadzhibekovpa/SplitOverlay/releases/download/v1.0.0/KeyOverlay-1.0.0-setup.exe" rel="noopener">Скачать установщик</a>
|
|
</div>
|
|
<div class="dl-card">
|
|
<b>Портативная версия</b>
|
|
<span class="muted small">KeyOverlay-1.0.0-portable.zip · 58 МБ</span>
|
|
<p class="small">Архив без установки: распакуйте в любую папку и запустите <kbd>KeyOverlay.exe</kbd>.</p>
|
|
<a class="btn primary" href="https://gittea.khad1997pav.ru/khadzhibekovpa/SplitOverlay/releases/download/v1.0.0/KeyOverlay-1.0.0-portable.zip" rel="noopener">Скачать портативную версию</a>
|
|
</div>
|
|
</div>
|
|
<p class="muted small">Windows, x64. Файл не подписан, поэтому SmartScreen может предупредить: нажмите «Подробнее» → «Выполнить в любом случае». Исходники открыты, собрать приложение можно самому. Все версии: <a href="https://gittea.khad1997pav.ru/khadzhibekovpa/SplitOverlay/releases" target="_blank" rel="noopener noreferrer">страница релизов</a>.</p>
|
|
</div>
|
|
|
|
<div class="panel ov-block" id="ov-firmware">
|
|
<h2>Альтернативная прошивка</h2>
|
|
<p>Обычная клавиатура не сообщает компьютеру, какой слой сейчас активен, а в протоколе Vial такой команды нет. Поэтому для оверлея сделана <b>прошивка с дополнительной командой</b>: плата отвечает номером активного слоя, и оверлей переключается сам. Раскладку и подсветку команда не затрагивает, прошивка только читает состояние.</p>
|
|
<div class="dl-grid">
|
|
<div class="dl-card">
|
|
<b>Для левой половины</b>
|
|
<span class="muted small">silakka54_vial_led_keyoverlay_LEFT.uf2 · 0,12 МБ</span>
|
|
<a class="btn primary" href="https://gittea.khad1997pav.ru/khadzhibekovpa/SplitOverlay/releases/download/v1.0.0/silakka54_vial_led_keyoverlay_LEFT.uf2" rel="noopener">Скачать LEFT.uf2</a>
|
|
</div>
|
|
<div class="dl-card">
|
|
<b>Для правой половины</b>
|
|
<span class="muted small">silakka54_vial_led_keyoverlay_RIGHT.uf2 · 0,12 МБ</span>
|
|
<a class="btn primary" href="https://gittea.khad1997pav.ru/khadzhibekovpa/SplitOverlay/releases/download/v1.0.0/silakka54_vial_led_keyoverlay_RIGHT.uf2" rel="noopener">Скачать RIGHT.uf2</a>
|
|
</div>
|
|
</div>
|
|
<p class="muted small">Собрана на основе прошивки Silakka54 v1.4led (Vial, подсветка слоёв). Исходники и сборка: <a href="https://gittea.khad1997pav.ru/khadzhibekovpa/SplitOverlay/src/branch/main/firmware" target="_blank" rel="noopener noreferrer">папка firmware</a>. Откат на оригинальную прошивку: <a href="https://github.com/Squalius-cephalus/silakka54/releases/tag/v1.4led" target="_blank" rel="noopener noreferrer">релиз v1.4led проекта Silakka54</a>.</p>
|
|
<h3>Как прошить (RP2040)</h3>
|
|
<ol class="ov-steps">
|
|
<li>В Vial сохраните раскладку: <b>File → Save current layout</b>. После обновления прошивки раскладка может сброситься.</li>
|
|
<li>Закройте Vial и оверлей, на время прошивки отключите кабель между половинами (TRRS).</li>
|
|
<li>Зажмите <b>BOOT</b> на плате и подключите USB (или дважды быстро нажмите reset): появится диск <b>RPI-RP2</b>.</li>
|
|
<li>Скопируйте на него файл своей половины (LEFT в левую, RIGHT в правую). Плата перезагрузится сама. Повторите для второй половины.</li>
|
|
<li>Соедините половины обратно, при необходимости загрузите сохранённую раскладку в Vial (<b>File → Load saved layout</b>). Кабель к компьютеру подключайте к главной половине (для файла LEFT это левая).</li>
|
|
</ol>
|
|
<p class="muted small">Прошивка меняет программу клавиатуры: сохраните раскладку заранее. Файлы сделаны именно для Silakka54 (LED, v1.4led), на других платах их использовать нельзя.</p>
|
|
</div>
|
|
|
|
<div class="panel ov-block">
|
|
<h2>Быстрый старт</h2>
|
|
<ol class="ov-steps">
|
|
<li>Сохраните раскладку в Vial: <b>File → Save current layout</b> (файл <kbd>.vil</kbd>). Тот же файл можно загрузить в разделе «Клавиатура» этого тренера.</li>
|
|
<li>Установите оверлей (права администратора не нужны) или распакуйте портативную версию.</li>
|
|
<li>При первом запуске выберите файл <kbd>.vil</kbd>. Можно передать путь и аргументом: <kbd>KeyOverlay.exe "путь\к\раскладке.vil"</kbd>.</li>
|
|
<li>По желанию прошейте клавиатуру альтернативной прошивкой (выше): тогда слой определяется автоматически.</li>
|
|
</ol>
|
|
<div class="tbl">
|
|
<table>
|
|
<thead><tr><th>Действие</th><th>Как</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>Следующий / предыдущий слой</td><td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>PgDn</kbd> / <kbd>PgUp</kbd> (отключает автоопределение)</td></tr>
|
|
<tr><td>Показать / скрыть</td><td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>K</kbd> или двойной щелчок по значку в трее</td></tr>
|
|
<tr><td>Прозрачность, размер, слой, язык, разделение половинок, перечитать файл</td><td>меню значка в трее</td></tr>
|
|
<tr><td>Переместить оверлей</td><td>трей → «Режим перемещения», тащить мышью; колесо меняет размер</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel ov-block">
|
|
<h2>Что важно знать</h2>
|
|
<ul class="ov-list">
|
|
<li><b>Приватность.</b> Перехват клавиш нужен только для подсветки нажатых клавиш и горячих клавиш. Нажатия нигде не сохраняются и не отправляются, приложение ничего не передаёт в сеть.</li>
|
|
<li><b>Ограничения.</b> Только Windows x64. Раскладка рассчитана на Silakka54 (54 клавиши). Не держите Vial и оверлей открытыми одновременно: оба обращаются к одному HID-интерфейсу. Поверх игр в эксклюзивном полноэкранном режиме оверлея не будет.</li>
|
|
<li><b>Если слой не определяется</b> («плата не отвечает»): проверьте, что прошиты обе половины, кабель подключён к главной, а Vial закрыт. Пока слой можно переключать вручную.</li>
|
|
<li><b>Лицензия.</b> Приложение: MIT. Дополнение для прошивки: GPL-2.0-or-later, как QMK/Vial, в который оно собирается. Подробности и английское описание: <a href="https://gittea.khad1997pav.ru/khadzhibekovpa/SplitOverlay#english" target="_blank" rel="noopener noreferrer">README проекта</a>.</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<section class="view" id="v-train"></section>
|
|
<section class="view" id="v-result"></section>
|
|
<section class="view" id="v-stats"></section>
|
|
<section class="view" id="v-settings"></section>
|
|
</main>
|
|
|
|
<div id="toast" role="status" aria-live="polite"></div>
|
|
|
|
<script src="data.js"></script>
|
|
<script src="vial.js"></script>
|
|
<script src="sync.js"></script>
|
|
<script src="auth.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|