To create our very first Hyper Text Markup Language (HTML) document, we will start off by simply printing "Hello WAT" to the screen.
To declare an HTML document, just create a 'hellowat.html' file and wrap it in the html tags like below. The result of this screen will output "Hello Wat" to the browser. The body tags declare where the scope of the content will go, html also includes "head" and "script" tags that you can find in the next example. For more information on HTML, please click here
<html> <body> <p>Hello Wat</p> </body> </html>
To try this example:
- Create a new file called helloWorld2.html and copy the contents above into it.
- You can test the functionality before trying it on the device if you like by simply opening it in your browser.
- Clicking "Say hello" should generate a popup window containing the text "Hello World".
- Clicking "Say greetings" should generate the text "Greetings to you!" below the link.
- Clicking "Refresh Page" should simply reload the webpage.
- Now that you have seen the webpage, let's try it on the device. Firstly, we will need to have a webserver installed in order to provide the webpage to the WAT device over the network. Microsoft IIS or the open source Apache are both good webservers.
- Once the webserver is installed, we need to place our html file in the DocumentRoot directory. For IIS, this is typically
C:\inetpub\wwwroot\For Apache, this is typically
C:\Program Files\Apache Group\Apache2\htdocsor
/usr/local/apache2/htdocson a linux os.
- Now that the webserver is installed, you should be able to serve files over the network via http protocol. Open browser and go to: http://localhost/index.html
- You should have the same functionality here as you did in step 2.
- Now we can verify this functionality on the WAT device. You will first need to know the IP Address of your computer. In the WAT devices configuration window, set Initial URL to:
As the code starts to grow, it becomes disorganized and hard to keep track off. It is important to keep HTML, JS and CSS all in their own files.
As a template, we provide a file directory structure in which you can easily separate your logic from your HTML. It also allows you to easily add in new libraries and design quick web applications.
--css --images ## source for image files --js --wat_js ## wat autocomplete library --libs ## external JS libraries --partials ## partial HTML pages to be loaded in the index index.html ## main index file
This directory structure allows us to easily keep track of various files. All examples will be displayed in 1 file for simplicity reasons. WAT seed projects can be downloaded @ the ARCX developer site. For more tutorials check out 2 - Getting Started.