Template:PT3 JS ANY BROWSER

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, install the Phidgets JavaScript Library for Browsers.

If you're on MacOS and plan on using any USB Phidgets that use the HID stack, you'll need to install the Phidget drivers for MacOS. You can check which stack your USB Phidgets use by checking the 'USB Stack' in the product specifications. If all of your Phidgets use the PHIDUSB stack or you're on Windows or Linux, you can skip installing the drivers since they're packaged with the Javascript libraries.

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 in the same folder. You can find a copy packaged with our examples, or you can download it 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.

«

»