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.



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>   


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


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.


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
  • URL : [string] The path of the wcf service that gets tag data values and information. Default = '../../TagServiceSimulator.svc'
  • RefreshRate : [int] The refresh frecuency of the appended widgets. Default = 1000

Public methods
  • AttachWidget(widget) : Receives a either a meter or picture widget as a parameter to refresh it later.
  • StartRefresh : Starts widgets refres.
  • StopRefresh : Stops widgets refresh.


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

External initialization options
  • TagName : [string] The same exact tag name that the service provides. Default = ''
  • Unit : [string] The unit of the tag. Default = 'u'
  • Description : [string] A simple tooltip added to the meter. Default = ''
  • DecimalsCount : [int] The amount of decimal numbers that the meter shows. Default = 2
  • Events : onClick : [function] A function called when the user clicks the numbers of the tag. Default = none

Public methods
  • SetValue(value) : Recieves a value to show in the meter. Can be either boolean, string or real number.
  • SetDetails(propertiesDictionary) : Recieves a dictionary with details of the tag.
  • GetTagName() : Returns its tag name.
  • SetValueColor(color) : Sets the color of the displayed value.
  • SetonClick(function) : Sets onClick event of the widget.


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

External initialization options
  • TagName : [string] The same exact tag name that the service provides. Default = ''
  • Description : [string] A simple tooltip added to the picture. Default = ''
  • ImagesList : [array] An array of objects. Each object must contain:
    • Value : [int] Indicates object status.
    • URL : [string] The absolute path of the desired image.
  • Width : [int] The desired width of the image. Default = 35
  • Height : [int] The desired height of the image. Default = 35
  • AutoSize : [boolean] Set as true if the size of the image will be its default. Default = false

Public methods
  • SetValue(value) : Recieves a value to show in the picture widget. Must be an integer that represents its status.
  • GetTagName() : Returns its tag name.
  • SetImagesList(imagesArray) : Sets the images array of the widget.

Last edited Sep 8, 2010 at 3:54 PM by jcastagnino, version 8


No comments yet.