General procedure

1. Create a web project in LSC.

2. Open the web project temp folder.

3. Open the main.htm file with your IDE.

4. Copy and paste below code of the customized components example to replace the content between <div id="main"> and </div> in the main.htm file.

5. Save the file.

6. Download the diagram and the web project to LOGO! and start the device.

7. Visit the web project in a web browser.

Note After customizing the page file, you cannot edit the web pages with LSC. Otherwise, the web project will be overwritten.

Example of customized components

Below is an example of customized components:

<div id="main" style="width:1440; height:900">

<!-- analog case: binding VD0 Unsigned -->
<div class="server_binding" show_function="myCallback" show_param="testAnalog" id="testAnalog"
range="132" address="0" type="6" length="1" block_format="Unsigned"
style="position: absolute; left: 100px; top: 500px;">
<input type="text" value="">
<input type="button" value="submit" onclick="mySubmit(this)">
</div>

<!-- analog case: binding VD0 Float -->
<div class="server_binding" show_function="myCallback" show_param="testAnalogFloat" id="testAnalogFloat"
range="132" address="0" type="6" length="1" block_format="Float"
style="position: absolute; left: 100px; top: 550px;">
<input type="text" value="">
<input type="button" value="submit" onclick="mySubmit(this)">
</div>

<!-- digital case: binding M1 Bool -->
<div class="server_binding" show_function="myCallback" show_param="testDigital" id="testDigital"
range="131" address="0" type="1" length="1" block_format="Bool"
style="position: absolute; left: 100px; top: 600px;" >
<input type="text" value="">
<input type="button" value="submit" onclick="mySubmit(this)">
</div>

<script type="text/javascript">
function myCallback() {
let value = this.m_sValue; // get real-time value from framework
let id = this.m_sShowParam;// DIV ID
let bindObj = $("#" + id); // DIV Obj
value = _getFormatValue(bindObj, value); // Format realtime value with bingding info
$("#" + id).find("input:first").attr("placeholder", value); // set to your inputText
}

function mySubmit(obj) {
let divID = $(obj).parent().attr("id"); //find DIV ID
let bindObj = $("#" + divID); // DIV Obj
let inputVal = bindObj.find("input:first").val().trim(); // get your input
let value= _getFormatValue(bindObj, inputVal); //format input with bingding info by api method
_doSetValue(divID, value); //do submit by api method
}
</script>


</div>

Specification

1. All you custom codes have to be added  between <div id=”wrap”>  and </div>.

2. The following four parameters define the LOGO! data access and callback JavaScript function: 

   • class="server_binding": LOGO! JavaScript will scan all the DIVs and transfer data with those DIV having server_binding class.

   • id="mydiv" : You should assign id and show_param with the same DIV.

   • show_param="mydiv": You should assign id and show_param with the same DIV.

   • show_function="myCallback":You need to implement a callback JavaScript function and assign its name to “show_function”.

3. The following four parameters describes the data:

   • range="132": V

   • type="6":WORD

   • address="0":0

   • length="1": 1

   For detailed information, see Data format

4. In your callback method, you can get your binding value by this.m_sValue.

5. The global function _getFormatValue helps you to format data with div binding info.

6. The global function _doSetValue helps you to submit data with div binding info.