Language - JavaScript: Difference between revisions

From Phidgets Support
No edit summary
(19 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<metadesc>Communicate with sensors, controllers and relays with Phidgets! Our JavaScript API supports Node.js and Browsers.</metadesc>
[[Category:Language]]
[[Category:Language]]
{{OSLang|[[File:icon-Javascript.png|64x64px|link=|left|alt=]]|Javascript is a high-level object-oriented programming language ideal for use in web applications.}}
__TOC__
__TOC__


== Introduction ==
== Quick Downloads ==
=== Documentation ===
 
*{{Phidget22API}} (Select JavaScript from drop-down menu)


If this is your first time working with a Phidget, we suggest starting with the Getting Started page for your specific device. This can be found in the user guide for your device. That page will walk you through installing drivers and libraries for your operating system, and will then bring you back here to use Javascript specifically.
=== Libraries ===


Javascript is capable of using the complete {{Phidget22API}}, including events. We also provide example code in Javascript for all Phidget objects.
*'''Browser''': [{{SERVER}}/downloads/phidget22/libraries/any/Phidget22JavaScript.zip JavaScript Library Download]
*'''Node.js''': npm install phidget22


Javascript does not require any special programming environment to write. Just use your favourite text editor to write .html and .js files.
=== Example Code ===


== Quick Downloads ==
*[{{SERVER}}?view=code_samples&lang=JavaScript&os=Nodejs JavaScript Examples (Node.js)]
*[{{SERVER}}?view=code_samples&lang=JavaScript&os=Browser JavaScript Examples (Browser)]


=== Documentation ===
=== Tools ===


*{{Phidget22API}} (Select Javascript from drop-down menu)
*[{{SERVER}}/downloads/phidget22/tools/any/Phidget22JavaScriptControlPanel.zip JavaScript Control Panel Source]


=== Example Code ===
=== OS Libraries ===


*{{SampleCode|JavaScript|JavaScript Examples}}
{{AllQuickDownloads}}


=== Libraries and Drivers ===
== Getting Started with JavaScript ==
Welcome to using Phidgets with JavaScript! By using JavaScript, you will have access to the complete {{Phidget22API}}, including events. We also provide example code in JavaScript for all Phidget devices.


*[{{SERVER}}/downloads/phidget22/libraries/any/Phidget22JavaScript.zip JavaScript Library Download]
=== Version Change ===
{{AllQuickDownloads}}
'''Note:''' The Phidgets JavaScript library has been bumped to version 2.x.x following a rewrite. The version 2 API is mostly identical to version 1, but does have some breaking changes. It is highly recommended that any code written against version 1 be updated to version 2, as version 1 is considered unstable.


== Getting Started with Javascript ==
== Phidget Network Server ==
The JavaScript library requires the [[Phidget Network Server]]. Start by configuring the server for your OS:


If you are new to writing code for Phidgets, we recommend starting by running, then modifying existing examples. This will allow you to:
* [[OS - Windows#Phidget Network Server|Windows]]
{{ExampleCodeReasons}}
* [[OS - OS X#Phidget Network Server|macOS]]
* [[OS - Linux#Phidget Network Server|Linux]]
* [[OS - Phidget SBC#Phidget Network Server|PhidgetSBC]]


Instructions are divided up by operating system. Choose:
The Phidget Server includes a built-in Webserver. This must be enabled when using the JavaScript library in browser, but can be left disabled when using the library from Node.js.
*[[#Windows|Windows XP / Vista / 7]]
*[[#OS X |OS X]]
*[[#Linux | Linux]] (including PhidgetSBC)


== Windows ==
The Phidget Server Webserver can be used to serve files - such as the Phidget JavaScript library, or your own projects. By default, it serves the JavaScript control panel files. The main purpose of the Webserver is to support a Websockets connection for the Browser library - because regular sockets cannot be used in Browser. The Node.js library uses raw sockets to connect to the Phidget Server, and so does not require the Webserver or Websockets.
===Description of Library Files===
Javascript  programs depend on the following files, which the installers above put onto your system:


*'''jphidgets22.x.x.x.min.js''' is the Javascript library for Phidget22. The x's in the filename denote the version of the library.
== JavaScript Control Panel ==
The JavaScript control panel is a Browser version of our Phidget control panel. This can be used to view and control all Phidgets attached to a Phidget server. The JavaScript control panel is installed by default on Windows, macOS and PhidgetSBC. You can also download the source [{{SERVER}}/downloads/phidget22/tools/any/Phidget22JavaScriptControlPanel.zip here].


===Browser Example (Visual Studio Code)===
Make sure the Phidget Server - Webserver is enabled, and running, then 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.


This section will outline how to get a Javascript example running in an internet browser. Javascript can be written in any text editor. If you don't have one yet, [https://code.visualstudio.com/ Visual Studio Code] is recommended because it's free and simple.
[[File:Javascript_windows_controlpanel.png|link=|center]]


====Use Our Examples====
== 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 available [{{SERVER}}?view=code_samples&lang=JavaScript&os=Browser here].


The Javascript examples that we provide are designed to work with [[Language_-_JavaScript#node.js|node.js]], but you can easily modify them to work in a browser. Follow the steps in the next section below, and once you get the HTML page working, copy the contents of the {{Code|runExample()}} function from the example of your choice into the function in your code that is called after connecting. Then, change any instance of {{Code|jPhidget22}} with {{Code|jPhidgets}}. When you visit the page, open up the developer's console (F12 is the hotkey for Chrome) and you'll be able to see the normal output for the examples in the console window.
=== 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.  


====Write Your Own Code====
To start, create a new empty folder.


We'll be using the Javascript library [https://jquery.com/download/ jQuery] in these examples. While it's not required in order to use Phidgets, jQuery will make it easier for us to access elements on an html page.  
Next, download the latest JavaScript browser library from [{{SERVER}}/downloads/phidget22/libraries/any/Phidget22JavaScript.zip here] and copy the files into the folder.


Let's start by writing a simple html page that makes a dynamic list of attached Phidgets visible to the user. Create a new folder and put the required library files inside. Then create a new HTML file and fill it with the following code:
Next, create a file called ''index.html'' and copy the following code into it (Note: if you have a newer jQuery, modify the code below to match your version):


<syntaxhighlight lang=javascript>
<syntaxhighlight lang=javascript>
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<head>
<head>
<title>Javascript Test Program</title>
    <title>Phidget Manager</title>
<script src="jquery-2.1.4.min.js"></script>
    <script src="jquery-2.1.4.min.js"></script>
<script src="sha256.js"></script>
    <script src="sha256.min.js"></script>
<script src="jphidgets22.1.0.0.min.js"></script>
    <script src="phidget22.min.js"></script>
 
    <script>
<script>
        $(document).ready(function() {
 
            var conn = new phidget22.Connection(8989, 'localhost');
$(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) {
            conn.connect().then(function() {
$("#list option[value='" + dev.phid + "']").remove();
                console.log('connected');
}
            }).catch(function(err) {
});
                conn.delete();
                alert('failed to connect to server:' + err);
            });


</script>
            var man = new phidget22.Manager({
                onDeviceAttach: function(dev) {
                    $('#list').append(new Option(dev.getDeviceName(), dev.getKey()));
                },
                onDeviceDetach: function(dev) {
                    $("#list option[value='" + dev.getKey() + "']").remove();
                }
            });
            man.open();
        });
    </script>
</head>
</head>


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


Pages that employ the use of Javascript are divided into two parts: HTML and Javascript. Code in {{Code|<script>}} tags is Javascript, and everything else is HTML. HTML will handle the parts of our program that will be visible to the user, and the Javascript will handle all of the behind-the-scenes processing. First, we list all of the Javascript libraries we're including. Next, we have our main script which makes a Phidget connection as soon as the page is ready and loaded. It also sets an attach handler and detach handler which will trigger any time a Phidget is connected or disconnected to the computer. Below this, we have a tiny bit of HTML which will display a select list that our Javascript code will interact with.
This code uses the [[Phidget Manager]] to list any Phidget accessible from your computer (either directly via USB or indirectly over the network).  
 
Now, in order to test our new program we have to run it on a server.
 
==== Setting up the Phidget Network Server ====
 
The easiest way to get our code up and running is to host it using the Phidget Network Server. Go to {{Code|C:\Program Files\Phidgets\Phidget22}} and open {{Code|networkserver.cfg}}.
 
Find the {{Code|[webserver]}} section and change the docroot to the path of the HTML file you just wrote.
 
Save, and then run NetworkServer.exe.
 
[[image:js_networkservice.jpg|link=]]


A window like the one pictured should open.
Finally, double click index.html to open it in a browser. You should see something like this:
[[File:Javascript_windows_example.png|link=|center]]


====Running the Program====
Open the developer console to get a better idea what is going on:
[[File:Javascript_windows_devconsole.png|link=|center]]


Now, open a web browser and type {{Code|localhost:8080}} in the address bar. You should see the HTML of the page we just wrote:
For information about the Node.js examples, keep reading. Otherwise, skip ahead to the [[#Edit the Examples | edit the examples]] section located below.


[[image:js-testpage.jpg|link=]]
== Node.js ==
 
=== Use Our Examples ===
Plugging in any Phidget should result in having an entry appear in the list. You will also see any [[Phidget Dictionary|Phidget dictionaries]] that are running on this network server. Unplugging the Phidgets should cause them to disappear from the list. You can open the browser's developer console to see the various messages we've been printing out and to set breakpoints in our Javascript code. In Chrome, for example, you can open the developer console with '''F12''':
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].  
 
[[image:js-chromedev.jpg|900px|link=]]
 
Now, let's change the program so that we can access a specific channel on a Phidget. In this example we'll read the voltage of a VoltageInput channel on the Phidget 1018_2. Insert a new function to run when the Phidget connection is made:
 
<syntaxhighlight lang=javascript>
 
conn.connect().then(function () {
console.log('connected');
readVoltage();
}).catch(function (err) {
alert('failed to connect to server:' + err);
});;


Now that you have Node.js installed, select an example that will work with your Phidget:
*[{{SERVER}}?view=code_samples&lang=JavaScript&os=Nodejs JavaScript Examples (Node.js)]


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


Then, define the function just below this one, but still inside the {{Code|<script>}} tags.
[[File:Javascript_windows_npmupdate.png]]
 
<syntaxhighlight lang=javascript>
 
function readVoltage() {
 
var ch = new jPhidgets.VoltageInput();
 
ch.onVoltageChange = function (voltage) {
$('#res').text(this.getVoltage());
};
 
ch.open();
}
 
</syntaxhighlight>
 
This function sets up a change handler which will update a piece of text every time the voltage changes. It will match to the first VoltageInput object that it finds.
 
Lastly, add a line in the HTML section that adds an element where we can change the text to match the present voltage value:
 
<syntaxhighlight lang=javascript>
 
<body>
<label> Attached Phidgets: </label>
<div>
<select multiple id="list" style="width: 500px;"></select>
</div>
<label> Voltage Input Value: </label> <label id="res"></label>
</body>
 
</syntaxhighlight>
 
Now save your HTML file and refresh your browser. When you plug in a device with a VoltageInput channel, you should see the voltage value constantly update on the page.
 
If you wanted to open the VoltageInput object on a {{VINTHub}} port, you would have to add the following two lines just before the {{Code|open()}} call:


<syntaxhighlight lang=javascript>
Next, enter the following command to run the example (replacing Accelerometer with your example name):
ch.setHubPort(0); // open hub port 0
<syntaxhighlight lang='bash'>
ch.setIsHubPort(true);
node Accelerometer localhost
</syntaxhighlight>
</syntaxhighlight>
 
[[File:Javacsript_windows_nodeexample.png|link=|center]]
===node.js===
You should now have the example up and running. When you are ready, the next step is [[#Edit the Examples | editing the examples]].
 
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]].
 
In the command prompt, navigate to the folder that contains the Phidgets Javascript examples. There, type the following command:
 
{{Code|npm update}}
 
This will cause the package manager to look at {{Code|package.json}} and update the Phidgets libraries.
 
====Use Our Examples====
 
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=]]
 
In the other command prompt window, navigate to the folder that contains the Phidgets Javascript examples and type
 
{{Code|node <example> <address>}}
 
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}}
 
This should result in a simple text-based example to be launched:
 
[[image:js_nodeexample.jpg|link=]]
 
====Write Your Own Code====
 
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:
 
# 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.
 
== OS X ==
 
=== Browser Example (Visual Studio Code) ===
 
=== node.js ===
 
== Linux ==
 
=== Browser Example ===
 
Download our Javascript libraries [[#Quick Downloads|here]] and follow the instructions in the README to get in-browser Javascript running.
 
=== node.js ===
 
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.
 
Download our Javascript examples [[#Quick Downloads|here]].
 
In the terminal, navigate to the folder that contains the Phidgets Javascript examples. There, type the following command:
 
{{Code|npm update}}
 
This will cause the package manager to look at {{Code|package.json}} and update the Phidgets libraries.
 
Follow the README in the Javascript libraries to get the Phidget network server running.
 
In the terminal, navigate to the folder that contains the Phidgets Javascript examples and type
 
{{Code|node <example> <address>}}
 
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}}
 
This should result in a simple text-based example to be launched inside the terminal.


== Edit the Examples ==
== Edit the Examples ==
{{WriteCode_Intro|JavaScript}}


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.
=== Step One: Connect===
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.
In Javascript, you must first connect to the Phidget server using the {{Code|Connection}} object. Have a look at the Connection API for more details: {{Phidget22API}} -> Select JavaScript then select Connection API.
 
=== Code Snippets ===
 
==== Step One: Connect====
In Javascript, you must first connect to the Phidget server using the {{Code|Connection}} object.


<syntaxhighlight lang=javascript>
<syntaxhighlight lang=javascript>
function main() {
function main() {
 
    var conn = new phidget22.Connection(5661, 'localhost');
...
    conn.connect().then(function () {
 
        console.log("Connected");
var conn = new jPhidget22.Connection(url, { name: n, passwd: p });
        runCode();
conn.connect()
    }).catch(function (err) {
  .then(runCode);
        console.error("Failed to connect", err);
    });
}
}
</syntaxhighlight>
</syntaxhighlight>


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.
Once a connection has been established, it will stay active until it is closed, even across network outages and server restarts.


==== Step Two: Create and Open====
Multiple Connections can be created and connected at once. Any opened Phidget or Manager objects  will match against devices on all connections.


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.
=== Step Two: Create and Open===
After connecting, create a new channel object of the correct channel class, then call the {{Code|open()}} function to open the channel. 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:
For example, if we were using an Digital Input as our device, it would look like this:
Line 294: Line 167:


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


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


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


</syntaxhighlight>
</syntaxhighlight>


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 :
Once the channel successfully opens, you can access it and you will start to get events from it. We can define the event handler functions :


<syntaxhighlight lang=javascript>
<syntaxhighlight lang=javascript>


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


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


Line 325: Line 197:
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.
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:
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 331: Line 203:


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


</syntaxhighlight>
</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.
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 via the Phidget Server. It's not necessary to delete the object after closing in Javascript.


<syntaxhighlight lang=javascript>
<syntaxhighlight lang=javascript>
Line 346: Line 216:


== Further Reading ==
== 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.
[[Phidget Programming Basics]] - Here you can find the basic concepts to help you get started with making your own programs that use Phidgets.


Revision as of 16:18, 9 April 2018

Quick Downloads

Documentation

Libraries

Example Code

Tools

OS Libraries

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.

Version Change

Note: The Phidgets JavaScript library has been bumped to version 2.x.x following a rewrite. The version 2 API is mostly identical to version 1, but does have some breaking changes. It is highly recommended that any code written against version 1 be updated to version 2, as version 1 is considered unstable.

Phidget Network Server

The JavaScript library requires the Phidget Network Server. Start by configuring the server for your OS:

The Phidget Server includes a built-in Webserver. This must be enabled when using the JavaScript library in browser, but can be left disabled when using the library from Node.js.

The Phidget Server Webserver can be used to serve files - such as the Phidget JavaScript library, or your own projects. By default, it serves the JavaScript control panel files. The main purpose of the Webserver is to support a Websockets connection for the Browser library - because regular sockets cannot be used in Browser. The Node.js library uses raw sockets to connect to the Phidget Server, and so does not require the Webserver or Websockets.

JavaScript Control Panel

The JavaScript control panel is a Browser version of our Phidget control panel. This can be used to view and control all Phidgets attached to a Phidget server. The JavaScript control panel is installed by default on Windows, macOS and PhidgetSBC. You can also download the source here.

Make sure the Phidget Server - Webserver is enabled, and running, then 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.

Javascript windows controlpanel.png

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 available here.

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 empty folder.

Next, download the latest JavaScript browser library from here and copy the files into the folder.

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

<!DOCTYPE html>
<html>
<head>
    <title>Phidget Manager</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="sha256.min.js"></script>
    <script src="phidget22.min.js"></script>
    <script>
        $(document).ready(function() {
            var conn = new phidget22.Connection(8989, 'localhost');

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

            var man = new phidget22.Manager({
                onDeviceAttach: function(dev) {
                    $('#list').append(new Option(dev.getDeviceName(), dev.getKey()));
                },
                onDeviceDetach: function(dev) {
                    $("#list option[value='" + dev.getKey() + "']").remove();
                }
            });
            man.open();
        });
    </script>
</head>

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

This code uses the Phidget Manager to list any Phidget accessible from your computer (either directly via USB or indirectly over the network).

Finally, double click index.html to open it in a browser. You should see something like this:

Javascript windows example.png

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

Javascript windows devconsole.png

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:

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

npm update

Javascript windows npmupdate.png

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

node Accelerometer localhost
Javacsript windows nodeexample.png

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. Have a look at the Connection API for more details: Phidget22 API -> Select JavaScript then select Connection API. 

function main() {
    var conn = new phidget22.Connection(5661, 'localhost');
    conn.connect().then(function () {
        console.log("Connected");
        runCode();
    }).catch(function (err) {
        console.error("Failed to connect", err);
    });
}

Once a connection has been established, it will stay active until it is closed, even across network outages and server restarts.

Multiple Connections can be created and connected at once. Any opened Phidget or Manager objects will match against devices on all connections.

Step Two: Create and Open

After connecting, create a new channel object of the correct channel class, then call the open() function to open the channel. 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 phidget22.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 channel 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

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 via the Phidget Server. It's not necessary to delete the object after closing in Javascript. 

ch.close();

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.

Data Interval/Change Trigger - Learn about these two properties that control how much data comes in from your sensors.

Using Multiple Phidgets - It can be difficult to figure out how to use more than one Phidget in your program. This page will guide you through the steps.

Polling vs. Events - Your program can gather data in either a polling-driven or event-driven manner. Learn the difference to determine which is best for your application.

Logging, Exceptions, and Errors - Learn about all the tools you can use to debug your program.

Phidget Network Server - Phidgets can be controlled and communicated with over your network- either wirelessly or over ethernet.

Retrieved from "http:///docs/index.php?title=Language_-_JavaScript&oldid=29024"