Updating Div data from a Json file without blinking the screen

Navigation
2

I'm using the script below to get values that are in a Json file (which is stored in industrial automation equipment connected to a TCP / IP network and is a "type" of a basic ULTRA web server) and put them into Divs of a html page based on the Div ID. The script is inside that index.html file that is stored on my PC which is also connected on the same network.

This "server" is ULTRA limited because it does not allow me to do any special configuration to avoid the problem of cross-domain, it does not run anything server-side and has very little memory (30Kb). That's why I have to run the pages that take information from this machine, on my PC. Basically it takes sensor information from an industrial plant and replaces values of type ":=" BD ".TAG:" (from the Json file that is in it) into known values.

Script within index.html 

<script>
    function callback(json)
    {
        document.getElementById("Nro_Ensaio").innerHTML = json.Nro_Ensaio;
        document.getElementById("SP_Pelotas1").innerHTML = json.SP_Pelotas;
        document.getElementById("SP_Pelotas2").innerHTML = json.SP_Pelotas;
        document.getElementById("PV_Pelotas1").innerHTML = json.PV_Pelotas;
        document.getElementById("Status").innerHTML = json.Status;
    }
</script>
<script type="text/javascript" src="http://192.168.0.103/awp/VAR_PRENSAS/ensaio.json"></script>

Essay.json

callback({'Inicia':':="ENSAIO".CMDS.LIBERA:',
    'Rearme': ':="ENSAIO".CMDS.RESET:',
    'Nro_Serie': ':="ENSAIO".Nro_Serie:',
    'Modelo': ':="ENSAIO".Modelo:',
    'Nro_Ensaio': ':="ENSAIO".Nro_Ensaio:',
    'Pronto': ':="ENSAIO".Pronto:',
    'Data': ':="ENSAIO".Data:',
    'Hora': ':="ENSAIO".Hora:',
    'SP_Pelotas': ':="ENSAIO".SP_Pelotas:',
    'PV_Pelotas': ':="ENSAIO".PV_Pelotas:',
    'Status': ':="ENSAIO".Status:'
});

When I open the index.html file in any browser I can see the data received by this device, but I need these values updated every second. I tried to update the page with the code below, but the data I receive from the device blinks during the page refresh. 

<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
    setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>
</head>
<body onload="JavaScript:timedRefresh(1000);">
How can I do to read this json file every second and refresh the index.html page data without "blinking" the page during the update?

    
asked by anonymous 18.07.2014 / 02:31

1 answer

1

In this case, in order not to "blink" the screen, you should call javascript several times and not location.reload() .

Change the function of setTimeOut to call the Callback and put the Callback call at the end of the body.

Example

HTML 

<body>

<script>
    function callback(json)
    {
        document.getElementById("Nro_Ensaio").innerHTML = json.Nro_Ensaio;
        document.getElementById("SP_Pelotas1").innerHTML = json.SP_Pelotas;
        document.getElementById("SP_Pelotas2").innerHTML = json.SP_Pelotas;
        document.getElementById("PV_Pelotas1").innerHTML = json.PV_Pelotas;
        document.getElementById("Status").innerHTML = json.Status;
    }
</script>

<script type="text/javascript" src="http://192.168.0.103/awp/VAR_PRENSAS/ensaio.json"></script></body>

Ensaio.json

setTimeout(function(){callback({'Inicia':':="ENSAIO".CMDS.LIBERA:',
            'Rearme': ':="ENSAIO".CMDS.RESET:',
            'Nro_Serie': ':="ENSAIO".Nro_Serie:',
            'Modelo': ':="ENSAIO".Modelo:',
            'Nro_Ensaio': ':="ENSAIO".Nro_Ensaio:',
            'Pronto': ':="ENSAIO".Pronto:',
            'Data': ':="ENSAIO".Data:',
            'Hora': ':="ENSAIO".Hora:',
            'SP_Pelotas': ':="ENSAIO".SP_Pelotas:',
            'PV_Pelotas': ':="ENSAIO".PV_Pelotas:',
            'Status': ':="ENSAIO".Status:'
        });
    }, 1000);
    
18.07.2014 / 02:42
Serialization - WebApi for WCF with base type property (abstract) Problem with CSS button positioning