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
It works great on my end. Double check your code.
ill be using the normal spi method in the mean time
I would use SpiPasm, it's much faster.
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 .
You have the JavaScript configured to send AJAX HTTP GET requests every 1ms. Is that really what you want? There is an excellent chance that the W5200 is in the middle of a transaction when you kill the connection by uploading new code. I see this from time to time - not often. It's usually related to a programming error. Just recycle power. Secondly, the web page never stops sending requests since it is running on the client.
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
This is a false assumption. The initial page loads one time and one time only. Only the XML document is passed to the page via an HTTP AJAX GET. JavaScript parses the XML document and updates the DOM on the client side.
To be thorough, I downloaded the source code from post #8. Set the AJAX requests to 1ms and ran it for 30 minutes without error. Then I added text to make the file 5465 bytes and ran it for another 30 minutes at 1ms intervals without error.
So we are on the same page, I found and fixed 2 bugs. One was an actual bug related to the W5200's circular buffer. Turned out to be a typo. I fixed it and all is good. The other, I guess we can call it a bug. When I wrote the graph demo I never considered the demo HTML would take more than 2k. It was just a demo for Christ sakes. I went ahead and updated the code to handle a 2k limit.
As far as I can tell the code works great.
How about posting the code that does not work correctly.
I meshed up the code to get a second graph running , now I have none running , only the canvas .
just a sec ill upload the latest version . that did work .
ok
here is the one that when I change the driver to work with the SPIPasm the page doesn reload completly anymore.
when I use the old spi driver . it works fine
If I watch good , it looks like when i request the page the server starts to download the page , but before the page is completly open i can see in the pst that the xml requests are being send out anyway. but the page ist up , even reloading a few times doenst help .
maybe the driver is too fast for the page to load . while the page is not completed , the xml already starts
the SPIPasm driver is a add in replacment right ?? , I dont need to change any data in it to work with my pins ?
Ill keep you posted about adding the second graph to the page . working on that
O and the 1 ms . I had no idear . sometimes I just play around a little to make things work ,. ,somtimes messing them up
but it can go slower . 2 a second I think i more than enoug , where to change it corrrectly ?
function parseState(xDoc) {
if(xDoc == null)
return
var target = document.getElementById(htmlTarget);
target.innerHTML = xDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue;
var target = document.getElementById(htmlTarget);
target.innerHTML = xDoc.getElementsByTagName("lv")[0].childNodes[0].nodeValue;
}
function latestTemp(){
//return Math.random()*50 + 25;
var temp = document.getElementById("placeholder").innerHTML
//return parseInt(temp);
return parseFloat(temp);
}
function latestlv(){
//return Math.random()*50 + 25;
var lv = document.getElementById("placeholder2").innerHTML
return parseFloat(lv);
}
or do need to make a clone of the var Graph = function(options) found in the graph for it to work
* buttons affect botch graps simultainus ( This ill try fix later )
* the first graph is not beeing painted
*de running bottom graph is the wrong values .it should be the humitdity
it's a work in progress . .any advise would be helpfull.
If I watch good , it looks like when i request the page the server starts to download the page , but before the page is completly open i can see in the pst that the xml requests are being send out anyway. but the page ist up , even reloading a few times doenst help .
maybe the driver is too fast for the page to load . while the page is not completed , the xml already starts
No, the client requests resources from the server. The temperature request is invoked (your current code) every 50ms. The W5200 is simply responding to the clients request. What you are describing is simply how browsers work and has nothing to do with the driver.
the SPIPasm driver is a add in replacment right ?? , I dont need to change any data in it to work with my pins ?
Correct
O and the 1 ms . I had no idear . sometimes I just play around a little to make things work ,. ,somtimes messing them up
but it can go slower . 2 a second I think i more than enoug , where to change it corrrectly ?
Currently temperature readings are requested every 50ms.
The parseState method is looking for an <lv> node. Do you expect an <lv> node or a <humidity>? You need to change either the XML document in the DAT section or the JavaScript code.
function parseState(xDoc) {
if(xDoc == null)
return
var target = document.getElementById(htmlTarget);
target.innerHTML = xDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue;
var target = document.getElementById(htmlTarget);
target.innerHTML = xDoc.getElementsByTagName("lv")[0].childNodes[0].nodeValue;
}
Hi Mike .
thanks for the info , the problem with the function parseState(xDoc) { looking for an lv I already found out yea.
currently I have 2 graphs . only the bottom one running humidity . but the top one has no temperture to be found . the xml seems to be working fine on the prop side ,
its definitly is reading and sniffing the source files , thats what im doing ,
too many bushes I cant see the road anymore ::PP
my graph file
[HTML]// ==============================================
// Copyright 2012 by Chris Valleskey
// Source: chrisvalleskey.com/html5-graph/
// Author: Chris Valleskey
// Do not distribute without authorization.
// ==============================================
// If this is a dynamic graph, begin the timer, otherwise draw the graph
if(this.data == undefined)
{
this.timer = setInterval(draw, this.interval);
this.doGraph();
}
else
{
for(var i =0; i < this.data.length; i++)
{
this.array = Math.round((this.range[1] - this.data ) * this.scale); // Convert real values to graph values
}
this.drawGraph();
}
}
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your Browser does not support AJAX!\nIt's about time to upgrade don't you think?");
}
}
//XmlHttpRequest object
var req = getXmlHttpRequestObject();
var htmlTarget;
var htmlTarget2;
var timer = 0;
function getRequest(resource, elementId) {
// handle the case where a querystring is not detected
var char = "&";
if(resource.indexOf("?", 0) == -1) {
char = "?";
}
First, there is no reason to call the XML document once for temperature and one for humidity. The XML document contains both the temperature and humidity.
Second logic bug is in the graph.js file. Here, the code is placing the temperature in target.innerHTML then immediate overwriting temperature with humidity. I'm pretty sure that's not what you want.
function parseState(xDoc) {
if(xDoc == null)
return
var target = document.getElementById(htmlTarget);
target.innerHTML = xDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue;
var target = document.getElementById(htmlTarget);
target.innerHTML = xDoc.getElementsByTagName("humidity")[0].childNodes[0].nodeValue;
}
The easiest thing to do is update the parseState method by hard coding the target html tag. Or you could add a new target member, target2, and assign the tag dynamically. The hard code method is quick and easy.
function parseState(xDoc) {
if(xDoc == null)
return
var target = document.getElementById("placeholder");
target.innerHTML = xDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue;
var target = document.getElementById("placeholder2");
target.innerHTML = xDoc.getElementsByTagName("humidity")[0].childNodes[0].nodeValue;
}
the SPI still working on your side ??/, you looked at the one I archived . ?
Yes, I ran your archived code. As a matter of fact, I'm running the code right it has been running for 15 minutes without errors. Obviously, I don't get any readings since I do not have the sensor.
I redownloaded your code and noticed that the sockets get stuck in CloseWait state.
Make sure you have a call to the CloseWait method. This update was in the last upload to post #8.
PUB CloseWait | i
repeat i from 0 to LISTENERS-1
if(sock[i].IsCloseWait OR sock[i].IsClosed)
sock[i].Disconnect
sock[i].Open
sock[i].Listen
PUB MultiSocketServer | bytesToRead, i, page, j, x, bytesSent, ptr
bytesToRead := i := j := x := 0
repeat
pst.str(string("TCP Service", CR))
CloseWait
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)
repeat until sock[i].Connected
i := ++i // LISTENERS
Also that code is sending requests abnormally fast. If the browser does not have focus the serial data stops which is a little weird too. I believe you have another bug somewhere. Could be related to one of the several JavaScript libraries instantiated.
I believe the requests are coming in so fast that the W5200/Prop is not catching the reset and there are probably a few dropped connections. I did not sniff the packets to verify but I have seen that before. The code above will reset a socket if it is in a Closed or Close Wait state when we want it to be in Listen mode.
The other thing I noticed running at the high data rate is a random delay while 4 sockets are all listening. I'm not sure if this is the browser, the operating system, or dropped connections. However, the system does recover after a few moments.
I redownloaded your code and noticed that the sockets get stuck in CloseWait state.
Make sure you have a call to the CloseWait method. This update was in the last upload to post #8.
PUB CloseWait | i
repeat i from 0 to LISTENERS-1
if(sock[i].IsCloseWait OR sock[i].IsClosed)
sock[i].Disconnect
sock[i].Open
sock[i].Listen
PUB MultiSocketServer | bytesToRead, i, page, j, x, bytesSent, ptr
bytesToRead := i := j := x := 0
repeat
pst.str(string("TCP Service", CR))
CloseWait
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)
repeat until sock[i].Connected
i := ++i // LISTENERS
Also that code is sending requests abnormally fast. If the browser does not have focus the serial data stops which is a little weird too. I believe you have another bug somewhere. Could be related to one of the several JavaScript libraries instantiated.
I believe the requests are coming in so fast that the W5200/Prop is not catching the reset and there are probably a few dropped connections. I did not sniff the packets to verify but I have seen that before. The code above will reset a socket if it is in a Closed or Close Wait state when we want it to be in Listen mode.
The other thing I noticed running at the high data rate is a random delay while 4 sockets are all listening. I'm not sure if this is the browser, the operating system, or dropped connections. However, the system does recover after a few moments.
Ive tried , changed , modified . tested . uploadded again . but it still doesnt work . I think il abando the faster spi for now till I get the rest of the page running to get back to it .
the w5200 has 8 ports right ?? , could you just increase the sockets from 4 to 8 to make it handle more connenctions ??
to be absolutly honest , I understadn the socket a bit . but honestly I dont have a heck of an ideear
Ok, I updated the Html5Graph and socket objects in port #8.
The number of sockets are controlled by the SOCKETS constant in the CON block. You should not need all 8 sockets for this project but you can adjust the value as needed.
SOCKETS = 8
The Socket.IsCloseWait was missing a return so the if the socket got into Close Wait the socket would not clear. That's my fault for not uploading the most current files.
I have Cleaned the HTML code . splitted it , shifted it up and down the 2 canvases . seperated them by a <body>
Nothing makes the second graph light up
Arent there Any JAVA goeroes aroud reading this post knowing the solution to this ,. definitly not a java expert
I have 2 graphs , wich one is supose to be Temperture and the bottom one humidity
only the bottom canvas does what it needs to .
The first canvas never does anything .
ANY Java advice would be wonderfull
my graphh.js file
[HTML]// ==============================================
// Copyright 2012 by Chris Valleskey
// Source: chrisvalleskey.com/html5-graph/
// Author: Chris Valleskey
// Do not distribute without authorization.
// ==============================================
// If this is a dynamic graph, begin the timer, otherwise draw the graph
if(this.data == undefined)
{
this.timer = setInterval(draw, this.interval);
this.doGraph();
}
else
{
for(var i =0; i < this.data.length; i++)
{
this.array = Math.round((this.range[1] - this.data ) * this.scale); // Convert real values to graph values
}
this.drawGraph();
}
}
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your Browser does not support AJAX!\nIt's about time to upgrade don't you think?");
}
}
//XmlHttpRequest object
var req = getXmlHttpRequestObject();
var htmlTarget;
var htmlTarget2;
var timer = 0;
function getRequest(resource, elementId) {
// handle the case where a querystring is not detected
var char = "&";
if(resource.indexOf("?", 0) == -1) {
char = "?";
}
with it like this , the xml requests had wrong data , sometimes good , allot a time not good , commas not set right andso
when I replaced it with my old pice of code
it did work .
my Code
PUB ParseResource(header) | ptr, value
ptr := header
repeat until byte[ptr++] == $2F '/ forward slash
if(byte[ptr] == $20) ' space
return @index
else
value := GetTemp
SetTemp(tempc3)
Setlv(lv3)
return @xml
PUB GetTemp
seed := CNT
?seed
return seed & $0F + 1
PUB SetTemp(value) | t1
t1 := value
t1 := t1/100
value -= t1 * 100
if(t1 > 0 and t1 < 9)
byte[@temperature][0] := t1 + $30
else
ResetTemp
return
t1 := value
t1 := t1/10
value -= t1 * 10
if(t1 > 0 and t1 < 9)
byte[@temperature][1] := t1 + $30
else
ResetTemp
return
t1 := value
if(t1 > 0 and t1 < 9)
byte[@temperature][3] := t1 + $30
else
ResetTemp
return
PUB SetLV(value) | t1
t1 := value
t1 := value
t1 := t1/10
value -= t1 * 10
'if(t1 > 0 and t1 < 9)
byte[@lvlv][0] := t1 + $30
'else
'ResetTemp
'return
t1 := value
'if(t1 > 0 and t1 < 9)
byte[@lvlv][1] := t1 + $30
'else
'ResetTemp
'return
PUB ResetTemp
byte[12] := $30
byte[13] := $30
byte[14] := $30
Anyway , its working now displaying @ 2 graphs
But the buttons of the graps dont work correctly
buttons of the first and second graph both change only the fist graph .
thinking the toggle has to look for the canvas name before making the change , but where to add this line of code
or am i simply overlooking something
other question , Is it possible to get all the data that gets displayed in the graph in a file to save it or so , all the xml request ? . or do the dataponit get lost when they leave the graph
a csv file orso ??
.
Next mission . is to get a few buttons on the page , so I can configure the setpoint and the offset data thats runs inside the propeller
but looks like chinees right now :P:P:P:p
almost forgot , the temp needs to get the 24.6 in the graph . now its beeing rounded
thinks ists gonna be javascript searching as crazy
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
Hey Mike, as usual very nice of you to create / extend your TCP/IP work. Just wanted to post that I shouldn't have used the pasm spi driver during my breadboarding of the this module. Not until I banged my head (and used my logic 8) for a while did I determine my leads couldn't handle the pasm driver signal speed. doh Thanks again.
EDIT: Seems that one of the two modules I ordered is flaky the other one works perfect with all the examples.
It's the same problem as the first post #1. Sometimes it works sometime not, mostly not. Originally thought it was my 3-5 inch leads that are twisted copper with nice breadboard ends on them so I switched to 1-2 inch solid copper It was really frustrating then I decided to pop in the other module (I bought two) and it works perfectly every time! Just tried it again just now after taking a break yesterday, perfect, every example.
I bought the module from WizNet's online store and have ask for an RMA for another module. This module and your code will allow everyone to play TCP/IP on the prop with low code overhead and low board form factor as a basic socket can now be had for 664 longs, really nice work.
EDIT: Holy cow I just ran the HTML5Graph.spin! Wow really nice.
@Igor_Rast, as Mike said time for you to open the books yourself, Mike has given you an excellent working example for you to learn from and extend. Get busy, all it takes is time "in the saddle".
Mike PM me with a mailing address because I'd like to send you a little gift from our company as a token of appreciation. Talk is cheap.
He D.P an Mike , I havent fallen asleep no . before you think that:P
I was working hard to get it all working like I want , I am getting pretty close to the end , and like I agreed with Mike , I will publish the code to test it out ,
happy to give back some work, ive been getting good help. and happy to get some replys from it back .
If you runned the html5 graph the last one i uploaded , there were a couple of problems left ,
the buttons diden,t change tha graph acordingly,
wanted to get the max , mix tempertures sins last reset , als with humidity , the prop keeps track of these and stores them on the eeprom so it doesnt get lost during power out or reset..
Now i have acomplished all that ,
now im moving over to get a dialog box orso to change the offset and setpoint in the brouwser and get the prop to accept it .
the prop controles a solid stat relay , so I can power up things when its nececary
and I want a dhcp program to set the ip and getway settings for me when I connect to a network , after that continue with the program like I have it right now
I was experimentig with that but havent got it working yep , the demos don seem to work *** they need an sd card that I didnt want to use
@MIKEeeeeee , realy can use your help again with this , ill keep you posted .
@D.P . what kind of company you work for , I started this project as a scool project , but now it has also turned into a bussiness, hoping to get it all working to make it a product powerd by this magicly birilliant PARALLAX PROPELLER , God I love the simplicity of this microcontroller.
OO , before i forget ,
For me it turned out, the problem of the wiznet somethimes working somthimes not , Is that I connected the rest pin also to the propeller , But the object just juses 4 pins , So the 5the reset pin that I attache was my bug, somethime it was high when loading somethimes low, letting the wiznet get a socet listen failure
i just did a
dira[reset_pin]~~
outa[reset_pin]~~
at the top at the code , The problem dissapeared like magic, Look at your pinout , what did you do whit the reset pin ???
hope this solves your problem to 2 took me about a week of struggeling with it before I did a chek on the schematic , and wonderd :
*** for the Where I am at right now ,
THis is my complete code , Hoping it wil not get abused
This is Countless Hours of work to getting what I want ,
Included .
driving an low power monolitic lcd with shift registers
dimming leds with pwm
getting temperture and lv form the sht-11 sensor
storing these values and setpont etc... to survive powerout ,
making a menu to configure everything , *** simple *** possible.
making an relay turn of and on according to setpoint and offset..
Making all this work togetter = priceless ,
The end is far from here with this propeller
SPIN
ASENBLY
HTML5
CSS
javascript
And Happy to get some replies
How do I adjust this login form , for it to look for my stored username and password in the prop with no sd card , and make a succesful login
got the first part working, but in the link that it redirects I can see the username and password clearly.
how can it be set that only if the password is correct it logs in and goes to the main page hosted on the wiznet
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}
He mike , I was struggeling with the parse method ,
I made a button with a link like k
[HTML]
<a href=´setsetset´ class=´btn´> Setpoint + </a>
[/HTML]
the setsetset gets triggerd in the Parseresourse
repeat j from 0 to i-1
if(strcomp(resPtr[j], string("HTTP")))
return @index
if(strcomp(resPtr[j], string("xmltemp")))
value := GetTemp
WriteNode(@temperature, value)
value := GetHumidity
WriteNode(@humidity, value)
return @xml
if(strcomp(resPtr[j], string("[B]setsetset[/B]")))
SetPointset
and the setpointset is just a simple call adiing 1 to the setpoint ,
PUB Setpointset
setpoint:=setpoint + 1
It works Fine , But I cant get it working without the full page getting reloaded and my graphs getting cleared ,
any idea ?
removing the return@ didn,t seem to do the trick , the driver seems to automaticly load the main page again , how can we stop this , if we only want the button presed to change the value stored in the prop??
It works Fine , But I cant get it working without the full page getting reloaded and my graphs getting cleared ,
any idea ?
Every request must have a response. It looks the server code is not sending a response to the client. I imagine there are socket errors and the client is recovering. It only appears like the a new page is loaded since the graph is all client side JavaScript. IF you are trying to get the server to do something, consider using an AJAX call not a direct HTTP request from the browser.
You are already invoking AJAX calls to retrieve point values on the graph. Just look at the existing code. If this is graph configuration then you should not send an HTTP request. The graph is running local in the browser.
Your question about authentication is a little more complex. Creating a logon form can work at a very rudimentary level. The problem is persisting the user credentials across session or application. The logon form can be the root index page. On submits, parse the name/value collection in the HTTP body to valid the username and password. The response in this case would be the graph page. However, once someone know the URL of the graph page, they can bypass the logon page.
Lastly, you mentioned several times that an SD card is required for other features. That is not true. All of the source code provided in this thread does not use an SD card. DNS included - post 3
He Mike , I have read your pice carfully about 10 times , , I understand the first part and that the java script is client side and that a request means somthings comming back , so AJAX is the way to go ,
but where is the test code placed that runs. thats supose to change the setpoint , dont realy understand that part. doing my best to understand all that is going on with javascript. A example would be verry usefull , a button toggeling a pin orso ? the spinrets demo it stuggled with but did,t get any results yet
About the login form , The bypass that you say of is what i also thout would happen if I do it that way, So I was tinking of it looking op the username and pasword from a online folder orso (php?) and let it authenticate the root user that way , when root user is created already , you could make another user orso that gets stored with a cookie orso on the pc , Dont know if its even possible .
running out of good info sourses to read about the loginform and user authentification , where that happens.
the basic authenification just decodes the username and pasword and it get recoded again on the server side , but it,s stil the same principal . am i right ?
Question
I tried to open the page today with a iphone5 connected to my local network , but coulded get the page up .
the DNS . like the demo , is it supose to run parallel to the multisocket in order to let the page run like i do now , and have it cald by either its ip or the hostname , beeeing controller orso not an controller.com orso.
the basic authenification just decodes the username and pasword and it get recoded again on the server side , but it,s stil the same principal . am i right ?
Same concept - completely different driver.
Question
I tried to open the page today with a iphone5 connected to my local network , but coulded get the page up .
Did it ever work? Does yur browser work as expected? What have you done to troubleshoot?
the DNS . like the demo , is it supose to run parallel to the multisocket in order to let the page run like i do now , and have it cald by either its ip or the hostname , beeeing controller orso not an controller.com orso.
The DNS object initializes like a socket. Once you are done looking up a URL, you can reuse the socket for something else or look up another URL.
Comments
It works great on my end. Double check your code.
I would use SpiPasm, it's much faster.
You have the JavaScript configured to send AJAX HTTP GET requests every 1ms. Is that really what you want? There is an excellent chance that the W5200 is in the middle of a transaction when you kill the connection by uploading new code. I see this from time to time - not often. It's usually related to a programming error. Just recycle power. Secondly, the web page never stops sending requests since it is running on the client.
This is a false assumption. The initial page loads one time and one time only. Only the XML document is passed to the page via an HTTP AJAX GET. JavaScript parses the XML document and updates the DOM on the client side.
To be thorough, I downloaded the source code from post #8. Set the AJAX requests to 1ms and ran it for 30 minutes without error. Then I added text to make the file 5465 bytes and ran it for another 30 minutes at 1ms intervals without error.
So we are on the same page, I found and fixed 2 bugs. One was an actual bug related to the W5200's circular buffer. Turned out to be a typo. I fixed it and all is good. The other, I guess we can call it a bug. When I wrote the graph demo I never considered the demo HTML would take more than 2k. It was just a demo for Christ sakes. I went ahead and updated the code to handle a 2k limit.
As far as I can tell the code works great.
How about posting the code that does not work correctly.
I meshed up the code to get a second graph running , now I have none running , only the canvas .
just a sec ill upload the latest version . that did work .
ok
here is the one that when I change the driver to work with the SPIPasm the page doesn reload completly anymore.
when I use the old spi driver . it works fine
If I watch good , it looks like when i request the page the server starts to download the page , but before the page is completly open i can see in the pst that the xml requests are being send out anyway. but the page ist up , even reloading a few times doenst help .
maybe the driver is too fast for the page to load . while the page is not completed , the xml already starts
the SPIPasm driver is a add in replacment right ?? , I dont need to change any data in it to work with my pins ?
Ill keep you posted about adding the second graph to the page . working on that
Html5Graph -spipasm Archive [Date 2012.09.11 Time 03.08].zip
O and the 1 ms . I had no idear
but it can go slower . 2 a second I think i more than enoug , where to change it corrrectly ?
pst Says
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://192.168.2.151/test/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', 'placeholder2')", $22, ", 50);", 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, { } "<script type='text/javascript'>" , CR, LF, { } "window.onload = function() {", CR, LF, { } "g_graph = new Graph({", CR, LF, { } "'id': 'example-graph2',", CR, LF, { } "'strokeStyle': '#819C58',", CR, LF, { } "'fillStyle': 'rgba(64,128,0,0.25)',", CR, LF, { } "'call': function(){ return ( Math.floor(latestlv())); }", CR, LF, { } "});}", 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'>© 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'>25</span></div>", CR, LF, { } "<canvas id='example-graph' width='940' height='300'></canvas><p class='buttons'>", CR, LF, { } "<a onclick=", $22, "toggleValue('showgrid')", $22, "class='btn'>Grid</a>", CR, LF, { } "<a onclick=", $22, "toggleValue('showshadow')", $22, "class='btn'>Shadow</a>", CR, LF, { } "<a onclick=", $22, "toggleValue('showline')", $22, "class='btn'>Lines</a>", CR, LF, { } "<a onclick=", $22, "toggleValue('showfill')", $22, "class='btn'>Fill</a>", CR, LF, { } "<a onclick=", $22, "toggleValue('showdots')", $22, "class='btn'>Dots</a>", CR, LF, { } "<a onclick=", $22, "toggleValue('showlabels')", $22, "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, { } "<section class=post-content'>", CR, LF, { } "<div><span id='placeholder2'>25</span></div>", CR, LF, { } "<canvas id='example-graph2' width='940' height='300'></canvas><p class='buttons'>", CR, LF, { } "<a onclick=", $22, "toggleValue('showgrid')", $22, "class='btn'>Grid</a>", CR, LF, { } "<a onclick=", $22, "toggleValue('showshadow')", $22, "class='btn'>Shadow</a>", CR, LF, { } "<a onclick=", $22, "toggleValue('showline')", $22, "class='btn'>Lines</a>", CR, LF, { } "<a onclick=", $22, "toggleValue('showfill')", $22, "class='btn'>Fill</a>", CR, LF, { } "<a onclick=", $22, "toggleValue('showdots')", $22, "class='btn'>Dots</a>", CR, LF, { } "<a onclick=", $22, "toggleValue('showlabels')", $22, "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, $31, $2E, $30, "</temp><humidity>" lvlv byte $30, $30, $2E, $30, "</humidity></root>", 0 buff byte $0[BUFFER_2K]in the graph.js file i moddified it at the bottom a little
the rest of the code is same *** yours (http://www.mikegebhard.com/graph.js)
function parseState(xDoc) { if(xDoc == null) return var target = document.getElementById(htmlTarget); target.innerHTML = xDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue; var target = document.getElementById(htmlTarget); target.innerHTML = xDoc.getElementsByTagName("lv")[0].childNodes[0].nodeValue; } function latestTemp(){ //return Math.random()*50 + 25; var temp = document.getElementById("placeholder").innerHTML //return parseInt(temp); return parseFloat(temp); } function latestlv(){ //return Math.random()*50 + 25; var lv = document.getElementById("placeholder2").innerHTML return parseFloat(lv); }or do need to make a clone of the var Graph = function(options) found in the graph for it to work
* buttons affect botch graps simultainus ( This ill try fix later )
* the first graph is not beeing painted
*de running bottom graph is the wrong values .it should be the humitdity
it's a work in progress . .any advise would be helpfull.
Correct
Currently temperature readings are requested every 50ms.
} "setInterval(", $22, "getRequest('xmltemp', 'placeholder')", $22, ", 50);", CR, LF, {I'm not sure how to add two graphs to a page. I would have to read the openly published graph.js instructions and source code.
The humidity value is located in the <humidity> node.
The parseState method is looking for an <lv> node. Do you expect an <lv> node or a <humidity>? You need to change either the XML document in the DAT section or the JavaScript code.
function parseState(xDoc) { if(xDoc == null) return var target = document.getElementById(htmlTarget); target.innerHTML = xDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue; var target = document.getElementById(htmlTarget); target.innerHTML = xDoc.getElementsByTagName("lv")[0].childNodes[0].nodeValue; }thanks for the info , the problem with the function parseState(xDoc) { looking for an lv I already found out yea.
currently I have 2 graphs . only the bottom one running humidity . but the top one has no temperture to be found . the xml seems to be working fine on the prop side ,
its definitly is reading and sniffing the source files , thats what im doing ,
too many bushes I cant see the road anymore ::PP
anyway . this is my scourse now
[HTML]<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<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://192.168.2.151/test/graphh.js'></script>
<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')", 50);
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>
<script type='text/javascript'>
window.onload = function() {
g_graph = new Graph({
'id': 'example-graph2',
'strokeStyle': '#819C58',
'fillStyle': 'rgba(64,128,0,0.25)',
'call': function(){ return ( Math.floor(latestlv())); }
});}
setInterval("getRequest('xmlhumidity', 'placeholder2')", 50);
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>
</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>
<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>
<a onclick='setFill()' class='btn'>Random Fill</a>
<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>
<div><span id='placeholder2'>25</span></div>
<canvas id='example-graph2' width='940' height='300'></canvas><p class='buttons'>
<a onclick="toggleValue('showgrid')"class='btn'>Grid</a>
<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>
<a onclick='setFill()' class='btn'>Random Fill</a>
<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>
<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') +
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]
my graph file
[HTML]// ==============================================
// Copyright 2012 by Chris Valleskey
// Source: chrisvalleskey.com/html5-graph/
// Author: Chris Valleskey
// Do not distribute without authorization.
// ==============================================
var Graph = function(options)
{
var default_args = {
'id': "graph",
'interval': 300,
'showline': true,
'showfill': true,
'lineWidth': 2,
'strokeStyle': "#666",
'gridcolor': "#EEE",
'background': "#F9F9F9",
'fillStyle': "rgba(0,0,0,0.25)",
'showdots': true,
'showgrid': true,
'showlabels': true,
'grid': [10,10],
'range': [0,100],
'call': function(){return Math.floor(Math.random()*100) + 50;}
}
for(var index in default_args) {
if(typeof options[index] == "undefined")
options[index] = default_args[index];
}
this.id = options;
this.interval = options;
this.lineWidth = options;
this.strokeStyle = options;
this.fillStyle = options;
this.gridcolor = options;
this.background = options;
this.showdots = options;
this.showshadow = options;
this.showgrid = options;
this.showline = options;
this.showfill = options;
this.range = options;
this.call = options;
this.data = options;
this.canvas = document.getElementById(this.id);
this.context = document.getElementById(this.id).getContext("2d");
this.maxvalue = this.range[1] - this.range[0];
this.scale = Math.round((this.canvas.height / this.maxvalue)*10)/10;
this.showlabels = options;
this.labelfilter = options;
if(options.constructor.toString().indexOf("Array") == -1)
{
this.grid_x = this.grid_y = Math.floor(options * this.scale);
} else {
this.grid_x = Math.floor(options[0] * this.scale);
this.grid_y = Math.floor(options[1] * this.scale);
}
this.array = [];
var _self = this;
this.drawGraph = function()
{
this.canvas.setAttribute('width',this.canvas.width); // Clear the canvas
this.context.fillStyle = this.background;
this.context.fillRect(0,0,this.canvas.width,this.canvas.height); // Fill the background
if(this.showgrid)
this.drawGrid();
this.context.lineWidth = this.lineWidth;
this.context.strokeStyle = this.strokeStyle;
this.context.fillStyle = this.fillStyle;
this.context.lineJoin = "round";
if(this.showshadow)
{
this.context.shadowColor = this.fillStyle;
this.context.shadowBlur = 5;
}
if(this.array.length > (this.canvas.width/this.grid_x)+1)
this.array.shift();
if(this.showfill)
this.drawFill();
if(this.showline && this.lineWidth > 0)
this.drawLine();
if(this.showdots)
this.drawDots();
if(this.showlabels)
this.drawLabels();
}
this.doGraph = function()
{
call = this.call();
if(call == undefined)
call = 0;
value = Math.round((this.range[1] - call ) * this.scale);
this.array.push(value);
if(options)
document.getElementById('output').innerHTML = "CALL: " + call + " VALUE: " + value + " SCALE: " + this.scale;
this.drawGraph();
}
this.drawFill = function()
{
this.context.beginPath();
for(var i = 0; i < this.array.length; i++)
{
var pos_y = this.array;
this.context.lineTo(i*this.grid_x+0.5, pos_y);
}
this.context.lineTo((i-1)*this.grid_x+0.5, this.canvas.height-0.5);
this.context.lineTo(0, this.canvas.height);
if(this.array.length > 1)
this.context.fill();
this.context.closePath();
}
this.drawLine = function()
{
this.context.beginPath();
var offset = ((this.context.lineWidth+1)%2)/2;
for(var i = 0; i < this.array.length; i++)
{
var pos_y = this.array;
this.context.lineTo(i*this.grid_x+offset, pos_y);
}
this.context.stroke();
this.context.closePath();
}
this.drawDots = function()
{
this.context.beginPath();
this.context.fillStyle = this.strokeStyle;
for(var i = 0; i < this.array.length; i++)
{
var pos_y = this.array;
var dotradius = 3;
this.context.beginPath();
this.context.arc(i*this.grid_x+0.5, pos_y-0.5,dotradius,0,Math.PI*2,true);
this.context.fill();
this.context.closePath();
}
this.context.closePath();
}
this.drawLabels = function()
{
for(var i = 0; i < this.array.length; i++)
{
var pos_y = this.array;
if(this.data != undefined)
text = this.data;
else
text = Math.round(((this.array / this.scale) - this.range[1]) * -1);
this.drawLabel(text,i*this.grid_x+0.5, pos_y-0.5);
}
}
this.drawLabel = function(text,pos_x,pos_y)
{
this.context.save();
if(pos_y < 20)
{
if(pos_y > 0)
pos_y += 15;
else
pos_y = 13;
} else if(pos_y > this.canvas.height)
{
pos_y = this.canvas.height - 10;
}
else
{
pos_y -= 10;
}
if(this.labelfilter != undefined)
text = this.labelfilter.replace(/%label%/g,text);
this.context.textAlign = "center";
this.context.font = 'bold 10px/2 sans-serif';
this.context.fillStyle = "#333";
this.context.fillText(text,pos_x,pos_y);
this.context.restore();
}
this.drawGrid = function()
{
this.context.beginPath();
if(this.grid_x > 0)
{
for (var x = 0.5; x < this.canvas.width; x += this.grid_x)
{
this.context.moveTo(x, 0);
this.context.lineTo(x, this.canvas.height);
}
}
if(this.grid_y > 0)
{
for (var y = this.canvas.height - 0.5; y > 0; y -= this.grid_y)
{
this.context.moveTo(0, y);
this.context.lineTo(this.canvas.width, y);
}
}
this.context.strokeStyle = this.gridcolor;
this.context.stroke();
this.context.closePath();
}
/*this.checkPosition = function(pos_y)
{
if(pos_y < 0 )
{
pos_y = 0;
}
if(pos_y > this.maxvalue * this.scale)
{
pos_y = this.maxvalue * this.scale;
}
return pos_y;
}*/
/* Supplemental functions */
this.toggleValue = function(name)
{
this[name] = this[name]? false:true;
this.drawGraph();
}
this.setColor = function(newcolor)
{
this.strokeStyle = newcolor;
this.drawGraph();
}
this.setFill = function(newfill)
{
this.fillStyle = newfill;
this.drawGraph();
}
this.setValue = function(name,value)
{
this[name] = value;
this.drawGraph();
}
this.toggleDraw = function()
{
if(this.timer == undefined)
{
this.timer = setInterval(draw, this.interval);
}
else
{
clearInterval(this.timer);
this.timer = undefined;
}
}
this.clearGraph = function()
{
this.array = [];
this.drawGraph();
}
function draw()
{
_self.doGraph();
}
// If this is a dynamic graph, begin the timer, otherwise draw the graph
if(this.data == undefined)
{
this.timer = setInterval(draw, this.interval);
this.doGraph();
}
else
{
for(var i =0; i < this.data.length; i++)
{
this.array = Math.round((this.range[1] - this.data ) * this.scale); // Convert real values to graph values
}
this.drawGraph();
}
}
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your Browser does not support AJAX!\nIt's about time to upgrade don't you think?");
}
}
//XmlHttpRequest object
var req = getXmlHttpRequestObject();
var htmlTarget;
var htmlTarget2;
var timer = 0;
function getRequest(resource, elementId) {
// handle the case where a querystring is not detected
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);
req.onreadystatechange = handleResponse;
htmlTarget = elementId;
req.send(null);
return false;
}
if (req.readyState == 4 || req.readyState == 0) {
req.open("GET", resource + char + 'ms=' + new Date().getTime(), true);
req.onreadystatechange = handleResponse;
htmlTarget2 = elementId;
req.send(null);
return false;
}
}
function handleResponse() {
if (req.readyState == 4) {
timer = 0;
parseState(req.responseXML);
}
/*
if(req.readState == 1 || req.readyState == 3){
timer++;
}
if(timer == 2000)
parseState(null);
*/
}
function parseState(xDoc) {
if(xDoc == null)
return
var target = document.getElementById(htmlTarget);
target.innerHTML = xDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue;
var target = document.getElementById(htmlTarget);
target.innerHTML = xDoc.getElementsByTagName("humidity")[0].childNodes[0].nodeValue;
}
function latestTemp(){
//return Math.random()*50 + 25;
var temp = document.getElementById("placeholder").innerHTML
//return parseInt(temp);
return parseFloat(temp);
}
function latestlv(){
//return Math.random()*50 + 25;
var humidity = document.getElementById("placeholder2").innerHTML
return parseFloat(humidity);
}
[/HTML]
and a screen shot .
Ill keep you posted .
the SPI still working on your side ??/, you looked at the one I archived . ?
First, there is no reason to call the XML document once for temperature and one for humidity. The XML document contains both the temperature and humidity.
You can remove this line
setInterval("getRequest('xmlhumidity', 'placeholder2')", 50);Second logic bug is in the graph.js file. Here, the code is placing the temperature in target.innerHTML then immediate overwriting temperature with humidity. I'm pretty sure that's not what you want.
function parseState(xDoc) { if(xDoc == null) return var target = document.getElementById(htmlTarget); target.innerHTML = xDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue; var target = document.getElementById(htmlTarget); target.innerHTML = xDoc.getElementsByTagName("humidity")[0].childNodes[0].nodeValue; }The easiest thing to do is update the parseState method by hard coding the target html tag. Or you could add a new target member, target2, and assign the tag dynamically. The hard code method is quick and easy.
function parseState(xDoc) { if(xDoc == null) return var target = document.getElementById("placeholder"); target.innerHTML = xDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue; var target = document.getElementById("placeholder2"); target.innerHTML = xDoc.getElementsByTagName("humidity")[0].childNodes[0].nodeValue; }Yes, I ran your archived code. As a matter of fact, I'm running the code right it has been running for 15 minutes without errors. Obviously, I don't get any readings since I do not have the sensor.
The results are...
You should fix that! If the reading is unexpected, pass a zero or some value to signal a read error.
Make sure you have a call to the CloseWait method. This update was in the last upload to post #8.
PUB CloseWait | i repeat i from 0 to LISTENERS-1 if(sock[i].IsCloseWait OR sock[i].IsClosed) sock[i].Disconnect sock[i].Open sock[i].Listen PUB MultiSocketServer | bytesToRead, i, page, j, x, bytesSent, ptr bytesToRead := i := j := x := 0 repeat pst.str(string("TCP Service", CR)) CloseWait 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) repeat until sock[i].Connected i := ++i // LISTENERSAlso that code is sending requests abnormally fast. If the browser does not have focus the serial data stops which is a little weird too. I believe you have another bug somewhere. Could be related to one of the several JavaScript libraries instantiated.I believe the requests are coming in so fast that the W5200/Prop is not catching the reset and there are probably a few dropped connections. I did not sniff the packets to verify but I have seen that before. The code above will reset a socket if it is in a Closed or Close Wait state when we want it to be in Listen mode.
The other thing I noticed running at the high data rate is a random delay while 4 sockets are all listening. I'm not sure if this is the browser, the operating system, or dropped connections. However, the system does recover after a few moments.
the humidity does overwright the temperture . at both graphs I see the humidity beenig displayd. and the bottom graph running the humidity ,
what your telling me about the second XML request sounds logic enoug , but when I remove it . I don,t get any graph beeing drawn .
thats also the cast when replacing the htmltarget with the placeholder . It looks like im further off the track .
the first graph not beeing drawn at alll at any time is what gets me confused , cant figure out why it doesnt
cant seem to find it in post 8??
nevermind I found it
Ive tried , changed , modified . tested . uploadded again . but it still doesnt work . I think il abando the faster spi for now till I get the rest of the page running to get back to it .
the w5200 has 8 ports right ?? , could you just increase the sockets from 4 to 8 to make it handle more connenctions ??
to be absolutly honest , I understadn the socket a bit . but honestly I dont have a heck of an ideear
I much apriciate it . sure makes a hugh diference . thanks for the help 10000 X
The number of sockets are controlled by the SOCKETS constant in the CON block. You should not need all 8 sockets for this project but you can adjust the value as needed.
The Socket.IsCloseWait was missing a return so the if the socket got into Close Wait the socket would not clear. That's my fault for not uploading the most current files.
I have Cleaned the HTML code . splitted it , shifted it up and down the 2 canvases . seperated them by a <body>
Nothing makes the second graph light up
Arent there Any JAVA goeroes aroud reading this post knowing the solution to this ,. definitly not a java expert
I have 2 graphs , wich one is supose to be Temperture and the bottom one humidity
only the bottom canvas does what it needs to .
The first canvas never does anything .
ANY Java advice would be wonderfull
my graphh.js file
[HTML]// ==============================================
// Copyright 2012 by Chris Valleskey
// Source: chrisvalleskey.com/html5-graph/
// Author: Chris Valleskey
// Do not distribute without authorization.
// ==============================================
var Graph = function(options)
{
var default_args = {
'id': "graph",
'interval': 1000,
'showline': true,
'showfill': true,
'lineWidth': 2,
'strokeStyle': "#666",
'gridcolor': "#EEE",
'background': "#F9F9F9",
'fillStyle': "rgba(0,0,0,0.25)",
'showdots': true,
'showgrid': true,
'showlabels': true,
'grid': [10,10],
'range': [0,100],
'call': function(){return Math.floor(Math.random()*100) + 50;}
}
for(var index in default_args) {
if(typeof options[index] == "undefined")
options[index] = default_args[index];
}
this.id = options;
this.interval = options;
this.lineWidth = options;
this.strokeStyle = options;
this.fillStyle = options;
this.gridcolor = options;
this.background = options;
this.showdots = options;
this.showshadow = options;
this.showgrid = options;
this.showline = options;
this.showfill = options;
this.range = options;
this.call = options;
this.data = options;
this.canvas = document.getElementById(this.id);
this.context = document.getElementById(this.id).getContext("2d");
this.maxvalue = this.range[1] - this.range[0];
this.scale = Math.round((this.canvas.height / this.maxvalue)*10)/10;
this.showlabels = options;
this.labelfilter = options;
if(options.constructor.toString().indexOf("Array") == -1)
{
this.grid_x = this.grid_y = Math.floor(options * this.scale);
} else {
this.grid_x = Math.floor(options[0] * this.scale);
this.grid_y = Math.floor(options[1] * this.scale);
}
this.array = [];
var _self = this;
this.drawGraph = function()
{
this.canvas.setAttribute('width',this.canvas.width); // Clear the canvas
this.context.fillStyle = this.background;
this.context.fillRect(0,0,this.canvas.width,this.canvas.height); // Fill the background
if(this.showgrid)
this.drawGrid();
this.context.lineWidth = this.lineWidth;
this.context.strokeStyle = this.strokeStyle;
this.context.fillStyle = this.fillStyle;
this.context.lineJoin = "round";
if(this.showshadow)
{
this.context.shadowColor = this.fillStyle;
this.context.shadowBlur = 5;
}
if(this.array.length > (this.canvas.width/this.grid_x)+1)
this.array.shift();
if(this.showfill)
this.drawFill();
if(this.showline && this.lineWidth > 0)
this.drawLine();
if(this.showdots)
this.drawDots();
if(this.showlabels)
this.drawLabels();
}
this.doGraph = function()
{
call = this.call();
if(call == undefined)
call = 0;
value = Math.round((this.range[1] - call ) * this.scale);
this.array.push(value);
if(options)
document.getElementById('output').innerHTML = "CALL: " + call + " VALUE: " + value + " SCALE: " + this.scale;
this.drawGraph();
}
this.drawFill = function()
{
this.context.beginPath();
for(var i = 0; i < this.array.length; i++)
{
var pos_y = this.array;
this.context.lineTo(i*this.grid_x+0.5, pos_y);
}
this.context.lineTo((i-1)*this.grid_x+0.5, this.canvas.height-0.5);
this.context.lineTo(0, this.canvas.height);
if(this.array.length > 1)
this.context.fill();
this.context.closePath();
}
this.drawLine = function()
{
this.context.beginPath();
var offset = ((this.context.lineWidth+1)%2)/2;
for(var i = 0; i < this.array.length; i++)
{
var pos_y = this.array;
this.context.lineTo(i*this.grid_x+offset, pos_y);
}
this.context.stroke();
this.context.closePath();
}
this.drawDots = function()
{
this.context.beginPath();
this.context.fillStyle = this.strokeStyle;
for(var i = 0; i < this.array.length; i++)
{
var pos_y = this.array;
var dotradius = 3;
this.context.beginPath();
this.context.arc(i*this.grid_x+0.5, pos_y-0.5,dotradius,0,Math.PI*2,true);
this.context.fill();
this.context.closePath();
}
this.context.closePath();
}
this.drawLabels = function()
{
for(var i = 0; i < this.array.length; i++)
{
var pos_y = this.array;
if(this.data != undefined)
text = this.data;
else
text = Math.round(((this.array / this.scale) - this.range[1]) * -1);
this.drawLabel(text,i*this.grid_x+0.5, pos_y-0.5);
}
}
this.drawLabel = function(text,pos_x,pos_y)
{
this.context.save();
if(pos_y < 20)
{
if(pos_y > 0)
pos_y += 15;
else
pos_y = 13;
} else if(pos_y > this.canvas.height)
{
pos_y = this.canvas.height - 10;
}
else
{
pos_y -= 10;
}
if(this.labelfilter != undefined)
text = this.labelfilter.replace(/%label%/g,text);
this.context.textAlign = "center";
this.context.font = 'bold 10px/2 sans-serif';
this.context.fillStyle = "#333";
this.context.fillText(text,pos_x,pos_y);
this.context.restore();
}
this.drawGrid = function()
{
this.context.beginPath();
if(this.grid_x > 0)
{
for (var x = 0.5; x < this.canvas.width; x += this.grid_x)
{
this.context.moveTo(x, 0);
this.context.lineTo(x, this.canvas.height);
}
}
if(this.grid_y > 0)
{
for (var y = this.canvas.height - 0.5; y > 0; y -= this.grid_y)
{
this.context.moveTo(0, y);
this.context.lineTo(this.canvas.width, y);
}
}
this.context.strokeStyle = this.gridcolor;
this.context.stroke();
this.context.closePath();
}
/*this.checkPosition = function(pos_y)
{
if(pos_y < 0 )
{
pos_y = 0;
}
if(pos_y > this.maxvalue * this.scale)
{
pos_y = this.maxvalue * this.scale;
}
return pos_y;
}*/
/* Supplemental functions */
this.toggleValue = function(name)
{
this[name] = this[name]? false:true;
this.drawGraph();
}
this.setColor = function(newcolor)
{
this.strokeStyle = newcolor;
this.drawGraph();
}
this.setFill = function(newfill)
{
this.fillStyle = newfill;
this.drawGraph();
}
this.setValue = function(name,value)
{
this[name] = value;
this.drawGraph();
}
this.toggleDraw = function()
{
if(this.timer == undefined)
{
this.timer = setInterval(draw, this.interval);
}
else
{
clearInterval(this.timer);
this.timer = undefined;
}
}
this.clearGraph = function()
{
this.array = [];
this.drawGraph();
}
function draw()
{
_self.doGraph();
}
// If this is a dynamic graph, begin the timer, otherwise draw the graph
if(this.data == undefined)
{
this.timer = setInterval(draw, this.interval);
this.doGraph();
}
else
{
for(var i =0; i < this.data.length; i++)
{
this.array = Math.round((this.range[1] - this.data ) * this.scale); // Convert real values to graph values
}
this.drawGraph();
}
}
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your Browser does not support AJAX!\nIt's about time to upgrade don't you think?");
}
}
//XmlHttpRequest object
var req = getXmlHttpRequestObject();
var htmlTarget;
var htmlTarget2;
var timer = 0;
function getRequest(resource, elementId) {
// handle the case where a querystring is not detected
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);
req.onreadystatechange = handleResponse;
htmlTarget = elementId;
req.send(null);
return false;
}
if (req.readyState == 4 || req.readyState == 0) {
req.open("GET", resource + char + 'ms=' + new Date().getTime(), true);
req.onreadystatechange = handleResponse;
htmlTarget2 = elementId;
req.send(null);
return false;
}
}
function handleResponse() {
if (req.readyState == 4) {
timer = 0;
parseState(req.responseXML);
}
/*
if(req.readState == 1 || req.readyState == 3){
timer++;
}
if(timer == 2000)
parseState(null);
*/
}
function parseState(xDoc) {
if(xDoc == null)
return
var target = document.getElementById(htmlTarget);
target.innerHTML = xDoc.getElementsByTagName("temp")[0].childNodes[0].nodeValue;
var target = document.getElementById(htmlTarget);
target.innerHTML = xDoc.getElementsByTagName("humidity")[0].childNodes[0].nodeValue;
}
function latestTemp(){
//return Math.random()*50 + 25;
var temp = document.getElementById("placeholder").innerHTML
//return parseInt(temp);
return parseFloat(temp);
}
function latestlv(){
//return Math.random()*50 + 25;
var humidity = document.getElementById("placeholder2").innerHTML
return parseFloat(humidity);
}
[/HTML]
and the page sourse
[HTML]<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<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://192.168.2.151/test/graphh.js'></script>
<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', 'placeholder2')", 1000);
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>
</header>
<article id='post' role='main'>
<div class='container'>
<header>
<hgroup>
<h1>Temperatuur</h1>
</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>
<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>
<a onclick='setFill()' class='btn'>Random Fill</a>
<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>
</script>
</body>
<script type='text/javascript' src='http://192.168.2.151/test/graphh.js'></script>
<script type='text/javascript'>
window.onload = function() {
g_graph = new Graph({
'id': 'example-graph2',
'strokeStyle': '#819C58',
'fillStyle': 'rgba(64,128,0,0.25)',
'call': function(){ return ( Math.floor(latestlv())); }
});}
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>
<body id='graph' class='page'>
<article id='post2' role='main'>
<div class='container'>
<header>
<hgroup>
<h1>Luchtvochtigheid</h1>
</hgroup>
</header>
<div><span id='placeholder2'>25</span></div>
<canvas id='example-graph2' width='940' height='300'></canvas><p class='buttons'>
<a onclick="toggleValue('showgrid')"class='btn'>Grid</a>
<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>
<a onclick='setFill()' class='btn'>Random Fill</a>
<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>
</script>
</body>
</html>[/HTML]
and a screen shot of the current vieuw
Hoping on some mirakle solution :P
BTW, JavaScript is not Java.
[HTML]
<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())); }
});
g_graph = new Graph({
'id': 'secondgraph',
'strokeStyle': '#819C58',
'fillStyle': 'rgba(64,128,0,0.25)',
'call': function()
{ return ( Math.floor(latestHumidity())); }
});}
</script>
[/HTML]
Now I got it working displaying @ graps .
there seem to be a problem with this pice of code
PUB ParseResource(header) | ptr, value ptr := header repeat until byte[ptr++] == $2F '/ forward slash if(byte[ptr] == $20) ' space return @index else value := GetTemp WriteNode(@temperature, value) value := GetHumidity WriteNode(@humidity, value) return @xml PUB GetTemp seed := CNT ?seed return seed & $8F + 5 PUB GetHumidity seed := CNT ?seed return !seed & $7F + 1 PUB WriteNode(buffer, value) | t1 t1 := value t1 := t1/100 value -= t1 * 100 byte[buffer][0] := t1 + $30 t1 := value t1 := t1/10 value -= t1 * 10 byte[buffer][1] := t1 + $30 t1 := value byte[buffer][3] := t1 + $30with it like this , the xml requests had wrong data , sometimes good , allot a time not good , commas not set right andso
when I replaced it with my old pice of code
it did work .
my Code
PUB ParseResource(header) | ptr, value ptr := header repeat until byte[ptr++] == $2F '/ forward slash if(byte[ptr] == $20) ' space return @index else value := GetTemp SetTemp(tempc3) Setlv(lv3) return @xml PUB GetTemp seed := CNT ?seed return seed & $0F + 1 PUB SetTemp(value) | t1 t1 := value t1 := t1/100 value -= t1 * 100 if(t1 > 0 and t1 < 9) byte[@temperature][0] := t1 + $30 else ResetTemp return t1 := value t1 := t1/10 value -= t1 * 10 if(t1 > 0 and t1 < 9) byte[@temperature][1] := t1 + $30 else ResetTemp return t1 := value if(t1 > 0 and t1 < 9) byte[@temperature][3] := t1 + $30 else ResetTemp return PUB SetLV(value) | t1 t1 := value t1 := value t1 := t1/10 value -= t1 * 10 'if(t1 > 0 and t1 < 9) byte[@lvlv][0] := t1 + $30 'else 'ResetTemp 'return t1 := value 'if(t1 > 0 and t1 < 9) byte[@lvlv][1] := t1 + $30 'else 'ResetTemp 'return PUB ResetTemp byte[12] := $30 byte[13] := $30 byte[14] := $30Anyway , its working now displaying @ 2 graphs
But the buttons of the graps dont work correctly
buttons of the first and second graph both change only the fist graph .
thinking the toggle has to look for the canvas name before making the change , but where to add this line of code
or am i simply overlooking something
other question , Is it possible to get all the data that gets displayed in the graph in a file to save it or so , all the xml request ? . or do the dataponit get lost when they leave the graph
a csv file orso ??
.
Next mission . is to get a few buttons on the page , so I can configure the setpoint and the offset data thats runs inside the propeller
a zoom and scroll true the graps s also on the to do list :P
http://www.amcharts.com/javascript/line-chart-with-scroll-and-zoom/
but looks like chinees right now :P:P:P:p
almost forgot , the temp needs to get the 24.6 in the graph . now its beeing rounded
thinks ists gonna be javascript searching as crazy
Html5Graphmike - Archive [Date 2012.09.12 Time 11.46].zip
Is it possible to get a link to a second page , served from the prop without an sd card. Ive read the tread at http://spinneret.servebeer.com:5000/gstart/get.htm
but tis uses a sd card , Looking at the code . i figure out that the Parseresourse needs to modify
PUB ParseResource(header) | ptr, value ptr := header repeat until byte[ptr++] == $2F '/ forward slash if(byte[ptr] == $20) ' space return @index else value := GetTemp Settemp(tempc3) Settemp(lv3) return @xmlBut l cant figure out where it looks for the / and then the space ($2F $20)
to return the page .
Or how to modify it for when I click on the link in the index page , that it wil serve a second page named halo , also stored in the DAT section
Hoping you could point me the right way
I made another instance of the index byte in the DAT section , and named it halo .
but dont get how to let the code look for wich one to load ,
This is an index (root) request
halo request
Read the HTTP header, which is a character array, to find the requested resource. Then do something when you find "halo".
This code snippet tokenizes the first line of the HTTP header then loops through the tokenized string.
PUB ParseResource(header) | ptr, value, i, done, j ptr := header i := 0 done := false repeat until IsEndOfLine(byte[ptr]) if(IsToken(byte[ptr])) byte[ptr] := 0 resPtr[i++] := ++ptr else ++ptr if(ptr - header > 500) pst.str(string(CR, "+++++++++++++++[ERROR]++++++++++++++",CR)) return @index resPtr[0] := header repeat j from 0 to i-1 pst.str(string("ID")) pst.dec(j) pst.char($20) pst.str(resPtr[j]) pst.char(CR) repeat j from 0 to i-1 if(strcomp(resPtr[j], string("HTTP"))) return @index if(strcomp(resPtr[j], string("xmltemp"))) value := GetTemp WriteNode(@temperature, value) value := GetHumidity WriteNode(@humidity, value) return @xml if(strcomp(ptr, string("halo"))) 'do something PUB IsToken(value) return lookdown(value: "/", "?", "=", " ") PUB IsEndOfLine(value) return lookdown(value: CR, LF)Please take some time to read about the HTTP Protocol.
Hey Mike, as usual very nice of you to create / extend your TCP/IP work. Just wanted to post that I shouldn't have used the pasm spi driver during my breadboarding of the this module. Not until I banged my head (and used my logic 8) for a while did I determine my leads couldn't handle the pasm driver signal speed. doh Thanks again.
EDIT: Seems that one of the two modules I ordered is flaky the other one works perfect with all the examples.
Just out of curiosity, how long were the leads? Mine are no more than an inch and a half.
Does the flaky WIZ820io work at all?
I bought the module from WizNet's online store and have ask for an RMA for another module. This module and your code will allow everyone to play TCP/IP on the prop with low code overhead and low board form factor as a basic socket can now be had for 664 longs, really nice work.
littlesocket.tiff
EDIT: Holy cow I just ran the HTML5Graph.spin! Wow really nice.
@Igor_Rast, as Mike said time for you to open the books yourself, Mike has given you an excellent working example for you to learn from and extend. Get busy, all it takes is time "in the saddle".
Mike PM me with a mailing address because I'd like to send you a little gift from our company as a token of appreciation. Talk is cheap.
I was working hard to get it all working like I want , I am getting pretty close to the end , and like I agreed with Mike , I will publish the code to test it out ,
happy to give back some work, ive been getting good help. and happy to get some replys from it back .
If you runned the html5 graph the last one i uploaded , there were a couple of problems left ,
the buttons diden,t change tha graph acordingly,
wanted to get the max , mix tempertures sins last reset , als with humidity , the prop keeps track of these and stores them on the eeprom so it doesnt get lost during power out or reset..
Now i have acomplished all that ,
now im moving over to get a dialog box orso to change the offset and setpoint in the brouwser and get the prop to accept it .
the prop controles a solid stat relay , so I can power up things when its nececary
and I want a dhcp program to set the ip and getway settings for me when I connect to a network , after that continue with the program like I have it right now
I was experimentig with that but havent got it working yep , the demos don seem to work *** they need an sd card that I didnt want to use
@MIKEeeeeee ,
@D.P . what kind of company you work for , I started this project as a scool project , but now it has also turned into a bussiness, hoping to get it all working to make it a product powerd by this magicly birilliant PARALLAX PROPELLER , God I love the simplicity of this microcontroller.
OO , before i forget ,
For me it turned out, the problem of the wiznet somethimes working somthimes not , Is that I connected the rest pin also to the propeller , But the object just juses 4 pins , So the 5the reset pin that I attache was my bug, somethime it was high when loading somethimes low, letting the wiznet get a socet listen failure
i just did a
at the top at the code , The problem dissapeared like magic, Look at your pinout , what did you do whit the reset pin ???
hope this solves your problem to 2
*** for the Where I am at right now ,
THis is my complete code , Hoping it wil not get abused
This is Countless Hours of work to getting what I want ,
Included .
driving an low power monolitic lcd with shift registers
dimming leds with pwm
getting temperture and lv form the sht-11 sensor
storing these values and setpont etc... to survive powerout ,
making a menu to configure everything , *** simple *** possible.
making an relay turn of and on according to setpoint and offset..
Making all this work togetter = priceless ,
The end is far from here with this propeller
SPIN
ASENBLY
HTML5
CSS
javascript
And Happy to get some replies
versie 1.06 - Archive [Date 2012.10.01 Time 20.36].zip
css & javascript.zip
How can I get acces to it from the net, when I do a port redirect in my router the page never opens
and ,
a login page before you get to the main page would be nice , to restrict unautorized acces when connected to the net , Any suggestions ??
got the first part working, but in the link that it redirects I can see the username and password clearly.
how can it be set that only if the password is correct it logs in and goes to the main page hosted on the wiznet
Hoping to get some HELPPPPPPPPPP
[HTML]<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name='description' content='An ICE Control Production.' >
<title>test form</title>
<link rel='stylesheet' href='style.css' type='text/css' />
</head><body>
<div class="login-form">
<h1>Login </h1>
<form action="#" action="html_form_action.asp" method="get">
<input type="text" name="username" placeholder="username">
<input type="password" name="password" placeholder="password">
<span>
<input type="checkbox" name="checkbox">
<label for="checkbox">remember</label>
</span>
<input type="submit" value="log in">
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Check if JavaScript is enabled
$('body').addClass('js');
// Make the checkbox checked on load
$('.login-form span').addClass('checked').children('input').attr('checked', true);
// Click function
$('.login-form span').on('click', function() {
if ($(this).children('input').attr('checked')) {
$(this).children('input').attr('checked', false);
$(this).removeClass('checked');
}
else {
$(this).children('input').attr('checked', true);
$(this).addClass('checked');
}
});
});
</script>
</body>
</html>
[/HTML]
[HTML].login-form,
.login-form h1,
.login-form span,
.login-form input,
.login-form label {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
.login-form {
position: relative;
width: 200px;
height: 200px;
padding: 15px 25px 0 25px;
margin-top: 15px;
cursor: default;
background-color: #141517;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
}
.login-form:before {
position: absolute;
top: -12px;
left: 10px;
width: 0px;
height: 0px;
content: '';
border-bottom: 10px solid #141517;
border-right: 10px solid #141517;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
}
.login-form h1 {
line-height: 40px;
font-family: 'Myriad Pro', sans-serif;
font-size: 22px;
font-weight: normal;
color: #e4e4e4;
}
.login-form input[type=text],
.login-form input[type=password],
.login-form input[type=submit] {
line-height: 14px;
margin: 10px 0;
padding: 6px 15px;
border: 0;
outline: none;
font-family: Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-shadow: 0px 1px 1px rgba(255,255,255, .2);
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}
.login-form input[type=text],
.login-form input[type=password],
.js .login-form span {
color: #686868;
width: 170px;
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
background: #989898;
background: -moz-linear-gradient(top, #ffffff 0%, #989898 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#989898));
background: -webkit-linear-gradient(top, #ffffff 0%,#989898 100%);
background: -o-linear-gradient(top, #ffffff 0%,#989898 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#989898 100%);
background: linear-gradient(top, #ffffff 0%,#989898 100%);
}
.login-form input[type=text]:hover,
.login-form input[type=password]:hover {
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
}
.login-form input[type=text]:focus,
.login-form input[type=password]:focus {
background: #e1e1e1;
background: -moz-linear-gradient(top, #ffffff 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
background: linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
}
.login-form input[type=submit] {
float: right;
cursor: pointer;
color: #445b0f;
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
}
.login-form input[type=submit]:hover {
-webkit-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
-moz-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
}
.login-form input[type=submit]:active {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.login-form input[type=submit],
.js .login-form span.checked:before {
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
}
.js .login-form input[type=checkbox] {
position: fixed;
left: -9999px;
}
.login-form span {
position: relative;
margin-top: 15px;
float: left;
}
.js .login-form span {
width: 16px;
height: 16px;
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.js .login-form span.checked:before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 8px;
height: 8px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
}
.login-form label {
position: absolute;
top: 1px;
left: 25px;
font-family: sans-serif;
font-weight: bold;
font-size: 12px;
color: #e4e4e4;
}
[/HTML]
I made a button with a link like k
[HTML]
<a href=´setsetset´ class=´btn´> Setpoint + </a>
[/HTML]
the setsetset gets triggerd in the Parseresourse
repeat j from 0 to i-1 if(strcomp(resPtr[j], string("HTTP"))) return @index if(strcomp(resPtr[j], string("xmltemp"))) value := GetTemp WriteNode(@temperature, value) value := GetHumidity WriteNode(@humidity, value) return @xml if(strcomp(resPtr[j], string("[B]setsetset[/B]"))) SetPointsetand the setpointset is just a simple call adiing 1 to the setpoint ,
It works Fine , But I cant get it working without the full page getting reloaded and my graphs getting cleared ,
any idea ?
removing the return@ didn,t seem to do the trick , the driver seems to automaticly load the main page again , how can we stop this , if we only want the button presed to change the value stored in the prop??
Every request must have a response. It looks the server code is not sending a response to the client. I imagine there are socket errors and the client is recovering. It only appears like the a new page is loaded since the graph is all client side JavaScript. IF you are trying to get the server to do something, consider using an AJAX call not a direct HTTP request from the browser.
[HTML]
<a href="test.htm" onclick="ajaxCall('test'); return false;">Click Me</a>
[/HTML]
You are already invoking AJAX calls to retrieve point values on the graph. Just look at the existing code. If this is graph configuration then you should not send an HTTP request. The graph is running local in the browser.
Your question about authentication is a little more complex. Creating a logon form can work at a very rudimentary level. The problem is persisting the user credentials across session or application. The logon form can be the root index page. On submits, parse the name/value collection in the HTTP body to valid the username and password. The response in this case would be the graph page. However, once someone know the URL of the graph page, they can bypass the logon page.
Consider using basic authentication which is header based.
Lastly, you mentioned several times that an SD card is required for other features. That is not true. All of the source code provided in this thread does not use an SD card. DNS included - post 3
but where is the test code placed that runs. thats supose to change the setpoint , dont realy understand that part. doing my best to understand all that is going on with javascript. A example would be verry usefull , a button toggeling a pin orso ? the spinrets demo it stuggled with but did,t get any results yet
About the login form , The bypass that you say of is what i also thout would happen if I do it that way, So I was tinking of it looking op the username and pasword from a online folder orso (php?) and let it authenticate the root user that way , when root user is created already , you could make another user orso that gets stored with a cookie orso on the pc , Dont know if its even possible .
running out of good info sourses to read about the loginform and user authentification , where that happens.
the basic authenification just decodes the username and pasword and it get recoded again on the server side , but it,s stil the same principal . am i right ?
Question
I tried to open the page today with a iphone5 connected to my local network , but coulded get the page up .
the DNS . like the demo , is it supose to run parallel to the multisocket in order to let the page run like i do now , and have it cald by either its ip or the hostname , beeeing controller orso not an controller.com orso.
Did it ever work? Does yur browser work as expected? What have you done to troubleshoot?
The DNS object initializes like a socket. Once you are done looking up a URL, you can reuse the socket for something else or look up another URL.
pst.str(string("Resolve domain IP", CR)) dns.Init(@buff, 6) dns.SetDnsServerIp(68, 105, 28, 12) 'ptr := dns.ResolveDomain(string("www.agaverobotics.com")) ptr := dns.ResolveDomain(string("finance.google.com"))