Olá pessoal, gostaria de compartilhar com voces 03 representações bem simples e fácil de serem inseridas e configuradas dentro do ScadaBR, os itens ficam um pouco mais personalizaveis.
Obs: BAR VERTICAL ja existe dentro do ScadaBR na biblioteca FuscaBR, o que fiz foi apenas inserir algumas funcionalidades que me atendece.
1- ESCALA DE 0 a 100% (HTML)
2- BAR VERTICAL-REPRESENTAÇÃO PARA VOLUMES (SCRIPT PARA SERVIDOR)
3- PERSONALIZAÇÃO VALORES EM TAGs (SCRIPT PARA SERVIDOR)
Todas as funções dentro do codigo BAR VERTICAL estão com descrições, as funções inseridas são: CANTOS ARREDONDADOS, SOMBRA EXTERNA, 03 SEGMENTOS DE CORES(BAIXO, MÉDIO e ALTO e a possibilidade de inserir texto com base no valor da barra e determinar qualquer valor para estas alternancias dos níveis)
Segue os códigos:
1- ESCALA DE 0 a 100% (HTML)
<!DOCTYPE html>
<html>
<head>
<title>Régua Vertical para SCADAbr</title>
<style>
/* Estilo da régua, renomear ".regua {" e "<div class="regua">" pelo mesmo nome para usar mais de um na mesma pagina*/
.regua {
width: 10px; /* Largura da régua */
height: 240px; /* Altura da régua */
border: 1px solid #00000000; /* Borda preta */
position: relative;
/* Propriedade "float" para alinhar a régua à esquerda */
float: left;
/* Adiciona sombra à régua */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
/* Estilo das divisões da régua */
.divisao {
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
background-color: #FFFFFF;
}
/* Estilo dos números da régua */
.numero {
position: absolute;
bottom: 0;
left: -2px; /* valor para que os números fiquem à esquerda */
font-size: 8px;
color: white; /* Altera cor dos números */
transform: translateX(-100%); /* Propriedade "translateX" para posicionar os números corretamente */
}
</style>
</head>
<body>
<div class="regua">
<!-- 11 divisões, ajuste conforme necessário -->
<div class="divisao" style="bottom: 0%;"></div>
<div class="divisao" style="bottom: 10%;"></div>
<div class="divisao" style="bottom: 20%;"></div>
<div class="divisao" style="bottom: 30%;"></div>
<div class="divisao" style="bottom: 40%;"></div>
<div class="divisao" style="bottom: 50%;"></div>
<div class="divisao" style="bottom: 60%;"></div>
<div class="divisao" style="bottom: 70%;"></div>
<div class="divisao" style="bottom: 80%;"></div>
<div class="divisao" style="bottom: 90%;"></div>
<div class="divisao" style="bottom: 100%;"></div>
<!-- Números correspondentes às divisões -->
<div class="numero" style="bottom: 0%;">0%</div>
<div class="numero" style="bottom: 10%;">10%</div>
<div class="numero" style="bottom: 20%;">20%</div>
<div class="numero" style="bottom: 30%;">30%</div>
<div class="numero" style="bottom: 40%;">40%</div>
<div class="numero" style="bottom: 50%;">50%</div>
<div class="numero" style="bottom: 60%;">60%</div>
<div class="numero" style="bottom: 70%;">70%</div>
<div class="numero" style="bottom: 80%;">80%</div>
<div class="numero" style="bottom: 90%;">90%</div>
<div class="numero" style="bottom: 100%;">100%</div>
</div>
</body>
</html>
2- BAR VERTICAL-REPRESENTAÇÃO PARA VOLUMES (SCRIPT PARA SERVIDOR)
/* @license MIT */
// O máximo e o mínimo para a escala do ponto de dados
var scale_min = 0;
var scale_max = 60;
// Personalize a barra
var bar_height = 370;
var bar_width = 230;
// Defina as cores para os três segmentos
var color_red = "#FF0000";
var color_yellow = "#FFFF00";
var color_blue = "#00BFFF";
var border_color = "#696969";
// Defina a cor de fundo e a cor da borda
var background_color = ""; // Substitua pela cor desejada
var new_border_color = "#696969"; // Substitua pela cor desejada
// Conversão da escala do ponto de dados para porcentagem
var percentage = 0;
if (value > scale_max) {
percentage = 100;
} else if (value < scale_min) {
percentage = 0;
} else {
percentage = ((value - scale_min) / (scale_max - scale_min)) * 100;
}
// Determine a cor com base no valor
var color = "";
if (value >= 0 && value <= 4) {
color = color_yellow;
} else if (value > 4 && value <= 56) {
color = color_blue;
} else {
color = color_red;
}
// Retorna a variável
var s = "";
s += "<div style='";
s += "border: 1px solid " + new_border_color + "; ";
s += "border-radius: 4px; "; // Adiciona cantos arredondados à borda
s += "position: relative; ";
s += "width: " + bar_width + "px; ";
s += "height: " + bar_height + "px; ";
s += "background-color: " + background_color + "; "; // Adiciona a cor de fundo
s += "box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); "; // Adiciona sombra 3D
// Adiciona gradiente à barra
s += "background-image: linear-gradient(to top, " + color + " 0%, " + color + " " + percentage + "%, transparent " + percentage + "%, transparent 100%); ";
s += "' >";
s += "<div style='";
s += "border-radius: 4px; "; // Adiciona cantos arredondados à barra
s += "width: 100%; ";
s += "height: 100%; ";
s += "position: absolute; bottom: 0px; left: 0px; ";
s += "' ></div>";
//
// CÓDIGO ADICIONAL: Texto com base no valor da barra
//
var text = "<b><font size=6 face=Arial color=white style='text-align: center; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);'>"; // Adicione o estilo CSS para centralizar o texto e a sombra
if (value >= 0 && value <= 4) {
text += "VOLUME MORTO";
} else if (value > 4 && value <= 56) {
text += "TANQUE";
} else if (value > 56 && value <= 59) {
text += "VOLUME PRÓXIMO AO MÁXIMO";
} else {
text += "ATENÇÃO VOLUME MÁXIMO";
}
text += "</font></b>";
s += "</div>";
// Adicione o texto à saída
s += text;
return s;
3- PERSONALIZAÇÃO VALORES EM TAGs (SCRIPT PARA SERVIDOR)
return ("<b><font size=6 face=Arial color=DeepSkyBlue> "+value.toFixed(3) + " Kg </font>");