1

First off, thanks to all of the great answers that I have seen that have helped me out with past projects.

Here is what I'm trying to do. I am putting together a home automation system and one of the things I would like to do is send a request to my web server and have it give me a status in real time.

99% of this, I have working. What I am needing (wanting) to do now is have a simple page check the status of a file on my webserver and have it change an image accordingly in real time.

The content of the file will be one of the following words ONLY:

On, Off, Open or Closed.

I can use a page refresh and my back-end ASP will do the work, but I am wanting something a little more elegant than page flicker on a refresh. So, I figured if there was some way to check the contents of the file in JavaScript, then I can just do something like the following using the contents of the file in the variable fileContents:

document.GetElementById('image').src = 'MyServer.address/GFX/' + fileContents + '.png'

This way when the file gets changed on my server, the image displayed on the page changes in (near) real time without flicker.

Please help me find the missing link in this scenario.

I would like to keep the resulting page as compact as possible. Here is a sample of the page that my ASP generates:

http://ssbbs.dyndns.org/panic/isy.asp?A=3D30711&T=S

It shows a green circle if the device I'm polling is on and a blue circle if the device is off.

The file I will read as an example is:

http://ssbbs.dyndns.org/panic/ISY/3D30711.txt

Kevin Dunn
  • 11
  • 3

2 Answers2

0

Use Javascript AJAX call to your ASP script. You could get the status and update the page with no refreshes at all. JQuery is particularly useful for things like this.

MichaelJ
  • 39
  • 7
  • I was hoping to be able to do it with pure JavaScript and not have to load a jQuery library. I want to keep the end result as light weight as possible. It's ultimate use is feedbacks for Insteon lighting via iRule. iRule provides feedbacks but for some reason, more than 1 feedback for an Insteon device causes the feedback update to take forever and it multiplies for each feedback added. Since I will have lots of these per page, keeping them light is a huge benefit. jQuery in this instance is a ton of unneeded overhead. – Kevin Dunn Jan 21 '16 at 23:24
0

I figured a way to accomplish my end goal, thought not completely elegant, it's simple and small which fills my main requirements.

The flickering refreshing page is now held in a hidden iframe and then a repeating javascript updates the static page without flicker. The refreshing page no longer has the display image, but simply the source filename of the image updated by the javascript. IE: GFX/feedback/Off.png

<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <STYLE>
      BODY {background: #000000; color: #FFFFFF;}
      #isy {visibility: hidden; height:0px;width:0px;}
    </STYLE>
  </HEAD>
  <BODY onload="isyRead();">

    <IMG ID="state" SRC="GFX\feedback\blank.png">

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
        function isyRead() {
            var isy = document.getElementById('isy');
            if (isy.contentDocument) isy.contentDocument.location.replace("isyRead.asp?A=3C3FE71&T=S");
            else isy.src = "isyRead.asp?A=3C3FE71&T=S";
            setTimeout(function(){document.getElementById('state').src=isy.contentWindow.document.body.innerHTML}, 100);
            setTimeout(isyRead, 4000 );
        }
    </SCRIPT>

    <IFRAME SRC="about:blank" ID="isy"></IFRAME>
  </BODY>
</HTML>

Hopefully someone else will find this helpful.

Kevin Dunn
  • 11
  • 3