Ejemplo 1
Visualización del peso en cualquier navegador web de un servidor de peso de TP.NET. En el navegador web es necesario refrescar la página para ver el peso en aquel instante de tiempo.
Código:
(se considera que TP.NET está ejecutándose en un PC con dirección IP 192.168.0.103 y que el servidor de peso configurado en TP.NET está usando el puerto 55013)
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo 1 - Mostrar peso TP.NET servidor API json</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="mypanel"></div>
<script>
var myUrl = 'http://192.168.0.103:55013/json';
$.getJSON(myUrl, function(data) {
var text = `Peso: ${data.Gross} kg<br>`
$(".mypanel").html(text);
});
</script>
</body>
</html>
Ejemplo 2
Visualización del peso en cualquier navegador web de un servidor de peso de TP.NET. En el navegador web es necesario refrescar la página para ver el peso en aquel instante de tiempo.
Código:
(se considera que TP.NET está ejecutándose en un PC con dirección IP 192.168.0.103 y que el servidor de peso configurado en TP.NET está usando el puerto 55013)
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo 2 - Mostrar peso TP.NET servidor API json</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
.grossFont {
font-family: Consolas;
color: #939db4;
font-size: 30vw;
}
</style>
</head>
<body>
<div class="mypanel"></div>
<script>
var myUrl = 'http://192.168.0.103:55013/json';
$.getJSON(myUrl, function(data) {
var text = `<span class="grossFont">${data.Gross}</span><br>`
$(".mypanel").html(text);
});
</script>
</body>
</html>
Ejemplo 3
Visualización del peso en cualquier navegador web de un servidor de peso de TP.NET. La lectura se realiza automáticamente cada 250 milisegundos, por lo que no es necesario refrescar la página para ver el peso en aquel instante de tiempo.
Código:
(se considera que TP.NET está ejecutándose en un PC con dirección IP 192.168.0.103 y que el servidor de peso configurado en TP.NET está usando el puerto 55013)
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo 3 - Mostrar peso TP.NET servidor API json</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style type="text/css">
.grossFont {
font-family: "Audiowide", sans-serif;
color: #7A97FF;
font-size: 22vw;
}
</style>
</head>
<body>
<div class="mypanel" style="text-align: right;"></div>
<script>
var timerId = setInterval(function() {
var myUrl = 'http://192.168.0.103:55013/json';
$.getJSON(myUrl, function(data) {
var text = `<span class="grossFont">${data.Gross}</span><br>`
$(".mypanel").html(text);
});
}, 250);
</script>
</body>
</html>
Ejemplo 4
Visualización del peso en cualquier navegador web de múltiples servidores de peso de TP.NET. La lectura se realiza automáticamente cada 250 milisegundos, por lo que no es necesario refrescar la página para ver los pesos en aquel instante de tiempo.
Código:
(se considera que el TP.NET #1 está ejecutándose en un PC con dirección IP 192.168.0.103 con dos servidores de peso que usan los puertos 55013 y 55014, el TP.NET #2 está ejecutándose en un PC con dirección IP 192.168.0.114 con un servidor de peso en el puerto 55000 y que el TP.NET #3 está ejecutándose en un PC con dirección IP 192.168.0.117 con un servidor de peso en el puerto 55001)
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo 4 - Mostrar peso TP.NET servidor API json</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style type="text/css">
.grossFont1 {
font-family: "Audiowide", sans-serif;
color: #7A97FF;
font-size: 10vw;
}
.grossFont2 {
font-family: "Audiowide", sans-serif;
color: #FF5EC4;
font-size: 10vw;
}
.grossFont3 {
font-family: "Audiowide", sans-serif;
color: #FFFF7A;
font-size: 10vw;
}
.grossFont4 {
font-family: "Audiowide", sans-serif;
color: #679F35;
font-size: 10vw;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
div {
width: 50%;
height: 50%;
float: left;
}
div:nth-of-type(1) {
background: #ccc;
}
div:nth-of-type(2) {
background: #bbb;
border-left: 1px solid #f00;
}
div:nth-of-type(3) {
background: #aaa;
border-top: 1px solid #f00;
}
div:nth-of-type(4) {
background: #ddd;
border-top: 1px solid #f00;
border-left: 1px solid #f00;
}
</style>
</head>
<body>
<div class="myscale1" style="text-align: right;"></div>
<div class="myscale2" style="text-align: right;"></div>
<div class="myscale3" style="text-align: right;"></div>
<div class="myscale4" style="text-align: right;"></div>
<script>
var timerId = setInterval(function() {
var myUrl1 = 'http://192.168.0.103:55013/json';
var myUrl2 = 'http://192.168.0.103:55014/json';
var myUrl3 = 'http://192.168.0.114:55000/json';
var myUrl4 = 'http://192.168.0.117:55001/json';
$.getJSON(myUrl1, function(data) {
var text = `<span class="grossFont1">${data.Gross}</span><br>`
$(".myscale1").html(text);
});
$.getJSON(myUrl2, function(data) {
var text = `<span class="grossFont2">${data.Gross}</span><br>`
$(".myscale2").html(text);
});
$.getJSON(myUrl3, function(data) {
var text = `<span class="grossFont3">${data.Gross}</span><br>`
$(".myscale3").html(text);
});
$.getJSON(myUrl4, function(data) {
var text = `<span class="grossFont4">${data.Gross}</span><br>`
$(".myscale4").html(text);
});
}, 250);
</script>
</body>
</html>
Uso en dispositivos móviles
Al tener código HTML/JavaScript los ejemplos mostrados anteriormente funcionan en cualquier dispositivo móvil (Android, iOS, Windows Phone, etc) ya que se usa el navegador web integrado en dichos dispositivos. Esto permite ver el peso en el dispositivo móvil sin necesidad de instalar aplicaciones nativas (''Apps'').
Sirva como ejemplo la siguiente captura de pantalla:
A la izquierda un TP.NET con una báscula configurada como servidor de peso. En el centro el archivo HTML en el dispositivo móvil. A la derecha el resultado de abrir en el dispositivo móvil dicho archivo.
Si el dispositivo móvil permite ''girar la pantalla'' (hoy en día prácticamente el 100 % de los dispositivos), en el navegador web del dispositivo móvil se verá la página así:
