Link to home
Start Free TrialLog in
Avatar of Rebel_no_1
Rebel_no_1Flag for China

asked on

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

Avatar of Rebel_no_1
Rebel_no_1
Flag of China image

ASKER

This image will help explain better.
bgimageb.jpg
Avatar of Rebel_no_1
Rebel_no_1
Flag of China image

ASKER

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; }
Avatar of Rebel_no_1
Rebel_no_1
Flag of China image

ASKER

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...
Avatar of Bill Prew
Bill Prew
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
Avatar of Rebel_no_1
Rebel_no_1
Flag of China image

ASKER

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.
Avatar of Bill Prew
Bill Prew
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
Avatar of Rebel_no_1
Rebel_no_1
Flag of China image

ASKER

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.
Avatar of Rebel_no_1
Rebel_no_1
Flag of China image

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of Bill Prew
Bill Prew
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Rebel_no_1
Rebel_no_1
Flag of China image

ASKER

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)
Avatar of Rebel_no_1
Rebel_no_1
Flag of China image

ASKER

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!