What is the best way to break up a .Hta (.Html) into seperately positionable elements (objects?) that displays statusses. Image attached.

I am busy building an HTA that will run specific tasks one after another and then display the progress information on-screen. The final solution will represent something similar to a windows in kiosk mode but with some extra functionality. This HTA will be the only thing the user sees when his computer is busy starting all the required applications and services. I would like to take a modular approach to build this HTA from the get go and am not sure how to achieve this.

The "elements" that is on the screen will change from one project to the next and I would therefore like each element to be positioned separately. This will make it much easier to modify and scale the solution up and down for future projects.

An "element" that has a "Pending" status must not have a background box.
An "element" that has a "Busy" status must have an orange background box.
An "element" that has an "Done" status must have a green background box.

These statuses can be "picked up" from a text file on C:\Status.txt that will have In the example screenshot the Security environment, Help menu, Bio License and Card Printer have finished loading. Gps Device is busy loading and the Battery Controller and Biometric Application is still waiting to load. The Status.txt file for this example would contain:

----------Status.txt----------
------------------------------
Security-Environment,Done
Help-Menu,Done
Bio-License,Done
Card-Printer,Done
GPS-Device,Busy
Battery-Controller,Pending
Biometric-Application,Pending
------------------------------
----------Status.txt----------

My question at this stage is: How Do I seperate the html code for each and every "element" and how do I position the element box using X and Y coordinates?

I am hoping to achieve something like this:

"
Launch Security-environment.bat
write-element Security-Environment with an orange box
loop until a status of "Done" is detected
When Done is detected change the box colour to green
Continue to next element
"

If this is not possible, what would be a better and more doable aproach to inform the user of the Computer Startup progress?
<html>
<head>
<HTA:APPLICATION
     ID="objScreen" 
     APPLICATIONNAME="Screen" 
     BORDER="none" 
     BORDERSTYLE="normal" 
     CAPTION="no" 
     ICON="" 
     MAXIMIZEBUTTON="no" 
     MINIMIZEBUTTON="no" 
     SHOWINTASKBAR="yes" 
     SINGLEINSTANCE="yes" 
     SYSMENU="no" 
     SCROLL="no" 
     VERSION="1.0" 
     CONTEXTMENU="no" 
     WINDOWSTATE="max"
     INNERBORDER="no"/> 




<body background="bgimage.jpg">



<Script Language="VBScript"> 
  Sub Window_OnLoad 
     window.resizeTo 1366,768 
     window.moveTo 0,0
myVBSClock 
        iTimerID = window.setInterval("myVBSClock", 1000) 
    End Sub    
   Sub myVBSClock 
     myClock.innerText = now() 
 end sub 
  </SCRIPT> 

<script type="text/javascript">
    function computername()
    {
        var wshShell = new ActiveXObject("WScript.Shell")
        var sComputerName = wshShell.ExpandEnvironmentStrings("%COMPUTERNAME%")
        return sComputerName
    }
</script>

<BODY SCROLL="no" topmargin="640" rightmargin="0" leftmargin="40" bgcolor="#000000"> 
<font color="white" face="Times New Roman" size="6"><script type="text/javascript"> document.write(computername());</script></font>
<font color="white" face="Times New Roman" size="6"><PRE ID=myClock></font>

</BODY> 


</HTML> 

Open in new window

Rebel_no_1Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rebel_no_1Author Commented:
This image will help explain better.
bgimageb.jpg
Rebel_no_1Author Commented:
I just found a page with an example box (Item 5a) that can be positioned exactly how I need it!
http://wickham43.net/divboxes.php
I have no idea to recreate that box in my .HTA. I have tried pasting the code in a few places in my script but no box draws or displays??? Can someone please edit my script to include the one box and I should be able to draw the other boxes.

The final goal would then to format these boxes (as explained above) to be formatted depending on the particular element status in Status.txt

