North Atlanta Web Design » HTML Applications 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