Shop OBEX P1 Docs P2 Docs Learn Events
Trouble getting W5200 connected , Solved , DHCP+Netbios+Basic Auth+Multisocketserver — Parallax Forums

Trouble getting W5200 connected , Solved , DHCP+Netbios+Basic Auth+Multisocketserver

Igor_RastIgor_Rast Posts: 357
edited 2012-11-09 04:59 in Accessories
I have bought a WIZ820io module to make my propeller webbased , so I can make webpages containing flowchart of temperure sensors. I have a sht-11 sensor working showing temp en humidity on an reflective lcd .
now i want to make a webpage so I can monitor it more nicely

I am using the object of timothy d sieter . W5100 Web page demo foudn in obex
but upon connectin to the network I get this to see in my terminal ,



Prop/W5200 Web Page Serving Test

Initialize all addresses...
Set MAC ID........02:00:00:01:23:45
Verified MAC ID...00:00:00:00:00:00

Set Gateway.....192.168.1.1
Verified Gateway..0.0.0.0

Set Subnet......255.255.255.0
Verified Subnet...0.0.0.0

Set IP..........192.168.1.200
Verified IP.......0.0.0.0

Initialize socket 0, port 80
Socket 0 Status Register: $00 - socket closed

Attempting to open TCP on socket 0, port 80...
Socket 0 Status Register: $00 - socket closed

Setting TCP on socket 0, port 80 to listening
Socket 0 Status Register: $00 - socket closed

Waiting for a client to connect

Shouldent the verified ip adres be changed to the ones i have configured .
cant figure out where it,s going wrong

would apriciate some help here guys
«1345678

