Very simple virtual keyboard

General
1

I am programming a simple aplication for parking lot, where I need the user to write car plate number. So i was searching for a very simple on-screen keyboard, where will be English Letters, Numbers, maybe space bar and thats all.

I have found this keyboard:
https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51

I have only two problems:

  • I Was not able to modify it, so the keyboard will be always visible on page
  • I do not need the keyboard to show the input on its top, I just need it to put the letters where the cursor is

Or maybe do you know some even more simple solution for this?

Thanks for help.

2

If you can tell the browser (I assume that the screen input device is operating in a Kiosk mode?) that it is a touch screen and can constrain the cursor to the input field, the devices touch screen keyboard should display automatically shouldn't it?

I remember seeing something on MDN for input that lets you give a hint to the browser.

3

Yes, there are such solutions, but with this type of keyboard i have this problem:

  1. There is possibility to close the keyboard with some X
  2. there is possibility to move the keyboard
  3. there is possibility to switch the keyboard to some another mode, or another type of keyboard.

I want the keyboard to be in Node red, so I can disable all of the functions above... Or maybe if you know some SW, which can make on screen keyboard on Windows and I can set it up, so the points above will be solved...

4

OK, well I'm not aware of anything but it shouldn't be too hard to work up with a set of buttons in a grid.

A quick search threw up some possibilities though:

CSS Keyboards (freefrontend.com)

Virtual Keyboard using HTML5 CSS and JS | Codeconvey

1 Like
5

Creating a custom on-screen keyboard is a good approach for your parking lot application. It provides the flexibility to meet your specific needs. You can use HTML and JavaScript to build a simple keyboard and control its visibility and input behavior.

6

I once upon a time wrote a browser app for a tennis court booking system. The club provided a local terminal (computer screen, mouse and keyboard) to allow players to make a local booking. This was long before we all had smart phones, the good old Nokia and Ericsson days

I used Visual Studio and C++ and I could magically make that app automatically start fullscreen at boot, I took away all possible ways to close, resize and minimize it. It worked rock-solid for several years until it was replaced by a more modern booking system

What I would do even today would be to build a strong gui like that and then have Node-RED as backend. If that is possible today by just using CSS, HTML and Javascript, fine, otherwise I would look into some modern Visual Studio tool just to create the front end.

7

And, of course, UIBUILDER would be a great tool for helping build a solid, performant custom UI. :grinning:

1 Like
8

Yes of course, that is the modern way you would do it!!

1 Like
9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.