The code that draws the box seems to be:
<div id="fixed1">Item 5a:- position: fixed; top: 70px; left: 30px; width: 220px; height: 40px;</div>
#fixed1 { position: fixed; top: 70px; left: 30px; width: 220px; height: 40px; background-color: pink; }
Rebel_no_1Author Commented:
I managed to position an element with the following text. This seems to allow the exact functionality I required. Very happy that this was possible!
<SPAN
   style="
      top: 203;
      left: 47;
      width: 706px;
      height: 38px; 
      position: absolute;
      z-index: 1;
      background: #009203;
      border-color: #000000;
      border-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-width: 1px;
      text-align: center;
      color: white;
      font-family: Arial;
      font-size : 40;
      visibility: show;">
SECURITY ENVIRONMENT
</SPAN>

Open in new window



Now, the first part of the question is answered. The remaining question is: How do I format the background color of an element box based on the corresponding status in the text file? Only this value needs to change:
      background: #009203;

Open in new window


This part of the question could be more tricky. I will get digging to see if I can also solve this...
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Bill PrewIT / Software Engineering ConsultantCommented:
This should give you an idea for the background color changing based on data.

Save as an HTA file and give it a test.

<head>
<title>HTA Test</title>
<HTA:APPLICATION 
     APPLICATIONNAME="HTA Test"
     SCROLL="yes"
     SINGLEINSTANCE="yes"
     WINDOWSTATE="maximize"
>
</head>

<script language="VBScript">
    Sub RedSub
        myspan.style.background = "red"
    End Sub
    Sub BlueSub
        myspan.style.background = "blue"
    End Sub
</script>

<body>

<SPAN
   id="myspan"
   style="
      top: 203;
      left: 47;
      width: 706px;
      height: 38px; 
      position: absolute;
      z-index: 1;
      background: #009203;
      border-color: #000000;
      border-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-width: 1px;
      text-align: center;
      color: white;
      font-family: Arial;
      font-size : 40;
      visibility: show;">
SECURITY ENVIRONMENT
</SPAN>

<input type="button" value="Red" name="red_button"  onClick="RedSub"><p> 
<input type="button" value="Blue" name="blue_button"  onClick="BlueSub"><p> 

</body>

Open in new window

~bp
Rebel_no_1Author Commented:
Hi Bill, thank you. I have gone through the code. I think I will in future be able to change values in a span with button presses, as your code demonstrates. This is definitely useful. I can however still not manage to get the values from the Status.txt file into an array and use it to update the corresponding element's background. I have gone through numerous web-pages but the solution still evades me.

My idea is to have the color for each element directly in the Status.txt file. This should simplify things allot. The HTA will therefore refresh every one second and retrieve the colors for each element background from the Status.txt file.

Therefore, instead of using a button to change the element background color, the color must be determined from the corresponding value in the Status file. Line one in the Status.txt will for instance be:
Security-Environment,Red

Open in new window

This will result in the background of the box being red. As soon as this value changes (for instance to green) in the Status.txt file, the element background should also update to a green background.
(The current script refreshes every 1000ms as per my understanding)

This is the last major part of the puzzle. I am continuously researching elsewhere but so far have not managed to link the information in the Status.txt file to the element background color values.

Please Bill! Share just a bit more of your wisdom. I am sure you can see exactly what I am trying to do. If not, let me know and I will try to rephrase the information better.
Bill PrewIT / Software Engineering ConsultantCommented:
Okay, that should be doable.  Do you have any of the code done yet to 'poll' the status txt file, and gather the item statuses?  Or is thatnot done yet.

~bp
Rebel_no_1Author Commented:
Hi Bill. The below code is supposed to bring in the variables into an array. I am not sure if it works as I do not know how to check. (I have tried but failed miserably) Also, I do not know how to then link the correct value/object from the array to the specific corresponding background color variable. I am not even sure if I can use "php" ?

Sorry if the terminology is wrong in my question. This entire topic is mostly new to me, but I am committed to learn and figure it out.

<?php
	$f = fopen("Status.txt", "r");

	// Read line by line until end of file
	while (!feof($f)) { 

	// Make an array using comma as delimiter
	   $arrM = explode(",",fgets($f)); 

	}

	fclose($f);
	?>

Open in new window


