HTA Progress Bar using VBScript and JavaScript

July 17, 2009 by Jeff Gibeau Leave a reply »

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.

?
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
159
160
161
162
163
164
165
<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:

Posted in HTML Applications, JavaScript, VBScript

Tags:

You can follow any responses to this entry through the RSS 2.0 Feed feed. You can leave a response, or trackback from your own site.

Advertisement

2 Responses

Add your comment
  1. Bryan says:
    August 25, 2011 at 11:43 pm

    Did you ever end up deciding on HTA or not? I’m on the same fence, but not sure if I am ready to learn another language/software if it doesn’t work out for me.

  2. Jeff Gibeau says:
    August 26, 2011 at 9:42 am

    If I had to make a decision today about whether to use HTA or not, I would probably lean on the side of HTML5+JavaScript over HTA.

Leave a Reply