Posts: 185
Threads: 38
Joined: Feb 2017
Reputation:
3
03.10.2018, 07:23
(This post was last modified: 03.10.2018, 07:29 by Trond Hoyem.)
(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 
There are 10 kinds of people in the world; those who can read binary and those who don't 
Posts: 1764
Threads: 6
Joined: Jul 2015
Reputation:
117
03.10.2018, 07:50
(This post was last modified: 03.10.2018, 07:51 by Erwin van der Zwart.)
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
Posts: 185
Threads: 38
Joined: Feb 2017
Reputation:
3
(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
Posts: 185
Threads: 38
Joined: Feb 2017
Reputation:
3
(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
Posts: 1764
Threads: 6
Joined: Jul 2015
Reputation:
117
10.10.2018, 00:17
(This post was last modified: 10.10.2018, 10:12 by Erwin van der Zwart.)
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
Posts: 185
Threads: 38
Joined: Feb 2017
Reputation:
3
(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)
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
Posts: 185
Threads: 38
Joined: Feb 2017
Reputation:
3
(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)
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
Posts: 1764
Threads: 6
Joined: Jul 2015
Reputation:
117
12.10.2018, 08:01
(This post was last modified: 12.10.2018, 08:02 by Erwin van der Zwart.)
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
Posts: 1764
Threads: 6
Joined: Jul 2015
Reputation:
117
12.10.2018, 18:53
(This post was last modified: 12.10.2018, 19:01 by Erwin van der Zwart.)
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
Posts: 185
Threads: 38
Joined: Feb 2017
Reputation:
3
(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)
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
Posts: 185
Threads: 38
Joined: Feb 2017
Reputation:
3
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
|
