https://github.com/rokobuljan/kioboard
Virtual keyboard for digital signage kiosk touch screens
https://github.com/rokobuljan/kioboard
javascript keyboard kiosk kiosk-software on-screen-keyboard osk touch-screen touch-screen-kiosk virtual-keyboard
Last synced: 3 days ago
JSON representation
Virtual keyboard for digital signage kiosk touch screens
- Host: GitHub
- URL: https://github.com/rokobuljan/kioboard
- Owner: rokobuljan
- License: other
- Created: 2024-06-30T11:55:27.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2026-03-02T10:52:18.000Z (4 months ago)
- Last Synced: 2026-03-02T13:20:19.666Z (4 months ago)
- Topics: javascript, keyboard, kiosk, kiosk-software, on-screen-keyboard, osk, touch-screen, touch-screen-kiosk, virtual-keyboard
- Language: JavaScript
- Homepage: https://rokobuljan.github.io/kioboard/
- Size: 814 KB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# 
JavaScript **virtual on-screen keyboard** for digital signage kiosk touchscreens
- [**Kioboard homepage →**](https://rokobuljan.github.io/kioboard/)
- **[Quick Tutorial →](tutorial.md)**
- **[API docs →](api.md)**
## Features
- [x] Fully customizable layouts and layers
- [x] Fully customizable buttons actions
- [x] Fully customizable buttons icons (Unicode, SVG)
- [x] Themes: default, flat, glass. In light and dark mode
- [x] Language presets (contribute to the project!)
- [x] Shift + Caps-Lock
- [x] Close Kioboard button
- [x] Toggle or set initial visibility
- [x] Drag/move Kioboard handler
- [x] Different layouts per input groups
- [x] Long key press - repeat input
## Usage
Install package
```bash
npm i @rbuljan/kioboard
```
Import and instantiate
```js
import "@rbuljan/kioboard/dist/kioboard.css";
import en from "@rbuljan/kioboard/dist/layouts/en.js";
import Kioboard from "@rbuljan/kioboard";
const kio = new Kioboard({
layout: en,
theme: "default-dark",
});
```
HTML
```html
```
## Options
Customization options example:
```js
const kio = new Kioboard({
parent: "body", // selector|Element
inputs: "[data-kioboard]", // selector|Element|Element[]|NodeList
input: null, // The curently active input Element
theme: "default", // "default|flat|glass"-"light|dark"
layout: {}, // Layout Object, or import en|de|es|fr|hr|it // Contribute for more!
layerName: "default", // Initial layer
shiftState: 0, // 0=off 1=on 2=capsLock // Necessary if showing the "shift" layer
isEnterSubmit: true, // submit form ( only)
isVisible: false, // Initial visibility
isPermanent: false, // Always visible
isScroll: true, // should input scrolIntoView()
isOSK: false, // show also default OS's on-screen keyboard
scrollOptions: { behavior: "smooth", block: "start", inline: "nearest" },
onInit() { /*initialized*/ },
onLoad() { /*layout loaded*/ },
onBeforeShow() { /*before show*/ },
onShow() { /*after show*/ },
onBeforeHide() { /*before hide*/ },
onHide() { /*after hide*/ },
onKeyDown(keyName) { /*after key press*/ },
onKeyUp(keyName) { /*after key release*/ },
});
```
## Methods
Having a Kioboard instance (like i.e: `kio`), you can then use its [methods](api.md)
```js
kio.load(layout, callback) // Load Layout object or .js layout file
kio.setLayout(layout) // Read layout data, attach keys actions, set default layer
kio.shift(state) // 0=off 1=on 2=caps-lock. Needed when using .show("shift") or .changeLayer("shift")
kio.show() // Show Kioboard
kio.show(layerName) // .changeLayer(layerName) and show Kioboard
kio.hide() // Kide Kioboard
kio.setActions(actions) // Set key actions for current layout. See: .on()
kio.setStyle(CSSVars) // Sets CSS Vars from object
kio.on(keys, callback) // Attach action callbacks to keys
kio.off(keys, callback) // Detach action callbacks from keys
kio.emit(keys) // Emit programmatically registered keys actions
kio.sequence(keys, speed, callback) // => fn() to stop sequencer
kio.clearKioboard() // Clear children elements (rows and buttons)
kio.draw() // Draw rows and buttons
kio.changeLayer(layerName) // Draw a specific layout's layer
kio.setTheme(themeName) // Change theme
kio.hasSelection() // true if input has selection
kio.insert(value, from, to) // insert a value at caret position of from-to index
kio.drag() // Attaches drag listeners to Kioboard element until pointerup
kio.init() // Initialize element and event listeners
kio.destroy() // Destroy element and listeners
```
Find out more about each method (with examples!) in the [API Docs](api.md)
## Feature requests / issues
Missing a feature? Have a suggestion? Found a bug?
[GitHub: rokobuljan/kioboard/issues →](https://github.com/rokobuljan/kioboard/issues)
## Licence
MIT
___
© 2024-present — Roko C. Buljan