init commit

app.py

+from flask import Flask,request,render_template,jsonify,redirect, url_for, session
+import json
+import os
+import requests
+from flask_bootstrap import Bootstrap
+
+app = Flask(__name__)
+bootstrap = Bootstrap(app)
+recent_dir = os.path.abspath(os.path.dirname(__file__))
+
+# 
+@app.route('/')
+def main():
+    return render_template('demo.html')
+
+@app.route('/wifi_configure')
+def wifi_configure():
+    return 'HTTP OK'
+
+
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=8080, debug=True)

requirement.txt

+flask
+flask-bootstrap
+

static/css/images/disabled.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="#111">
+  <path d="M7.4 4.4V2.5c0-1.4-1.1-2.5-2.5-2.5c-1.4 0-2.5 1.1-2.5 2.5v1.9 c-0.7 0-1.2 0.5-1.2 1.2v3.1C1.3 9.4 1.8 10 2.5 10h4.9c0.7 0 1.2-0.6 1.2-1.2V5.6 C8.7 4.9 8.1 4.4 7.4 4.4z M5.3 7.4v1.0c0 0.2-0.1 0.3-0.3 0.3c-0.2 0-0.3-0.1-0.3-0.3V7.4 c-0.2-0.1-0.3-0.3-0.3-0.5c0-0.3 0.3-0.6 0.6-0.6c0.3 0 0.6 0.3 0.6 0.6 C5.6 7.1 5.5 7.3 5.3 7.4z M6.2 4.4H3.7V2.5c0-0.7 0.5-1.2 1.2-1.2c0.7 0 1.2 0.6 1.2 1.2 V4.4z"/>
+</svg>
\ No newline at end of file

static/css/images/enabled.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="#111">
+  <path d="M8.7,4.4H7.5H5.0v-1.9c0-1.4-1.1-2.5-2.5-2.5c-1.4,0-2.5,1.1-2.5,2.5v1.9h1.2 v-1.9c0-0.7,0.6-1.2,1.2-1.2s1.2,0.6,1.2,1.2v1.9c-0.7,0-1.2,0.6-1.2,1.2V8.8 c0,0.7,0.6,1.2,1.2,1.2h5.0C9.4,10,10,9.4,10,8.8V5.6C10,5.0,9.4,4.4,8.8,4.4z M6.6,7.4v1.0 c0,0.2-0.1,0.3-0.3,0.3S6.0,8.6,6.0,8.4V7.4c-0.2-0.1-0.3-0.3-0.3-0.5c0-0.3,0.3-0.6,0.6-0.6 S6.9,6.6,6.9,6.9C6.9,7.1,6.8,7.3,6.6,7.4z"/>
+</svg>

static/css/images/keyboard.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill:#888">
+ <g>
+  <path style="fill:none;stroke:#888" d="M 0.5,4.5 15.5,4.5 15.5,15.5 0.5,15.5 Z"></path>
+  <rect width="2" height="2" x="2" y="6"></rect>
+  <rect width="2" height="2" x="5" y="6"></rect>
+  <rect width="2" height="2" x="8" y="6"></rect>
+  <path d="m 11,6 3,0 0,5 -2,0 0,-3 -1,0 z"></path>
+  <rect width="2" height="2" x="12" y="12"></rect>
+  <rect width="6" height="2" x="5" y="12"></rect>
+  <rect width="2" height="2" x="9" y="9"></rect>
+  <rect width="2" height="2" x="6" y="9"></rect>
+  <rect width="2" height="2" x="2" y="12"></rect>
+  <rect width="3" height="2" x="2" y="9"></rect>
+ </g>
+</svg>
\ No newline at end of file

static/css/keyboard-basic.css

