Use HTML5/Ajax on eWON - Printable Version

Switch to desktop version

Use HTML5/Ajax on eWON - Printable Version

+- Ewon Technical Forum (https://techforum.ewon.biz)
+-- Forum: Development (https://techforum.ewon.biz/forum-50.html)
+--- Forum: Custom Web Pages/viewON/Talk2M Visualization (https://techforum.ewon.biz/forum-55.html)
+--- Thread: Use HTML5/Ajax on eWON (/thread-81.html)

Use HTML5/Ajax on eWON - simon - 23-05-2016

Hi Guys,

Here are some HTML5/Ajax examples for eWON.

If you have questions about it, let me know.

RE: Use HTML5/Ajax on eWON - phongpham - 15-06-2016

Thank you Simon!

Do you have any documentations on using html/ajax with ewon? I'm also interested in the example for writing to eWon tags using html5/ajax?
That would be very appreciated!

RE: Use HTML5/Ajax on eWON - simon - 16-06-2016

Well, for that you have to use the eWON web form : http://IpOfeWON/rcgi.bin/UpdateTagForm?Tagname1=Tag1&TagValue1=123&Tagname2=...

See Web reference guide, page 11 : https://developer.ewon.biz/content/custom-web-pages

RE: Use HTML5/Ajax on eWON - jiayuan0727 - 06-09-2016

Good stuff. Thanks Simon.

Can you explain a bit more on jquery.js? Is it a standard subroutine which should be called to read tag values? Is it possible we need modify this code to suit customized webpages?

RE: Use HTML5/Ajax on eWON - Kevin - 06-09-2016

This is a rather long post, so I've included a brief summary to get you the answer you need.

tl;dr

Yes, this code is reusable, but you will need to make changes.

First, you need to modify the JSON that will be returned from tags.json.shtm.
Change the ID's and Values to represent the tags that you would like to read.

Then you need to change index.shtm to reflect the changes that you made to tags.json.shtm.

These changes might look like this:

New tags.json.shtm:

Code:
{ "YourTag1" : <%#TagSSI,your_tag_1%>, "YourTag2" : <%#TagSSI,another_tag%> }

New index.shtm

Code:
...

function TagValuesReceived(json)

{

    // Update value in webpage

    $("#Tag1Field").html(YourTag1);

    $("#Tag2Field").html(json.YourTag2);

    setTimeout("GetTagValues()", 1000);

}

...

<tr>

     <td>This is the value of Tag 1:</td>

     <td id="Tag1Field" style="color:blue" >No value</td>

     <td>Units</td>

</tr>

<tr>

     <td>This is the value of Tag2:</td>

     <td id="Tag2Field" style="color:blue" >No value</td>

     <td>Units</td>

</tr>

...

Explanation:

What is jQuery?

jquery.js is a lightweight JavaScript library designed to make unnecessarily complex JS tasks into simple one liners.
In the words of the developers:

Quote:jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

You can see more about jQuery on their website: jQuery.com.

It's a very common library for web development. You'll find it almost everywhere. (Examine the source code of this page for instance )

You could make an AJAX request without jQuery. jQuery simply makes it easier by providing an "ajax" function.
This allows us to create and send an ajax request to get the eWON's tags in one line as opposed to the 15 or so lines it takes without jQuery.

How does the code work?

This might be a little more than asked for, but it may be a good reference for someone else trying to get off the ground, so I'll leave it as is.

So, if we look at a stripped down form of the code provided by Simon, we see:

Code:
function GetTagValues()

{

    jQuery.ajax ( { url:"/usr/tags.json.shtm", dataType:"json", success:TagValuesReceived, error:TagValuesError, timeout:10000 });

}

function TagValuesReceived(json) {

        document.getElementById("Tank1").innerHTML = json.Tank1;

        setTimeout("GetTagValues()", 1000);

}

function TagValuesError() {}

GetTagValues();

How to get the tag values

So, the jQuery.ajax() function says to ask the location (url) "/usr/tags.json.shtm" for it's contents (dataType) as "json".
Then once we send that request, one of two things can happen. Either the request will fail or it will succeed.

When the request fails, it looks for the function defined as "error" (which Simon called "TagValuesError"). This could happen due to many reasons. Lost connection with the eWON, typo in the URL name, error in the tag file, etc.

When the request succeeds, it looks for the function defined as "success" (called "TagValuesReceived") and it will pass it the data it retrieved.

Handle retrieved tag values

In the function TagValuesReceived(json), several things are done.
The first thing is that we update our webpage with the new tag values we have received from our ajax request. This looks like:

Code:
document.getElementById("Tank1").innerHTML = json.Tank1;

Where Tank1 is the id of the DOM element as well as the id of the tag you want to update.

Keep in mind, we could also simplify this a little bit by using a jQuery selector, since we have jQuery loaded anyways.

Code:
$("#Tank1").html(json.Tank1);

After that, the setTimeout function is used with two arguments "GetTagValues()" and 1000.
This tells the JavaScript interpreter to launch the function GetTagValues() after 1000 milliseconds.

This is useful because it continuously updates the contents of the webpage without the user having to reload it in their browser.

Define what tags will be received

tags.json.shtml

Unfortunately there is more to the story than just that. We have to tell the eWON what to return to us when we send the ajax call to "tags.json.shtm".

If you open the file "tags.json.shtm" in the examples Simon posted, you will see that he is using a functionality which eWON refers to as SSI or Server Side Include. Basically, before sending the HTML page back to us, the server will look through it and find tokens like:

Code:
<%#TagSSI,Tank1%>

When the server parses the page and comes across <% %> it will look inside those tags and find what it's being asked to do. In our case, we have the contents #TagSSI, Tank1. This tells the eWON that it should replace these tags with the current value of Tank1.

To find more information about SSI, find the PDF on this website and navigate to page 3.

RE: Use HTML5/Ajax on eWON - Ludo - 07-09-2016

Very well explained Kevin ! You've got my upvote for such a detailed explanation !

RE: Use HTML5/Ajax on eWON - mzapatav - 10-01-2017

Hi, I use your custom web samples and work great, but I wondering if is posible to display the historical data of a tag in a table.

RE: Use HTML5/Ajax on eWON - simon - 11-01-2017

You can use the export block descriptor for that (See helper on http://ewonsupport.biz/ebd/). The Export block descriptor are explained in the General Reference Guide of the eWON (https://ewon.biz/sites/default/files/rg-001-0-en-general_reference_guide.pdf).
With this, you can directly get an HTML page with the Historical data or you can get it in a Text format that you query through an Ajax request and parse in your javascript...

RE: Use HTML5/Ajax on eWON - mzapatav - 11-01-2017

Hi simon, I was able to get the data and show it on the webpage, now I'm trying to show a graph, I'm trying with this code :

Code:
<%#ParamSSI,[$dtHL$ftG$st_m30$et_m0$tnAnalogo1]%>

I get an error that is in the attachment

later I tried with this:

Code:
<img border="0" src="/rcgi.bin/ParamForm?AST_Param=$dtRL$ftG$tnAnalogo1">

And I get this text in a square box "No data to display"

RE: Use HTML5/Ajax on eWON - simon - 12-01-2017

The first code cannot work indeed as it will be interpreted as text data by the web browser.

The second one is correct. Now, it seems that you want to display Real Time logging of the Tag "Analogo1" but there is no real time logging defined.
Do not confuse with Historical Logging, which is different from the RealTime logging.

RE: Use HTML5/Ajax on eWON - mzapatav - 12-01-2017

(12-01-2017, 11:44 AM)Simon Wrote: The first code cannot work indeed as it will be interpreted as text data by the web browser.

The second one is correct. Now, it seems that you want to display Real Time logging of the Tag "Analogo1" but there is no real time logging defined.
Do not confuse with Historical Logging, which is different from the RealTime logging.

Thank you Simon, I change the RL to HL and now the graph is showing data.