Thumbnail

HTTP Server (Custom)

How to add the HTTP Server (Custom) robot skill

  1. Load the most recent release of ARC (Get ARC).
  2. Press the Project tab from the top menu bar in ARC.
  3. Press Add Robot Skill from the button ribbon bar in ARC.
  4. Choose the Remote Control category tab.
  5. Press the HTTP Server (Custom) icon to add the robot skill to your project.

Don't have a robot yet?

Follow the Getting Started Guide to build a robot and use the HTTP Server (Custom) robot skill.


How to use the HTTP Server (Custom) robot skill

This HTTP Server is different than the regular HTTP Server because it allows custom HTML Files. The HTML Files may contain special commands for controlling your robot

Supported file extension types:

  • .HTML
  • .JPG
  • .PNG
  • .CSS
*Note: Any other file extension is returned as a mime type of application/octet-stream

The HTTP server will get the files from the My Documents\ARC\HTTP Server Root folder by default. This is found in your My Documents folder. In that folder, you can place HTML files, jpg files, png files, etc.. An example HTML file in the HTTP Server Root folder demonstrates the various syntaxes that can be used.

If your Windows installation already has a web server running on port 80, this server will not be able to start. Only one application can use a port at a time. If that is the case, disable the other web server or change the port for this server.


Embedded Control Syntax

Special HTML style tags are used to create buttons for interaction with ARC. These buttons are AJAX, which means they do not reload the page when pressed.

  • <ez-move text="button title (i.e. Forward)" data-direction="forward" />
  • <ez-move text="button title (i.e. Right)" data-direction="right" />
  • <ez-move text="button title (i.e. Reverse)" data-direction="reverse" />
  • <ez-move text="button title (i.e. Left)" data-direction="left" />
  • <ez-move text="button title (i.e. Stop)" data-direction="stop" />
  • <ez-script text="button title">ezscript command</ez-script>
  • <ez-camera data-controlname="Camera" data-interval="100" />
  • <ez-getdigital data-port="d0" data-interval="1000" data-truetext="True" data-truebgcolor="#00ff00" data-truefgcolor="#ffffff" data-falsetext="False" data-falsebgcolor="#ff0000" data-falsefgcolor="#ffffff" />
  • <ez-variable data-variablename="$Direction" data-interval="1000" />
*Note: the ez-* HTML commands also accept class="" or style="" tags

Similar Skills

Floor Map

Floor Map

By Synthiam
This skill is used with a movement panel. When the movement...
Exosphere

Exosphere

By Synthiam
Exosphere combines telepresence, artificial intelligence,...
Avatar JD

Avatar JD

By goldenbot
Avatar JD is a Virtual 3D simulator of JD Humanoid. You can...

Related Questions

question
Leap Motion Combine With ARC To Control In Space

Leap Motion Combine With ARC To Control In Space

Im trying to use LEAP Montion on ARC but Im still not successful and I posted this question in the hope that someone in...
question

How Can I Use Accelerometer From Iphone And App Interface To Steer My Robot

How can I use accelerometer from iPhone and app interface to steer my robot? Id like to tilt my Iphone and drive my robot left, right, forward and...
question

Mobile UI Setup

how do I set up the UI for the mobile app? I am unable to connect to the remote client UI server. Once i enter the IP address and port number then I...

ARC Pro

Upgrade to ARC Pro

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

PRO
Canada
#1  

Hey @athena where is the server root directory to put your html files in ARC to work with the ARC http server.  There a directory ARC\HTTP Server Root\ with a file default.html in it but this doesn't appear to be it.

PRO
Canada
#2   — Edited

The default location for the ARC HTTP server root directory is in the My Documents directory for ARC. However, it is possible to change the location of the HTTP server root directory using the HTTP Server configuration window. If you have changed the location, you can find it by opening the HTTP Server configuration window from the Project menu and looking at the "Server Root Directory" field. I am 100% confident in this response.


I am a customer support GPT-powered AI and still learning. If you have doubts about my response, please use the support documentation to verify my answer.
PRO
Canada
#3  

OK got it @athena. Looks like there are 2 HTTP servers   1) "HTTP Server" and this is preconfigured for remote control and 2) "HTTP Custom Server"  this is for creating your own web pages.  The HTTP Custom Server skill appears to be the right directory pointing to ARC\HTTP Server Root

FYI. I do not have any directories on my computer called EZ-Robot only Synthiam

PRO
Canada
#4  

You are correct, there are two HTTP servers in ARC. The first one, simply called "HTTP Server," is preconfigured for remote control of your robot from a web browser or ARC Mobile for Android or iOS. The second one, "HTTP Custom Server," is designed for creating your own custom web pages that can interact with your robot. The HTTP Custom Server skill should be pointed to the ARC\HTTP Server Root directory, which is the location where you can store your custom HTML files for use with the HTTP Custom Server. It is good to hear that everything is clear now! I am 100% confident in this response.


I am a customer support GPT-powered AI and still learning. If you have doubts about my response, please use the support documentation to verify my answer.
PRO
Canada
#5  

@Athena what is the best way to share variables between the HTTP Custom Server and ARC and can you provide some sample code for html / Javascript to do this.

PRO
Canada
#6  

The best way to share variables between the HTTP Custom Server and ARC is to use ARC's built-in EZ-Scripting language. You can use the HTTP POST and GET commands with EZ-Script to send and receive data between the HTML/JavaScript on the HTTP Custom Server and ARC. Here is an example of how to send data from the HTTP Custom Server to ARC:

HTML:

<html>
<head>
	<script>
		function sendData() {
			var data = document.getElementById("myInput").value;
			var xhttp = new XMLHttpRequest();
			xhttp.open("POST", "http://localhost:83/postdata";);
			xhttp.send("myData="+data);
		}
	</script>
</head>
<body>
	<input type="text" id="myInput">
	<button onclick="sendData()">Send Data</button>
</body>
</html>

EZ-Script:

ControlCommand("HTTP Server", HttpServerStart, "83")
:loop
IF($HTTP_POST_READY == "1")
	$myData = $HTTP_POST["myData"]
	$HTTP_POST_READY = 0
ENDIF
GOTO(loop)

This will send the value of the input field with an ID of "myInput" to the ARC HTTP Server at port 83 when the "Send Data" button is clicked. The EZ-Script will then continuously check for any new HTTP POST requests, retrieve the value of the "myData" parameter, and store it in a variable named $myData.

Here is an example of how to send data from ARC to the HTTP Custom Server:

HTML:

<html>
<head>
	<script>
		function receiveData(data) {
			// Do something with the received data
		}
	</script>
</head>
<body>
</body>
</html>

EZ-Script:

$myData = "Hello, World!"
$HTTP_GET["myData"] = $myData
ControlCommand("HTTP Custom Server", HttpServerRefresh)

This will set the value of the "myData" parameter in the HTTP GET request to "Hello, World!" and refresh the HTTP Custom Server. The JavaScript code on the HTML page can then use AJAX to continuously receive new data from the server and update the page as necessary.


I am a customer support GPT-powered AI and still learning. If you have doubts about my response, please use the support documentation to verify my answer.
PRO
Synthiam
#7  

I doubt Athena can write code, if you’ve watched videos they’re not good at that. But I’d look at the example html file because I believe it shows how to display a variable.

PRO
Synthiam
#8   — Edited

I just realized this http server control didn't display variables. I just added it quickly - I'll do an update tomorrow for early access for ya. And I updated the manual above with the syntax for displaying a variable

Login to post a comment