Virtual keyboard in any text fields

#1

is it possible todisplay a virtual keyboard in any textfields ?

0 Likes

#2

@hathemi - please don't post a question in one thread and then open a new thread with the same question, you won't get an answer any faster and it might cause people to ignore you...

1 Like

#3

ok, i'am so sorry. i won't do that again.

0 Likes

#4

In the case that you want to prompt the forum in case there is someone who can help who maybe was too busy at the time and then forgot about you then the thing to do is to add another post to the first one, after waiting at least a couple of days. There is no need to do that now of course for this thread.
If no-one replies after that then it is most likely that no-one here knows the answer.

1 Like

#5

ok i understand. thanks

0 Likes

#6

Hi @hathemi
Here's a virtual keyboard based on https://github.com/javidan/jkeyboard

[
    {
        "id": "2719d4b8.7ae56c",
        "type": "ui_template",
        "z": "1f6b105a.a3f8d",
        "group": "5630af15.e02d5",
        "name": "Virtual Keyboard",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<script>\n    \n// the semi-colon before function invocation is a safety net against concatenated\n// scripts and/or other plugins which may not be closed properly.\n; (function ($, window, document, undefined) {\n\n    // undefined is used here as the undefined global variable in ECMAScript 3 is\n    // mutable (ie. it can be changed by someone else). undefined isn't really being\n    // passed in so we can ensure the value of it is truly undefined. In ES5, undefined\n    // can no longer be modified.\n\n    // window and document are passed through as local variable rather than global\n    // as this (slightly) quickens the resolution process and can be more efficiently\n    // minified (especially when both are regularly referenced in your plugin).\n\n    // Create the defaults once\n    var pluginName = \"jkeyboard\",\n        defaults = {\n            layout: \"english\",\n            input: $('#input'),\n            customLayouts: {\n                selectable: []\n            },\n        };\n\n\n    var function_keys = {\n        backspace: {\n            text: 'DEL',\n        },\n        return: {\n            text: 'Enter'\n        },\n        shift: {\n            text: 'Shift'\n        },\n        space: {\n            text: 'Space'\n        },\n        numeric_switch: {\n            text: '123',\n            command: function () {\n                this.createKeyboard('numeric');\n                this.events();\n            }\n        },\n        layout_switch: {\n            text: 'ALT',\n            command: function () {\n                var l = this.toggleLayout();\n                this.createKeyboard(l);\n                this.events();\n            }\n        },\n        character_switch: {\n            text: 'ABC',\n            command: function () {\n                this.createKeyboard(layout);\n                this.events();\n            }\n        },\n        symbol_switch: {\n            text: '#+=',\n            command: function () {\n                this.createKeyboard('symbolic');\n                this.events();\n            }\n        }\n    };\n\n\n    var layouts = {\n        selectable: ['azeri', 'english', 'russian'],\n        azeri: [\n            ['q', 'ü', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'ö', 'ğ'],\n            ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'ı', 'ə'],\n            ['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'ç', 'ş', 'backspace'],\n            ['numeric_switch', 'layout_switch', 'space', 'return']\n        ],\n        english: [\n            ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',],\n            ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',],\n            ['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'backspace'],\n            ['numeric_switch', 'layout_switch', 'space', 'return']\n        ],\n        russian: [\n            ['й', 'ц', 'у', 'к', 'е', 'н', 'г', 'ш', 'щ', 'з', 'х'],\n            ['ф', 'ы', 'в', 'а', 'п', 'р', 'о', 'л', 'д', 'ж', 'э'],\n            ['shift', 'я', 'ч', 'с', 'м', 'и', 'т', 'ь', 'б', 'ю', 'backspace'],\n            ['numeric_switch', 'layout_switch', 'space', 'return']\n        ],\n        numeric: [\n            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],\n            ['-', '/', ':', ';', '(', ')', '$', '&', '@', '\"'],\n            ['symbol_switch', '.', ',', '?', '!', \"'\", 'backspace'],\n            ['character_switch', 'layout_switch', 'space', 'return'],\n        ],\n        numbers_only: [\n            ['1', '2', '3',],\n            ['4', '5', '6',],\n            ['7', '8', '9',],\n            ['0', 'return', 'backspace'],\n        ],\n        symbolic: [\n            ['[', ']', '{', '}', '#', '%', '^', '*', '+', '='],\n            ['_', '\\\\', '|', '~', '<', '>'],\n            ['numeric_switch', '.', ',', '?', '!', \"'\", 'backspace'],\n            ['character_switch', 'layout_switch', 'space', 'return'],\n\n        ]\n    }\n\n    var shift = false, capslock = false, layout = 'english', layout_id = 0;\n\n    // The actual plugin constructor\n    function Plugin(element, options) {\n        this.element = element;\n        // jQuery has an extend method which merges the contents of two or\n        // more objects, storing the result in the first object. The first object\n        // is generally empty as we don't want to alter the default options for\n        // future instances of the plugin\n        this.settings = $.extend({}, defaults, options);\n        // Extend & Merge the cusom layouts\n        layouts = $.extend(true, {}, this.settings.customLayouts, layouts);\n        if (Array.isArray(this.settings.customLayouts.selectable)) {\n            $.merge(layouts.selectable, this.settings.customLayouts.selectable);\n        }\n        this._defaults = defaults;\n        this._name = pluginName;\n        this.init();\n    }\n\n    Plugin.prototype = {\n        init: function () {\n            layout = this.settings.layout;\n            this.createKeyboard(layout);\n            this.events();\n        },\n\n        setInput: function (newInputField) {\n            this.settings.input = newInputField;\n        },\n\n        createKeyboard: function (layout) {\n            shift = false;\n            capslock = false;\n\n            var keyboard_container = $('<ul/>').addClass('jkeyboard'),\n                me = this;\n\n            layouts[layout].forEach(function (line, index) {\n                var line_container = $('<li/>').addClass('jline');\n                line_container.append(me.createLine(line));\n                keyboard_container.append(line_container);\n            });\n\n            $(this.element).html('').append(keyboard_container);\n        },\n\n        createLine: function (line) {\n            var line_container = $('<ul/>');\n\n            line.forEach(function (key, index) {\n                var key_container = $('<li/>').addClass('jkey').data('command', key);\n\n                if (function_keys[key]) {\n                    key_container.addClass(key).html(function_keys[key].text);\n                }\n                else {\n                    key_container.addClass('letter').html(key);\n                }\n\n                line_container.append(key_container);\n            })\n\n            return line_container;\n        },\n\n        events: function () {\n            var letters = $(this.element).find('.letter'),\n                shift_key = $(this.element).find('.shift'),\n                space_key = $(this.element).find('.space'),\n                backspace_key = $(this.element).find('.backspace'),\n                return_key = $(this.element).find('.return'),\n\n                me = this,\n                fkeys = Object.keys(function_keys).map(function (k) {\n                    return '.' + k;\n                }).join(',');\n\n            letters.on('click', function () {\n                me.type((shift || capslock) ? $(this).text().toUpperCase() : $(this).text());\n            });\n\n            space_key.on('click', function () {\n                me.type(' ');\n            });\n\n            return_key.on('click', function () {\n                me.type(\"\\n\");\n                me.settings.input.parents('form').submit();\n            });\n\n            backspace_key.on('click', function () {\n                me.backspace();\n            });\n\n            shift_key.on('click', function () {\n                if (capslock) {\n                    me.toggleShiftOff();\n                    capslock = false;\n                } else {\n                    me.toggleShiftOn();\n                }\n            }).on('dblclick', function () {\n                capslock = true;\n            });\n\n\n            $(fkeys).on('click', function () {\n                var command = function_keys[$(this).data('command')].command;\n                if (!command) return;\n\n                command.call(me);\n            });\n        },\n\n        type: function (key) {\n            var input = this.settings.input,\n                val = input.val(),\n                input_node = input.get(0),\n                start = input_node.selectionStart,\n                end = input_node.selectionEnd;\n\n            var max_length = $(input).attr(\"maxlength\");\n            if (start == end && end == val.length) {\n                if (!max_length || val.length < max_length) {\n                    input.val(val + key);\n                }\n            } else {\n                var new_string = this.insertToString(start, end, val, key);\n                input.val(new_string);\n                start++;\n                end = start;\n                input_node.setSelectionRange(start, end);\n            }\n\n            input.trigger('focus');\n\n            if (shift && !capslock) {\n                this.toggleShiftOff();\n            }\n        },\n\n        backspace: function () {\n            var input = this.settings.input,\n                val = input.val();\n\n            input.val(val.substr(0, val.length - 1));\n        },\n\n        toggleShiftOn: function () {\n            var letters = $(this.element).find('.letter'),\n                shift_key = $(this.element).find('.shift');\n\n            letters.addClass('uppercase');\n            shift_key.addClass('active')\n            shift = true;\n        },\n\n        toggleShiftOff: function () {\n            var letters = $(this.element).find('.letter'),\n                shift_key = $(this.element).find('.shift');\n\n            letters.removeClass('uppercase');\n            shift_key.removeClass('active');\n            shift = false;\n        },\n\n        toggleLayout: function () {\n            layout_id = layout_id || 0;\n            var plain_layouts = layouts.selectable;\n            layout_id++;\n\n            var current_id = layout_id % plain_layouts.length;\n            return plain_layouts[current_id];\n        },\n\n        insertToString: function (start, end, string, insert_string) {\n            return string.substring(0, start) + insert_string + string.substring(end, string.length);\n        }\n    };\n\n        /*\n\t\t// A really lightweight plugin wrapper around the constructor,\n\t\t// preventing against multiple instantiations\n\t\t$.fn[ pluginName ] = function ( options ) {\n\t\t\t\treturn this.each(function() {\n\t\t\t\t\t\tif ( !$.data( this, \"plugin_\" + pluginName ) ) {\n\t\t\t\t\t\t\t\t$.data( this, \"plugin_\" + pluginName, new Plugin( this, options ) );\n\t\t\t\t\t\t}\n\t\t\t\t});\n\t\t};\n        */\n        var methods = {\n            init: function(options) {\n                if (!this.data(\"plugin_\" + pluginName)) {\n                    this.data(\"plugin_\" + pluginName, new Plugin(this, options));\n                }\n            },\n\t\t\tsetInput: function(content) {\n\t\t\t\tthis.data(\"plugin_\" + pluginName).setInput($(content));\n            },\n            setLayout: function(layoutname) {\n                // change layout if it is not match current\n                object = this.data(\"plugin_\" + pluginName);\n                if (typeof(layouts[layoutname]) !== 'undefined' && object.settings.layout != layoutname) {\n                    object.settings.layout = layoutname;\n                    object.createKeyboard(layoutname);\n                    object.events();\n                };\n            },\n        };\n\n\t\t$.fn[pluginName] = function (methodOrOptions) {\n            if (methods[methodOrOptions]) {\n                return methods[methodOrOptions].apply(this.first(), Array.prototype.slice.call( arguments, 1));\n            } else if (typeof methodOrOptions === 'object' || ! methodOrOptions) {\n                // Default to \"init\"\n                return methods.init.apply(this.first(), arguments);\n            } else {\n                $.error('Method ' +  methodOrOptions + ' does not exist on jQuery.tooltip');\n            }\n        };\n\n})(jQuery, window, document);\n</script>\n<style>\n    .jkeyboard {\n  display: inline-block;\n}\n.jkeyboard, .jkeyboard .jline, .jkeyboard .jline ul {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n.jkeyboard .jline {\n  text-align: center;\n  margin-left: -14px;\n}\n.jkeyboard .jline ul li {\n  font-family: arial, sans-serif;\n  font-size: 20px;\n  display: inline-block;\n  border: 1px solid #468db3;\n  -webkit-box-shadow: 0 0 3px #468db3;\n  -webkit-box-shadow: inset 0 0 3px #468db3;\n  margin: 10px 0 1px 14px;\n  color: #000000;\n  border-radius: 5px;\n  width: 52px;\n  height: 52px;\n  box-sizing: border-box;\n  text-align: center;\n  line-height: 52px;\n  overflow: hidden;\n  cursor: pointer;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -khtml-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.jkeyboard .jline ul li.uppercase {\n  text-transform: uppercase;\n}\n.jkeyboard .jline ul li:hover, .jkeyboard .jline ul li:active {\n  background-color: #185a82;\n}\n.jkeyboard .jline .return {\n  width: 120px;\n}\n.jkeyboard .jline .space {\n  width: 456px;\n}\n.jkeyboard .jline .numeric_switch {\n  width: 84px;\n}\n.jkeyboard .jline .layout_switch {\n}\n.jkeyboard .jline .shift {\n  width: 100px;\n}\n.jkeyboard .jline .backspace {\n  width: 69px;\n}\n</style>\n\n\n\n\n<style>\nbody {font-family: Arial, Helvetica, sans-serif;}\n\n.nr-dashboard-theme .nr-dashboard-template .md-button:not(:first-of-type) {\n    margin-top: 0px;\n}\n\n/* The Modal (background) */\n.modal {\n    display: none; /* Hidden by default */\n    position: fixed; /* Stay in place */\n    opacity:0.99;\n    z-index: 100; /* Sit on top */\n    padding-top: 500px; /* Location of the box */\n    left: 0;\n    top: 0;\n    width: 100%; /* Full width */\n    height: 100%; /* Full height */\n    overflow: auto; /* Enable scroll if needed */\n    background-color: rgb(0,0,0); /* Fallback color */\n    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */\n}\n\n/* Modal Content */\n.modal-content {\n    position: relative;\n    background-color: #fefefe;\n    margin: auto;\n    padding: 0;\n    border: 1px solid #888;\n    width: 80%;\n    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\n    -webkit-animation-name: animatetop;\n    -webkit-animation-duration: 0.4s;\n    animation-name: animatetop;\n    animation-duration: 0.4s\n}\n\n/* Add Animation */\n@-webkit-keyframes animatetop {\n    from {top:-300px; opacity:0} \n    to {top:0; opacity:1}\n}\n\n@keyframes animatetop {\n    from {top:-300px; opacity:0}\n    to {top:0; opacity:1}\n}\n\n/* The Close Button */\n.close {\n    color: black;\n    float: right;\n    font-size: 28px;\n    font-weight: bold;\n}\n\n.close:hover,\n.close:focus {\n    color: #000;\n    text-decoration: none;\n    cursor: pointer;\n}\n\n.modal-header {\n    padding: 2px 16px;\n    background-color: aliceblue;\n    color: white;\n}\n\n.modal-body {padding: 2px 16px;}\n\n.modal-footer {\n    padding: 2px 16px;\n    background-color: #5cb85c;\n    color: white;\n}\n</style>\n\n<!-- Trigger/Open The Modal -->\n<div ng-init=\"msg.payload = ''\">\nUsername:\n<input type=\"text\" ng-model=\"msg.payload\" id=\"search_field\">\n<md-button ng-click=\"output(msg); msg.payload =''\">OK</md-button>\n</div>\n\n<!-- The Modal -->\n<div id=\"myModal\" class=\"modal\">\n\n  <!-- Modal content -->\n  <div class=\"modal-content\">\n      <div class=\"modal-header\">\n      <span class=\"close\">&times;</span>\n      <h2 style=\"background-color: aliceblue !important;text-align: center;\">Virtual Keyboard</h2>\n    </div>\n    <div class=\"modal-body\">\n        <div id=\"keyboard\"></div>\n        <div>\n        </div>\n    </div>\n  </div>\n</div>\n\n\n<script>\n    // Get the modal\nvar modal = document.getElementById('myModal');\n\n// Get the fields that opens the modal\nvar txt1 = document.getElementById(\"search_field\");\n\n// Get the <span> element that closes the modal\nvar span = document.getElementsByClassName(\"close\")[0];\n\n// When the user clicks on the button, open the modal \ntxt1.onfocus = function() {\n    modal.style.display = \"block\";\n}\n\n// When the user clicks on <span> (x), close the modal\nspan.onclick = function() {\n    modal.style.display = \"none\";\n}\n\n// When the user clicks anywhere outside of the modal, close it\nwindow.onclick = function(event) {\n    if (event.target == modal) {\n        modal.style.display = \"none\";\n    }\n}\n</script>\n\n<script>\n$('#keyboard').jkeyboard({\n  layout: \"english\",\n  input: $('#search_field')\n});\n\n(function($scope) {\n    \n    $scope.msg = {\"payload\":\"\",\"topic\":\"\"}\n    \n    $scope.output = function(msg){\n        $scope.msg.payload = $('#search_field').val()\n        $scope.send(msg)\n        $scope.msg.payload = \"\"\n        $('#search_field').val(\"\")\n    }\n    \n})(scope);\n</script>\n\n",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "templateScope": "local",
        "x": 470,
        "y": 560,
        "wires": [
            [
                "8e744530.034048"
            ]
        ]
    },
    {
        "id": "8e744530.034048",
        "type": "debug",
        "z": "1f6b105a.a3f8d",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "x": 650,
        "y": 560,
        "wires": []
    },
    {
        "id": "11ff8571.523bcb",
        "type": "inject",
        "z": "1f6b105a.a3f8d",
        "name": "",
        "topic": "",
        "payload": "",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "x": 290,
        "y": 560,
        "wires": [
            [
                "2719d4b8.7ae56c"
            ]
        ]
    },
    {
        "id": "5630af15.e02d5",
        "type": "ui_group",
        "z": "",
        "name": "Users",
        "tab": "40ede3c0.21bcfc",
        "order": 2,
        "disp": true,
        "width": "9",
        "collapse": false
    },
    {
        "id": "40ede3c0.21bcfc",
        "type": "ui_tab",
        "z": "",
        "name": "Home Tab",
        "icon": "dashboard",
        "order": 3
    }
]
3 Likes

