eneller/osk.rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add first implementation of circle keyboard and better switching of keyboards

Browse Source
This commit is contained in:
lukasadrion
2025-12-04 18:54:10 +01:00
parent 15cdc77eea
commit ef740ca9dd
6 changed files with 393 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/app/app.component.html
View File

@@ -3,65 +3,35 @@
<input #greetInput id="greet-input" placeholder="Enter a name..." />
<button type="submit">Greet</button>
</form>
<p>{{ greetingMessage }}</p>
<div class="keyboard">
<!-- Row 1-->
<div class="keyboard-row">
<button *ngFor="let key of row1"
(click)="sendKey(key)"
class="key-button">
{{ shiftActive ? key : key.toLowerCase() }}
<!-- Layout Switcher -->
<div class="layout-controls">
<button (click)="switchLayout()" class="layout-button">
Switch Layout: {{ currentLayout.toUpperCase() }}
</button>
</div>
<!-- Row 2-->
<div class="keyboard-row">
<button *ngFor="let key of row2"
(click)="sendKey(key)"
class="key-button">
{{ shiftActive ? key : key.toLowerCase() }}
</button>
</div>
<!-- Conditional Rendering basierend auf currentLayout -->
<app-qwerty-keyboard
*ngIf="currentLayout === 'qwerty'"
[shiftActive]="shiftActive"
(keyPressed)="handleKeyPress($event)"
(shiftToggled)="toggleShift()">
</app-qwerty-keyboard>
<!-- Row 3-->
<div class="keyboard-row">
<button *ngFor="let key of row3"
(click)="sendKey(key)"
class="key-button">
{{ shiftActive ? key : key.toLowerCase() }}
</button>
</div>
<app-dvorak-keyboard
*ngIf="currentLayout === 'dvorak'"
[shiftActive]="shiftActive"
(keyPressed)="handleKeyPress($event)"
(shiftToggled)="toggleShift()">
</app-dvorak-keyboard>
<!-- Row 4: special keys -->
<div class="keyboard-row">
<button (click)="toggleShift()"
[class.active]="shiftActive"
class="key-button shift-key">
⇧ Shift
</button>
<button (click)="sendKey('Space')"
class="key-button space-key">
Space
</button>
<button (click)="sendKey('Backspace')"
class="key-button">
⌫ Delete
</button>
<button (click)="sendKey('Enter')"
class="key-button">
↵ Enter
</button>
</div>
<!-- Row 5: Layout switcher -->
<div class="keyboard-row">
<button (click)="switchLayout()"
class="key-button layout-switch">
{{ currentLayout === 'qwerty' ? 'Switch to DVORAK' : 'Switch to QWERTY' }}
</button>
</div>
</div>
<app-circle-keyboard
*ngIf="currentLayout === 'circle'"
[shiftActive]="shiftActive"
(keyPressed)="handleKeyPress($event)"
(shiftToggled)="toggleShift()">
</app-circle-keyboard>
</main>