|
|
| Line 6: |
Line 6: |
| 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. | | 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. |
|
| |
|
| ==Choose Your Development Environment:== | | ==Setup Guide== |
| | |
| | <div class="phd-deck-sequence"> |
| | {{PT3_JS_CHOOSE}}{{PT3_JS_ANY_BROWSER}}{{PT3_JS_ANY_NODE}} |
| | </div> |
|
| |
|
| {{Language_-_JavaScript_Dev_Environment_Table}}
| |
|
| |
|
| == Quick Downloads == | | == Quick Downloads == |
Revision as of 16:31, 15 March 2021
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
Select your Development Environment:
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.
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
