Template:PT3 JS ANY NODE - Revision history

Mparadis at 21:34, 17 December 2024

2024-12-17T21:34:07Z

← Older revision		Revision as of 21:34, 17 December 2024
Line 19:		Line 19:
	<h2>Requirements</h2>		<h2>Requirements</h2>

	<p>~~First~~, ~~make sure~~ you ~~have~~ the ~~following installed~~:</p>		<p>
			If you're on MacOS and plan on using any USB Phidgets that use the HID stack, you'll need to install the
	~~<p>●~~ Phidgets ~~Drivers~~ on the ~~computer that will be running~~ the ~~server (see Part 1 of this user guide)~~</p>		<span>[https://www.phidgets.com/docs/OS_-_macOS Phidget drivers for MacOS]</span>. 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.
			</p>

	<p>● <span>[https://nodejs.org/ Node.js]</span></p>		<p>● <span>[https://nodejs.org/ Node.js]</span></p>
Line 65:		Line 68:
	<p>		<p>
	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		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.		supported on Phidgets that use the PHIDUSB stack. You can see which stack your USB Phidgets use by checking the specifications table.
	</p>		</p>

Mparadis at 21:43, 22 April 2022

2022-04-22T21:43:01Z

← Older revision		Revision as of 21:43, 22 April 2022
Line 27:		Line 27:
	<br />		<br />

	<h2>Version ~~Change~~</h2>		<h2>Version History</h2>

	<p>		<p><b>1.x.x</b> - Initial Release (unstable- highly recommend updating to 2.x.x or newer)</p>
	<b>~~Note:~~</b> ~~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~~.		<p><b>2.x.x</b> - Fixed stability issues</p>
	</p>
			<p><b>3.x.x</b> - Added WebUSB support for VINT devices</p>

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

	<div class="phd-slide">		<div class="phd-slide">
	<h2>Phidget Network Server</h2>		<h2>JavaScript using the Phidget Network Server</h2>

	<p>		<p>
	~~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:		Go to the <span>[https://www.phidgets.com/docs/Phidget_Network_Server#Using_The_Network_Server this page]</span> and select the tab with your OS to get the
			Network Server set up.
	</p>		</p>

	~~<p>● <span>[https://www.phidgets.com/docs/Phidget_Network_Server#Using_The_Network_Server Phidget Network Server]</span></p>~~

	~~<br />~~

	<p>		<p>
Line 53:		Line 53:
	<p>		<p>
	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		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		control panel files.
	~~Browser~~. ~~The Node.js library uses raw sockets~~ to connect to the ~~Phidget Server~~, ~~and so does not require~~ the ~~Webserver or Websockets~~.		</p>

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

			<h2>JavaScript using WebUSB</h2>

			<p>
			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.
			</p>

			<p>
			In order to connect using USB, you need to use the <b>USBConnection</b> object. When you download a code sample later in this guide, make sure the
			<b>Remote</b> box is unchecked.
	</p>		</p>
	</div>		</div>
Line 102:		Line 118:
	<p>Once you've made your selections, click the <b>Download Example</b> button to download a sample script.</p>		<p>Once you've made your selections, click the <b>Download Example</b> button to download a sample script.</p>

	<div class="phd-lazy-image" data-src="https://www.phidgets.com/decks/PT3_JS_ANY_NODE/-~~x320~~/50/JavaScript_Sample_Code_Download.png"></div>		<div class="phd-lazy-image" data-src="https://www.phidgets.com/decks/PT3_JS_ANY_NODE/-x310/50/JavaScript_Sample_Code_Download.png"></div>
	</div>		</div>

Mparadis: Created page with "

Language - JavaScript

2021-03-08T21:44:05Z

Created page with "<div class="phd-slide-deck" data-deck="PT3_JS_ANY_NODE"> <div class="phd-slide-deck-header"><h3>Language - JavaScript</h3></div> <div class="phd-slides"> <div class="phd-slide..."

New page
<div class="phd-slide-deck" data-deck="PT3_JS_ANY_NODE">
<div class="phd-slide-deck-header"><h3>Language - JavaScript</h3></div>
<div class="phd-slides">
<div class="phd-slide">
<h2>JavaScript in Node.js</h2>

<div class="phd-panels">
<div class="phd-panel phd-flex-column-align-center phd-flex-column-justify-middle">
<div class="phd-lazy-image" data-src="https://www.phidgets.com/decks/PT3_JS_ANY_NODE/200x-/50/node.jpg"></div>
</div>
<div class="phd-panel phd-flex-column-align-left phd-flex-column-justify-top">
<p>Welcome to using Phidgets with JavaScript! By using JavaScript, you will have access to the complete Phidget22 API, including events.</p>
<p>Node.js is an open-source, cross-platform JavaScript run-time environment that allows programs written in JavaScript to be run locally.</p>
</div>
</div>
</div>

<div class="phd-slide">
<h2>Requirements</h2>

<p>First, make sure you have the following installed:</p>

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

<p>● <span>[https://nodejs.org/ Node.js]</span></p>

<br />

<h2>Version Change</h2>

<p>
<b>Note:</b> 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.
</p>
</div>

<div class="phd-slide">
<h2>Phidget Network Server</h2>

<p>
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:
</p>

<p>● <span>[https://www.phidgets.com/docs/Phidget_Network_Server#Using_The_Network_Server Phidget Network Server]</span></p>

<br />

<p>
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.
</p>

<p>
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.
</p>
</div>

<div class="phd-slide">
<h2>JavaScript Control Panel</h2>

<p>
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
<span>[https://www.phidgets.com/downloads/phidget22/tools/any/Phidget22JavaScriptControlPanel.zip here]</span>.
</p>

<p>
Make sure the Phidget Server - Webserver is enabled, and running, then navigate to <span>[http://localhost:8989/ http://localhost:8989]</span>. (If you changed
the port setting on the Webserver, replace '8989' with your selected port)
</p>
</div>

<div class="phd-slide">
<h2>JavaScript Control Panel</h2>

<p>
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.
</p>

<div class="phd-lazy-image" data-src="https://www.phidgets.com/decks/PT3_JS_ANY_NODE/-x325/50/Javascript_windows_controlpanel.jpg"></div>
</div>

<div class="phd-slide">
<h2>Using the Code Samples</h2>

<p>
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 <span>[https://www.phidgets.com/?view=code_samples&lang=JavaScript Code Samples]</span> page and select your device from the drop-down menu.
</p>

<div class="phd-lazy-image" data-src="https://www.phidgets.com/decks/PT3_JS_ANY_NODE/JavaScript_sample_code.png"></div>
</div>

<div class="phd-slide">
<h2>Using the Code Samples</h2>

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

<p>Once you've made your selections, click the <b>Download Example</b> button to download a sample script.</p>

<div class="phd-lazy-image" data-src="https://www.phidgets.com/decks/PT3_JS_ANY_NODE/-x320/50/JavaScript_Sample_Code_Download.png"></div>
</div>

<div class="phd-slide">
<h2>Using the Code Samples</h2>

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

<div class="phd-command-line"><code>npm install phidget22</code></div>

<div class="phd-command-line"><code>npm update</code></div>

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

<div class="phd-command-line"><code>node example.js</code></div>

<p>Success! Your program is now running with Phidgets.</p>
</div>

<div class="phd-slide">
<h2>What's Next?</h2>

<p>{{Slide_Deck_PT3_Outro}}</p>
</div>
</div>

<div class="phd-navigation-buttons">
<div class="phd-simple-button phd-to-slide-button" data-navigation-direction="prev">«</div>
<div class="phd-progress-container">
<div class="phd-progress-bar">
<div class="phd-progress-slide-info"></div>
</div>
</div>

<div class="phd-simple-button phd-to-slide-button" data-navigation-direction="next">»</div>
</div>
<div hidden class="phd-hidden-breadcrumb-label" data-label="Node.js"></div>
</div>