Hallo,
ik heb een werkende webservice die een pdf bestand aanmaakt en eens klaar ok returnt in json.
Gewoon aanroepen en uitlezen boodschap (ok) lukt perfect. Nadeel is dat het soms relatief lang duurt.
Daarom zou ik graag een progressbar of als dat njet lukt toch een boodschap tonen tijdens het consumeren an die service. Progressbar op zich heb ik al gemaakt met ajax en ook ene in html5 maar nu begrijp ik niet hoe ik dit gebruik in mijn php code.
Waar plaats ik wat opdat hij dit tijdens het consumeren toont?
<?php
set_time_limit(0);
include ('../../class/dagboek.class.php');
$id = 583;
$webservice = new webservice($id);
$response = $webservice -> getdagboek($id);
echo $response;
?>
Dit is een kort iets waarin ik die service aanroep, eens deze uitgevoerd kan de gebruiier de aangemaakte pdf downloaden. Ook hiervoor heb ik al code. Probleem ligt hem dus louter bij implementeren progressbar.
Hoe ne waar moet dat?
Waarom geen spinner, bijvoorbeeld in de stijl van material design?

https://codepen.io/mrrocks/pen/EiplA

Zo bespaar je alle overhead voor het berekenen of schatten van percentages of seconden voor een nauwkeurig oplopende progress bar.
Dit lijkt inderdaad een goede oplosssing. Probleem blijft wel hoe integreer ik dit binnen mijn bestaande code.
Op deze manier lege pagina tot ok komt

<?php
set_time_limit(0);
include ('../../class/dagboek.class.php');
$id = 583;
?>
<html>
<head>
	<title>Testen spinner</title>
	<style>
	// This is just to center the spinner

html, body { height: 100%; }

body {
   display: flex;
   align-items: center;
   justify-content: center;
}

// Here is where the magic happens

$offset: 187;
$duration: 1.4s;

.spinner {
  animation: rotator $duration linear infinite;
}

@keyframes rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}

.path {
  stroke-dasharray: $offset;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation:
    dash $duration ease-in-out infinite, 
    colors ($duration*4) ease-in-out infinite;
}

@keyframes colors {
	0% { stroke: #4285F4; }
	25% { stroke: #DE3E35; }
	50% { stroke: #F7C223; }
	75% { stroke: #1B9A59; }
  100% { stroke: #4285F4; }
}

@keyframes dash {
 0% { stroke-dashoffset: $offset; }
 50% {
   stroke-dashoffset: $offset/4;
   transform:rotate(135deg);
 }
 100% {
   stroke-dashoffset: $offset;
   transform:rotate(450deg);
 }
}
	</style>
</head>
<body>
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
   <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
<?php
$webservice = new webservice($id);
$response = $webservice -> getdagboek($id);
sleep(10);
echo $response;
?>
</body>
</html>
De svg staat nu buiten je body. dat is natuurlijk niet goed. Verder kan ik je zo nog even niet helpen omdat ik geen code zie dat de pdf genereert?
Die pdf wordt aangemaakt in de webservice. Doet hier niet echt iets.
Eens dit script uitgevoerd zou er een button moeten komen die een download button toont.
Dit is eens de ok gereturnd is.
Intussen met dus deze spinner komen.
waarom staat hij buiten de body? Body open op 64 en de svg open op 65.
Of is er iets anders mis?
Alvast bedankt voor de reactie!
Sorry de svg staat wel in de body. Had zeker mijn bril niet op :P

Om dit soort dingen te maken moet je heel erg goed denken in requests en responds en het feit dat PHP pas aan de gang gaat als de client een request doet.

aanpak:
de pagina waar de AJAX ook instaat moet voorzien worden van Ward zijn spinner. Deze moet zichtbaar worden net voordat de ajax request gedaan wordt.

Op dezelfde pagina moet een download knop komen welke in beginsel verborgen is. pa s wanneer het response komt met de JSON OK moet de download knop zichtbaar gemaakt worden.
Hallo,
heb al heel wat getest en gezocht.
Nu heb ik een werkende class voor mijn progressbar in php.
Deze tonen in een "gewone" pagina lukt perfect.
Aanroepen en checken json stond al op punt.
Hoe combineer ik nu beide?
Voorlopig komt ik niet verder dan eeuwige lussen of foutmeldingen.
Dit is mijn probeersel:

<?php
set_time_limit(0);
include ('../../class/dagboek.class.php');
include ('../../class/progressbar.class.php');
$id = 583;
?>
<head>
	<title>Testen progressbar</title>
<?php
Progressbar::draw_css();
?>
</head>
<body>
<?php
$progressbar = new Progressbar(100,'%d van %d voltooid');
$webservice = new Webservice($id);
$progressbar->draw();
do {
	$progressbar -> tick();
	}
while ($json !== $webservice -> getdagboek($id));
if ($json ="ok")
{
echo $json;
}
else
{
echo "Er is iets fout gelopen";
}

?>
</body>
</html>

Hoe kan ik de pagina wijs maken dat de progressbar enkel is tijden aanroepen webservice?
PHP draait op de webserver. Als jij met je webbrowser een .php pagina opvraagt bij je webserver dan gaat je server eerst dat script uitvoeren en wacht tot het script beëindigd is. Pas wanneer het script beëindigd is zal de output van het script eenmalig naar de browser verstuurd worden. En pas dan wordt er een pagina getoond.

Wil je een scriptje laten draaien in de browser dan kan dat niet met PHP maar wel met javascript.

Nu zie ik dus in PHP een do while staan die iets met een progressbar probeert te doen. Dat gaat dus niet met PHP.
Hey,
dacht ik ook maar daar die php class met progressbar werd ik verward, sorry.
Maar kan ik die php progressbar niet aanroepen in jquery ofzo.
Dat ken ik een beetje, maar nog niet zo goed.
Verder blijft dan ook nog mijn probleem waar plaats ik die jquery?
Als je een progress bar wilt tonen (en geen spinner begrijp ik), dan moet je vanuit je webservice wel feedback krijgen over hoe ver ie is (anders kun je dat ook niet terugkoppelen naar je progress bar). Als je alleen maar weet wanneer ie 'klaar' is zal je progress bar alleen de standen 0% (start) en 100% (klaar) tonen. Niet heel spannend.

Als je feedback krijgt kun je deze waarde bijvoorbeeld in de sessie opslaan. Deze moet je dan steeds openen (session_start()) en sluiten (session_write_close()). Hierdoor kunnen andere scripts ook door, zonder dat ze op de sessie moeten wachten. Op die manier kun je dan via een parallelle, asynchrone aanroep vanaf de client (javascript/jQuery) in diezelfde sessie kijken hoe ver het genereren is, en dit terugkoppelen naar de client (browser).

Krijg je geen feedback uit de webservice, dan kun je ook inschatten hoe lang het ongeveer gaat duren. De progress bar laat je client-side (javascript) in die tijd van 0 to 90% gaan. Als de webservice daarna toch nog niet klaar is laat je 'm nog heel langzaam doorlopen, maar zodanig dat ie nooit de 100% haalt. Pas als de webservice echt klaar is knal je 'm naar de 100% (en dus ook als ie 'te vroeg' klaar is.

Dus niet echt een weergave van de progressie, maar in Windows zit ik ook regelmatig naar dit soort 'progress bars' te kijken ...
Neem gewoon een spinner zoals Ward zei. Die blijf rustig doordraaien totdat taak verwerkt is. Een echte progressbar waar telkens de actuele stand van zaken voor opgehaald moet worden heeft veel nadelen.

Reageren