diff --git a/docs/ИНСТРУКЦИЯ.md b/docs/ИНСТРУКЦИЯ.md index 00cdbbf..6db1fe2 100644 --- a/docs/ИНСТРУКЦИЯ.md +++ b/docs/ИНСТРУКЦИЯ.md @@ -87,6 +87,9 @@ - Если вы оказались на другом слое, чем думает тренер, нажмите на нужный слой над клавиатурой, и маршрут пересчитается. - Для цифрового блока (`KP_*`) в системе должен быть включён NumLock. +### Оверлей-подсказка (Windows) +Раздел **Оверлей** в меню описывает отдельную программу KeyOverlay: полупрозрачную раскладку вашей клавиатуры поверх любых окон, с автоопределением активного слоя по альтернативной прошивке. Там же ссылки на установщик, портативную версию, файлы прошивки `.uf2` и краткая инструкция по запуску. + ## 7. Как заниматься - Лучше **20 минут каждый день**, чем 2 часа раз в неделю. diff --git a/public/app.js b/public/app.js index 0af1f0d..6817656 100644 --- a/public/app.js +++ b/public/app.js @@ -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) => diff --git a/public/index.html b/public/index.html index 97d4d2f..92220d0 100644 --- a/public/index.html +++ b/public/index.html @@ -21,6 +21,139 @@
+
+
+
+

Оверлей для обучения слоям

+

SplitOverlay (приложение KeyOverlay): полупрозрачная подсказка с раскладкой вашей клавиатуры поверх любых окон. Смотрите на экран, а не на клавиши, пока слои не запомнились. Только для Windows.

+
+
+ Скачать + Репозиторий +
+
+ +
+

Что это

+

Оверлей рисует вашу плату по файлу раскладки Vial (.vil) и держит её поверх всех окон. Он прозрачен для мыши и не забирает фокус, поэтому не мешает работать. Сделан для программируемых (Vial / QMK) split-клавиатур, сейчас рассчитан на Silakka54.

+ +
+ +
+

Как это выглядит

+
+
+ Оверлей, слой 0: буквы и цифры, нажатые клавиши Shift и 1 подсвечены синим, клавиши переключения слоёв TG 1 и MO 2 выделены янтарным +
Слой 0. Нажатые клавиши подсвечены (здесь Shift+1), клавиши переключения слоёв выделены янтарным (TG 1, MO 2).
+
+
+ Оверлей, слой 1: символы и скобки слева, цифровой блок справа +
Слой 1. Символы и скобки слева, цифровой блок справа. Приглушённые клавиши прозрачны: они работают как на слое ниже.
+
+
+
+
+ Режим разделения: левая половина отдельным окном, подпись «Слой 0 с платы» +
Левая половина отдельным окном. Подпись «с платы» значит, что слой определяется клавиатурой.
+
+
+ Режим разделения: правая половина отдельным окном +
Правая половина: окна двигаются независимо.
+
+
+ Оверлей при русской раскладке Windows: на клавишах русские буквы +
Язык RU. Буквы на клавишах русские…
+
+
+ Оверлей при английской раскладке Windows: на клавишах латинские буквы +
Язык EN. …и латинские после смены раскладки.
+
+
+
+ +
+

Скачать

+
+
+ Установщик + KeyOverlay-1.0.0-setup.exe · 58 МБ +

Ставится без прав администратора, создаёт ярлык; автозапуск по желанию, прошивки идут отдельным компонентом.

+ Скачать установщик +
+
+ Портативная версия + KeyOverlay-1.0.0-portable.zip · 58 МБ +

Архив без установки: распакуйте в любую папку и запустите KeyOverlay.exe.

+ Скачать портативную версию +
+
+

Windows, x64. Файл не подписан, поэтому SmartScreen может предупредить: нажмите «Подробнее» → «Выполнить в любом случае». Исходники открыты, собрать приложение можно самому. Все версии: страница релизов.

+
+ +
+

Альтернативная прошивка

+

Обычная клавиатура не сообщает компьютеру, какой слой сейчас активен, а в протоколе Vial такой команды нет. Поэтому для оверлея сделана прошивка с дополнительной командой: плата отвечает номером активного слоя, и оверлей переключается сам. Раскладку и подсветку команда не затрагивает, прошивка только читает состояние.

