# Use virtual keyboard in node-red-dashboard

**URL:** <https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420>\
**Category:** Dashboard\
**Created:** [20 August 2018 15:13 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420 "2018-08-20T15:13:24Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ludi](https://avatars.discourse-cdn.com/v4/letter/l/ccd318/32.png) [@ludi](https://discourse.nodered.org/u/ludi)\
**Post date:** [20 August 2018 15:13 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/1 "2018-08-20T15:13:24Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![marioarmillei](https://avatars.discourse-cdn.com/v4/letter/m/d2c977/32.png) [@marioarmillei](https://discourse.nodered.org/u/marioarmillei)\
**Post date:** [31 October 2018 12:49 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/2 "2018-10-31T12:49:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [31 October 2018 13:23 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/3 "2018-10-31T13:23:07Z")

</div>

Haven't tried it, but maybe using this:

> **[GreenfieldVentures/angular-on-screen-keyboard](https://github.com/GreenfieldVentures/angular-on-screen-keyboard)**
>
> Contribute to GreenfieldVentures/angular-on-screen-keyboard development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [12 December 2018 12:31 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/4 "2018-12-12T12:31:41Z")

</div>

is there a solution for this ??

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [16 December 2018 22:51 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/5 "2018-12-16T22:51:16Z")

</div>

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](https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51)

---

<div class="post-metadata">

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\
**Post date:** [17 December 2018 07:07 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/6 "2018-12-17T07:07:53Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [17 December 2018 12:43 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/7 "2018-12-17T12:43:42Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [17 December 2018 16:27 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/8 "2018-12-17T16:27:01Z")

</div>

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

```auto
<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>
```

---

<div class="post-metadata">

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\
**Post date:** [17 December 2018 18:59 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/9 "2018-12-17T18:59:04Z")

</div>

Thanks that works very well 🙂

---

<div class="post-metadata">

**Author:** ![krzydec](https://avatars.discourse-cdn.com/v4/letter/k/a5b964/32.png) [@krzydec](https://discourse.nodered.org/u/krzydec)\
**Post date:** [20 December 2018 13:52 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/10 "2018-12-20T13:52:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [20 December 2018 14:07 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/11 "2018-12-20T14:07:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![krzydec](https://avatars.discourse-cdn.com/v4/letter/k/a5b964/32.png) [@krzydec](https://discourse.nodered.org/u/krzydec)\
**Post date:** [20 December 2018 14:57 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/12 "2018-12-20T14:57:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [20 December 2018 15:03 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/13 "2018-12-20T15:03:08Z")

</div>

Maybe uninstall all the virtual keyboards you installed first?

---

<div class="post-metadata">

**Author:** ![krzydec](https://avatars.discourse-cdn.com/v4/letter/k/a5b964/32.png) [@krzydec](https://discourse.nodered.org/u/krzydec)\
**Post date:** [20 December 2018 15:13 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/14 "2018-12-20T15:13:15Z")

</div>

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 😉

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [20 December 2018 15:30 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/15 "2018-12-20T15:30:26Z")

</div>

I would start by changing layout: "english" for "numbers\_only" in the following function:

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

```

---

<div class="post-metadata">

**Author:** ![krzydec](https://avatars.discourse-cdn.com/v4/letter/k/a5b964/32.png) [@krzydec](https://discourse.nodered.org/u/krzydec)\
**Post date:** [20 December 2018 21:30 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/16 "2018-12-20T21:30:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [20 December 2018 21:35 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/17 "2018-12-20T21:35:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![krzydec](https://avatars.discourse-cdn.com/v4/letter/k/a5b964/32.png) [@krzydec](https://discourse.nodered.org/u/krzydec)\
**Post date:** [20 December 2018 21:49 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/18 "2018-12-20T21:49:24Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/8fc52719ae7337ff7ab121ea4a2d766ba8f26ffd.png)

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [20 December 2018 23:26 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/19 "2018-12-20T23:26:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [20 December 2018 23:30 UTC](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420/20 "2018-12-20T23:30:16Z")

</div>

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.

[Next page](https://discourse.nodered.org/t/use-virtual-keyboard-in-node-red-dashboard/2420.md?page=2)