Widgets

Widgets are simple function script objects that either control outputs or monitor inputs. Widgets are used on the user's dashboard or can be dropped into a website using the embed code.

• Javascript-based
• Cross-browser compatibility
• iPhone and Blackberry enhanced
• Remote Controls
• Monitoring

• I/O Monitor - Shows the state or value associated with a I/O channel
• Pulse Count Control - Count digital input pulses
• Digital Output Control - Toggle digital output for a channel on or off
• Digital Output Pulse - Send a pulse at a specific pulse width either in milliseconds or microseconds
• Serial Out - Send serial data out of the digital output
• Variable Value Control - Set the value of a variable value

More about I/O widgets

• Servo Single Position Control - Set a specified servo to a predetermined position
• Servo Variable Position Control - Allow user to set servo position with input box

More about Servo Widgets

• X10 Control - Control power outlets and brightness setting with the X10 protocol
• Custom X10 - Create a custom X10 command to send

More about X10 widgets

• Send Serial Message (Fixed Message) - Send predetermined serial message
• Send Serial Message (Variable Message) - Allow user to send serial message with input box
• Monitor Serial Messages (Real-Time) - Monitor a serial smart board in real-time

More about serial widgets

• Chart - Create a chart widget of an already made data logger

More about chart widgets

• External Monitor - Creates a widget that returns a value from Google weather or another custom URL

More about external widgets

• HTML App - Creates a widget that loads any custom HTML, CSS, and JavaScript inside an iFrame that can be added to your dashboard

More about custom widgets

Creating a new widget is simple. On the Widget tab, click “Create Widget.” An easy to follow wizard will then guide you through creating your widget.

Once a widget has been created, the actions section allows for editing of a widget, adding a widget to the dashboard, and widget deletion.

Clicking the “eye” symbol under the Actions section, will bring up the detailed information about the widget. Here, the widget can be modified. This area also has the “Widget ID/Key” and code for embedding the widget in another webpage.

A widget can be added to a user's dashboard by clicking the ”+” sign under the Actions section. When a widget has been added to the dashboard, it's output can be viewed under your Dashboard tab.

Under your Widget tab, using the “Find Widgets” button will allow you to search the widgets that have been made publicly available by other ioBridge users.

After clicking the “Find Widgets” button, all available widgets will be displayed. From here available widgets can be viewed or added to your own widget tab. Once a widget has been added to your tab, you can edit it and add it to your dashboard like any of your own widgets.

You can place the widget inline into your blog or website, by using the automatically generated embed code.

Here is an example embed code:

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

If you want to customize the look and feel of a widget with CSS for your website, select “Plain Text” as the style of your I/O monitor widgets. This option is under the widget editor.

The “Plain Text” style gives you the widget data as plain text inside of a <span> HTML element. This style also inherits styles that are on the page already.

Here are the two classes that you can customize:

• Default class: ioData_(widgetID)

• Mouse Over class: ioData_(widgetID)_over

Replace (widgetID) with the widgetID of the widget you want to stylize.

Example CSS for a widgetID of “xGTjqVMJvp”:

<style type="text/css">
 
    .ioData_xGTjqVMJvp {
 
        background-color: blue;
        font-size: 100px;   
 
    }
 
    .ioData_xGTjqVMJvp_over {
 
        background-color: green;
        font-size: 100px;     
    }
 
</style>

If you want to change the background color, add a background image, you can use CSS and the DIV tag. Simple wrap the widget with the DIV tag and set the style thru a style-sheet or embed styles into the tag.

Here is an example:

<html>
 
<head>
    <title>Widget Background</title>    
</head>
 
<body>
 
<div id="ioWidgets" style="background-color:red;">
    <script type="text/javascript">document.write(unescape("%3Cscript src='" + "http://www.iobridge.com/widgets/io.js?SVTwVdVUZRg3' type='text/javascript'%3E%3C/script%3E"));</script>
</div>
 
</body>
</html>

• JavaScript Widget Control API