feat: страница «Оверлей» (KeyOverlay): описание, скриншоты, загрузки, прошивка, быстрый старт
This commit is contained in:
darko
@@ -87,6 +87,9 @@
|
||||
- Если вы оказались на другом слое, чем думает тренер, нажмите на нужный слой над клавиатурой, и маршрут пересчитается.
|
||||
- Для цифрового блока (`KP_*`) в системе должен быть включён NumLock.
|
||||
|
||||
### Оверлей-подсказка (Windows)
|
||||
Раздел **Оверлей** в меню описывает отдельную программу KeyOverlay: полупрозрачную раскладку вашей клавиатуры поверх любых окон, с автоопределением активного слоя по альтернативной прошивке. Там же ссылки на установщик, портативную версию, файлы прошивки `.uf2` и краткая инструкция по запуску.
|
||||
|
||||
## 7. Как заниматься
|
||||
|
||||
- Лучше **20 минут каждый день**, чем 2 часа раз в неделю.
|
||||
|
||||
+3
-2
@@ -628,7 +628,7 @@ function toast(msg) {
|
||||
clearTimeout(tToast); tToast = setTimeout(() => t.classList.remove('on'), 2600);
|
||||
}
|
||||
|
||||
const NAV = [['lessons', 'Уроки'], ['practice', 'Практика'], ['keyboard', 'Клавиатура'], ['stats', 'Статистика'], ['settings', 'Настройки']];
|
||||
const NAV = [['lessons', 'Уроки'], ['practice', 'Практика'], ['keyboard', 'Клавиатура'], ['overlay', 'Оверлей'], ['stats', 'Статистика'], ['settings', 'Настройки']];
|
||||
function renderNav(active) {
|
||||
const nav = $('#nav'); nav.innerHTML = '';
|
||||
NAV.forEach(([id, label]) => nav.append(h('button', { class: id === active ? 'on' : '', onclick: () => go(id) }, label)));
|
||||
@@ -648,7 +648,8 @@ function show(v) {
|
||||
function go(v) {
|
||||
show(v);
|
||||
({ lessons: renderLessons, practice: renderPractice, keyboard: renderKeyboardPage, stats: renderStats, settings: renderSettings,
|
||||
account: () => window.Auth.render() })[v]();
|
||||
account: () => window.Auth.render(),
|
||||
overlay: () => {} })[v](); // страница оверлея статична: её разметка лежит в index.html
|
||||
}
|
||||
|
||||
const seg = (opts, value, onchange) =>
|
||||
|
||||
@@ -21,6 +21,139 @@
|
||||
<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>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -315,3 +315,26 @@ td.r, th.r { text-align: right; }
|
||||
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
|
||||
.linkbtn:hover { filter: brightness(1.15); }
|
||||
.danger-zone { border-color: var(--bad); }
|
||||
|
||||
/* ---------- Страница оверлея ---------- */
|
||||
.ov-block { margin-top: 14px; }
|
||||
.ov-block h2 { margin-bottom: 10px; }
|
||||
.ov-block h3 { margin: 18px 0 8px; font-size: 16px; }
|
||||
.ov-block p { margin: 0 0 10px; }
|
||||
.ov-list { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
|
||||
.ov-steps { margin: 8px 0 12px; padding-left: 22px; display: grid; gap: 8px; }
|
||||
.ov-gallery { display: grid; gap: 14px; margin-top: 12px; }
|
||||
.ov-gallery.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
|
||||
.ov-gallery.narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
|
||||
.ov-gallery figure { margin: 0; display: grid; gap: 8px; align-content: start; }
|
||||
.ov-gallery img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); background: #0b0d12; }
|
||||
.ov-gallery a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
|
||||
.ov-gallery figcaption { font-size: 13px; color: var(--muted); }
|
||||
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 12px 0; }
|
||||
.dl-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; }
|
||||
.dl-card p { margin: 0; flex: 1; }
|
||||
a.btn { display: inline-block; text-decoration: none; }
|
||||
a.btn.primary { color: var(--accent-fg); }
|
||||
.ov-block p a, .ov-list a { color: var(--accent); font-weight: 600; }
|
||||
html { scroll-behavior: smooth; }
|
||||
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
|
||||
|
||||
Reference in New Issue
Block a user