====== JavaScript Widget Control API ======
To get access to the JavaScript Widget Control API, create a widget, note the widgetID, and embed the widget in the body of your web page.

===== Embed Code =====
Drop the widget Embed Code into your website and the ioBridge JavaScript Library is appended to the header of your page and gives you access to special ioBridge commands to control your widgets.
==== Example Widget Embed Code ====
 
<code javascript>
<script type="text/javascript">
document.write(unescape("%3Cscript src='" + "http://www.iobridge.com/widgets/io.js?Q6Vs3RepsH6I' type='text/javascript'%3E%3C/script%3E"));
</script>
</code>
==== Hide Widget Code ====

If you don't need to see the actual widget, you can hide it using the following commands. It's recommend to embed hidden widgets near or right befire the </body> html tag.

<code javascript>
<div id="ioWidgets" style="display:none;">

<script type="text/javascript">
document.write(unescape("%3Cscript src='" + "http://www.iobridge.com/widgets/io.js?Q6Vs3RepsH6I' type='text/javascript'%3E%3C/script%3E"));
</script>

</div>
</code>

===== widgetID =====
The widgetID is the string at the end of the widget code:

http://www.iobridge.com/widgets/io.js?Q6Vs3RepsH6I

Q6Vs3RepsH6I is the widgetID for the above widget.

===== JavaScript Commands =====

==== widgetExecute ====
Use //widgetExecute// on widgets that have one, fixed action. For example, if you created a fixed position servo widget that when normally clicked it sets a servo to a fixed position. Running //widgetExecute// from JavaScript allows JavaScript to execute the widget. The widget reacts just like if a user clicked on the widget.

**widgetExecute('Q6Vs3RepsH6I');**

==== widgetSetState ====
If the widget has two states, like On and Off buttons on an X10 widget or a toggle button, use the //widsetSetState// JavaScript command.

=== On: ===
**widgetSetState('Q6Vs3RepsH6I',1);**

=== Off: ===
**widgetSetState('Q6Vs3RepsH6I',0);**

==== widgetSetString ====
Variable serial and servo widgets need to use //widgetSetString// to send data to your module.

**widgetSetString('Q6Vs3RepsH6I','This is my serial message');**
==== widgetGetValue ====
If you have a widget that reads in the value of a digital input or analog input, you can get the that value by using //widgetGetValue// from JavaScript.

**var myTemperature = widgetGetValue('Q6Vs3RepsH6I');**

==== widgetGetString ====
If you have a variable message widget, you can get the current string by using //widgetGetString// from JavaScript. Use for variable servo position widgets and serial messages.

**var servoPosition = widgetGetString('Q6V123epsH6I');**
===== Special Characters =====
If you want to send special characters and bytes with //widgetSetString//, use the URL encoded characters.

For example, if you wanted to break a message into two lines with a carriage and linefeed, issue this JavaScript command: 

<code javascript>widgetSetString('Q6Vs3RepsH6I','This is line 1.%0D%0AThis is line 2.');</code>

The result will be:

This is line 1.

This is line 2.

**%0D** = carriage return

**%0A** = linefeed

Here is a table that lists all of the URL codes:

[[http://www.w3schools.com/TAGS/ref_urlencode.asp|URL Codes]]

===== Example Application =====
[[projects:iTurn]]