Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-01-22 01:42:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: settings wip

Browse Source
This commit is contained in:
Thea Schöbl
2023-07-24 22:58:10 +02:00
parent e64082d578
commit 2130b6c7b9
10 changed files with 338 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/routes/config/settings/+page.svelte
View File

@@ -1,4 +1,193 @@
<script>
import {serialPort} from "$lib/serial/connection"
</script>
<label><input type="checkbox" />Serial Log</label>
{#if $serialPort}
<form>
<fieldset>
<legend><label><input type="checkbox" />Spurring</label></legend>
<p>
"Chording only" mode which tells your device to output chords on a press rather than a press &
release. It also enables you to jump from one chord to another without releasing everything and can be
activated in GTM or by chording both mirror keys. It can provide significant speed gains with
chording, but also takes away the flexibility of character entry.
</p>
<p>Spurring also helps new users learn how to chord by eliminating the need to focus on timing.</p>
<p>Spurring is toggled by chording both of the 'mirror' keys together.</p>
<label
>Character Counter Timeout<span class="unit"
><input type="number" step="0.1" min="0" max="25.5" />s</span
></label
>
</fieldset>
<fieldset>
<legend><label><input type="checkbox" />Arpeggiates</label></legend>
<p>
A quick, single key press and release used to indicate a suffix, prefix, or modifier to be associated
with a chord.
</p>
<label>Tolerance<span class="unit"><input type="number" step="1" />ms</span></label>
</fieldset>
<fieldset>
<legend><label><input type="checkbox" />Character Entry</label></legend>
<label>Swap Keymap 0 and 1<input type="checkbox" /></label>
<label>Key Scan Rate<span class="unit"><input type="number" />Hz</span></label>
<label>Key Debounce Press<span class="unit"><input type="number" />ms</span></label>
<label>Key Debounce Release<span class="unit"><input type="number" />ms</span></label>
<label>Output Character Delay<span class="unit"><input type="number" />µs</span></label>
</fieldset>
<fieldset>
<legend><label><input type="checkbox" />Mouse</label></legend>
<label>Mouse Speed<input type="number" /><input type="number" /></label>
<label>Scroll Speed<input type="number" /></label>
<label title="Bounces mouse by 1px every 60s if enabled">Active Mouse<input type="checkbox" /></label>
<label>Poll Rate<span class="unit"><input type="number" />Hz</span></label>
</fieldset>
<fieldset>
<legend><label><input type="checkbox" />Chording</label></legend>
<label
>Character Timeout <span class="unit"><input type="number" min="0" max="25.5" step="0.1" />s</span
></label
>
<label
>Detection Tolerance<span class="unit"><input type="number" min="1" max="50" step="1" />ms</span
></label
>
<label
>Release Tolerance<span class="unit"><input type="number" min="1" max="50" step="1" />ms</span></label
>
<label>Compound Chording<input type="checkbox" /></label>
</fieldset>
<fieldset>
<legend><label>Device</label></legend>
<label>Boot message<input type="checkbox" /></label>
<label>Realtime Feedback<input type="checkbox" /></label>
<label>
Operating System
<select>
<option value="0">Windows</option>
<option value="1">MacOS</option>
<option value="2">Linux</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="255">Unknown</option>
</select>
</label>
</fieldset>
{#if $serialPort.device === "LITE"}
<fieldset>
<legend><label><input type="checkbox" />RGB</label></legend>
<label>Brightness<input type="range" min="0" max="50" step="1" /></label>
<label>Color</label>
<label>Reactive Keys<input type="checkbox" /></label>
</fieldset>
{/if}
</form>
{/if}
<style lang="scss">
form {
overflow: hidden;
display: flex;
flex-flow: row wrap;
gap: 16px;
justify-content: center;
max-width: 30cm;
margin-block: auto;
}
legend,
legend > label {
font-size: 24px;
font-weight: bold;
> input {
font-size: 12px;
}
}
fieldset {
max-width: 400px;
border: 1px solid var(--md-sys-color-outline);
border-radius: 24px;
> label {
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
margin-block: 4px;
font-size: 14px;
&:has(input[type="number"]) {
cursor: text;
&:hover {
filter: none;
}
}
input[type="checkbox"] {
font-size: 12px;
}
}
.unit {
overflow: hidden;
display: flex;
gap: 4px;
align-items: center;
justify-content: flex-start;
width: 67px;
padding-inline-end: auto;
font-size: 12px;
font-weight: bold;
background: var(--md-sys-color-secondary-container);
border-radius: 16px;
}
input[type="number"] {
display: flex;
width: 5ch;
height: 100%;
padding-block: 4px;
font-family: "Noto Sans Mono", monospace;
color: var(--md-sys-color-on-secondary);
text-align: end;
background: var(--md-sys-color-secondary);
border: none;
&::-webkit-inner-spin-button {
display: none;
}
&::after {
content: "bleh";
}
&:focus {
filter: brightness(120%);
outline: none;
}
}
p {
font-size: 10px;
}
}
</style>