Refrescar porcentaje de barra de progreso

consigna · #1 (**permalink**) 31/01/2008, 03:42

Hola buenas, resulta que estoy desarrollando una aplicacion de procesamiento de logs, con la interfaz grafica en php. El problema que tengo es que cuando lanzo la aplicacion (construida en c++) desde php, voy guardando en un fichero de texto el porcentaje que lleva ejecutado. Con este porcentaje queria mostrar una barra de progreso que se fuera actualizando sin necesidad de ir recargando la pagina entera. ¿Hay alguna manera de realizar esto?

Gracias y un saludo

consigna · #2 (**permalink**) 01/02/2008, 11:26

nadie me puede hechar una mano?

estaria muy agradecido, ya que toy algo atascadillo con el pfc.

saludos

Panino5001 · #3 (**permalink**) 02/02/2008, 08:57

Bueno, te pongo un ejemplo:
Este es el archivo php que lee el estado desde un txt llamado contador.txt (en este caso, para probarlo, además actualiza el porcentaje, vos sólo lo leerás, ya que según entiendo lo actualizás con c++, así que tendrás que modificarlo para solamente leer el resultado y colocar la salida como para que la reciba javascript):
archivo: progreso.php

Código PHP:

  <?php
$fp=fopen('contador.txt','r');
$actual=intval(fread($fp,1024));
if(strlen($actual)>2 || strlen($actual)<1)$actual=0;
fclose($fp);
$fp=fopen('contador.txt','w+');
if($actual<100)
    fwrite($fp,++$actual);
fclose($fp);
echo 'porciento='.++$actual.';';
?>

Este es el archivo html que se comunica con progreso.php y dibuja la barra:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style>
#marco{
width:300px;
border:1px solid #000;
}
#barra{
width:0; background-color:#F00;
}
</style>
<script>
function rpc(url){
    oldsc=document.getElementById("old_sc");
       if(oldsc)
            document.getElementsByTagName('body')[0].removeChild(oldsc);
    sc=document.createElement('script');
    sc.id="old_sc";
    sc.src=url+'&'+Math.random();
    document.getElementsByTagName('body')[0].appendChild(sc);
}

function progress(porcentaje){
document.getElementById('barra').style.width=porcentaje+'%';
}
var porciento;
window.onload=function(){

var pp=setInterval(function(){progress(porciento);if(porciento>99){clearInterval(pp);};rpc('progreso.php?');},50);
}
</script>
</head>

<body>
<div id="marco"><div id="barra">&nbsp;</div></div>
</body>
</html>

consigna · #4 (**permalink**) 06/02/2008, 05:27

Hola panino, muchas gracias por responderme. He probado lo que me has puesto y no me funciona, he estado mirando para utilizar la libreria javascript prototype y he probado lo siguiente, pero tampoco me funciona, que estara fallando?

Progreso.html

Código PHP:

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Procesando</title> 
<style> 
#marco{ 
width:300px; 
border:1px solid #000; 
} 
#barra{ 
width:0; background-color:#F00; 
} 
</style> 
<script src="prototype.js" type="text/javascript"> </script> 
<script> 
 
var porciento; 
 
function rpc(url, porciento){ 
    url=url+'&'+Math.random(); 
    porciento= new Ajax.Request(url, 
  { 
    onSuccess: function(transport){ 
      var response = transport.responseText || "no response text"; 
      alert("Success! \n\n" + response); 
    }, 
    onFailure: function(){ alert('Something went wrong...') } 
  }); 
} 
 
function progress(porcentaje){ 
document.getElementById('barra').style.width=porcentaje+'%'; 
} 
 
window.onload=function(){ 
 
var pp=setInterval(function(){progress(porciento);if(porciento>99){clearInterval(pp);};rpc('procesando.php?', porciento);},50); 
} 
 
</script> 
</head> 
 
<body> 
<div id="marco"><div id="barra">&nbsp;</div></div> 
</body> 
</html>

y aqui lo que hago en la pagina procesando.php, que lo unico que saco es imprimir por pantalla el porcentaje que lleva ejecutado

Código PHP:

  
 
 
<?php 
 
//leemos el fichero de status.log, para ver el porcentaje que lleva procesado 
if(file_exists("tmp/status.log")){ 
 
   $fp = fopen ( "tmp/status.log" , "r" ); //abrimos el fichero status 
    
   fseek($fp,10,0); 
   $porcentaje=fgets($fp); 
   fclose($fp); 
   echo $porcentaje; 
} 
  
?>

Espero que alguien me pueda hechar una mano.

Saludos

