How do I load and display a (local) csv file's contents in a table in an .HTA (HTML) (Working Simulation attached)

I am busy building an .HTA interface (frontend) that will replace the explorer shell. (I have built this with the help of some great E-Exchange individuals!!!)

This .HTA will need to be able to read a local DB.csv file and display the contained values in a table format. I have bult a background and prefer to let all the graphics live there for now. Therefore the "table" should only be values without borders or background color (if possible). I would prefer if the table can be moved on the page with the use of X and Y coordinates as I will have to be able to modify this quickly for different demo's and projects. (Currently everything that is displayed by the .hta can be moved with x,y coordinates in the corresponding span which works great!)

I have attached the latest working script where this new "data element" must be inserted in. I have also attached the image, .csv and .background files. I have simulated the required table element with red text to help convey the idea as clearly as possible.
Instructions:

1. Download and unzip Demo.zip contents into a folder.

2. Rename Screen.txt to Screen.hta.

3. Run the Screen.hta


Please note that the DB.csv file will be updated with new values by another script. This other script will query the DB every few minutes and overwrite the old values. This means that the .hta should preferably also update the displayed values to the screen as they change. (Currently the whole screen refreshes every 1000ms as per my understanding)
Demo.zip
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:
Required table must only display the text in red.
Bill PrewIT / Software Engineering ConsultantCommented:
So, will the number of rows and columns in the table and the CSV always be exactly equal?

~bp
Rebel_no_1Author Commented:
Yes, the script will always populate the information 100% as per the example. If no people was registered yesterday the values for male, female and yesterday total, will be "0".

Therefore the following ,.csv table will always be filled with values:
A,B,C
D,E,F
G,H,I

I hope I'm explaining ok? Hope this makes sense Bill.
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:
Okay, give this a try and see if it gets you close.  I'm tight on time today, so there is some fine tuning to be worked out, but the important stuff should be there.  You will need to change the background GIF of course to remove the sample data.  And you may want to play around with the formatting of the table itself, I got it close but I'm sure someone that is better with HTML or CSS than I could refine it further.

The basic idea was to create a table (html) where the data from the file would be displayed and place that on the screen as needed.  Then when the timer fires we load the data from the CSV into that table cell by cell.  There are other techniques, but this seemed like an approach that might work.

<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>



<SPAN
   STYLE="
      top: 167;
      left: 553;
      width: 42px;
      height: 43px; 
      position: absolute;
      z-index: 1;
      background-image: url('Busy.gif');
      visibility: show;">
</SPAN>
<SPAN
   STYLE="
      top: 227;
      left: 553;
      width: 42px;
      height: 43px; 
      position: absolute;
      z-index: 1;
      background-image: url('Busy.gif');
      visibility: show;">
</SPAN>
<SPAN
   STYLE="
      top: 287;
      left: 553;
      width: 42px;
      height: 43px; 
      position: absolute;
      z-index: 1;
      background-image: url('Busy.gif');
      visibility: show;">
</SPAN>
<SPAN
   STYLE="
      top: 347;
      left: 553;
      width: 42px;
      height: 43px; 
      position: absolute;
      z-index: 1;
      background-image: url('Busy.gif');
      visibility: show;">
</SPAN>
<SPAN
   STYLE="
      top: 407;
      left: 553;
      width: 42px;
      height: 43px; 
      position: absolute;
      z-index: 1;
      background-image: url('Busy.gif');
      visibility: show;">
</SPAN>
<SPAN
   STYLE="
      top: 467;
      left: 553;
      width: 42px;
      height: 43px; 
      position: absolute;
      z-index: 1;
      background-image: url('Busy.gif');
      visibility: show;">
</SPAN>
<SPAN
   STYLE="
      top: 527;
      left: 553;
      width: 42px;
      height: 43px; 
      position: absolute;
      z-index: 1;
      background-image: url('Busy.gif');
      visibility: show;">
</SPAN>




<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)

      ' #####################################################
      ' #####################################################      Set WshShell = CreateObject("WScript.Shell")
      ' #####################################################      WshShell.Run "cmd.exe /c ""Startup.bat"""
      ' #####################################################      Set WshShell = Nothing
      ' #####################################################
   End Sub    

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

      ' Refresh colors from status file
      CheckStatusFile

      ' Refresh data
      RefreshData

   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 "Help-Menu"
                     HelpMenu.style.background = arrField(1)
                  Case "Biometric-License"
                     BiometricLicense.style.background = arrField(1)
                  Case "Card-Printer"
                     CardPrinter.style.background = arrField(1)
                  Case "GPS-Device"
                     GPSDevice.style.background = arrField(1)
                  Case "Battery-Controller"
                     BatteryController.style.background = arrField(1)
                  Case "Biometric-Application"
                     BiometricApplication.style.background = arrField(1)
               End Select
            End If
         Next 
      End If
   End Sub

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

      intRows = 2
      intCols = 2

      ' Name of status file
      strDataFile = "db.csv"

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

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

         ' Process each line of the status file, updating html table data
         For intRow = 0 To intRows
            arrField = Split(arrData(intRow), ",")
            Set objCell = document.getElementById("dbdata").rows(intRow).cells
            For intCol = 0 To intCols
               objCell(intCol).innerHTML = arrField(intCol)
            Next
            Set objCell = Nothing
         Next 
      End If
   End Sub

</SCRIPT> 



<script language="javascript">
/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: James Nisbet (morBandit) :: http://www.bandit.co.nz/ */
window.onload = function() {
  document.onselectstart = function() {return false;} // ie
  document.onmousedown = function() {return false;} // mozilla
}
</script>


