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
#21
(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. Big Grin

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
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#22
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
Reply
#23
(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
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#24
(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
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#25
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
Reply
#26
(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
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#27
(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
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#28
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
Reply
#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
#30
(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
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#31
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
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply


Forum Jump: