Mparadis at 23:19, 3 January 2025

2025-01-03T23:19:35Z

Mparadis at 21:33, 17 December 2024

2024-12-17T21:33:35Z

Mparadis at 21:46, 22 April 2022

2022-04-22T21:46:14Z

Mparadis: Created page with "

Language - JavaScript

2021-03-08T21:43:41Z

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

New page
<div class="phd-slide-deck" data-deck="PT3_JS_ANY_BROWSER">
<div class="phd-slide-deck-header"><h3>Language - JavaScript</h3></div>
<div class="phd-slides">
<div class="phd-slide">
<h2>JavaScript in Browser</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_BROWSER/200x-/50/browser.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>Using JavaScript with a browser provides a good way to create a powerful web interface for your Phidgets programs.</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>● The <span>[https://www.phidgets.com/downloads/phidget22/libraries/any/Phidget22JavaScript.zip Phidgets JavaScript Library for Browsers]</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>Phidget Network Server</h2>

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

<div class="phd-lazy-image" data-src="https://www.phidgets.com/decks/PT3_JS_ANY_BROWSER/-x275/50/enable_webserver.jpg"></div>

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

<div class="phd-command-line"><code>/etc/phidgets/phidget22networkserver.pc</code></div>
</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_BROWSER/-x325/50/Javascript_windows_controlpanel.jpg"></div>
</div>

<div class="phd-slide">
<h2>Use Our Examples</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:
</p>

<p>● <span>[https://www.phidgets.com/?view=code_samples&lang=JavaScript&os=Browser JavaScript Browser Examples]</span></p>

<p>
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 <b>API</b> tab of
the product page.
</p>

<div class="phd-lazy-image" data-src="https://www.phidgets.com/decks/PT3_JS_ANY_BROWSER/-x230/50/channelclass.jpg"></div>
</div>

<div class="phd-slide">
<h2>Use Our Examples</h2>

<p>Unpack the example and double click on the HTML file to open a simple graphical example.</p>

<div class="phd-lazy-image" data-src="https://www.phidgets.com/decks/PT3_JS_ANY_BROWSER/-x270/50/browserexample.jpg"></div>

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

<div class="phd-slide">
<h2>Write Your Own Code</h2>

<p>
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 <b>phidget22.min.js</b> and <b>sha256.min.js</b> in the same folder. You can find these files packaged with our examples, or
downloaded <span>[https://www.phidgets.com/downloads/phidget22/libraries/any/Phidget22JavaScript.zip here]</span>.
</p>

<div class="phd-lazy-image" data-src="https://www.phidgets.com/decks/PT3_JS_ANY_BROWSER/-x270/50/examplefolder.jpg"></div>
</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="Web Browser"></div>
</div>

Template:PT3 JS ANY BROWSER - Revision history

Mparadis at 23:19, 3 January 2025

Mparadis at 21:33, 17 December 2024

Mparadis at 21:46, 22 April 2022