Tag Archives: HTA

Fast output into TextArea

Note: The example here has been written in VBScript, but the principles should apply to JavaScript as well.

While I was working on the KML generator for work, I wanted a text log to show errors if they came up.  The information wasn’t important enough to save to a file, but it needed to be displayed to the user.  However, as the HTA would go through data, the speed at which the log file would update would become slower and slower, eventually appearing to lock up.  Considering it was dealing with approx. 500kb across three CSV files, this was not acceptable.

Here is a simplified version of the HTA script:

  <TITLE>KML Generator</TITLE>
Do Until (conditions)
  realTimeOutput.value = realtimeinfo.value & "Message. " & vbCrLf
   <textarea id="realTimeOutput" readonly>Waiting for data.</textarea>

The code in red is fine for a quick addition, but terrible for fast successive additions to the textarea.  The content of the textarea was being copied, the addition appended, then the entire value was being written back in.  So, after several searches and attempting other re-workings of that same idea, I found this method of doing it:

realTimeOutput.appendChild(document.createtextnode("Message" & vbCrLf))

In this case everything (except vbCrLf) is carried out via DOM functions, allowing the text to be appended into the textarea without copying everything already in there.  The speed difference was very apparent, as what would come to a near-lockup was now instant.  It seems unusual to create a new text node just to add text, but it’s the only way to update the textarea via the DOM.  In a more memory-sensitive environment, you could assign the node to a variable and null it out as needed. But honestly, at that point I’d ask why VBScript is still being used.

Making Circles in Google Charts – Undocumented Chart Types for Google Charts

So it looks like the Google Charts API has a couple of small undocumented charts in it!

There isn’t anything I can find about this written elsewhere, so here is my personal documentation for it.  The information here has been distilled from the MarkerIconCreator webpage. Where you can play with these chart types to have the URLs created for you.  I had to look all of this up for the KML generator I mentioned a few posts ago.

Circle (chart type it): Circle Example - With "X" in the middle.

Parameters: cht=it&chs=32×32&chco=FF0000,000000ff,ffffff01&chl=X&chx=FFFFFF,0&chf=bg,s,00000000

The important part to note is cht=it.  That chart type is not documented in the Google Charts API. 

Rounded Rectangle (chart type itr): Rounded Rectangle

Parameters: cht=itr&chs=32×32&chco=FF0000,000000ff,ffffff01&chl=X&chx=FFFFFF,0&chf=bg,s,00000000

Again, note cht=itr.

There are some other parts in both URLs  which are different from the documentation in how they’re used.  It’s not too hard to figure out via trial and error; but here are some quick explanations:

Color: chco=FF0000,000000ff,ffffff00

The API shows chco as series color, but it’s used a little bit differently for this chart type.  The first color is your shape color.  The second is your first shadow color, and the third is your background-shadow color.  These are regular hexidecimal colors, but with an added byte of values on the end to represent transparency.  If you are using this in a KML file, I recommend setting both shadow colors to 00.

Here are some examples with chco=00FF00,FF0000ff,0000ffAA: chco=00FF00,FF0000ff,0000ffAA chco=00FF00,FF0000ff,0000ffAA

Label Color: chx=FFFFFF

Chx doesn’t exsit on its own in the API. Other forms do, like chxt, chxr, etc.  It is the color for the label text.  It also supports adding an extra byte at the end for transparency.

Here are some examples with chx=00FFFF: Label Color Examplechx=00FFFF

Background color (gradient?): chf=bg,s,00000000

Chf is listed in the official documentation as a fill option.  Only the solid variety works here.  Then the coloring is the same Hex + transparency we’ve seen above. 

Here are the examples, chf=bg,s,00AA00FF: chf=bg,s,00AA00FF chf=bg,s,00AA00FF

Building a self-contained HTA with embedded Images and Icons.

I’m working on an HTA to generate KML files from a given CSV.  I’ve set a goal for myself to keep everything contained in the one HTA file.  Being HTML / CSS and VBScript, this is easy for the most part.  Images and icons are a little harder though. But not impossible!

For images, look at Data URI schemes.  I’ll borrow Wikipedia’s example here:

<img src="data:image/png;base64,
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

It’s a bit longer than the usual <img src=”image.png” alt=”Image”> tag. But it allows for images in an HTA without additional files.  The way it works is by taking the file you want to embed, and converting it to Base64.  There are several online tools to do this, but I’ve been using this command line utility for the sake of bandwidth.

Once you have the blob of Base64 data, start an image tag with the src attribute set to “data:image/png;base64,” and append the data afterward.  The first part is needed to tell the browser what the image type is, and the encoding.  The image type doesn’t need to be PNG, any type can be used as long as the MIME type is changed accordingly.  Data URI’s work for most media types, so other things besides images can be embedded this way.

Note that because HTAs are rendered in IE, you’ll need to be aware of your target audience for this to work.  IE8 only supports data URIs up to 32KB.  IE7 and IE6 compatibility is not there, although it may be possible through this MHTML /CSS hack.  I’ll have to test it once my HTA is ready to go.

Now for Icons.  I found this piece of information on the MSDN page for the HTA Icon property.  The solution is to use the copy command, which will append the icon data onto the front of the HTA.  Before the HTML starts.

First, add this line to your HTA to specify the icon. If you have an hta: application tag already, you can add the “icon=”#”” line to it:

<hta:application icon="#">

Then, open a command prompt, and use this command, substituting the appropriate names:

copy icon.ico /b /y +original.hta originalWithIcon.hta

The + before original.hta tells the copy command to append that file onto the file being copied. With originalWithIcon.hta being the output file. /b tells copy that icon.ico is a binary file. And /y just suppresses the overwrite messages.

At this point, if you open the new HTA in a text editor you’ll see some unreadable characters before the HTML starts. That is the icon data.  With that embedded, the icon will now appear in your system tray when you run the file.  Unfortunately (at least on Windows XP) it doesn’t show up in Explorer.

Now you have an HTA with embedded images and Icons!