progressbar tijdens consumeren webservice
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?
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
set_time_limit(0);
include ('../../class/dagboek.class.php');
$id = 583;
$webservice = new webservice($id);
$response = $webservice -> getdagboek($id);
echo $response;
?>
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?
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.
Op deze manier lege pagina tot ok komt
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<?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>
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>
Gewijzigd op 01/09/2017 14:24:11 door De Clercq Andy
Gewijzigd op 03/09/2017 00:18:24 door Frank Nietbelangrijk
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!
Gewijzigd op 02/09/2017 15:41:21 door De Clercq Andy
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.
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?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>
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?
Gewijzigd op 15/09/2017 11:44:58 door De Clercq Andy
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.
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 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 ...
na heel wat zoeken en testen heb ik een spinner gemaakt.
Hieronder de code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<html>
<head>
<style>
.sk-fading-circle {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-fading-circle .sk-circle {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-fading-circle .sk-circle:before {
content: '';
display: block;
margin: 0 auto;
width: 25%;
height: 25%;
background-color: #26888E;
border-radius: 100%;
-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleFadeDelay {
0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; }
}
@keyframes sk-circleFadeDelay {
0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; }
}
</style>
<title>Spinner</title>
</head>
<body>
<div class="sk-fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</body>
</html>
<head>
<style>
.sk-fading-circle {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-fading-circle .sk-circle {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-fading-circle .sk-circle:before {
content: '';
display: block;
margin: 0 auto;
width: 25%;
height: 25%;
background-color: #26888E;
border-radius: 100%;
-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleFadeDelay {
0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; }
}
@keyframes sk-circleFadeDelay {
0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; }
}
</style>
<title>Spinner</title>
</head>
<body>
<div class="sk-fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</body>
</html>
Maar nu blijft mijn probleem, hoe laat ik dit lopen zolang de webservice niet klaar is?
Dus hoe integreer ik bovenstaande spinner in deze pagina?
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
set_time_limit(0);
include ('../../class/dagboek.class.php');
$id = 583;
$webservice = new webservice($id);
$response = $webservice -> getdagboek($id);
echo $response;
?>
set_time_limit(0);
include ('../../class/dagboek.class.php');
$id = 583;
$webservice = new webservice($id);
$response = $webservice -> getdagboek($id);
echo $response;
?>
Alvast bedankt om mee te denken!
Gewijzigd op 22/09/2017 14:29:09 door De Clercq Andy