Introduction: How to Use Google Sites to Control a Arduino!
More by the author:
About: hi i enjoy making ludicrisly over the top and complex devices.... Being an ameture engineer, I refuse pick the easy option, but rather the one that seems best, which inevitably devolves into a weekend of hacki…
this is a tutorial that will show you the potential of web based interfaces for your projects, often times we all would like to make stuff for the world to be able to play with but we also often times do not have the time and money to throw at a project to do so, so without further adieu, heres how this works:
step one:
user clicks button in the google apps script that is imbedded in a google site, upon this action the script writes to a text file the desired command, the text file is saved in a google drive account.
step two:
application running on the machine the arduino is attached to downloads the the text file from the google drive, and then sends the contents of the file to the serial port that the arduino is attached to
step three:
the arduino executes the command received over the serial port
step one:
user clicks button in the google apps script that is imbedded in a google site, upon this action the script writes to a text file the desired command, the text file is saved in a google drive account.
step two:
application running on the machine the arduino is attached to downloads the the text file from the google drive, and then sends the contents of the file to the serial port that the arduino is attached to
step three:
the arduino executes the command received over the serial port
Step 1: The Arduino
So for all of this to work, we first need something to control, for this i have supplied some code that is located in the zip file on this step, its a simple sketch that allows you to turn an led on and off by sending a 1 or a 0 to the arduino via the serial port. it is found in the folder titled "arduino code" when you get the code opened in the arduino environment, you can just upload the code to your arduino, nothin terribly special here
Step 2: The Google Site
now we must set up the google site and script that will be used to send commands to the arduino. first, if you dont already have a google account, sign up for one, second create a google site to be used to host the script, http://sites.google.com/ is were you begin, now that was the easy part, next we will create the script and embed it into the site, to do so, go to your google drive and click on "Create" then click on "more" and then click on "script". this should bring you to the script editor, then click on the "blank project" then delete all the code that was pre-generated by the editor and then copy in this code:
//this code is part of a tutorial to show the
//potential to interface google apps script with
//the arduino microcontroller
//written by Kyle Brinkerhoff
var serialdoc ="0B7LTCy8EaA7pbXJkSnREYVp4RUk"; //this variable is the unique file id for the file saved in google docs.
function doGet() { // this function is the setup function that calls the UI into existence
var app = UiApp.createApplication();
app.add(app.loadComponent("remote"));//load the ui named "remote"
return app;
}
//these functions write to the file that stores the command for the desktop application to download and send to the serial port
function ON(){
DocsList.getFileById(serialdoc).replace("1");// write the command to the file to turn the 13pin on
}
function OFF(){
var comclear=DocsList.getFileById(serialdoc).replace("0");// write the command to the file to turn the 13pin off
}
next save your script.
now you will need to create the user interface to drive this code . to do so, in the editor click on "file" and then click on"build user interface" and create a user interface with two buttons, to do this drag from the left hand side of the screen, two buttons, then on the right hand side of the screen, scroll down till you see the text field for the buttons, change one of them to on and for the other button to off, now select a button and scroll down on the left hand side of the screen till you come to "events" and "on mouse click" click on "add server" and select the appropriate function, then repeat this for the other button. then save the ui as "remote"
now you will need to create a text file in your google drive and get the file ID and insert it over the file id of the old file in the code, you will need this later so make a copy of the file id with notepad and save it
now in the script editor, publish your script as a web app so you can get the embed code for your google site. to do this go to your google site editor and click on "insert" and then click on "apps script gadget" and then paste in your embed url and then configure the script as you please.
//this code is part of a tutorial to show the
//potential to interface google apps script with
//the arduino microcontroller
//written by Kyle Brinkerhoff
var serialdoc ="0B7LTCy8EaA7pbXJkSnREYVp4RUk"; //this variable is the unique file id for the file saved in google docs.
function doGet() { // this function is the setup function that calls the UI into existence
var app = UiApp.createApplication();
app.add(app.loadComponent("remote"));//load the ui named "remote"
return app;
}
//these functions write to the file that stores the command for the desktop application to download and send to the serial port
function ON(){
DocsList.getFileById(serialdoc).replace("1");// write the command to the file to turn the 13pin on
}
function OFF(){
var comclear=DocsList.getFileById(serialdoc).replace("0");// write the command to the file to turn the 13pin off
}
next save your script.
now you will need to create the user interface to drive this code . to do so, in the editor click on "file" and then click on"build user interface" and create a user interface with two buttons, to do this drag from the left hand side of the screen, two buttons, then on the right hand side of the screen, scroll down till you see the text field for the buttons, change one of them to on and for the other button to off, now select a button and scroll down on the left hand side of the screen till you come to "events" and "on mouse click" click on "add server" and select the appropriate function, then repeat this for the other button. then save the ui as "remote"
now you will need to create a text file in your google drive and get the file ID and insert it over the file id of the old file in the code, you will need this later so make a copy of the file id with notepad and save it
now in the script editor, publish your script as a web app so you can get the embed code for your google site. to do this go to your google site editor and click on "insert" and then click on "apps script gadget" and then paste in your embed url and then configure the script as you please.
Step 3: The Pc Application
so this application i wrote for this, feel free to use it for your own purposes, but im not liable for damages caused by misuse.
so to use this simply install it, then insert your google docs unique id and select the correct serial port and then click the "connect" button, this will initialize the serial connection to the arduino, then click the start button, and your good to go!
so to use this simply install it, then insert your google docs unique id and select the correct serial port and then click the "connect" button, this will initialize the serial connection to the arduino, then click the start button, and your good to go!