Logic Machine Forum
Show control inline in PC/Tablet - Printable Version

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

Pages: 1 2

Show control inline in PC/Tablet - Mirco - 26.01.2017

Hi,
I have an object that is a 255 byte string and I would display it in line in the visualization. If I check Show control it returns an error.
I don't want that when the user have to write, he must click on the object that open the popup where to write.
Have you any idea how to do that?

Thanks!

RE: Show control inline in PC/Tablet - Mirco - 27.01.2017

Please someone have any idea how to do that? Huh

Because the popup is horrible, and the client don't like it Confused

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

Hi,

What error do you get when enable show control?

BR,

Erwin

RE: Show control inline in PC/Tablet - Mirco - 27.01.2017

This is the error:

Cannot enable Show control for this object

Possible reasons:
• Read-only is enabled
• Send fixed value is not empty
• Widget is selected
• Object datatype is either Time, Date or Color
• Control type is set to Custom value select

My object is a 255 byte string, I attach the property:

RE: Show control inline in PC/Tablet - admin - 27.01.2017

Try this script, it will enable show control for all elements mapped to group address 1/1/14. No guarantees that it will work though Smile
Code:
addr = '1/1/14'

require('json')
object = knxlib.encodega(addr)
items = db:getall('SELECT id, params FROM visobjects WHERE object=?', object)
for _, item in ipairs(items) do
  params = json.pdecode(item.params)
  if type(params) == 'table' then
    params.showcontrol = 1
    params = json.encode(params)
    db:update('visobjects', { params = params }, { id = item.id })
  end
end


RE: Show control inline in PC/Tablet - Mirco - 27.01.2017

Thanks admin, but where I have to put it?

RE: Show control inline in PC/Tablet - admin - 27.01.2017

Rut it as a script once

RE: Show control inline in PC/Tablet - Mirco - 27.01.2017

I tryed to put it in the init script but it didn't work, then I tryed to put it in the Javascript code but it didn't work.
Sorry I forgot to restart the HomeLYnk after put the code in the init script, now it work! Thank you!!! Big Grin

RE: Show control inline in PC/Tablet - admin - 27.01.2017

Create either an event or a resident script, run it and then disable it.

RE: Show control inline in PC/Tablet - Mirco - 27.01.2017

Thank you very much! Big Grin
Now I have only a problem, how can I change the width of this object, because when I change it via CSS it is overwritten by:
Code:
elemento {
   width: 225px;
}

that I don't be able to change it..
SOLVED: I put this code into javascript:
Code:
$(".Email > div > div > input").attr("style", "width: 700px;");

Big Grin

RE: Show control inline in PC/Tablet - admin - 27.01.2017

you can add !important to CSS rules you want to over-ride.
Code:
.customcls {
    width: 225px !important;
}


RE: Show control inline in PC/Tablet - Mirco - 27.01.2017

Faster way, thanks! Smile

RE: Show control inline in PC/Tablet - Mirco - 27.01.2017

I have another problem: when I change the string inside the input box, but don't press enter or the button, the value displayed don't return to the value of the object until I refresh the page, neither if I change page.
Do you have any advice? Smile

RE: Show control inline in PC/Tablet - admin - 27.01.2017

This is why it's not possible to enable show control for text input by default Smile

RE: Show control inline in PC/Tablet - Mirco - 27.01.2017

Damn Dodgy
Ok, then how can i set the text of the input box? because I tryed this code:
Code:
$(".Email > div > div > input").attr("value", "EXAMPLE");
but the text does't change.

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

Hi,

I would create a html with input fields and use javascript to set values to LM and embed it with a iframe into the visu.

BR,

Erwin

RE: Show control inline in PC/Tablet - Mirco - 27.01.2017

Erwin can you make an example? Because I don't know how to do that. Big Grin

RE: Show control inline in PC/Tablet - admin - 27.01.2017

Use .val("new value") instead of .attr(...)

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

(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

RE: Show control inline in PC/Tablet - Mirco - 30.01.2017

(27.01.2017, 17:14)admin Wrote: Use .val("new value") instead of .attr(...)

Thanks you admin! Now it works!   Smile

This is the code I used:
Code:
var visible = false;
 
 setInterval(function() {
   var state = $('#widget-7').is(':visible');
   if (state != visible) {
     visible = state;
     if (state == false) {
       var tmp = objectStore.objects[Scada.encodeGroupAddress('15/7/215')].value;
       //console.log(tmp);
       $(".Email > div > div > input").val(tmp);
     }
   }
 }, 1000);

When the "widget-7" that contains the text input is closed the text inside the input box is reset!



(28.01.2017, 12:43)Erwin van der Zwart Wrote: 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

Thank you Erwin! It works really well! Smile

Now that I understand how to use iframe, we can do almost what we want! Smile