#7

thank you very much. it works

0 Likes

#8

your exemple works perfectly. But, my problem now is i have more then five inputs in my form. i have tried like this but the value of payload object is always undefined. i got nothing in output.

<div ng-init="msg.payload.data3 = ''">
Username:
<input type="text" ng-model="msg.payload.data3" id="search_field">
<md-button ng-click="output_username(msg); msg.payload.data3 =''">OK</md-button>
</div>
<div ng-init="msg.payload.data4 = ''">
address:
<input type="text" ng-model="msg.payload.data4" id="search_field">
<md-button ng-click="output_address(msg); msg.payload.data4 =''">OK</md-button>
</div>
<script>
$('#keyboard').jkeyboard({
  layout: "english",
  input: $('#search_field')
});

(function($scope) {
    $scope.msg = {"payload.data3":"","topic":""}
    $scope.output = function(msg){
        $scope.msg.payload.data3 = $('#search_field').val()
        $scope.send(msg)
        $scope.msg.payload.data3 = ""
        $('#search_field').val("")
    }
})(scope);
</script>
0 Likes

#9

I'll try to find time to make it better with multiple fields but not today. Maybe try to inject a msg with the right structure to initialize it?

1 Like

#10

i have found as way by replacing msg.payload.data3 with msg.username ... i don't know if it is the best solution, but it did the job

