KeyboardLayout Datei
Um das Keyboard Control nutzen zu können, wird ein Keyboard Layout benötigt. Dieses ist im JSON-Format geschrieben und lässt sich individuell erstellen oder anpassen. Die TwinCAT HMI implementiert standardmäßig ein Numpad sowie ein Layout für eine deutsche und englische Tastatur. Diese Layouts können direkt angepasst werden. Alternativ kann auch aus einer größeren Auswahl an Keyboard Layouten ein neues hinzugefügt werden. Dies geht über das Kontextmenü im Solution Explorer.
JSON Sample Keyboard:
Sample:
{
"useIndirectInput": false,
"hasNumPad": true,
"displayName": "Numpad",
"localeName": null,
"layouts": []
}Key | Beschreibung | Wert Beispiel |
|---|---|---|
useIndirectInput | Gibt an, ob ein Inputfeld als indirekter Input genutzt werden soll. | true | false |
showHintsInIndirectInputTextbox | Gibt an, ob hinweise im Indirekt Input angezeigt werden sollen. (Nur in Verbindung mit „useIndirectInput“) | true | false |
hasNumPad | Gibt an, ob ein Num Pad zur Verfügung steht. (Wird nur im Engineering ausgewertet) | true | false |
displayName | Gibt den anzeige Namen der Tastatur an. (Wird nur im Engineering ausgewertet) | "" |
localeName | Gibt an in welcher Sprache das Keyboard ist. (ISO) | null | “de-DE” | "en-US" | … |
script | Nicht in Benutzung | "" |
layouts | Gibt die einzelnen Tasten der Tastatur an. | Siehe „JSON Sample Layouts” |
JSON Sample Layouts:
Sample:
{
"name": "default",
"dimensions": {
"width": 230,
"height": 230
},
"keys": []
}Key | Beschreibung | Werte Beispiel |
|---|---|---|
name | Gibt den Namen eines Tastaturbereiches an. | "" |
dimensions | Gibt an, wie groß der Bereich in px ist in dem die Tasten platziert werden. | { |
keys | Gibt an welche Keys vorhanden sind. | Siehe „JSON-Sample Keys” |
JSON Sample Keys:
Der “Key” (Taste) verfügt über unterschiedlichen Strukturen, die von einer Basis Klasse abgeleitet werden.
Sample:
{
"geometry": {
"left": 0,
"top": 0,
"width": 21.73913043478261,
"height": 21.73913043478261
},
"code": "Numpad1",
"key": "1",
"location": "numpad",
"labels": [
{
"type": "text",
"text": "1"
}
]
}Key-Basisklasse:
Key | Beschreibung | Werte Beispiel |
|---|---|---|
geometry | Gibt an, wo sich die Taste befindet und wie groß diese ist. | { |
type | Gibt an, welche Funktion die Taste hat. So kann zwischen verschiedenen Funktionen gewählt werden. Siehe nachfolgende Tabellen. | "character" | "modifier" | "action" | "edit" | "layout-switch" | "indirect-input" | "input-hints" |
labels | Gibt an, welches Label auf der Taste angezeigt wird. Dies kann ein einfacher Text sein, eine SVG-Linie oder ein Bild. Je nach ausgewählten „type“ müssen entsprechende Zusatzinformationen mit angegeben werden. | [ Additional: Type = Text: Type = SVG: Type = Image: "image": { |
StandardKeyDefinition:
Key | Beschreibung | Werte Beispiel |
|---|---|---|
mode | Gibt an, wie die Taste reagieren soll. Normal = Schreiben beim Drücken. Sticky = Wechsel zwischen zwei Werten. Bei einem langen Drücken wird das Lock aktiviert. Toggle = Wechsel zwischen zwei States. | "normal" | "sticky" | "toggle" |
code | Gibt an, welche physische Taste es auf der Tastatur entspricht. Bei Actions gibt es keinen Code. In diesem Fall wird empfohlen denselben Namen wie im „key“ zu nutzen. | "Numpad1" |
key | Gibt an welchen Wert die Taste hat. | Character: "a" Modifier: "Meta" | "Insert" | "Shift" | "Control" | "Alt" | "CapsLock" | "NumLock" Actions: Edit: "Backspace" | "Delete" | "PlusMinus" |
composition | Gibt an, ob die Taste eine Composition hat. | [ "" ] |
shiftKey | Gibt an, welchen Wert die Taste bei aktiviertem Shift hat. | "A" |
shiftType | Gibt an, welche Funktion die Taste hat. So kann zwischen verschiedenen Funktionen gewählt werden. | "character" | "modifier" | "action" | "edit" |
shiftComposition | Gibt an, ob die Taste eine Composition hat. | [ "" ] |
ctrlKey | Gibt an, welchen Wert die Taste bei aktiviertem Strg hat. | "" |
ctrlType | Gibt an, welche Funktion die Taste hat. So kann zwischen verschiedenen Funktionen gewählt werden. | "character" | "modifier" | "action" | "edit" |
ctrlComposition | Gibt an, ob die Taste eine Composition hat. | [ "" ] |
shiftCtrlKey | Gibt an, welchen Wert die Taste bei aktiviertem Shift und Strg hat. | "" |
shiftCtrlType | Gibt an, welche Funktion die Taste hat. So kann zwischen verschiedenen Funktionen gewählt werden. | "character" | "modifier" | "action" | "edit" |
shiftCtrlComposition | Gibt an, ob die Taste eine Composition hat. | [ "" ] |
altKey | Gibt an, welchen Wert die Taste bei aktiviertem Alt hat. | "" |
altType | Gibt an, welche Funktion die Taste hat. So kann zwischen verschiedenen Funktionen gewählt werden. | "character" | "modifier" | "action" | "edit" |
altComposition | Gibt an, ob die Taste eine Composition hat. | [ "" ] |
ctrlAltKey | Gibt an, welchen Wert die Taste bei aktiviertem Strg und Alt hat. | "" |
ctrlAltType | Gibt an, welche Funktion die Taste hat. So kann zwischen verschiedenen Funktionen gewählt werden. | "character" | "modifier" | "action" | "edit" |
ctrlAltComposition | Gibt an, ob die Taste eine Composition hat. | [ "" ] |
shiftCtrlAltKey | Gibt an, welchen Wert die Taste bei aktiviertem Shift, Strg und Alt hat. | "" |
shiftCtrlAltType | Gibt an, welche Funktion die Taste hat. So kann zwischen verschiedenen Funktionen gewählt werden. | "character" | "modifier" | "action" | "edit" |
shiftCtrlAltComposition | Gibt an, ob die Taste eine Composition hat. | [ "" ] |
numlockKey | Gibt an, welchen Wert die Taste bei aktiviertem Nummernblock hat. | "" |
numlockType | Gibt an, welche Funktion die Taste hat. So kann zwischen verschiedenen Funktionen gewählt werden. | "character" | "modifier" | "action" | "edit" |
numlockComposition | Gibt an, ob die Taste eine Composition hat. | [ "" ] |
capsLock | Gibt an, welche Tasten unter capsLock vorhanden sind und welche Funktion diese haben. | { |
keyPath | Nur intern | - |
undefinedKey | Nur intern | - |
longpressAction | Gibt an, wie sich die Taste bei einem langen Drücken verhalten soll. Der Default Wert ist „none“. | "none" | "repeat" | "additionalkeys" | "lock" |
additionalKeys | Gibt an, ob es eine zusätzliche Taste gibt. Diese wird z. B. mit einem langen Tastendruck gekoppelt. So wird z. B. bei einem langen Tastendruck auf „a“ der Umlaut „ä“ gewählt. | Siehe „JSON-Sample Keys” |
location | Gibt an, an welchem Ort sich die Taste befindet. Bei Nichtnutzung wird „Standard“ benutzt. Bei Nutzung von „Strg“ wird z.B. zwischen links und rechts unterschieden. | "standard" | "left" | "right" | "numpad" |
ignoreModifiers | Gibt an, ob die Taste Modifiers ignorieren soll. Dies ist z. B. bei der Leertaste sinnvoll, da diese keine andere Funktion besitzt. | true | false |
LayoutSwitchKeyDefinition: (type = layout-switch)
Key | Beschreibung | Werte Beispiel |
|---|---|---|
layoutName | Gibt den Namen des Tastaturlayouts an, auf das umgeschaltet werden soll. Siehe „JSON Sample Layouts” | "default" |
IndirectInputKeyDefinition: (type = indirect-input)
Key | Beschreibung | Werte Beispiel |
|---|---|---|
component | Gibt an, ob der Button eine Systemfunktion auslöst. | "textbox" | "accept" | "cancel" |
InputHintsKeyDefinition: (type = input-hints)
Key | Beschreibung | Werte Beispiel |
|---|---|---|
- | - | - |
Tasten Samples:
Layout-Switch:
Über „Layout-Switch“ Kann ein Wechsel der Tastatur auf ein zweites Layout erstellt werden. Hier muss der aus „JSON Sample Layouts” der Name in „layoutName“ eingetragen werden.
{
"geometry": {
"left": 0,
"top": 0,
"width": 20,
"height": 20
},
"type": "layout-switch",
"layoutName": "default",
"labels": [
{
"text": "ABC",
"type": "text"
}
]
}Indirect-Input:
Über „Indirect Input“ kann z.B. ein „Accept“ Button erstellen werden. Dieser schreibt den Wert, bei einer indirekten Tastatur, in das ausgewählte Eingabefeld.
{
"geometry": {
"left": 0,
"top": 0,
"width": 20,
"height": 20
},
"type": "indirect-input",
"component": "accept",
"labels": [
{
"type": "svg",
"svg": {
"path": "M 1 11 L 5 17 L 18 1",
"dimensions": {
"width": 19,
"height": 18
}
}
}
]
}Modifier:
Beim Modifier kann eine Taste wie „Shift“ oder „Strg“ umgesetzt werden. Hier ein Beispiel für die linke Shift-Taste der Tastatur mit „Lock“ Funktionalität.
{
"geometry": {
"left": 0,
"top": 0,
"width": 20,
"height": 20
},
"code": "ShiftLeft",
"key": "Shift",
"type": "modifier",
"mode": "sticky",
"location": "left",
"labels": [
{
"type": "svg",
"svg": {
"dimensions": {
"width": 14,
"height": 14
},
"path": "M 3.5 13.5 L 3.5 6.5 L 0.5 6.5 L 7 0.5 L 13.5 6.5 L 10.5 6.5 L 10.5 13.5 Z"
},
"hidden": [
"locked"
]
},
{
"type": "svg",
"visible": [
"locked"
],
"svg": {
"dimensions": {
"width": 14,
"height": 14
},
"path": "M 3.5 8.5 L 3.5 6.5 L 0.5 6.5 L 7 0.5 L 13.5 6.5 L 10.5 6.5 L 10.5 8.5 Z M 3.5 13.5 L 3.5 10.5 L 10.5 10.5 L 10.5 13.5 Z"
}
}
],
"longpressAction": "lock"
}Action: (SelectAll)
Bei Action kann eine Funktion wie ein „SelectAll“ oder „ArrowUp“ umgesetzt werden. Über ein “SelectAll” wird der gesamte Text/Nummer des Eingabefeldes markiert.
{
"geometry": {
"left": 80,
"top": 40,
"width": 20,
"height": 20
},
"code": "SelectAll",
"key": "SelectAll",
"type": "action",
"labels": [
{
"type": "text",
"text": "SelectAll"
}
]
}Character:
Es wird der Wert aus dem „key“ in das Eingabefeld geschrieben.
{
"geometry": {
"left": 80,
"top": 40,
"width": 20,
"height": 20
},
"code": "KeyA",
"key": "a",
"type": "character",
"labels": [
{
"type": "text",
"text": "a"
}
]
}Edit:
Es wird der Wert zwischen einem positiven und negativen Wert geändert.
{
"geometry": {
"left": 80,
"top": 40,
"width": 20,
"height": 20
},
"code": "PlusMinus",
"key": "PlusMinus",
"type": "edit",
"labels": [
{
"type": "text",
"text": "+/-"
}
]
}