Using jquery with Spinneret

doggiedoc · 2013-02-10 10:16

I think this is working correctly. I was looking for a way to refresh only one <div> on the page without reloading the whole page. This is what I came up with:

DAT
  index byte  "HTTP/1.1 200 OK", CR, LF, {
}             "Content-Type: text/html", CR, LF, CR, LF, {
}             "<HTML>", {
}             "<HEAD>", {
}             "<TITLE>Willoughby Farm</TITLE>"

        byte  "<script src='http://code.jquery.com/jquery-latest.js'></script>"
        byte  "<SCRIPT LANGUAGE='JavaScript'>",CR,{

}             "function timedRefresh() {",CR,{
}             "         setTimeout('update()',5000);",CR,{
}             "         }",CR, {
}             "function update() {",CR,{
}             "         $('#refresh_data').load('/ #refresh_data');",CR,{
}             "         timedRefresh()",CR, {
}             "         }",CR, {
}             "</SCRIPT>",CR, {


}             "</HEAD>" 
 
        byte  "<BODY Onload='timedRefresh()'>"

It appears to function as expected; the whole page is obviously not reloading in the browser, just the data.

Any comments or criticisms are welcome. Attached is the project zipped.

Doc

EDIT: It occurred to me that I didn't give credit to Mike G for his help. I've only slightly modified his original code. Thanks Mike! And of course Beau Schwabe's code got me started! Thanks Beau!

Mike G · 2013-02-11 07:59

Cool... I like the AJAX or JQuery methods of rendering Spinneret page content,

Moskog · 2013-02-11 08:44

Refresh looks good. I'm currently working with a cathouse project. Thats a little house with heat cable in the floor where my outdoor cats can relax. The house will have a led-display at the front side allowing me to read current temperature inside the cathouse and outside environment. The propeller will control the floor heat based on these temperatures. The project will also include an RS485 unit for communication with a propeller that again controls a spinneret. We are now awaiting a kind of cat-detector from mr Piong Yang in HK, this device will, if it works, give the system an indication of resting cat or not inside the house. Beside a videocamera outside the house there are also a camera inside. But the problem is that the cat found its favourite resting place in the blind zone of the camera, just below the camera itself. Here is an earlier infrared screenshot from my kitchen-tv:

What would be nice is a web-camera here so we can check the cat from anywhere!

doggiedoc · 2014-09-17 09:28

Refreshed my page that the spinneret serves up from the chicken coop controller. Added code for iframe and moved some of the heavier weight stuff off site: http://208.104.39.5:5000

Works better, spinneret more responsive now and was able to add more images to the slide show now - looks almost like video!

Doc

LA6WNA · 2014-09-17 13:32

