Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • 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


  • 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


  • 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


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


  • 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


  • ... additive bug kindly rectified by mathew :)


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

    just messing with html...

    <script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="keyboard.css">
    <input type="text" value="" class="keyboardInput">

    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


  • 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


  • 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


  • 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


  • 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 :-/


  • 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


  • 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


  • 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.


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


  • 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....


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

    pity about ie8


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