Usage

Onscreen keyboard for godot. Displayed as soon as LineEdit or TextEdit are in focus.

Installation

• install via godot asset library: https://godotengine.org/asset-library/asset/1328
• activate plugin: Project Settings -> Plugins -> Onscreen Keyboard
• create node: Create New Node -> OnscreenKeyboard

Custom styles

Select your OnscreenKeyboard object and apply your custom styles and font via inspector. (You can find some default dark-flat-like-styles inside the plugin/customize/styles folder)

Custom key-layouts

You can find some layouts inside plugin/customize/keyboardLayouts.

!Dont forget to add *.json to your export resources. -> Export -> Resources -> Filters to export non-resource ...

Create key-layouts

Assisted creation in gdscript

The function make_row([], "", []) which can be inherited from KeyboardLayout (keyboard_layout.gd) generates a row semi-automatically. The second argument is a string of symbols, such as "qwertyuiop[]" or "asdfghjkl;'\". To the left and right of these symbols you can add custom special keys using the other arguments.

Key values

"type"

define type of the key-button types are: char, special, special-shift and switch-layout

type: char

every key-release triggers value for key "output" with current uppercase state. ("output" value always in uppercase) all usable output-values can be found in keylist.gd

{
    "type": "char",
    "output": "E",
    "display": "e",
    "display-uppercase": "E"
}

Since the creation of these is repetitive the function generate_character_data() can take care of that. You can even generate data for a string of characters with generate_characters_data(). These functions are also used by make_row().

type: special

applies optional custom-style for special-keys (see: set custom key-layouts) every key-release triggers value for key "output" with current uppercase state. ("output" value always in uppercase) all usable output-values can be found in keylist.gd

{
    "type": "special",
    "output": "Return",
    "display": "Enter",
}

type: special-shift

triggers shift-function on key-release.

{
    "type": "special-shift",
    "display-icon": "PREDEFINED:SHIFT",
    "stretch-ratio": 1.5
}

type: switch-layout

use this type to create a button able to toggle the visible layout (eg. multi language keyboards). toggles layouts with same name in layout-name ("layout-name": "PREVIOUS-LAYOUT" displays the previous layout on key-release.) (see .json structure)

{
    "type": "switch-layout",
    "layout-name": "special-characters",
    "display": "&123"
}

"output"

every key-release triggers value for key "output" with current uppercase state. ("output" value always in uppercase) all usable output-values can be found in keylist.gd

"display"

visible string if lowercase is active

"display-uppercase"

visible string if uppercase is active

"stretch-ratio"

float value. set this above 1 if you want to stretch the visible key width, or below 1 to minimize it.

"display-icon"

use predefined key-icons:

use parameter "PREDEFINED" with SHIFT, LEFT, RIGHT, HIDE or DELETE

"display-icon": "PREDEFINED:SHIFT"

use custom key-icons:

use your custom icon directory (inside your project resources)

"display-icon": "res://test.png"

.json structure

A file can define multiple layouts. Each layout is defined by rows and key values.

{
    "debug": false,
    "layouts": [
        {
        "name": "layout-1",
        "rows": [
                {
                    "keys": [
                        {
                         ...
                        },
                        {
                         ...
                        },
                        {
                         ...
                        },
                    ]
                },
                {
                    "keys": [
                        {
                         ...
                        },
                        {
                         ...
                        },
                        {
                            "type": "switch-layout",
                            "layout-name": "layout-2",
                            "display": "display layout 2"
                        }
                    ]
                }
            ]
        },
        {
        "name": "layout-2",
        "rows": [
                {
                    "keys": [
                        {
                         ...
                        },
                        {
                         ...
                        },
                        {
                         ...
                        },
                    ]
                },
                {
                    "keys": [
                        {
                         ...
                        },
                        {
                         ...
                        },
                        {
                            "type": "switch-layout",
                            "layout-name": "layout-1",
                            "display": "display layout 1"
                        }
                    ]
                }
            ]
        }
    ]
}