Great work, Doc. This really looks cool.
Question: Does your pictures load from a SD-card or are they stored at an external webserver somewhere?
I have to reorganize my Spinneret myself pretty soon, cause there`s almost no memory left on it.

doggiedoc · 2014-09-17 19:10

Hey Peter, thanks. I saved the images to an external server (my company server) to save bandwidth and load on the spinneret. I even off load some of the html by loading an external document into a frame.

doggiedoc · 2014-09-18 12:16

Here's the relative part of the code:

DAT
  index byte  "HTTP/1.1 200 OK", CR, LF, {
}             "Content-Type: text/html", CR, LF, CR, LF, {
}             "<HTML>", {
}             "<HEAD>", {
}             "<TITLE>Willoughby Farm</TITLE>"
        byte  "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' ></script>"
        byte  "<script LANGUAGE='Javascript' SRC='http://www.tegacayanimalhospital.com/spinneret/js/timed-refresh.js'></script>"
        byte  "<script type='text/javascript' src='http://www.tegacayanimalhospital.com/spinneret/js/infinite-rotator.js'></script>"
        byte  "<link rel='stylesheet' href='http://www.tegacayanimalhospital.com/spinneret/css/style.css' type='text/css' media='screen' />" 

        byte   "</HEAD>" 
 
        byte  "<BODY Onload='timedRefresh();'>"
        byte  "<center>"
        byte  "<iframe src='http://www.tegacayanimalhospital.com/coop_iframe.html' width='1068' height='496'><p>Your browser does not support iframes.</p></iframe>"
'table for dynamic values:
        byte  "<div id='refresh_data'>"
        byte  "<BR><B><FONT FACE=times SIZE=4>Conditions "
        byte  "inside Coop:</FONT></B> "
        byte  "<table><tr><td>" 'wrapper table
        byte  "<table border='1'>"
        byte  "<tr><td><FONT FACE=times SIZE=4>Temp:</td> "
        byte  "<td><FONT FACE=times SIZE=4 COLOR=RED>"
temp    byte  "       &degF "'<--- This is a place holder ; number is dynamically updated
        byte  "</FONT></FONT></td></tr>"
        byte  "<tr><td><FONT FACE=times SIZE=4>Humidity: </td>   "
        byte  "<td><FONT FACE=times SIZE=4 COLOR=RED>"
humi    byte  "       % "'<--- This is a place holder ; number is dynamically updated
        byte  "</FONT></FONT></td></tr></table></td>"
        byte  "<td><table border='1'>"
        byte  "<tr><td><FONT FACE=times SIZE=4>Current Light:</td> "
        byte  "<td><FONT FACE=times SIZE=4 COLOR=RED>"
num1    byte  "0000 " '<--- This is a place holder ; number is dynamically updated
        byte  "</FONT></FONT></td></tr>"
        byte  "<tr><td><FONT FACE=times SIZE=4>Average Light:</td>"
        byte  "<td><FONT FACE=times SIZE=4 COLOR=RED>"
num2    byte  "0000 "'<--- This is a place holder ; number is dynamically updated
        byte  "</FONT></FONT></td></tr></table></td>"
        byte  "<td><table border='1'>"
        byte  "<tr><td><FONT FACE=times SIZE=4>Door Position</td>"
        byte  "<td><FONT FACE=times SIZE=4 COLOR=RED>"
str1    byte  "      "'<--- This is a place holder ; val is dynamically updated
        byte  "</FONT></FONT></td></tr>"
        byte  "<tr><td><FONT FACE=times SIZE=4>Switch Position</td>"
        byte  "<td><FONT FACE=times SIZE=4 COLOR=RED>"
str2    byte  "      " '<--- This is a place holder ; val is dynamically updated
        byte  "</FONT></FONT></td></tr></table>"
        byte  "</td></tr></table><BR>"
        byte  "<FONT FACE=times SIZE=2>Coop Date and Time: " 
time1   byte  "00/" '<--- month
time2   byte  "00/20" '<--- day
time3   byte  "   "'<--- year
time4   byte  "  :" '<--- hour
time5   byte  "  :" '<--- minute
time6   byte  "  <BR>" '<--- second
        byte  "</FONT>"
        byte  "</div>"

        byte  "<FONT FACE=times SIZE=2>"
        byte  "(Values Auto-refresh ~5 seconds)</FONT><BR><BR>"
        byte  "</center>"
        byte  "</BODY>"                      
        byte  "</HTML>"
        byte  0



  buff          byte  $0[BUFFER_2K+1] 
  resPtr        long $0[25]
  null          long  $00
  dhcpLease     long  $ff_ff_ff
  dns_addr      byte $0A, $00, $01, $01
  mtuBuff      long  TCP_MTU

LA6WNA · 2014-09-18 13:21

Jepp. Thats the way to do it to save upload time. I haven`t figured out this Java script things yet, but I`ll have to study that part before I starts reorganize my server. I also got my pictures at a external server, but my intention is to also get most of the html codes over to that server. Today, html codes takes a lot of space at my Spinneret memory. My plan is to start looking at this in the wintertime, so it won`t happen yet.

Thanks for sharing your code, Doc. It will be useful for me aftherwards.

Little-endian · 2014-10-23 07:38

Looks great! Thanks for sharing. I recently started working on a new project where I hope to implement something similar and this will be very helpful.

Using jquery with Spinneret

Comments