Language - JavaScript: Difference between revisions

From Phidgets Support
No edit summary
No edit summary
 
(17 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<metadesc>Communicate over USB with sensors, controllers and relays with Phidgets! Our Visual Basic .NET library supports Windows using Visual Studio or Mono.</metadesc>
[[Category:Language]]
[[Category:Language]]
__TOC__
__NOTOC__
We provide support for the JavaScript language for both browsers and node.js. We also provide instructions on how to get your project started in a number of common development environments. Select your operating system and preferred development environment below, and follow the instructions to get your project running with Phidgets.


== Quick Downloads ==
General information of how to use Phidgets with JavaScript can be found in the '''Write Code''' section of each development environment page. This information is consistent across all pages.
=== Documentation ===


*{{Phidget22API}} (Select JavaScript from drop-down menu)
==Setup Guide==


=== Example Code ===
<div class="phd-deck-sequence">
{{PT3_JS_CHOOSE}}{{PT3_JS_ANY_BROWSER}}{{PT3_JS_ANY_NODE}}
</div>


*{{SampleCode|JavaScript|JavaScript Examples (Node.js)}}
*[{{SERVER}}/downloads/phidget22/tools/any/Phidget22JavaScriptControlPanel.zip Javascript Examples (HTML)]


=== Libraries ===
== Quick Downloads ==
If you already know what you're doing and just need the files, you can find them all below.


*[{{SERVER}}/downloads/phidget22/libraries/any/Phidget22JavaScript.zip JavaScript Library Download]
=== Documentation ===
{{AllQuickDownloads}}


== Getting Started with JavaScript ==
*{{Phidget22API}} (Select JavaScript from drop-down menu)
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.


If you are developing for Windows, keep reading. Otherwise, select your operating system to jump ahead:
=== Libraries ===
*[[#macOS | macOS]]
*[[#Linux | Linux]]


== Windows ==
*'''Browser''': [https://cdn.phidgets.com/downloads/phidget22/libraries/any/Phidget22JavaScript.zip JavaScript Library Download]
{{Windows_Languages}}
*'''Node.js''': npm install phidget22


===Browser===
=== Example Code ===
====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:Windows_networkserver.PNG|link=|center]]


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


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):
=== Tools ===
[[File:Javascript_windows_localhost.png|link=|center]]


*[https://cdn.phidgets.com/downloads/phidget22/tools/any/Phidget22JavaScriptControlPanel.zip JavaScript Control Panel Source]


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:
=== OS Libraries ===
[[File:Javascript_windows_controlpanel.png|link=|center]]


 
{{AllQuickDownloads}}
To view the source code that drives the examples, navigate to the following location:
*C:/Program Files/Phidgets/Phidget22/html
 
 
[[File:Javascript_windows_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_windows_folderlibraries.png|link=|center]]
 
 
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):
 
<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 windows 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_windows_docrootchange.png|link=|center]]
 
 
Finally, click on the hyperlink to see the example (or navigate to http://localhost:8989):
[[File:Javascript_windows_example.png|link=|center]]
 
 
Open the developer console to get a better idea what is going on:
[[File:Javascript_windows_devconsole.png|link=|center]]
 
 
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].
 
 
Now that you have Node.js installed, select an example that will work with your Phidget:
*{{SampleCode|JavaScript|JavaScript Examples}}
 
 
Next, navigate to the Network Server tab in the Phidget Control Panel and press the ''Start'' button after ensuring the Webserver is enabled (''Enabled'' checkbox in ''Webserver'' section).
[[File:Windows_networkserver.PNG|link=|center]]
 
 
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]]
 
 
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]]
 
 
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]]
 
 
To view the source code that drives the examples, navigate to the following location:
*/Library/Application Support/Phidgets/Phidget22NetworkServer/html
 
 
[[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:
*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):
 
<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}}
 
 
Next, navigate to the Network Server tab in the Phidget Control Panel and press the ''Start Network Server'' button after ensuring the Webserver is enabled (''Enabled'' checkbox in ''Webserver'' section).
[[File:Macos_networkserver_run.png|link=|center]]
 
 
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>
 
[[File:Javascript_macos_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: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 ===
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 ==
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 Objective-C code will be the {{Phidget22API}} Manual and the example code.
 
=== Step One: Connect===
In Javascript, you must first connect to the Phidget server using the {{Code|Connection}} object.
 
<syntaxhighlight lang=javascript>
 
function main() {
 
...
 
var conn = new jPhidget22.Connection(url, { name: n, passwd: p });
conn.connect()
  .then(runCode);
}
 
</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.
 
=== 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.
 
For example, if we were using an Digital Input as our device, it would look like this:
 
<syntaxhighlight lang=javascript>
 
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
});
 
}
 
</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 :
 
<syntaxhighlight lang=javascript>
 
function digitalInput_attach(ch) {
console.log(ch + ' attached');
}
 
function digitalInput_change(state) {
console.log('state changed:' + state);
}
 
</syntaxhighlight>
 
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 ===
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:
 
<syntaxhighlight lang=javascript>
 
var di_state = ch.getState(); // get the state of the digital input
 
ch.setState(1); // set the state of the digital input
 
</syntaxhighlight>
 
=== 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.
 
<syntaxhighlight lang=javascript>
 
