Use virtual keyboard in node-red-dashboard

Dashboard
1

Hi,

I am using node red on a raspberry pi with a touch interface (without keyboard). how can I show a virtual keyboard at a textfield? I tried already https://github.com/davidenke/angular-material-keyboard within a template.

The keyboard can be shown all the time.

Does anyone have an idea?
Kind regards
Ludi

2 Likes
2

hi how i can put one virtual keyboard in my dashboard?
please give me a exemple

3

Haven't tried it, but maybe using this:

4

is there a solution for this ??

5

Hi @ludi and @marioarmillei
I have a flow that pops up a virtual keyboard whenever you click in a text input, let me know if that works for you:
https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51

1 Like
6

@hugobox
The keyboard works fine, but is there any way to open the keyboard only when working on the raspberry and not when accessing the dashboard with the laptop?

7

Good question! I'm not sure what the best solution would be for this. Maybe adding a discreet button in the top right corner to activate/deactivate the virtual keyboard?

8

Here's a code add-on that does that, let me know if that works for you:

<script>
var clickState = 1;
var btn = document.querySelector('.VK');

btn.addEventListener('click', function(){

  if (clickState == 0) {
    this.textContent = 'V-KeyBoard On';
    modal = document.getElementById('myModal');
    clickState = 1;
  } else {
    this.textContent = 'V-KeyBoard Off';
    modal = document.getElementById('empty');
    clickState = 0;
  }

});
</script>

<style>
.VK{
    position: fixed;
    top: 60px;
    right: 20px;
    height: 30px;
}
</style>

<div id="empty"></div>
<button class="VK">V-KeyBoard On</button>
9

Thanks that works very well :slight_smile:

10

Hello

This is my first post, so I would like to say hello to the all users.

I started my adventure with the Node Red couple weeks ago.
It is a truly amazing tool. After the short training I managed to create a quite complex flow that I would like to deploy as the machine terminal to gather information about production and downtime reasons.
I'm planning to use an RPI and touch screen as the HMI. Most of the information will be either pulled from the database or I'm planning to use a bar-code scanner to minimise the chance of making mistakes. There is one option which will require manual input to collect information about scrap.
This is where I hit the wall as there is nothing that I can find that will work for me.

I only need a numeric input.

I tried Matchbox-keyboard. I cannot get it running in to pop up mode. The only alternative I have is to have it in the start bar. This is not an option as I would like to run the Pi in the kiosk mode.

I tried Florence, but its unstable and keep crashing.

I also tried to move the Scrap Reporting on two different screens and then to create a numeric buttons to feed a form on different screen, but I failed to succeed.

The other information I was able to find are beyond my understanding.

It is difficult to believe that NODE RED is missing this functionality or there is no working solution/instruction
that a newbie like me can follow.

All help will be highly appreciated.

11

Have you tried the virtual keyboard I linked to above? It could be modified to only show numeric.

12

Hello

Yes I did. It appears on the screen when I'm using a virtual desktop, but it doesn't work on the touch screen.
What is happening it joust flicker and disappear.

13

Maybe uninstall all the virtual keyboards you installed first?

14

OK. I will try.

How to modify the layout to by numeric pad only.

As mentioned I'm new to programming, so I may ask obvious questions :wink:

15

I would start by changing layout: "english" for "numbers_only" in the following function:

$('input').click(function () {
    $('#keyboard').unbind().removeData();
        $('#keyboard').jkeyboard({
            layout: "english",
            input: $('#'+$(this).attr('id'))
    });
});
16

Hello

I have tried again with the fresh system installed to no avail. (I wasn't sure if I uninstalled everything I tried today)
The keyboard just flickers and disappear.

Do you have any more ideas?
I spent all day trying various things.
I started thinking about connecting hardware numeric pad, which will be a crime having a touch screen.

17

What browser and which version are you running? Can you open the page running on the Pi from another computer?

18

Hi

On RPI
I'm using Chromium, I assume that this is a latest version as I done all updates.
Edit:
I just installed Iceweasel (FireFox clone) browser and I have exactly same problem.
When I open the dashboard from laptop using Chrome (ver. 71.0.3578.98) or Opera the keyboard pop up and stay on, however,only half of it is visible on the screen.

node%20red
node red.png897Ă—517 30.9 KB

19

That might be due to the "top" CSS setting. Try setting it lower. Not sure whats causing the flickering.

20

If you open the browser dev console, do you see any errors? We could try a script that prints to console every touch and click events to see if it works as intended.