Rafraichissement progressbar
Résolu/Fermé
none61
Messages postés
83
Date d'inscription
mercredi 23 avril 2014
Statut
Membre
Dernière intervention
14 avril 2020
-
7 oct. 2016 à 18:31
none61 Messages postés 83 Date d'inscription mercredi 23 avril 2014 Statut Membre Dernière intervention 14 avril 2020 - 9 oct. 2016 à 14:34
none61 Messages postés 83 Date d'inscription mercredi 23 avril 2014 Statut Membre Dernière intervention 14 avril 2020 - 9 oct. 2016 à 14:34
A voir également:
- Shaw direct rafraîchissement
- Telechargement direct - Accueil - Outils
- Vue satellite en direct gratuit de ma maison - Guide
- Modifier sa voix en direct - Guide
- Direct x runtime - Télécharger - Pilotes & Matériel
- Darkino officiel #1 site de téléchargement direct francophone - Accueil - Services en ligne
2 réponses
Utilisateur anonyme
8 oct. 2016 à 17:15
8 oct. 2016 à 17:15
Tu n'as pas cherché longtemps alors, car j'ai trouvé en 2 minutes ce que tu veux faire:
https://www.hongkiat.com/blog/html5-progress-bar/
Si on l'adapte pour toi en VanillaJS ça donne ceci:
Le CSS :
L'HTML :
Le JS :
https://www.hongkiat.com/blog/html5-progress-bar/
Si on l'adapte pour toi en VanillaJS ça donne ceci:
Le CSS :
#progressvalue { font-weight: bold; } #progressbar { width: 300px; margin: auto; } #progressbar { display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; width: 300px; height: 20px; padding: 3px 3px 2px 3px; background: #333; background: -webkit-linear-gradient(#2d2d2d,#444); background: -moz-linear-gradient(#2d2d2d,#444); background: -o-linear-gradient(#2d2d2d,#444); background: linear-gradient(#2d2d2d,#444); border: 1px solid rgba(0,0,0,.5); border-radius: 15px; box-shadow: 0 1px 0 rgba(255,255,255,.2); }
L'HTML :
<div id="progress"> <p>progress bar <span id="progressvalue">0%</span></p> <progress id="progressbar" value="0" min="0" max="100"></progress> </div>
Le JS :
var progressbar = document.getElementById('progressbar'), progressvalue = document.getElementById('progressvalue'), max = progressbar.max, time = (1000/max)*5, value = progressbar.value; var loading = function() { value += 1; addValue = progressbar.value = value; progressvalue.innerText = value + '%'; if (value == max) { clearInterval(animate); } }; var animate = setInterval(function() { loading(); }, time);
Utilisateur anonyme
8 oct. 2016 à 21:21
8 oct. 2016 à 21:21
Et tu la modifie comment la valeur, tu te bases sur quoi pour avoir le pourcentage ?
--
--
none61
Messages postés
83
Date d'inscription
mercredi 23 avril 2014
Statut
Membre
Dernière intervention
14 avril 2020
9 oct. 2016 à 10:22
9 oct. 2016 à 10:22
je t'explique mon installation pour que tu ai une vision plus global... ;-)
Je possède une tablette mural sur laquelle j'ai l'application "imperihome"
je possède un Pi avec un serveur apache.
et un Nas synology.
Parfois je télécharge des datas de chez un ami avec le Pi directement sur le Nas (Tout es en VPN avec montage de dossier distants.
Lors du téléchargement des Datas, j'aurais voulu que ma tablette imperihome pointe sur une page http hébergée sur mon Pi avec une barre de progression pour m'indiquer l'état l'avancement.
Pour cela je pensais faire un script bash qui me calculerai le pourcentage d'avancement et irai modifier la valeur de la "progressbar" dans le html .
C'est pourquoi je voulais savoir comment avoir une vision dynamique de la "progressbar" sur ma page http sans avoir besoin de recharger la page en entier car par la suite je ferai peux être évoluer mon system avec d'autre informations a afficher...
J'ai lu a droite et gauche qu'il fallait passer par du ajax mais sans explications concrète .
Merci pour ton aide
Je possède une tablette mural sur laquelle j'ai l'application "imperihome"
je possède un Pi avec un serveur apache.
et un Nas synology.
Parfois je télécharge des datas de chez un ami avec le Pi directement sur le Nas (Tout es en VPN avec montage de dossier distants.
Lors du téléchargement des Datas, j'aurais voulu que ma tablette imperihome pointe sur une page http hébergée sur mon Pi avec une barre de progression pour m'indiquer l'état l'avancement.
Pour cela je pensais faire un script bash qui me calculerai le pourcentage d'avancement et irai modifier la valeur de la "progressbar" dans le html .
C'est pourquoi je voulais savoir comment avoir une vision dynamique de la "progressbar" sur ma page http sans avoir besoin de recharger la page en entier car par la suite je ferai peux être évoluer mon system avec d'autre informations a afficher...
J'ai lu a droite et gauche qu'il fallait passer par du ajax mais sans explications concrète .
Merci pour ton aide
none61
Messages postés
83
Date d'inscription
mercredi 23 avril 2014
Statut
Membre
Dernière intervention
14 avril 2020
9 oct. 2016 à 11:48
9 oct. 2016 à 11:48
J'ai avancé un peu de mon coté.
Il s'avère qu'en faite c'est l'actualisation d'une div que je souhaite faire.
Pour ce faire j'ai trouvé plusieurs tutos qui me renvoient a peu prés les même réponses a savoir:
avoir une page html contenant ceci:
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_donnees').load('ma page.php').fadeIn("slow");
}, 10000); // rafraichis toutes les 10000 millisecondes
</script>
<body>
<div id="load_donnees"></div>
</body>
et avoir une page .php qui contient le contenu a actualiser qui dans mon cas est :
<div id="div1">
<p>progress bar <span id="progressvalue">0%</span></p>
<progress id="progressbar" value="0" min="0" max="100"></progress>
</div>
Visiblement le code java dans la page html sert a aller chercher le contenu de la page php et a le mettre dans la div contenant l'id load_donnees
Donc après normalement en modifiant value=0 dans la page php la page html devrait se trouver actualiser.
Cependant pour le moment avec ce system,je n'arrive pas encore a afficher la "progressbar" dans la page html
je continu mes investigations ;-)
Il s'avère qu'en faite c'est l'actualisation d'une div que je souhaite faire.
Pour ce faire j'ai trouvé plusieurs tutos qui me renvoient a peu prés les même réponses a savoir:
avoir une page html contenant ceci:
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_donnees').load('ma page.php').fadeIn("slow");
}, 10000); // rafraichis toutes les 10000 millisecondes
</script>
<body>
<div id="load_donnees"></div>
</body>
et avoir une page .php qui contient le contenu a actualiser qui dans mon cas est :
<div id="div1">
<p>progress bar <span id="progressvalue">0%</span></p>
<progress id="progressbar" value="0" min="0" max="100"></progress>
</div>
Visiblement le code java dans la page html sert a aller chercher le contenu de la page php et a le mettre dans la div contenant l'id load_donnees
Donc après normalement en modifiant value=0 dans la page php la page html devrait se trouver actualiser.
Cependant pour le moment avec ce system,je n'arrive pas encore a afficher la "progressbar" dans la page html
je continu mes investigations ;-)
none61
Messages postés
83
Date d'inscription
mercredi 23 avril 2014
Statut
Membre
Dernière intervention
14 avril 2020
9 oct. 2016 à 14:34
9 oct. 2016 à 14:34
Je m'auto-répond car j'ai trouvé la solution ;-)
voici le code javascript que j'ai utilisé pour que ça fonctionne:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#bloc').load('http://MON IP/progressbar.php').fadeIn("slow");
}, 100); // refresh every 100 milliseconds
</script>
Merci quand même
voici le code javascript que j'ai utilisé pour que ça fonctionne:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#bloc').load('http://MON IP/progressbar.php').fadeIn("slow");
}, 100); // refresh every 100 milliseconds
</script>
Merci quand même
Modifié par none61 le 8/10/2016 à 18:11
Merci pour ta réponse.
J'ai pourtant cherché bien longtemps avant de venir poster le forum mais bon..bref :-)
J'ai essayé ce que tu m'a posté
j'ai just ajouté <style> </style> autour du css et <script type="text/javascript"></script> autour du code java script car dans un premier temp je laisse ce dernier dans la meme page que l'html.
J'ai sans doute dû mal faire car lorsque je réactualise la page, la barre monte toute seul jusqu'a 100. Hors je veux just que la barre m'affiche la valeur de value au fur et a mesure que je la modifie...