Panino5001 · #5 (**permalink**) 06/02/2008, 06:54

No uso esa librería. Sólo asegurate de que se esté asignando el responseText a la variable porciento (podés sacar un alert de porciento en el evento onSuccess). Igualmente, lo otro lo probé y funciona correctamente.
Si tengo tiempo te paso un ejemplo usando XMLHttpRequest, pero si no te funcionó mi código anterior, quizá tengas problemas con el acceso al fichero desde php. Es otra cosa que deberías verificar, que el fopen esté funcionando correctamente, o que la página que lo actualiza no lo esté bloqueando con un flock.

consigna · #6 (**permalink**) 06/02/2008, 07:00

en explorer no sale nada, pero en firefox, si sale el alert success con el porcentaje bien ( la variable response), pero la barra de progreso no se actualiza.

Muchas gracias panino por tu ayuda.

saludos

Panino5001 · #7 (**permalink**) 06/02/2008, 07:16

No olvides que la habíamos llamado porciento a la variable que actualiza la barra.
Dame unos minutos y te preparo un ejemplo crossbrowser con XMLHttpRequest.

Panino5001 · #8 (**permalink**) 06/02/2008, 07:26

Se duplicó. Abajo está el ejemplo.

Panino5001 · #9 (**permalink**) 06/02/2008, 07:45

Ahí va:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style>
#marco{
width:300px;
border:1px solid #000;
}
#barra{
width:0; background-color:#F00;
}
</style>
<script>
function aj(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }
    else{
        try{
            return new ActiveXObject('Microsoft.XMLHTTP');
        }catch(e){
            alert('tu navegador no soporta ajax');
            return false;
        }
    }
}
var porciento;
function rpc(url){
   var rpc=aj();
    if(rpc){
        rpc.open('GET',url,true);
        rpc.onreadystatechange=function(){
            if(rpc.readyState==4){
                porciento=rpc.responseText;
            }
        }
        rpc.send(null);
    }
}

function progress(porcentaje){
document.getElementById('barra').style.width=porcentaje+'%';
}

window.onload=function(){

var pp=setInterval(function(){if(typeof porciento!='undefined')progress(porciento);if(porciento>99){clearInterval(pp);};rpc('procesando.php');},50);
}
</script>
</head>

<body>
<div id="marco"><div id="barra">&nbsp;</div></div>
</body>
</html>

consigna · #10 (**permalink**) 06/02/2008, 11:32

Gracias panino por el codigo, lo he probado y funciona a la perfeccion en el explorer, pero en firefox, no refresca la barra de progreso, aunque no da ningun tipo de error.

¿Como puedo ir sacando ademas de la barra de progreso el porcentaje que lleva ejecutado? Es que he probado a ponerlo en el codigo javascript con document.write(porciento) y no funciona.

Saludos y muchisimas gracias por tu ayuda

Panino5001 · #11 (**permalink**) 06/02/2008, 11:52

Probá colocando variando la url con un random a ver si es eso el problema en Firefox, así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<style> 
#marco{ 
width:300px; 
border:1px solid #000; 
} 
#barra{ 
width:0; background-color:#F00; 
} 
</style> 
<script> 
function aj(){ 
    if(window.XMLHttpRequest){ 
        return new XMLHttpRequest(); 
    } 
    else{ 
        try{ 
            return new ActiveXObject('Microsoft.XMLHTTP'); 
        }catch(e){ 
            alert('tu navegador no soporta ajax'); 
            return false; 
        } 
    } 
} 
var porciento; 
function rpc(url){ 
   var rpc=aj(); 
    if(rpc){ 
        rpc.open('GET',url,true); 
        rpc.onreadystatechange=function(){ 
            if(rpc.readyState==4){ 
                porciento=rpc.responseText; 
            } 
        } 
        rpc.send(null); 
    } 
} 
 
function progress(porcentaje){ 
document.getElementById('barra').style.width=porcentaje+'%'; 
} 
 
window.onload=function(){ 
 
var pp=setInterval(function(){if(typeof porciento!='undefined')progress(porciento);if(porciento>99){clearInterval(pp);};rpc('procesando.php?'+Math.random());},50); 
} 
</script> 
</head> 
 
<body> 
<div id="marco"><div id="barra">&nbsp;</div></div> 
</body> 
</html>

En cuanto al porcentaje, creá una capa, asignale un id y usá innerHTML:

Código PHP:

  <script> 
//esto debe colocarse dentro de la función anónima que llama el setInterval 
document.getElementById('capa').innerHTML=porciento; 
</script> 
<!--esto dentro del html:--> 
<div id="capa"></div>