+
+
+ Для левой половины + silakka54_vial_led_keyoverlay_LEFT.uf2 · 0,12 МБ + Скачать LEFT.uf2 +
+
+ Для правой половины + silakka54_vial_led_keyoverlay_RIGHT.uf2 · 0,12 МБ + Скачать RIGHT.uf2 +
+
+

Собрана на основе прошивки Silakka54 v1.4led (Vial, подсветка слоёв). Исходники и сборка: папка firmware. Откат на оригинальную прошивку: релиз v1.4led проекта Silakka54.

+

Как прошить (RP2040)

+
    +
  1. В Vial сохраните раскладку: File → Save current layout. После обновления прошивки раскладка может сброситься.
    2. +
  2. Закройте Vial и оверлей, на время прошивки отключите кабель между половинами (TRRS).
    3. +
  3. Зажмите BOOT на плате и подключите USB (или дважды быстро нажмите reset): появится диск RPI-RP2.
    4. +
  4. Скопируйте на него файл своей половины (LEFT в левую, RIGHT в правую). Плата перезагрузится сама. Повторите для второй половины.
    5. +
  5. Соедините половины обратно, при необходимости загрузите сохранённую раскладку в Vial (File → Load saved layout). Кабель к компьютеру подключайте к главной половине (для файла LEFT это левая).
    6. +
+

Прошивка меняет программу клавиатуры: сохраните раскладку заранее. Файлы сделаны именно для Silakka54 (LED, v1.4led), на других платах их использовать нельзя.

+
+ +
+

Быстрый старт

+
    +
  1. Сохраните раскладку в Vial: File → Save current layout (файл .vil). Тот же файл можно загрузить в разделе «Клавиатура» этого тренера.
    2. +
  2. Установите оверлей (права администратора не нужны) или распакуйте портативную версию.
    3. +
  3. При первом запуске выберите файл .vil. Можно передать путь и аргументом: KeyOverlay.exe "путь\к\раскладке.vil".
    4. +
  4. По желанию прошейте клавиатуру альтернативной прошивкой (выше): тогда слой определяется автоматически.
    5. +
+
+ + + + + + + + +
ДействиеКак
Следующий / предыдущий слойCtrl+Alt+PgDn / PgUp (отключает автоопределение)
Показать / скрытьCtrl+Alt+K или двойной щелчок по значку в трее
Прозрачность, размер, слой, язык, разделение половинок, перечитать файлменю значка в трее
Переместить оверлейтрей → «Режим перемещения», тащить мышью; колесо меняет размер
+
+
+ +
+

Что важно знать

+ +
+
diff --git a/public/overlay/screenshot-lang-en.png b/public/overlay/screenshot-lang-en.png new file mode 100644 index 0000000..96feb30 Binary files /dev/null and b/public/overlay/screenshot-lang-en.png differ diff --git a/public/overlay/screenshot-lang-ru.png b/public/overlay/screenshot-lang-ru.png new file mode 100644 index 0000000..82b3ca5 Binary files /dev/null and b/public/overlay/screenshot-lang-ru.png differ diff --git a/public/overlay/screenshot-layer0.png b/public/overlay/screenshot-layer0.png new file mode 100644 index 0000000..1f9d6d6 Binary files /dev/null and b/public/overlay/screenshot-layer0.png differ diff --git a/public/overlay/screenshot-layer1.png b/public/overlay/screenshot-layer1.png new file mode 100644 index 0000000..8a7aa64 Binary files /dev/null and b/public/overlay/screenshot-layer1.png differ diff --git a/public/overlay/screenshot-split-left.png b/public/overlay/screenshot-split-left.png new file mode 100644 index 0000000..087ccf5 Binary files /dev/null and b/public/overlay/screenshot-split-left.png differ diff --git a/public/overlay/screenshot-split-right.png b/public/overlay/screenshot-split-right.png new file mode 100644 index 0000000..5d07edf Binary files /dev/null and b/public/overlay/screenshot-split-right.png differ diff --git a/public/styles.css b/public/styles.css index 7f4c1d4..dcc7fdd 100644 --- a/public/styles.css +++ b/public/styles.css @@ -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; } }