Have you looked at the Node JS project one of the members wrote?

http://synthiam.com/Products/ARC

Alan

I'll take a look at it. Thanks.

If you are using asp.net to create the site. You can use the SDK.

Using the NodeJS library looks to be pretty good, if you know any Javascript and/or have used NodeJS before.

If you haven't, using the library straight-up may be tough, it likely requires a lot of writing your own JS code... but if you click the "author" button on the NodeJS ezrobot project page, you'll go to the thread where the author also created a web app, ez-web, that makes things easier and has most of the work done for you :)

You could use the URLs for the HTTP server function in ARC too, if nodeJS isn't what you are after. I started this with Jarvis (before he was put on the shelf).

I don't know off the top of my head what the URL is but if you used fiddler (or similar) you could easily sniff out the correct URL (however, I am sure DJ has posted how the URL needs to be made up in the past).

I believe when you start the web server, it tells you your local IP and remote IP.

[s]First off, I need to get my web server working.

Following this video, I set up my http server control, and start it. When I go to another pc on my network, neither ip works... Can I get some help?[/s] Turns out that I needed to change the TCP port to 4 numbers to get it to work.

Just for your guys's info, my plan it to try and do what node.js does in taking and sending commands through ARC to a web page, but want to do it all within the webpage code(which will use java if nesesary.) What I wonder is, is there a specific protocol or url type that I can use to send commands to ARC through a webpage, per say, on a click of a button? I found this on the ARC web server page. I believe this is what I need, though I can't get the example to work(shows "missing ) in expression" error).

Quote:

Alternatively, if you wish to send EZ-Script commands directly through a web or HTTP interface, the url can be formatted as: http://<ip address>/Exec?password=<password>&script=<uri encoded script>. An example that will return two servo positions with a comma seperating the values is http://192.168.0.1/Exec?password=admin&script=Print("GetServo(D5), GetServo(D6)").

I think I have figured out what I need to do. Now all I have to do is write up the html/java code.

Javascript

Very important distinction :D

Yea. So far I'm trying to figure out how to trigger the url "http://localhost:8080/Exec?password=admin&script=Forward()" with a javascript button, but I don't want it to open the link. I only want it to trigger the script send.

Trying to use the ARC http server movement panel, I got the buttons in, but I'm not sure what to set the "onclick=" to do. JavaScript isn't really my thing. Original code:

<td><input onclick="document.location.replace('/movement?direction=left');" type="button" value="  <  ">
</td>

Chrissi, I believe your the website/html coder/manager correct? Can you give me any pointers?

Anyone else that might b able to help?

Thanks.

Hmmm... If you don't want to navigate there, just send a signal, I would use jQuery $.get()

Thanks. My internet is down so I'm not going to be doing much work today.

Ok so my internets back online. Trying to get the camera stream to display on the webpage. Any tips? I've tried 5 different websites and all there suggestions don't work.

url of camera:

Quote:

http://IPwasHidden:8080/CameraImage.jpg?c=Camera&Password=admin

As for the controls, I looked at the jQuery.get, But I've never worked with it. How would I use it?

jQuery.get( url [, data ] [, success ] [, dataType ] )

The API for jquery is very well documented and the answer to your question is on there. I could repeat what the documentation says however either a) you haven't read the documentation or b) you don't understand the documentation, in either case (as I wouldn't be able to rewrite it any clearer) it would be pointless to repeat it.

To be honest and a little blunt you have missed a few steps. Learn about javascript and the functions available, learn about jquery, read the api documentation. There are plenty of places online which have free tutorials and guidance for javascript and any other mark up languages you may need to use. Spend time reading those, it will be quicker than wasting time chasing your tail while you don't understand what you are trying to use.

As for the camera, it depends on the camera. Different makes and models (and even versions) have different urls. If the url you have for the camera doesn't work then it isn't the correct url or, best case scenario, you have the incorrect username & password combination. Again, there are many places online where these urls are listed. EyeSpy have a list of known urls for different manufacturers etc.

I'm using the url of the ARC camera stream.

So I read up on jquery, and used the following script.

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
  $("button").click(function(){
    $.get("http://192.168.0.115:8080/Exec?password=admin&script=Forward()")
    });
</script>

<body>
<div class="forward">
<button>^</button>
</body>

But I couldn't get it to work. It isn't pushing the url to ARC.

After a fair bit of testing I still can't get query to send the url. Any help?

Very rough and probably could be done much better but try

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("http://192.168.0.115:8080/Exec?password=admin&script=Forward()",function(){
    });
  });
});
</script>
</head>
<body>

