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

finished circle keyboard implementation and update window size

Browse Source
This commit is contained in:
lukasadrion
2025-12-05 01:18:54 +01:00
parent ef740ca9dd
commit 3512bf0fac
4 changed files with 187 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src-tauri/tauri.conf.json
View File

@@ -14,7 +14,11 @@
{
"title": "keeb",
"width": 800,
"height": 600
"height": 700,
"minWidth": 800,
"minHeight": 700,
"resizable": true,
"center": true
}
],
"security": {

9
src/app/app.component.css
View File

@@ -1,6 +1,4 @@
.logo.angular:hover {
filter: drop-shadow(0 0 2em #e32727);
}
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
@@ -33,10 +31,6 @@
transition: 0.75s;
}
.logo.tauri:hover {
filter: drop-shadow(0 0 2em #24c8db);
}
.row {
display: flex;
justify-content: center;
@@ -118,6 +112,7 @@ button {
padding: 20px;
background: #f5f5f5;
border-radius: 10px;
margin: 20px auto;
}
.keyboard-row {

147
src/app/keyboards/circle-keyboard.component.css Normal file
View File

@@ -0,0 +1,147 @@
.circle-keyboard-container {
position: relative;
width: 400px;
height: 400px;
margin: 50px auto;
background: #f5f5f5;
}
/* 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;
}
.middle-left {
top: 50%;
left: 50%;
transform: translate(-100%, -50%); /* Komplett links von der Mitte */
width: 30px; /* Halbe Breite */
height: 55px; /* Volle Höhe */
border-radius: 35px 0 0 35px; /* Linke Hälfte eines Kreises */
z-index: 15; /* Über anderen Buttons */
}
.middle-right {
top: 50%;
left: 50%;
transform: translate(0%, -50%); /* Direkt rechts von der Mitte */
width: 30px; /* Halbe Breite */
height: 55px; /* Volle Höhe */
border-radius: 0 35px 35px 0; /* Rechte Hälfte eines Kreises */
z-index: 15; /* Über anderen Buttons */
}
/* 8 Circle Buttons */
.circle-button {
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
margin: -35px 0 0 -35px;
border-radius: 50%;
border: 2px solid #ddd;
background: white;
font-size: 24px;
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;
}
.second-ring {
width: 50px;
height: 50px;
font-size: 20px;
font-weight: normal;
margin: -25px 0 0 -25px;
}
.third-ring {
width: 40px;
height: 40px;
font-size: 18px;
font-weight: normal;
margin: -20px 0 0 -20px;
}
.fourth-ring {
width: 30px;
height: 30px;
font-size: 16px;
font-weight: lighter;
margin: -20px 0 0 -20px;
}
.circle-button:hover, .center-section:hover {
background: #e8e8e8;
border-color: #999;
}
.circle-button:active, .center-section:active {
background: #d0d0d0;
}

152
src/app/keyboards/circle-keyboard.component.ts
View File

@@ -33,6 +33,16 @@ import { CommonModule } from '@angular/common';
class="center-section bottom-left">
⇧
</button>
<button class="center-section middle-left"
(click)="keyPressed.emit('.')"
title="Period">
.
</button>
<button class="center-section middle-right"
(click)="keyPressed.emit(',')"
title="Comma">
,
</button>
</div>
<!-- 8 Surrounding Buttons in Circle -->
@@ -43,130 +53,34 @@ import { CommonModule } from '@angular/common';
{{ shiftActive ? key : key.toLowerCase() }}
</button>
<button *ngFor="let key of circleKeysSecond; let i = index"
class="circle-button second-ring"
[style.transform]="getCirclePositionFromTop(i, 150, 22.5)"
(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>
<button class="circle-button fourth-ring"
[style.transform]="getCirclePositionFromTop(0, 182, -12)"
(click)="keyPressed.emit(circleKeysFourth[0])">
{{ shiftActive ? circleKeysFourth[0] : circleKeysFourth[0].toLowerCase() }}
</button>
<button class="circle-button fourth-ring"
[style.transform]="getCirclePositionFromTop(0, 182, 14)"
(click)="keyPressed.emit(circleKeysFourth[1])">
{{ shiftActive ? circleKeysFourth[1] : circleKeysFourth[1].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;
}
`]
styleUrl: './circle-keyboard.component.css'
})
export class CircleKeyboardComponent {
@Input() shiftActive = false;
@@ -177,11 +91,11 @@ export class CircleKeyboardComponent {
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', ',', '.'];
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
getCirclePositionFromTop(index: number, radius: number, offset: number = 0): string {
const angle = ((index * 45) - 90) + offset; // Start from top (0°), 45° apart
const angleRad = (angle * Math.PI) / 180;
const x = Math.cos(angleRad) * radius;
const y = Math.sin(angleRad) * radius;