Feature Request: Auto-generate HTML Table to Display Energy Meter Tags

[Mehul097]

Summary:

We are managing 500 energy meters, and each meter has 11 tags (parameters like kWh, kW, voltage, etc.).

Manually placing each of these tags on SCADA-LTS display is time-consuming and inefficient.

---

✅ Goal:

To automatically generate an HTML table on the SCADA-LTS display that shows the 11 tags for each meter without manually adding each tag point to the display panel.

---

🔢 Example Use Case:

Instead of creating 5,500 individual display items (500 meters × 11 tags), we want to:

Write a single dynamic HTML table

Loop through all meter IDs

Auto-fill tag values using SCADA-LTS placeholders like ${tagName} or ${pointID}

---

📌 Sample HTML Table (for 1 meter):

Meter Name	Voltage (V)	Current (A)	Power (kW)	Energy (kWh)
Meter 001	${meter001_voltage}	${meter001_current}	${meter001_power}	${meter001_energy}

Now imagine this repeats for all 500 meters automatically using a loop or data-driven HTML generation logic.

---

🔧 Possible Solutions:

Option 1: Allow custom HTML with tag placeholders and loop logic in SCADA-LTS display panel

Option 2: Provide support for loading external HTML via URL or iframe with SCADA tag API

Option 3: Create a built-in macro or template engine to render repeating tag groups

---

💬 Request:

Please add support or guidance for:

Automating large tag display using structured HTML tables

Avoiding manual placement of each tag

Possibly loading from CSV/JSON to generate display

[fabiodurao]

There are a few different ways to achieve what you want without using external HTML. I'll cover two methods:

Important: For both methods to work, first of all, it's essential that you structure your project by defining the XIDs (which will be used in the server-side script screen) for each datapoint in a hierarchical fashion. To do this, access the datasource of interest and edit the datapoints, maintaining a pattern similar to this:

Datapoint Name | XID
Meter 001 - Voltage | meter001_voltage
Meter 001 - Current | meter001_current
....
Meter 002 - Voltage | meter002_voltage
Meter 002 - Current | meter002_current
....
....

Method 1 - Create 500 pages with automatic replication: Create only the first screen, for Meter001, for example. When accessing the Import/Export area, you can select the GraphicView checkbox and click on "generate json" and you will have access to the json that created the Meter001 screen, copy it and use something like an excel to replicate the next screens, as in the example below:

Of course, for creating 499 pages, this method already helps, but it could be even better. In scenarios like this, I think it makes sense to invest some time in a script to automate this project. It will take more time at first but will save a lot of time in the end. In this same Google Sheets, I started replicating manually, and since there were 240 units, I used Google App Script to automate the generation. Then, I just selected the ranges I wanted to generate in cells F6 and G6 and clicked the purple button for the script below to generate the JSON:

With this JSON, just go back to the import/export area, delete everything in the data window, and paste the generated JSON. Then, press the "Import" button. The process is very straightforward and will give you feedback on whether everything went well or if something went wrong. It's usually easy to understand what went wrong from the logs, and that's it, you'll have your 500 pages ready.

Method 2: You can have only one screen and select the meter of interest: To do this, you will need to create 11 unaltered numeric virtual data points. They will be used in the table. Also, create an unaltered numeric data point to store the meter number. This data point will be used on the screen in a dropdown menu that can be built using a server-side script component. Link this data point to the component and use a script similar to this:

s+="<select onChange='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", this.options[this.selectedIndex].value )'>";

s+= "<option value=1";
if (value == 1) { s+= "selected ";}
s+= "> Meter 001 </option>";

s+= "<option value=2";

if (value == 2 ) { s+= " selected ";}
s+= "> Meter 002 </option>";

s+= "<option value=3";
if (value == 3 ) { s+= " selected ";}
s+= "> Meter 003 </option>";

s+= "<option value=4";
if (value == 4 ) { s+= " selected ";}
s+= "> Meter 004 </option>";

s+="</select>";

return s;