<button>^</button>

</body>
</html>

Doesn't seem to work. Its not getting to ARC. If I use the url directly, it works, but I'm opening another tab.

Works fine for me in Chrome running on Apache2 server with ARC running the HTML server and a H-Bridge control.

It's also a slight adaptation to the demo code found on W3Schools. Try the example, the only difference is it doesn't have anything in the function but still calls the url.

If the HTML I posted plus the examples above and the API documentation are not making it easy enough for you then I cannot think of any other method to help you to be honest, I provided the code which works...

I also used the w3schools example. Its really weird. I'm putting mine in an html file and then opening the file in IE and pressing the button. I'll try chrome.

It doesn't work in IE! Great. Thanks Rich. Now about that camera...

I am shocked, simply shocked, that something would work in Chrome and not IE ;)

I only use IE at work because I have to. It never gets used on my home computers.

Alan

Hi, my names Technopro, and I have been a long time IE user. ("Hi Technopro" ) ;)

(For those who don't get it, think therapy group.)

What about the camera? You have the url to the image which is http://IPAddress:Port/CameraImage.jpg?c=Camera you just need to find a method for auto refreshing the image without reloading the page. There are hundreds of examples of that online.

Personally I have a small script running which reloads the IMG source every 1000ms using document.getElementById

  <script type="text/javascript">

    var reloader1;

    function reloadImg1() {

      var d = new Date();

      document.getElementById("CamImg1").src = "URL to camera?id" + d.getTime();
    }

and

<img src="URL to camera" id="CamImg1" style="width: 640px;" onload="reloader1 = setTimeout('reloadImg1()', 1000);" >

I think this was the IE bug kicking in. I'll check.

Pardon me for the java/jquery/html questions, but how would I specify a specific <button>? Disregard, I found it.

First draft with camera and movement panel:

Just wanted to say thanks for the help Rich. It helped out a lot. Now it's just up to me to make a simple to use, rearrange-able interface.

I found some sample code for the camera which worked out fine. Once finished it will be released to everyone as an open source html control panel. :D

Hey Tech... good work. Looking forward to your finished version...

Hey @Technopro,

Not sure if this will help you, but many browsers do not allow local scripts to perform AJAX operations (of which $.get is one), for security/ So if you open the page in your browser, I'd bet that's why IE won't let it run. You said that:

Quote:

I'm putting mine in an html file and then opening the file in IE and pressing the button.

That means you're running the HTML file directly in the browser, not in a web server... correct? You would be able to run scripts from a web server - like the ARC web server. Or, if you aren't using the ARC web server, I bet if you set up a quick local server, eg.XAMPP, the script will work in any browser.

Also, make sure when you are attaching an event handler to an element, like

$('button').click()

that the element exists in the page first. If the script is in the header, it can't attach the event handler to the element, because it doesn't exist yet. Nothing would happen.

You can put your script at the end of the page, or there is the deferred function $(document).ready() that you can use to make sure all the elements in the page have loaded before your script runs :)

Thanks for the tips Chrissi. I first plan on having a local version, which I am making now. Then I want to make a server html file.

Haven't had any problems yet with what you outlined, other than the $get. If on the release people are having those issues I'll do what you mentioned.

