How can I edit grapical components

System: Raspberry pi 3, Raspbian, tomcat 7, ScadaBR

Dear community,

When creating a process picture I have the following problem:
I select the Simple Point component to be inserted and insert it into the graphic view.
I’m adding a data point.
I tried to change the style of the component, which only works with the font color.
My question:
How and where do you configure this component, so that as many styles as possible are inserted into the graphic view
can be changed?

Many Thanks,
Wolffram hunger

(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

1 curtida