Industrial Real Time widgets

This is a set of widgets prepared for showing meters infomation, such as PLC tags values and status.
This pack contains three widgets: RTTimer, which refreshes all its appended widgets getting data from a Web Service, RTMeter, to show tag info and RTPicture, to show components status.

big_rt_sample.png

HTML Page

The HTML page that holds the widgets is a regular static web page.

Head Section

In order to instruct the browser to download the proper javascript files and CCS files we must include the following references in the header:

Style Sheets (CSS) Files

    <link href="IndustrialDashboard/Styles/IndustrialDashboard.css" rel="stylesheet" type="text/css" />    
    <link href="IndustrialDashboard/Widgets/RTMeter/Styles/RTMeter.css" rel="stylesheet" type="text/css" />   
    <link href="IndustrialDashboard/Widgets/RTPicture/Styles/RTPicture.css" rel="stylesheet" type="text/css" />    
    <link href="IndustrialDashboard/Widgets/IndustrialChart/Styles/IndustrialChart.css" rel="stylesheet" type="text/css" />

Widget javascripts

    <script src="IndustrialDashboard/Scripts/IndustrialDashboard.js" type="text/javascript"></script>
    <script src="IndustrialDashboard/Widgets/RTMeter/Scripts/RTMeter.js" type="text/javascript"></script>
    <script src="IndustrialDashboard/Widgets/RTTimer/Scripts/RTTimer.js" type="text/javascript"></script>
    <script src="IndustrialDashboard/Widgets/RTPicture/Scripts/RTPicture.js" type="text/javascript"></script>
    <script src="IndustrialDashboard/Widgets/FX/Scripts/FX.js" type="text/javascript"></script>   

Container

All widgets need a HTML container as a parent to hold all its contents; we usually use <DIV> elements. The <DIV> tags created to hold widgets must have at least an ID property to be able to be referenced in javascript code. The position and size of this <DIV> will be used by the widget code to locate and scale its internal visual objects.
Any way if the size is not set it the widget will use and set a default size. The size only can set it in the tag of the container or by javascript, the widget doesn't support set the size of its container by CSS Stylesheets.

<div>
      <div id="met1" style="margin:0px;padding:0px;position:absolute;width:auto;margin-top:30px;margin-left:30px;"></div>
</div>

Initialization

Javascript code is execute as soon as is loaded into the browser’s memory, but running javascript code without being sure that the rest of the page is already loaded can lead to run time errors, so the typical start up code is placed inside the window.onload event of the page.

RTTimer

Initialization example

//RTTimer instance
 var options = { 'URL': '../TagServiceSimulator.svc', 'RefreshRate' : 1250 }; //Simple svc that returns random data
 var rtt = new RTTimer(options);

External initialization options
Public methods

RTMeter

Initialization example and attachment to RTTimer

var options = { 'TagName': ('Tag' + i), 'Unit': 'Amp', 'DecimalsCount': 2
     , 'Events': { 'onClick': function { } }
};
var rtm = new RTMeter(document.getElementById('met' + i), options);
rtt.AttachWidget(rtm);

External initialization options
Public methods

RTPicture

Initialization example and attachment to RTTimer

var options = { 'TagName': 'PicTag', 'Width': 20, 'Height': 20, 'Description':  'Status'
           , 'AutoSize': false
           , 'ImagesList': [
               { 'Value': 0, 'URL': '/IndustrialDashboard/Widgets/RTPicture/Styles/ImagesRTPicture/green_led2.png' }
              , { 'Value': 1, 'URL': '/IndustrialDashboard/Widgets/RTPicture/Styles/ImagesRTPicture/red_led2.png' }
              , { 'Value': 2, 'URL': '/IndustrialDashboard/Widgets/RTPicture/Styles/ImagesRTPicture/magenta_led2.png' }
             ]                    
};
var rtp = new RTPicture(document.getElementById('picDiv'), options);
rtt.AttachWidget(rtp);

External initialization options
Public methods