This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Show control inline in PC/Tablet
#29
Hi,

I found some spare time (: 

Add the text 'read-only' to the comment field of the object to make it read only and this sample sorts the objects by name: (can be disabled by adding // before line 52)
Code:
-- use this path in your iframe: /user/input.lp

dst = '/www/user/input.lp'
io.writefile(dst, [[
<!DOCTYPE html">
<head>
 <script type="text/javascript" src="/scada/vis/jquery.js.gz"></script>
 <script src="/apps/js/localbus.js.gz"></script>
 <script src="/scada/vis/busdecode.js.gz"></script>
 <style type="text/css">
   body {
       background-color: transparent;
   }
   .inputlabel{
     display: inline-block;
     width: 150px;
     max-wid2h: 200px;
     margin-left: 10px;
   }
   .stringinput{
     width: 240px;
     margin-left: 10px;
     margin-top: 5px;
   }
   .savebtn{
     width: 120px;
     margin-left: 50px;
   }

 </style>
</head>
<body>
 <?
   require('apps')
 ?>
 <script>
 localbus.init();
 var objects = <? json.write(grp.tag('String')) ?>;
 
 function sortbyname(a, b) {
    const NameA = a.name.toUpperCase();
    const NameB = b.name.toUpperCase();
    let comparison = 0;
    if (NameA > NameB) {
       comparison = 1;
    } else if (NameA < NameB) {
       comparison = -1;
    }
    return comparison;
 }

 objects.sort(sortbyname);

 function createInput(name, address, id, comment){
    if(comment.includes("read-only") == true){
       var $inputreadonly = $('<label id="label_' + id + ' " class="inputlabel">' + name + '</label><table width="100" border="0"><tr><input id="input_' + id + '" class="stringinput" type="text" maxlength="255" disabled/></tr><tr><input id="button_' + id + '" class="savebtn" type="button" value="Save" disabled/></tr></table>');  
       $inputreadonly.appendTo($("body"));
    } else {
       var $input = $('<label id="label_' + id + ' " class="inputlabel">' + name + '</label><table width="100" border="0"><tr><input id="input_' + id + '" class="stringinput" type="text" maxlength="255" /></tr><tr><input id="button_' + id + '" class="savebtn" type="button" value="Save" /></tr></table>');
       $input.appendTo($("body"));  
    }
 }
 
 function addevent(address, id){
   $("#button_" + id).data("address", address);
   $("#button_" + id).data("id", id);
   $("#button_" + id).on( "click", function(e) {
      localbus.write(address, $("#input_" + $(e.target).data('id')).val());
   });
  }
 
 for (var i in objects) {
    createInput(objects[i].name, objects[i].address, objects[i].id, objects[i].comment);
 }
 
 $(document).ready(function() {
   for (var i in objects) {
     addevent(objects[i].address, objects[i].id);
     $("#input_" + objects[i].id).val(objects[i].value);
   }
 });
 
 </script>
</body>
</html>
]])
script.disable(_SCRIPTNAME)
Tip: Compare the 2 samples to see what is have changed and you learn a bit how all fits together..

BR,

Erwin
Reply


Messages In This Thread
Show control inline in PC/Tablet - by Mirco - 26.01.2017, 06:51
RE: Show control inline in PC/Tablet - by Erwin van der Zwart - 12.10.2018, 18:53

Forum Jump: