Show control inline in PC/Tablet

Show control inline in PC/Tablet - Printable Version

+- LogicMachine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: OLD visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Show control inline in PC/Tablet (/showthread.php?tid=577)

Pages: 1 2

RE: Show control inline in PC/Tablet - Trond Hoyem - 03.10.2018

(28.01.2017, 12:43)Erwin van der Zwart Wrote:
(27.01.2017, 15:33)Mirco Wrote: Erwin can you make an example? Because I don't know how to do that.

Hi Mirco,

You can create a HTML file like this and put it in a iframe with this URL "/user/input.html", run this LUA code once to create the file:

Code:
-- use this path in your iframe: /user/input.html dst = '/www/user/input.html' io.writefile(dst, [[ <!DOCTYPE html"> <head> <script type="text/javascript" src="/scada/vis/jquery.js.gz"></script> <style type="text/css"> body { background-color: transparent; } .stringinput{ width: 240px; } .savebtn{ width: 120px; } </style> </head> <body> <table width="100" border="0"> <tr> <input id="value1" class="stringinput" type="text" maxlength="255" /> </tr> <tr> <input id="btnsave1" class="savebtn" type="button"value="Save" /> </tr> </table> <table width="100" border="0"> <tr> <input id="value2" class="stringinput" type="text" maxlength="255" /> </tr> <tr> <input id="btnsave2" class="savebtn" type="button"value="Save" /> </tr> </table> <script> var p = window.parent; var obj1dpt; var obj2dpt; if (p && p.objectStore){ addr1 = p.Scada.encodeGroupAddress('1/2/34'); p.objectStore.addListener(addr1, function(obj, type) { $("#value1").val(obj.value); obj1dpt = obj.rawdatatype; }); addr2 = p.Scada.encodeGroupAddress('1/2/35'); p.objectStore.addListener(addr2, function(obj, type) { $("#value2").val(obj.value); obj2dpt = obj.rawdatatype; }); $("#btnsave1").on("vclick",function(){ var value1 = $('#value1').val(); p.setObjectValue({ address: ('1/2/34') , rawdatatype: obj1dpt }, value1, 'text'); }); $("#btnsave2").on("vclick",function(){ var value2 = $('#value2').val(); p.setObjectValue({ address: ('1/2/35') , rawdatatype: obj2dpt }, value2, 'text'); }); }; </script> </body> </html> ]]) script.disable(_SCRIPTNAME)

BR,

Erwin

Hi Erwin

Very nice function. But I have one question; Is it possible to add a label to the table as well?
I am not experienced with html at all, so I have no idea how to do that...

Trond

...and one more thing; I want to do this for a lot of objects. How do I loop thru a list of objects and make one entry pr object?

Again, I am not experienced in this, so I need help to do these kind of things Wink

RE: Show control inline in PC/Tablet - Erwin van der Zwart - 03.10.2018

Hi,

What label do you want to add? Object name?

Yes we can do a loop (: I think creating a loop from objects with a certain tag will work best..

I noticed it uses some old commands and i need to update them to latest commands as well..

BR,

Erwin

RE: Show control inline in PC/Tablet - Trond Hoyem - 03.10.2018

(03.10.2018, 07:50)Erwin van der Zwart Wrote: Hi,

What label do you want to add? Object name?

Yes we can do a loop (: I think creating a loop from objects with a certain tag will work best..

I noticed it uses some old commands and i need to update them to latest commands as well..

BR,

Erwin

Hi
The object name for sure is a way to go, although they are somewhat technical in the naming. But for the project I am doing right now, the users are very technical, so I do not think they mind.

Altertatively, I could use two lists; one with the objects and one with the label names.

Trond

RE: Show control inline in PC/Tablet - Trond Hoyem - 07.10.2018

(03.10.2018, 07:50)Erwin van der Zwart Wrote: Hi,

What label do you want to add? Object name?

Yes we can do a loop (: I think creating a loop from objects with a certain tag will work best..

I noticed it uses some old commands and i need to update them to latest commands as well..

BR,

Erwin

Hi Erwin
Sorry to nag you, but have you had any chance to have a look at this issue?

For the project I am doing now, I think a loop through tagged objects using object names as label will do just fine.

BR
Trond

RE: Show control inline in PC/Tablet - Erwin van der Zwart - 10.10.2018

Hi,

Try this:

I used the tag 'String' to select the tagged objects and changed from .html to .lp for support of client side LUA.

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 createInput(name, address, id){
     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);
  }
  
  $(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)

BR,

Erwin

RE: Show control inline in PC/Tablet - Trond Hoyem - 10.10.2018

(10.10.2018, 00:17)Erwin van der Zwart Wrote: Hi,

Try this:

I used the tag 'String' to select the tagged objects and changed from .html to .lp for support of client side LUA.

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 createInput(name, address, id){ 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); } $(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)
BR,

Erwin

Hi
Great! Thanks a bunch!

I will test this in a day or two - need to do some other work right now. I will let you know how it plays out.

BR
Trond

RE: Show control inline in PC/Tablet - Trond Hoyem - 12.10.2018

(10.10.2018, 00:17)Erwin van der Zwart Wrote: Hi,

Try this:

I used the tag 'String' to select the tagged objects and changed from .html to .lp for support of client side LUA.

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 createInput(name, address, id){ 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); } $(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)
BR,

Erwin

Hi Erwin

Just tested this now, worked like a charm! Thanks a lot for the support!

Now, only one more question;
I think I will use this script in a lot of projects. And then also for read only objects. Is there a way to set one field as read only? The save button part, I guess I can just leave out in that case, but I may not always want the customer to be able to edit the values.

And one more question;
In future projects, I might need a different sorting order. Is that something that can be added also?

BR
Trond

RE: Show control inline in PC/Tablet - Erwin van der Zwart - 12.10.2018

Hi,

Yes all can be created, but i'm not the integrator here, i would advice you to read articles at w3schools.com to learn about HTML5, CSS and JS.

BR,

Erwin

RE: Show control inline in PC/Tablet - Erwin van der Zwart - 12.10.2018

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

RE: Show control inline in PC/Tablet - Trond Hoyem - 15.10.2018

(12.10.2018, 18:53)Erwin van der Zwart Wrote: 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

Fantastic!

Will test it, and use some time trying to learn this also. I have just managed to learn LUA, so this will be next step.

BR
Trond

RE: Show control inline in PC/Tablet - Trond Hoyem - 16.10.2018

Tested today.
Works very well. I will use this for future solutions also, just need to learn how to manipulate the properties of the different fields I need for the different projects.

This is a great start though.

BR
Trond