Antes que nada, reciban un cordial saludo.
He estado investigando algunos métodos para representar información, valores y datos vía el navegador (WEB) de la manera mas sencilla posible y para el caso de caratulas como Voltmetros, Amperimetros, Termometros, etc. Llegue a la siguiente librería o utilitaria escrita en JS (Java Script) y que fue desarrollada por Mykhailo Stadnyk y el sitio donde se ofrece esta herramienta es:
https://canvas-gauges.com/
Si navegan por el sitio podrán apreciar la gran versatilidad que tiene su herramienta y en su momento he podido aprovecharla en algunas aplicaciones "IOT" (Internet de las cosas), si bien no soy experto programador he logrado mostrar datos provenientes de mysql, php o python.
Por el momento dejo una pequeña demostración, que deje en mi sitio web, de un simple "medidor de temperatura" que muestra el valor según se indique; obviamente no existe ninguna interacción con algún hardward ya que el tema es mostrar la forma de como estoy logrando mis caratulas.
http://www.ofanele.com/mike/curso/demo_2.html#
Como se podrá apreciar en la instruccion :
<script src="gauge.min.js">"></script>
Se hace referencia al archivo "gauge.min.js" que dejo anexado en el archivo ZIP y que se obtuvo en el sitio del autor.
Y en el siguiente link otra forma de crear caratulas:
http://www.ofanele.com/mike/curso/medidor.html#
y su codigo:
La razón de este tema es para compartir esta información y saber su opinión al respecto, pero la mas importante para mi es preguntarles:
¿Conocen otro método para hacer caratulas, reglas o como crear "tableros" para presentar datos via WEB?
Saludos y espero sus comentarios
He estado investigando algunos métodos para representar información, valores y datos vía el navegador (WEB) de la manera mas sencilla posible y para el caso de caratulas como Voltmetros, Amperimetros, Termometros, etc. Llegue a la siguiente librería o utilitaria escrita en JS (Java Script) y que fue desarrollada por Mykhailo Stadnyk y el sitio donde se ofrece esta herramienta es:
https://canvas-gauges.com/
Si navegan por el sitio podrán apreciar la gran versatilidad que tiene su herramienta y en su momento he podido aprovecharla en algunas aplicaciones "IOT" (Internet de las cosas), si bien no soy experto programador he logrado mostrar datos provenientes de mysql, php o python.
Por el momento dejo una pequeña demostración, que deje en mi sitio web, de un simple "medidor de temperatura" que muestra el valor según se indique; obviamente no existe ninguna interacción con algún hardward ya que el tema es mostrar la forma de como estoy logrando mis caratulas.
http://www.ofanele.com/mike/curso/demo_2.html#
Código:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Medidor de Temperatura</title>
<script src="gauge.min.js">"></script>
<style>body {
padding: 20px;
margin: 0;
background: #fff
}</style>
</head>
<body>
<a href="#" onclick="temperatura.value=0">0</a>
<a href="#" onclick="temperatura.value=50">50</a>
<a href="#" onclick="temperatura.value=100">100</a>
<a href="#" onclick="temperatura.value=250">250</a>
<a href="#" onclick="temperatura.value=583">583</a>
<a href="#" onclick="temperatura.value=830">830</a>
<hr>
<canvas id="MedTemp"></canvas>
<script>
var temperatura = new RadialGauge({
renderTo: 'MedTemp',
width: 400,
height: 400,
units: 'PS',
minValue: 0,
maxValue: 1000,
majorTicks: [
'0',
'100',
'200',
'300',
'400',
'500',
'600',
'700',
'800',
'900',
'1000'
],
minorTicks: 2,
ticksAngle: 270,
startAngle: 45,
strokeTicks: true,
highlights : [
{ from : 457, to : 880, color : 'rgba(78, 78, 76, 0.5)' },
{ from : 880, to : 1000, color : 'rgba(225, 7, 23, 0.75)' }
],
valueInt: 1,
valueDec: 0,
units: "°C",
title: "Temperatura",
colorPlate: "#fff",
colorMajorTicks: "#686868",
colorMinorTicks: "#686868",
colorTitle: "#000",
colorUnits: "#000",
colorNumbers: "#686868",
valueBox: true,
colorValueText: "#000",
colorValueBoxRect: "#fff",
colorValueBoxRectEnd: "#fff",
colorValueBoxBackground: "#fff",
colorValueBoxShadow: false,
colorValueTextShadow: false,
colorNeedleShadowUp: true,
colorNeedleShadowDown: false,
colorNeedle: "rgba(200, 50, 50, .75)",
colorNeedleEnd: "rgba(200, 50, 50, .75)",
colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
borderShadowWidth: 0,
borders: true,
borderInnerWidth: 0,
borderMiddleWidth: 0,
borderOuterWidth: 5,
colorBorderOuter: "#fafafa",
colorBorderOuterEnd: "#cdcdcd",
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "dequint",
fontNumbers: "Verdana",
fontTitle: "Verdana",
fontUnits: "Verdana",
fontValue: "Led",
fontValueStyle: 'italic',
fontNumbersSize: 20,
fontNumbersStyle: 'italic',
fontNumbersWeight: 'bold',
fontTitleSize: 24,
fontUnitsSize: 22,
fontValueSize: 50,
animatedValue: true
});
temperatura.draw();
temperatura.value = "10";
</script>
</body>
</html>Como se podrá apreciar en la instruccion :
<script src="gauge.min.js">"></script>
Se hace referencia al archivo "gauge.min.js" que dejo anexado en el archivo ZIP y que se obtuvo en el sitio del autor.
Y en el siguiente link otra forma de crear caratulas:
http://www.ofanele.com/mike/curso/medidor.html#
y su codigo:
Código:
<!doctype html>
<html>
<head>
<title>Medidor</title>
<script src="gauge.min.js"></script>
</head>
<body>
<!-- Injecting linear gauge -->
<canvas data-type="linear-gauge"
data-width="160"
data-height="600"
data-border-radius="20"
data-borders="0"
data-bar-stroke-width="20"
data-minor-ticks="10"
data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
data-value="45.3"
data-units="°C"
data-color-value-box-shadow="false"
></canvas>
<!-- Injecting radial gauge -->
<canvas data-type="radial-gauge"
data-width="400"
data-height="400"
data-units="Vumetro"
data-title="false"
data-value="25"
data-min-value="0"
data-max-value="220"
data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
data-minor-ticks="2"
data-stroke-ticks="false"
data-highlights='[
{ "from": 0, "to": 50, "color": "rgba(0,255,0,.15)" },
{ "from": 50, "to": 100, "color": "rgba(255,255,0,.15)" },
{ "from": 100, "to": 150, "color": "rgba(255,30,0,.25)" },
{ "from": 150, "to": 200, "color": "rgba(255,0,225,.25)" },
{ "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
]'
data-color-plate="#222"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-title="#fff"
data-color-units="#ccc"
data-color-numbers="#eee"
data-color-needle-start="rgba(240, 128, 128, 1)"
data-color-needle-end="rgba(255, 160, 122, .9)"
data-value-box="true"
data-animation-rule="bounce"
data-animation-duration="500"
data-font-value="Led"
data-animated-value="true"
></canvas>
</body>
</html>La razón de este tema es para compartir esta información y saber su opinión al respecto, pero la mas importante para mi es preguntarles:
¿Conocen otro método para hacer caratulas, reglas o como crear "tableros" para presentar datos via WEB?
Saludos y espero sus comentarios
