Skip to content

Enable all 8 layers and update mapping row layout #332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MarqueIV wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Enable all 8 layers and update mapping row layout #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 33 additions & 27 deletions config-tool-web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

<body>

<div class="container d-flex flex-column" style="max-width: 720px; min-height: 100vh;">
<div class="container d-flex flex-column" style="min-width: 880px; max-width: 880px; min-height: 100vh;">

<h1 class="mt-sm-5 mt-3">HID Remapper Configuration</h1>

Expand Down Expand Up @@ -49,12 +49,17 @@ <h1 class="mt-sm-5 mt-3">HID Remapper Configuration</h1>
<div class="tab-pane active" id="nav-mappings" role="tabpanel" tabindex="0">

<div class="row pb-2 mt-3" style="overflow-x: auto;">
<div style="min-width: 720px; width: 100%;">
<div>
<div class="row my-2 align-items-end">
<div class="col-1"></div>
<div class="col-3 text-center"><a href="#" id="input-column-header" class="text-decoration-none text-reset d-block">Input</a></div>
<div class="col-3 text-center"><a href="#" id="output-column-header" class="text-decoration-none text-reset d-block">Output</a></div>
<div class="col-3">
<div class="col-5 text-center">
<div class="d-flex gap-1 align-items-center">
<div class="w-50 text-center"><a href="#" id="input-column-header" class="text-decoration-none text-reset d-block">Input</a></div>
<span class="text-muted">&rarr;</span>
<div class="w-50 text-center"><a href="#" id="output-column-header" class="text-decoration-none text-reset d-block">Output</a></div>
</div>
</div>
<div class="col-4">
<div class="d-flex align-items-end">
<div class="flex-fill text-center"><a href="#" id="layer-column-header" class="text-decoration-none text-reset d-block">Layer</a></div>
<div class="text-start pt-1" style="writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1.2em;">Sticky<br>Tap<br>Hold</div>
Expand Down Expand Up @@ -97,19 +102,19 @@ <h1 class="mt-sm-5 mt-3">HID Remapper Configuration</h1>
<input type="checkbox" id="unmapped_passthrough_checkbox3" class="form-check-input">
<label for="unmapped_passthrough_checkbox3" class="form-check-label">3</label>
</div>
<div class="form-check form-check-inline d-none">
<div class="form-check form-check-inline">
<input type="checkbox" id="unmapped_passthrough_checkbox4" class="form-check-input">
<label for="unmapped_passthrough_checkbox4" class="form-check-label">4</label>
</div>
<div class="form-check form-check-inline d-none">
<div class="form-check form-check-inline">
<input type="checkbox" id="unmapped_passthrough_checkbox5" class="form-check-input">
<label for="unmapped_passthrough_checkbox5" class="form-check-label">5</label>
</div>
<div class="form-check form-check-inline d-none">
<div class="form-check form-check-inline">
<input type="checkbox" id="unmapped_passthrough_checkbox6" class="form-check-input">
<label for="unmapped_passthrough_checkbox6" class="form-check-label">6</label>
</div>
<div class="form-check form-check-inline d-none">
<div class="form-check form-check-inline">
<input type="checkbox" id="unmapped_passthrough_checkbox7" class="form-check-input">
<label for="unmapped_passthrough_checkbox7" class="form-check-label">7</label>
</div>
Expand Down Expand Up @@ -337,23 +342,24 @@ <h5 class="mt-4">Custom usages</h5>
</div>

<template id="mapping_template">
<div class="row mb-1 mapping_container">
<div class="row mb-1 mapping_container align-items-center">
<div class="col-1"><button type="button" class="btn btn-primary delete_button">×</button></div>
<div class="col-3">
<button type="button" class="btn btn-primary w-100 source_button position-relative">
<span class="position-absolute top-50 start-0 translate-middle badge bg-info rounded-pill hub_port_badge">0</span>
<span class="button_label">source</span>
</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary w-100 target_button position-relative">
<span class="position-absolute top-50 start-0 translate-middle badge bg-info rounded-pill hub_port_badge">0</span>
<span class="button_label">target</span>
</button>
<div class="col-5">
<div class="d-flex gap-1 align-items-center">
<button type="button" class="btn btn-primary w-50 source_button position-relative">
<span class="position-absolute top-50 start-0 translate-middle badge bg-info rounded-pill hub_port_badge">0</span>
<span class="button_label">source</span>
</button>
<span class="text-muted">&rarr;</span>
<button type="button" class="btn btn-primary w-50 target_button position-relative">
<span class="position-absolute top-50 start-0 translate-middle badge bg-info rounded-pill hub_port_badge">0</span>
<span class="button_label">target</span>
</button>
</div>
</div>
<div class="col-3">
<div class="col-4">
<div class="d-flex lh-1 text-center">
<div class="flex-fill row gx-1 justify-content-center">
<div class="flex-fill row gx-1 justify-content-center me-3">
<div class="col-auto">
<input class="form-check-input layer_checkbox0" type="checkbox" value="">
<br><span class="text-muted small">0</span>
Expand All @@ -370,19 +376,19 @@ <h5 class="mt-4">Custom usages</h5>
<input class="form-check-input layer_checkbox3" type="checkbox" value="">
<br><span class="text-muted small">3</span>
</div>
<div class="col-auto d-none">
<div class="col-auto">
<input class="form-check-input layer_checkbox4" type="checkbox" value="">
<br><span class="text-muted small">4</span>
</div>
<div class="col-auto d-none">
<div class="col-auto">
<input class="form-check-input layer_checkbox5" type="checkbox" value="">
<br><span class="text-muted small">5</span>
</div>
<div class="col-auto d-none">
<div class="col-auto">
<input class="form-check-input layer_checkbox6" type="checkbox" value="">
<br><span class="text-muted small">6</span>
</div>
<div class="col-auto d-none">
<div class="col-auto">
<input class="form-check-input layer_checkbox7" type="checkbox" value="">
<br><span class="text-muted small">7</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion firmware/src/remapper.cc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const uint8_t H_RESOLUTION_BITMASK = (1 << 2);
const uint32_t V_SCROLL_USAGE = 0x00010038;
const uint32_t H_SCROLL_USAGE = 0x000C0238;

const uint8_t NLAYERS = 4;
const uint8_t NLAYERS = 8;
const uint32_t LAYERS_USAGE_PAGE = 0xFFF10000;
const uint32_t MACRO_USAGE_PAGE = 0xFFF20000;
const uint32_t EXPR_USAGE_PAGE = 0xFFF30000;
Expand Down