add normal layout keyboard

src-tauri/src/lib.rs

@@ -1,4 +1,5 @@
 use enigo::{Direction::Click, Enigo, Key, Keyboard, Settings};
+#[cfg(target_os = "linux")]
 use std::ptr;
 use tauri::Manager;
 
@@ -10,10 +11,34 @@ fn greet(name: &str) -> String {
     format!("Hello, {}! You've been greeted from Rust!", name)
 }
 
+#[tauri::command]
+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))?;
+    } else {
+        // Special keys
+        match key.as_str() {
+            "Enter" => enigo.key(Key::Return, Click)
+                .map_err(|e| format!("Key error: {}", e))?,
+            "Space" => enigo.key(Key::Space, Click)
+                .map_err(|e| format!("Key error: {}", e))?,
+            "Backspace" => enigo.key(Key::Backspace, Click)
+                .map_err(|e| format!("Key error: {}", e))?,
+            _ => return Err("Unknown key".to_string()),
+        }
+    }
+    Ok(())
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
         .setup(|app| {
+            #[cfg_attr(not(target_os = "linux"), allow(unused_variables))]
             let window = app.get_webview_window("main").unwrap();
             #[cfg(target_os = "linux")]
             {
@@ -40,7 +65,7 @@ pub fn run() {
             Ok(())
         })
         .plugin(tauri_plugin_opener::init())
-        .invoke_handler(tauri::generate_handler![greet])
+        .invoke_handler(tauri::generate_handler![greet, send_key])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src/app/app.component.css

@@ -110,3 +110,50 @@ button {
     background-color: #0f0f0f69;
   }
 }
+
+.keyboard {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 20px;
+  background: #f5f5f5;
+  border-radius: 10px;
+}
+
+.keyboard-row {
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+}
+
+.key-button {
+  min-width: 60px;
+  height: 60px;
+  font-size: 20px;
+  font-weight: bold;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  background: rgb(58, 56, 56);
+  cursor: pointer;
+  transition: all 0.1s;
+}
+
+.key-button:hover {
+  background: #979797;
+  border-color: #999;
+}
+
+.key-button:active {
+  background: #d0d0d0;
+  transform: scale(0.95);
+}
+
+.shift-key.active {
+  background: #4CAF50;
+  color: white;
+  border-color: #45a049;
+}
+
+.space-key {
+  min-width: 300px;
+}

src/app/app.component.html

@@ -16,4 +16,56 @@
     <button type="submit">Greet</button>
   </form>
   <p>{{ greetingMessage }}</p>
+<div class="keyboard">
+  <!-- Row 1: Q W E R T Y U I O P -->
+  <div class="keyboard-row">
+    <button *ngFor="let key of row1" 
+            (click)="sendKey(key)"
+            class="key-button">
+      {{ shiftActive ? key : key.toLowerCase() }}
+    </button>
+  </div>
+
+  <!-- Row 2: A S D F G H J K L -->
+  <div class="keyboard-row">
+    <button *ngFor="let key of row2" 
+            (click)="sendKey(key)"
+            class="key-button">
+      {{ shiftActive ? key : key.toLowerCase() }}
+    </button>
+  </div>
+
+  <!-- Row 3: Z X C V B N M -->
+  <div class="keyboard-row">
+    <button *ngFor="let key of row3" 
+            (click)="sendKey(key)"
+            class="key-button">
+      {{ shiftActive ? key : key.toLowerCase() }}
+    </button>
+  </div>
+
+  <!-- Reihe 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>
+</div>
 </main>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+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";
@@ -10,9 +10,16 @@ import { invoke } from "@tauri-apps/api/core";
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
-export class AppComponent {
+export class AppComponent implements AfterViewInit {
   greetingMessage = "";
 
+  @ViewChild('greetInput') inputElement!: ElementRef;
+
+  ngAfterViewInit() {
+    // Beim Start fokussieren
+    this.inputElement.nativeElement.focus();
+  }
+
   greet(event: SubmitEvent, name: string): void {
     event.preventDefault();
 
@@ -21,4 +28,30 @@ export class AppComponent {
       this.greetingMessage = text;
     });
   }
+
+  // Keyboard Layout
+  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'];
+  
+  shiftActive = false;
+
+  toggleShift(): void {
+    this.shiftActive = !this.shiftActive;
+  }
+
+  async sendKey(key: string): Promise<void> {
+    this.inputElement.nativeElement.focus();
+    
+    let finalKey = key;
+    if (key.length === 1) {
+      finalKey = this.shiftActive ? key.toUpperCase() : key.toLowerCase();
+    }
+    
+    await invoke("send_key", { key: finalKey });
+    
+    if (this.shiftActive && key.length === 1) {
+      this.shiftActive = false;
+    }
+  }
 }