If the above works, I assume we can just link the corresponding value/object from the array to the element background value and that should be it? I might add, the more I learn about php, the less it seems to be the best/most-effective way to go about this.
Rebel_no_1Author Commented:
I have just tested if my .HTA can do php by inserting this code and running it:
<?php echo "Hello World!"; ?>

Open in new window

It didn't work so the above php script is completely useless.  :-)  I need to stay clear of php at this stage. I was on the wrong path...
Below my latest code and status file:

Screen.hta
<html>
<head>
<HTA:APPLICATION
     ID="objScreen" 
     APPLICATIONNAME="Screen" 
     BORDER="none" 
     BORDERSTYLE="normal" 
     CAPTION="no" 
     ICON="" 
     MAXIMIZEBUTTON="no" 
     MINIMIZEBUTTON="no" 
     SHOWINTASKBAR="yes" 
     SINGLEINSTANCE="yes" 
     SYSMENU="no" 
     SCROLL="no" 
     VERSION="1.0" 
     CONTEXTMENU="no" 
     WINDOWSTATE="maximize"
     INNERBORDER="no"/> 
</head>




<Script Language="VBScript"> 
  Sub Window_OnLoad 
     window.resizeTo 1366,768 
     window.moveTo 0,0
myVBSClock 
        iTimerID = window.setInterval("myVBSClock", 1000) 
    End Sub    
   Sub myVBSClock 
     myClock.innerText = now() 
 end sub 
  </SCRIPT> 

<script type="text/javascript">
    function computername()
    {
        var wshShell = new ActiveXObject("WScript.Shell")
        var sComputerName = wshShell.ExpandEnvironmentStrings("%COMPUTERNAME%")
        return sComputerName
    }
</script>


<BODY
     BACKGROUND="bgimage.jpg"
     TOPMARGIN="641"
     RIGHTMARGIN="1"
     LEFTMARGIN="40"
     BGCOLOR="#7e7e7e"> 

<SPAN
   style="
      top: 203;
      left: 47;
      width: 706px;
      height: 38px; 
      position: absolute;
      z-index: 1;
      background: Orange;
      border-color: #000000;
      border-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-width: 1px;
      text-align: center;
      color: white;
      font-family: Arial;
      font-size : 40;
      visibility: show;">
SECURITY ENVIRONMENT
</SPAN>


<font color="white" face="Arial" size="6"><script type="text/javascript"> document.write(computername());</script></font>
<font color="white" face="Arial" size="6"><PRE ID=myClock></font>

</BODY> 


</HTML> 

Open in new window


Status.txt
Security-Environment,Green
Help-Menu,Green
Bio-License,Green
Card-Printer,Green
GPS-Device,Yellow
Battery-Controller,Grey
Biometric-Application,Grey

Open in new window

Bill PrewIT / Software Engineering ConsultantCommented:
Okay, give this a test, seems to work here.  Once it is running, edit the status file to change one of the two items I created and watch the window update.

I tried to add extra comments to help you understand the logic - you can never have too many comments.

I also converted the ComputerName function from java to vbscript just to keep it simple.

Let me know what questions you have.

EE28758159.HTA
<html>
<head>
<HTA:APPLICATION
     ID="objScreen" 
     APPLICATIONNAME="Screen" 
     BORDER="none" 
     BORDERSTYLE="normal" 
     CAPTION="no" 
     ICON="" 
     MAXIMIZEBUTTON="no" 
     MINIMIZEBUTTON="no" 
     SHOWINTASKBAR="yes" 
     SINGLEINSTANCE="yes" 
     SYSMENU="no" 
     SCROLL="no" 
     VERSION="1.0" 
     CONTEXTMENU="no" 
     WINDOWSTATE="maximize"
     INNERBORDER="no"/> 
</head>



