You are here: Home / ioBridge Docs / Widgets

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.

Widget Types

I/O Channel Widgets

  • 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 Smart 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 Smart Board 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

Serial Smart Board 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

Data Log Widgets

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

» More about chart widgets

External Widgets

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

» More about external widgets

Custom 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

How to Create 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.

Create Widget button as seen at top of users Widget tab

First page of widget wizard

Widget Actions

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

Editing a Widget

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.

Adding Widget to Dashboard

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.

Shared Widgets

Under your Widget tab, using the “Shared 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.

Widget Embed Code

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>

Customizing Widgets with CSS

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>

Customizing Widget Background

If you want to change the background color, add a background image, you can use CSSand 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>

Additional Resources

Filed Under: Uncategorized