HTTP Server (Custom)

1) Files you can serve (supported file types)

Put your web files in the server folder (explained below). The server can directly serve these file types:

• .html
• .jpg
• .png
• .css

2) Where to put your website files

By default, the HTTP Server (Custom) reads files from:

My Documents\ARC\HTTP Server Root\

This folder is inside your Windows Documents directory. Add your files there, for example:

• index.html (your main page)
• styles.css (optional styling)
• buttons.png or other images

An example HTML file is included in the HTTP Server Root folder to demonstrate the supported control tags and syntax. You can copy it and edit it to get started.

3) Ports and common startup issues (Port 80)

Web servers run on a port. By default, many web servers use port 80. Only one program on your PC can use the same port at a time.

After the server starts, you can open it from another device by browsing to your PC’s IP address and the chosen port (example: http://192.168.1.10:8080).

This skill supports special custom HTML tags that ARC understands. These tags render as controls on your page (like buttons and camera viewers) and talk to ARC using AJAX. AJAX means the page does not refresh when you click a control—everything happens in the background.

---

Movement Buttons

Use <ez-move /> to create movement buttons. Set:

• text = the label shown on the button
• data-direction = the direction command

<ez-move text="Forward" data-direction="forward" />
<ez-move text="Right"   data-direction="right"   />
<ez-move text="Reverse" data-direction="reverse" />
<ez-move text="Left"    data-direction="left"    />
<ez-move text="Stop"    data-direction="stop"    />

---

Run an EZ-Script Command (Custom Button)

Use <ez-script> when you want a button that runs an EZ-Script command (or multiple commands). The button label comes from text, and the script goes between the opening and closing tags:

<ez-script text="Say Hello">
Say("Hello from my web page!")
</ez-script>

---

Camera Viewer

Use <ez-camera /> to display a camera feed from an ARC Camera control.

• data-controlname must match the name of the Camera control in your ARC project.
• data-interval is how often (in milliseconds) the image refreshes.

<ez-camera data-controlname="Camera" data-interval="100" />

---

Read a Digital Port (True/False Display)

Use <ez-getdigital /> to poll a digital port and show a visual True/False state. This is useful for sensors like bump switches or limit switches.

• data-port = the digital port (example: d0)
• data-interval = poll interval in milliseconds
• Customize the text/colors for the True and False states

<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" />

---

Display a Variable Value

Use <ez-variable /> to display the value of an ARC variable and update it on a timer.

• data-variablename = the variable name (example: $Direction)
• data-interval = refresh interval in milliseconds

<ez-variable data-variablename="$Direction" data-interval="1000" />

Beginner tip: Start with a simple page

Create an index.html file in HTTP Server Root and add a few controls first (Forward/Left/Right/Stop). Once that works, add styling (.css), images, camera, and sensor readouts.

If something doesn’t show up, double-check: the file is in the correct folder, the camera control name matches, and the server is running on an available port.