Tutorial

Control Your Way

Javascript Tutorial

Index

1. HTML
2. Javascript
3. Test

1. HTML

The source code for this tutorial is available on GitHub at: https://github.com/controlyourway/JavascriptTutorial.

This tutorial shows how to make a simple HTML page that can send and receive data. Create an empty HTML file called cywJavascriptTutorial.html and open it with your favourite editor. Paste the code below into the editor:
This is all the HTML that will be needed to test the Javascript library. Inside the script tag, under the //user javascript comment we will insert all the Javascript for using the library. It is a better practice to put your Javascript in a separate file but for simplicity we will put everything in one file for this tutorial. The Control Your Way Javascript library can generate a control for entering the user's credentials. The cywControl div will be used for this purpose. When you open the file in your browser it should look like this:
Javascript tutorial html file in browser before javascript is added

If the Save connection details checkbox is checked then the user's credentials (the control is not generated yet) will be stored in your browser's HTML5 local storage after connecting to the Control Your Way server. The discover button will send a discovery message for getting the session IDs of all your other devices that are discoverable and on the same default networks. If you need help on how our technology works please read our How it works guide. The messages box will display connection and error messages.

2. Javascript

Next we will add the Javascript. Copy the code below and paste it under the comment: //user javascript
When you refresh the page in your browser the controls for entering the user's credentials should be displayed. The page should look as follows:
Javascript tutorial html file in browser before javascript is added

For a detailed description about all the functions and callbacks please see our Javascript Library Help page.

3. Test

The last step is to test the HTML file. Open the file in your browser, enter valid credentials and then click on the Start button. After a short delay the Messages text box should say "Connection Successful" if your user details are correct. We need something to communicate with. We made a test page especially for this purpose. Go to our Test Page and enter your details in the User name and Network password text boxes and click the Start button. Enter "test123" into the Send data textbox and click the Send button. The message should be displayed on the web page. Next click the Send data button on the test page and the message should be received in the Javascript tutorial.

If both the tutorial and the web page connected successfully but no data can be sent between them then the most common cause is that the network names don't match. If the devices are not on the same default networks then they cannot exchange data unless the data is specifically sent to the other one's network. The network names can be set after connection by clicking the Set Network Names button.

Click on the Send Discovery button. After a short delay the Messages textbox should display a list of devices that was discovered. We hope this gives tutorial gave enough information to get you going using our Javascript library. We also have a full featured example available at https://github.com/controlyourway/JavascriptExample