(I am using an automatic translator)
Hello Wolffram,
The “Simple Point” component of ScadaBR does not really have many customization options, being limited to changes in background color.
Alternatively, you can use a “Server-side script” component, which allows you to create more dynamic HTML elements using the ScadaBR API.
I recently made a set of ready-made “Server-side scripts” templates, but the Javascript code uses comments and variable names in Portuguese… So, I’ll leave below an example that should work for you, with a part of the comments translated as best as I could (you only need to change the value of the variables in the initial lines to configure the element):
/* License: MIT */
// CONFIGURATION VARIABLES
// Description of the datapoint. Hidden if omitted
var descricao_do_datapoint = "Data Point";
// Prefix and suffix configuration
var prefixo = "";
var sufixo = "";
// Decimal places
var casas_decimais = 0;
// Minimal width
var largura_minima = 70;
// Minimal height
var altura_minima = 50;
// Background color
var cor_fundo = "black";
// Description text color
var cor_descricao = "white";
// Value text color
var cor_valores = "yellow";
// Font size
var tamanho_fonte = 11;
// Use bold? (true/false)
var usar_negrito = true;
// DO NOT CHANGE THE CODE BELOW
// (NÃO ALTERE A PARTIR DAQUI)
// Definindo classe única para os elementos
var classeDp = "datapoint" + pointComponent.id;
// Formatando o valor com prefixo/sufixo
var valorFormatado = prefixo + value.toFixed(casas_decimais) + sufixo;
//var fonte = "Arial, sans serif";
// Criando elementos HTML
var s = "";
s += "<table class='" + classeDp + "'>";
// Primeira linha (descrição)
s += " <tr> <td>" + descricao_do_datapoint + "</td> </tr>";
// Segunda linha (valor)
s += " <tr> <td>" + valorFormatado + "</td> </tr>";
s += "</table>";
// Criando estilos CSS
s += "<style>";
// Definindo fundo do datapoint
s += "." + classeDp + " {";
s += " height: " + altura_minima + "px;";
s += " width: " + largura_minima + "px;";
s += " background: " + cor_fundo + ";";
s += " border-collapse: collapse;";
s += " border: 1px solid;";
s += " border-color: gray;";
s += "}";
// Configurando fonte
s += "." + classeDp + " tr {"
s += " text-align: center;";
s += " font-size: " + tamanho_fonte + "px;";
//s += " font-family: " + fonte + ";";
if (usar_negrito == true) {
s += "font-weight: bold;";
}
s += "}";
// Configurando padding dos textos
s += "." + classeDp + " tr:nth-child(1) td {";
if ((descricao_do_datapoint.length > 0) && (typeof descricao_do_datapoint != "undefined")) {
s += " padding: 2px;";
s += " padding-bottom: 0px;";
} else {
s += " padding: 0px;";
}
s += "}";
s += "." + classeDp + " tr:nth-child(2) td {";
s += " padding: 1px;";
s += "}";
// Definindo a cor dos textos
s += "." + classeDp + " tr:nth-child(1) {";
s += "color: " + cor_descricao + ";";
s += "}";
s += "." + classeDp + " tr:nth-child(2) {";
s += " color: " + cor_valores + ";";
s += "}";
s += "</style>";
return s;
I hope this can be useful.
Sincerely,
Celso