Hello, I added the virtual keyboard available here: https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51
I plan to use it via a touch monitor to adjust the parameters of a ui scheduler but when I want to set the time the digital inputs do not work. Do you have any indication of a lead? Thank you.
Hi Montmirail and welcome.
I think you may have to give more information, like example values a maybe an example flow. As it is not clear where the issue you have lies.
Hello, as you can see in the screenshot when using a virtual keyboard for entry in a Scheduler it is possible to enter text and numbers in the upper part "name" but in the area regarding the time setting it is not possible to enter numbers, it remains at "--:--". In photo 2, when pressing a number I see the "--:--" become / focus on "start time" as if the numbers on the virtual keyboard had another function
This seems to be a limitation of the virtual keyboard, it only seems to work with standard ui-text node inputs, and does not recognise text input time/date/etc pickers. You will need to edit the code in the template node to get this to work correctly.
This node was create 5 years ago before time/date text inputs were added.
When you select the time inputs of scheduler, do you get a time picker modal pop up?
there is no window that opens for modifying schedules. I'm not a savvy programmer. I'm going to do some research and maybe at worst add the up and down arrows to the virtual keyboard, maybe they will be functional.
Thank you for taking the time to answer me.
I loaded the ui-scheduler, when i click on starttime or endtime a time input modal opens.
The input to a time input would normally be a unix timestamp, which is what the time modal outputs to the scheduler noder time input. I do not think up down arrows will work, unless they increase or decrease a timestamp.
I have this window which opens on another project created with NodeRed with the Dashboard on a smartphone.
I just tried directly on chromium of the raspberry because I was in remote control via the Mozilla browser and I have the possibility of having a window which opens to select an hour or minutes.
The virtual keyboard makes you lose focus on this selection.
Yes I had that to, try this version of the virtual keyboard, i edited the code so it will ignore time inputs.
[{"id":"51b13bc43c31ebce","type":"ui_template","z":"d1395164b4eec73e","group":"9add09e8f209636d","name":"Virtual Keyboard","order":1,"width":0,"height":0,"format":"<div id=\"empty\"></div>\n<button class=\"VK\">V-KeyBoard On</button>\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\" onclick=\"closeModal()\">×</span>\n <h2 id=\"vkeyname\" style=\"background-color: aliceblue !important; color: black !important; text-align: center; min-height: 30px;\">V-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<style>\n.VK{\n position: fixed;\n top: 60px;\n right: 20px;\n height: 30px;\n}\n</style>\n\n<script>\n\nvar clickState = 1;\nvar btn = document.querySelector('.VK');\n\nbtn.addEventListener('click', function(){\n\n if (clickState == 0) {\n this.textContent = 'V-KeyBoard On';\n modal = document.getElementById('myModal');\n clickState = 1;\n } else {\n this.textContent = 'V-KeyBoard Off';\n modal = document.getElementById('empty');\n clickState = 0;\n }\n\n});\n</script>\n\n<script>\n // Get the modal\nvar modal = document.getElementById('myModal');\nvar inputTags;\nvar inputType;\nvar inputTarget;\n\nvar getinputs = function() {\n inputTags = document.getElementsByTagName(\"input\");\n console.log(inputTags)\n for (var i = 0; i < inputTags.length; i++) {\n inputTags[i].addEventListener('click', openModal, false)\n }\n}\n\nsetTimeout(function(){ getinputs(); }, 1000);\n\nvar openModal = function() {\n inputType = event.target.type\n inputTarget = event.target\n var layoutName;\n if (inputType == \"number\"){\n //inputTarget.type = \"number\" //hack because chrome doesn't allow setselection in number inputs\n //inputTarget.value = \"\"\n layoutName = \"numbers_only\"\n }\n else if (inputType == \"time\"){\n layoutName = null;\n }else{\n layoutName = \"english\"\n }\n if(layoutName){\n $('#vkeyname').text(event.target.value)\n $('#keyboard').unbind().removeData();\n modal.style.display = \"block\";\n $('#keyboard').jkeyboard({\n layout: layoutName,\n input: $('#'+$(this).attr('id'))\n });\n }\n}\n\n\n// Get the <span> element that closes the modal\nvar span = document.getElementsByClassName(\"close\")[0];\n\n// When the user clicks anywhere outside of the modal, close it\nwindow.onclick = function(event) {\n var source = event.target;\n if (source == modal || source == span) {\n closeModal(source)\n }\n};\n\nvar closeModal = function(source){\n //console.log(\"closing\")\n modal.style.display = \"none\";\n \n if (inputType == \"number\"){\n inputTarget.type = \"number\" //hack because chrome doesn't allow selectionstart on number inputs\n }\n}\n\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: '<i class=\"fa fa-keyboard-o\" aria-hidden=\"true\"></i>',\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: ['english', 'russian','french', 'emoji'],\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 french: [\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 emoji: [\n ['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊',],\n ['😋', '😎', '😍', '😘', '❤️', '🙏', '🔥', '✨', '👍','👌','💯'],\n ['🤷', '🎉', '👏', '🤦', '🙌', '🎶', '💥', '🌈','✅','⭐', '👀'],\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', 'backspace', 'return'],\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.enter();\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 input.change()\n $('#vkeyname').text(val + key)\n }\n } else {\n if (input_node.type == \"text\"){\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 input.change()\n }else if (input_node.type == \"number\"){\n input.val(val + key);\n }else{\n input.val(val + key);\n input.change()\n }\n $('#vkeyname').text(val + key)\n \n }\n input.trigger('focus');\n\n if (shift && !capslock) {\n this.toggleShiftOff();\n }\n },\n \n enter: function () {\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 if (input_node.type == \"text\"){\n val = val + \"\\n\";\n $('#vkeyname').text(val)\n }\n input.change()\n input.focus()\n if (input_node.type == \"number\"){\n modal.style.display = \"none\";\n }\n },\n\n backspace: function () {\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 if (input.type == \"text\"){\n input.val(val.slice(0, start-1) + val.slice(start))\n input_node.setSelectionRange(start-1, start-1);\n //console.log(val)\n $('#vkeyname').text(val)\n }else{\n input.val(val.slice(0,-1))\n $('#vkeyname').text(val.slice(0,-1))\n }\n //input.change()\n //input.focus()\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 var SelectedLayoutName = plain_layouts[current_id];\n $('#vkeyname').text('V-Keyboard ' + SelectedLayoutName )\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\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 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: fixed;\n background-color: #fefefe;\n margin: auto;\n padding: 0;\n bottom: 0%;\n left: 50%;\n transform: translate(-50%, 0%);\n border: 1px solid #888;\n width: fit-content;\n max-width: 100%;\n max-height: 100%;\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: animate;\n -webkit-animation-duration: 0.4s;\n animation-name: animate;\n animation-duration: 0.4s\n}\n\n/* Add Animation */\n@-webkit-keyframes animate {\n from {bottom:100%; opacity:0} \n to {bottom:0%; opacity:1}\n}\n\n@keyframes animate {\n from {bottom:100%; opacity:0}\n to {bottom: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\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: 5px 0 1px 6px;\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: 80px;\n}\n.jkeyboard .jline .space {\n width: 366px;\n}\n.jkeyboard .jline .numeric_switch {\n width: 65px;\n}\n.jkeyboard .jline .layout_switch {\n}\n.jkeyboard .jline .shift {\n width: 60px;\n}\n.jkeyboard .jline .backspace {\n width: 69px;\n}\n</style>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":440,"y":5620,"wires":[[]]},{"id":"9add09e8f209636d","type":"ui_group","name":"Default","tab":"ad0c7ef43634bbd7","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"ad0c7ef43634bbd7","type":"ui_tab","name":"hidden","icon":"dashboard","disabled":false,"hidden":false}]
Hello, thank you very much, this fits perfectly.
Really thank you, it took me a lot of time to find and implement this solution.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy