XML questions

Shawna · 2013-09-28 10:36

Well, I am not sure really to start on this one!

What I am trying to do, is get a variable from my prop to show up on a webpage when I click a button on the page...........................................

To be continued, I just had another thought.

Shawna · 2013-09-28 11:27

Ok, I am using the W5200_RTC object with the W5200 quickstart board. I have modified a lot of the render dynamic functions to clean it up so I can concentrate on one little piece at a time. Right now I am just trying to get a variable from the prop to show up when I click a button on the web page.

I have enabled this little piece of code to see if my get request is making it to the server. The get request is making it to the server.

'Display the request header
    pst.str(@buff)

I have modified the RenderDynamic function to look like this.

PRI RenderDynamic(id) |temp
  'Filters
  
  if(  strcomp(req.GetFileName, string("var.xml")) )
    'BuildXml
    pst.str(string("Render D Yes"))
    temp := Dec(PropVariable)  
    BuildAndSendHeader(id, -1)
    sock[id].Send(@temp, strsize(@temp))
    PST.NewLine
    pst.str(temp)
    return true


  return false

The "Render D Yes" is showing up in the PST window when I click the button on the webpage.

So, I am not sure where to go next.
Does the data sent out to the web browser from the prop have to be a string or can it be a raw value?

Here is my Html code also.

<!DOCTYPE html>
<html>
<head>
<title>Get Prop Variable</title>
<script language='javascript' type='text/javascript'>


    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("demo").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","var.xml",true);
    xmlhttp.send();
    }


</script>
</head>
<body>


<h1>Prop Variable JavaScript + XML</h1>
<p id="demo">This will be replace with a prop variable when the button is clicked.</p>


<button type="button" onclick="loadXMLDoc()">Get Prop Variable</button>


</body>
</html>

Here is my zipped project, any advice would be appreciated.

w5200 xml get function.zip

Thanks
Shawn

Shawna · 2013-09-28 16:24

Well, I see one major problem. It looks like I have to send the data from the prop in a xml file(format) to the browser. And I think this is how the javascript knows where to grab the value from. I am not real sure on this, I am still putting pieces of the puzzle together.

Shawna · 2013-09-28 17:49

I built a xml file in the dat section of my code modified from the touch xml example. It looks like this.

 xml1       byte  "<?xml version='1.0' encoding='utf-8'?>",CR,LF,"<root>",CR,LF,"<t7>"
_var1       byte  65,"</t7>",CR,LF,"</root>", $0
  var1       long  @_var1

When I execute the program I get an A on my webpage which is correct.
If I try to modify the 65 I get garbage. Here is my filtering code.
PropVariable is initialized to 1001 when the prop boots.

PRI RenderDynamic(id) 
  'Filters
  if(  strcomp(req.GetFileName, string("var.xml")) )
    BuildXml                                            
    BuildAndSendHeader(id, -1)                          'I think this tells the webpage everything is OK and the data will be coming for the xml.
    sock[id].Send(@xml1, strsize(@xml1))                'Sends the xml data to the webpage.
    return true


  return false


PRI BuildXml | temp
      temp := Dec(PropVariable)                 'Changes PropVariable into a string.
      bytemove(@@var1[0], @temp,strsize(@temp)) 'Should place the PropVariable in the data section for my xml file.

I am not sure what I am doing wrong when I try and change the value in the dat section. I am pretty sure that the string for 1001 is blasting my dat section, but I do not know how to change that value any other way.

Also, and I know I already asked this question, but can data be sent to the web page from the prop that is in an unsigned integer format, or does it have to be in a string format.

Thanks
Shawn

Mike G · 2013-09-29 03:06

I am not sure what I am doing wrong when I try and change the value in the dat section. I am pretty sure that the string for 1001 is blasting my dat section, but I do not know how to change that value any other way.

Well, the DATsection is defined as a byte. The string '1001' and the number 1001 are both larger than a byte. The ASCII characters after the byte, </t7>",CR,LF,"</root>", $0[/B,] are overwritten.

Also, and I know I already asked this question, but can data be sent to the web page from the prop that is in an unsigned integer format, or does it have to be in a string format.

Send strings do not send unsigned integers. XML and the HTTP protocol and are text based. Sending a literal number containing a zero will cause the XML parser (Client Browser) to blow up with an unexpected end of string error. There is also the risk of sending a value equal to one of the XML reserved characters like <>.

Take a look at the "xmlPinState" DAT section. This XML document reports encoded pin values, state (on/off), and the DIR register for pins [23..16] . It takes two ASCII bytes in the DAT section to represent a byte, $00. That means the XML nodes are fixed width and the nodes always expect a two byte value. Lets say we have a DIR value of 1. The <dir> node will contain <dir>01</dir> where 01 is a string.

For an unsigned integer, first figure out the bounds of the number. If 1001 is the largest possible value then 4 byte are required to store the string representing of "1001". If the number contains a decimal, off the top of my head, there are two approaches. Set up a fixed width node in the DAT section that contains the DOT where ya want it. Then byte fill the memory locations for the integer and fraction part of the number. Otherwise, send the integer and let the client JavaScript divide by 10^x. I'd follow the later approach as it moves processing to the client and it's much easier. The down side, this approach creates a dependency between the client and server. The client must know to divide 10^x

Mike G · 2013-09-29 03:34

Plus, from the looks of it, you are using old W5200 code. Get the latest!

Shawna · 2013-09-29 06:56

I thought I had downloaded the lastest one. I downloaded it from the parallax product page. http://parallax.com/product/40002 It was the wiznet W5200 for quickstart demo board code. From that downloaded file I was using the code from the W5200_RTC folder. Do I need to get it from the google repository?

If the number contains a decimal, off the top of my head, there are two approaches.

Otherwise, send the integer and let the client JavaScript divide by 10^x. I'd follow the later approach as it moves processing to the client and it's much easier. The down side, this approach creates a dependency between the client and server. The client must know to divide 10^x

My original thought was to send an integer and let the JavaScript to the math on the client side. One reason I wanted to do this is that I thought it would save code space on the web server. Actually I thought I could do this using the xml format, but then I realized that the built xml file was all filled with strings.

Would I still use a get call from the webpage to request an integer?

I am not sure where to start looking to implement this approach.

Is there an example of sending an integer from the server to the client?

Thanks
Shawn

Mike G · 2013-09-29 10:31

Do I need to get it from the google repository?

Yes, I'll see if I can get Parallax to reference Google Code in the product page.

Would I still use a get call from the webpage to request an integer?

No, HTTP and XML are text based. While it is physically possible to send an integer on byte at a time, it will surly cause unexpected client side results.

I am not sure where to start looking to implement this approach.

Grab the latest files from the repo and take a look at WebServer_W5200. It contains the example mentioned in post #5.

Is there an example of sending an integer from the server to the client?

You should not send an integer to the client!!! Use the Dec method, lifted from PST, to convert an integer to a string. Then byte move to the string to your XML document and send.

The BuildAndSendHeader method and converts the Content-Length header value from a int to a string. See latest code base.

Shawna · 2013-09-29 11:15

Hey Mike is this the right google code site? It seems like every time I think I have found the latest code, I find out I am wrong.

https://code.google.com/p/propeller-w5200-driver/source/browse/trunk/#trunk%2F propeller-w5200-driver%3Fstate%3Dclosed

You guys have put so much code out there it is ridiculous

. Thanks for all the effort.

Am I even shooting for the right code, I am trying to use the Webserver_W5200_RTC code?

All I want to try and do for now is serve up some html pages and dynamically display some variables from the prop.

Although I haven't got to my goal I am learning a lot, I did not and still do not know how to use dat sections effectively or how to deal with strings effectively but I am learning.

Thanks Again
Shawn

Shawna · 2013-09-29 14:03

Ok,
I am confused Mike. I downloaded all of the source code from the link in post #9. From looking at it, it looks like the same code that is in the zip code on the Parallax product page.

Send strings do not send unsigned integers. XML and the HTTP protocol and are text based. Sending a literal number containing a zero will cause the XML parser (Client Browser) to blow up with an unexpected end of string error. There is also the risk of sending a value equal to one of the XML reserved characters like <>.

I understand this, actually I kind of came to this conclusion before you said this.

Then you said this, or maybe I am taking it out of context.

Otherwise, send the integer and let the client JavaScript divide by 10^x. I'd follow the later approach as it moves processing to the client and it's much easier.

Ok, so I like the sound of this approach. But I am not sure how to implement it. I do not see an example of this in the Server W5200 RTC object. It looks like to me all of the examples in the Server W5200 RTC object end up writing strings to the DAT section and then it is sent to the socket as text (strings). It is quite possible that I am missing something but I do not see anything that sends out an integer.

So then you said this in post #8.

You should not send an integer to the client!!! Use the Dec method, lifted from PST, to convert an integer to a string. Then byte move to the string to your XML document and send.

I thought that you said that you would send an integer and then let the client run the javascript on it to do a divide by 10. I understand that you cannot do this with xml.
I guess maybe I switched gears on you mid stream. I would really like to send unsigned integers to the webpage not using xml and let javascript do math on them. I thought I could do this using xml but I understand that I cannot.

So not to be bullheaded or stubborn, I will try to ask the question more clearly. Is there an example of sending an integer to the webpage not using xml.

I am sorry if I sound a little rude, I am not trying to be at all. I am struggling to put the pieces together and my communication skills suck.

Thanks Again
Shawn

Mike G · 2013-09-29 14:41

I am confused Mike. I downloaded all of the source code from the link in post #9. From looking at it, it looks like the same code that is in the zip code on the Parallax product page.

It's not the same. There some subtle differences.

Ok, so I like the sound of this approach. But I am not sure how to implement it. I do not see an example of this in the Server W5200 RTC object. It looks like to me all of the examples in the Server W5200 RTC object end up writing strings to the DAT section and then it is sent to the socket as text (strings). It is quite possible that I am missing something but I do not see anything that sends out an integer.

You are correct I misspoke. Send a string representing the integer value like the code examples.

I thought that you said that you would send an integer and then let the client run the javascript on it to do a divide by 10. I understand that you cannot do this with xml.
I guess maybe I switched gears on you mid stream. I would really like to send unsigned integers to the webpage not using xml and let javascript do math on them. I thought I could do this using xml but I understand that I cannot.

JavaScript can cast a string to an integer using parseInt(). Once converted to the value can be divided by 10.

So not to be bullheaded or stubborn, I will try to ask the question more clearly. Is there an example of sending an integer to the webpage not using xml.

It is possible but not with a browser and HTTP. In the code repo there is a zipped web site called W5200forQsDemo.zip. It contains a file called epin.htm which contains the client side JavaScript code examples. It does not have a parseInt() example but you should be able to figure that out by reading the w3schools example linked above.

Mike G · 2013-09-30 17:14

I had full intention to build a integer-to-string-XML-Javascript example for ya tonight.... but I fried my W5200 for QS board! This is the second W5200 for QS I have fried in 4 months. Both times completely my fault and just dumb luck. Phone between my ear and shoulder, barrel connector in one hand, USB cable flopping around in the other while grabbing the W5200 - ZAP. What sucks is the SD card cooks too. The QS board seems to be OK though.

Shawna · 2013-10-01 16:59

That sucks, I feel for ya Mike. I let the magic smoke out of 3 Propeller Demo boards building my quadcopter. The boards weren't as expensive as the W5200 board, but de-soldiering all of my sensors and then re-soldiering all of them to the new boards made me want to cry.

Thank you for the thought, I would be very interested in seeing some example code if pick up a new board.

I am making acceptable progress on converting my integer variable to a string and then sending it to my html page. I am not quite there yet, but I am getting closer. I did miss speak in one of my previous posts. I said I wanted to send unsigned integers, but I really meant signed integers. I have some ideas on how to convert the unsigned and signed integers into strings and send them but I haven't investigated far enough on how the parseInt() command works in java. I want to do math on the values once the strings are converted back to integers.

I will have more questions eventually.

Thanks
Shawn

Mike G · 2013-10-02 05:45

Two W5200s on order....

I have a spare Spinneret but no extra SD cards. If I blow out of work early enough - lots going on - I'll wire up an example. Otherwise, we're looking at this weekend.

Shawna · 2013-10-02 18:45

I am still plugging away. I built a xml file in the dat section that should be able to carry 20 signed longs to the web browser when called.

Here is what the dat section looks like.

 xml1    byte  "<?xml version='1.0' encoding='utf-8'?>",CR,LF,"<root>",CR,LF,"<t20>"
  _v20    byte  "-----------</t20>",CR,LF,"<t19>"
  _v19    byte  "-----------</t19>",CR,LF,"<t18>"
  _v18    byte  "-----------</t18>",CR,LF,"<t17>"
  _v17    byte  "-----------</t17>",CR,LF,"<t16>"
  _v16    byte  "-----------</t16>",CR,LF,"<t15>"
  _v15    byte  "-----------</t15>",CR,LF,"<t14>"
  _v14    byte  "-----------</t14>",CR,LF,"<t13>"
  _v13    byte  "-----------</t13>",CR,LF,"<t12>"
  _v12    byte  "-----------</t12>",CR,LF,"<t11>"
  _v11    byte  "-----------</t11>",CR,LF,"<t10>"
  _v10    byte  "-----------</t10>",CR,LF, "<t9>"
  _v09    byte  "-----------</t9>" ,CR,LF, "<t8>"
  _v08    byte  "-----------</t8>" ,CR,LF, "<t7>"
  _v07    byte  "-----------</t7>" ,CR,LF, "<t6>"
  _v06    byte  "-----------</t6>" ,CR,LF, "<t5>"
  _v05    byte  "-----------</t5>" ,CR,LF, "<t4>"
  _v04    byte  "-----------</t4>" ,CR,LF, "<t3>"
  _v03    byte  "-----------</t3>" ,CR,LF, "<t2>"
  _v02    byte  "-----------</t2>" ,CR,LF, "<t1>"
  _v01    byte  "-----------</t1>" ,CR,LF, "</root>", $0
  vari    long  @_v01, @_v02, @_v03, @_v04, @_v05, @_v06, @_v07, @_v08, @_v09, @_v10, @_v11, @_v12, @_v13, @_v14, @_v15, @_v16, @_v17, @_v18, @_v19, @_v20


  spacestr  byte  "           " , $0            'used to blank my variable locations in the DAT xml file,there should be 11 spaces.

I am working on the integer to string filler now. It looks like it is all built into the server already I just need to figure out how to put it all together. I think I am pretty close. I am dealing with the neg sign now and I am hopeful I have it whooped, just need to try it. I am only using a single child xml file right now. I think the code above would have 20 children in it. I may be missing something with the terminology.

Mike G · 2013-10-03 04:40

Here's the example as promised. The HTML is attached. This is not the most elegant solution but it works and it is simple.

DAT

  xmlSint       byte  "<root>", CR, LF, "  <sint>" 
  xsint         byte  "00000</sint>", CR, LF, "</root>", 0

Filter: PRI RenderDynamic(id) | value

  if(strcomp(req.GetFileName, string("sint.xml")))
    value := -123
    WriteInt(value)
    BuildAndSendHeader(id, -1, string("xml"))
    sock[id].Send(@xmlSint, strsize(@xmlSint))
    return true

Convert Int to string

PRI WriteInt(theInt) | ptr, len
  'Clear the element value
  bytefill(@xsint, "0", 5)

  'Integer to string and get the length  
  ptr :=  Dec(theInt)
  len := strsize(ptr)

  'Write the element value
  'Add a "-" if the number is negative 
  if(theInt < 0 )
    xsint[0] := "-"
    bytemove(@xsint+1 + (4-len), ptr, len)
  else
    bytemove(@xsint + (5-len), ptr, len)

Some friendly advise, don't try to do too much at once. Pick a small problem and build code to solve the problem. IMO, building a large XML DAT section before understanding how to convert an integer to a string will cause confusion - too many moving parts.

Shawna · 2013-10-03 05:19

Thanks for the example Mike.
I haven't had time to try it yet but I have looked it over a little. I did write a routine last night turning the integer into a string, but did not have a chance to test it. It looks similar to your code. My code may not work but I think I am on the right track.

Some friendly advise, don't try to do too much at once.

This is great advice and I appreciate it. I have a tendency to run before I can walk. I think I understand the integer to string portion fairly well, I guess I will see tonight.

Thanks
Shawn

Shawna · 2013-10-03 18:15

Mike,
The example you put together in post #16 is excellent, thank you. I am still struggling with the javascript in the zip file but I am working my way through it.

Thanks Again
Shawn

Mike G · 2013-10-03 19:46

I am still struggling with the javascript in the zip file but I am working my way through it.

What needs clarification? Were you able to get the example working?

Shawna · 2013-10-04 11:13

The examples work perfectly, I am just struggling with the syntax and understanding the javascript code.

Thanks

Mike G · 2013-10-04 11:29

What best describes your understanding?

I don't understand what "this" method does?
I don't understand how the page elements are updated? Where is the link between the XML doc and the HTML DOM?
I have no idea what any of this JavaScript stuff is doing?

Shawna · 2013-10-04 14:57

I am struggling with some of the methods, but every time I read through one I understand it a little more. Once I get completely stuck I will post another question. I would have blew this thread up with questions last night if it wasn't for your example in post #16.

Shawn

Mike G · 2013-10-04 15:54

A good portion of the JavaScript is dealing with browser implementation. Not all browsers are created equal...

This section of code appends the current date and time to the URL's query string to get around IE's aggressive caching scheme.

	var char = "&";
 	if(resource.indexOf("?", 0) == -1) {
		char = "?";
	}
	 if (req.readyState == 4 || req.readyState == 0) {
		 req.open("GET", resource + char + 'ms=' + new Date().getTime(), true);

The snippet below converts XML to a string to be displayed in a textarea HTML element.

		//Convert the XML response to a string.
		//IE has xDoc.xml while other browser must invoke serializeToString
		target = document.getElementById("xml")
		var xmlstr = xDoc.xml ? xDoc.xml : (new XMLSerializer()).serializeToString(xDoc);
		
		//Another IE and other browser hack
		var ieFlag = xDoc.xml ? true : false;
		if(ieFlag)
			target.innerText = xmlstr;
		else
			target.innerHTML = xmlstr;

Shawna · 2013-10-10 17:09

Mike thanks for the help so far. I haven't had much time to play with it lately. I don't want to switch directions on this thread, but is there an easy way to upload files to the sd card from the PC without removing the card. I know on the spinerret site, you put together an example with the old code, I actually was never able to make that work, it always froze up. I found this thread by msrobots but could not figure out which version of code to copy and paste the changes to. The example uses the put comand I believe.
http://forums.parallax.com/showthread.php/149819-Spinneret-msrobots

I will have to read it a few more times.

Thanks
Shawn

Shawna · 2013-10-10 17:33

I found this link.
http://parallax.msrobots.net/propeller-w5200-driver/Spinneret-msrobots/_README_Doc.htm

Is this the newest webserver code?

Mike G · 2013-10-11 02:56

Yes, a newer extended version by Michael Sommer.

Shawna · 2013-10-13 15:03

Ok, so I have your example working Mike.
I have changed the xml file on the prop to hold 20 variables, and I have changed your html example to refresh 10 values on the screen when the get integer button is clicked.

I know you said watch it with the images but I have thrown a 6KB sized image on the screen also. I am using the w5200 which if I am not mistaken should be able to use 7 sockets to render files. So what I am thinking is that a 6KB sized image should not take more than 4 sockets for the server to spit it out.

The next thing I want to do is more of a java thing but if you don't mind me asking I would like to ask it here instead of joining a java forum, I think this info might be useful to other prop enthusiasts.

The image on my webpage, I would like to change the visible attribute on it depending on whether or not a particular child in my xml file is a 0 or a 1. I was going to do an image swapper but my digging into it so far has made me think it would be easier just to make the image visible or not visible.

This is my web page so far, try it out and tell let me no if the small picture shows up or not.

Oh ya, using internet exploder seems to lock up the server, I am not sure why yet, but I rarely use IE so I am not to concerned about that right now.

http://narnold79.dyndns-at-home.com:5000/

Also, what is the purpose of this code in the sint.html example you posted Mike?

/*
<root>    
      <sint>23</sint>
</root>
*/

Is that just showing what the xml file is supposed to look like and it is commented out?

Thanks
Shawn

Shawna · 2013-10-13 18:03

I got the visibility section of the javascript to work, it was actually pretty easy. After pulling the variable out of my xml file I used this if statement to hide or un-hide my image.

        if (value == 1)
    	{
	    	document.getElementById("img1").style.visibility= "visible";			
	}
	else
	{
		document.getElementById("img1").style.visibility = "hidden";	
	}

The next thing to figure out is how to get data from the web page to the web server. This should be interesting.

Shawna · 2013-10-13 20:56

I have been looking at the epin.htm source code to try and dermine how to submit a value from the webpage to the server. I found this section of javascript which looks like it is executed when one of the submit buttons is clicked.

[TABLE]
[TR]
[TD="class: webkit-line-content"]function singlePin()[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]    {[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]        //Get the text box values[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]        //and send the xml request[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]        var pin = document.getElementById("pinId").value;[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]        var value = document.getElementById("pinValue").value;[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]        var url = "pinstate.xml?led=" + pin + "&value=" + value;[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]        getRequest(url);[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]        return false;[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD="class: webkit-line-content"]    }[/TD]
[/TR]
[/TABLE]

I think I understand all of the code here except for this part + "&value=" +. What does this do? pin and value are both values extracted from the two text boxes pinId and pinValue.

Edit: Correct me if I am wrong please. I think I have determined that the "&value=", is the string that the render dynamic routine uses to pull the proper value out of the get command. This is also what the ?led=" string is for, it holds the pin number. There are 2 variables in this get command and ?led=" and "&value=" are kind of like the identifiers for where the values start.

Edit: I am not sure what is going on with the code tags, I am not sure why it is in a table.

Thanks
Shawn

Mike G · 2013-10-14 03:22

Correct, it is called a query string. A query string is made up of name value pairs and appended to the end of a URL. The format is url?name1=value1&name2=value2, where the question mark designates the start of the query string and the ampersand adds a name value pair to the URL.

Sending data to a web server using a query string (HTTP GET) is a fundamental method in the HTTP protocol.

http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
http://en.wikipedia.org/wiki/Query_string
http://www.w3schools.com/tags/ref_httpmethods.asp

Shawna · 2015-02-06 12:54

Well, its been awhile since I have played with the Wiznet, but I pulled it out of the closet again.
What I want to do now goes kind of like this.

I set up a wamp server on a computer running in the basement.
I have a prop down stairs running my furnace. Attached to the prop is a wiznet board.
I want my website to be on my wamp server.
When I click a button on my website I want the wiznet board to spit out some data in an xml format to be displayed on the web page.

This seems like it should be doable.

I'm trying to do this with the example Mike posted in post #16.
I'm using Webserver 5200 object and I made the changes from post 16.
I put the Html file on my wamp server.
I modified the html file to include the complete url of the wiznet.

Smile I have to get back to work I will finish this post tonight.

Thanks
Shawn

XML questions

Comments