You can place a button next to the dropdown to trigger a script (http://localhost:8080/Scada-LTS/scripting.shtm) or you can create a value detector event on this datapoint, which generates an event when the value changes:

With the event generated, you can go to the event handler (http://localhost:8080/Scada-LTS/event_handlers.shtm) and use a script handler that will call the script (http://localhost:8080/Scada-LTS/scripting.shtm) to change, copy, and write the values of the selected meter's datapoints to the virtual data point in the table:

The script is based on the printout:
dp.writeDataPoint('XID',value);

where:
dp: name of the generic datapoint object, defined in the datapoints commands field with the add checkbox checked;
writeDataPoint: command to write to the datapoint;
XID: This is the XID of the data point that will receive the value;
Value: This is the value that will be written to the destination XID.

dp.writeDataPoint('virtual_voltage',m001_voltage.value);

In this example, I'm getting the value of the data point in the context and calling it with .value. This script would need to be further refined by retrieving the value from the dropdown to construct the data point name using eval and then writing it to the virtual data point.

To build the table, you'll need to use the server-side script component. By default, it only accepts one linked data point. However, on the ScadaBR forum (pre-Scada-LTS version), we have a tutorial for using multiple data points in a single component (https://forum.scadabr.com.br/t/simplificando-a-leitura-de-valores-via-script-no-scadabr/4085/9). It's in Portuguese, but you can translate it. In short, you start by instantiating the dps by their xids, then build your table or whatever you want, and finally call the dataPointInfo(identifier) function:

//CSS
//1 - Instantiate the dps with the xids
var ponto2 = new dataPointInfo("DP_201122");

//2 - Build the table - use the ".ultimoValor()" method
table...

//3 - Call the dataPointInfo function
function dataPointInfo(identifier) {
/* Class code ... */
}

Here's an example from one of my projects:

code:

// —————— Variáveis de estilo ——————
var style = {
  fontSize:    '18px',
  rowHeight:   '45px',
  headerBg:    '#666',
  headerColor: '#fff',
  firstColBg:  '#747575',
  zebraEven:   '#e8e8e8',
  zebraOdd:    '#f2f2f2',
  textColor:   '#666'
};

// —————— Início da String HTML ——————
var S = "";

// —————— Bloco de CSS no topo ——————
S += '<style>';
S += '  #pumpTable {';
S += '    width:100% !important;';
S += '    border-collapse:collapse !important;';
S += '    font-family:Arial,sans-serif !important;';
S += '    font-size:' + style.fontSize + ' !important;';
S += '  }';
S += '  #pumpTable th, #pumpTable td {';
S += '    padding:8px !important;';
S += '    text-align:center !important;';
S += '    height:'   + style.rowHeight + ' !important;';
S += '    border:none !important;';
S += '    font-weight:normal !important;';
S += '    color:'     + style.textColor + ' !important;';
S += '  }';
S += '  #pumpTable th {';
S += '    background:' + style.headerBg    + ' !important;';
S += '    color:'      + style.headerColor + ' !important;';
S += '    cursor:pointer !important;';
S += '  }';
S += '  #pumpTable td:first-child {';
S += '    background:' + style.firstColBg   + ' !important;';
S += '    text-align:left !important;';
S += '    color:'      + style.headerColor  + ' !important;';
S += '  }';
S += '  #pumpTable td:nth-child(2) img {';
S += '    display:block !important;';
S += '    margin:0 auto !important;';
S += '  }';
S += '  #pumpTable tbody tr:nth-child(even) td:not(:first-child) { background:' + style.zebraEven + ' !important; }';
S += '  #pumpTable tbody tr:nth-child(odd)  td:not(:first-child) { background:' + style.zebraOdd  + ' !important; }';
S += '</style>';

// —————— Função de ordenação DESC apenas (col 0 asc, demais desc) ——————
S += '<script>';
S += 'window.sortTable = function(col){';
S += '  var tbl = document.getElementById("pumpTable");';
S += '  var switching = true;';
S += '  while(switching){';
S += '    switching = false;';
S += '    var rows = tbl.tBodies[0].rows;';
S += '    for(var i=0;i<rows.length-1;i++){';
S += '      var x = rows[i].cells[col], y = rows[i+1].cells[col], xv, yv;';
S += '      if(col==0){';
S += '        xv = x.innerText.toLowerCase();';
S += '        yv = y.innerText.toLowerCase();';
S += '      } else if(col==1){';
S += '        xv = x.querySelector("img").src.includes("led_1.png")?1:0;';
S += '        yv = y.querySelector("img").src.includes("led_1.png")?1:0;';
S += '      } else if(col==2){';
S += '        function toMin(str){var p=str.split("h");return parseInt(p[0])*60+parseInt(p[1]);}';
S += '        xv = toMin(x.innerText); yv = toMin(y.innerText);';
S += '      } else {';
S += '        xv = parseFloat(x.innerText.replace(",","."))||0;';
S += '        yv = parseFloat(y.innerText.replace(",","."))||0;';
S += '      }';
S += '      var shouldSwap = (col==0 ? (xv>yv) : (xv<yv));';
S += '      if(shouldSwap){';
S += '        tbl.tBodies[0].insertBefore(rows[i+1], rows[i]);';
S += '        switching = true; break;';
S += '      }';
S += '    }';
S += '  }';
S += '};';
S += '<\/script>';

// —————— Declaração dos datapoints ——————
var dp_p1_bba1_status   = new dataPointInfo("p1_di1_bba1Recalque");
var dp_p1_bba1_horas    = new dataPointInfo("p1_di1_horasL");
var dp_p1_bba1_pct      = new dataPointInfo("p1_di1_%L");
var dp_p1_bba1_partidas = new dataPointInfo("p1_di1_partidas");

var dp_p1_bba2_status   = new dataPointInfo("p1_di2_bba2Recalque");
var dp_p1_bba2_horas    = new dataPointInfo("p1_di2_horasL");
var dp_p1_bba2_pct      = new dataPointInfo("p1_di2_%L");
var dp_p1_bba2_partidas = new dataPointInfo("p1_di2_partidas");

var dp_p1_poco_status   = new dataPointInfo("p1_di3_pocoP1");
var dp_p1_poco_horas    = new dataPointInfo("p1_di3_horasL");
var dp_p1_poco_pct      = new dataPointInfo("p1_di3_%L");
var dp_p1_poco_partidas = new dataPointInfo("p1_di3_partidas");

var dp_p3_poco_status   = new dataPointInfo("p3_di1_poçoP3");
var dp_p3_poco_horas    = new dataPointInfo("p3_di1_horasL");
var dp_p3_poco_pct      = new dataPointInfo("p3_di1_%L");
var dp_p3_poco_partidas = new dataPointInfo("p3_di1_partidas");

var dp_p4_poco_status   = new dataPointInfo("p4_di1_poçoP4");
var dp_p4_poco_horas    = new dataPointInfo("p4_di1_horasL");
var dp_p4_poco_pct      = new dataPointInfo("p4_di1_%L");
var dp_p4_poco_partidas = new dataPointInfo("p4_di1_partidas");

var dp_p5_bba_status    = new dataPointInfo("p5_di1_bbaRecalque");
var dp_p5_bba_horas     = new dataPointInfo("p5_di1_horasL");
var dp_p5_bba_pct       = new dataPointInfo("p5_di1_%L");
var dp_p5_bba_partidas  = new dataPointInfo("p5_di1_partidas");

var dp_p5_poco_status   = new dataPointInfo("p5_di2_poçoP5");
var dp_p5_poco_horas    = new dataPointInfo("p5_di2_horasL");
var dp_p5_poco_pct      = new dataPointInfo("p5_di2_%L");
var dp_p5_poco_partidas = new dataPointInfo("p5_di2_partidas");

var dp_p6_poco_status   = new dataPointInfo("p6_di1_poçoP6");
var dp_p6_poco_horas    = new dataPointInfo("p6_di1_horasL");
var dp_p6_poco_pct      = new dataPointInfo("p6_di1_%L");
var dp_p6_poco_partidas = new dataPointInfo("p6_di1_partidas");

// —————— Array de bombas ——————
var bombas = [
  { nome:"P1-BBA 1 Recalque", vals:[dp_p1_bba1_status,  dp_p1_bba1_horas,  dp_p1_bba1_pct,  dp_p1_bba1_partidas] },
  { nome:"P1-BBA 2 Recalque", vals:[dp_p1_bba2_status,  dp_p1_bba2_horas,  dp_p1_bba2_pct,  dp_p1_bba2_partidas] },
  { nome:"P1-Poço",          vals:[dp_p1_poco_status,  dp_p1_poco_horas,  dp_p1_poco_pct,  dp_p1_poco_partidas] },
  { nome:"P3-Poço",          vals:[dp_p3_poco_status,  dp_p3_poco_horas,  dp_p3_poco_pct,  dp_p3_poco_partidas] },
  { nome:"P4-Poço",          vals:[dp_p4_poco_status,  dp_p4_poco_horas,  dp_p4_poco_pct,  dp_p4_poco_partidas] },
  { nome:"P5-BBA Recalque",  vals:[dp_p5_bba_status,   dp_p5_bba_horas,   dp_p5_bba_pct,   dp_p5_bba_partidas] },
  { nome:"P5-Poço",          vals:[dp_p5_poco_status,  dp_p5_poco_horas,  dp_p5_poco_pct,  dp_p5_poco_partidas] },
  { nome:"P6-Poço",          vals:[dp_p6_poco_status,  dp_p6_poco_horas,  dp_p6_poco_pct,  dp_p6_poco_partidas] }
];

// —————— Montagem da tabela ——————
S += '<table id="pumpTable">';
S += '  <thead>';
S += '    <tr>';
S += '      <th onclick="sortTable(0)">Bomba ▲</th>';
S += '      <th onclick="sortTable(1)">Status ▼</th>';
S += '      <th onclick="sortTable(2)">Horas ligada ▼</th>';
S += '      <th onclick="sortTable(3)">% ligada ▼</th>';
S += '      <th onclick="sortTable(4)">Partidas ▼</th>';
S += '    </tr>';
S += '  </thead>';
S += '  <tbody>';
for(var i=0; i<bombas.length; i++){
  S += '<tr>';
  // Nome da bomba
  S += '<td>'+bombas[i].nome+'</td>';
  // Status LED
  var st  = bombas[i].vals[0].ultimoValor();
  var img = st
    ? 'graphics/Led Verde e Vermelho/led_1.png'
    : 'graphics/Led Verde e Vermelho/led_0.png';
  S += '<td><img src="'+img+'" style="height:20px;display:block;margin:0 auto;"/></td>';
  // Horas ligada
  S += '<td>'+bombas[i].vals[1].ultimoValor()+'</td>';
  // % ligada: N/A se <0 ou >100
  var pct = bombas[i].vals[2].ultimoValor();
  var pctStr;
  if (typeof pct === 'number' && pct >= 0 && pct <= 100) {
    pctStr = pct.toFixed(1).replace('.',',') + '%';
  } else {
    pctStr = 'N/A';
  }
  S += '<td>'+pctStr+'</td>';
  // Partidas
  S += '<td>'+bombas[i].vals[3].ultimoValor()+'</td>';
  S += '</tr>';
}
S += '  </tbody>';
S += '</table>';

return S;

// —————— Função auxiliar para datapoints ——————
function dataPointInfo(id){
  var dpDAO = new com.serotonin.mango.db.dao.DataPointDao();
  var pvDAO = new com.serotonin.mango.db.dao.PointValueDao();
  var dpVO  = dpDAO.getDataPoint(id);
  if(!dpVO) throw new Error("DP não encontrado: "+id);
  this.id   = +dpVO.getId();
  this.tipo = +dpVO.getPointLocator().getDataTypeId();
  this.formataValor = function(v){
    switch(this.tipo){
      case 1: return String(v)==="true";
      case 3: return Number(v);
      case 2:
      case 4: return String(v);
      default: throw "Tipo inválido";
    }
  };
  this.ultimoValor = function(){
    return this.formataValor(pvDAO.getLatestPointValue(this.id).value);
  };
}

You can also create a table as a background image and position several simple datapoint components on the screen, each with a virtual DP (voltage, current, etc.) linked. It will work similarly.

Well, both will work, but it's worth mentioning that method 2 has a problem: you have a single screen, but it will be shared with all users and will not be instantiated individually for each user. This means that if user 1 selects meter007, user 2 will also see meter007.

I hope this helps. This topic would be better served in a forum. We have Stackoverflow, which is less busy, and the ScadaBR forum, which is more active. Most users on the Brazilian forum (scadabr) are already using Scada-LTS and will be able to help you. Also, consider participating in the ScadaBR training; there I teach all of this and more (https://www.scadabr.com.br/curso-scadabr/).

[Limraj]

Hi @Mehul097,

A similar effect can be achieved using special Select SQL components, which will generate a table based on a database table, by select query, and update by period. This will likely be implemented in version 2.9.0.

Then aggregating and refreshing values in the table will be as simple as writing a select SQL query and creating this one component.

#2893
#2894

Regards,
Kamil Jarmusik

[Limraj]

Hi @Mehul097,
If you need closer collaboration, technical support, or the addition of a new feature, we encourage commercial cooperation:scada-lts@softq.pl

Best regards.