Popup keypad

skiv71

when using mango as a hmi front end, with touchscreen, i can see the need for a popup keyboard/numpad.... i've found several javascript versions on google...

how would i go about creating a serverside script item, that shows the tag, then when clicked, the numpad pops up, user enters the text, numbers etc and then this is written to the point variable...

also, in reference to the previous additive problem, i can see it being nice if i could perform maths on this user entered number before writing it back to the register.

of course this shouldnt be needed if that issue i posted previously about can be resolved.

thanks

Jokke

Hi,

Sounds quite intresting, I would like to do similar. Could you link some example and I could take a look some time.

BR
-Jokke

skiv71

something like..... http://keith-wood.name/keypad.html

or http://www.codeproject.com/KB/scripting/jvk.aspx

but i dont know quite how to integrate this

craig

@skiv71 said:

and then this is written to the point variable...

also, in reference to the previous additive problem, i can see it being nice if i could perform maths on this user entered number before writing it back to the register.

To do math on the input before it is written to the register, you could use a meta point and then point linking to write the value of the meta point to the register

skiv71

think i can manage without the maths for now... but the need for a popup keypad etc is a necessity.

localised touchscreen/hmi functionality will require it

skiv71

... additive bug kindly rectified by mathew :)

skiv71

i've been trying to make some progress on this...

just messing with html...

which gives me a entry field and a nice pop up keyboard courtesy of...

http://www.greywyvern.com/code/javascript/keyboard

from here i see 2 options...

1/. a button bringing up the keypad to be used wherever data entry is required (preferred)

2/. a small keyboard icon next to each controls item that permits writing to..

option one sounds simpler and wouldnt need a server side interaction with an appointed variable

skiv71

i dont think the system wide popup keyboard is gonna work, due to entry fields requiring mouse over to get the dialogue up...

so, can someone help in creating a text field, linked to a point variable, via server side script that updates upon being changed?

or better still, mathew... can this keyboard applet be integrated into controls items for settable entities?

thanks

Neil

Jokke

Hi,

Here is code for a serverside script component.


var s="";

s+="<input type='text' size=3 value='"+value+"' ";
s+="onChange='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", this.value )'>";

return s;

Have you got it working with HTML component on view or have you made an own page with the above code?

BR
-Jokke

skiv71

hi thanks for that...

i'm trying to merge that with what i got going on for popup keypad

var s="";

s+='<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>'

s+='<link rel="stylesheet" type="text/css" href="keyboard.css">';

s+='<input type="text" size=3 value=' "+value+" ' class="keyboardInput" ';

s+='onChange='mango.view.setPoint("+ point.id +", ""+ pointComponent.id +"", this.value )'>';

return s;

but its not having it... i get lost in the parenthesis..

help?? lol

skiv71

ok, did some alterations, and got this...

var s="";

s+="<script type='text/javascript' src='keyboard.js' charset='UTF-8'></script>"

s+="<link rel='stylesheet' type='text/css' href='keyboard.css'>";

s+="<input type='text' size=3 value=' "+value+" ' class='keyboardInput' ";

s+="onChange='mango.view.setPoint("+ point.id +", ""+ pointComponent.id +"", this.value )'>";

return s;

which does work, but i got no icon for me keyboard :-/

Jokke

Hi,

you can use ' instead of " as browsers are accepting it. But in scritps it cannot be swapped. :)

I put the keyboard .css, .js and png files into tomcat root. This seems kind of working(the keyboard is not bound into the component):


var s="";

s+= "<script type='text/javascript' ";
s+= "src='keyboard.js' charset='UTF-8'>";
s+= "</script> <link rel='stylesheet' type='text/css' href='keyboard.css'> ";

s+="<input type='text' size=3  value='"+value+"' ";
s+="onChange='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", this.value )'  class='keyboardInput' vki_attached='true'>";

return s;

the "vki_attached='true'" is one experiment you can remove.

I did not get it working yet in "imageless"(without need to click on the icon). It can be changed simply by setting inside keyboard.js the this.VKI_imageURI = "keyboard.png"; to this.VKI_imageURI = "";

BR
-Jokke

Jokke

It did not work as easily. The HTML component is different than serverside script from browser point of view. The serverside script has the mouseover events for the mango popups, even if the "show controls" is unchecked. I think these are overiding the keyboard.js event listeners or they are not loaded at all.

One thing to check could be to put the onchange function to the HTML component, with proper numbers instead point.id and pointComponent.id . it would work if the point exists on the view.(maybe as a hidden serverside script). This is bit tricky as it would not show the current value and it is not too comfortable to define multiple points.

BR
-Jokke

mlohbihler

Hi guys,

I gave this a try myself. It's honestly a little bit tricky. Assuming that you wanted something like this on the watchlist (to set point values), i made the following changes:

added keyboard.* to resources/keyboard
set the following in watchlist.jsp:

&lt;tag:page dwr="WatchListDwr" js="view,keyboard/keyboard" onload="init"&gt;

added this to page.tag:

  &lt;link href="resources/keyboard/keyboard.css" type="text/css" rel="stylesheet"/&gt;

added this to changeContentText.jsp snippet:

&lt;script type="text/javascript"&gt;
  var n = $("txtChange${componentId}");
  n.VKI_clickless = 10;
  VKI_attach(n);
&lt;/script&gt;

added the following in view.js at around line 280:

        if (state.change != null) {
            show($("p"+ state.id +"ChangeMin"));
            if (!mango.view.setEditing) {
                $set("p"+ state.id +"Change", state.change);
                mango.view.runScripts($("p"+ state.id +"Change"));
        	}
        }

The thing about watchlist set inputs is that they are dynamically created, so they must also be dynamically attached to the keyboard input. The runScripts method in view.js takes care of the rest.

But, the keyboard itself is no in the set point div, so the div disappears as soon as you touch or hover over the keyboard, so you can't see what you are typing. Also, the enter key doesn't trigger an event on the set point input, so you need to hover over the set wrench again, and click on "set". These problems may be circumventable, but i didn't spend any more time on it.

The solution - if there is one - will probably work on the graphical views too since the way they work is similar.

skiv71

oh dear... :-/

would it be much to adapt the mouse over field (from the spanner) to allow popup of keypad. sort of extending the box to reveal?

or allow the spanner popup box to remain active and another click to deactivate... so a page keypad/keyboard can be used?

skiv71

hey hey... i have a free pop up keyboard solution that requires little or no programming changes to your mango instance...

relies on using a decent web browser (my choice is chrome)...

http://www.greywyvern.com/code/javascript/keyboard.user.js

now anywhere you have an entry field... just double click and weh hey!

one problem though... and i'm hoping mathew can help...

the settable items (spanner link) only show while mouse over hover...

could do with it latching in view... and hiding when a click is made else where... allowing the keyboard to work properly....

skiv71

i've downloaded the *.js and embedded a link into my instances so the use can get cooking there an then...

pity about ie8

mlohbihler

Might not be too bad, no, but there are no plans to do this in M2M. M2M2 maybe...