Reading a JSON structure from a web server page on a Siemens S7 1500 PLC

Question

I've been working with HTML and javascript to create graphical web pages to display data from my Siemens S7 1500 PLC. I've been using a $.getJSON command to successfully read values from the PLC when the web page that requests the information is served up by the PLC web server and in the same directory as the file with the JSON structure and all of the desired values.

I have a PC connected to my PLC via ethernet and wish to run a web page locally on the PC and read the values served up by a page from the PLC web server.

My current code for reading the values when the data to be read is in the same directory on the web server looks like:

<script type="text/javascript">
$(document).ready(function(){

    $.ajaxSetup({ cache: false });

    setInterval(function() {
        $.getJSON("inputs.htm", function(data){

            // Variable Declaration
            engineSpeed =                       data.engineSpeed;
            engineFuelLevelScaled =             data.engineFuelLevelScaled;
            powerEndDischargePressurePSI =      data.powerEndDischargePressurePSI;
            powerEndDischargeFlowRateBBLM =     data.powerEndDischargeFlowRateBBLM;
            powerEndSuctionPressurePSI =        data.powerEndSuctionPressurePSI;
        });

    },1000);
});

</script>

The "inputs.htm" file is simply:

{
"engineSpeed" : ":="WebData".engineSpeed:",
"engineFuelLevelScaled" : ":="WebData".engineFuelLevelScaled:",
"powerEndDischargePressurePSI" : ":="WebData".powerEndDischargePressurePSI:",
"powerEndDischargeFlowRateBBLM" : ":="WebData".powerEndDischargeFlowRateBBLM:",
"powerEndSuctionPressurePSI" : ":="WebData".powerEndSuctionPressurePSI:"
}

where "WebData" is a data block being updated with the values on my PLC.

I'm happy with how this has worked, but when I try to run a page locally to look at the "inputs.htm" page, it hasn't worked.

My PLC has the IP address 172.17.2.11 and I've changed the $.getJSON to:

$.getJSON("http://172.17.2.11/awp/GeminiOnline/inputs.htm", function(data){

and

$.getJSON("172.17.2.11/awp/GeminiOnline/inputs.htm", function(data){

though neither have worked. I know these are the correct web addresses as I can go to either of them and read the values I'm trying to access.

I have set the permissions on the web server of my PLC to allow all users full access so the login is no longer required. I'm wondering if there is a step I'm missing or some limitation of the $.getJSON structure that is preventing me from reading like this.

Any input would be appreciated. If you have any other methods by which I could read the current PLC values in a page hosted locally on the PC that would also be helpful.

Thanks in advance.

Angulate

what about CORS? you can't fetch stuff from a "foreign" website. – Brumfield

you can use JSONp if you can't set headers in that webserver, just wrap ex, "console.log(" and ")" around the "page" contents you already have, then point a script tag at the server instead of using ajax. – Grandmother

@Grandmother I'm relatively certain I can't set the headers for my web server. Could you elaborate on how to do what you said or do you have a link that might be able to help me out? Thanks. – Angulate

you're close. modify your ajax according to learn.jquery.com/ajax/working-with-jsonp, then literally replace { with callback({ and } with }); on inputs.htm and you should be up and running – Grandmother

@Grandmother Thanks for your help! – Angulate

Hi @RyanY I'm also attempting the same thing (siemens support said "Sorry, it's not possible"!) Did you manage to get it working? – Plumber

@Joshpbarron Check the code I posted below. – Angulate

Thanks Ryan, I'll give it a go tomorrow. I'm developing a large web app, and unfortunately £270 for 24MB is too much! – Plumber

Answer 1

I did end up solving my problem, though it required a completely different method of attacking it. It wasn't liking my cross domain requests and try as I might to get JSONp to work, I couldn't quite manage it. With the help of a colleague we developed the following:

<script>
    function httpGet(theUrl)
    {
    // Calls the initial request
        xmlhttp = new XMLHttpRequest();
        var date = new Date();
        xmlhttp.open("GET", theUrl + "?" + date.getTime(), false ); // Note that the + "?" + data.getTime() is used to trick the browser from using the cached results from a previous page request
        xmlhttp.send(); 

        // Sets a timing interval
        setInterval(function(){
        // If the request was successful, then parse the string and start a new request
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                // Extract the JSON String
                var jsonString = xmlhttp.responseText;
                data = $.parseJSON(jsonString);
                //YOUR CODE CAN GO HERE, USING THE DATA AS YOU WOULD REGULARLY
            }
        }, 1000);
    }

    httpGet("http://172.17.2.10/awp/GeminiOnline/inputs.htm");

Anyways, using the XMLHttpRequest() and the other functions I was able to read the data from my other page, just like I had with the .getJSON() from before.

Angulate