Barre de progression html/CSS et VBScript

**Scartof** · 10/03/2011, 21h34

Bonjour
j'ai le code suivant inspiré d'une version utilisant un javascript. La barre de progression fonctionne mais me met une erreur lors de l'exécution de l'instruction : clearInterval(iTimer)
L'erreur : Type incompatible: 'iTimer'
J'ai cherché sans succès la cause possible.
Merci si quelqu'un a une réponse.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Essai barre</title>
  <style type="text/css">
  <!--
  #barreprog {
    position:absolute;
    left: 50%;
    width:300px;
    margin-left: -150px; /*cette ligne et les 3 préc permettent de centrer le div*/
    height: 1em;
    bottom: 15%;  
    padding:2px;
    background-color:white;
    border:1px solid black;
    }  
  #indicator{
    width:0px;
    height: 1em;
    background-color:green; 
    }
  //-->
  </style>  
 </head>
 <body>
  <script type="text/vbscript">
    dim indic
    maxprogress = 300   'total a atteindre
    actualprogress = 0  'valeur courante
 
  sub iTimer()
    dim iTimer
    iTimer = setInterval("prog", 1, "vbscript")
  end sub	
 
  sub prog()
      set indic = document.getElementById("indicator")
      actualprogress = actualprogress + 1	
      indic.style.width = actualprogress
      if actualprogress >= maxprogress then
        clearInterval(iTimer)
      end if
  end sub   
  </script>
 <div id="barreprog">
    <div id="indicator"> </div>
  </div>
  <input type="button" name="Submit" value="Lancer la progression" onclick="iTimer" />
  <input type="button" name="Submit" value="Stopper" onclick="clearInterval(iTimer)" />
 </body>
</html>

**SfJ5Rpw8** · 10/03/2011, 22h36

Bonsoir, un peu trop de chose nommées iTimer ..

déplace la déclaration de ta variable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
...
 <script type="text/vbscript">
    dim indic
	  dim iTimer
    maxprogress = 300   'total a atteindre
....

modifie le nom de ta procédure de lancement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
   actualprogress = 0  'valeur courante
 'Sub iTimer()  ==> remplacé par :
  sub StartTimer()
 
    iTimer = setInterval("prog", 1, "vbscript")
  end sub

et le bouton départ :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

  <input type="button" name="Submit" value="Lancer la progression" onclick="StartTimer" />

**Scartof** · 11/03/2011, 10h48

Bonjour
Merci beaucoup ça marche.
J'avais effectivement tenté de déplacer le 'dim iTimer' en début de code mais sans renommer le programme 'sub itimer'.
J'avais aussi essayé avec une procédure function

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function iTimer()    
    iTimer = setInterval("prog", 1, "vbscript")
end function

mais dans ce cas, la barre de progression ne s'arrête plus
Merci encore

**hackoofr** · 11/03/2011, 11h53

Envoyé par Scartof

Bonjour
Merci beaucoup ça marche.
J'avais effectivement tenté de déplacer le 'dim iTimer' en début de code mais sans renommer le programme 'sub itimer'.
J'avais aussi essayé avec une procédure function

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function iTimer()    
    iTimer = setInterval("prog", 1, "vbscript")
end function

mais dans ce cas, la barre de progression ne s'arrête plus
Merci encore

Essaye ce Code en le sauvegardant sous le nom ProgressBar.hta

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <HTA:APPLICATION ID="porgbar" APPLICATIONNAME="progbartest">
  <title>Test ProgressBar</title>
  <style type="text/css">
  <!--
  #barreprog {
    position:absolute;
    left: 50%;
    width:300px;
    margin-left: -150px; 
    height: 1em;
    bottom: 15%;  
    padding:2px;
    background-color:white;
    border:1px solid black;
    }  
 
  #indicator{
    width:0px;
    height: 1em;
    background-color:Red; 
    }
