add first implementation of circle keyboard and better switching of keyboards
This commit is contained in:
lukasadrion
@@ -1,4 +1,4 @@
|
||||
use enigo::{Direction::Click, Enigo, Key, Keyboard, Settings};
|
||||
use enigo::{Direction, Enigo, Key, Keyboard, Settings};
|
||||
#[cfg(target_os = "linux")]
|
||||
use std::ptr;
|
||||
use tauri::Manager;
|
||||
@@ -6,8 +6,8 @@ use tauri::Manager;
|
||||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||||
#[tauri::command]
|
||||
fn greet(name: &str) -> String {
|
||||
let mut enigo = Enigo::new(&Settings::default()).unwrap();
|
||||
enigo.key(Key::Unicode('a'), Click);
|
||||
// let mut enigo = Enigo::new(&Settings::default()).unwrap();
|
||||
// enigo.key(Key::Unicode('a'), Click);
|
||||
format!("Hello, {}! You've been greeted from Rust!", name)
|
||||
}
|
||||
|
||||
@@ -16,17 +16,30 @@ fn send_key(key: String) -> Result<(), String> {
|
||||
let mut enigo = Enigo::new(&Settings::default()).map_err(|e| format!("Enigo error: {}", e))?;
|
||||
|
||||
if key.len() == 1 {
|
||||
// Single letter (a-z, A-Z)
|
||||
enigo.key(Key::Unicode(key.chars().next().unwrap()), Click)
|
||||
.map_err(|e| format!("Key error: {}", e))?;
|
||||
let ch = key.chars().next().unwrap();
|
||||
|
||||
// Check if uppercase letter
|
||||
if ch.is_uppercase() && ch.is_alphabetic() {
|
||||
// Send Shift + lowercase letter
|
||||
enigo.key(Key::Shift, Direction::Press)
|
||||
.map_err(|e| format!("Shift press error: {}", e))?;
|
||||
enigo.key(Key::Unicode(ch.to_lowercase().next().unwrap()), Direction::Click)
|
||||
.map_err(|e| format!("Key error: {}", e))?;
|
||||
enigo.key(Key::Shift, Direction::Release)
|
||||
.map_err(|e| format!("Shift release error: {}", e))?;
|
||||
} else {
|
||||
// Send character as-is (lowercase or non-letter)
|
||||
enigo.key(Key::Unicode(ch), Direction::Click)
|
||||
.map_err(|e| format!("Key error: {}", e))?;
|
||||
}
|
||||
} else {
|
||||
// Special keys
|
||||
match key.as_str() {
|
||||
"Enter" => enigo.key(Key::Return, Click)
|
||||
"Enter" => enigo.key(Key::Return, Direction::Click)
|
||||
.map_err(|e| format!("Key error: {}", e))?,
|
||||
"Space" => enigo.key(Key::Space, Click)
|
||||
"Space" => enigo.key(Key::Space, Direction::Click)
|
||||
.map_err(|e| format!("Key error: {}", e))?,
|
||||
"Backspace" => enigo.key(Key::Backspace, Click)
|
||||
"Backspace" => enigo.key(Key::Backspace, Direction::Click)
|
||||
.map_err(|e| format!("Key error: {}", e))?,
|
||||
_ => return Err("Unknown key".to_string()),
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -2,62 +2,56 @@ import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { QwertyKeyboardComponent } from './keyboards/qwerty-keyboard.component';
|
||||
import { DvorakKeyboardComponent } from './keyboards/dvorak-keyboard.component';
|
||||
import { CircleKeyboardComponent } from './keyboards/circle-keyboard.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterOutlet],
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterOutlet,
|
||||
QwertyKeyboardComponent,
|
||||
DvorakKeyboardComponent,
|
||||
CircleKeyboardComponent
|
||||
],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.css'
|
||||
})
|
||||
export class AppComponent implements AfterViewInit {
|
||||
greetingMessage = "";
|
||||
currentLayout: 'qwerty' | 'dvorak' | 'circle' = 'qwerty';
|
||||
shiftActive = false;
|
||||
|
||||
@ViewChild('greetInput') inputElement!: ElementRef;
|
||||
|
||||
ngAfterViewInit() {
|
||||
// Beim Start fokussieren
|
||||
this.inputElement.nativeElement.focus();
|
||||
}
|
||||
|
||||
greet(event: SubmitEvent, name: string): void {
|
||||
event.preventDefault();
|
||||
|
||||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||||
invoke<string>("greet", { name }).then((text) => {
|
||||
this.greetingMessage = text;
|
||||
});
|
||||
}
|
||||
|
||||
// Keyboard Layout State
|
||||
currentLayout: 'qwerty' | 'dvorak' = 'qwerty';
|
||||
|
||||
// QWERTY Layout
|
||||
qwertyRow1 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
|
||||
qwertyRow2 = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
|
||||
qwertyRow3 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', ",", "."];
|
||||
|
||||
// DVORAK Layout
|
||||
dvorakRow1 = [',', '.', 'P', 'Y', 'F', 'G', 'C', 'R', 'L'];
|
||||
dvorakRow2 = ['A', 'O', 'E', 'U', 'I', 'D', 'H', 'T', 'N', 'S'];
|
||||
dvorakRow3 = ['Q', 'J', 'K', 'X', 'B', 'M', 'W', 'V', 'Z'];
|
||||
|
||||
shiftActive = false;
|
||||
|
||||
// Getters for current layout
|
||||
get row1() { return this.currentLayout === 'qwerty' ? this.qwertyRow1 : this.dvorakRow1; }
|
||||
get row2() { return this.currentLayout === 'qwerty' ? this.qwertyRow2 : this.dvorakRow2; }
|
||||
get row3() { return this.currentLayout === 'qwerty' ? this.qwertyRow3 : this.dvorakRow3; }
|
||||
|
||||
toggleShift(): void {
|
||||
this.shiftActive = !this.shiftActive;
|
||||
}
|
||||
|
||||
switchLayout(): void {
|
||||
this.currentLayout = this.currentLayout === 'qwerty' ? 'dvorak' : 'qwerty';
|
||||
if (this.currentLayout == 'qwerty'){
|
||||
this.currentLayout = 'dvorak';
|
||||
} else if (this.currentLayout == 'dvorak'){
|
||||
this.currentLayout = 'circle';
|
||||
} else if (this.currentLayout == 'circle'){
|
||||
this.currentLayout = 'qwerty';
|
||||
}
|
||||
}
|
||||
|
||||
async sendKey(key: string): Promise<void> {
|
||||
async handleKeyPress(key: string): Promise<void> {
|
||||
this.inputElement.nativeElement.focus();
|
||||
|
||||
let finalKey = key;
|
||||
|
||||
190
src/app/keyboards/circle-keyboard.component.ts
Normal file
190
src/app/keyboards/circle-keyboard.component.ts
Normal file
@@ -0,0 +1,190 @@
|
||||
import { Component, Output, EventEmitter, Input } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
//TODO: Second and fourth ring of keys
|
||||
|
||||
@Component({
|
||||
selector: 'app-circle-keyboard',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="circle-keyboard-container">
|
||||
<!-- Center Button - Large with 3 sections -->
|
||||
<div class="center-button-container">
|
||||
<!-- Top half split: Backspace left, Enter right -->
|
||||
<button class="center-section top-left"
|
||||
(click)="keyPressed.emit('Backspace')"
|
||||
title="Backspace">
|
||||
⌫
|
||||
</button>
|
||||
<button class="center-section top-right"
|
||||
(click)="keyPressed.emit('Enter')"
|
||||
title="Enter">
|
||||
↵
|
||||
</button>
|
||||
<!-- Bottom half: Space -->
|
||||
<button class="center-section bottom-right"
|
||||
(click)="keyPressed.emit('Space')"
|
||||
title="Space">
|
||||
␣
|
||||
</button>
|
||||
<button (click)="shiftToggled.emit()"
|
||||
[class.active]="shiftActive"
|
||||
class="center-section bottom-left">
|
||||
⇧
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 8 Surrounding Buttons in Circle -->
|
||||
<button *ngFor="let key of circleKeysFirst; let i = index"
|
||||
class="circle-button"
|
||||
[style.transform]="getCirclePositionFromTop(i, 110)"
|
||||
(click)="keyPressed.emit(key)">
|
||||
{{ shiftActive ? key : key.toLowerCase() }}
|
||||
</button>
|
||||
|
||||
<button *ngFor="let key of circleKeysThird; let i = index"
|
||||
class="circle-button third-ring"
|
||||
[style.transform]="getCirclePositionFromTop(i, 170)"
|
||||
(click)="keyPressed.emit(key)">
|
||||
{{ shiftActive ? key : key.toLowerCase() }}
|
||||
</button>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.circle-keyboard-container {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
/* Center Button Container */
|
||||
.center-button-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Center Button Sections */
|
||||
.center-section {
|
||||
position: absolute;
|
||||
background: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
border: 2px solid #ddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* Top-left: Backspace (triangle) */
|
||||
.top-left{
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 70px 0 0 0;
|
||||
}
|
||||
|
||||
/* Top-right: Enter*/
|
||||
.top-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 0 70px 0 0;
|
||||
}
|
||||
|
||||
/* Bottom: Space */
|
||||
.bottom-left {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 0 0 0 70px;
|
||||
}
|
||||
|
||||
.bottom-left.active {
|
||||
background: #4CAF50 !important;
|
||||
color: white;
|
||||
border-color: #45a049;
|
||||
}
|
||||
|
||||
.bottom-right {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 0 0 70px 0;
|
||||
}
|
||||
|
||||
/* 8 Circle Buttons */
|
||||
.circle-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: -30px 0 0 -30px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #ddd;
|
||||
background: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.third-ring {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: -20px 0 0 -20px;
|
||||
}
|
||||
|
||||
.fourth-ring {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: -20px 0 0 -20px;
|
||||
}
|
||||
|
||||
.circle-button:hover, .center-section:hover {
|
||||
background: #e8e8e8;
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.circle-button:active, .center-section:active {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class CircleKeyboardComponent {
|
||||
@Input() shiftActive = false;
|
||||
@Output() keyPressed = new EventEmitter<string>();
|
||||
@Output() shiftToggled = new EventEmitter<void>();
|
||||
|
||||
// 8 keys arranged in circle
|
||||
circleKeysFirst = ['E', 'T', 'A', 'O', 'N', 'I', 'H', 'S'];
|
||||
circleKeysSecond = ['R', 'L', 'D', 'U', 'C', 'M', 'W', 'Y'];
|
||||
circleKeysThird = ['F', 'G', 'P', 'B', 'V', 'K', 'J', 'X'];
|
||||
circleKeysFourth = ['Q', 'Z', ',', '.'];
|
||||
|
||||
// Calculate position for each button in circle
|
||||
getCirclePositionFromTop(index: number, radius: number): string {
|
||||
const angle = (index * 45) - 90; // Start from top (0°), 45° apart
|
||||
const angleRad = (angle * Math.PI) / 180;
|
||||
const x = Math.cos(angleRad) * radius;
|
||||
const y = Math.sin(angleRad) * radius;
|
||||
return `translate(${x}px, ${y}px)`;
|
||||
}
|
||||
}
|
||||
68
src/app/keyboards/dvorak-keyboard.component.ts
Normal file
68
src/app/keyboards/dvorak-keyboard.component.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import { Component, Output, EventEmitter, Input } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dvorak-keyboard',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="keyboard">
|
||||
<div class="keyboard-row">
|
||||
<button *ngFor="let key of row1"
|
||||
(click)="keyPressed.emit(key)"
|
||||
class="key-button">
|
||||
{{ shiftActive ? key : key.toLowerCase() }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="keyboard-row">
|
||||
<button *ngFor="let key of row2"
|
||||
(click)="keyPressed.emit(key)"
|
||||
class="key-button">
|
||||
{{ shiftActive ? key : key.toLowerCase() }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="keyboard-row">
|
||||
<button *ngFor="let key of row3"
|
||||
(click)="keyPressed.emit(key)"
|
||||
class="key-button">
|
||||
{{ shiftActive ? key : key.toLowerCase() }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="keyboard-row special-keys">
|
||||
<button (click)="shiftToggled.emit()"
|
||||
[class.active]="shiftActive"
|
||||
class="key-button shift-key">
|
||||
⇧ Shift
|
||||
</button>
|
||||
|
||||
<button (click)="keyPressed.emit('Space')"
|
||||
class="key-button space-key">
|
||||
Leertaste
|
||||
</button>
|
||||
|
||||
<button (click)="keyPressed.emit('Backspace')"
|
||||
class="key-button">
|
||||
⌫ Delete
|
||||
</button>
|
||||
|
||||
<button (click)="keyPressed.emit('Enter')"
|
||||
class="key-button">
|
||||
↵ Enter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: '../app.component.css'
|
||||
})
|
||||
export class DvorakKeyboardComponent {
|
||||
@Input() shiftActive = false;
|
||||
@Output() keyPressed = new EventEmitter<string>();
|
||||
@Output() shiftToggled = new EventEmitter<void>();
|
||||
|
||||
row1 = [',', '.', 'P', 'Y', 'F', 'G', 'C', 'R', 'L'];
|
||||
row2 = ['A', 'O', 'E', 'U', 'I', 'D', 'H', 'T', 'N', 'S'];
|
||||
row3 = ['Q', 'J', 'K', 'X', 'B', 'M', 'W', 'V', 'Z'];
|
||||
}
|
||||
68
src/app/keyboards/qwerty-keyboard.component.ts
Normal file
68
src/app/keyboards/qwerty-keyboard.component.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import { Component, Output, EventEmitter, Input } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-qwerty-keyboard',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="keyboard">
|
||||
<div class="keyboard-row">
|
||||
<button *ngFor="let key of row1"
|
||||
(click)="keyPressed.emit(key)"
|
||||
class="key-button">
|
||||
{{ shiftActive ? key : key.toLowerCase() }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="keyboard-row">
|
||||
<button *ngFor="let key of row2"
|
||||
(click)="keyPressed.emit(key)"
|
||||
class="key-button">
|
||||
{{ shiftActive ? key : key.toLowerCase() }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="keyboard-row">
|
||||
<button *ngFor="let key of row3"
|
||||
(click)="keyPressed.emit(key)"
|
||||
class="key-button">
|
||||
{{ shiftActive ? key : key.toLowerCase() }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="keyboard-row special-keys">
|
||||
<button (click)="shiftToggled.emit()"
|
||||
[class.active]="shiftActive"
|
||||
class="key-button shift-key">
|
||||
⇧ Shift
|
||||
</button>
|
||||
|
||||
<button (click)="keyPressed.emit('Space')"
|
||||
class="key-button space-key">
|
||||
Leertaste
|
||||
</button>
|
||||
|
||||
<button (click)="keyPressed.emit('Backspace')"
|
||||
class="key-button">
|
||||
⌫ Delete
|
||||
</button>
|
||||
|
||||
<button (click)="keyPressed.emit('Enter')"
|
||||
class="key-button">
|
||||
↵ Enter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: '../app.component.css'
|
||||
})
|
||||
export class QwertyKeyboardComponent {
|
||||
@Input() shiftActive = false;
|
||||
@Output() keyPressed = new EventEmitter<string>();
|
||||
@Output() shiftToggled = new EventEmitter<void>();
|
||||
|
||||
row1 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
|
||||
row2 = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
|
||||
row3 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.'];
|
||||
}
|
||||
Reference in New Issue
Block a user