Show value in real time on webpage

Agent Code
1

At this time, my agent generate an HTML page that show static value of all my input, this is great, but I would like the value on the page to display themself without having to click on refresh

is that even possible?

2

I believe this blog should give guidance:
https://community.electricimp.com/tutorials/how-to-build-interactive-web-pages-with-ajax-jquery-and-rocky/

3

Thanks

4

its kind of doing what I need :
Now I can have the value thats in my agent on my web page…nice

Now I need to have the value displayed on screen refreshing itself without having to click on anything?

is that even possible?

5

the same way this page show the time

http://liveclock.net/

6

I am on my phone, but try “Javascript timer” on Google, that should bring up some results on what you need. Use the timer instead of a button, and it will refresh it for you.

7

you would probably add something like
.always(function() { setTimeout(getState, 15000); })
at the end of that “getState” or possibly the “setState” ajax function shown in the blog.
This would then auto refresh the getting and/or the sending of data every 15 seconds.

8

You could use firebase libraries on both the agent and JavaScript/html ends. Real-time cloud in the middle pushes/pulls the data for what you want. A little more setup, but very powerful.

9

I’m already using firebase but I want to limit what I put there, because you pay for trafic, If my webpage can request the imp directly, its perfect :stuck_out_tongue:

10

Here is my code :

The js will obtain the value, but only once…and from what I expect, it should be doing it each 200ms

:frowning:
`$(document).ready(function() {
// This is my test setup agent url. Update this with your agent url.
// Your agent url can be found in the Electric Imp ide at the top of the agent codeing window.
var agentURL = “https://agent.electricimp.com/xxxxxxxxx”;

setInterval(getState(updatePowerSetting),200);

function updatePowerSetting(power) {

    $('.power-status span').text(power);
}

function getState(callback) {
    $.ajax({
        url : agentURL + '/state',
        type: 'GET',
        success : function(response) {
            if (callback && ('state' in response)) {callback(response.state)};
        }

    });
}

})
`

11

Yes because the setInterval method only triggers once. You need to use the “.always” method to repeat the command when the function has completed its tasks. Note you may need to change the syntax of your $.ajax function, as I don’t believe “always:” works (never tested this actually).

A word of caution though. You would never use milliseconds for webpage updates due to latency. You are more likely to cause your webpage to freeze up at this high update rate. A minimum may be 2 or 3 seconds but then make sure your webpage is robust and working smoothly first. If you wanted real time you would need to consider a different protocol altogether, namely webRTC. Not sure if this peer to peer protocol works with Imp though.

12

My imp code goes like this :
`// Copyright © 2015 Electric Imp
// This file is licensed under the MIT License
// http://opensource.org/licenses/MIT

// AJAX LED Example - agent code

////////////////////// ROCKY SETUP //////////////////////////

#require "Rocky.class.nut:1.1.1"
app <- Rocky();
I1_Name <- "blablabla"
I1_Value <- 999
dyn <- “”

///////////////////// DEVICE LISTENER ///////////////////////

app.get("/dyn", function(context) {
dyn = { color = { red = 1, green = 2, blue = 3 } };

server.log("get from html")
context.send(200, dyn);

});

`

and my java go like this
`$(document).ready(function() {
// This is my test setup agent url. Update this with your agent url.
// Your agent url can be found in the Electric Imp ide at the top of the agent codeing window.
var agentURL = “https://agent.electricimp.com/LfOKbcC55URi”;
var refreshdelay = 500;

var I1_Value = 0 ;
var I1_Name  = "1";

function updateInput(e) {
    //e.preventDefault();
    I1_Name = checkColorInput ( $('#red'  ).val() );
    I1_Value = checkColorInput( $('#green').val() )
    $('.I1' ).text(I1_Name+" : "+I1_Value);
}

function checkColorInput(input) {
    input = parseInt(input);
    if ( isNaN(input) ) {
        return "NaN";
    } else {
        return input;
    }
}

function getdyn(callback) {
    $.ajax({
        url: agentURL + '/dyn',
        type: 'GET',
        success : function(response) {
            if (callback && ('color' in response)) {callback(response.color)};
        }
    });
}

setInterval(function (){
    getdyn(updateInput());}, refreshdelay);

})

`

I’m expecting the value in I1_Name to be 1 and the value in I1_Value to be 2, its not, and i’ve past the last 5hours trying to understand :stuck_out_tongue:

Good thing is , setInterval is working with an anonymous function