Welcome to Synthiam!

The easiest way to program the most powerful robots. Use technologies by leading industry experts. ARC is a free-to-use robot programming software that makes servo automation, computer vision, autonomous navigation, and artificial intelligence easy.

Get Started
Canada
Asked — Edited

Running Your Bot Through A Custom Website/Http Server Layout

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?


ARC Pro

Upgrade to ARC Pro

Your robot can be more than a simple automated machine with the power of ARC Pro!

AI Support Bot
Related Content
Synthiam
Based on your post activity, we found some content that may be interesting to you. Explore these other tutorials and community conversations.
Load More ...
#34  
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?
Canada
#35  
Right before the </body> tag!
#36  
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
#37  
Here's the jquery script which needs to be added( it wasn't working):

Code:

<!--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>
#38  
Update: Camera source code was fixed. Still not sure why the script buttons don't work.
#39  
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):

Code:


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>


Code:


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>&nbsp;</td>
<td><div class="Stopscript"><button>Stop All</button></div></td>
<td>&nbsp;</td>
</tbody>
</table>
</div>
Canada
#40  
You need to escape your quotation marks that are nested.

eg.

Code:


          $.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().
#41  
Ahhhh I see it now. Hmmm... I guess I need another way to trigger scripts over the webserver. Any ideas people?
Canada
#42  
I am not sure if this will work but... try this?

Code:


      $.get(
        'http://localhost:8080/Exec', {
          'password': 'admin',
          'script': 'controlcommand("Script Manager", ScriptStart, "script 1")'
        });
#43  
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).

Code:

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

Code:

<img id='the_img_1' src='http://localhost:8080/CameraImage.jpg?c=Camera'>
Canada
#44  
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.

Code:


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


and have you checked for errors in the javascript console?
#45  
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.
Canada
#46  
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.
Canada
#48  
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.
#49  
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
Canada
#50  
Yep, jQuery is a Javascript library (not java :P ). 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.
#53  
Thanks DJ. I'll take a look at it. I'll release my setup depending on how the new server works.
Login to post a comment