//-->
</style>  
 </head>
 <body>
  <script type="text/vbscript">
    Dim iTimer
    maxprogress = 300   
    actualprogress = 0  
 
  sub StartTimer()
    iTimer = setInterval("prog", 1, "vbscript")
  end sub     
 
  sub prog()
 
  dim indic
      set indic = document.getElementById("indicator")
      actualprogress = actualprogress + 1     
      indic.style.width = actualprogress
      if actualprogress >= maxprogress then
        StopTimer
      end if
End sub 
 
 Sub StopTimer()
  clearInterval(iTimer)
End Sub
 
  </script>
 <div id="barreprog">
    <div id="indicator"> </div>
  </div>
  <input type="button" name="Submit" value="Lancer Le progressBar" onclick="StartTimer" />
  <input type="button" name="Submit" value="Stop " onclick="StopTimer" />
 </body>
</html>

NB:si tu le sauvegarde sous l'extension .htm ou html alors il ne fonctionne qu'avec Internet Explorer car ce dernier supporte bien le VBscript sinon il faut que tu traduit le code écrit en VBscript en javascript pour qu'il fonctionne avec les autres Navigateurs comme Firefox,Opera,Google Chrome.

**hackoofr** · 11/03/2011, 14h30

Voila pour les intéressées a les Barres de Progression je vous poste ce Code en HTA (HTML applications HTA + VBScript) écrit par FredleDingue.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
<head>
<title id="title">ProgressBar 2.1</title>
<HTA:APPLICATION ID="porgbar" APPLICATIONNAME="progbartest">
<script language="vbscript">
 
	'---------------------------------
	'This is an example of progressbar
	'---------------------------------
Public x,y, MyTitle, iTimerID, KeepGoing
 
Sub Window_Onload
MyTitle = document.Title
id("ProgBarToDo").innerText = String(80, "_") & "|"  '----Fills the progressbar with gray. 
			'You can hardcode it in the body html, but it's more flexible like this
window.ResizeTo 720, 200       '----Resizing to a better size for a progressbar
x=0       '--- x will be the number of item done.
y=35     '--- y will be the number of item to do.
End Sub
 
Sub Go
'---FOR TEST ONLY---
Set fso = CreateObject("Scripting.FileSystemObject")
Set oof = fso.CreateTextFile("testpb.vbs", True)
oof.WriteLine "wscript.sleep WScript.Arguments(0)"  '---We'll run a sleep script so that 
			'we can see the progressbar going slowly
oof.Close
Set WshShell = CreateObject("WScript.Shell")
'----END OF TEST ONLY----
 
Progress(1)
	Do Until x=y
	x=x+1
	WshShell.Run "testpb.vbs 250",1,True  '----FOR TEST ONLY
		If KeepGoing = False Or window.screenTop > 10000 Then '---"window.screenTop > 10000" prevents 
					'the loop for continuing when the window is closed
		Exit Do
		End If
	Loop
Progress(0)
End Sub
 
Sub Progress(v)
	Select Case v
	Case 0  '---Stoping the progressbar activity---
		window.clearInterval(iTimerID)  '----Cancel the order to launch the Sub at the 500 milliseconds interval 
		iTimerID =""             '----Tells the program that iTimerID is nothing. 
					'Usefull to know if the progressbar is in activity or not.
		id("BtnGo").disabled = False       '----Allow the user to restart
		id("BtnCancel").disabled = True    '-----No need to press this button anymore
		id("BtnExit").disabled = False     '----Allow the user to exit the program
		Progress(2)            '----Update the progressbar one last time
		MsgBox "Operation finished.",,MyTitle
 
	Case 1  '---Starting the progressbar---
		iTimerID = window.setInterval("Progress(2)", 500)    '----- Launching the Sub Progress 
				'every 500 milliseconds with the variable 2
		id("BtnGo").disabled = True        '----No need to press the Go button twice
		id("BtnCancel").disabled = False   '---Allow the user to stop the process
		id("BtnExit").disabled = True      '----Forbid the user to close the program before it's over
		KeepGoing = True
		Progress(2)         '---- Once started we can update it already
 
	Case 2  '---Updating the progressbar---
		document.Title = FormatPercent(x/y, 0) & MyTitle  '---Add a nice percentage indication of the progrss 
						'in the title bar, also visible in the desktop taskbar
		id("ProgBarText").innerText = x & "/" & y  '----Shows the number of itmed done 
						'and the number of items to do
		d = Round( x / (y/80)  ,0)   '------Formula: 80 is the width of the progressbar 
						'in number of characters
		id("ProgBarDone").innerText = String(d, "_")  '----Draws the progressing blue line indicating what is done
		If d<80 Then   '----The bar is not full yet
		id("ProgBarToDo").innerText = String(80-d, "_") & "|"  '----Draws the remaining grey part of the progressbar
		Else     '----If the progressbar is full, just do this...
		id("ProgBarToDo").innerText = "|"  '---No grey part left at all
		End If			
	End Select