+/* *** keyboard light theme ***
+  for when jQuery UI themes are not being used
+  See https://jsfiddle.net/Mottie/jsh0377k/
+ */
+.ui-keyboard {
+	/* adjust overall keyboard size using "font-size" */
+	font-size: 14px;
+	text-align: center;
+	background: #fefefe;
+	border: 1px solid #aaa;
+	padding: 4px;
+
+	/* include the following setting to place the
+	keyboard at the bottom of the browser window */
+	width: 100%;
+	height: auto;
+	left: 0px;
+	top: auto;
+	bottom: 0px;
+	position: fixed;
+	white-space: nowrap;
+	overflow-x: auto;
+	/* see issue #484 */
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+}
+.ui-keyboard-has-focus {
+	z-index: 16001;
+}
+.ui-keyboard-button {
+	border: 1px solid #aaa;
+	padding: 0 0.5em;
+	margin: 1px;
+	min-width: 3em;
+	height: 3em;
+	line-height: 3em;
+	vertical-align: top;
+	font-family: Helvetica, Arial, sans-serif;
+	color: #333;
+	text-align: center;
+	border-radius: 5px;
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
+	box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
+	background: white;
+	background-image: -webkit-linear-gradient(-90deg, white 0%, #e3e3e3 100%);
+	background-image:         linear-gradient(-90deg, white 0%, #e3e3e3 100%);
+	cursor: pointer;
+	overflow: hidden;
+	-moz-user-focus: ignore;
+}
+.ui-keyboard-button:not([disabled]):hover {
+	background: #eee;
+	background-image: -webkit-linear-gradient(-90deg, #f2f2f2 0%, #d3d3d3 100%);
+	background-image:         linear-gradient(-90deg, #f2f2f2 0%, #d3d3d3 100%);
+}
+.ui-keyboard-button:not([disabled]):active {
+	background: #ddd;
+	background-image: -webkit-linear-gradient(-90deg, #e5e5e5 0%, #d3d3d3 100%);
+	background-image:         linear-gradient(-90deg, #e5e5e5 0%, #d3d3d3 100%);
+}
+.ui-keyboard-button span {
+	display: block;
+	width: 100%;
+	font-size: 1.2em;
+	text-align: center;
+}
+/* make action keys extra-wide */
+.ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) {
+	min-width: 6em;
+}
+.ui-keyboard-space {
+	width: 15em;
+}
+.ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) span {
+	font-size: 0.8em;
+	position: relative;
+	top: -1em;
+	left: -1.6em;
+}
+.ui-keyboard-placeholder {
+	color: #888;
+}
+/* disabled or readonly inputs, or use input[disabled='disabled'] { color: #f00; } */
+.ui-keyboard-nokeyboard {
+	color: #888;
+	border-color: #888;
+}
+.ui-keyboard-spacer {
+	display: inline-block;
+	width: 1px;
+	height: 0;
+	cursor: default;
+}
+.ui-keyboard-NBSP span, .ui-keyboard-ZWSP span, .ui-keyboard-ZWNJ span, .ui-keyboard-ZWJ span,
+.ui-keyboard-LRM span, .ui-keyboard-RLM span {
+	font-size: 0.5em;
+	line-height: 1.5em;
+	white-space: normal;
+}
+
+/* combo key styling - toggles diacritics on/off */
+.ui-keyboard-button.ui-keyboard-combo.ui-state-default {
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(213, 133, 18, 0.5);
+	        box-shadow: 1px 1px 3px 0 rgba(213, 133, 18, 0.5);
+	border-color: #d58512;
+}
+.ui-keyboard-button.ui-keyboard-combo.ui-state-active {
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(38, 154, 188, 0.5);
+	        box-shadow: 1px 1px 3px 0 rgba(38, 154, 188, 0.5);
+	border-color: #269abc;
+}
+/* (in)valid inputs */
+button.ui-keyboard-accept.ui-keyboard-valid-input {
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(57, 132, 57, 0.5);
+	        box-shadow: 1px 1px 3px 0 rgba(57, 132, 57, 0.5);
+	border-color: #398439;
+}
+button.ui-keyboard-accept.ui-keyboard-valid-input:not([disabled]):hover {
+	border-color: #4cae4c;
+}
+button.ui-keyboard-accept.ui-keyboard-invalid-input {
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(172, 41, 37, 0.5);
+	        box-shadow: 1px 1px 3px 0 rgba(172, 41, 37, 0.5);
+	border-color: #ac2925;
+}
+button.ui-keyboard-accept.ui-keyboard-invalid-input:not([disabled]):hover {
+	border-color: #d43f3a;
+}
+/* unlocked icon (keyboard enabled) */
+button.ui-keyboard-toggle span {
+	width: .9em;
+	height: .9em;
+	display: inline-block;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: contain;
+	/* light theme unlocked icon - fill: #111 */
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzExMSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg==');
+}
+/* locked icon (keyboard disabled) */
+button.ui-keyboard-toggle.ui-keyboard-disabled span {
+	/* light theme locked icon - fill: #111 */
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzExMSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4=');
+}
+.ui-keyboard.ui-keyboard-disabled button:not(.ui-keyboard-toggle), .ui-keyboard.ui-keyboard-disabled input {
+	opacity: 0.5;
+}
+
+/*** Alt-Keys Popup extension ***/
+/* clickable overlay on top of keyboard to hide the popup */
+.ui-keyboard-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	background: rgba(238, 238, 238, 0.5);
+}
+/* the actual popup styling, class names from the css.container option are also added */
+.ui-keyboard-popup {
+	display: inline-block;
+	/* default buttons are 2em wide + .1em margin on either side (set in .ui-keyboard-button definition);
+	so use multiples of 2.2em	for a max-width if you don't want any extra white space on the sides,
+	e.g. 5 buttons * 2.2em = 11em, 6 buttons * 2.2em = 13.2em, etc */
+	max-width: 22em;
+	/* 10 buttons */
+}
+.ui-keyboard.ui-keyboard-popup-open .ui-keyboard-keyset .ui-keyboard-button {
+	/* Disable keys under overlay while popup is open - see #654 */
+	pointer-events: none;
+}
+
+/*** Caret extension definition ***/
+/* margin-top => is added to the caret height (top & bottom) */
+.ui-keyboard-caret {
+	background: #c00;
+	width: 1px;
+	margin-top: 3px;
+}
+
+/*** Extender keyboard extension ***/
+div.ui-keyboard-extender {
+	margin-left: 5px;
+	margin-right: 10px;
+}
+button.ui-keyboard-extender span {
+	width: .9em;
+	height: .9em;
+	display: inline-block;
+	margin-bottom: 3px;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: contain;
+	/* light theme extender icon - fill: #111 */
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6IzExMSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzExMSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+');
+}

static/css/keyboard-dark.css

+/* *** keyboard dark theme ***
+  for when jQuery UI themes are not being used
+  See https://jsfiddle.net/Mottie/6dmqhLvh/
+ */
+.ui-keyboard {
+	/* adjust overall keyboard size using "font-size" */
+	font-size: 14px;
+	text-align: center;
+	background: #282828;
+	border: 1px solid #484848;
+	padding: 4px;
+
+	/* include the following setting to place the
+	keyboard at the bottom of the browser window */
+	width: 100%;
+	height: auto;
+	left: 0px;
+	top: auto;
+	bottom: 0px;
+	position: fixed;
+	white-space: nowrap;
+	overflow-x: auto;
+	/* see issue #484 */
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+}
+.ui-keyboard-has-focus {
+	z-index: 16001;
+}
+.ui-keyboard-button {
+	border: 1px solid #404040;
+	padding: 0 0.5em;
+	margin: 1px;
+	min-width: 3em;
+	height: 3em;
+	line-height: 3em;
+	vertical-align: top;
+	font-family: Helvetica, Arial, sans-serif;
+	color: #eee;
+	text-align: center;
+	border-radius: 5px;
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
+	box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
+	background: #444;
+	background-image: -webkit-linear-gradient(-90deg, #444 0%, #333 100%);
+	background-image:         linear-gradient(-90deg, #444 0%, #333 100%);
+	cursor: pointer;
+	overflow: hidden;
+	-moz-user-focus: ignore;
+}
+.ui-keyboard-button:not([disabled]):hover {
+	background: #eee;
+	background-image: -webkit-linear-gradient(-90deg, #4f4f4f 0%, #444 100%);
+	background-image:         linear-gradient(-90deg, #4f4f4f 0%, #444 100%);
+}
+.ui-keyboard-button:not([disabled]):active {
+	background: #ddd;
+	background-image: -webkit-linear-gradient(-90deg, #555 0%, #5f5f5f 100%);
+	background-image:         linear-gradient(-90deg, #555 0%, #5f5f5f 100%);
+}
+.ui-keyboard-button span {
+	display: block;
+	width: 100%;
+	font-size: 1.2em;
+	text-align: center;
+}
+/* make action keys extra-wide */
+.ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) {
+	min-width: 6em;
+}
+.ui-keyboard-space {
+	width: 15em;
+}
+.ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) span {
+	font-size: 0.8em;
+	position: relative;
+	top: -1em;
+	left: -1.6em;
+}
+.ui-keyboard-placeholder {
+	color: #888;
+}
+/* disabled or readonly inputs, or use input[disabled='disabled'] { color: #f00; } */
+.ui-keyboard-nokeyboard {
+	color: #888;
+	border-color: #888;
+}
+.ui-keyboard-spacer {
+	display: inline-block;
+	width: 1px;
+	height: 0;
+	cursor: default;
+}
+.ui-keyboard-NBSP span, .ui-keyboard-ZWSP span, .ui-keyboard-ZWNJ span, .ui-keyboard-ZWJ span,
+.ui-keyboard-LRM span, .ui-keyboard-RLM span {
+	font-size: 0.5em;
+	line-height: 1.5em;
+	white-space: normal;
+}
+
+/* combo key styling - toggles diacritics on/off */
+.ui-keyboard-button.ui-keyboard-combo.ui-state-default {
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(213, 133, 18, 0.5);
+	        box-shadow: 1px 1px 3px 0 rgba(213, 133, 18, 0.5);
+	border-color: #d58512;
+}
+.ui-keyboard-button.ui-keyboard-combo.ui-state-active {
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(38, 154, 188, 0.5);
+	        box-shadow: 1px 1px 3px 0 rgba(38, 154, 188, 0.5);
+	border-color: #269abc;
+}
+/* (in)valid inputs */
+button.ui-keyboard-accept.ui-keyboard-valid-input {
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(57, 132, 57, 0.5);
+	        box-shadow: 1px 1px 3px 0 rgba(57, 132, 57, 0.5);
+	border-color: #398439;
+}
+button.ui-keyboard-accept.ui-keyboard-valid-input:not([disabled]):hover {
+	border-color: #4cae4c;
+}
+button.ui-keyboard-accept.ui-keyboard-invalid-input {
+	-webkit-box-shadow: 1px 1px 3px 0 rgba(172, 41, 37, 0.5);
+	        box-shadow: 1px 1px 3px 0 rgba(172, 41, 37, 0.5);
+	border-color: #ac2925;
+}
+button.ui-keyboard-accept.ui-keyboard-invalid-input:not([disabled]):hover {
+	border-color: #d43f3a;
+}
+/* unlocked icon (keyboard enabled) */
+button.ui-keyboard-toggle span {
+	width: .9em;
+	height: .9em;
+	display: inline-block;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: contain;
+	/* dark theme unlocked icon - fill: #eee */
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg==');
+}
+/* locked icon (keyboard disabled) */
+button.ui-keyboard-toggle.ui-keyboard-disabled span {
+	/* dark theme locked icon - fill: #eee */
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4=');
+}
+.ui-keyboard.ui-keyboard-disabled button:not(.ui-keyboard-toggle), .ui-keyboard.ui-keyboard-disabled input {
+	opacity: 0.5;
+}
+
+/*** Alt-Keys Popup extension ***/
+/* clickable overlay on top of keyboard to hide the popup */
+.ui-keyboard-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	background: rgba(0, 0, 0, 0.5);
+}
+/* the actual popup styling, class names from the css.container option are also added */
+.ui-keyboard-popup {
+	display: inline-block;
+	/* default buttons are 2em wide + .1em margin on either side (set in .ui-keyboard-button definition);
+	so use multiples of 2.2em	for a max-width if you don't want any extra white space on the sides,
+	e.g. 5 buttons * 2.2em = 11em, 6 buttons * 2.2em = 13.2em, etc */
+	max-width: 22em;
+	/* 10 buttons */
+}
+.ui-keyboard.ui-keyboard-popup-open .ui-keyboard-keyset .ui-keyboard-button {
+	/* Disable keys under overlay while popup is open - see #654 */
+	pointer-events: none;
+}
+
+/*** Caret extension definition ***/
+/* margin-top => is added to the caret height (top & bottom) */
+.ui-keyboard-caret {
+	background: #c00;
+	width: 1px;
+	margin-top: 3px;
+}
+
+/*** Extender keyboard extension ***/
+div.ui-keyboard-extender {
+	margin-left: 5px;
+	margin-right: 10px;
+}
+button.ui-keyboard-extender span {
+	width: .9em;
+	height: .9em;
+	display: inline-block;
+	margin-bottom: 3px;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: contain;
+	/* dark theme extender icon - fill: #eee */
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6I2VlZSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2VlZSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+');
+}

static/css/keyboard-previewkeyset.css

+/* basic previewKeyset setup - modify as desired */
+.ui-keyboard-keyset .ui-keyboard-button {
+	position: relative;
+}
+/* show mini-shift keyset with normal keyset */
+.ui-keyboard-keyset-normal .ui-keyboard-button::after {
+	content: attr(data-shift);
+	font-size: 0.6em;
+	color: #999;
+	position: absolute;
+	top: -1em;
+	left: 2px;
+	z-index: 200;
+}
+/* show mini-normal keyset with shift keyset */
+.ui-keyboard-keyset-shift .ui-keyboard-button::after {
+	content: attr(data-normal);
+	font-size: 0.6em;
+	color: #999;
+	position: absolute;
+	top: -1em;
+	left: 2px;
+	z-index: 200;
+}
+/* show mini-normal keyset with alt keyset */
+.ui-keyboard-keyset-alt .ui-keyboard-button::after {
+	content: attr(data-alt-shift);
+	font-size: 0.6em;
+	color: #999;
+	position: absolute;
+	top: -1em;
+	left: 2px;
+	z-index: 200;
+}
+/* show mini-alt-shift keyset with alt-shift keyset */
+.ui-keyboard-keyset-alt-shift .ui-keyboard-button::after {
+	content: attr(data-alt);
+	font-size: 0.6em;
+	color: #999;
+	position: absolute;
+	top: -1em;
+	left: 2px;
+	z-index: 200;
+}

static/js/jquery.keyboard.extension-autocomplete.js

+/*! jQuery UI Virtual Keyboard Autocomplete v1.11.4 *//*
+ * for Keyboard v1.18+ only (2018-01-10)
+ *
+ * By Rob Garrison (Mottie)
+ * Licensed under the MIT License
+ *
+ * Use this extension with the Virtual Keyboard to get
+ * the jQuery UI Autocomplete widget to work seamlessly
+ *
+ * Requires:
+ *  jQuery
+ *  jQuery UI & css
+ *  Keyboard plugin : https://github.com/Mottie/Keyboard
+ *
+ * Setup:
+ *  $('.ui-keyboard-input')
+ *   .keyboard(options)
+ *   .autocomplete(options)
+ *   .addAutoComplete();
+ *
+ *  // or if targeting a specific keyboard
+ *  $('#keyboard1')
+ *   .keyboard(options)     // keyboard plugin
+ *   .autocomplete(options) // jQuery UI autocomplete
+ *   .addAutoComplete();    // this keyboard extension
+ *
+ */
+/*jshint browser:true, jquery:true, unused:false */
+/*global require:false, define:false, module:false */
+;(function(factory) {
+	if (typeof define === 'function' && define.amd) {
+		define(['jquery'], factory);
+	} else if (typeof module === 'object' && typeof module.exports === 'object') {
+		module.exports = factory(require('jquery'));
+	} else {
+		factory(jQuery);
+	}
+}(function($) {
+'use strict';
+$.fn.addAutocomplete = function(options) {
+	var defaults = {
+		position : {
+			of : null,
+			my : 'right top',
+			at : 'left top',
+			collision: 'flip'
+		},
+		events: 'autocomplete',
+		data: ''
+	};
+
+	return this.each(function() {
+		// make sure a keyboard is attached
+		var o, namespace,
+			base = $(this).data('keyboard');
+
+		if (!base) { return; }
+
+		namespace = base.namespace + 'Autocomplete';
+		base.autocomplete_namespace = namespace;
+		base.extensionNamespace.push( namespace );
+
+		// Setup
+		base.autocomplete_init = function() {
+
+			// variables
+			o = base.autocomplete_options = $.extend( true, {}, defaults, options );
+			var events = o.events || o.data || 'autocomplete';
+
+			// visible event is fired before this extension is initialized, so check!
+			if (base.options.alwaysOpen && base.isVisible()) {
+				base.autocomplete_setup();
+			}
+
+			base.$el
+				.unbind(namespace)
+				.bind($.keyboard.events.kbVisible + namespace, function() {
+					base.autocomplete_setup();
+				})
+				.bind($.keyboard.events.kbHidden + namespace, function() {
+					base.$el[o.data || 'autocomplete']('close');
+				})
+				.bind($.keyboard.events.kbChange + namespace, function() {
+					if (base.hasAutocomplete && base.isVisible()) {
+						base.$el.val(base.$preview.val());
+					}
+				})
+				.bind(events + 'open' + namespace, function() {
+					if (base.hasAutocomplete) {
+						// default to $keyboard if no position.of defined
+						var position = $.extend( {}, o.position );
+						// refresh base.$keyboard (it gets destroyed after use); fixes #382
+						position.of = position.of || base.$keyboard;
+						// reposition autocomplete window next to the keyboard
+						base.$autocomplete.menu.element.position( position );
+					}
+				})
+				.bind(events + 'select' + namespace, function(e, ui) {
+					base.autocomplete_getVal(ui.item);
+				});
+		};
+
+		base.autocomplete_getVal = function(val) {
+			var v;
+			switch (typeof val) {
+				case 'string':
+					v = val || '';
+					break;
+				case 'object':
+					v = val.label || val.value || '';
+					break;
+				default:
+					v = base.preview && base.preview.value || base.el.value;
+			}
+			v = v.toString();
+			if (base.hasAutocomplete && v !== '') {
+				// fallback to original input if undefined, see #520
+				(base.$preview || base.$el)
+					.val( v )
+					.focus();
+				// see issue #95 - thanks banku!
+				base.last.start = v.length;
+				base.last.end = v.length;
+				base.last.val = v;
+			}
+		};
+
+		base.autocomplete_update = function(event) {
+			clearTimeout( base.$autocomplete.searching );
+			base.$autocomplete.searching = setTimeout(function() {
+				// only search if the value has changed
+				if ( base.$autocomplete.term !== base.$autocomplete.element.val() ) {
+					base.$autocomplete.selectedItem = null;
+					base.$autocomplete.search( null, event );
+				}
+			}, base.$autocomplete.options.delay );
+		};
+
+		base.autocomplete_navKeys = {
+			8: 'backSpace',
+			9: 'tab',
+			13: 'enter',
+			20: 'capsLock',
+			27: 'escape',
+			32: 'space',
+			33: 'pageup',
+			34: 'pagedown',
+			35: 'end',
+			36: 'home',
+			37: 'left',
+			38: 'up',
+			39: 'right',
+			40: 'down',
+			45: 'insert',
+			46: 'delete'
+		};
+
+		// set up after keyboard is visible
+		base.autocomplete_setup = function() {
+			var key;
+			// look for autocomplete
+			base.$autocomplete = base.$el.data(base.autocomplete_options.data) ||
+				// data changes based on jQuery UI version
+				base.$el.data('uiAutocomplete') ||
+				base.$el.data('ui-autocomplete') ||
+				base.$el.data('autocomplete');
+			base.hasAutocomplete = (typeof(base.$autocomplete) === 'undefined') ?
+				false : (base.$autocomplete.options.disabled) ? false : true;
+			// only bind to keydown once
+			if (base.hasAutocomplete) {
+				base.$preview.bind('keydown' + namespace + ' keypress' + namespace, function(event) {
+					// send keys to the autocomplete widget (arrow, pageup/down, etc)
+					if (base.$preview && event.namespace !== base.$autocomplete.eventNamespace) {
+						event.namespace = base.$autocomplete.eventNamespace.slice(1);
+						key = base.autocomplete_navKeys[event.which];
+						if (key) {
+							if (base.el !== base.preview) {
+								base.$el.triggerHandler(event);
+								if (key === 'enter') {
+									// update preview with the selected item
+									setTimeout(function(){
+										if (base.$autocomplete) {
+											base.$preview.val(base.$autocomplete.selectedItem.value);
+											base.$preview.focus();
+										}
+									}, 100);
+								}
+							}
+						} else {
+							// only search when a non-navigation key is pressed
+							base.autocomplete_update(event);
+						}
+					}
+				});
+				var events = 'mouseup mousedown mouseleave touchstart touchend touchcancel '
+					.split(' ')
+					.join(namespace + ' ');
+				base.bindButton(events, function(event) {
+					base.autocomplete_update(event);
+				});
+			}
+			if (!base.escCloseCallback.autocomplete) {
+				base.escCloseCallback.autocomplete = base.checkAutocompleteMenu;
+			}
+		};
+
+		base.checkAutocompleteMenu = function($target) {
+			// prevent selecting an item in autocomplete from closing keyboard
+			// return a "shouldStayOpen" boolean state for this extension
+			return base.hasAutocomplete &&
+				$target.closest('ul').hasClass('ui-autocomplete');
+		};
+
+		base.autocomplete_destroy = function() {
+			clearTimeout(base.$autocomplete.searching);
+			base.hasAutocomplete = false;
+			base.$el.unbind(namespace);
+			if (base.$preview) {
+				base.$preview.unbind(namespace);
+				base.unbindButton(namespace);
+			}
+			delete base.$autocomplete;
+		};
+
+		base.autocomplete_init();
+
+	});
+};
+
+}));

static/js/jquery.keyboard.extension-caret.js

+/*! jQuery UI Virtual Keyboard Virtual Caret v1.1.5 (beta) *//*
+ * for Keyboard v1.18+ only (2/20/2016)
+ * modified from https://github.com/component/textarea-caret-position
+ *
+ * By Rob Garrison (aka Mottie)
+ * Licensed under the MIT License
+ *
+ * CSS changes
+ * NOTE: caret margin-top => is added to the caret height (top & bottom)
+ * .ui-keyboard-preview-wrapper { position: relative; overflow: hidden; }
+ * .ui-keyboard-caret { background: red; width: 1px; margin-top: 3px; }
+ */
+/*jshint browser:true, jquery:true, unused:false */
+/*global require:false, define:false, module:false */
+;( function( factory ) {
+	if ( typeof define === 'function' && define.amd ) {
+		define( [ 'jquery' ], factory );
+	} else if ( typeof module === 'object' && typeof module.exports === 'object' ) {
+		module.exports = factory( require( 'jquery' ) );
+	} else {
+		factory( jQuery );
+	}
+}( function( $ ) {
+'use strict';
+	var $keyboard = $.keyboard;
+
+	$keyboard.firefox = typeof window.mozInnerScreenX !== 'undefined';
+
+	$.extend( $keyboard.css, {
+		caret : 'ui-keyboard-caret',
+		caretMirror : 'ui-keyboard-mirror-div'
+	});
+
+	$.fn.addCaret = function( options ) {
+		var defaults = {
+			caretClass : '',
+			// *** for future use ***
+			// data-attribute containing the character(s) next to the caret
+			charAttr   : 'data-character',
+			// # character(s) next to the caret (can be negative for RTL)
+			charIndex  : 1,
+			offsetX    : 0,
+			offsetY    : 0,
+			adjustHt   : 0
+		};
+		return this.each( function() {
+			// make sure a keyboard is attached
+			var o, namespace,
+				kbevents = $keyboard.events,
+				base = $( this ).data( 'keyboard' );
+			if ( !base ) { return; }
+
+			// variables
+			o = base.caret_options = $.extend( {}, defaults, options );
+			namespace = base.caret_namespace = base.namespace + 'caret';
+			base.extensionNamespace.push( namespace );
+
+			// modified from https://github.com/component/textarea-caret-position
+			// The properties that we copy into a mirrored div.
+			// Note that some browsers, such as Firefox,
+			// do not concatenate properties, i.e. padding-top, bottom etc. -> padding,
+			// so we have to do every single property specifically.
+			base.textareaCaretProperties = [
+				'direction', 'boxSizing', 'width', 'height', 'overflowX', 'overflowY',
+				'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderStyle',
+				'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+				'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'fontSizeAdjust',
+				'lineHeight', 'fontFamily', 'textAlign', 'textTransform', 'textIndent', 'textDecoration',
+				'letterSpacing', 'wordSpacing', 'tabSize', 'MozTabSize'
+			];
+
+			base.caret_setup = function() {
+				var kbcss = $keyboard.css,
+					events = 'keyup keypress mouseup mouseleave '.split( ' ' ).join( namespace + ' ' ),
+					style = 'position:absolute;visibility:hidden;top:-9999em;left:-9999em;' +
+						'white-space:pre-wrap;z-index:-10;' +
+						( base.preview.nodeName === 'INPUT' ? '' : 'word-wrap:break-word;' );
+				// add mirrored div
+				base.$keyboard.find( '.' + kbcss.caretMirror ).remove();
+				base.caret_$div = $( '<div class="' + kbcss.caretMirror + '" style="' + style + '">' )
+					.appendTo( base.$keyboard );
+
+				// remove caret, just-in-case
+				if (base.$caret) { base.$caret.remove(); }
+				base.$caret = $( '<div class="' + kbcss.caret + ' ' + o.caretClass + '" style="position:absolute;">' )
+					.insertAfter( base.$preview );
+
+				base.$el
+					.unbind( kbevents.kbChange + namespace )
+					.bind( kbevents.kbChange + namespace, function() {
+						base.findCaretPos();
+					});
+				base.$preview
+					.unbind( events )
+					.bind( events, function() {
+						base.findCaretPos();
+					});
+			};
+
+			// getCaretCoordinatesFn = function (element, position, recalculate) {
+			base.findCaretPos = function() {
+				if ( !base.caret_$div ) { return; }
+				var style, computed, margin, pos, position, txt, span, offset,
+					element = base.preview,
+					fontWidth = parseFloat( base.$preview.css('fontSize') ),
+					isInput = element.nodeName === 'INPUT',
+					div = base.caret_$div[0];
+
+				style = div.style;
+				// getComputedStyle with null - fixes #384
+				computed = window.getComputedStyle ? getComputedStyle( element, null ) : element.currentStyle;
+				// get caret position based on text-direction
+				pos = $keyboard.caret( base.$preview );
+				position = Math[ computed.direction === 'ltr' ? 'max' : 'min' ]( pos.start, pos.end );
+
+				// transfer the element's properties to the div
+				base.textareaCaretProperties.forEach(function ( prop ) {
+					style[ prop ] = computed[ prop ];
+				});
+
+				if ( $keyboard.firefox ) {
+					// Firefox adds 2 pixels to the padding - https://bugzilla.mozilla.org/show_bug.cgi?id=753662
+					style.width = parseInt( computed.width, 10 ) - 2 + 'px';
+					// Firefox lies about the overflow property for textareas:
+					// https://bugzilla.mozilla.org/show_bug.cgi?id=984275
+					if ( element.scrollHeight > parseInt( computed.height, 10 ) ) {
+						style.overflowY = 'scroll';
+					}
+				}
+
+				// for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
+				// style.overflow = 'hidden';
+				style.width = parseInt( isInput ? element.scrollWidth : computed.width, 10 ) +
+					// add 2em extra width if it's an input to prevent wrap
+					( isInput ? fontWidth * 2 : 0 ) + 'px';
+
+				div.textContent = element.value.substring( 0, position );
+				// the second special handling for input type="text" vs textarea:
+				// spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
+				if ( element.nodeName === 'INPUT' ) {
+					div.textContent = div.textContent.replace( /\x20/g, '\xa0' );
+				}
+
+				span = document.createElement( 'span' );
+				// Wrapping must be replicated *exactly*, including when a long word gets
+				// onto the next line, with whitespace at the end of the line before (#7).
+				// The *only* reliable way to do that is to copy the *entire* rest of the
+				// textarea's content into the <span> created at the caret position.
+				// for inputs, just '.' would be enough, but why bother?
+				// || because a completely empty faux span doesn't render at all
+				// changed to zero-width space due to inaccuracy when textAlign = center; see #436
+				span.textContent = element.value.substring( position ) || '\u200b';
+				div.appendChild( span );
+
+				offset = $(span).position();
+
+				// adjust for 2em added to width moves caret, use half; see #436
+				pos = style.textAlign === 'center' ? fontWidth : 0;
+
+				base.caretPos = {
+					top: offset.top + parseInt( computed.borderTopWidth, 10 ) + o.offsetY,
+					left: offset.left + parseInt( computed.borderLeftWidth, 10 ) + o.offsetX - pos
+				};
+
+				// make caret height = font-size + any margin-top x2 added by the css
+				margin = parseInt( base.$caret.css( 'margin-top' ), 10 );
+				style = Math.round( fontWidth + margin * 2 ) + o.adjustHt;
+				offset = base.$preview.position();
+
+				base.$caret.css({
+					top: offset.top - element.scrollTop + base.caretPos.top - margin,
+					left: offset.left - element.scrollLeft + base.caretPos.left,
+					height: style
+				});
+				txt = element.value.substring( position, position + o.charIndex ).replace(/\s/, '\xa0' ) || '\xa0';
+				base.$caret.attr( o.charAttr, txt );
+			};
+
+			// setup caret when keyboard is visible
+			base.$el
+				.unbind( namespace )
+				.bind( kbevents.kbBeforeVisible + namespace, function() {
+					base.caret_setup();
+				})
+				.bind( kbevents.kbVisible + namespace, function() {
+					base.findCaretPos();
+				})
+				.bind( kbevents.kbHidden + namespace, function() {
+					// unbind events in case usePreview: false; see #376
+					var events = 'keyup keypress mouseup mouseleave '.split( ' ' ).join( namespace + ' ' );
+					base.$preview.unbind( events );
+					base.$caret.remove();
+					base.$caret = null;
+					base.caret_$div = null;
+				});
+
+			// visible event is fired before this extension is initialized, so check!
+			if ( base.options.alwaysOpen && base.isVisible() ) {
+				base.caret_setup();
+				base.findCaretPos();
+			}
+
+		});
+	};
+
+}));

static/js/jquery.keyboard.extension-extender.js

+/*! jQuery UI Virtual Keyboard Extender v1.0.3 *//*
+ * for Keyboard v1.18+ only (12/5/2015)
+ *
+ * By Rob Garrison (aka Mottie)
+ * Licensed under the MIT License
+ *
+*/
+/*jshint browser:true, jquery:true, unused:false */
+/*global require:false, define:false, module:false */
+;( function( factory ) {
+	if ( typeof define === 'function' && define.amd ) {
+		define( [ 'jquery' ], factory );
+	} else if ( typeof module === 'object' && typeof module.exports === 'object' ) {
+		module.exports = factory( require( 'jquery' ) );
+	} else {
+		factory( jQuery );
+	}
+}( function( $ ) {
+'use strict';
+
+	var $keyboard = $.keyboard;
+
+	$keyboard.css.extender = 'ui-keyboard-extender';
+	$keyboard.language.en.display.extender = ' :toggle_numpad';
+
+	$keyboard.layouts.numpad = {
+		'normal' : [
+			'{clear} / * -',
+			'7 8 9 +',
+			'4 5 6 %',
+			'1 2 3 =',
+			'0 {dec} {left} {right}'
+		]
+	};
+
+	// add {extender} keyaction
+	$keyboard.keyaction.extender = function( base ) {
+		base.extender_toggle();
+		return false;
+	};
+
+	$.fn.addExtender = function(options) {
+		//Set the default values, use comma to separate the settings, example:
+		var defaults = {
+			layout     : 'numpad',
+			showing    : false,
+			reposition : true
+		};
+		return this.each( function() {
+			var base = $( this ).data( 'keyboard' );
+
+			// make sure a keyboard is attached
+			if ( !base ) { return; }
+
+			// variables
+			base.extender_options = $.extend(
+				{},
+				defaults,
+				base.extender_options, // restore prev options on layout update
+				options
+			);
+
+			// already initialized & switching layouts
+			if ( base.extender_namespace ) {
+				return base.extender_layoutSwitcher();
+			}
+
+			base.extender_namespace = base.namespace + 'extender';
+			base.extensionNamespace.push( base.extender_namespace );
+
+			base.extender_layoutSwitcher = function() {
+				base.extender_lastKeyset = base.last.keyset;
+				base.extender_bindEvents( false );
+				base.$el.one( $keyboard.events.kbBeforeVisible, function() {
+					// preserve active keysets; redraw resets them - see #510
+					base.shiftActive = base.extender_lastKeyset[ 0 ];
+					base.altActive = base.extender_lastKeyset[ 1 ];
+					base.metaActive = base.extender_lastKeyset[ 2 ];
+					base.showKeySet();
+					base.extender_setup();
+					base.extender_bindEvents();
+				});
+				base.redraw();
+			};
+
+			base.extender_bindEvents = function( bind ) {
+				var event = $keyboard.events.kbBeforeVisible + base.extender_namespace;
+				// setup extender
+				base.$el.unbind( event );
+				if ( bind !== false ) {
+					base.$el.bind( event, function() {
+						base.extender_setup();
+					});
+				}
+			};
+
+			base.extender_setup = function() {
+				var $extender,
+					layout = base.extender_options.layout;
+				if ( typeof $keyboard.builtLayouts[ layout ] === 'undefined' ) {
+					base.buildKeyboard( layout );
+				}
+				$extender = $keyboard.builtLayouts[ layout ].$keyboard
+					// only use the "normal" layout in the extender
+					.find( '.' + $keyboard.css.keySet + '-normal' )
+					.clone();
+				$extender
+					.removeClass()
+					.removeAttr( 'name' )
+					.addClass( $keyboard.css.extender )
+					.children( 'button' )
+					.removeAttr( 'data-pos' );
+
+				// show extender using inline-block - allows the removal of css float
+				$extender[ 0 ].style.display = base.extender_options.showing ?
+					'inline-block' :
+					'none';
+
+				// remove previous extender... just-in-case
+				base.$keyboard.find( 'div.' + $keyboard.css.extender ).remove();
+				base.$keyboard.append( $extender );
+				base.extender_toggle( base.extender_options.showing );
+				base.bindKeys();
+			};
+
+			base.extender_toggle = function( set ) {
+				base.extender_options.showing = typeof set === 'undefined' ?
+					!base.extender_options.showing : set;
+				base.$keyboard
+					.find( 'button.' + $keyboard.css.extender )
+					.toggleClass(
+						base.options.css.buttonActive,
+						base.extender_options.showing
+					)
+					.end()
+					.find( 'div.' + $keyboard.css.extender )[ 0 ].style.display =
+						base.extender_options.showing ? 'inline-block' : 'none';
+
+				// force keyboard reposition
+				if ( base.extender_options.reposition ) {
+					$( window ).trigger( 'resize' );
+				}
+			};
+
+			// visible event is fired before this extension is initialized, so check!
+			if ( base.options.alwaysOpen && base.isVisible() ) {
+				base.extender_setup();
+			}
+
+			base.extender_bindEvents();
+
+		});
+	};
+
+}));

static/js/jquery.keyboard.extension-mobile.js

+/*! jQuery UI Virtual Keyboard for jQuery Mobile Themes v1.4.1 *//*
+ * for Keyboard v1.18+ (updated 7/7/2015)
+ *
+ * By Rob Garrison (aka Mottie & Fudgey)
+ * Licensed under the MIT License
+ *
+ * Use this extension with the Virtual Keyboard to apply
+ * the necessary themes to make the keyboard compatible with
+ * jQuery Mobile themes
+ *
+ * Requires:
+ *  jQuery - http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
+ *  jQuery Mobile - http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js
+ *  jQuery Mobile themes -  http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css
+ *
+ * Setup:
+ *  $('.ui-keyboard-input')
+ *   .keyboard(options)
+ *   .addMobile(mobile-options);
+ *
+ *  // or if targeting a specific keyboard
+ *  $('#keyboard1')
+ *   .keyboard(options)     // keyboard plugin
+ *   .addMobile(mobile-options);    // this keyboard extension
+ *
+ */
+/*jshint browser:true, jquery:true, unused:false */
+/*global require:false, define:false, module:false */
+;(function(factory) {
+	if (typeof define === 'function' && define.amd) {
+		define(['jquery'], factory);
+	} else if (typeof module === 'object' && typeof module.exports === 'object') {
+		module.exports = factory(require('jquery'));
+	} else {
+		factory(jQuery);
+	}
+}(function($) {
+$.fn.addMobile = function(options){
+
+	var o, defaults = {
+		// keyboard wrapper theme
+		container    : { theme:'b', cssClass:'ui-body' },
+		// keyboard duplicate input
+		input        : { theme:'b', cssClass:'' },
+		// theme added to all regular buttons
+		buttonMarkup : { theme:'b', cssClass:'ui-btn', shadow:'true', corners:'true' },
+		// theme added to all buttons when they are being hovered
+		buttonHover  : { theme:'b', cssClass:'ui-btn-hover' },
+		// theme added to action buttons (e.g. tab, shift, accept, cancel);
+		// parameters here will override the settings in the buttonMarkup
+		buttonAction : { theme:'b', cssClass:'ui-btn-active' },
+		// theme added to button when it is active (e.g. shift is down)
+		// All extra parameters will be ignored
+		buttonActive : { theme:'b', cssClass:'ui-btn-active' },
+		// if more than 3 mobile themes are used, add them here
+		allThemes : 'a b c'
+	};
+
+	return this.each(function(){
+		var base = $(this).data('keyboard');
+
+		// Stop if no keyboard attached or if jQuery Mobile isn't loaded
+		if (!base || typeof($.fn.textinput) === 'undefined') { return; }
+
+		base.mobile_options = o = $.extend(true, {}, defaults, options);
+		// create a list of theme class names to remove
+		base.mobile_themes = $.trim(
+			(' ' + o.allThemes).split(' ').join(' ' + o.buttonMarkup.cssClass + '-') +
+			(' ' + o.allThemes).split(' ').join(' ' + o.buttonAction.cssClass + '-') +
+			(' ' + o.allThemes).split(' ').join(' ' + o.buttonActive.cssClass + '-')
+		);
+
+		// save original action class because it gets removed when this theme switches swatches
+		if (typeof base.options.mobile_savedActiveClass === 'undefined') {
+			base.options.mobile_savedActiveClass = '' + base.options.css.buttonActive;
+		}
+
+		// Setup
+		base.mobile_init = function() {
+
+			var namespace = base.namespace + 'Mobile';
+
+			// Add theme to input - if not already done through the markup
+			$('.' + $.keyboard.css.input).textinput();
+
+			// visible event is fired before this extension is initialized, so check!
+			if (base.options.alwaysOpen && base.isVisible) {
+				base.mobile_setup();
+			}
+
+			base.extensionNamespace.push( namespace );
+
+			// Setup mobile theme on keyboard once it is visible.
+			// Note: There is a 10ms delay after the keyboard is displayed before it actually fires 'visible.keyboard'.
+			// Since we are restyling here, the user will experience FlashOfUnstyledContent (FOUC).
+			// This is avoided by first setting the visibility to hidden, then after the mobile styles are applied we
+			// set it visible.
+			base.$el
+				.unbind(namespace)
+				.bind($.keyboard.events.kbBeforeVisible + namespace, function() {
+					if ( base && base.el.active && base.$keyboard.length ) {
+						base.$keyboard.css('visibility', 'hidden');
+					}
+				})
+				.bind($.keyboard.events.kbVisible + namespace, function() {
+					if ( base && base.el.active && base.$keyboard.length ) {
+						base.mobile_setup();
+						base.$keyboard.css('visibility', 'visible');
+						base.$preview.focus();
+					}
+				});
+
+		};
+
+		base.mobile_setup = function(){
+			var p,
+				kbcss = $.keyboard.css,
+				opts = base.options,
+				themes = base.mobile_themes;
+
+			base.mobile_$actionKeys = base.$keyboard.find('.' + base.options.css.buttonAction);
+
+			opts.css.buttonActive = opts.mobile_savedActiveClass + ' ' + base.modOptions(o.buttonActive, o.buttonMarkup);
+
+			base.$keyboard
+				// 'ui-body ui-body-a' classes to apply swatch theme
+				.addClass( base.modOptions(o.container, o.container) )
+				// preview input
+				.find('.' + kbcss.preview)
+				// removing 'ui-widget-content' will prevent jQuery UI theme from applying to the keyboard
+				.removeClass('ui-widget ui-widget-content')
+				.addClass( base.modOptions(o.input, o.input) ).end()
+				// apply jQuery Mobile button markup
+				// removed call to jQuery Mobile buttonMarkup function; replaced with base.modOptions
+				.find('button')
+				.removeClass( $.trim('ui-corner-all ui-state-default ' + themes) )
+				.addClass( base.modOptions(o.buttonMarkup, o.buttonMarkup) )
+				.not( base.mobile_$actionKeys )
+				.hover(function(){
+					$(this)
+						.removeClass( themes )
+						.addClass( base.modOptions(o.buttonHover, o.buttonMarkup) );
+				},function(){
+					$(this)
+						.removeClass( themes + ' ' + o.buttonHover.cssClass )
+						.addClass( base.modOptions(o.buttonMarkup, o.buttonMarkup) );
+				});
+
+				base.mobile_$actionKeys
+					.removeClass( themes )
+					.addClass( base.modOptions(o.buttonAction, o.buttonMarkup) );
+
+			// update keyboard width if preview is showing... after applying mobile theme
+			if (base.msie && base.$preview[0] !== base.el) {
+				base.$preview.hide();
+				base.$keyboard.css('width','');
+				base.width = base.$keyboard.outerWidth();
+				// add about 1em to input width for extra padding
+				base.$keyboard.width(base.width + parseInt(base.$preview.css('fontSize'),10));
+				base.$preview.width(base.width);
+				base.$preview.show();
+			}
+
+			// adjust keyboard position after applying mobile theme
+			if ($.ui && $.ui.position) {
+				p = opts.position;
+				p.of = p.of || base.$el.data('keyboardPosition') || base.$el;
+				p.collision = p.collision || 'flipfit flipfit';
+				base.$keyboard.position(p);
+			}
+
+		};
+
+		base.modOptions = function(t, btn){
+			var css = ' ' + ( t.cssClass || '' );
+			// Using this instead of the jQuery Mobile buttonMarkup because it is expecting <a>'s instead of <button>
+			// theme:'a', shadow:'true', inline:'true', corners:'false'
+			return css + ' ' + (btn && btn.cssClass ? btn.cssClass + '-' + (t.theme || '') : '') +
+				(t.shadow == 'true' ? ' ui-shadow' : '') + // eslint-disable-line eqeqeq
+				(t.corners == 'true' ? ' ui-corner-all' : ''); // eslint-disable-line eqeqeq
+		};
+
+		base.mobile_init();
+
+	});
+};
+
+}));

static/js/jquery.keyboard.extension-navigation.js

+/*! jQuery UI Virtual Keyboard Navigation v1.7.0 *//*
+ * for Keyboard v1.18+ only (updated 2019-05-02)
+ *
+ * By Rob Garrison (aka Mottie & Fudgey)
+ * Licensed under the MIT License
+ *
+ * Use this extension with the Virtual Keyboard to navigate
+ * the virtual keyboard keys using the arrow, page, home and end keys
+ * Using this extension WILL prevent keyboard navigation inside of all
+ * input and textareas
+ *
+ * Requires:
+ *  jQuery
+ *  Keyboard plugin : https://github.com/Mottie/Keyboard
+ *
+ * Setup:
+ *  $('.ui-keyboard-input')
+ *   .keyboard(options)
+ *   .addNavigation();
+ *
+ *  // or if targeting a specific keyboard
+ *  $('#keyboard1')
+ *   .keyboard(options)     // keyboard plugin
+ *   .addNavigation();    // this keyboard extension
+ *
+ */
+/*jshint browser:true, jquery:true, unused:false */
+/*global require:false, define:false, module:false */
+;(function(factory) {
+	if (typeof define === 'function' && define.amd) {
+		define(['jquery'], factory);
+	} else if (typeof module === 'object' && typeof module.exports === 'object') {
+		module.exports = factory(require('jquery'));
+	} else {
+		factory(jQuery);
+	}
+}(function($) {
+'use strict';
+$.keyboard = $.keyboard || {};
+
+$.keyboard.navigationKeys = {
+	// all keys
+	toggle     : 112, // toggle key; F1 = 112 (event.which value for function 1 key)
+	enter      : 13,
+	pageup     : 33,
+	pagedown   : 34,
+	end        : 35,
+	home       : 36,
+	left       : 37,
+	up         : 38,
+	right      : 39,
+	down       : 40,
+	// move caret WITH navigate toggle active
+	caretrt    : 45, // Insert key
+	caretlt    : 46, // delete key
+
+	// ** custom navigationKeys functions **
+	// move caret without navigate toggle active
+	caretright : function(kb) {
+		$.keyboard.keyaction.right(kb);
+	},
+	caretleft : function(kb) {
+		$.keyboard.keyaction.left(kb);
+	}
+
+};
+
+$.fn.addNavigation = function(options) {
+	return this.each(function() {
+		// make sure a keyboard is attached
+		var o, k,
+			base = $(this).data('keyboard'),
+			opts = base.options,
+			defaults = {
+				position   : [0,0],     // set start position [row-number, key-index]
+				toggleMode : false,     // true = navigate the virtual keyboard, false = navigate in input/textarea
+				focusClass : 'hasFocus',// css class added when toggle mode is on
+				toggleKey  : null,      // defaults to $.keyboard.navigationKeys.toggle value
+				rowLooping : false      // when you are at the left end position and hit the left cursor, you will appear at the other end
+			},
+			kbevents = $.keyboard.events,
+			kbcss = $.keyboard.css;
+
+		if (!base) { return; }
+
+		base.navigation_options = o = $.extend({}, defaults, options);
+		base.navigation_keys = k = $.extend({}, $.keyboard.navigationKeys);
+		base.navigation_namespace = base.namespace + 'Nav';
+		base.extensionNamespace.push( base.navigation_namespace );
+
+		// save navigation settings - disabled when the toggled
+		base.saveNav = [ base.options.tabNavigation, base.options.enterNavigation ];
+		base.allNavKeys = $.map(k, function(v) { return v; });
+
+		// Setup
+		base.navigation_init = function() {
+			base.$keyboard.toggleClass(o.focusClass, o.toggleMode)
+				.find('.' + kbcss.keySet + ':visible')
+				.find('.' + kbcss.keyButton + '[data-pos="' + o.position[0] + ',' + o.position[1] + '"]')
+				.addClass(opts.css.buttonHover);
+
+			base.$preview
+				.unbind(base.navigation_namespace)
+				.bind('keydown' + base.navigation_namespace,function(e) {
+					return base.checkKeys(e.which);
+				});
+
+		};
+
+		base.checkKeys = function(key, disable) {
+			if (typeof(key) === 'undefined' || !base.isVisible()) {
+				return;
+			}
+			var k = base.navigation_keys;
+			if (key === ( o.toggleKey || k.toggle ) || disable) {
+				o.toggleMode = (disable) ? false : !o.toggleMode;
+				base.options.tabNavigation = (o.toggleMode) ? false : base.saveNav[0];
+				base.options.enterNavigation = (o.toggleMode) ? false : base.saveNav[1];
+			}
+			base.$keyboard.toggleClass(o.focusClass, o.toggleMode);
+			if ( o.toggleMode && key === k.enter ) {
+				base.$keyboard
+					.find('.' + kbcss.keySet + ':visible')
+					.find('.' + kbcss.keyButton + '[data-pos="' + o.position[0] + ',' + o.position[1] + '"]')
+					.trigger(kbevents.kbRepeater);
+				return false;
+			}
+			if ( o.toggleMode && $.inArray(key, base.allNavKeys) >= 0 ) {
+				base.navigateKeys(key);
+				return false;
+			}
+		};
+
+		base.getMaxIndex = function(vis, row) {
+			return vis.find('.' + kbcss.keyButton + '[data-pos^="' + row + ',"]').length - 1;
+		};
+
+		base.leftNavigateKey = function(indx, maxIndx) {
+			var rowLooping = base.navigation_options.rowLooping;
+			var newIndx = indx - 1;
+			return newIndx >= 0 ? newIndx :
+				rowLooping ? maxIndx : 0 ;
+		};
+
+		base.rightNavigateKey = function(indx, maxIndx) {
+			var rowLooping = base.navigation_options.rowLooping;
+			var newIndx = indx + 1;
+			return newIndx <= maxIndx ? newIndx :
+				rowLooping ? 0 : maxIndx ;
+		};
+
+		base.navigateKeys = function(key, row, indx) {
+			if (!base.isVisible()) {
+				return;
+			}
+			indx = typeof indx === 'number' ? indx : o.position[1];
+			row = typeof row === 'number' ? row : o.position[0];
+			var nextMaxIndx,
+				vis = base.$keyboard.find('.' + kbcss.keySet + ':visible'),
+				maxRow = vis.find('.' + kbcss.endRow).length - 1,
+				maxIndx = base.getMaxIndex(vis, row),
+				p = base.last,
+				l = base.$preview.val().length,
+				k = base.navigation_keys;
+
+			switch(key) {
+				case k.pageup   : row = 0; break; // pageUp
+				case k.pagedown : row = maxRow; break; // pageDown
+				case k.end      : indx = maxIndx; break; // End
+				case k.home     : indx = 0; break; // Home
+				case k.left     : indx = base.leftNavigateKey(indx, maxIndx); break; // Left
+				case k.up       :
+					row += (row > 0) ? -1 : 0;
+					nextMaxIndx = base.getMaxIndex(vis, row);
+					indx = indx === maxIndx ? nextMaxIndx : indx;
+					break; // Up
+				case k.right    : indx = base.rightNavigateKey(indx, maxIndx); break; // Right
+				case k.down     :
+					row += (row + 1 > maxRow) ? 0 : 1;
+					nextMaxIndx = base.getMaxIndex(vis, row);
+					indx = indx === maxIndx ? nextMaxIndx : indx;
+					break; // Down
+				case k.caretrt  : p.start++; break; // caret right
+				case k.caretlt  : p.start--; break; // caret left
+			}
+
+			// move caret
+			if (key === k.caretrt || key === k.caretlt) {
+				p.start = p.start < 0 ? 0 : p.start > l ? l : p.start;
+				base.last.start = base.last.end = p.end = p.start;
+				$.keyboard.caret( base.$preview, base.last );
+			}
+
+			// get max index of new row
+			maxIndx = base.getMaxIndex(vis, row);
+			if (indx > maxIndx) { indx = maxIndx; }
+
+			vis.find('.' + opts.css.buttonHover).removeClass(opts.css.buttonHover);
+			vis.find('.' + kbcss.keyButton + '[data-pos="' + row + ',' + indx + '"]').addClass(opts.css.buttonHover);
+			o.position = [ row, indx ];
+		};
+
+		// visible event is fired before this extension is initialized, so check!
+		if (base.options.alwaysOpen && base.isVisible()) {
+			base.$keyboard.find('.' + opts.css.buttonHover).removeClass(opts.css.buttonHover);
+			base.navigation_init();
+		}
+		// navigation bindings
+		base.$el
+			.unbind(base.navigation_namespace)
+			.bind(kbevents.kbVisible, function() {
+				base.$keyboard.find('.' + opts.css.buttonHover).removeClass(opts.css.buttonHover);
+				base.navigation_init();
+			})
+			.bind(kbevents.kbInactive + ' ' + kbevents.kbHidden, function(e) {
+				base.checkKeys(e.which, true); // disable toggle mode & revert navigation options
+			})
+			.bind(kbevents.kbKeysetChange, function() {
+				base.navigateKeys(null);
+			})
+			.bind('navigate navigateTo', function(e, row, indx) {
+				var key;
+				// no row given, check if it's a navigation key or keyaction
+				row = isNaN(row) ? row.toLowerCase() : row;
+				if (row in base.navigation_keys) {
+					key = base.navigation_keys[row];
+					if (isNaN(key) && key in $.keyboard.keyaction) {
+						// defined navigation_keys string name is a defined keyaction
+						$.keyboard.keyaction[key]( base, this, e );
+					} else if (typeof key === 'function') {
+						// custom function defined in navigation_keys
+						key(base);
+					} else {
+						// key (e.which value) is defined in navigation_keys
+						base.checkKeys(key);
+					}
+				} else if ( typeof row === 'string' && row in $.keyboard.keyaction ) {
+					// navigate called directly with a keyaction name
+					$.keyboard.keyaction[row]( base, this, e );
+				} else {
+					base.navigateKeys(null, row, indx);
+				}
+			});
+
+	});
+};
+
+}));

static/js/jquery.keyboard.extension-previewkeyset.js

+/*! jQuery UI Virtual Keyboard previewKeyset v1.1.1 *//*
+ * for Keyboard v1.18+ only (updated 7/7/2015)
+ *
+ * By Rob Garrison (aka Mottie & Fudgey)
+ * Licensed under the MIT License
+ *
+ * Use this extension with the Virtual Keyboard to add a preview
+ * of other keysets to the main keyboard.
+ *
+ * Requires:
+ *  jQuery
+ *  Keyboard plugin : https://github.com/Mottie/Keyboard
+ *
+ * Setup:
+ *  $('.ui-keyboard-input')
+ *   .keyboard(options)
+ *   .previewKeyset();
+ *
+ *  // or if targeting a specific keyboard
+ *  $('#keyboard1')
+ *   .keyboard(options)     // keyboard plugin
+ *   .previewKeyset();    // this keyboard extension
+ *
+ */
+/* jshint browser:true, jquery:true, unused:false */
+/* global require:false, define:false, module:false */
+;(function(factory) {
+	if (typeof define === 'function' && define.amd) {
+		define(['jquery'], factory);
+	} else if (typeof module === 'object' && typeof module.exports === 'object') {
+		module.exports = factory(require('jquery'));
+	} else {
+		factory(jQuery);
+	}
+}(function($) {
+'use strict';
+$.keyboard = $.keyboard || {};
+
+$.fn.previewKeyset = function( options ) {
+	return this.each( function() {
+		// make sure a keyboard is attached
+		var base = $( this ).data( 'keyboard' ),
+			namespace = base.namespace + 'Preview',
+			defaults = {
+				sets : [ 'normal', 'shift', 'alt', 'alt-shift' ]
+			};
+
+		if ( !base ) { return; }
+
+		base.previewKeyset_options = $.extend( {}, defaults, options );
+		base.extensionNamespace.push( namespace );
+
+		base.previewKeyset = function() {
+			var kbcss = $.keyboard.css,
+				sets = base.previewKeyset_options.sets,
+				// only target option defined sets
+				$sets = base.$keyboard.find( '.' + kbcss.keySet ).filter( '[name="' + sets.join('"],[name="') + '"]' );
+			if ( $sets.length > 1 ) {
+				// start with normal keyset & find all non-action buttons
+				$sets.eq( 0 ).find( '.' + kbcss.keyButton ).not( '.' + kbcss.keyAction ).each(function(){
+					var indx, nam,
+						data = {},
+						len = sets.length,
+						// find all keys with the same position
+						$sibs = $sets.find( 'button[data-pos="' + $(this).attr('data-pos') + '"]' );
+					for ( indx = 0; indx < len; indx++ ) {
+						nam = $sibs.eq( indx ).parent().attr( 'name' );
+						if ( $.inArray( nam, sets ) >= 0 ) {
+							data[ 'data-' + nam ] = $sibs.eq( indx ).find( '.' + kbcss.keyText ).text();
+						}
+					}
+					$sibs.attr( data );
+				});
+			}
+		};
+
+		// visible event is fired before this extension is initialized, so check!
+		if (base.options.alwaysOpen && base.isVisible()) {
+			base.previewKeyset();
+		} else {
+			base.$el
+				.unbind($.keyboard.events.kbBeforeVisible + namespace)
+				.bind($.keyboard.events.kbBeforeVisible + namespace, function() {
+					base.previewKeyset();
+				});
+		}
+
+	});
+};
+
+}));

templates/demo.html

+
+<html>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
+    <script src="../static/js/jquery.keyboard.js"></script>
+    <link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
+    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
+    <link href="../static/css/keyboard.css" rel="stylesheet">
+
+    <body>
+        <div>
+            <input id="keyboard" type="text">
+        </div>
+
+        <script>
+            $(function(){
+                $('#keyboard').keyboard();
+            });
+        </script>
+    </body>
+</html>