1 Like

#11

I modified it so now it works with any node-red-dashboard's text-input nodes. I also started adding some custom keyboards like french and emoji but not completed

https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51

2 Likes

#12

Nice job :sunglasses::ok_hand:
Thank you very much.

0 Likes

#13

i found a problem, when i change keyboard to numbers, or other language, and try to put more then one, the keyboard return to it initial state... it only take the first hit.

0 Likes

#14

I updated the above flow by changing:

$('input').focus(function () {

for:

$('input').click(function () {
1 Like

#15

is there a way to use this plugin keyboard in two different templates.
i tried to put the same code in other template but it doesn't work. my dashboard is devided in two tabs.

0 Likes

#16

I tried it in two different tabs last week and it seemed to be working. What is happening? Could you share a flow so I could debug?

0 Likes

#17

Hi, i have found a solution for the keybord inside two different template. thanks anyway.
now i have another problem i have an input search. when i start typing on VK, it doesn't affect the search, in advance, when i type with my keyboard, it take the values ogf input and affect the search

<form>

<span class="input-group">

<input type="text" id="search_files" name="search_files" placeholder="Recherche" ng-model="search">

<div>{{search}}</div>

<i class="fa fa-search"></i>

</span>

</form>

<div class="container" ng-app="sortApp">

<table>

<thead>

<tr style="width:100%">

<td>

<a href="#" ng-click="sortType = 'filename'; sortReverse = !sortReverse">

Nom de fichier

<span ng-show="sortType == 'filename' && !sortReverse" class="fa fa-caret-down"></span>

<span ng-show="sortType == 'filename' && sortReverse" class="fa fa-caret-up"></span>

</a>

</td>

</tr>

</thead>

<tbody>

<tr ng-repeat="file in msg.payload | orderBy:sortType:sortReverse| filter:search track by $index" style="width:100%" flex>

<td><a href onclick="" id="{{file}}">{{file}}</a>

</td>

</tr>

</tbody>

</table>

</div>

<div id="myModal-keyboard-archive" class="modal-keyboard-archive">

<!-- Modal content keyboard -->

<div class="modal-content-keyboard-archive">

<div class="modal-header-keyboard-archive">

<span class="close-keyboard-archive">&times;</span>

<h2 style="background-color: aliceblue !important;text-align: center;">Keyboard</h2>

</div>

<div class="modal-body-keyboard-archive">

<div id="keyboard-archive"></div>

<div>

</div>

</div>

</div>

</div>

<script>

// Get the modal keyboard

var modal_keyboard_archive = document.getElementById('myModal-keyboard-archive');

var classname = document.getElementsByClassName("input");

$('input').focus(function () {

$('#keyboard-archive').unbind().removeData();

$('#keyboard-archive').jkeyboardarch({

    layout: "english",

    input: $('#'+$(this).attr('id'))

});

});

var openModal = function (){

modal_keyboard_archive.style.display = "block";

};

for (var i=0; i < classname.length; i++){

classname[i].addEventListener('click', openModal, false);

}

// Get the fields that opens the modal keyboard

var txt_searchs = document.getElementById("search_files");

// Get the <span> element that closes the modal keyboard

var span_keyboard_archive = document.getElementsByClassName("close-keyboard-archive")[0];

// When the user clicks on the button, open the modal keyboard

txt_searchs.onfocus = function() {

modal_keyboard_archive.style.display = "block";

}

// When the user clicks on <span> (x), close the modal keyboard

span_keyboard_archive.onclick = function() {

modal_keyboard_archive.style.display = "none";

}

// When the user clicks anywhere outside of the modal keyboard , close it

window.onclick = function(event) {

if (event.target == modal_keyboard) {

    modal_keyboard_archive.style.display = "none";

}

}

(function($scope) {

$scope.search = {"search":""}

    $scope.search = $('#search_files').val()

              $scope.send(search)

})(scope);

</script>

</div>

what am'i missing here . and thank you

0 Likes

#18

Please read this post on formatting code samples: How to share code or flow json

You've used a blockquote section which doesn't preserve the formatting properly.

1 Like

#19

Without seeing the whole flow its hard to guess what is happening, do you have errors in your browser console?

1 Like

#20

Also try changing

$('input').focus(function () {

for

$('input').click(function () {

like I suggested before.

0 Likes