Running Your Bot Through A Custom Website/http Server Layout

Question

Hey guys. Little project I want to look into.

As I mentioned in this thread, I want to make a webpage/custom web server layout and run the ez-b through this. I have html background, so designing the webpage should be no problem, but I know little of getting ARC stuff into that page. I tried setting up the http server but it wouldn't work. So, who's up for helping me try this?

thetechguru · Answer

Have you looked at the Node JS project one of the members wrote? https://synthiam.com/Products/ARC Alan

CardboardHacker · Answer

I'll take a look at it. Thanks.

Luis Vazquez · Answer

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

chrissi · Answer

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

Rich · Answer

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).

chrissi · Answer

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

CardboardHacker · Answer

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? Turns out that I needed to change the TCP port to 4 numbers to get it to work.

CardboardHacker · Answer

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: https:///Exec?password=&script=. An example that will return two servo positions with a comma seperating the values is https://192.168.0.1/Exec?password=admin&script=Print("GetServo(D5), GetServo(D6)").

CardboardHacker · Answer

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

chrissi · Answer

Javascript Very important distinction

CardboardHacker · Answer

Yea. So far I'm trying to figure out how to trigger the url "https://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:

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.

chrissi · Answer

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

CardboardHacker · Answer

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

CardboardHacker · Answer

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:https://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 ] )

Rich · Answer

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.

CardboardHacker · Answer

I'm using the url of the ARC camera stream. So I read up on jquery, and used the following script.
   $("button").click(function(){ $.get("https://192.168.0.115:8080/Exec?password=admin&script=Forward()") });

^

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

CardboardHacker · Answer

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

Rich · Answer

Very rough and probably could be done much better but try
     $(document).ready(function(){ $("button").click(function(){ $.get("https://192.168.0.115:8080/Exec?password=admin&script=Forward()",function(){ }); }); });    ^

CardboardHacker · Answer

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

Rich · Answer

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...

CardboardHacker · Answer

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.

CardboardHacker · Answer

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

thetechguru · Answer

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

CardboardHacker · Answer

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.)

Rich · Answer

What about the camera? You have the url to the image which is https://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
  var reloader1; function reloadImg1() { var d = new Date(); document.getElementById("CamImg1").src = "URL to camera?id" + d.getTime(); }

and

CardboardHacker · Answer

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

CardboardHacker · Answer

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

CardboardHacker · Answer

First draft with camera and movement panel:

CardboardHacker · Answer

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.

Dunning-Kruger · Answer

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

chrissi · Answer

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

CardboardHacker · Answer

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

chrissi · Answer

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 https://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.

CardboardHacker · Answer

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

chrissi · Answer

Right before the  tag!

CardboardHacker · Answer

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

CardboardHacker · Answer

Here's the jquery script which needs to be added( it wasn't working):
  $(document).ready(function(){ $(".script1 button").click(function(){ $.get("https://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 1")",function(){ }); }); });   $(document).ready(function(){ $(".script2 button").click(function(){ $.get("https://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 2")",function(){ }); }); });   $(document).ready(function(){ $(".script3 button").click(function(){ $.get("https://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 3")",function(){ }); }); });   $(document).ready(function(){ $(".script4 button").click(function(){ $.get("https://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 4")",function(){ }); }); });   $(document).ready(function(){ $(".script5 button").click(function(){ $.get("https://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 5")",function(){ }); }); });   $(document).ready(function(){ $(".script6 button").click(function(){ $.get("https://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 6")",function(){ }); }); });   $(document).ready(function(){ $(".script7 button").click(function(){ $.get("https://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 7")",function(){ }); }); });   $(document).ready(function(){ $(".script8 button").click(function(){ $.get("https://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 8")",function(){ }); }); });   $(document).ready(function(){ $(".script9 button").click(function(){ $.get("https://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStart, "script 9")",function(){ }); }); });   $(document).ready(function(){ $(".stopscript button").click(function(){ $.get("https://localhost:8080/Exec?password=admin&script=ControlCommand("Script Manager", ScriptStopAll)",function(){ }); }); });

CardboardHacker · Answer

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

CardboardHacker · Answer

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 so that means adding the script trigger scripts listed should be fine at the top, but it doesn't work! URLs were checked, there fine. its gotta be the code! Code for script 1-9(identical jquery):
 jquery:   $(document).ready(function(){ $(".script1 button").click(function(){ $.get("https://localhost:8080/Exec?password=admin&script=controlcommand("Script Manager", ScriptStart, "script 1")",function(){ }); }); });

HTML body:  Script starters    Script 1 Script 2 Script 3   Script 4 Script 5 Script 6   Script 7 Script 8 Script 9    Stop All

chrissi · Answer

You need to escape your quotation marks that are nested. eg.
 $.get("https://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().

CardboardHacker · Answer

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

chrissi · Answer

I am not sure if this will work but... try this?
 $.get( 'https://localhost:8080/Exec', { 'password': 'admin', 'script': 'controlcommand("Script Manager", ScriptStart, "script 1")' });

CardboardHacker · Answer

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).
 function loadImage(imgID, address) { var now=new Date(); document.getElementById(imgID).src='https://' + 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

HTML(maybe change to a button):

chrissi · Answer

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?

CardboardHacker · Answer

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.

chrissi · Answer

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.

CardboardHacker · Answer

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: "https://localhost:8080/CameraImage.jpg?c=Camera";

chrissi · Answer

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.

CardboardHacker · Answer

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

chrissi · Answer

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.

CardboardHacker · Answer

Great! Thanks!

DJ Sures · Answer

http custom server

CardboardHacker · Answer

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

CardboardHacker

Running Your Bot Through A Custom Website/Http Server Layout

Upgrade to ARC Pro

Products

Community

Support

About