so here is what i want to do, and i will supply my html code as well
i have my ustream webcam feed live, i also have teleduino running fine, i can control the servos, i can also turn of the power to the servos via a relay
what is happening that i dont like, is when i click a control command, it opens a page with the teleduino status reply,
and then i have to click the back button to get back to the control feed page, and reload the video
i want it all to be live and not have to redirect or click back, i just want it to click a servo command and thats it,
preferably a button style html code, with no new page opening or anything like that
<!DOCTYPE html>
<html>
<body>
<h1>My Arduino/Teleduino Powered Pan Tilt WebCam Mount</h1>
<h3>Live Cam via Ustream</h3>
<p align="center">
<iframe width="600" height="482" src="http://www.ustream.tv/embed/2598779?v=3&wmode=direct" scrolling="no" frameborder="0" style="border: 0px none transparent;"> </iframe>
<a href="http://www.ustream.tv/" style="padding: 2px 0px 4px; width: 400px; background: #ffffff; display: block; color: #000000; font-weight: normal; font-size: 10px; text-decoration: underline; text-align: center;" target="_blank">Live Video streaming by Ustream</a>
<a href="http://www.ustream.tv/channel/tnap1979">www.ustream.tv/channel/tnap1979</a>
</p>
<h3>Servo Power Toggle</h3>
<a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setDigitalOutput&pin=4&output=2">toggle On/Off Servos</a>
<h3>Pan Servo Controls</h3>
<a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=130">Left Max -</a><a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=75">- Right Max</a>
<a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=122">Left Mid -</a><a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=83">- Right Mid</a>
<a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=115">Left Min -</a><a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=90">- Right Min</a>
<a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=105">Center</a>
<h3>Tilt Servo Controls</h3>
<a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=85">Up Max -</a><a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=30">- Down Max</a>
<a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=75">Up Mid -</a><a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=41">- Down Mid</a>
<a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=69">Up Min -</a><a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=53">- Down Min</a>
<a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=65">Center</a>
<h1>Enable Teleduino Servos Functions</h1>
<a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=definePinMode&pin=4&mode=1">Enable Servo Power Control</a>
<a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=defineServo&servo=0&pin=9">Enable Pan Servo</a>
<a href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=defineServo&servo=1&pin=7">Enable Tilt Servo</a>
</body>
</html>
You might use a combination of a hidden Iframe in your html code to capture returned data, and send the browser the status: 204 which tells the browser to not reload the page. Another possible might be to close the connection with the browser without sending any data back after the server has received the commands. My old web cam below uses some of these approaches.
There are two common ways to achieve this, the easiest being to set the target of the links to an iframe, so the Teleduino response is output to the iframe rather than the browser window. If you don't want to see the output, you can set the height and width of the iframe to 0 - but you may be interested in seeing the response!
The second method is via an ajax call using jQuery.
So, to go with the easiest method, you need to add an iframe with an id, and then set the target of the links to the id of the iframe.
Example code:
<!DOCTYPE html>
<html>
<body>
<h1>My Arduino/Teleduino Powered Pan Tilt WebCam Mount</h1>
<h3>Live Cam via Ustream</h3>
<p align="center">
<iframe width="600" height="482" src="http://www.ustream.tv/embed/2598779?v=3&wmode=direct" scrolling="no" frameborder="0" style="border: 0px none transparent;"> </iframe>
<a href="http://www.ustream.tv/" style="padding: 2px 0px 4px; width: 400px; background: #ffffff; display: block; color: #000000; font-weight: normal; font-size: 10px; text-decoration: underline; text-align: center;" target="_blank">Live Video streaming by Ustream</a>
<a href="http://www.ustream.tv/channel/tnap1979">www.ustream.tv/channel/tnap1979</a>
</p>
<h3>Servo Power Toggle</h3>
<a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setDigitalOutput&pin=4&output=2">toggle On/Off Servos</a>
<h3>Pan Servo Controls</h3>
<a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=130">Left Max -</a><a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=75">- Right Max</a>
<a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=122">Left Mid -</a><a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=83">- Right Mid</a>
<a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=115">Left Min -</a><a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=90">- Right Min</a>
<a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=0&position=105">Center</a>
<h3>Tilt Servo Controls</h3>
<a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=85">Up Max -</a><a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=30">- Down Max</a>
<a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=75">Up Mid -</a><a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=41">- Down Mid</a>
<a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=69">Up Min -</a><a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=53">- Down Min</a>
<a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=setServo&servo=1&position=65">Center</a>
<h1>Enable Teleduino Servos Functions</h1>
<a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=definePinMode&pin=4&mode=1">Enable Servo Power Control</a>
<a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=defineServo&servo=0&pin=9">Enable Pan Servo</a>
<a target="teleduino_output" href="http://us01.proxy.teleduino.org/api/1.0/328.php?k={key}&r=defineServo&servo=1&pin=7">Enable Tilt Servo</a>
<iframe id="teleduino_output" width="600" height="40"></iframe>
</body>
</html>
On a side note, I see that you have some links to call definePinMode and defineServo. Did you know that you can set presets on your Teleduino so that when the device boots up it would define these automatically? The tool is available at Arduino Internet / Web Control with Teleduino
What you're trying to do is execute a URL request without navigating away from the current page. A well known trick to achieve this was to load the URL into either a hidden image, or a hidden IFrame. These techniques still work, but cleaner options are available now either via an AJAX framework such as jQuery, or using an XmlHttpRequest directly. I suggest you Google AJAX - this approach is very common nowadays and you will find lots of examples.
thanks alot guys, as you can prolly tell by my html code, i only know very VERY basic html, all this ajax stuff and whatnot, is kinda boggling my brain.. lol
but if its not hard to do, then ill read up on it,
the target/iframe method looks interesting, im going to have to try it out to see how i like it
now i just have to figure out how to make buttons and not text links...
text links are lookin kinda lame, wanna get some decent button effects going on
NathanNZ... your awesome
the iframe method, works fine for me, pretty much exactly what i was looking for,
now i gotta figure out some neat button html code, and spice up the page a bit, and ill be good to go
thanks alot
//zoomkat 7-03-12, combined client and server
//simple button GET with iframe code
//for use with IDE 1.0
//open serial monitor and send an g to test client and
//see what the arduino client/server receives
//web page buttons make pin 5 high/low
//use the ' in html instead of " to prevent having to escape the "
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields
//note that the below bug fix may be required
// http://code.google.com/p/arduino/issues/detail?id=605
#include <SPI.h>
#include <Ethernet.h>
byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //assign arduino mac address
byte ip[] = {192, 168, 1, 102 }; // ip in lan assigned to arduino
byte gateway[] = {192, 168, 1, 1 }; // internet access via router
byte subnet[] = {255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port arduino server will use
EthernetClient client;
char serverName[] = "web.comporium.net"; // (DNS) zoomkat's test web page server
//byte serverName[] = { 208, 104, 2, 86 }; // (IP) zoomkat web page server IP address
String readString; //used by server to capture GET request
//////////////////////
void setup(){
pinMode(5, OUTPUT); //pin selected to control
pinMode(6, OUTPUT); //pin selected to control
pinMode(7, OUTPUT); //pin selected to control
pinMode(8, OUTPUT); //pin selected to control
//pinMode(5, OUTPUT); //pin 5 selected to control
Ethernet.begin(mac,ip,gateway,gateway,subnet);
server.begin();
Serial.begin(9600);
Serial.println("server/client 1.0 test 7/03/12"); // keep track of what is loaded
Serial.println("Send an g in serial monitor to test client"); // what to do to test client
}
void loop(){
// check for serial input
if (Serial.available() > 0)
{
byte inChar;
inChar = Serial.read();
if(inChar == 'g')
{
sendGET(); // call client sendGET function
}
}
EthernetClient client = server.available();
if (client) {
while (client.connected()) {
if (client.available()) {
char c = client.read();
//read char by char HTTP request
if (readString.length() < 100) {
//store characters to string
readString += c;
//Serial.print(c);
}
//if HTTP request has ended
if (c == '\n') {
///////////////
Serial.print(readString); //print to serial monitor for debuging
//now output HTML data header
if(readString.indexOf('?') >=0) { //don't send new page
client.println(F("HTTP/1.1 204 Zoomkat"));
client.println();
client.println();
}
else {
client.println(F("HTTP/1.1 200 OK")); //send new page on browser request
client.println(F("Content-Type: text/html"));
client.println();
client.println(F("<HTML>"));
client.println(F("<HEAD>"));
client.println(F("<TITLE>Arduino GET test page</TITLE>"));
client.println(F("</HEAD>"));
client.println(F("<BODY>"));
client.println(F("<H1>Zoomkat's simple Arduino 1.0 button</H1>"));
// DIY buttons
client.println(F("Pin5"));
client.println(F("<a href=/?on2 target=inlineframe>ON</a>"));
client.println(F("<a href=/?off3 target=inlineframe>OFF</a>
"));
client.println(F("Pin6"));
client.println(F("<a href=/?on4 target=inlineframe>ON</a>"));
client.println(F("<a href=/?off5 target=inlineframe>OFF</a>
"));
client.println(F("Pin7"));
client.println(F("<a href=/?on6 target=inlineframe>ON</a>"));
client.println(F("<a href=/?off7 target=inlineframe>OFF</a>
"));
client.println(F("Pin8"));
client.println(F("<a href=/?on8 target=inlineframe>ON</a>"));
client.println(F("<a href=/?off9 target=inlineframe>OFF</a>
"));
client.println(F("Pins"));
client.println(F(" <a href=/?off2468 target=inlineframe>ALL ON</a>"));
client.println(F(" <a href=/?off3579 target=inlineframe>ALL OFF</a>
"));
// mousedown buttons
client.println(F("<input type=button value=ON onmousedown=location.href='/?on4;' target=inlineframe>"));
client.println(F("<input type=button value=OFF onmousedown=location.href='/?off5;' target=inlineframe>"));
client.println(F(" <input type=button value='ALL OFF' onmousedown=location.href='/?off3579;' target=inlineframe>
"));
// mousedown radio buttons
client.println(F("<input type=radio onmousedown=location.href='/?on6;' target=inlineframe>ON</>"));
client.println(F("<input type=radio onmousedown=location.href='/?off7; target=inlineframe'>OFF</>"));
client.println(F(" <input type=radio onmousedown=location.href='/?off3579;' target=inlineframe>ALL OFF</>
"));
// custom buttons
client.print(F("<input type=submit value=ON target=inlineframe style=width:100px;height:45px onClick=location.href='/?on8;'>"));
client.print(F("<input type=submit value=OFF target=inlineframe style=width:100px;height:45px onClick=location.href='/?off9;' target=inlineframe>"));
client.print(F(" <input type=submit value='ALL OFF' target=inlineframe style=width:100px;height:45px onClick=location.href='/?off3579;' target=inlineframe>"));
client.println(F("<IFRAME name=inlineframe style='display:none'>"));
client.println(F("</IFRAME>"));
client.println(F("</BODY>"));
client.println(F("</HTML>"));
}
delay(1);
//stopping client
client.stop();
///////////////////// control arduino pin
if(readString.indexOf('2') >0)//checks for 2
{
digitalWrite(5, HIGH); // set pin 5 high
Serial.println("Led 5 On");
Serial.println();
}
if(readString.indexOf('3') >0)//checks for 3
{
digitalWrite(5, LOW); // set pin 5 low
Serial.println("Led 5 Off");
Serial.println();
}
if(readString.indexOf('4') >0)//checks for 4
{
digitalWrite(6, HIGH); // set pin 6 high
Serial.println("Led 6 On");
Serial.println();
}
if(readString.indexOf('5') >0)//checks for 5
{
digitalWrite(6, LOW); // set pin 6 low
Serial.println("Led 6 Off");
Serial.println();
}
if(readString.indexOf('6') >0)//checks for 6
{
digitalWrite(7, HIGH); // set pin 7 high
Serial.println("Led 7 On");
Serial.println();
}
if(readString.indexOf('7') >0)//checks for 7
{
digitalWrite(7, LOW); // set pin 7 low
Serial.println("Led 7 Off");
Serial.println();
}
if(readString.indexOf('8') >0)//checks for 8
{
digitalWrite(8, HIGH); // set pin 8 high
Serial.println("Led 8 On");
Serial.println();
}
if(readString.indexOf('9') >0)//checks for 9
{
digitalWrite(8, LOW); // set pin 8 low
Serial.println("Led 8 Off");
Serial.println();
}
//clearing string for next read
readString="";
}
}
}
}
}
//////////////////////////
void sendGET() //client function to send and receive GET data from external server.
{
if (client.connect(serverName, 80)) {
Serial.println("connected");
client.println("GET /~shb/arduino.txt HTTP/1.0");
client.println();
}
else {
Serial.println("connection failed");
Serial.println();
}
while(client.connected() && !client.available()) delay(1); //waits for data
while (client.connected() || client.available()) { //connected or data available
char c = client.read();
Serial.print(c);
}
Serial.println();
Serial.println("disconnecting.");
Serial.println("==================");
Serial.println();
client.stop();
}
thanks zoomkat
here is what ive got so far done, this is still just rough page, but it will get tuned out better in time, gotta do family stuff for a few hours
it works fine for me, running win7 pro 64bit, google chrome browser, and all current silverlight/java/flash updates and such
and its also worked for my brother and a few other friends
zoomkat:
The video works, but with pan/tilt control I get a windows popup wanting to know if I want to open or save 328.json.
That would happen if the content-disposition had been set to specify a download, or the content type was one that the browser could not render, or the content-type was unspecified and the content type inferred from the URL extension '.json' was one that it couldn't render.
The download prompt is likely to be caused by the content-type header that is returned from the Teleduino server.
There is an optional parameter that can be set to determine the returned format of the response. Try adding one of the following to the end of the Teleduino API call URL:
&o=json (This is actually the default. It returns a content-type of application/json)
&o=jsonp (Returns a content-type of application/javascript, but may result in a javascript error being displayed because the callback function likely doesn't exist on your local page)
&o=php (Recommended to try. Returns a content-type of text/plain. The result is encoded as a PHP serialised string)
See the odd part is, zoomkat is the only one so far out of all I have had test the page that has had that error,
But since those extra commands seem like they will help, I'll most likely add the php one to the strings and see what happens,
I've been working on prettying up the html code I'll post results once I'm happy with it
Doing a lot of html code reading to figure things out better
there we go guys, mind testing the page and see if the same results come back ( zoomkat ) and anyone else
the html code has been tweaked and is more to my liking now..
this is just the base tho, it will be a W.I.P.
so ive been messing with Fritzing for PC, and i have made the sketch for my pan tilt control system
ill upload to my website the sketch and photo, and link here..
as well i will also post my html code and parts list
if anyone wants to build from this, feel free, please just click the thanks or karma if so
this is just basic, you can go ahead and improve upon it if you wish as this is all open source