<BODY
     BACKGROUND="Public.jpg"
     TOPMARGIN="10"
     RIGHTMARGIN="10"
     LEFTMARGIN="10"
     BGCOLOR="#7e7e7e"> 


<SPAN
   id="SecurityEnvironment"
   style="
      top: 163;
      left: 28;
      width: 570px;
      height: 40px; 
      position: absolute;
      padding:0 6;
      z-index: 1;
      background: grey;
      border-color: #000000;
      border-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-width: 1px;
      text-align: left;
      color: white;
      font-family: Arial;
      font-size : 40;
      visibility: show;">
SECURED PLATFORM
</SPAN>

<SPAN
   id="dbdataspan"
   style="
      top: 610;
      left: 489;
      width: 354px;
      height: 75px;
      position: absolute;
      z-index: 1;
      color: white;
      visibility: show;">
<table id="dbdata" style="width: 354px; height: 75px; color: blue; font-family: Arial Black; font-size: 22; font-weight: bold;" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="height: 20px; width: 118px; text-align: left;">0<br></td>
      <td style="height: 20px; width: 118px; text-align: center;">0<br></td>
      <td style="height: 20px; width: 118px; text-align: right;">0<br></td>
    </tr>
    <tr>
      <td style="height: 20px; width: 118px; text-align: left;">0<br></td>
      <td style="height: 20px; width: 118px; text-align: center;">0<br></td>
      <td style="height: 20px; width: 118px; text-align: right;">0<br></td><
    /tr>
    <tr>
      <td style="height: 20px; width: 118px; text-align: left;">0<br></td>
      <td style="height: 20px; width: 118px; text-align: center;">0<br></td>
      <td style="height: 20px; width: 118px; text-align: right;">0<br></td>
    </tr>
  </tbody>
</table>
</SPAN>


<SPAN
   id="HelpMenu"
   style="
      top: 223;
      left: 28;
      width: 570px;
      height: 40px; 
      position: absolute;
      padding:0 6;
      z-index: 1;
      background: grey;
      border-color: #000000;
      border-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-width: 1px;
      text-align: left;
      color: white;
      font-family: Arial;
      font-size : 40;
      visibility: show;">
HELP MENU
</SPAN>

<SPAN
   id="BiometricLicense"
   style="
      top: 283;
      left: 28;
      width: 570px;
      height: 40px; 
      position: absolute;
      padding:0 6;
      z-index: 1;
      background: grey;
      border-color: #000000;
      border-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-width: 1px;
      text-align: left;
      color: white;
      font-family: Arial;
      font-size : 40;
      visibility: show;">
BIOMETRIC LICENSE
</SPAN>

<SPAN
   id="CardPrinter"
   style="
      top: 343;
      left: 28;
      width: 570px;
      height: 40px; 
      position: absolute;
      padding:0 6;
      z-index: 1;
      background: grey;
      border-color: #000000;
      border-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-width: 1px;
      text-align: left;
      color: white;
      font-family: Arial;
      font-size : 40;
      visibility: show;">
CARD PRINTER
</SPAN>

<SPAN
   id="GpsDevice"
   style="
      top: 403;
      left: 28;
      width: 570px;
      height: 40px; 
      position: absolute;
      padding:0 6;
      z-index: 1;
      background: grey;
      border-color: #000000;
      border-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-width: 1px;
      text-align: left;
      color: white;
      font-family: Arial;
      font-size : 40;
      visibility: show;">
GPS DEVICE
</SPAN>

<SPAN
   id="BatteryController"
   style="
      top: 463;
      left: 28;
      width: 570px;
      height: 40px; 
      position: absolute;
      padding:0 6;
      z-index: 1;
      background: grey;
      border-color: #000000;
      border-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-width: 1px;
      text-align: left;
      color: white;
      font-family: Arial;
      font-size : 40;
      visibility: show;">
BATTERY CONTROLLER
</SPAN>

<SPAN
   id="BiometricApplication"
   style="
      top: 523;
      left: 28;
      width: 570px;
      height: 40px; 
      position: absolute;
      padding:0 6;
      z-index: 1;
      background: grey;
      border-color: #000000;
      border-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-width: 1px;
      text-align: left;
      color: white;
      font-family: Arial;
      font-size : 40;
      visibility: show;">
BIOMETRIC APPLICATION
</SPAN>

<SPAN
   style="
      top: 603;
      left: 30;
      width: 570px;
      height: 40px; 
      position: absolute;
      z-index: 1;
      text-align: left;
      color: f8ad5d;
      font-family: Arial;
      font-size : 65;
      visibility: show;">
<script type="text/javascript"> document.write(computername());</script>
</SPAN>

<SPAN
   style="
      top: 682;
      left: 891;
      width: 570px;
      height: 40px;
      position: absolute;
      z-index: 1;
      text-align: left;
      color: white;
      font-family: Arial;
      font-face : Arial;
      font-size : 35;
      font-weight: bold;
      visibility: show;">
<font color="white"><PRE ID=myClock></font>
</SPAN>

</BODY> 
</HTML>

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 have fixed a minor issue with the tags and I am still busy formatting and sizing the table but this is PERFECT! It's great that everything is movable and sizable. Thank you so much for your time Bill.
Rebel_no_1Author Commented:
This information table is perfect for displaying information from a .csv file containing three rows and three columns.
Bill PrewIT / Software Engineering ConsultantCommented:
Great, glad that was useful.

~bp
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.