Google Apps Script and Phidgets - Revision history

Lmpacent: /* Introduction */

2025-06-18T22:11:15Z

Introduction

← Older revision		Revision as of 22:11, 18 June 2025
Line 4:		Line 4:
	[[Image:Google_Apps_Script.png\|400px\|link=\|thumb\|<center>Google Apps Script</center>]]		[[Image:Google_Apps_Script.png\|400px\|link=\|thumb\|<center>Google Apps Script</center>]]
	==Introduction==		==Introduction==
	Phidgets provides a JavaScript library for browser and Node.js applications. In this project, we'll create a ~~web~~ application using Google Apps Script and log data from a Light Phidget to a Google Sheets spreadsheet.		Phidgets provides a JavaScript library for browser and Node.js applications. In this project, we'll create a browser application using Google Apps Script and log data from a Light Phidget to a Google Sheets spreadsheet.
	===References===		===References===
	[https://developers.google.com/apps-script/guides/web Apps Script - Web Apps Guide]		[https://developers.google.com/apps-script/guides/web Apps Script - Web Apps Guide]

Lmpacent: /* Connect Phidget Devices */

2025-06-16T23:01:13Z

Connect Phidget Devices

← Older revision		Revision as of 23:01, 16 June 2025
Line 13:		Line 13:

	==Connect Phidget Devices==		==Connect Phidget Devices==
	In this project, we will be using the [{{SERVER}}/?prodid=707 Light Phidget (LUX1000_0)] connected to a [{{SERVER}}/?prodid=1289 VINT Hub Phidget].		In this project, we will be using the [{{SERVER}}/?prodid=707 Light Phidget (LUX1000_0)] connected to a [{{SERVER}}/?prodid=1289 VINT Hub Phidget (HUB0002_0)].

	[[Image:LUX1000_setup_whitecable.jpg\|600px\|link=]]		[[Image:LUX1000_setup_whitecable.jpg\|600px\|link=]]

Lmpacent: /* Connect Phidget Devices */

2025-06-16T23:00:20Z

Connect Phidget Devices

← Older revision		Revision as of 23:00, 16 June 2025
Line 13:		Line 13:

	==Connect Phidget Devices==		==Connect Phidget Devices==
	In this project, we will be using the [{{SERVER}}/?prodid=707 Light ~~Sensor~~ Phidget (LUX1000_0)] connected to a [{{SERVER}}/?prodid=1289 VINT Hub Phidget].		In this project, we will be using the [{{SERVER}}/?prodid=707 Light Phidget (LUX1000_0)] connected to a [{{SERVER}}/?prodid=1289 VINT Hub Phidget].

	[[Image:LUX1000_setup_whitecable.jpg\|600px\|link=]]		[[Image:LUX1000_setup_whitecable.jpg\|600px\|link=]]

Lmpacent: /* USB vs Network Server Connection */

2025-04-16T21:26:31Z

USB vs Network Server Connection

← Older revision		Revision as of 21:26, 16 April 2025
Line 122:		Line 122:

	====USB vs Network Server Connection====		====USB vs Network Server Connection====
	When using the Phidgets with JavaScript, you can connect to devices directly via USB or through the Phidget Network Server. Depending on what you choose, this line of code will change:		When using the Phidgets with JavaScript, you can connect to devices directly via USB or remotely through the Phidget Network Server. Depending on what you choose, this line of code will change:
	<syntaxhighlight lang=js>		<syntaxhighlight lang=js>
	const conn = new phidget22.USBConnection(); //Use when connecting directly via USB		const conn = new phidget22.USBConnection(); //Use when connecting directly via USB

Lmpacent: /* Spreadsheet ID */

2025-04-16T21:25:32Z

Spreadsheet ID

← Older revision		Revision as of 21:25, 16 April 2025
Line 65:		Line 65:


	[[Image:Project_appscript_spreadsheetid.png\|center\|500px\|link=]]		[[Image:Project_appscript_spreadsheetid.png\|center\|500px\|link=https://cdn.phidgets.com/docs/images/3/3f/Project_appscript_spreadsheetid.png]]

	===index.html===		===index.html===

Lmpacent at 19:47, 15 April 2025

2025-04-15T19:47:50Z

← Older revision		Revision as of 19:47, 15 April 2025
Line 1:		Line 1:
	[[Category: Project]]		[[Category: Project]]
			{{#seo:\|keywords=JavaScript}}
	{{#seo:\|description=Log data to a Google Sheet with Phidgets and JavaScript.}}		{{#seo:\|description=Log data to a Google Sheet with Phidgets and JavaScript.}}
	[[Image:Google_Apps_Script.png\|400px\|link=\|thumb\|<center>Google Apps Script</center>]]		[[Image:Google_Apps_Script.png\|400px\|link=\|thumb\|<center>Google Apps Script</center>]]

Lmpacent at 19:44, 15 April 2025

2025-04-15T19:44:48Z

← Older revision		Revision as of 19:44, 15 April 2025
Line 1:		Line 1:
	[[Category: Project]]		[[Category: Project]]
	{{#seo:\|description=~~Write~~ data to a Google Sheet with Phidgets and JavaScript.}}		{{#seo:\|description=Log data to a Google Sheet with Phidgets and JavaScript.}}
	[[Image:Google_Apps_Script.png\|400px\|link=\|thumb\|<center>Google Apps Script</center>]]		[[Image:Google_Apps_Script.png\|400px\|link=\|thumb\|<center>Google Apps Script</center>]]
	==Introduction==		==Introduction==

Lmpacent at 19:43, 15 April 2025

2025-04-15T19:43:24Z

← Older revision		Revision as of 19:43, 15 April 2025
Line 1:		Line 1:
	[[Category: Project]]		[[Category: Project]]
	{{#seo:\|description=~~Learn how~~ to ~~use~~ Google ~~Apps Script~~ with ~~Phidget USB devices~~.}}		{{#seo:\|description=Write data to a Google Sheet with Phidgets and JavaScript.}}
	[[Image:Google_Apps_Script.png\|400px\|link=\|thumb\|<center>Google Apps Script</center>]]		[[Image:Google_Apps_Script.png\|400px\|link=\|thumb\|<center>Google Apps Script</center>]]
	==Introduction==		==Introduction==

Lmpacent: Created page with "Category: Project {{#seo:|description=Learn how to use Google Apps Script with Phidget USB devices.}} Google Apps Script ==Introduction== Phidgets provides a JavaScript library for browser and Node.js applications. In this project, we'll create a web application using Google Apps Script and log data from a Light Phidget to a Google Sheets spreadsheet. ===References=== [https://developers.google.com/a..."

2025-04-15T19:39:05Z

Created page with "Category: Project {{#seo:|description=Learn how to use Google Apps Script with Phidget USB devices.}} 400px|link=|thumb|<center>Google Apps Script</center> ==Introduction== Phidgets provides a JavaScript library for browser and Node.js applications. In this project, we'll create a web application using Google Apps Script and log data from a Light Phidget to a Google Sheets spreadsheet. ===References=== [https://developers.google.com/a..."

New page

[[Category: Project]]
{{#seo:|description=Learn how to use Google Apps Script with Phidget USB devices.}}
[[Image:Google_Apps_Script.png|400px|link=|thumb|<center>Google Apps Script</center>]]
==Introduction==
Phidgets provides a JavaScript library for browser and Node.js applications. In this project, we'll create a web application using Google Apps Script and log data from a Light Phidget to a Google Sheets spreadsheet.
===References===
[https://developers.google.com/apps-script/guides/web Apps Script - Web Apps Guide]
<br><br><br><br><br>

==Demonstration==
<center>{{#ev:youtube|V1Q93jao85w|||||rel=0}}</center>

==Connect Phidget Devices==
In this project, we will be using the [{{SERVER}}/?prodid=707 Light Sensor Phidget (LUX1000_0)] connected to a [{{SERVER}}/?prodid=1289 VINT Hub Phidget].

[[Image:LUX1000_setup_whitecable.jpg|600px|link=]]

==Prepare Apps Script Environment==
===Start A New Spreadsheet===
Start by creating a new spreadsheet. This spreadsheet will be used to store sensor data.

[[Image:Project_appscript_newspreadsheet.png|center|500px|link=]]

===Create Apps Script===
Name your spreadsheet and then navigate to '''Extensions > Apps Script'''

[[Image:Project_appscript_newappsscript.png|center|500px||link=]]

===Add HTML File===
Name your Apps Script project and click on the '''+''' symbol to add an HTML file.

[[Image:Project_appscript_newhtml.png|center|500px|link=]]

Name the file '''index.html'''.

[[Image:Project_appscript_namehtml.png|center|500px|link=]]

==Modify Code==
===Code.gs===
Navigate to '''Code.gs''' and replace the contents with the following:
<syntaxhighlight lang=js>
function doGet(e) {
var htmlOutput = HtmlService.createHtmlOutputFromFile('index');
return htmlOutput;
}

function writeData(data, location) {
var spreadsheetId = 'spreadsheetID'; // Replace with your spreadsheet ID
var sheetName = 'Sheet1'; // Replace with your sheet name

var spreadsheet = SpreadsheetApp.openById(spreadsheetId);
var sheet = spreadsheet.getSheetByName(sheetName);
sheet.getRange(location).setValue(data)
}
</syntaxhighlight>

====Spreadsheet ID====
You can find the spreadsheet ID by navigating to your spreadsheet and copying the string of letters and numbers between '''/d/''' and '''/edit''' in the URL.

[[Image:Project_appscript_spreadsheetid.png|center|500px|link=]]

===index.html===
Navigate to '''index.html''' and replace the contents with the following.

<syntaxhighlight lang=js>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Light Sensor Example</title>
</head>
<body>
<button id="grant-usb-access">Connect USB Device</button><br><br>
<button onclick="runExample()">Run Example</button><br><br>
<label>Sensor Data: </label><label id="sensorLabel"></label><br><br>
<input type="checkbox" id="logCheckbox">
<label>Log to File</label><br><br>
<script src="https://unpkg.com/phidget22@3.x/browser/phidget22.min.js"></script>
<script>
(async function () {
const illuminanceChangeDataEl = document.getElementById("sensorLabel");
const checkbox = document.getElementById("logCheckbox");
var index = 0;

function onLightSensor0_IlluminanceChange(illuminance) {
illuminanceChangeDataEl.textContent = illuminance.toString() + 'lx';
if (checkbox.checked) {
google.script.run.writeData(illuminance.toString(), "A" + index++)
}
}

try {
const conn = new phidget22.USBConnection();
await conn.connect();

const grantAccessBtn = document.getElementById('grant-usb-access');
grantAccessBtn.addEventListener('click', () => conn.requestWebUSBDeviceAccess());

const lightSensor0 = new phidget22.LightSensor();

lightSensor0.onIlluminanceChange = onLightSensor0_IlluminanceChange;

await lightSensor0.open(30000);
lightSensor0.setDataInterval(1000);
} catch(err) {
console.error('Phidget error:', err);
}

})();
</script>
</body>
</html>
</syntaxhighlight>

====USB vs Network Server Connection====
When using the Phidgets with JavaScript, you can connect to devices directly via USB or through the Phidget Network Server. Depending on what you choose, this line of code will change:
<syntaxhighlight lang=js>
const conn = new phidget22.USBConnection(); //Use when connecting directly via USB
</syntaxhighlight>

<syntaxhighlight lang=js>
const conn = new phidget22.NetworkConnection(5661, 'localhost'); //Use when connecting through the Phidget Network Server
</syntaxhighlight>

In this example, we are connecting directly via USB, so we use the first option. For more information, visit our [{{SERVER}}/docs/Language_-_JavaScript JavaScript page].

==Deploy Web App==
To deploy the app, find the '''Deploy''' button and select '''New Deployment''':

[[Image:Project_appscript_newdeployment.png|center|500px|link=]]

Select '''Web App''' as the type, provide a description, and press '''Deploy''':

[[Image:Project_appscript_newdeployment2.png|center|500px|link=]]

Authorization is required as the web app will access a Google Sheet:

[[Image:Project_appscript_newdeployment_auth.png|center|500px|link=]]

After authorizing, a URL for your web app will be generated:

[[Image:Project_appscript_newdeployment_url.png|center|500px|link=]]

==Request USB Device Access==
The web app provides a '''Connect USB Device''' button:

[[Image:Project_appscript_webapp.png|center|500px|link=]]

In order to access Phidget devices over a [{{SERVER}}//docs/Language_-_JavaScript#USB_Connection USB Connection], websites must gain permission from the user through an interactive element, like a button.

[[Image:Project_appscript_webapp_usbauth.png|center|500px|link=]]

===Run Example===
After granting access, the '''Run Example''' button can be pressed, and data will stream from the Phidget device to your browser application:

[[Image:Project_appscript_webapp_data.png|center|500px|link=]]

Check the '''Log to File''' box and data will be streamed to your spreadsheet.