<Script Language="VBScript"> 

   Sub Window_OnLoad 
      ' Size and position main window
      window.resizeTo 1366,768 
      window.moveTo 0,0

      ' Display current time
      myClock.innerText = Now()

      ' Set up a timer event so we can update the screen periodically
      iTimerID = window.setInterval("myVBSClock", 1000) 
   End Sub    

   Sub myVBSClock 
      ' Update current time
      myClock.innerText = Now()

      ' Refresh colors from status file
      CheckStatusFile
   End Sub 

   Function ComputerName()
      ' Get computername
      Set wshShell = CreateObject("WScript.Shell")
      ComputerName = wshShell.ExpandEnvironmentStrings("%COMPUTERNAME%")
      Set wshShell = Nothing
   End Function

   Sub CheckStatusFile
      ' Constants for file I/O
      Const ForReading = 1
      Const ForWriting = 2
      Const TriStateUseDefault = -2

      ' Name of status file
      strStatusFile = "status.txt"

      ' Create file system object
      Set objFSO = CreateObject("Scripting.FileSystemObject")

      ' Make sure status file exists
      If objFSO.FileExists(strStatusFile) Then
         ' Open it for reading
         Set objStatusFile = objFSO.OpenTextFile(strStatusFile, ForReading, False, TriStateUseDefault)
         ' Read status file, slit lines into array elements
         arrStatus = Split(objStatusFile.ReadAll, vbCrLf)
         ' Close file, release objects
         objStatusFile.Close
         Set objStatusFile = Nothing
         Set objFSO = Nothing

         ' Process each line of the status file (skip blank lines)
         For Each strStatus in arrStatus
            If strStatus <> "" Then
               ' Split status line into array at comma
               arrField = Split(strStatus, ",")
               ' Process lines based on first field on line (item name to update), and set item color to status file value
               Select Case arrField(0)
                  Case "Security-Environment"
                     SecurityEnvironment.style.background = arrField(1)
                  Case "Battery-Controller"
                     BatteryController.style.background = arrField(1)
               End Select
            End If
         Next 
      End If
   End Sub

</SCRIPT> 


<BODY
     BACKGROUND="bgimage.jpg"
     TOPMARGIN="641"
     RIGHTMARGIN="1"
     LEFTMARGIN="40"
     BGCOLOR="#7e7e7e"> 

<SPAN
   id="SecurityEnvironment"
   style="
      top: 203;
      left: 47;
      width: 706px;
      height: 38px; 
      position: absolute;
      z-index: 1;
      background: Orange;
      border-color: #000000;
      border-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-width: 1px;
      text-align: center;
      color: white;
      font-family: Arial;
      font-size : 40;
      visibility: show;">
SECURITY ENVIRONMENT
</SPAN>

<SPAN
   id="BatteryController"
   style="
      top: 260;
      left: 47;
      width: 706px;
      height: 38px; 
      position: absolute;
      z-index: 1;
      background: Orange;
      border-color: #000000;
      border-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-width: 1px;
      text-align: center;
      color: white;
      font-family: Arial;
      font-size : 40;
      visibility: show;">
BATTERY CONTROLLER
</SPAN>


<font color="white" face="Arial" size="6"><script type="text/javascript"> document.write(ComputerName());</script></font>
<font color="white" face="Arial" size="6"><PRE ID=myClock></font>

</BODY> 


</HTML>

Open in new window

STATUS.TXT
Security-Environment,Green
Battery-Controller,Grey

Open in new window

~bp

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rebel_no_1Author Commented:
I quickly tested and I think it functions exactly how I planned for it. That's awesome, thanks Bill! I will put in a bit of time to go through the code and learn how you did it. Then I will complete the rest of the script. BTW, I could not really find a reference to anyone else doing this so it seems I am again trying to do things that is not common. (I might be mistaken due to using wrong terminology?) Your help is enabling me to build something great and I really appreciate that allot. You say I can never have too many comments, that's true, but I can also never thank you enough. Will get back to you soon. (I'm currently in China so sorry if that impacts negatively on the time I take to reply)
Rebel_no_1Author Commented:
The method described in this answer will enable you to develop a very flexible, powerful, and near real-time status screen (Front-end). If you develop the back-end in dos or Powershell and output the results to the .txt file you can literally monitor anything you wish. I can think of many applications for this and I will personally use this allot. Also, the fact that elements can be added with their own x,y coordinates and be removed without impacting on other elements makes it extremely easy to modify for different requirements. Bill Prew which formulated the solution deserves a medal!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.