Custom Widgets

Contents

HTML App

Widgets → Create Widget → HTML App

The HTML App widget is perfect for when you want to add a custom widget to your dashboard and mashup web services, controls, and other ioBridge widgets all in one place. The HTML App widget loads your custom JavaScript, CSS, and HTML inside of an iFrame that you can add to your dashboard. You can use this to embed video, multiple ioBridge widgets, ThingSpeak plugins and charts, Google Visualizations, jQuery UI, mobile web app frameworks, etc.

Settings

  • Size: This is the width and height of the HTML App widget
  • Head Code: This is code to be placed in the “Head” of the HTML document – the code can be CSS and/or JavaScript
  • Body Code: This is code to placed in the “Body” of the HTML document

Considerations

The ioBridge dashboard uses HTTPS / SSL. If you add an external library, try to use a secured link. Otherwise, you may get a mixed content security warning in the browser if the widget is on the ioBridge dashboard.

Example Dashboard

Here is an ioBridge dhasboard with two HTML App Widgets. One of the widgets is an embeded video source from Jason’s Fishcam. The other is a ThingSpeak Chart.

HTML Apps on ioBridge Dashboard

click to chat