End Sub
 
Function id(o)
Set id = document.getElementById(o)
End Function
 
Sub Help
MsgBox "This is an example of progressbar in HTA written by Fredledingue.",,MyTitle
End Sub
 
</script>
</head>
<body bgcolor="GreenYellow">
<!-- Basic buttons -->
<input id="BtnGo"     type="button" value="Go"     onclick="Go">
<input id="BtnCancel" type="button" value="Cancel" onclick="KeepGoing=False" disabled="True">
<input id="BtnExit"   type="button" value="Exit"   onclick="window.close">
<input id="BtnHelp"   type="button" value="Help"   onclick="Help">
<br>
<!-- Progress bar -->
Done: <span id="ProgBarText">?</span><br>
<span id="ProgBarDone" style="background-color:blue"></span>
<span id="ProgBarToDo" style="background-color:silver"></span>
<!-- Progress bar (End) -->
</body>
</html>

**Scartof** · 11/03/2011, 14h31

Bonjour (re)

Merci pour vos contributions !
Mon problème est résolu.
La barre de progression fonctionne maintenant parfaitement sans erreur.

Pour ce qui est du HTA, je vais me documenter, je n'ai pas encore bien compris ses avantages/inconvénients par rapport au html.

Merci

**hackoofr** · 11/03/2011, 15h02

Envoyé par Scartof

Pour ce qui est du HTA, je vais me documenter, je n'ai pas encore bien compris ses avantages/inconvénients par rapport au html.

Voici un autre exemple plus avancé par le même auteur FredleDingue
Il fonctionne sur le même principe que celui de la barre de progression pour hta à la différence que cela montre une série de blocs de couleur, Bloc par Bloc.
Le script va afficher un bloc rouge lorsque la question a été traitée avec une erreur, une bleue lorsqu'ils sont traités normalement, un vert pour le cours de traitement et les gris pour ceux qui restent.
Ceux qui se souviennent de l'ancien "défragmenteur "de Windows 98 sauront de quoi je parle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
<head>
<title id="title">ProgressBar 2.1</title>
<HTA:APPLICATION ID="porgbar" APPLICATIONNAME="progbartest">
<script language="vbscript">
 
	'---------------------------------
	'This is an example of progressbar
	'---------------------------------
Public x,y, MyTitle, iTimerID, KeepGoing
ReDim PorgBarArray(1)
 
Sub Window_Onload
MyTitle = document.Title
End Sub
 
Sub Go
x=0   '--- x will be the number of item done.
y=350  '--- y will be the number of item to do.
'---FOR TEST ONLY---
Set fso = CreateObject("Scripting.FileSystemObject")
Set oof = fso.CreateTextFile("testpb.vbs", True)
oof.WriteLine "wscript.sleep WScript.Arguments(0)"  '---We'll run a sleep script so that 
			'we can see the progressbar going slowly
oof.Close
Set WshShell = CreateObject("WScript.Shell")
'----END OF TEST ONLY----
 
