Language - JavaScript Browser - Revision history

Mparadis: Redirected page to Language - JavaScript

2021-03-15T17:01:34Z

Redirected page to Language - JavaScript

← Older revision		Revision as of 17:01, 15 March 2021
Line 1:		Line 1:
	~~{{NoTitle}}~~		#REDIRECT [[Language - JavaScript]]
	{\|
	~~\|style="vertical-align:middle; width: 60%;"\|~~
	~~<font size=6>'''Language - JavaScript'''~~

	~~'''JavaScript with Browser'''</font>~~

	~~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.~~
	~~\|{{TOC limit\|2}}~~
	\|}

	~~==Install Phidget Drivers for JavaScript in Browser==~~
	~~Before getting started with the guides below, ensure you have the following components installed on your machine:~~

	# ~~You will need the~~ [[~~Operating_System_Support\|Phidgets Drivers]] installed on the server machine~~
	~~# You will need the [{{SERVER}}/downloads/phidget22/libraries/any/Phidget22JavaScript.zip Phidgets JavaScript Library for Browsers]~~


	~~=== Version Change ===~~
	'''Note:''' 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.

	~~== Phidget Network Server ==~~
	~~The JavaScript library requires the Phidget Network Server. Go to the [[Phidget Network Server]] page for instructions on enabling the server for your OS.~~

	~~The Phidget Network 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. If you're on Windows or Mac, you can enable the Webserver in the Phidget Control Panel:~~

	~~[[Image:enable_webserver.jpg\|800px\|link=~~]]

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

	~~<code>/etc/phidgets/phidget22networkserver.pc</code>~~

	~~by changing '''enabled''' to 'true' in the '''www''' section.~~

	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.

	~~== 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 [{{SERVER}}/downloads/phidget22/tools/any/Phidget22JavaScriptControlPanel.zip here].

	Make sure the Phidget Server - Webserver is enabled, and running, then navigate to http://localhost:8989. 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_windows_controlpanel.png\|link=\|center]]~~

	~~==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 available [{{SERVER}}?view=code_samples&lang=JavaScript&os=Browser here].~~

	~~== 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 empty folder.~~

	~~Next, download the latest JavaScript browser library from [{{SERVER}}/downloads/phidget22/libraries/any/Phidget22JavaScript.zip here] and copy the files into the folder.~~

	~~Next, create a file called ''index.html'' and copy the following code into it (Note: if you have a newer jQuery, modify the code below to match your version):~~

	~~<syntaxhighlight lang=javascript>~~
	~~<!DOCTYPE html>~~
	~~<html>~~
	~~<head>~~
	~~<title>Phidget Manager</title>~~
	~~<script src="jquery-2.1.4.min.js"></script>~~
	~~<script src="sha256.min.js"></script>~~
	~~<script src="phidget22.min.js"></script>~~
	~~<script>~~
	~~$(document).ready(function() {~~
	~~var conn = new phidget22.Connection(8989, 'localhost');~~

	~~conn.connect().then(function() {~~
	~~console.log('connected');~~
	~~}).catch(function(err) {~~
	~~conn.delete();~~
	~~alert('failed to connect to server:' + err);~~
	~~});~~

	~~var man = new phidget22.Manager({~~
	~~onDeviceAttach: function(dev) {~~
	~~$('#list').append(new Option(dev.getDeviceName(), dev.getKey()));~~
	},
	~~onDeviceDetach: function(dev) {~~
	~~$("#list option[value='" + dev.getKey() + "']").remove();~~
	}
	~~});~~
	~~man.open();~~
	~~});~~
	~~</script>~~
	~~</head>~~

	~~<body>~~
	~~<label> Attached Phidgets: </label>~~
	~~<div>~~
	~~<select multiple id="list" style="width: 500px; height: 200px"></select>~~
	~~</div>~~
	~~</body>~~
	~~</html>~~
	~~</syntaxhighlight>~~

	~~This code uses the [[Phidget Manager]] to list any Phidget accessible from your computer (either directly via USB or indirectly over the network).~~

	~~Finally, double click index.html to open it in a browser. You should see something like this:~~
	~~[[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]]~~

	~~{{Language Page What's Next}}~~

Mparadis: /* Phidget Network Server */

2021-03-05T17:28:18Z

Phidget Network Server

← Older revision		Revision as of 17:28, 5 March 2021
Line 23:		Line 23:

	== Phidget Network Server ==		== Phidget Network Server ==
	The JavaScript library requires the [[Phidget Network Server]]~~. Start by configuring~~ the server for your OS:		The JavaScript library requires the Phidget Network Server. Go to the [[Phidget Network Server]] page for instructions on enabling the server for your OS.

	* [[OS - Windows#Phidget Network Server\|Windows]]		The Phidget Network 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. If you're on Windows or Mac, you can enable the Webserver in the Phidget Control Panel:
	* [[OS - OS X#Phidget Network Server\|macOS]]
	* [[OS - Linux#Phidget ~~Network Server\|Linux]]~~
	* [[OS - Phidget SBC#Phidget Network Server\|PhidgetSBC]]

	~~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.		[[Image:enable_webserver.jpg\|800px\|link=]]

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

			<code>/etc/phidgets/phidget22networkserver.pc</code>

			by changing '''enabled''' to 'true' in the '''www''' section.

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

Mparadis at 17:16, 17 February 2021

2021-02-17T17:16:40Z

← Older revision		Revision as of 17:16, 17 February 2021
Line 102:		Line 102:
	Open the developer console to get a better idea what is going on:		Open the developer console to get a better idea what is going on:
	[[File:Javascript_windows_devconsole.png\|link=\|center]]		[[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.~~

	{{Language Page What's Next}}		{{Language Page What's Next}}

Jdecoux at 15:27, 17 October 2019

2019-10-17T15:27:00Z

Show changes

Mparadis at 19:16, 13 December 2018

2018-12-13T19:16:53Z

← Older revision		Revision as of 19:16, 13 December 2018
Line 1:		Line 1:
			[[Category:Language]]
	{{NoTitle}}		{{NoTitle}}
	{{Language_-_JavaScript_Dev_Environment_Table}}		{{Language_-_JavaScript_Dev_Environment_Table}}

Mparadis at 20:53, 19 October 2018

2018-10-19T20:53:31Z

← Older revision		Revision as of 20:53, 19 October 2018
Line 13:		Line 13:
	\|}		\|}

	~~{{Language_~~-~~_JavaScript_Intro~~\|Windows\|~~Visual Studio~~}}		==Install Phidget Drivers==
			Before getting started with the guides below, ensure you have the following components installed on your machine:

			* You will need the Phidgets drivers installed (choose your OS):
			** [[OS_-_Windows#Quick_Downloads\|Windows Drivers]]
			** [[OS_-_macOS#Quick_Downloads\|macOS Drivers]]
			** [[OS_-_Linux#Quick_Downloads\|Linux Drivers]]

			== Use Our Examples ==
			One of the best ways to start programming with Phidgets is to use our example code as a guide:
			* [{{SERVER}}?view=code_samples&lang=JavaScript&os=Browser JavaScript Browser Examples]

			== Editing the Examples ==

			== Write Code ==

			== Setting up a New Project ==

			== 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.

Mparadis at 21:29, 18 October 2018

2018-10-18T21:29:38Z

← Older revision		Revision as of 21:29, 18 October 2018
Line 3:		Line 3:
	{\|		{\|
	\|style="vertical-align:middle; width: 60%;"\|		\|style="vertical-align:middle; width: 60%;"\|
	<font size=6>'''Language - C#'''		<font size=6>'''Language - JavaScript'''

	'''~~JavaScript in~~ Browser'''</font>		'''In-Browser'''</font>

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

Mparadis: Created page with "{{NoTitle}} {{Language_-_JavaScript_Dev_Environment_Table}} {| |style="vertical-align:middle; width: 60%;"| '''Language - C#''' '''JavaScript in Browser'''
2018-10-18T21:27:37Z

Created page with "{{NoTitle}} {{Language_-_JavaScript_Dev_Environment_Table}} {| |style="vertical-align:middle; width: 60%;"| <font size=6>'''Language - C#''' '''JavaScript in Browser'''</font..."

New page
{{NoTitle}}
{{Language_-_JavaScript_Dev_Environment_Table}}
{|
|style="vertical-align:middle; width: 60%;"|
<font size=6>'''Language - C#'''

'''JavaScript in Browser'''</font>

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

Running your JavaScript program in a browser is accessible and can be done in Windows, macOS, or Linux.
|{{TOC limit|2}}
|}

{{Language_-_JavaScript_Intro|Windows|Visual Studio}}