Maybe I'll give a referral for Non chrome users to try XAMPP. For the server version I think this would be required.

Thanks again Chrissi.

Tech

Cool! I'm glad it's working out for you. I'd like to see it when it's done I haven't done much with the ARC web interface stuff yet, been so busy with other stuff. I need something to get me to play with it!

By the way, the "local version" is the same file that you'd run on the web server - only you'd place it in the web root of the local server and go to http://localhost:someport/mypage.html to see it So no changes really, it's just a difference in how you're opening/running/viewing the file.

It appears I'm having the problem you metioned with the Java script, Chrissi. Do I put the script after the </body> Tag or at the bottom of the body?

Right before the </body> tag!

Alpha release to try to figure out the Bugs.

1.Camera not working. 2. script trigger buttons not triggering 3. Help me clean it up! It is freaking messy!

Instructions: 1.Download folder. Unzip it(extract items out) 2. open the MTR.ezb project file and start the http server. Start camera too. 3. Open the index.html file in the downloaded file. Set your camera url in the camera java script(labeled)(same as ip as the main server) 4.Configure anything else in the script that is mentioned 5. Java/html people help me try and figure out the listed problems. Betabugrelease.zip Yes I know it says BETA^ Thanks for any help I receive! Tech

Here's the jquery script which needs to be added( it wasn't working):

<!--JAVA SCRIPT SCRIPT TABLE-->
<script>
$(document).ready(function(){
 $(".script1 button").click(function(){
 $.get("http://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 1")",function(){
 });
 });
});
</script>
<script>
$(document).ready(function(){
 $(".script2 button").click(function(){
 $.get("http://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 2")",function(){
 });
 });
});
</script>
<script>
$(document).ready(function(){
 $(".script3 button").click(function(){
 $.get("http://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 3")",function(){
 });
 });
});
</script>
<script>
$(document).ready(function(){
 $(".script4 button").click(function(){
 $.get("http://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 4")",function(){
 });
 });
});
</script>
<script>
$(document).ready(function(){
 $(".script5 button").click(function(){
 $.get("http://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 5")",function(){
 });
 });
});
</script>
<script>
$(document).ready(function(){
 $(".script6 button").click(function(){
 $.get("http://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 6")",function(){
 });
 });
});
</script>

<script>
$(document).ready(function(){
 $(".script7 button").click(function(){
 $.get("http://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 7")",function(){
 });
 });
});
</script>

<script>
$(document).ready(function(){
 $(".script8 button").click(function(){
 $.get("http://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 8")",function(){
 });
 });
});
</script>

<script>
$(document).ready(function(){
 $(".script9 button").click(function(){
 $.get("http://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 9")",function(){
 });
 });
});
</script>
<script>
$(document).ready(function(){
 $(".stopscript button").click(function(){
 $.get("http://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStopAll)",function(){
 });
 });
});
</script>

Update: Camera source code was fixed. Still not sure why the script buttons don't work.

After reading up on the earlier posts, I noticed that I Chrissi said

Quote:

You can put your script at the end of the page, or there is the deferred function $(document).ready() that you can use to make sure all the elements in the page have loaded before your script runs

URLs were checked, there fine. its gotta be the code!

Code for script 1-9(identical jquery):

jquery:

<!--script 1-->
 <script>
$(document).ready(function(){
 $(".script1 button").click(function(){
 $.get("http://localhost:8080/Exec?password=admin&script=controlcommand("Script Manager", ScriptStart, "script 1")",function(){
 });
 });
});
</script>

HTML body:

<div class="b3">
<p style="text-align: center;">Script starters</p>
<table>
<tbody>
<tr>
<td><div class="script1"><button>Script 1</button></div></td>
<td><div class="script2"><button>Script 2</button></div></td>
<td><div class="script3"><button>Script 3</button></div></td>
</tr>
<tr>
<td><div class="script4"><button>Script 4</button></div></td>
<td><div class="script5"><button>Script 5</button></div></td>
<td><div class="script6"><button>Script 6</button></div></td>
</tr>
<tr>
<td><div class="script7"><button>Script 7</button></div></td>
<td><div class="script8"><button>Script 8</button></div></td>
<td><div class="script9"><button>Script 9</button></div></td>
</tr>
<tr>
<td> </td>
<td><div class="Stopscript"><button>Stop All</button></div></td>
<td> </td>
</tbody>
</table>
</div>

You need to escape your quotation marks that are nested.

eg.

          $.get("http://localhost:8080/Exec?password=admin&script=controlcommand("Script Manager", ScriptStart, "script 1")",function(){

It's not working because the quotation mark in front of Script Manager is ending the string, and you're ending up with invalid Javascript.

Press F12 in your browser and you'll see the Javascript console. You can see errors there.

Also, if you use an editor with syntax highlighting like Visual Studio, Sublime Text, Notepad++, etc... you will see small mistakes like this.

I don't think putting information that needs to have quotation marks and spaces in the URL is a very good idea. You should see if you are able to post things to the page instead of putting it in the URL.

If you really need to do it like this... try running the URL through encodeURIComponent() first, and use single-quotes around the URL in $.get().

Ahhhh I see it now. Hmmm... I guess I need another way to trigger scripts over the webserver. Any ideas people?

I am not sure if this will work but... try this?

      $.get(
        'http://localhost:8080/Exec', {
          'password': 'admin',
          'script': 'controlcommand("Script Manager", ScriptStart, "script 1")'
        });

That didn't work, but thanks for the try.

Here's the camera code, which, if tweaked and reengineered, I think we can get it to do what we want it to do.

We'll need to takeout the reload interval, and change the address to what we need. for the html, i'm not sure. This script gets the url of the camera, so I wander if it could work for the scripts(it uses fragments of the address with variables).

<script type='text/javascript'>         
    function loadImage(imgID, address)         
    {             
        var now=new Date();
        document.getElementById(imgID).src='http://' + address + '/CameraImage.jpg?c=Camera&Password=admin?'+now.getTime();
    }          

    setInterval(function() {
        loadImage("the_img_1", "192.168.0.115:8080");
    }, 100); //Interval to refresh at, in milliseconds
</script>

HTML(maybe change to a button):

<img id='the_img_1' src='http://localhost:8080/CameraImage.jpg?c=Camera'>

That's going at the bottom of the page, right? It needs to either be at the bottom or use $(document).ready().

For the previous problem, does it work if you use encodeURIComponent(), eg.

'script': encodeURIComponent('controlcommand("Script Manager", ScriptStart, "script 1")')

and have you checked for errors in the javascript console?

The code I just posted was the canera code which I thought we could change to work with the script trigger idea. I'll test the encode idea when I get home.

Is that the camera code that ARC's web server creates?

It just requests an image every so often. Loading it into the page. I'm not sure how it will help you - you're just trying to trigger a script to load, right?

What I gave you should work I believe. There may be other problems stopping it from working. It would be best to check the console for errors.

Believe it or not, your last idea appears to have started working!

The camera code is what I found and modified from another forum. The generic url is: "http://localhost:8080/CameraImage.jpg?c=Camera"

That's good to hear! I thought it would. Was it with, or without, the encodeURIComponent()? I wasn't sure whether it would work better with, or without, that.

Without the encode script. Thanks so much for the help Chrissi! Its up to me now to get the page figured out!

Now, is jquery java script? Because the I could make a separate java file so the html isn't as cluttered.

Thanks! Tech

Yep, jQuery is a Javascript library (not java ). 99% of the time if you see a script in an HTML page it's Javascript! So you could just put it all in a js file.

Great! Thanks!

http custom server

Thanks DJ. I'll take a look at it. I'll release my setup depending on how the new server works.