ReDim PorgBarArray(y+1)  '---Set an array where the content of the progressbar will be defined
	For i=1 To y
	PorgBarArray(i) = "g" '---Fill the array with "g", a square symbol in the Webdings font table
	Next
Progress(1)
	Do Until x=y
	x=x+1
	WshShell.Run "testpb.vbs 250",1,True  '----FOR TEST ONLY
	'---ERROR TESTING---
		If x=4 Or x=11 Or x=17 Or x=20 Or x=29 Or x=30 Then '---Conditions to create a fake error
		PorgBarArray(x) = "<span style=""color:red"">g</span>" '---It will be shown in red
		Else
		PorgBarArray(x) = "g" '---normal
		End If
	'----END OF ERROR TESTING----
		If KeepGoing = False Or window.screenTop > 10000 Then '---"window.screenTop > 10000" prevents 
					'the loop for continuing when the window is closed
		PorgBarArray(x+1) = "</span>g"  '---end of blue span
		Exit Do
		Else
		PorgBarArray(x+1) = "</span><span style=""color:green"">g</span>"  '--- next to do is 
						'shown in green + end of blue span
		End If
	Loop
PorgBarArray(y+1) = "</span>"  '---This makes the last block blue	
Progress(0)
End Sub
 
Sub Progress(v)
	Select Case v
	Case 0  '---Stoping the progressbar activity---
		window.clearInterval(iTimerID)  '----Cancel the order to launch the Sub at the 500 milliseconds interval 
		iTimerID =""             '----Tells the program that iTimerID is nothing. 
					'Usefull to know if the progressbar is in activity or not.
		id("BtnGo").disabled = False       '----Allow the user to restart
		id("BtnCancel").disabled = True    '-----No need to press this button anymore
		id("BtnExit").disabled = False     '----Allow the user to exit the program
		Progress(2)            '----Update the progressbar one last time
		MsgBox "Operation finished.",,MyTitle
 
	Case 1  '---Starting the progressbar---
		id("ProgBarDone").innerHtml = Join(PorgBarArray)  '---Populate the progressbar with blocks the first time
		PorgBarArray(0) = "<span style=""color:blue"">" '---Give the "blue" tag to next done items
		iTimerID = window.setInterval("Progress(2)", 500)    '----- Launching the Sub Progress 
				'every 500 milliseconds with the variable 2
		id("BtnGo").disabled = True        '----No need to press the Go button twice
		id("BtnCancel").disabled = False   '---Allow the user to stop the process
		id("BtnExit").disabled = True      '----Forbid the user to close the program before it's over
		KeepGoing = True
 
	Case 2  '---Updating the progressbar---
		document.Title = FormatPercent(x/y, 0) & MyTitle  '---Add a nice percentage indication of the progrss 
						'in the title bar, also visible in the desktop taskbar
		id("ProgBarText").innerText = x & "/" & y  '----Shows the number of itmed done 
						'and the number of items to do
		id("ProgBarDone").innerHtml = Join(PorgBarArray)  '---Fill the Progress bar with the Array 
						'where the blocks are defined
	End Select
End Sub
 
Function id(o)
Set id = document.getElementById(o)
End Function
 
Sub Help
MsgBox "This is an example of progressbar in HTA written by Fredledingue.",,MyTitle
End Sub
 
</script>
</head>
<body bgcolor="GreenYellow">
<!-- Basic buttons -->
<input id="BtnGo"     type="button" value="Go"     onclick="Go">
<input id="BtnCancel" type="button" value="Cancel" onclick="KeepGoing=False" disabled="True">
<input id="BtnExit"   type="button" value="Exit"   onclick="window.close">
<input id="BtnHelp"   type="button" value="Help"   onclick="Help">
<br>
<!-- Progress bar -->
Done: <span id="ProgBarText">?</span><br>
<span id="ProgBarDone" style="font-family:Webdings; color:silver"></span>
<!-- Progress bar (End) -->
</body>
</html>

Barre de progression html/CSS et VBScript

VBScript

Discussions similaires

Partager

Partager