7EN02-0390-03

Sample HTML code for data viewing webpage content

Content and formatting of a data viewing webpage is controlled by its HTML code.

Sample data viewing webpage content

Line # Sample HTML
1 SampleMonitorPane.html
2 <div class="content-fit">
3 <div class="accordion">
4 <h3 target="sample-readings">$%localizedString(Basic Readings)#$</h3>
5 <div id="sample-readings">
6 <table class="datatable">
7 <tr>
8 <th>&nbsp;</th>
9 <th>$%localizedString(Minimum)#$</th>
10 <th>$%localizedString(Present)#$</th>
11 <th>$%localizedString(Maximum)#$</th>
12 </tr>
13 <tr class="minor">
14 <td>$%localizedString(I a)#$ <span unitsreg="I a"></span></td>
15 <td regname="I a mn"></td>
16 <td regname="I a"></td>
17 <td regname="I a mx"></td>
18 </tr>
19 <tr class="minor">
20 <td>$%localizedString(I b)#$ <span unitsreg="I b"></span></td>
21 <td regname="I b mn"></td>
22 <td regname="I b"></td>
23 <td regname="I b mx"></td>
24 </tr>
25 </table>
26 </div>
27 <h3 target="sample-energy">$%localizedString(Energy Readings)#$</h3>
28 <div id="sample-energy">
29 <table class="datatable">
30 <tr>
31 <th>&nbsp;</th>
32 <th>$%localizedString(Present)#$</th>
33 </tr>
34 <tr>
35 <td>$%localizedString(Active Energy)#$ <span unitsreg="kWh del-rec"></span></td>
36 <td regname="kWh del-rec"></td>
37 </tr>
38 <tr>
39 <td>$%localizedString(Reactive Energy)#$ <span unitsreg="kVARh del-rec"></span></td>
40 <td regname="kVARh del-rec"></td>
41 </tr>
42 </table>
43 </div>
44 </div>
45  
46  
47 <script type="text/javascript">
48  
49 instantaneousReadings.initInstantaneousReadings('sample-readings');
50  
51 </script>
52 </div>

Sample webpage data viewing content description

Line # Description
1
SampleMonitorPane.html 

The HTML filename, including the HTML extension (.html). This filename must comply with SFTP filename requirements (no spaces or special characters). The filename (without the HTML extension) is the name shown on the webpage menu.

4
<h3 target="sample-readings">

This creates the first webpage content pane. “sample-readings” is the name of the webpage content. This name must be unique.

$%localizedString(Basic Readings)#$</h3>

Basic Readings is the title of the webpage content pane. This title is translated if possible.

5
<div id="sample-readings">

This must match the name of the webpage content in line 4.

9
<th>$%localizedString(Minimum)#$</th>

Minimum is the heading for the first column. This heading is translated if possible.

10
<th>$%localizedString(Present)#$</th>

Present is the heading for the second column. This heading is translated if possible.

11
<th>$%localizedString(Maximum)#$</th>

Maximum is the heading for the last column. This heading is translated if possible.

14
<td>$%localizedString(I a)#$ 

I a is the row heading. This heading is translated if possible.

<span unitsreg="I a"></span></td>

This displays the units that the meter has defined for the named register I a.

15
<td regname="I a mn"></td>

This displays the instantaneous value of the named register I a mn.

16
<td regname="I a"></td>

This displays the instantaneous value of the named register I a.

17
<td regname="I a mx"></td>

This displays the instantaneous value of the named register I a mx.

20
<td>$%localizedString(I b)#$ 

I b is the second row heading. This heading is translated if possible.

<span unitsreg="I b"></span></td>

This displays the units that the meter has defined for the named register I b.

21
<td regname="I b mn"></td>

This displays the instantaneous value of the named register I b mn.

22
<td regname="I b"></td>

This displays the instantaneous value of the named register I b.

23
<td regname="I b mx"></td>

This displays the instantaneous value of the named register I bmx.

27
<h3 target="sample-energy">

This creates the second webpage content pane. Sample-energy is the name of the webpage content. This name must be unique.

$%localizedString(Energy Readings)#$</h3>

Energy Readings is the title of the webpage content pane. This title is translated if possible.

28
<div id="sample-energy">

This must match the name of the webpage content in line 27.

32
<th>$%localizedString(Present)#$</th>

Present is the heading for the last column. This heading is translated if possible.

35
<td>$%localizedString(Active Energy)#$ 

Active Energy is the row heading. This heading is translated if possible.

<span unitsreg="kWh del-rec"></span></td>

This displays the units that the meter has defined for the named register kWh del-rec.

36
<td regname="kWh del-rec"></td>

This displays the instantaneous value of the named register kWh del-rec.1

39
<td>$%localizedString(Reactive Energy)#$ 

Reactive Energy is the row heading. This heading is translated if possible.

<span unitsreg="kVARh del-rec"></span></td>

This displays the units that the meter has defined for the named register kVARh del-rec.

40
<td regname="kVARh del-rec"></td>

This displays the instantaneous value of the named register kVARh del-rec.1

49
instantaneousReadings.initInstantaneousReadings('sample-readings');

Sample-readings is the unique name of the first webpage content name. This HTML code updates all of the webpage’s values.

1Named registers are listed in the Modbus registers map. You can also reference a value by its ION handle using the following format: <td regname=”_0x####”></td>.
QR code for this page

Was this helpful?