Language - JavaScript: Difference between revisions

Revision as of 18:52, 7 February 2018

Quick Downloads

Documentation

Phidget22 API (Select JavaScript from drop-down menu)

Example Code

Libraries

JavaScript Library Download

Getting Started with JavaScript

Welcome to using Phidgets with JavaScript! By using JavaScript, you will have access to the complete Phidget22 API, including events. We also provide example code in JavaScript for all Phidget devices.

If you are developing for Windows, keep reading. Otherwise, select your operating system to jump ahead:

macOS
Linux

Windows

If you haven't already, please visit the Windows page before you continue reading. There you will be instructed on how to properly set up your Windows machine so you can follow the guides below!

Browser

Use Our Examples

One of the best ways to start programming with Phidgets is to use our example code as a guide. Our browser examples are graphical and are installed with the Phidget libraries. In order to check them out, first open the Phidget Control Panel and navigate to the Network Server tab:

Next, make sure the Webserver is enabled (Enabled checkbox in Webserver section), and start the Phidget Network Server by clicking on the Start button at the bottom of the window. Click on the hyperlink as shown in the image below (or navigate to http://localhost:8989):

You will now see a program written with JavaScript/HTML that mimics the Phidget Control Panel. It will show all the Phidgets attached to your machine. By double-clicking on the Phidgets, and example will launch:

To view the source code that drives the examples, navigate to the following location:

C:/Program Files/Phidgets/Phidget22/html

Here you can view the code that was written to create the main webpage as well as all of the examples.

Write Your Own Code

Let's start by writing a simple HTML page that makes a dynamic list of attached Phidgets visible to the user. We will be using the JavaScript library jQuery in these examples. jQuery is not required in order to use Phidgets, however, it will make it easier for us to access elements on an HTML page.

To start, create a new folder that looks like this:

The referenced libraries are installed with the Phidget libraries and can be found at the following location:

C:/Program Files/Phidgets/Phidget22/html

Next, create a file called index.html and copy the following code into it (Note: if you have newer JavaScript libraries, modify the code below to match your version numbers):

<!DOCTYPE html>
<html>
<head>
<title>Javascript Test Program</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="sha256.js"></script>
<script src="jphidgets22.1.0.0.min.js"></script>

<script>

	$(document).ready(function () {
		var conn = new jPhidgets.Connection('ws://' + window.location.host + '/phidgets', { name: window.location.host });

		conn.connect().then(function () {
			console.log('connected');
		}).catch(function (err) {
			alert('failed to connect to server:' + err);
		});;

		conn.onattach = function(dev) {
			$('#list').append(new Option(dev.name,dev.phid));
		}

		conn.ondetach = function(dev) {
			$("#list option[value='" + dev.phid + "']").remove();
		}
	});

</script>
</head>

<body>
	<label> Attached Phidgets: </label>
	<div>
		<select multiple id="list" style="width: 500px;"></select>
	</div>
</body>
</html>

After copying the code above into your index.html file, your folder should look like this:

Next, open the Network Server tab in the Phidget Control Panel and modify the Webserver Docroot to your folders location:

Finally, click on the hyperlink to see the example (or navigate to http://localhost:8989):

Open the developer console to get a better idea what is going on:

For information about the Node.js examples, keep reading. Otherwise, skip ahead to the edit the examples section located below.

Node.js

Use Our Examples

One of the best ways to start programming with Phidgets is to use our example code as a guide. In order to run the examples, you will need to download and install Node.js.

Now that you have Node.js installed, select an example that will work with your Phidget:

JavaScript Examples

Next, navigate to the Network Server tab in the Phidget Control Panel and press the Start button after ensuring the Phidget Server is enabled (Enabled checkbox in Phidget Server section).

Navigate to the example folder that you previously downloaded, open the command prompt at this location and enter the following command:

npm update

Next, enter the following command to run the example (replacing Accelerometer with your example name):

node Accelerometer localhost

You should now have the example up and running. When you are ready, the next step is editing the examples.

macOS

Browser Example

Use Our Examples

One of the best ways to start programming with Phidgets is to use our example code as a guide. Our browser examples are graphical and are installed with the Phidget libraries. In order to check them out, first open the Phidget Control Panel and navigate to the Network Server tab:

Next, make sure the Webserver is enabled (Enabled checkbox in Webserver section), and start the Phidget Network Server by clicking on the Start button at the top of the window. A button labelled View in Browser... will appear. Click on it now (or navigate to http://localhost:8989).

You will now see a program written with JavaScript/HTML that mimics the Phidget Control Panel. It will show all the Phidgets attached to your machine. By double-clicking on the Phidgets, and example will launch:

To view the source code that drives the examples, navigate to the following location:

/Library/Application Support/Phidgets/Phidget22NetworkServer/html

Here you can view the code that was written to create the main webpage as well as all of the examples.

Write Your Own Code

Let's start by writing a simple HTML page that makes a dynamic list of attached Phidgets visible to the user. We will be using the JavaScript library jQuery in these examples. jQuery is not required in order to use Phidgets, however, it will make it easier for us to access elements on an HTML page.

To start, create a new folder that looks like this:

The referenced libraries are installed with the Phidget libraries and can be found at the following location:

/Library/Application Support/Phidgets/Phidget22NetworkServer/html

Next, create a file called index.html and copy the following code into it (Note: if you have newer JavaScript libraries, modify the code below to match your version numbers):

<!DOCTYPE html>
<html>
<head>
<title>Javascript Test Program</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="sha256.js"></script>
<script src="jphidgets22.1.0.0.min.js"></script>

<script>

	$(document).ready(function () {
		var conn = new jPhidgets.Connection('ws://' + window.location.host + '/phidgets', { name: window.location.host });

		conn.connect().then(function () {
			console.log('connected');
		}).catch(function (err) {
			alert('failed to connect to server:' + err);
		});;

		conn.onattach = function(dev) {
			$('#list').append(new Option(dev.name,dev.phid));
		}

		conn.ondetach = function(dev) {
			$("#list option[value='" + dev.phid + "']").remove();
		}
	});

</script>
</head>

<body>
	<label> Attached Phidgets: </label>
	<div>
		<select multiple id="list" style="width: 500px;"></select>
	</div>
</body>
</html>

After copying the code above into your index.html file, your folder should look like this:

Next, open the Network Server tab in the Phidget Control Panel and modify the Webserver Docroot to your folders location:

Finally, click on the hyperlink (or navigate to http://localhost:8989) to see the example:

Open the developer console to get a better idea what is going on:

For information about the Node.js example, keep reading. Otherwise, skip ahead to the edit the examples section located below.

Node.js

Use Our Examples

One of the best ways to start programming with Phidgets is to use our example code as a guide. In order to run the examples, you will need to download and install Node.js.

Now that you have Node.js installed, select an example that will work with your Phidget:

JavaScript Examples

Next, navigate to the Network Server tab in the Phidget Control Panel and press the Start Network Server button after ensuring the Phidget Server is enabled (Enabled checkbox in Phidget Server section).

Navigate to the example folder that you previously downloaded, open the command prompt at this location and enter the following command:

sudo npm update

Next, enter the following command to run the example (replacing Accelerometer with your example name):

node Accelerometer localhost

You should now have the example up and running. When you are ready, the next step is editing the examples.

Linux

Browser Example

Use Our Examples

One of the best ways to start programming with Phidgets is to use our example code as a guide. Our browser examples are graphical and can be downloaded here: Javascript Examples (HTML)

or they can be unpacked using

 apt-get install phidget22wwwjs

After unpacking the examples, navigate to the following location:

/etc/phidgets

Open the file named phidget22networkserver.pc and navigate to the www section, you should see something like this:

As you can see from the image above, our docroot location is defined as the following location:

/var/phidgets/www

Create the docroot location (if it doesn't exist already) and copy the contents of the example you downloaded into it by entering the following commands into the terminal:

mkdir /var/phidgets
mkdir /var/phidgets/www
cp -a YOUR_SOURCE_FOLDER/. /var/phidgets/www

Now that the example code is located at the docroot location, and the Phidget Webserver is enabled (can be seen in www section of phidget22networkserver.pc), navigate to http://localhost:8080. You will see a program written with JavaScript/HTML that mimics the Phidget Control Panel (available on macOS and Windows). It will show all the Phidgets attached to your machine. By double-clicking on the Phidgets, and example will launch:

Take a look at the source files that are now located at /var/phidgets/www

Write Your Own Code

Let's start by writing a simple HTML page that makes a dynamic list of attached Phidgets visible to the user. We will be using the JavaScript library jQuery in these examples. jQuery is not required in order to use Phidgets, however, it will make it easier for us to access elements on an HTML page.

To start, create a new folder that looks like this:

The referenced libraries can be found in the Javascript Examples (HTML) that we provide.

Next, create a file called index.html and copy the following code into it (Note: if you have newer JavaScript libraries, modify the code below to match your version numbers):

<!DOCTYPE html>
<html>
<head>
<title>Javascript Test Program</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="sha256.js"></script>
<script src="jphidgets22.1.0.0.min.js"></script>

<script>

	$(document).ready(function () {
		var conn = new jPhidgets.Connection('ws://' + window.location.host + '/phidgets', { name: window.location.host });

		conn.connect().then(function () {
			console.log('connected');
		}).catch(function (err) {
			alert('failed to connect to server:' + err);
		});;

		conn.onattach = function(dev) {
			$('#list').append(new Option(dev.name,dev.phid));
		}

		conn.ondetach = function(dev) {
			$("#list option[value='" + dev.phid + "']").remove();
		}
	});

</script>
</head>

<body>
	<label> Attached Phidgets: </label>
	<div>
		<select multiple id="list" style="width: 500px;"></select>
	</div>
</body>
</html>

After copying the code above into your index.html file, your folder should look like this:

Next, modify the phidget22networkserver.pc file that is located at /etc/phidgets. Navigate to the www section and change the docroot location to match the location of your index.html file:

After modifying the docroot location, ensure you restart the Phidget Network Server. After restarting the Phidget Network Server, navigate to http://localhost:8080 to view the example:

Try opening the developer console for your web browser to see the Phidget JavaScript code executing and to get a better feel for the program.

Node.js

One of the best ways to start programming with Phidgets is to use our example code as a guide. In order to run the examples, you will need to download and install Node.js.

Now that you have Node.js installed, select an example that will work with your Phidget:

JavaScript Examples

Navigate to the example folder that you previously downloaded, open the terminal at this location and enter the following command:

npm update

Next, enter the following command to run the example (replacing Accelerometer with your example name):

node Accelerometer localhost

You should now have the example up and running. When you are ready, the next step is editing the examples.

Edit the Examples

By following the instructions for your operating system and compiler above, you now have working examples and a project that is configured. This teaching section will help you understand how the examples were written so you can start writing your own code.

Remember: your main reference for writing JavaScript code will be the Phidget22 API Manual and the example code.

Step One: Connect

In Javascript, you must first connect to the Phidget server using the Connection object.

function main() {

	...

	var conn = new jPhidget22.Connection(url, { name: n, passwd: p });
	conn.connect()
	  .then(runCode);
}

Where url, n, and p are variables defined elsewhere in the program. If the connection is successful, we call another function that contains the rest of our code.

Step Two: Create and Open

After connecting, the Open() function opens the software object, and once it has successfully opened we can interact with it and start receiving data from it. We can also set up event handlers just before opening.

For example, if we were using an Digital Input as our device, it would look like this:

function runCode() {
	var ch = new jPhidget22.DigitalInput();

	ch.onAttach = digitalInput_attach;
	ch.onStateChange = digitalInput_change;

	ch.open().then(function() {
		// code to execute after open succeeds
	}).catch(function (err) {
		// code to execute if open fails
	});

}

Once the object successfully opens, you can access it and you will start to get events from it. We can define the event handler functions :

function digitalInput_attach(ch) {
	console.log(ch + ' attached');
}

function digitalInput_change(state) {
	console.log('state changed:' + state);
}

Now that they've been registered in the runCode() function and the device has been opened, these event handlers will be able to trigger. The first one triggers when the DigitalInput channel attaches, and the second one will trigger whenever the state of the attached DigitalInput changes.

Step Three: Do Things with the Phidget

Some values can be directly read and set on the Phidget. These functions can be used inside a polling loop as an alternative to event driven programming. The lines inside the loop would be something like this, after which you could do something with the value:

var di_state = ch.getState(); // get the state of the digital input

ch.setState(1); // set the state of the digital input

Step Four: Close

At the end of your program (or at least, at the end of the part that uses the Phidget), it is advisable to close your device. This ensures that the Phidget will be available to other programs that want to use it, since a channel can only be in use by one program at a time unless it's opened remotely. It's not necessary to delete the object after closing in Javascript.

ch.close();

Personal tools

Views

More

Tools

Language - JavaScript: Difference between revisions

Revision as of 18:52, 7 February 2018

Contents

Quick Downloads

Documentation

Example Code

Libraries

Getting Started with JavaScript

Windows

Browser

Use Our Examples

Write Your Own Code

Node.js

Use Our Examples

macOS

Browser Example

Use Our Examples

Write Your Own Code

Node.js

Use Our Examples

Linux

Browser Example

Use Our Examples

Write Your Own Code

Node.js

Edit the Examples

Step One: Connect

Step Two: Create and Open

Step Three: Do Things with the Phidget

Step Four: Close

Further Reading

Navigation menu

@@ Line 1: / Line 1: @@
+<metadesc>Communicate over USB with sensors, controllers and relays with Phidgets! Our JavaScript API supports Windows/MacOS/Linux using html or Node.js.</metadesc>
 [[Category:Language]]
 __TOC__
@@ Line 33: / Line 34: @@
-Next, make sure the Webserver is enabled (''Enabled'' checkbox in ''Webserver'' section), and start the Phidget Network Server by clicking on the ''Start'' button at the bottom of the window. Click on the hyperlink (or navigate to http://localhost:8989) as shown in the image below:
+Next, make sure the Webserver is enabled (''Enabled'' checkbox in ''Webserver'' section), and start the Phidget Network Server by clicking on the ''Start'' button at the bottom of the window. Click on the hyperlink as shown in the image below (or navigate to http://localhost:8989):
 [[File:Javascript_windows_localhost.png|link=|center]]
-You will now see a program that mimics the Phidget Control Panel (and was written entirely with JavaScript/HTML). It will show all the Phidgets attached to your machine. By double-clicking on the Phidgets, and example will launch:
+You will now see a program written with JavaScript/HTML that mimics the Phidget Control Panel. It will show all the Phidgets attached to your machine. By double-clicking on the Phidgets, and example will launch:
 [[File:Javascript_windows_controlpanel.png|link=|center]]
-To view the source code, navigate to the following location:
+To view the source code that drives the examples, navigate to the following location:
 *C:/Program Files/Phidgets/Phidget22/html
@@ Line 59: / Line 60: @@
-As stated above, you must download the jQuery library. The rest of the libraries are installed with the Phidget libraries and can be found at the following location:
+The referenced libraries are installed with the Phidget libraries and can be found at the following location:
 *C:/Program Files/Phidgets/Phidget22/html
@@ Line 70: / Line 71: @@
 <head>
 <title>Javascript Test Program</title>
-<script src="jquery-3.2.1.min.js"></script>
+<script src="jquery-2.1.4.min.js"></script>
 <script src="sha256.js"></script>
 <script src="jphidgets22.1.0.0.min.js"></script>
@@ Line 115: / Line 116: @@
-Finally, click on the hyperlink (or navigate to http://localhost:8989) to see the example:
+Finally, click on the hyperlink to see the example (or navigate to http://localhost:8989):
 [[File:Javascript_windows_example.png|link=|center]]
@@ Line 123: / Line 124: @@
-For information about the Node.js example, keep reading. Otherwise, skip ahead to the [[#Edit the Examples | edit the examples]] section located below.
+For information about the Node.js examples, keep reading. Otherwise, skip ahead to the [[#Edit the Examples | edit the examples]] section located below.
 ===Node.js===
+====Use Our Examples====
+One of the best ways to start programming with Phidgets is to use our example code as a guide. In order to run the examples, you will need to download and install [https://nodejs.org/ Node.js].
-node.js is a Javascript runtime that will allow us to run Javascript code via the Windows command prompt. Download the latest version of node.js [https://nodejs.org/ here]. The installer will also set the class path and install '''npm''' (the node.js package manager), both of which are necessary for the next steps. Once it's been installed, open up a command prompt by searching for "cmd" in the start menu.
-You can download our Javascript examples [[#Quick Downloads|here]].
+Now that you have Node.js installed, select an example that will work with your Phidget:
+*{{SampleCode|JavaScript|JavaScript Examples}}
-In the command prompt, navigate to the folder that contains the Phidgets Javascript examples. There, type the following command:
-{{Code|npm update}}
+Next, navigate to the Network Server tab in the Phidget Control Panel and press the ''Start'' button after ensuring the Phidget Server is enabled (''Enabled'' checkbox in ''Phidget Server'' section).
+[[File:Windows_networkserver.PNG|link=|center]]
-This will cause the package manager to look at {{Code|package.json}} and update the Phidgets libraries.
+Navigate to the example folder that you previously downloaded, open the command prompt at this location and enter the following command:
+<syntaxhighlight lang='bash'>
+npm update
+</syntaxhighlight>
+[[File:Javascript_windows_npmupdate.png]]
+Next, enter the following command to run the example (replacing Accelerometer with your example name):
+<syntaxhighlight lang='bash'>
+node Accelerometer localhost
+</syntaxhighlight>
+[[File:Javacsript_windows_nodeexample.png|link=|center]]
+You should now have the example up and running. When you are ready, the next step is [[#Edit the Examples | editing the examples]].
+==macOS==
+=== Browser Example===
 ====Use Our Examples====
+One of the best ways to start programming with Phidgets is to use our example code as a guide. Our browser examples are graphical and are installed with the Phidget libraries. In order to check them out, first open the Phidget Control Panel and navigate to the Network Server tab:
+[[File:Macos_networkserver_run.png|link=|center]]
-To run the examples, go to {{Code|C:\Program Files\Phidgets\Phidget22\}} and run {{Code|NetworkServer.exe}}. A window like the one below should open:
-[[image:js_networkservice.jpg|link=]]
+Next, make sure the Webserver is enabled (''Enabled'' checkbox in ''Webserver'' section), and start the Phidget Network Server by clicking on the ''Start'' button at the top of the window. A button labelled ''View in Browser...'' will appear. Click on it now (or navigate to http://localhost:8989).
+[[File:Javascript_macos_viewinbrowswer.png|link=|center]]
-In the other command prompt window, navigate to the folder that contains the Phidgets Javascript examples and type
-{{Code|node <example> <address>}}
+You will now see a program written with JavaScript/HTML that mimics the Phidget Control Panel. It will show all the Phidgets attached to your machine. By double-clicking on the Phidgets, and example will launch:
+[[File:Javascript_macos_browserexample.png|link=|center]]
-where {{Code|<example>}} is the filename of the example you want to run (i.e. DigitalInput.js) and {{Code|<address>}} is the address of the Phidget server. In our case, it will be "localhost" because we're hosting it on the same computer:
-{{Code|node DigitalInput localhost}}
+To view the source code that drives the examples, navigate to the following location:
+*/Library/Application Support/Phidgets/Phidget22NetworkServer/html
-This should result in a simple text-based example to be launched:
-[[image:js_nodeexample.jpg|link=]]
+[[File:Javascript_macos_filelocation.png|link=|center]]
+Here you can view the code that was written to create the main webpage as well as all of the examples.
 ====Write Your Own Code====
+Let's start by writing a simple HTML page that makes a dynamic list of attached Phidgets visible to the user.
+We will be using the JavaScript library [https://jquery.com/download/ jQuery] in these examples. jQuery is not required in order to use Phidgets, however, it will make it easier for us to access elements on an HTML page.
+To start, create a new folder that looks like this:
+[[File:Javascript_macos_folderlibraries.png|link=|center]]
+The referenced libraries are installed with the Phidget libraries and can be found at the following location:
+*/Library/Application Support/Phidgets/Phidget22NetworkServer/html
+Next, create a file called ''index.html'' and copy the following code into it (Note: if you have newer JavaScript libraries, modify the code below to match your version numbers):
+<syntaxhighlight lang=javascript>
+<!DOCTYPE html>
+<html>
+<head>
+<title>Javascript Test Program</title>
+<script src="jquery-2.1.4.min.js"></script>
+<script src="sha256.js"></script>
+<script src="jphidgets22.1.0.0.min.js"></script>
+<script>
+	$(document).ready(function () {
+		var conn = new jPhidgets.Connection('ws://' + window.location.host + '/phidgets', { name: window.location.host });
+		conn.connect().then(function () {
+			console.log('connected');
+		}).catch(function (err) {
+			alert('failed to connect to server:' + err);
+		});;
+		conn.onattach = function(dev) {
+			$('#list').append(new Option(dev.name,dev.phid));
+		}
+		conn.ondetach = function(dev) {
+			$("#list option[value='" + dev.phid + "']").remove();
+		}
+	});
+</script>
+</head>
+<body>
+	<label> Attached Phidgets: </label>
+	<div>
+		<select multiple id="list" style="width: 500px;"></select>
+	</div>
+</body>
+</html>
+</syntaxhighlight>
+After copying the code above into your ''index.html'' file, your folder should look like this:
+[[File:Javascript_macos_folder.png|link=|center]]
+Next, open the Network Server tab in the Phidget Control Panel and modify the Webserver ''Docroot'' to your folders location:
+[[File:Javascript_macos_docrootchange.png|link=|center]]
+Finally, click on the hyperlink (or navigate to http://localhost:8989) to see the example:
+[[File:Javascript_macos_example.png|link=|center]]
+Open the developer console to get a better idea what is going on:
+[[File:Javascript_macos_devconsole.png|link=|center]]
+For information about the Node.js example, keep reading. Otherwise, skip ahead to the [[#Edit the Examples | edit the examples]] section located below.
+===Node.js===
+====Use Our Examples====
+One of the best ways to start programming with Phidgets is to use our example code as a guide. In order to run the examples, you will need to download and install [https://nodejs.org/ Node.js].
+Now that you have Node.js installed, select an example that will work with your Phidget:
+*{{SampleCode|JavaScript|JavaScript Examples}}
-After testing with our node.js examples, it will be easy for you to write your own programs. Open up one of the examples and edit the {{Code|runExample()}} function to suit your needs:
+Next, navigate to the Network Server tab in the Phidget Control Panel and press the ''Start Network Server'' button after ensuring the Phidget Server is enabled (''Enabled'' checkbox in ''Phidget Server'' section).
+[[File:Macos_networkserver_run.png|link=|center]]
-# Change {{Code|jPhidget22.VoltageInput}} to the object you want to open.
-# Set new handlers for this channel (for example, {{Code|ch.onIlluminanceChange}} if you're using a light sensor).
-# Set new parameters to open a specific channel (for example, {{Code|ch.setDeviceSerialNumber()}} or {{Code|ch.setIsHubPort()}}).
-# You can open multiple channels by declaring different variables for each one and repeating the same process of assigning handlers and calling {{Code|open()}} on the channel.
-# Edit the contents of the event handlers to do different things with the data. Instead of printing the data to console, you could log it to a .csv file, or perform custom processing on the data (i.e. rolling average).
-When you're done writing your program, you'll be able to run it in the same way as described in the previous section.
+Navigate to the example folder that you previously downloaded, open the command prompt at this location and enter the following command:
+<syntaxhighlight lang='bash'>
+sudo npm update
+</syntaxhighlight>
-== OS X ==
+[[File:Javascript_macos_npmupdate.png ‎]]
-=== Browser Example (Visual Studio Code) ===
-=== node.js ===
+Next, enter the following command to run the example (replacing Accelerometer with your example name):
+<syntaxhighlight lang='bash'>
+node Accelerometer localhost
+</syntaxhighlight>
+[[File:Javascript_macos_nodeexample.png|link=|center]]
+You should now have the example up and running. When you are ready, the next step is [[#Edit the Examples | editing the examples]].
 == Linux ==
+===Browser Example===
+====Use Our Examples====
+One of the best ways to start programming with Phidgets is to use our example code as a guide. Our browser examples are graphical and can be downloaded here:
+[{{SERVER}}/downloads/phidget22/tools/any/Phidget22JavaScriptControlPanel.zip Javascript Examples (HTML)]
+or they can be unpacked using  <syntaxhighlight lang=bash> apt-get install phidget22wwwjs </syntaxhighlight>
+After unpacking the examples, navigate to the following location:
+*/etc/phidgets
+Open the file named ''phidget22networkserver.pc'' and navigate to the ''www'' section, you should see something like this:
+[[File:Javacsript_linux_networkconfig.PNG|link=|center]]
+As you can see from the image above, our ''docroot'' location is defined as the following location:
+*/var/phidgets/www
+Create the docroot location (if it doesn't exist already) and copy the contents of the example you downloaded into it by entering the following commands into the terminal:
+<syntaxhighlight lang='bash'>
+mkdir /var/phidgets
+mkdir /var/phidgets/www
+cp -a YOUR_SOURCE_FOLDER/. /var/phidgets/www
+</syntaxhighlight>
+[[File:Javascript_linux_mkdir.PNG|link=|center]]
+Now that the example code is located at the ''docroot'' location, and the Phidget Webserver is enabled (can be seen in ''www'' section of ''phidget22networkserver.pc''), navigate to http://localhost:8080. You will see a program written with JavaScript/HTML that mimics the Phidget Control Panel (available on macOS and Windows). It will show all the Phidgets attached to your machine. By double-clicking on the Phidgets, and example will launch:
+[[File:Javascript_linux_graphicalexample.PNG|link=|center]]
+Take a look at the source files that are now located at /var/phidgets/www
+===Write Your Own Code===
+Let's start by writing a simple HTML page that makes a dynamic list of attached Phidgets visible to the user.
+We will be using the JavaScript library [https://jquery.com/download/ jQuery] in these examples. jQuery is not required in order to use Phidgets, however, it will make it easier for us to access elements on an HTML page.
+To start, create a new folder that looks like this:
+[[File:Javascript_linux_folderlibraries.PNG|link=|center]]
+The referenced libraries can be found in the [{{SERVER}}/downloads/phidget22/tools/any/Phidget22JavaScriptControlPanel.zip Javascript Examples (HTML)] that we provide.
+Next, create a file called index.html and copy the following code into it (Note: if you have newer JavaScript libraries, modify the code below to match your version numbers):
+<syntaxhighlight lang=javascript>
+<!DOCTYPE html>
+<html>
+<head>
+<title>Javascript Test Program</title>
+<script src="jquery-2.1.4.min.js"></script>
+<script src="sha256.js"></script>
+<script src="jphidgets22.1.0.0.min.js"></script>
+<script>
-=== Browser Example ===
+	$(document).ready(function () {
+		var conn = new jPhidgets.Connection('ws://' + window.location.host + '/phidgets', { name: window.location.host });
-Download our Javascript libraries [[#Quick Downloads|here]] and follow the instructions in the README to get in-browser Javascript running.
+		conn.connect().then(function () {
+			console.log('connected');
+		}).catch(function (err) {
+			alert('failed to connect to server:' + err);
+		});;
-=== node.js ===
+		conn.onattach = function(dev) {
+			$('#list').append(new Option(dev.name,dev.phid));
+		}
-node.js is a Javascript runtime that will allow us to run Javascript code via the terminal. Download the latest version of node.js [https://nodejs.org/ here]. The installer will also set the class path and install '''npm''' (the node.js package manager), both of which are necessary for the next steps.
+		conn.ondetach = function(dev) {
+			$("#list option[value='" + dev.phid + "']").remove();
+		}
+	});
-Download our Javascript examples [[#Quick Downloads|here]].
+</script>
+</head>
-In the terminal, navigate to the folder that contains the Phidgets Javascript examples. There, type the following command:
+<body>
+	<label> Attached Phidgets: </label>
+	<div>
+		<select multiple id="list" style="width: 500px;"></select>
+	</div>
+</body>
+</html>
+</syntaxhighlight>
+After copying the code above into your ''index.html'' file, your folder should look like this:
+[[File:Javascript_linux_folder.PNG|link|center]]
+Next, modify the ''phidget22networkserver.pc'' file that is located at ''/etc/phidgets''. Navigate to the ''www'' section and change the ''docroot'' location to match the location of your ''index.html'' file:
+[[File:Javascript_linux_modifydocroot.PNG|link=|center]]
+After modifying the docroot location, ensure you restart the Phidget Network Server. After restarting the Phidget Network Server, navigate to http://localhost:8080 to view the example:
+[[File:Javascript_linux_example.PNG|link=|center]]
-{{Code|npm update}}
-This will cause the package manager to look at {{Code|package.json}} and update the Phidgets libraries.
+Try opening the developer console for your web browser to see the Phidget JavaScript code executing and to get a better feel for the program.
-Follow the README in the Javascript libraries to get the Phidget network server running.
+====Node.js====
+One of the best ways to start programming with Phidgets is to use our example code as a guide. In order to run the examples, you will need to download and install [https://nodejs.org/ Node.js].
-In the terminal, navigate to the folder that contains the Phidgets Javascript examples and type
-{{Code|node <example> <address>}}
+Now that you have Node.js installed, select an example that will work with your Phidget:
+*{{SampleCode|JavaScript|JavaScript Examples}}
+Navigate to the example folder that you previously downloaded, open the terminal at this location and enter the following command:
+<syntaxhighlight lang='bash'>
+npm update
+</syntaxhighlight>
+[[File:Javascript_linux_npmupdate.PNG|link=|center]]
-where {{Code|<example>}} is the filename of the example you want to run (i.e. DigitalInput.js) and {{Code|<address>}} is the address of the Phidget server. In our case, it will be "localhost" because we're hosting it on the same computer:
-{{Code|node DigitalInput localhost}}
+Next, enter the following command to run the example (replacing Accelerometer with your example name):
+<syntaxhighlight lang='bash'>
+node Accelerometer localhost
+</syntaxhighlight>
-This should result in a simple text-based example to be launched inside the terminal.
+[[File:Javascript_macos_nodeexample.png|link=|center]]
-== Edit the Examples ==
-By following the instructions for your operating system and compiler above, you probably now have a working example and want to understand it better so you can change it to do what you want. This teaching section has resources for you to learn from the examples and write your own.
+You should now have the example up and running. When you are ready, the next step is [[#Edit the Examples | editing the examples]].
-Your main reference for writing Javascript code will be the {{Phidget22API}} Manual. The following code snippets will also provide a quick reference on how to do specific tasks in Javascript.
-=== Code Snippets ===
+== Edit the Examples ==
+{{WriteCode_Intro|JavaScript}}
-==== Step One: Connect====
+=== Step One: Connect===
 In Javascript, you must first connect to the Phidget server using the {{Code|Connection}} object.
@@ Line 229: / Line 439: @@
 Where {{Code|url}}, {{Code|n}}, and {{Code|p}} are variables defined elsewhere in the program. If the connection is successful, we call another function that contains the rest of our code.
-==== Step Two: Create and Open====
+=== Step Two: Create and Open===
 After connecting, the {{Code|Open()}} function opens the software object, and once it has successfully opened we can interact with it and start receiving data from it. We can also set up event handlers just before opening.
@@ Line 269: / Line 478: @@
 Now that they've been registered in the {{Code|runCode()}} function and the device has been opened, these event handlers will be able to trigger. The first one triggers when the DigitalInput channel attaches, and the second one will trigger whenever the state of the attached DigitalInput changes.
-==== Step Three: Do Things with the Phidget ====
+=== Step Three: Do Things with the Phidget ===
 Some values can be directly read and set on the Phidget. These functions can be used inside a polling loop as an alternative to event driven programming. The lines inside the loop would be something like this, after which you could do something with the value:
@@ Line 280: / Line 489: @@
 </syntaxhighlight>
-==== Step Four: Close ====
+=== Step Four: Close ===
 At the end of your program (or at least, at the end of the part that uses the Phidget), it is advisable to close your device. This ensures that the Phidget will be available to other programs that want to use it, since a channel can only be in use by one program at a time unless it's opened remotely. It's not necessary to delete the object after closing in Javascript.
@@ Line 290: / Line 499: @@
 == Further Reading ==
 [[Phidget Programming Basics]] - Here you can find the basic concepts to help you get started with making your own programs that use Phidgets.