Comments

  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-02 16:06
    sometimes it works , othertimes it gets wrong variables
  • Mike GMike G Posts: 2,702
    edited 2012-09-02 16:35
    Igor_Rast, this is a response to your PM. It seems there is a side PM conversation going on...???

    Anyway, please find that attached WIZ820io SPI source - well tested 9/17/2012

    Pin IO
      ' SPI pins
      SPI_MOSI          = 1 ' SPI master out serial in to slave
      SPI_SCK           = 0 ' SPI clock from master to all slaves
      SPI_CS            = 3 ' SPI chip select (active low)
      SPI_MISO          = 2 ' SPI master in serial out from slave
    

    Attachment replaced by Google Code repository. Please be advised unit test code could is alpha release and demos are subject to change.

    Source Code On Google Code
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-02 16:53
    Hi mike , Thanks 4 your reply ,. I havent seen those files yes so im gonna dig in to them , i figure out my problem to be static , i have the wiz module connected on a experiment bord and the wires are a bit to long , Anyway aside that I got it working ,

    so my next problem to figure out is how to get a nice page running 1 or 2 graph so i can display the temp and humidity of my sensiron sht-11 sensor connected to the propeller ,
    wanted to code this in html 5 so it can easly be accesd

    what is the best aproch ?

    Thanks
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-02 17:09
    a graph like this would be a dream cometru for me

    http://chrisvalleskey.com/graph/
  • Mike GMike G Posts: 2,702
    edited 2012-09-03 08:11
    Igor_Rast wrote: »
    a graph like this would be a dream cometru for me

    http://chrisvalleskey.com/graph/

    Implementation is straight forward but it will take a little thought and some SPIN.

    Here's the client script that invokes a new point on the line graph.
    <script type="text/javascript" src="js/cv_graph.js"></script>
    <script type="text/javascript">
    window.onload = function() {
    g_graph = new Graph(
    {
    'id': "firstgraph",
    'strokeStyle': "#819C58",
    'fillStyle': "rgba(64,128,0,0.25)",
    'call': function(){return ( Math.floor(Math.random()*50 + 25));}
    });
    }
    </script>
    

    You are concerned with the following line. You must replace the random number generator with an HTTP GET (or POST) to the Propeller server. This can be done through AJAX.
    'call': function(){return ( Math.floor(Math.random()*50 + 25));
    

    I presume you do not have an SD card? If that's the case, no SD card, then you have to t1) drop the cv_graph.js file on a web site 2) write the js file to the DAT section.
    For option one change
    <script type="text/javascript" src="js/cv_graph.js"></script>
    to 
    <script src="http://my.url.com/js/cv_graph.js"></script>
    
    Option 1 is the easiest as the browser will GET the js file but you need access to a site - I can help you with that. Option 2 could cause issues as a second socket connection will most likely will be required to download the js file. it really depends on the driver you are using. The zip file I posted has options for handling all 8 sockets on the W5200, TcpMultiSocketServerDemo.spin.

    Next, you'll need to create the HTML on the propeller. I'd write the HTML text to the DAT section. Similar to the example below but yours will be much longer.
    DAT
      index         byte  "HTTP/1.1 200 OK", CR, LF, {
    }                     "Content-Type: text/html", CR, LF, CR, LF, {
    }                     "Hello World!", CR, LF, $0
    

    Next, you have to write code to process the temperature and humidity requests. All HTTP requests have a header. You'll need to read the first line in the header to find the requested resource. If you only have one request then you can skip the header parsing and return the temperature and humidity values. I'd wrap the values in an XML documents as that makes it much easier to grab the values on the client.

    Examples of AJAX and parsing an XML response

    The last thing you'll need to do is setup a reoccurring HTTP GET request to grab the temperature and humidity at some time interval.
    // Get the temperature and humidity every 2 seconds
    setInterval("getTempAndHumidity ()", 2000 );
    
  • DynamoBenDynamoBen Posts: 366
    edited 2012-09-04 07:55
    I adapted the existing W5100 driver for the W5200, it is posted to the OBEX and is well tested. http://obex.parallax.com/objects/869/
  • Mike GMike G Posts: 2,702
    edited 2012-09-04 08:38
    Igor_Rast, here's an example of using the graph.js object with source. I'm finishing up a high speed SPI object that will be a drop in replacement for the Spi.spin object. You need at least two available sockets for the graph to function. The example uses 4.
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-05 01:51
    He Mike , Thanks Allot for the advice you giving me , I am currently in a small time window that I am trying to get it running , ill be reading these post tonight to make the tweaks to get it running

    I already had a demo page running ,
    things I modified were the WIZnet PIns
    >> Miso = pin 3
    >> SCS = pin 4
    >> SCLK = pin 5
    >> MOSI = pin 6

    and the IP adres to connect to my network
    ip :192.168.2.175
    gateway : 192.168.2.254

    W5200_Web_Page_Demo444 - Archive [Date 2012.09.05 Time 11.43].zip

    Anyway , This demo works for me, But somthimes it hangs , i think because the wiznet is put in a breadbord with some lose wires running around .So I left it at that till I have my new PCB where I can insert it directly.


    For the 4 socket demo you send me with the graph , I can no get it working, my brouwser simply doesnt connect to the page

    Chnages I made to correspondent with my schematics were

    In the HTML5graph file I canged

    >>wiz.setip(192.168.2.200)

    in the W5200 file i canged

    >>SPI_MOSI = 6
    >>SPI_SCK = 5
    >> SPI_CS = 4
    >> SPI_MISO 3

    in the dat
    _gateway byte 192.168.2.254
    _ip byte 192.168.2.200

    and last in de SPI driver I canged in the Dat section

    >>SPI_MOSI byte $6
    >>SPI_SCK byte $5
    >> SPI_CS byte $4
    >> SPI_MISO byte $3

    I think I changed all the neccesary setting for it to work k, but i can not get it via the brouwser .
    any advise to where the problem may sit ??

    hope ill hear from you soon

    Igor
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-05 03:19
    if I ping the server , it respons back . But i can,t open the page in firefox. or am I doing somthing wrong
    ive attached a screenshot of the pinging and the page not opening.
    Schermafdruk van 2012-09-05 12:17:18.jpg
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-05 03:29
    Nevermind MIKE I got your Example working
    Ill be going tru it how it works then to modify it to wat I want .

    ill keep you posten , Thanks Allot
  • Mike GMike G Posts: 2,702
    edited 2012-09-05 07:15
    Glad you got it working. I found a bug related to the AJAX calls. Sometimes the a response is not returned from the server. I'm not sure if the bug is on the client or server or a combo.
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-08 08:55
    Hi Mike , ive been fooling aroud with the sample you gave me , I manage to get the RV % to get shown in the graph . or so I think :p . but it sometimes has some strange numbers in it , jumping back and forth
    is this the bug in the ajax call you mentiond ??. I,m not complety understanding the code yet

    what are those temp variables .

    when i tryied to display the temp , the temp is in hole numbers so 290 for 29.0 degrees . but this does fit in the graph . how can I adjust the graph scale , I will need 2 different scales then , 1 for temp
    1 for tv


    For the other hand.
    the graph seems to fill up then stop , i need a continus graph . where to adress this .
    I was thinking of building a queue(stack?) in the propeller and let the grap show the contets of the queue

    when the graph is open in the brouwser , and I select somthing else and go back , the server jams . is this because the request to get a temp ends , or another reason

    Html5Graph - Archive [Date 2012.09.08 Time 17.27].zip

    hoping you can point me in the right direction

    thanks

    Igor
  • Mike GMike G Posts: 2,702
    edited 2012-09-08 09:47
    when i tryied to display the temp , the temp is in hole numbers so 290 for 29.0 degrees .
    You must add a byte to hold the dot in the XML response. Once you have the number, then it is just a matter of converting the number to ASCII and knowing where to put the decimal. I'm not sure if the graph.js will handle a decimal number. You'll have to figure that out. However, I did update the source js to parse a float.


    Make these changes in the top level object to handle a decimal place.
      xml   byte  "HTTP/1.1 200 OK", CR, LF, {
      }           "Content-Type: text/xml", CR, LF, CR, LF, {
      }           "<?xml version='1.0' encoding='utf-8'?><root><temp>"
      temperature  byte  $30, $30, $2E, $30, "</temp></root>", 0
    
    PUB SetTemp(value) | t1
      t1 := value
      t1 := t1/100
      value -= t1 * 100
      byte[@temperature][0] := t1 + $30
    
      t1 := value
      t1 := t1/10
      value -= t1 * 10
      byte[@temperature][1] := t1 + $30
      
      t1 := value
      byte[@temperature][3] := t1 + $30
    
    ...but this does fit in the graph . how can I adjust the graph scale , I will need 2 different scales then , 1 for temp
    1 for tv
    I don't know. You have to look at the source graph.js source code to figure out how to scale the graph. There are a lot of configurable parameters for the graph.
    For the other hand.
    the graph seems to fill up then stop , i need a continus graph . where to adress this .
    I was thinking of building a queue(stack?) in the propeller and let the grap show the contets of the queue

    There was a bug in the W5200.spin driver that I fixed this morning and uploaded to the forum. See previous posts.

    I've been running the graph page for 2 hours with out error or lock. Requests are firing every 0.5 seconds.
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-08 10:10
    Mike

    The uploaded driver for the w5200 that you bugfixed . is it the one located here ??

    http://obex.parallax.com/objects/869/

    or could you give me a link.

    thanks . I am going to give the adjustments a few shots first , then ill let you know how it workd out , or not :P

    Igor
  • Mike GMike G Posts: 2,702
    edited 2012-09-08 10:56
    No, See post 8. Just download add replace the w5200 file in your project.
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-08 11:09
    iam confused mike

    the one u mentiond in post 8 and the one i just show the link are the same objects,
    but it has the W5200_driver.spin in it

    not the W5200.spin like the html5 graph demo has .
    or am i overlooking something?
  • Mike GMike G Posts: 2,702
    edited 2012-09-08 11:31
    Post 8 has the updated w5200.spin driver that I wrote. The link you posted is written by someone else and completely different. All you have to do is download the zip in post 8. Copy the w5200.spin file to your project.

    I'm at my kids football game so I'm unavailable for a few hours.
  • Mike GMike G Posts: 2,702
    edited 2012-09-08 17:06
    I left the graph (post #8) run for 9 hours today without error. The graph is updated every 0.5 seconds by an AJAX HTTP GET. There were 4 browser instances running and 4 available sockets. I'd say that's a pretty successful stress test.

    Thanks Igor_Rast, that was a cool little project which highlighted a bug in my driver logic.

    Unfortunately, we lost the football game.
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-09 07:14
    Hi Mike , Happy to hear that you are also happy about the program working , cause Im happy as hell :p
    Sorry for that football game, good luck with the next ones

    anyway .

    I also did some sniffing around to get the page running like I want , \
    for the coma numbers 29.4 to be displayed in the graph in place of the hole number , I havent looked into it yet. ill figure this out little later .

    I went to put some buttons on the graph like the example to get some colour change,toggle and so on.
    but now I seem to hit a barier

    the code doesnt load in the brouwser completly .

    if I open the source in the brouwser , the code just stops .
    this is how it shows,
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'&gt;
    <html xmlns='http://www.w3.org/1999/xhtml'&gt;
    <head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <meta name='viewport' content='width=device-with,initial-scale=1, maximum-scale=1'>
    <title>Graph Example</title>
    <link rel='stylesheet' href='http://chrisvalleskey.com/wp-content/themes/unique/css/style.css' type='text/css' media='screen' />
    <link rel='stylesheet' href='http://chrisvalleskey.com/wp-content/themes/unique/css/custom/graph-style.css' type='text/css' media='screen' />
    <script type='text/javascript' src='http://192.168.2.151/test/graph.js'></script&gt;
    <script type='text/javascript'>
    window.onload = function() {
    g_graph = new Graph({
    'id': 'firstgraph',
    'strokeStyle': '#819C58',
    'fillStyle': 'rgba(64,128,0,0.25)',
    'call': function(){ return ( Math.floor(latestTemp())); }
    });}
    setInterval("getRequest('xmltemp', 'placeholder')", 1);
    function toggleDraw() { g_graph.toggleDraw();}
    function toggleValue(value) { g_graph.toggleValue(value); }
    function setFill(val) { if(val == undefined) val = getRandomRGBA(); g_graph.setValue('fillStyle',val); }
    function setColor(val) { if(val == undefined) val = getRandomRGB(); g_graph.setValue('strokeStyle',val); }
    function getRandomRGB() { return 'rgb(' + Math.floor(Math.random()*255) + ', ' + Math.floor(Math.random()*255) + ', ' + Math.floor(Math.random()*255) + ')'; }
    function getRandomRGBA() { return 'rgba(' + Math.floor(Math.random()*255) + ', ' + Math.floor(Math.random()*255) + ', ' + Math.floor(Math.random()*255) + ', ' + '0.25)'; }
    function clearGraph() { g_graph.clearGraph(); }
    </script>
    </head>
    <body id='graph' class='page'>
    <header id='top-bar' class='bar'>
    <h1><a href='http://192.168.2.151'>ICE Controle</a></h1>
    <nav role='navigation'>
    <ul class='links'>
    <li><a href='http://chrisvalleskey.com/articles/'>Articles</a></li&gt;
    </ul>
    <p class='copyright'>


    and than the code just stops . Is this a nother bug , or am i hitting a size barier somewhere .

    tryied removing some lines , it gows little further than stops again , never loading completly .
    maybe you know where to look ??

    your beeing the best help EVERRRR :p

    when its all done ill make it available on the form , think definitly there are more people intrested in this

    Html5Graph66 - Archive [Date 2012.09.09 Time 16.04].zip
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-09 07:29
    i also tried to put out the temp pub so the eeprom doesnt get used . thinking thats the problem , but that didnt solve anything
  • Mike GMike G Posts: 2,702
    edited 2012-09-09 08:20
    Just another bug - fixing it.
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-09 08:33
    hihi. Mind telling me where the bug was . in what file ?
    uploaded it again on post 8 ??
  • Mike GMike G Posts: 2,702
    edited 2012-09-09 10:01
    Well, I guess this is kind of a bug. In the example, I did not handle sending a page larger than the 2k buffer. The Socket[n].Send method returns the number of bytes sent.

    In the Html5Graph66.spin you have to verify that the page was completely sent.
        bytesSent := 0
        ptr := page
        repeat until bytesSent == strsize(page)
          bytesSent += sock[i].Send(ptr, strsize(ptr))
          ptr := page + bytesSent
    

    In the Html5Graph66.spin file replace the MultiSocketServer method with the one below.
    PUB MultiSocketServer | bytesToRead, i, page, j, x, bytesSent, ptr
      bytesToRead := i := j := x := 0
      repeat
        pst.str(string("TCP Service", CR))
        repeat until sock[i].Connected
          i := ++i // LISTENERS
          pause(100)     
          if(j++ > 500)
            pst.str(string("Socket 0 "))
            pst.hex(wiz.GetSocketStatus(0), 2)
            pst.char(13)
    
            pst.str(string("Socket 1 "))
            pst.hex(wiz.GetSocketStatus(1), 2)
            pst.char(13)
    
            pst.str(string("Socket 2 "))
            pst.hex(wiz.GetSocketStatus(2), 2)
            pst.char(13)
    
            pst.str(string("Socket 3 "))
            pst.hex(wiz.GetSocketStatus(3), 2)
            pst.char(13)
            j := 0
            
    
        pst.str(string("Connected Socket "))
        pst.dec(i)
        pst.char(CR)
        
        'Data in the buffer?
        repeat until bytesToRead := sock[i].Available
    
        'Check for a timeout
        if(bytesToRead < 0)
          sock[i].Disconnect
          sock[i].Open
          sock[i].Listen
          bytesToRead~
          next
    
        pst.str(string("Copy Rx Data",CR))
      
        'Get the Rx buffer  
        sock[i].Receive(@buff, bytesToRead)
    
        {{ Process the Rx data}}
        pst.char(CR)
        pst.str(string("Request:",CR))
        'pst.str(@buff)
    
        pst.str(string("Send Response",CR))
        page :=  ParseResource(@buff)
        
        pst.str(page)
        pst.char(CR)
        
        bytesSent := 0
        ptr := page
        repeat until bytesSent == strsize(page)
          bytesSent += sock[i].Send(ptr, strsize(ptr))
          ptr := page + bytesSent
    
    
        pst.str(string("Disconnect",CR))
        sock[i].Disconnect
        sock[i].Open
        sock[i].Listen
        i := ++i // LISTENERS
        bytesToRead~
    
  • Mike GMike G Posts: 2,702
    edited 2012-09-09 15:49
    FYI, I added a High Speed SPI object to port #8.
    OBJ
      'spi           : "Spi.spin"
      spi           : "SpiPasm.spin" 
    

    Stress test:
    32 browser instances executing HTTP GETs every 10ms. Ran about 2 hours without error.
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-09 18:12
    He Mike , Glad to hear your also activly working on the driver for the w5200. sure helping me out allot rightnow
    anyway .

    I managed to make the nessesary changes to get the page looking the way I want . Looks neet
    I got the tabs to toggle the line,labels etc . but only the toggle,clear, randow colour andfil work , the label etc don,t work .
    been changing and comparing the files but cant figure out why

    besst shot it has to do somthing with the //XmlHttpRequest object foundin the graph.js file . but that i hope you could tell me more about.

    if i look at the page scoure i see the not workig buttons highlighted in red, making them work s making me nuts.
    :p

    this is the dat part i written to get the page running
    DAT
      index byte  "HTTP/1.1 200 OK", CR, LF, {
    }             "Content-Type: text/html", CR, LF, CR, LF, {
    }             "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>", CR, LF, {
    }             "<html  xmlns='http://www.w3.org/1999/xhtml'>" , CR, LF, {
    }             "<head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' />", CR, LF, {
    }             "<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>", CR, LF, { 
    }             "<meta name='description' content='An ICE Control Production.' >", CR, LF, { 
    }             "<title>ICE Control</title>", CR, LF, {
    }             "<link rel='stylesheet' href='http://chrisvalleskey.com/wp-content/themes/unique/css/style.css' type='text/css' media='screen' />", CR, LF, { 
    }             "<link rel='stylesheet' href='http://chrisvalleskey.com/wp-content/themes/unique/css/custom/graph-style.css' type='text/css' media='screen' />", CR, LF, {
    }             "<script type='text/javascript' src='http://www.mikegebhard.com/graph.js'></script>", CR, LF, {
    }             "<script type='text/javascript'>" , CR, LF, {
    }             "window.onload = function() {", CR, LF, {
    }             "g_graph = new Graph({", CR, LF, {
    }             "'id': 'example-graph',", CR, LF, {
    }             "'strokeStyle': '#819C58',", CR, LF, {
    }             "'fillStyle': 'rgba(64,128,0,0.25)',", CR, LF, {
    }             "'call': function(){ return ( Math.floor(latestTemp())); }", CR, LF, {
    }             "});}", CR, LF, {
    }             "setInterval(", $22, "getRequest('xmltemp', 'placeholder')", $22, ", 5000);", CR, LF, {
    }             "function toggleDraw() { g_graph.toggleDraw(); }", CR, LF, {
    }             "function toggleValue(value) { g_graph.toggleValue(value); }", CR, LF, {
    }             "function setFill(val) { if(val == undefined) val = getRandomRGBA(); g_graph.setValue('fillStyle',val); }", CR, LF, {
    }             "function setColor(val) { if(val == undefined) val = getRandomRGB(); g_graph.setValue('strokeStyle',val); }", CR, LF, {
    }             "function getRandomRGB() { return 'rgb(' + Math.floor(Math.random()*255)  + ', ' + Math.floor(Math.random()*255) + ', ' + Math.floor(Math.random()*255) + ')'; }", CR, LF, {
    }             "function getRandomRGBA() { return 'rgba(' + Math.floor(Math.random()*255)  + ', ' + Math.floor(Math.random()*255) + ', ' + Math.floor(Math.random()*255) + ', ' + '0.25)'; }", CR, LF, {
    }             "function clearGraph() { g_graph.clearGraph(); }", CR, LF, {
    }             "</script>", CR, LF, {
    }             "</head>", CR, LF, {
    }             "<body id='graph' class='page'>", CR, LF, {
    }             "<header id='top-bar' class='bar'>", CR, LF, { 
    }             "<h1><a href='http://192.168.2.151'>ICE Control</a></h1>", CR, LF, {
    }             "<nav role='navigation'>", CR, LF, {   
    }             "<ul class='links'>", CR, LF, {   
    }             "<li><a href='http://chrisvalleskey.com/articles/'>Articles</a></li>", CR, LF, {   
    }             "</ul>", CR, LF, {
    }             "<p class='copyright'>&copy; 2012</p>", CR, LF, {
    }             "</nav>", CR, LF, {
    }             "</header>", CR, LF, { 
    }             "<article id='post' role='main'>", CR, LF, {
    }             "<div class='container'>", CR, LF, {
    }             "<header>", CR, LF, {
    }             "<hgroup>", CR, LF, {
    }             "<h1>ICE Control</h1>", CR, LF, {
    }             "<h2>An experiment of ICE Control</h2>", CR, LF, {
    }             "</hgroup>", CR, LF, {
    }             "</header>", CR, LF, {   
    }             "<section class='post-content'>", CR, LF, {   
    
    }             "<div><span id='placeholder'>10</span></div>", CR, LF, {
    }             "<canvas id='example-graph' width='940' height='300'></canvas><p class='buttons'>", CR, LF, {
    }             "<a onclick='toggleValue('showgrid')' class='btn'>Grid</a>", CR, LF, {
    }             "<a onclick='toggleValue('showshadow')' class='btn'>Shadow</a>", CR, LF, {
    }             "<a onclick='toggleValue('showline')' class='btn'>Lines</a>", CR, LF, {
    }             "<a onclick='toggleValue('showfill')' class='btn'>Fill</a>", CR, LF, {
    }             "<a onclick='toggleValue('showdots')' class='btn'>Dots</a>", CR, LF, {
    }             "<a onclick='toggleValue('showlabels')' class='btn'>Labels</a>", CR, LF, {
    }             "<a onclick='setFill()' class='btn'>Random Fill</a>", CR, LF, {
    }             "<a onclick='setColor()' class='btn'>Random Color</a>", CR, LF, {
    }             "<a onclick='clearGraph()' class='btn right'>Clear Graph</a>", CR, LF, {
    }             "<a onclick='toggleDraw()' class='btn right'>Toggle Draw</a> ", CR, LF, {
    }             "</p>", CR, LF, { 
    }             "<script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script>", CR, LF, { 
    }             "<script type='text/javascript'>", CR, LF, {  
    }             "// Google fonts ", CR, LF, {
    }             "WebFontConfig = {", CR, LF, {
    }             "google: { families: [ 'PT+Serif:regular,italic,bold,bolditalic' ] }", CR, LF, {
    }             "};", CR, LF, {
    }             "(function() {", CR, LF, {
    }             " var wf = document.createElement('script');", CR, LF, {  
    }             " wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +", CR, LF, { 
    }             "://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';", CR, LF, { 
    }             "wf.type = 'text/javascript';", CR, LF, { 
    }             "wf.async = 'true'; ", CR, LF, { 
    }             "var s = document.getElementsByTagName('script')[0];", CR, LF, { 
    }             "s.parentNode.insertBefore(wf, s);", CR, LF, { 
    }             "})();", CR, LF, { 
    }             "</script>", CR, LF, { 
    }             "<div style='display:none'>", CR, LF, { 
    }             "</div>", CR, LF, { 
    }             "<script src='http://stats.wordpress.com/e-201227.js' type='text/javascript'></script>", CR, LF, { 
    }             "<script type='text/javascript'>", CR, LF, { 
    }             "st_go({v:'ext',j:'1:1.4.2',blog:'12369475',post:'819'});", CR, LF, { 
    }             "var load_cmc = function(){linktracker_init(12369475,819,2);};", CR, LF, { 
    }             "if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);", CR, LF, { 
    }             "else load_cmc();", CR, LF, { 
    }             "</script>", CR, LF, { 
    
    }             "</body>", CR, LF, {
    }             "</html>", 0
    
      xml   byte  "HTTP/1.1 200 OK", CR, LF, {
      }           "Content-Type: text/xml", CR, LF, CR, LF, {
      }           "<?xml version='1.0' encoding='utf-8'?><root><temp>"
      temperature  byte  $30, $30, $2E, $30, "</temp></root>", 0
      
      buff  byte  $0[BUFFER_2K] 
    

    after this, I want to add a second graph so i candisplay both temp and humidity .
    couldt you tell me where to start to add on more ,

    or do i just add second xml requwest ??
    xml   byte  "HTTP/1.1 200 OK", CR, LF, {
      }           "Content-Type: text/xml", CR, LF, CR, LF, {
      }           "<?xml version='1.0' encoding='utf-8'?><root><temp>"
      temperature  byte  $30, $30, $2E, $30, "</temp></root>", 0
    
    xml   byte  "HTTP/1.1 200 OK", CR, LF, {
      }           "Content-Type: text/xml", CR, LF, CR, LF, {
      }           "<?xml version='1.0' encoding='utf-8'?><root><temp>"
      humidity  byte  $30, $30 "</temp></root>", 0
    
    


    planning on adding buttons orso to so I can configure the setpoint and offset value . . one step at a time

    Html 5 Temp Graph Working - Archive [Date 2012.09.10 Time 02.57].zip
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-09 18:48
    [HTML]<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'&gt;
    <html xmlns='http://www.w3.org/1999/xhtml'&gt;
    <head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
    <meta name='description' content='An ICE Control Production.' >
    <title>ICE Control</title>
    <link rel='stylesheet' href='http://chrisvalleskey.com/wp-content/themes/unique/css/style.css' type='text/css' media='screen' />
    <link rel='stylesheet' href='http://chrisvalleskey.com/wp-content/themes/unique/css/custom/graph-style.css' type='text/css' media='screen' />
    <script type='text/javascript' src='http://www.mikegebhard.com/graph.js'></script&gt;
    <script type='text/javascript'>
    window.onload = function() {
    g_graph = new Graph({
    'id': 'example-graph',
    'strokeStyle': '#819C58',
    'fillStyle': 'rgba(64,128,0,0.25)',
    'call': function(){ return ( Math.floor(latestTemp())); }
    });}
    setInterval("getRequest('xmltemp', 'placeholder')", 5000);
    function toggleDraw() { g_graph.toggleDraw(); }
    function toggleValue(value) { g_graph.toggleValue(value); }
    function setFill(val) { if(val == undefined) val = getRandomRGBA(); g_graph.setValue('fillStyle',val); }
    function setColor(val) { if(val == undefined) val = getRandomRGB(); g_graph.setValue('strokeStyle',val); }
    function getRandomRGB() { return 'rgb(' + Math.floor(Math.random()*255) + ', ' + Math.floor(Math.random()*255) + ', ' + Math.floor(Math.random()*255) + ')'; }
    function getRandomRGBA() { return 'rgba(' + Math.floor(Math.random()*255) + ', ' + Math.floor(Math.random()*255) + ', ' + Math.floor(Math.random()*255) + ', ' + '0.25)'; }
    function clearGraph() { g_graph.clearGraph(); }
    </script>
    </head>
    <body id='graph' class='page'>
    <header id='top-bar' class='bar'>
    <h1><a href='http://192.168.2.151'>ICE Control</a></h1>
    <nav role='navigation'>
    <ul class='links'>
    <li><a href='http://chrisvalleskey.com/articles/'>Articles</a></li&gt;
    </ul>
    <p class='copyright'>© 2012</p>
    </nav>
    </header>
    <article id='post' role='main'>
    <div class='container'>
    <header>
    <hgroup>
    <h1>ICE Control</h1>
    <h2>An experiment of ICE Control</h2>
    </hgroup>
    </header>
    <section class='post-content'>
    <div><span id='placeholder'>25</span></div>
    <canvas id='example-graph' width='940' height='300'></canvas><p class='buttons'>
    <a onclick='toggleValue('showgrid')' class='btn'>Grid</a> from here on it show red
    <a onclick='toggleValue('showshadow')' class='btn'>Shadow</a>
    <a onclick='toggleValue('showline')' class='btn'>Lines</a>
    <a onclick='toggleValue('showfill')' class='btn'>Fill</a>
    <a onclick='toggleValue('showdots')' class='btn'>Dots</a>
    <a onclick='toggleValue('showlabels')' class='btn'>Labels</a>
    Till Here , So these are the not working ones
    <a onclick='setFill()' class='btn'>Random Fill</a> The rest of them do work
    <a onclick='setColor()' class='btn'>Random Color</a>
    <a onclick='clearGraph()' class='btn right'>Clear Graph</a>
    <a onclick='toggleDraw()' class='btn right'>Toggle Draw</a>
    </p>
    <script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script&gt;
    <script type='text/javascript'>
    // Google fonts
    WebFontConfig = {
    google: { families: [ 'PT+Serif:regular,italic,bold,bolditalic' ] }
    };
    (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    ://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
    })();
    </script>
    <div style='display:none'>
    </div>
    <script src='http://stats.wordpress.com/e-201227.js' type='text/javascript'></script>
    <script type='text/javascript'>
    st_go({v:'ext',j:'1:1.4.2',blog:'12369475',post:'819'});
    var load_cmc = function(){linktracker_init(12369475,819,2);};
    if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
    else load_cmc();
    </script>
    </body>
    </html>
    [/HTML]
  • Mike GMike G Posts: 2,702
    edited 2012-09-09 20:09
    I managed to make the nessesary changes to get the page looking the way I want . Looks neet
    I got the tabs to toggle the line,labels etc . but only the toggle,clear, randow colour andfil work , the label etc don,t work .
    been changing and comparing the files but cant figure out why

    besst shot it has to do somthing with the //XmlHttpRequest object foundin the graph.js file . but that i hope you could tell me more about.
    Why do you think the XmlHttpRequest has anything to do with the buttons not working? The buttons are not making HTTP requests.


    It looks like you have syntax errors with the nested single quotes.
    <a onclick='toggleValue('showgrid')' class='btn'>Grid</a>                                                           from here on it show red ----------------------------------------
    <a onclick='toggleValue('showshadow')' class='btn'>Shadow</a>                                                               ----------------------------------------------------------
    <a onclick='toggleValue('showline')' class='btn'>Lines</a>                                                            ----------------------------------------------------------
    <a onclick='toggleValue('showfill')' class='btn'>Fill</a>                                                            ----------------------------------------------------------
    <a onclick='toggleValue('showdots')' class='btn'>Dots</a>                                                            ----------------------------------------------------------
    <a onclick='toggleValue('showlabels')' class='btn'>Labels</a>                                                            ----------------------------------------------------------Till Here , So these are the not working ones 
    

    Shouldn't it look like the following?
    <a onclick="toggleValue('showgrid')" class='btn'>Grid</a>
    

    Firefox has some great tools for debugging Javascript. I like FireBug but the standard "Error Console" catches a lot.
    after this, I want to add a second graph so i candisplay both temp and humidity .
    couldt you tell me where to start to add on more ,

    I would add a new <humidity> node to the existing XML document. On request, write the temperature and humidity to the XML document.
      xml   byte  "HTTP/1.1 200 OK", CR, LF, {
      }           "Content-Type: text/xml", CR, LF, CR, LF, {
      }           "<?xml version='1.0' encoding='utf-8'?><root><temp>"
      temperature  byte  $30, $31, $2E, $30, "</temp><humidity>"{
    } humidity     byte  $30, $30, $2E, $30, "</humidity></root>", 0
    

    You have a few JavaScript libraries libraries going on. Make sure you understand how they work.
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-10 02:47
    Mike G wrote: »
    Why do you think the XmlHttpRequest has anything to do with the buttons not working? The buttons are not making HTTP requests.


    It looks like you have syntax errors with the nested single quotes.
    <a onclick='toggleValue('showgrid')' class='btn'>Grid</a>                                                           from here on it show red ----------------------------------------
    <a onclick='toggleValue('showshadow')' class='btn'>Shadow</a>                                                               ----------------------------------------------------------
    <a onclick='toggleValue('showline')' class='btn'>Lines</a>                                                            ----------------------------------------------------------
    <a onclick='toggleValue('showfill')' class='btn'>Fill</a>                                                            ----------------------------------------------------------
    <a onclick='toggleValue('showdots')' class='btn'>Dots</a>                                                            ----------------------------------------------------------
    <a onclick='toggleValue('showlabels')' class='btn'>Labels</a>                                                            ----------------------------------------------------------Till Here , So these are the not working ones 
    

    Shouldn't it look like the following?
    <a onclick="toggleValue('showgrid')" class='btn'>Grid</a>
    

    Firefox has some great tools for debugging Javascript. I like FireBug but the standard "Error Console" catches a lot.



    I would add a new <humidity> node to the existing XML document. On request, write the temperature and humidity to the XML document.
      xml   byte  "HTTP/1.1 200 OK", CR, LF, {
      }           "Content-Type: text/xml", CR, LF, CR, LF, {
      }           "<?xml version='1.0' encoding='utf-8'?><root><temp>"
      temperature  byte  $30, $31, $2E, $30, "</temp><humidity>"{
    } humidity     byte  $30, $30, $2E, $30, "</humidity></root>", 0
    

    You have a few JavaScript libraries libraries going on. Make sure you understand how they work.




    He mike .
    where you mean

    Shouldn't it look like the following?
    <a onclick="toggleValue('showgrid')" class='btn'>Grid</a>
    


    your right somehow , but , I can not load the double commaas like "toggleValue('showgrid')" , de propellertool stops at them
    thatś why I changed them to single commas , everywhere else it does work without problems . Or can I adjust this somewhere in the pst

    the line doesnt seem to have any problem with the single quote , this confuses me completly
    <a onclick='setFill()' class='btn'>Random Fill</a>
    

    So its gonna be some firguring out why it doesnt work

    O I forgot to mention

    the SPIpsam object jou uploaded seems to have the same bug of a page bigger tha 2K not loading
    when I modiyied it , the page doesnt load completly like the previues bug . another Bug ??
  • Mike GMike G Posts: 2,702
    edited 2012-09-10 07:09
    your right somehow , but , I can not load the double commaas like "toggleValue('showgrid')" , de propellertool stops at them
    thatś why I changed them to single commas , everywhere else it does work without problems . Or can I adjust this somewhere in the pst

    HEX $22 is the character for a double quote. Use the technique below for adding nested quotes. Html5Graph from post 8 contains an example of this technique.
    "<a onclick=", $22, "toggleValue('showgrid')", $22, "class='btn'>Grid</a>"
    
    the SPIpsam object jou uploaded seems to have the same bug of a page bigger tha 2K not loading
    when I modiyied it , the page doesnt load completly like the previues bug . another Bug ??
    Right, I did not upload a new Html5Graph object which can transmit files larger than 2k. You know how to fix that from post #24, right? Anyway, I uploaded the changes to post #8 for your convenience.
  • Igor_RastIgor_Rast Posts: 357
    edited 2012-09-10 10:11
    Mike G wrote: »
    HEX $22 is the character for a double quote. Use the technique below for adding nested quotes. Html5Graph from post 8 contains an example of this technique.
    "<a onclick=", $22, "toggleValue('showgrid')", $22, "class='btn'>Grid</a>"
    


    Right, I did not upload a new Html5Graph object which can transmit files larger than 2k. You know how to fix that from post #24, right? Anyway, I uploaded the changes to post #8 for your convenience.



    Mikeee :P:P:P:P:P

    the fix from post 24 doesn seem to remove the bug , It will run a small page , but when I insert my bigger created page , it does that half loading of the page again , Funny :p
    ill be using the normal spi method in the mean time


    the
    "<a onclick=", $22, "toggleValue('showgrid')", $22, "class='btn'>Grid</a>"
    
    does work Fine , it still highlights red when i look at the source , but it works . So Iḿ happy like it is .

    I had another question , when programming the prop to see the changes I made . much of the time I have to restart the prop e few time before I get sockets connected in the terminal
    allot of time i get a Listener Faild from the terminal ,

    What is the problem here . Iff its all coded up ready to be used , i dont want to have to restart it a few times before it works good .
    it looks like because the page is bigger , the program hangs . before I didn have this problem . but now it wont run for more than a few minutes . hopefully you know what the heck is wrong with it ,. it will probably be that page size again ,., hoping you can tell me

    Igor
Sign In or Register to comment.