Panino5001 · #12 (**permalink**) 06/02/2008, 12:11

Aquí tenés el ejemplo completo:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style>
#marco{
width:300px;
border:1px solid #000;position:relative;
}
#barra{
width:0; background-color:#F00;
}
#estado{
position:absolute; left:50%;
}
</style>
<script>
function aj(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }
    else{
        try{
            return new ActiveXObject('Microsoft.XMLHTTP');
        }catch(e){
            alert('tu navegador no soporta ajax');
            return false;
        }
    }
}
var porciento;
function rpc(url){
   var rpc=aj();
    if(rpc){
        rpc.open('GET',url,true);
        rpc.onreadystatechange=function(){
            if(rpc.readyState==4){
                porciento=rpc.responseText;
            }
        }
        rpc.send(null);
    }
}

function progress(porcentaje){
document.getElementById('barra').style.width=document.getElementById('estado').innerHTML=porcentaje+'%';
}

window.onload=function(){

var pp=setInterval(function(){if(typeof porciento!='undefined')progress(porciento);if(porciento>99){clearInterval(pp);};rpc('procesando.php?'+Math.random());},50);
}
</script>
</head>

<body>
<div id="marco"><div id="estado"></div><div id="barra">&nbsp;</div></div>
</body>
</html>

Ojo que había escrito ActiveX con la a en minúscula. Ya lo edité.

consigna · #13 (**permalink**) 06/02/2008, 14:56

Joder Panino, muchisimas gracias, lo he probado y funciona a la perfeccion con el explorer, en firefox se va actualizando el porcentaje pero no se va rellenando de rojo la barra de progreso.

Saludos y de nuevo muchas gracias por tu ayuda

Panino5001 · #14 (**permalink**) 06/02/2008, 15:02

Raro. Fijate si le pusiste bien la unidad px y % a los estilos y a la Modificación js. No sé qué decirte, yo lo veo perfecto en Explorer, Ópera y Firefox.

Panino5001 · #15 (**permalink**) 06/02/2008, 15:05

Si lo subís a algún lado, lo miramos.

consigna · #16 (**permalink**) 06/02/2008, 16:14

La verdad que si es raro, porque en explorer funciona a la perfeccion. mi codigo de progreso.html es

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<style> 
#marco{ 
width:300px; 
border:2px solid #000;position:relative; 
} 
#barra{ 
width:0; background-color:#0099FF; 
} 
#estado{ 
position:absolute; left:50%; 
} 
</style> 
<script> 
function aj(){ 
    if(window.XMLHttpRequest){ 
        return new XMLHttpRequest(); 
    } 
    else{ 
        try{ 
            return new ActiveXObject('Microsoft.XMLHTTP'); 
        }catch(e){ 
            alert('tu navegador no soporta ajax'); 
            return false; 
        } 
    } 
} 
var porciento; 
function rpc(url){ 
   var rpc=aj(); 
    if(rpc){ 
        rpc.open('GET',url,true); 
        rpc.onreadystatechange=function(){ 
            if(rpc.readyState==4){ 
                porciento=rpc.responseText; 
            } 
        } 
        rpc.send(null); 
    } 
} 
 
function progress(porcentaje){ 
document.getElementById('barra').style.width=document.getElementById('estado').innerHTML=porcentaje+'%'; 
} 
 
window.onload=function(){ 
 
var pp=setInterval(function(){ 
  if(typeof porciento!='undefined') 
      progress(porciento); 
  if(porciento>99){ 
     clearInterval(pp); 
     document.location.href='index.php?seccion=2&act=1'; 
  }; 
  rpc('procesando.php?'+Math.random());},50); 
} 
</script> 
</head> 
 
<body> 
<div id="marco"><div id="estado"></div><div id="barra">&nbsp;</div></div> 
</body> 
</html>

Panino5001 · #17 (**permalink**) 06/02/2008, 17:08

Yo lo veo bien en Firefox (me refiero a tu html). La barra y el porcentaje se muestran correctamente. Pero creo haber reproducido tu error: A la salida que genera php envolvela en un trim para quitarle los espacios:

Código PHP:

  <?php
echo trim($porcentaje);
?>

consigna · #18 (**permalink**) 07/02/2008, 03:18

Lo he probado en el trabajo y me funciona a la perfeccion tanto en explorer como en mozilla, muchisimas gracias por tu ayuda, llevaba bastante tiempo atascado con esto.

saludos y gracias

Panino5001 · #19 (**permalink**) 07/02/2008, 04:40

Uf, al fin! Me alegra que te haya servido