How can I edit grapical components

#1

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

#2

(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