Use virtual keyboard in node-red-dashboard

Dashboard
21

Hello

I think you are right. I managed to change the layout to "numbers only" and I figured out how to change the position (in "Z" plane). I'm almost certain that the issue is related to the position and the size of the keyboard.
Any tips what I should do to change the size?
I also want to change the Enter button functionality and label. I want this button to close Keyboard and change label to "BACK"
Thank you for your help.

22

To change the size look for css width and height. I don't think its causing the flicker though.
To close the keyboard, you could change the ENTER button to display BACK and change the beahavior to: modal.style.display = "none", but there should be no need to, as you can close the keyboard by either clicking the X button in the top right corner or by clicking anywhere on the dimmed dashboard outside the keyboard box.

23

I've updated the flow so that the keyboard should always be centered, no matter your screen resolution or browser window size.

24

Hello

Thank you very much for your help.

Thanks to your tips I was able to modify the keyboard, and it is working for me now.
I know now how to change the position, layout, colour and size of the keyboard.

There is one last thing that bothers me, which is a grey area outside the keyboard (I'm referring to the box outside the keyboard that you can click on to close it). How I can resize it.

20181221_233057
20181221_233057.jpg4032Ɨ2268 2.74 MB

25

This grey area is called modal ( compared to modal-content for the actual keyboard area) and is supposed to be full-screen ( width: 100%, height 100%). If you want tou can set the modal-content's position to absolute instead of relative so that changing one will not impact the other.

26

I just updated the flow to automatically detect the input type (number or text) in order to display the right keyboard layout.

27

Hello.
Thank you for your support. I appreciate your help.
I was able to modify the keyboard to my needs and it's working on the 7" touchscreen now.

1 Like
28

My pleasure! I'm glad you got it working to your liking.

29

What is the best way to capture this for next time ? flows.nodered.org or...?

30

Right now it is updated on https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51 the link to it could be marked as solution so that others can try it before trying to piece it together from code snippets scattered in the thread. If there is enough demand, it could be made into a contrib-ui node.

31

Hey @hugobox, I think this might an interesting use case for a custom ui node... Especially if you would have some settings on the config screen, so users could customize it. Let us know if you need any support, if you ever would consider building it!
Bart

1 Like
32

I have imported your flow, but no keyboard opens, or is it intentional that no laptop will appear on the laptop. No matter if I turn the keyboard on or off with the button

33

Hi @Tobi! The virtual keyboard only opens when you click in a text field, if that doesn't work, please state your version of node-red and dashboard, and which browser (and version) you are using.

34

I use node-red version v.0.19.5 and dashboard v2.12.2
the browser is firefox 60.4.0esr (64-Bit)

35

Do you see any error in the browser console? Does it work in chrome? Is your text field in a ui-text or ui-template node?

36

In the browser console the following error appear:

ReferenceError: event is not defined[Weitere Informationen]

In microsoft edge and chrome it works

37

Ok I tried with Firefox 64.0 and the keyboard appears without error. Hopefully fixes it for you as well.

38

Hello to the all community, this is my first post :slight_smile:

Dear hugobox thanks for your support
I have some trouble with your example flow (https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51).
I've imported your flow, but It seems not working properly. There any action when I click on the keyboard on/off button. What do you suggest to do?
Could you please check if the example flow is correct? (maybe new version)

Thanks a lot!

39

I set up my Rpi touchscreen terminal to boot into Chromium in kiosk mode with NR dashboard as home. I installed 'virtual keyboard' chromium extension which pops up whenever input field is in focus on the dashboard. This solution works quite well.

1 Like
40

Hi, How can i use this not using the dashboard nodes?