{"id":14383891,"url":"https://github.com/soixantecircuits/piano","last_synced_at":"2025-07-25T16:33:23.877Z","repository":{"id":2337871,"uuid":"42940955","full_name":"soixantecircuits/piano","owner":"soixantecircuits","description":"Desktop browser based on screen keyboard for touch screens","archived":false,"fork":false,"pushed_at":"2022-12-04T12:46:54.000Z","size":1007,"stargazers_count":20,"open_issues_count":24,"forks_count":3,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-11-21T18:42:35.867Z","etag":null,"topics":["electron","keyboard","keyboard-layout","kiosk","touch","user-input","virtual-keyboard"],"latest_commit_sha":null,"homepage":"http://soixantecircuits.github.io/piano/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/soixantecircuits.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-22T15:00:29.000Z","updated_at":"2023-08-03T19:28:58.000Z","dependencies_parsed_at":"2023-01-13T11:47:25.675Z","dependency_job_id":null,"html_url":"https://github.com/soixantecircuits/piano","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soixantecircuits%2Fpiano","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soixantecircuits%2Fpiano/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soixantecircuits%2Fpiano/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soixantecircuits%2Fpiano/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soixantecircuits","download_url":"https://codeload.github.com/soixantecircuits/piano/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227598477,"owners_count":17791605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","keyboard","keyboard-layout","kiosk","touch","user-input","virtual-keyboard"],"created_at":"2024-08-28T18:01:02.924Z","updated_at":"2024-12-01T16:51:22.185Z","avatar_url":"https://github.com/soixantecircuits.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"https://rawgit.com/soixantecircuits/piano/master/piano-icon.png\" alt=\"piano\"\u003e\n  \u003cbr\u003e\n  ⌨ Piano.js\n  \u003cbr\u003e\u003cbr\u003e\n\u003c/h1\u003e\n\n\n\u003e Customizable virtual keyboard written in plain JavaScript. See the [demo](http://soixantecircuits.github.io/piano).\n\nThe easiest way to put a keyboard in front of your users. Piano is a simple and extensible [On-Screen keyboard](https://en.wikipedia.org/wiki/Virtual_keyboard). It allows to provide elegant solution for virtual keyboard in a touch application. \n\nTested in Electron and Chrome kiosk.\n\n\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n[![Join the chat at https://gitter.im/soixantecircuits/piano](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/soixantecircuits/piano?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n*Piano is still under active development (but has successfully been used in production work).*\n\n## Table of contents\n\n\u003c!-- TOC depthFrom:2 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 --\u003e\n\n- [Table of contents](#table-of-contents)\n- [Installation](#installation)\n\t- [Installation with module bundler](#installation-with-module-bundler)\n\t- [Installation without module](#installation-without-webpack)\n- [Usage](#usage)\n\t- [Positionning / styling](#positionning-styling)\n\t- [Submit](#submit)\n\t- [Animations](#animations)\n\t- [Touch events](#touch-events)\n- [Options](#options)\n- [Demo](#demo)\n- [Layouts](#layouts)\n- [Development](#development)\n- [To Do](#to-do)\n\n\u003c!-- /TOC --\u003e\n\n\n## Installation\n\n#### Get the packages\n\n```bash\nnpm i -S piano.js\n# or\nyarn add piano.js\n```\n\nOr download [piano](piano.js) and at least the [default layout](layouts/default.js) .\n\n#### Load the library\n\n```js\n// Add the CSS\nrequire('piano.js/piano.css')\n\n// Require piano wherever you want to use it\nconst Piano = require('piano.js')\n\n// Choose the layouts you want\nconst azerty = require('piano.js/layouts/azerty')\nconst qwerty = require('piano.js/layouts/qwerty')\n```\n\nor\n\n```html\n\u003c!-- Load the library --\u003e\n\u003cscript src=\"path/to/piano.js\"\u003e\u003c/script\u003e\n\u003c!-- And at least the default layout --\u003e\n\u003cscript src=\"path/to/layouts/default.js\"\u003e\u003c/script\u003e\n```\n\n#### Use it\n\n```js\n// Instantiate Piano\nconst keyboard = new Piano({\n  layouts: {\n    'azerty': azerty,\n    'qwerty': qwerty\n  },\n  slideContent: true\n})\n// See the 'Options' section for more details about this\n```\n\n```html\n\u003cinput type=\"text\"\n  data-piano data-piano-scale=\"1.5\"\n  data-piano-layout=\"azerty\"\n/\u003e\n```\n\nOptionally, you can listen to piano events in your code\n\n```html\n\u003cinput type=\"text\"\n  data-piano-event-id=\"do-stuff\"\n/\u003e\n```\n\n```js\ndocument\n  .querySelector('[data-piano-event-id=\"do-stuff\"]')\n  .addEventListener('do-stuff', doStuffCallback)\n```\n\n## Method \n\n### addTarget()\n\n`addTarget` method allow to dynamically add an input trigger for your on screen screen keyboard.\n\n```\naddTarget(element, options)\n```\n\nYou need to provide a domElement and basic options object : \n\n```\n{\n  layout: 'azerty',\n  animationIn: 'bounceInUp',\n  animationOut: 'fadeOutUp',\n  scale: 1.0\n}\n```\n\nSo if you already have your keyboard instance and an element in the DOM namde `#dynamic-piano` you can:\n\n```\nlet options = {\n    layout: 'azerty',\n    animationIn: 'bounceInUp',\n    animationOut: 'fadeOutUp',\n    scale: 1.0\n  }\nkeyboard.addTarget(document.querySelector('#dynamic-piano'), options)\n```\n\n\n## Usage\n\n### Positionning / styling\n\nYou can define positionning with the `data-piano-position` attribute. You can use the following:\n- `'left', 'center', 'right' -\u003e x axis`\n- `'top', 'middle', 'bottom' -\u003e y axis`\n\nFor example:\n```html\n\u003cinput type=\"text\" data-piano data-piano-position=\"left, center\" /\u003e\n```\n\nOr, with the `absolute` keyword, you can define absolute x and y positions:\n```html\n\u003cinput type=\"text\" data-piano data-piano-position=\"absolute, 100, 150\" /\u003e\n```\n\nDefault positions are `'center, bottom'`.\n\n\n### Submit\n\nYou can define a `data-piano-event-id` attribute on your element and then listen to it.\nFor example, if you have a `data-piano-event-id=\"input-event\"`:\n\n```js\nelement.addEventListener('input-event', function (event) {\n  console.log('element with id \"%s\" submitted.', event.target.id)\n})\n```\n\n\n### Animations\n\nPiano provide has built-in but yet optionnal support for [Animate.css](https://daneden.github.io/animate.css/).\n\nBy default, it will add `fadeInUp` and `fadeOutDown` classes to your container. Just load the animate.css stylesheet and you'll have nice animations. You can also use the `data-piano-animation-in` and `data-piano-animation-out` attributes to define custom classes to toggle on hide/show.\n\nYou can also choose to create your own animations, and thus just use the classes toggled by piano to trigger them.\n\n\n### Touch events\n\nBy default, Piano uses `click` events, even for touch devices. This is because any decent browser will emulate touch events into `click`, and touch events [make an approximation](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height) of the pointer's contact position. Of course, you can override this in the [options](#options).\n\n## Options\n\nYou can pass options to your `new Piano()` call. Here they are:\n- triggerEvents: **Array** of event triggers you want Piano to react (see [Touch events](#touch-events))\n- slideContent: **bool** [true, false], _default to false_. Allow to define if the content should _slide_\n- slideContainer: **string** ['.demo-container'], _no default_. Allow to define the part of the DOM you want to _slide_\n- onHidden: **function**, _default to empty function_. Allow to call a function when the keyboard is hidden\n- onBeforeHidden: **function**, _default to empty function_. Allow to call a function before the keyboard is hidden\n\n## Layouts\n*Soon.*\n\n## Development\nWe use gulp to develop, to contribute to piano, just use `gulp develop`. It will watch src/piano and serve it over localhost on port 8080.\n\nCreate a `feature-[name-of-the-feature]` branch and make PR on the `dev` branch. Please use the [standard js coding style](https://github.com/feross/standard).\n\n## To Do\n- Support accentuation. (partial support for now).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoixantecircuits%2Fpiano","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoixantecircuits%2Fpiano","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoixantecircuits%2Fpiano/lists"}