ch.close();
</syntaxhighlight>
 
== 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.

Latest revision as of 22:16, 17 October 2023


We provide support for the JavaScript language for both browsers and node.js. We also provide instructions on how to get your project started in a number of common development environments. Select your operating system and preferred development environment below, and follow the instructions to get your project running with Phidgets.

General information of how to use Phidgets with JavaScript can be found in the Write Code section of each development environment page. This information is consistent across all pages.

Setup Guide

JavaScript - Select Development Environment

Select your Development Environment:

Any OS

Language - JavaScript

JavaScript in Browser

Welcome to using Phidgets with JavaScript! By using JavaScript, you will have access to the complete Phidget22 API, including events.

Using JavaScript with a browser provides a good way to create a powerful web interface for your Phidgets programs.

Requirements

First, make sure you have the following installed:

● Phidgets Drivers on the computer that will be running the server (see Part 1 of this user guide)

● The Phidgets JavaScript Library for Browsers


Version History

1.x.x - Initial Release (unstable- highly recommend updating to 2.x.x or newer)

2.x.x - Fixed stability issues

3.x.x - Added WebUSB support for VINT devices

Each release has potential breaking changes, so you should always revisit your code when updating to a new major release.

Phidget Network Server

The Phidgets JavaScript library requires the Phidget Network Server. Go to the page below and select the tab with your OS to get the Network Server set up:

● Phidget Network Server


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.

Phidget Network Server

If you're on Windows or Mac, you can enable the Webserver in the Phidget Control Panel:

If you're using Linux, you can enable it in the Network Server config file located at:

/etc/phidgets/phidget22networkserver.pc

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. (If you changed the port setting on the Webserver, replace '8989' with your selected port)

JavaScript Control Panel

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.

Use Our Examples

Now that you've confirmed the webserver is running properly by testing your Phidgets through the JavaScript Control Panel, you can try running some of our sample code:

● JavaScript Browser Examples

Download the example(s) that correspond to your Phidget's channel classes. You can find them listed on the enclosure in most cases, or on the API tab of the product page.

Use Our Examples

Unpack the example and double click on the HTML file to open a simple graphical example.

If there are any issues, open the browser's developer console to see if there are any warnings or errors. If your Web Server is configured with a port or hostname other than the default (localhost, 8989), you'll have to update the code in the HTML file.

Write Your Own Code

To write your own JavaScript code, we recommend that you download one of the examples to use as a starting point. You can also start from scratch in a new HTML file- all you need is a copy of phidget22.min.js and sha256.min.js in the same folder. You can find these files packaged with our examples, or downloaded here.

What's Next?

Now that you've set up Phidgets in your programming environment, you should read our guide on Phidget Programming Basics to learn the fundamentals of programming with Phidgets.

Continue reading below for advanced information and troubleshooting for your device.

«
»

Language - JavaScript

JavaScript in Node.js

Welcome to using Phidgets with JavaScript! By using JavaScript, you will have access to the complete Phidget22 API, including events.

Node.js is an open-source, cross-platform JavaScript run-time environment that allows programs written in JavaScript to be run locally.

Requirements

First, make sure you have the following installed:

● Phidgets Drivers on the computer that will be running the server (see Part 1 of this user guide)

● Node.js


Version History

1.x.x - Initial Release (unstable- highly recommend updating to 2.x.x or newer)

2.x.x - Fixed stability issues

3.x.x - Added WebUSB support for VINT devices

Each release has potential breaking changes, so you should always revisit your code when updating to a new major release.

JavaScript using the Phidget Network Server

Go to the this page and select the tab with your OS to get the Network Server set up.

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.

In order to connect remotely, you need to use the NetworkConnection object. When you download a code sample later in this guide, make sure the Remote box is checked.

JavaScript using WebUSB

For library version 3.x.x or newer, you can connect to Phidgets plugged in locally via USB without having the Network Server running. This feature is only supported on VINT Phidgets.

In order to connect using USB, you need to use the USBConnection object. When you download a code sample later in this guide, make sure the Remote box is unchecked.

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. (If you changed the port setting on the Webserver, replace '8989' with your selected port)

JavaScript Control Panel

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.

Using the Code Samples

Now that you've confirmed the webserver is running properly by testing your Phidgets through the JavaScript Control Panel, you can try running some of our sample code. On the Code Samples page and select your device from the drop-down menu.

Using the Code Samples

If it's unclear what any of the options do, click on the nearby '?' for more info.

Once you've made your selections, click the Download Example button to download a sample script.

Using the Code Samples

Next, unpack the example and open the command prompt in the folder you extracted to and enter the following commands:

npm install phidget22
npm update

Then enter the following command to run the example (replacing example.js with your example name):

node example.js

Success! Your program is now running with Phidgets.

What's Next?

Now that you've set up Phidgets in your programming environment, you should read our guide on Phidget Programming Basics to learn the fundamentals of programming with Phidgets.

Continue reading below for advanced information and troubleshooting for your device.

«
»


Quick Downloads

If you already know what you're doing and just need the files, you can find them all below.

Documentation

Libraries

Example Code

Tools

OS Libraries

Retrieved from "https://www.phidgets.com/docs/index.php?title=Language_-_JavaScript&oldid=34163"