7FR02-0336-07

Exemple de code HTML pour les pages Web d'affichage de données

Le contenu et la mise en forme des pages Web d'affichage des données sont contrôlés par du code HTML.

Contenu de la page Web d'affichage de données

Numéro de ligne Exemple de code 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>

Description du contenu de l'exemple de page Web d'affichage de données

Numéro de ligne Description
1
SampleMonitorPane.html 

Nom du fichier HTML, avec l'extension (.html). Ce nom de fichier doit respecter les exigences de nom SFTP (ni espaces ni caractères spéciaux). C'est le nom de fichier (sans l'extension .html) qui est affiché dans le menu de page Web.

4
<h3 target="sample-readings">

Définit le premier volet de contenu de la page Web. « sample-readings » est le nom de ce contenu. Ce nom doit être unique.

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

« Basic Readings » est le titre du volet de contenu. Ce titre sera traduit, si possible.

5
<div id="sample-readings">

Doit correspondre au nom du contenu de la ligne 4.

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

« Minimum » est l'en-tête de la première colonne. Cet en-tête sera traduit, si possible.

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

« Present » est l'en-tête de la deuxième colonne. Cet en-tête sera traduit, si possible.

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

« Maximum » est l'en-tête de la dernière colonne. Cet en-tête sera traduit, si possible.

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

« I a » est l'en-tête de la première rangée. Cet en-tête sera traduit, si possible.

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

Affiche l'unité que le compteur a définie pour le registre nommé « I a ».

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

Affiche la valeur instantanée pour le registre nommé « I a mn ».

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

Affiche la valeur instantanée pour le registre nommé « I a ».

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

Affiche la valeur instantanée pour le registre nommé « I a mx ».

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

« I b » est l'en-tête de la deuxième rangée. Cet en-tête sera traduit, si possible.

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

Affiche l'unité que le compteur a définie pour le registre nommé « I b ».

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

Affiche la valeur instantanée pour le registre nommé « I b mn ».

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

Affiche la valeur instantanée pour le registre nommé « I b ».

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

Affiche la valeur instantanée pour le registre nommé « I bmx ».

27
<h3 target="sample-energy">

Définit le deuxième panneau de contenu de la page Web. « Sample-energy » est le nom de ce contenu. Ce nom doit être unique.

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

« Energy Readings » est le titre du volet de contenu. Ce titre sera traduit, si possible.

28
<div id="sample-energy">

Doit correspondre au nom du contenu de la ligne 27.

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

« Present » est l'en-tête de la dernière colonne. Cet en-tête sera traduit, si possible.

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

« Active Energy » est l'en-tête de la première rangée. Cet en-tête sera traduit, si possible.

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

Affiche l'unité que le compteur a définie pour le registre nommé « kWh del-rec ».

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

Affiche la valeur instantanée pour le registre nommé « kWh del-rec ».1

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

« Reactive Energy » est l'en-tête de la première rangée. Cet en-tête sera traduit, si possible.

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

Affiche l'unité que le compteur a définie pour le registre nommé « kVARh del-rec ».

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

Affiche la valeur instantanée pour le registre nommé « kVARh del-rec ».1

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

« Sample-readings » est le nom unique du premier contenu. Ce code HTML sert à mettre à jour toutes les valeurs de la page Web.

1 Les registres nommés sont répertoriés dans le mappage de registres Modbus. Vous pouvez également référencer une valeur par son identificateur ION en utilisant le format suivant : <td regname="_0x####"></td>.
Code QR pour cette page

Contenu utile ?