Save Mouse Click position to Google Spreadsheet


Here we'll show you how to save the position of a mouse click in Processing to a Google Spreadsheet using the Google API.

The finished sketch records each click in the display window directly to your spreadsheet.

Set up with Temboo and Google Drive

1Make sure you have a Temboo account. If you don't already have one, you can register for a free account here.

2Since this sketch uses a Google spreadsheet, you'll also need a Google account.

3Login to Google's Developer Console, and create a new Project if you haven't done so already.

4Under the API Manager section, select Library and make sure you've enabled API Access for the Google Sheets API.

5Select Credentials in the API Manager section, and create a new Client ID specifying Web application for the Application Type.

6When configuring the Consent Screen, make sure you fill out the Email Address and Product Name fields.

7Save the Consent Screen details and specify the callback URL below as the Authorized Redirect URI.

https://ACCOUNT_NAME.temboolive.com/callback/google

8Go to the Google > OAuth > InitializeOAuth Choreo page, and specify the Client ID from the app you registered at Google and the following Scope: https://www.googleapis.com/auth/spreadsheets. Run the Choreo from our site by clicking Generate Code.

Google OAuth Inputs

The InitializeOAuth choreo will return an authorization URL and a callback ID (required for the FinalizeOAuth step).

9Open a new web browser, navigate to the authorization URL returned by the InitializeOAuth Choreo, and click "Accept" to grant the app access to your Google account.

Google OAuth Accept

10Go to the Google > OAuth > FinalizeOAuth Choreo page and specify the callback ID returned earlier by the InitializeOAuth Choreo. This process will return a Refresh Token which can be used along with the Client ID and Client Secret to authenticate with Google. Click Generate Code the Choreo.

11 Create a new Google Spreadsheet. Name it mouseClicks. Add column titles for each value you plan to save to the spreadsheet. To run this example, your spreadsheet will need to look like the image below.

12When viewing your spreadsheet, you'll see a spreadsheet ID in your browser's URL bar. Copy this ID because you'll need it when running the AppendValues Choreo. In the example below, the highlighted part is the Spreadsheet ID.

Google Spreadsheet

Test the Choreo

13 Go to the Google > Sheets > AppendValues Choreo page and select Processing from the drop down menu at the top. Supply all the required Choreo inputs, including the credentials you generated with OAuth.

Google Spreadsheets Inputs

14Click Generate Code to test the Choreo from our website, and if there are no errors, you'll see "Success" in the Output section. If you check your spreadsheet on Google, you'll see your values appear!

15Next, store your Google log in details in a Temboo Profile. Click on the Save Profile button, name your Profile, and save.

Now you can reuse these Google authentication details on any Google Spreadsheets Choreo in our Library. It will make your code a lot simpler and protect your API credentials from appearing in your sketch.

16 Now, copy the generated Code directly into your Processing sketch and run it there. (And see the values appear again!)

Record mouse clicks in Processing

17Now we'll extend our sketch to take input from the user (you!) and add it to the spreadsheet. First, we generate the following input values: xPos and yPos, which correspond to mouseX and mouseY, as well as the currentTime.

We've added mousePressed() and mouseReleased functions to recognize the click and the save. The fill color of the ellipse signifies this change – it is initially green and turns red once the value has been saved. Messages printed to Processing's console also show when these events occur.

Copy the sketch below to see how this works in practice. Remember to substitute in your Temboo account details and the name of your Temboo Google Profile.

import com.temboo.core.*;
import com.temboo.Library.Google.Sheets.*;

// Create a session using your Temboo account application details
TembooSession session = new TembooSession("ACCOUNT_NAME", "APP_NAME", "APP_KEY");

// The name of your Temboo Google Profile 
String googleProfile = "myProfileName";

// Declare global variables that will be saved to spreadsheet
int xPos, yPos;
String currentTime;

// Set up color and size of click circles
color clickColor = color(0, 255, 0);
color saveColor = color(255, 0, 0);
int circleSize = 8;

void setup() {
  size(400, 400);
}

void draw() {
}

void mousePressed() {
  // Change cursor to wait
  cursor(WAIT);
  
  // Get x and y position values of click
  xPos = mouseX;
  yPos = mouseY;
  
  // Draw circle where click occurred
  fill(clickColor);
  ellipse(xPos, yPos, circleSize, circleSize);
}

void mouseReleased() {
  // Write an in-progress message to console
  println("Writing to your Google Spreadsheet..."); 

  // Get current time
  currentTime = year()+"/"+month()+"/"+day()+" "+hour()+":"+minute()+":"+second()+"."+millis();

  // Run the AppendValues Choreo function
  runAppendValuesChoreo();

  // Draw finished circle
  fill(saveColor);
  ellipse(xPos, yPos, circleSize, circleSize);

  // Write a finished message to console
  println("done!");
  
  // Change cursor back to normal
  cursor(ARROW);
}

void runAppendValuesChoreo() {
  // Create the Choreo object using your Temboo session
  AppendValues appendValuesChoreo = new AppendValues(session);

  // Set Profile
  appendValuesChoreo.setCredential(googleProfile);

  // Set inputs
  appendValuesChoreo.setValues("[[\"" + currentTime + "\", \"" + str(mouseX) + "\", \"" + str(mouseY) + "\"]]");

  // Run the Choreo and store the results
  AppendValuesResultSet appendValuesResults = appendValuesChoreo.run();
}

What next?

We're all finished! This sketch focuses on mouse clicks, but any value could be passed to a spreadsheet. We could record key presses, motion data from a connected camera, or any other sort of data gathered in your sketch. Check out our Library for some more ideas.

Once you've got your code up and running, you're ready to move on and do more. From monitoring your running applications, to moving your generated Temboo code to your preferred development environment and sharing it with colleagues, collaborators and friends - we've got you covered.

Get Live Updates About Your Application

Integrate Temboo with Slack to get up-to-the-second notifications and alerts about your deployed Temboo code.

Commit Code to GitHub

Commit Temboo-generated code directly to GitHub and share with the world. Learn more.

Need help?

We're always happy to help. Just email us at support@temboo.com, and we'll answer your questions.


Back