Exemple 1
Affichage du poids dans n'importe quel navigateur web sur un serveur de poids TP.NET. Dans le navigateur web, il est nécessaire de rafraîchir la page pour voir le poids à cet instant.
Code:
(On considère que TP.NET fonctionne sur un PC avec l'adresse IP 192.168.0.103 et que le serveur de poids configuré dans TP.NET utilise le port 55013)
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple 1 - Affichage du poids json de l'API du serveur TP.NET</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>
Exemple 2
Affichage du poids dans n'importe quel navigateur web sur un serveur de poids TP.NET. Dans le navigateur web, il est nécessaire de rafraîchir la page pour voir le poids à cet instant.
Code:
(On considère que TP.NET fonctionne sur un PC avec l'adresse IP 192.168.0.103 et que le serveur de poids configuré dans TP.NET utilise le port 55013)
<!DOCTYPE html>
<html lang="es">
<head>
<title>Exemple 2 - Affichage du poids json de l'API du serveur TP.NET</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>
Exemple 3
Affichage du poids dans n'importe quel navigateur web sur un serveur de poids TP.NET. La lecture se fait automatiquement toutes les 250 millisecondes, il n'est donc pas nécessaire de rafraîchir la page pour voir le poids à cet instant.
Code:
(On considère que TP.NET fonctionne sur un PC avec l'adresse IP 192.168.0.103 et que le serveur de poids configuré dans TP.NET utilise le port 55013)
<!DOCTYPE html>
<html lang="es">
<head>
<title>Exemple 3 - Affichage du poids json de l'API du serveur TP.NET</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>
Exemple 4
Affichage du poids dans n'importe quel navigateur web à partir de plusieurs serveurs de poids TP.NET. La lecture se fait automatiquement toutes les 250 millisecondes, il n'est donc pas nécessaire de rafraîchir la page pour voir les poids à cet instant.
Code:
(On considère que TP.NET #1 fonctionne sur un PC avec l'adresse IP 192.168.0.103 avec deux serveurs de poids utilisant les ports 55013 et 55014, on considère que TP.NET #2 fonctionne sur un PC avec l'adresse IP 192.168.0.114 avec un serveur de poids sur le port 55000 et on considère que TP.NET #3 fonctionne sur un PC avec l'adresse IP 192.168.0.117 avec un serveur de poids sur le port 55001).
<!DOCTYPE html>
<html lang="es">
<head>
<title>Exemple 4 - Affichage du poids json de l'API du serveur TP.NET</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>
Utilisation sur les appareils mobiles
Grâce au code HTML/JavaScript, les exemples présentés ci-dessus fonctionnent sur n'importe quel appareil mobile (Android, iOS, Windows Phone, etc.) puisque le navigateur Web intégré à ces appareils est utilisé. Cela permet de visualiser le poids sur l'appareil mobile sans avoir à installer d'applications natives (''Apps'').
La capture d'écran suivante est un exemple :
A gauche, un TP.NET avec une bascule configurée comme serveur de poids. Au centre, le fichier HTML sur l'appareil mobile. À droite, le résultat de l'ouverture du fichier sur l'appareil mobile.
Si l'appareil mobile permet la ''rotation de l'écran'' (presque 100 % des appareils de nos jours), la page ressemblera à ceci dans le navigateur web de l'appareil mobile:
