North Atlanta Web Design » Progress Bar https://www.northatlantawebdesign.com Programming Examples, Samples, and Tutorials Mon, 15 Aug 2011 20:18:35 +0000 en-US hourly 1 https://wordpress.org/?v=3.7.41 HTA Progress Bar using VBScript and JavaScript https://www.northatlantawebdesign.com/index.php/2009/07/17/hta-progress-bar-using-vbscript-and-javascript/ https://www.northatlantawebdesign.com/index.php/2009/07/17/hta-progress-bar-using-vbscript-and-javascript/#comments Fri, 17 Jul 2009 17:53:30 +0000 http://www.northatlantawebdesign.com/?p=88 I was informed after my last post that using HTA (HTML Applications) to display a progress bar in VBScript is much more efficient than using InternetExplorer.Application within a VBScript. Having never used HTA before, I immediately set out to learn a bit and see what I could come up with.

My initial thoughts are mixed, as you can not run and interact with an HTA from a VBScript file.  This requires you to wrap your VBScript code in whatever HTML Application you are writing. This greatly limits re-usability, enough so that the increase in performance may not warrant using an HTA for a progress bar in most cases.

I would like to note that this is a first draft of this script, and I may update it in the future, if I deem HTML Applications the way to go.  As for now, I am not convinced.

<html>
<head>
	<title>HTA Progress Bar</title>
<script language="vbscript">
'This script resizes and moves the window to the center of the screen.
'The placement of this code above the HTA definition, moves the window
'before the script is visible. 
height = screen.height
width = screen.width
moveto width/2 - 335/2,height/2 - 200/2
resizeto 335,200
</script>
	<HTA:APPLICATION ID="oMyApp"
		APPLICATIONNAME="monster"
		SINGLEINSTANCE="yes"
		BORDER="thin"
		MAXIMIZEBUTTON="no"
>

<script language="VBScript" type="text/vbscript">
'This is where your VBScript logic should go.
' Call OpenProgressBar to open the progressbar
' Call UpdateLog to update the logging window
' Call UpdateProgressBar to move the bar
' Call CloseProgressBar to return to your main UI window
Sub BeginImportingFiles()
	Dim i
	OpenProgressBar()
	UpdateLog "Step 1 of 2", ""
	For i = 1 to 10
		Sleep 100
		UpdateLog "Next Step", "" & Time()
		UpdateProgressBar i*10, "Step 1 of 2"
	Next
	UpdateLog "Step 1 of 2", "Complete"
	Sleep 2000
	CloseProgressBar()
End Sub

Sub Sleep(MSecs) 
	Set fso = CreateObject("Scripting.FileSystemObject")
	If Fso.FileExists("sleeper.vbs")=False Then
	Set objOutputFile = fso.CreateTextFile("sleeper.vbs", True)
	objOutputFile.Write "wscript.sleep WScript.Arguments(0)"
	objOutputFile.Close
	End If
	CreateObject("WScript.Shell").Run "sleeper.vbs " & MSecs,1 , True
End Sub

</script>
<script language="JavaScript" type="text/javascript">
function OpenProgressBar()
{
	document.getElementById("gui").style.display="none";
	document.getElementById("progressbargui").style.display="block";
}

function UpdateLog(text, status)
{
	var log = document.getElementById("log");
	if(status && status != "")
	{
		var maxLength = 33;
		var dotlength = maxLength - (text.length + status.length);
		var dots = "";
		for(i = 0;i<dotlength;i++)
			dots += ".";
		log.value += text + dots + "[" + status + "]\n";
	}
	else
		log.value += "[" + text + "]" + "\n";
	log.scrollTop = log.scrollHeight;
}

function UpdateProgressBar(percentComplete, title, status)
{
	for(i = 1; i <= 100; i++)
	{
		if((percentComplete) >= i)
			document.getElementById("pbar"+i).className = "pbarcomplete";
		else
			document.getElementById("pbar"+i).className = "pbar";
		document.title = title && title != "" ? title : percentComplete + "% Complete";
		document.getElementById("progresstitle").innerText = status && status != "" ? status : percentComplete + "% Complete";
	}
}

function CloseProgressBar()
{
	document.getElementById("gui").style.display="block";
	document.getElementById("progressbargui").style.display="none";
	UpdateProgressBar(0,"","");
	document.getElementById("log").value = "";
}
</script>
<script language="VBScript" type="text/vbscript">
'Progress Bar Logic
</script>
<style type="text/css">
body,html {
	margin:auto;
}
div#progressbar{
border:1px solid #ccc;
margin:0px;padding:0px;
}
span.pbar{
	width:3px;
	margin:0px;
	padding:0px;
	border-left:1px solid #fff;
	background:#fff;
	line-height:5px;
	height:16px;
	font-size:2px;
}
span.pbarcomplete{
	width:3px;
	margin:0px;
	padding:0px;
	border-right:1px solid #ccc;
	background:green;
	line-height:5px;
	height:16px;
	font-size:2px;
	
}
table {
	width:100%;
	height:100%;
}
table td {
	text-align:center;
	vertical-align:center;
}
table td.progressbargui {
	display:none;
	vertical-align:top;
}
textarea#log{
	width:100%;
	height:100px;
	border:1px solid #aaa;
}
</style>
</head>
<body>
<table>
<tr>
	<td id="gui"><input type="button" onclick="BeginImportingFiles()" value="Begin File Import"/></td>
	<td id="progressbargui" class="progressbargui">
		<div id="progresstitle">&nbsp;</div>
		<div id="progressbar">
		<script type="text/javascript">
		for(i = 1; i <= 100; i++)
			document.write("<span id=\"pbar" + i + "\" class=\"pbar\"></span>");
		</script>
		</div>
		<textarea id="log"></textarea>
	</td>
</tr>
</table>

</body>
</html>

Some potentially useful links dealing with HTA:

]]> https://www.northatlantawebdesign.com/index.php/2009/07/17/hta-progress-bar-using-vbscript-and-javascript/feed/ 2 Simple VBScript Progress Bar https://www.northatlantawebdesign.com/index.php/2009/07/16/simple-vbscript-progress-bar/ https://www.northatlantawebdesign.com/index.php/2009/07/16/simple-vbscript-progress-bar/#comments Thu, 16 Jul 2009 17:26:17 +0000 http://www.northatlantawebdesign.com/?p=69 Recently I had a need for a simple progress bar written in VBScript to let users know what was going on in a multi-step application. To my surprise, VBScript has nothing built in for a progress bar.  After much searching, I was able to find this thread that linked to yet another thread with a simple progress bar done in HTML using InternetExplorer.Application.  I have taken this code and modified it to show an actual progess bar, with percentages, that can be updated as desired.  I’ve wrapped it up in a nice easy-to-use class for reusability.  Enjoy!

Simple VBScript Progress Bar

Simple VBScript Progress Bar

VBScript Progress Bar Class:

Class ProgressBar
Private m_PercentComplete
Private m_CurrentStep
Private m_ProgressBar
Private m_Title
Private m_Text
Private m_StatusBarText

'Initialize defaults
Private Sub ProgessBar_Initialize
m_PercentComplete = 0
m_CurrentStep = 0
m_Title = "Progress"
m_Text = ""
End Sub

Public Function SetTitle(pTitle)
m_Title = pTitle
End Function

Public Function SetText(pText)
m_Text = pText
End Function

Public Function Update(percentComplete)
m_PercentComplete = percentComplete
UpdateProgressBar()
End Function

Public Function Show()
Set m_ProgressBar = CreateObject("InternetExplorer.Application")
'in code, the colon acts as a line feed
m_ProgressBar.navigate2 "about:blank" : m_ProgressBar.width = 315 : m_ProgressBar.height = 40 : m_ProgressBar.toolbar = false : m_ProgressBar.menubar = false : m_ProgressBar.statusbar = false : m_ProgressBar.visible = True
m_ProgressBar.document.write "<body Scroll=no style='margin:0px;padding:0px;'><div style='text-align:center;'><span name='pc' id='pc'>0</span></div>"
m_ProgressBar.document.write "<div id='statusbar' name='statusbar' style='border:1px solid blue;line-height:10px;height:10px;color:blue;'></div>"
m_ProgressBar.document.write "<div style='text-align:center'><span id='text' name='text'></span></div>"
End Function

Public Function Close()
m_ProgressBar.quit
m_ProgressBar = Nothing
End Function

Private Function UpdateProgressBar()
If m_PercentComplete = 0 Then
m_StatusBarText = ""
End If
For n = m_CurrentStep to m_PercentComplete - 1
m_StatusBarText = m_StatusBarText & "|"
m_ProgressBar.Document.GetElementById("statusbar").InnerHtml = m_StatusBarText
m_ProgressBar.Document.title = n & "% Complete : " & m_Title
m_ProgressBar.Document.GetElementById("pc").InnerHtml = n & "% Complete : " & m_Title
wscript.sleep 10
Next
m_ProgressBar.Document.GetElementById("statusbar").InnerHtml = m_StatusBarText
m_ProgressBar.Document.title = m_PercentComplete & "% Complete : " & m_Title
m_ProgressBar.Document.GetElementById("pc").InnerHtml = m_PercentComplete & "% Complete : " & m_Title
m_ProgressBar.Document.GetElementById("text").InnerHtml = m_Text
m_CurrentStep = m_PercentComplete
End Function

End Class

Example of Usage:

'Declare progressbar and percentage complete
Dim pb
Dim percentComplete
'Setup the initial progress bar
Set pb = New ProgressBar
percentComplete = 0
pb.SetTitle("Step 1 of 5")
pb.SetText("Copying bin/Debug Folder")
pb.Show()

'Loop to update the percent complete of the progress bar
'Just add the pb.Update in your code to update the bar
'Text can be updated as well by pb.SetText
Do While percentComplete <= 100
wscript.sleep 500
pb.Update(percentComplete)
percentComplete = percentComplete + 10
Loop
wscript.sleep 3000

'This shows how you can use the code for multiple steps
'In a future iteration I will add a second bar to measure overall progress
percentComplete = 0
pb.SetTitle("Step 2 of 5")
pb.SetText("Copying bin/Release Folder")
pb.Update(percentComplete)
Do While percentComplete <= 100
wscript.sleep 500
pb.Update(percentComplete)
percentComplete = percentComplete + 10
Loop
pb.Close()
wscript.quit

In a future release, I may add another progress bar to keep track of the steps that are completed. Feel free to use and modify this code as you desire.

Useful Links:

]]> https://www.northatlantawebdesign.com/index.php/2009/07/16/simple-vbscript-progress-bar/feed/ 8