HTML Applications

HTML applications, or applets, are very important. In the DM2003 framework, the most of standard user interface as well as user interface extensions (like data acquisition applications) are based on the applet technology. These applications are compact and may be created by end users since they do not require professional development environments like Delphi or Visual Studio. Typical applet is a special HTML document that is loaded into the DM2003 Browser window just like other tools. In such a document you can place UI elements required for your application - buttons, checkboxes, text labels etc. In addition to the standard set of DHTML objects implemented by Microsoft Internet Explorer (which is used by the DM2003 browser) you may use additional ActiveX controls from DMForms library. Script code embedded into the HTML page usually is very simple; its purpose is only to move data from one object to another, for example, from RS232 port ActiveX to the DM2003 data window (DM2003 objects are visible through the window.external reference).

Since a lot of measurement instruments may be connected to the PC via RS232 interface, DM2003 software installs special ActiveX controls - DMComPort and DMComTerminal, which may be used in scripting environments like HTML pages to communicate with data acquisition system. To illustrate the process of the creation of the ActiveX - based applications, this article provides detailed step-by-step instructions how to write simple applet for real-time data acquisition (Keithley 2182 nanovoltmeter used as an example of typical measurement instrument with RS-232C port). Make a study of these code snippets to familiarize with ActiveX scripting, use them as a template for your own applications and you will see that with DM2003 data acquisition is as easy as 1-2-3!

Step 1: initial preparations

To begin with, you should learn device manual about communications details and test connectivity in the manual mode using any RS-232 terminal software (for example, this help file includes ready-for-use DMComTerminal test application). In particular, you must to know port settings like baud rate, parity, etc. Keep in mind that in many devices these settings are programmable and may be changed.

Another important issue is the communication protocol. This usually involves so-called command language. For example, the most of DMMs must be triggered to obtain the readout; almost all instruments require initialization. All these actions are performed by sending specially formatted text lines to the communication port. In reply, the instrument sends measurement results (or another acknowledgement). Details about format of these commands usually documented in the device manual.

Step 2 - planning user interface

In order to control data acquisition process, you may need following set of elements:

Every HTML element may have a name (ID) and associated event handler (which is actually script procedure). Use Script Editor, notepad or any other ASCII editor to create following set of the HTML tags that define UI controls for our application as shown below:

<html>
<head>
<title>Keithley 2182 test</title>

<script language="VBScript">

</script>

</head>
<body>

<h3>Keithley 2182 test</h3>

<input language="VBScript" type="button" value="Trigger" 
id="TriggerBtn">

<br>

<input type="checkbox" id="AutoCB">By timer

<h4 id="Display">&nbsp;</h4>

<object classid="clsid:673AAF16-9A0B-11D4-B2A4-FD6847C75367" 
id="Port"></object>

</body>
</html>

Step 3 - writing script code

Now it's time to animate our application! Place following script code between <script> and </script> tags of the abovementioned HTML:

const S=":INIT:CONT OFF;:ABORT;:TRIG:COUN 1;:TRIG:DEL 0;:TRIG:SOUR IMM;:INIT;"
Sub window_onload
  call Port.Open("1,9600,0,8,0")
  call Port.Write(S & vbCr)
End Sub

Sub window_onunload
  call Port.Close
End Sub

dim Wnd
set Wnd=window.external.CreateDocument("")
Wnd.WindowCaption="Data Window"
Wnd.IsRecording=true
Wnd.Worksheet.ColumnLabels(1)="Time, S"
Wnd.Worksheet.ColumnLabels(2)="Voltage"
Wnd.Plot.XAxis.AutoScale=false 
Wnd.Plot.XAxis.Min=0
Wnd.Plot.XAxis.Max=1000
Wnd.Plot.YAxis.AutoScale=true
Wnd.Plot.Series(0).XColumn=1
Wnd.Plot.Series(0).YColumn=2

dim Buffer, StartTime
Buffer=""
StartTime=Now

Sub Port_OnRead(Str)
  Buffer=Buffer+Str
  if InStr(buffer, vbCr)>0 then
    Display.innerHTML=Buffer
    if IsNumeric(Buffer) then 
      Wnd.Container.AddItem(DateDiff("S", StartTime, Now) _
        & " " & CDbl(Buffer))
      Wnd.Container.Modified=true
      Wnd.Plot.Series(0).AddPoint
    end if
    Buffer=""
    if AutoCB.checked then call SetTimeout("TriggerBtn_onclick", 1000)
  end if
End Sub

Sub TriggerBtn_onclick
  call Port.Write(":SENSE:CHAN 1;:READ?" & vbCr)
End Sub

RS232 port automatically opened when page is loaded and closed when page is unloaded; window_onload event handler also used to initialize the instrument. Port_OnRead(Str) event handler called implicitly by ActiveX control when data arrived from the RS232 port. Since data string may be broken at arbitrary position, some kind of bufferization used to determine actual stop of the transmission. IsNumeric(Buffer) call used to ensure data integrity since usually there's no any validation in the device communication protocol and sometimes data may be corrupted. Note that IsNumeric() function may fail if your system decimal separator is other than provided by the instrument! Global statements used to create and reference data window required to accumulate and display voltmeter readouts.

The result: working data acquisition application (see photo)

Data acquisition system in action

Simple data acquisition system: Keithley 2182 nanovoltmeter attached to the PC via RS232 cable, the device under test is a charged oxide capacitor. Voltage readouts accumulated in the DM2003 data window and self-discharge V(t) dependence is plotted.

If you are interested in more details about ActiveX scripting, read DHTML authoring guides and VBScript documentation from Microsoft (bundled with MS products or available online at their website as a part of MSDN or downloadable archives).

You may also use Data Acquisition Wizard available in the Script Editor to create simple data acquisition applications in few mouse clicks. Click File|New menu item, select "HTML Applet Wizard", then select "Browser Application" and check "Run Data Acquisition Wizard". You will be prompted for port settings and some details about device command language. Finally, this wizard will create HTML applet like mentioned above.
Notice: if your measurement facility combines several instruments with different programming interfaces and data flow timings, you should use Measurement System Wizard.