HTML Table visualization

JAVA plugin (JRE or JDK 1.5 or above) and JavaScript must be activated
Tested on IE6 (fast) and Firefox-Mozilla (slow)

HTML Table

	A	B	C	D	E	F	G	H
1	23	13	87	89	76	02	68	41
2	58	50	97	88	56	65	66	76
3	28	12	09	34	07	37	49	46
4	95	31	10	69	01	63	55	73
5	10	95	30	09	49	69	99	45
6	lO	08	09	18	51	57	96	76
7	08	51	08	01	45	67	75	45
8	54	87	12	76	66	56	65	79

BiSlider Applet

No Java 2 SDK, Standard Edition v 1.5.0 support for APPLET!!

Go back to the BiSlider Web Site

Questions

Try to answer the questions with/without the coloring tool and select the following text to check your answer.

What side of the table has bigger value ? ANSWER= bottom right cells have bigger values ! <-HERE
Where is the cell with the string value lO(Lo) instead of 10(ten)? ANSWER= in the cell A6 ! <-HERE
Is there a column with a cyclic pattern ? ANSWER= the last column alternate fourties and seventies ! <-HERE
Where are the 2 biggest cells side by side ? ANSWER= 99 above 96 on the middle right in G5-G6 ! <-HERE
What are the 2 peaks in the distribution 10 by 10 ? ANSWER= 0-10 and 50-70 ! <-HERE

How can I easily include BiSlider on my own web page ?

Simply add the id in the <table> tag like that :


       <table id="MYNAME" border=1 cellspacing="1" background="Background.gif" width="100%">
         <tr><td>23</td><td>13</td></tr>
         <tr><td>58</td><td>50</td></tr>
       </table>

... then somewhere else, in the same page, add the applet with parameters like that ...

     
       <applet archive="BiSlider.jar" code="com.visutools.nav.bislider.HTMLTableColorizerApplet" width="200" height="60" mayscript>
        <param name="MinimumColor" value="#FF0000">    Adapt these values to your table of data
        <param name="MaximumColor" value="#0000FF">
        <param name="MinimumValue" value="0">
        <param name="MaximumValue" value="100">
        <param name="MinimumColoredValue" value="0">
        <param name="MaximumColoredValue" value="100">
        <param name="SegmentSize"    value="10">        Smaller it is and more segment there are
        <param name="UniformSegment" value="true">
        <param name="Precise"        value="true">      It doesn't work well for applet but doesn't crash so you can keep it
        
        <param name="CustomPaint"    value="true">      Must be true
        <param name="LinkToTable"    value="MYNAME">   MYNAME indicates how you instrumented your table's tags
        <param name="TableWidth"     value="2">         The number of columns
        <param name="TableHeight"    value="2">         The number of rows
        
        <param name="ArcSize"        value="18">        Very cosmetic parameters
        <param name="Unit"           value="">
        <param name="InterpolationMode" value="HSB">    HSB, RGB or CENTRAL_BLACK        
        No Java 2 SDK, Standard Edition v 1.5.0 support for APPLET!!
      </applet>

How can I customize which cell of my table is colored ?

Simply add the id argument in each <td> tag like that :


       <table border=1 cellspacing="1" background="Background.gif" width="100%">
         <tr><td id="MYNAME1-1">23</td><td id="MYNAME2-1">13</td></tr>
         <tr><td id="MYNAME1-2">58</td><td id="MYNAME2-2">50</td></tr>
       </table>

It's very easy if yourtable is generated by a Servlet or a php module

... then somewhere else, in the same page, add the applet with parameters like that ...

     
       <applet archive="BiSlider.jar" code="com.visutools.nav.bislider.HTMLTableColorizerApplet" width="200" height="60" mayscript>
        <param name="MinimumColor" value="#FF0000">    Adapt these values to your table of data
        <param name="MaximumColor" value="#0000FF">
        <param name="MinimumValue" value="0">
        <param name="MaximumValue" value="100">
        <param name="MinimumColoredValue" value="0">
        <param name="MaximumColoredValue" value="100">
        <param name="SegmentSize"    value="10">        Smaller it is and more segment there are
        <param name="UniformSegment" value="true">
        <param name="Precise"        value="true">      It doesn't work well for applet but doesn't crash so you can keep it
        
        <param name="CustomPaint"    value="true">      Must be true
        <param name="LinkToTable"    value="MYNAME">   MYNAME indicates how you instrumented your table's tags
        <param name="TableWidth"     value="2">         The number of columns
        <param name="TableHeight"    value="2">         The number of rows
        
        <param name="ArcSize"        value="18">        Very cosmetic parameters
        <param name="Unit"           value="">
        <param name="InterpolationMode" value="HSB">    HSB, RGB or CENTRAL_BLACK        
        No Java 2 SDK, Standard Edition v 1.5.0 support for APPLET!!
      </applet>

Technical highlight

I added a Javascript to Java communication bridge in order to parse the HTML table from the Java applet I had to use the netscape.javascript package and especially the JSObject and found few help on internet Finally I found a way to parse the DOM tree of the HTML page my applet is embedded in :

Add plugin/jar to your classpath
Add include netscape.javascript.*; in your Applet/JApplet class

In the Applet/JApplet class add a function :

  /**
   * initialize the Java-Javascript bridge
   */
  public void initHTMLLink(){

    JSObject JSDocument = null;
    String JSBrowerName = null;
    
    try {
      JSWindow     =            JSObject.getWindow(this);
      JSDocument   = (JSObject) JSWindow.getMember("document");    
      JSBrowerName = (String)   JSWindow.eval("window.navigator.appName.toLowerCase()");
    } catch (JSException JSException_Arg){
      JSException_Arg.printStackTrace();
      System.out.println("ex"+JSException_Arg.getWrappedExceptionType()+"="+JSException_Arg.getMessage());
    }

    String BrowserName  = System.getProperty("browser");
    //if (JSBrowerName.startsWith("netscape")) ... Notice I don't use it anymore because I want to be brower independant

    
   try {
      JSObject JSTable = (JSObject) JSWindow.eval("document.getElementById(""+LinkToTableString+"")");
      } catch (JSException JSException_Arg){
      JSException_Arg.printStackTrace();
      System.out.println("ex"+JSException_Arg.getWrappedExceptionType()+"="+JSException_Arg.getMessage());
    }       
  }// initHTMLLink()

And another one to do the parsing :

  /**
   * update the applet and the HTML <table>
   */
  public void updateHTMLLink(){
    try {
      // The user chose to indicate the full html table with <table id="MyTableName"...> 

      if (JSTable!=null){
        JSObject childNodes=(JSObject)JSTable.getMember("childNodes");

        // There are maybe whitespaces or other comments before we reach the tbody !
        // we"ll use this technique for tr and td parsing as well
        int nodeindex = 0;
        for (; (nodeindex<10&&childNodes.getSlot(nodeindex) instanceof JSObject && 
                !childNodes.getSlot(nodeindex).toString().equals("[object HTMLTableSectionElement]")); nodeindex++);
        if (nodeindex==10){System.err.println("Error when looking for [object HTMLTableSectionElement] in the dom");return;}

        // So we get the JSObject where we found it

        JSObject JSTBODYObject = (JSObject)childNodes.getSlot(nodeindex);

        int rownodeindex = -1;
        for (int j=0; j<=MaxRowIndex; j++) {
          childNodes=(JSObject)JSTBODYObject.getMember("childNodes");  

          for (rownodeindex++; (rownodeindex<4*MaxRowIndex&&childNodes.getSlot(rownodeindex) instanceof JSObject && 
                  !childNodes.getSlot(rownodeindex).toString().equals("[object HTMLTableRowElement]")); rownodeindex++);
          if (rownodeindex==4*MaxRowIndex){System.err.println("Error when looking for [object HTMLTableRowElement] in the dom: not enough columns?");return;}

          JSObject JSTRNode=(JSObject)childNodes.getSlot(rownodeindex);

          // if we are after the 1rst row to consider

          if (j>=MinRowIndex) {
            int colnodeindex = -1;
            for (int i=0; i<=MaxColIndex; i++) {
              childNodes=(JSObject)JSTRNode.getMember("childNodes");

              for (colnodeindex++; (colnodeindex<4*MaxColIndex&&childNodes.getSlot(colnodeindex) instanceof JSObject && 
                      !childNodes.getSlot(colnodeindex).toString().equals("[object HTMLTableCellElement]")); colnodeindex++);
              if (colnodeindex==4*MaxColIndex){System.err.println("Error when looking for [object HTMLTableCellElement] in the dom: not enough columns?");return;}

              // if we are after the 1rst column to consider

              if (i>=MinColIndex) {
                JSObject JSTDNode=(JSObject)childNodes.getSlot(colnodeindex);

                 if (JSTDNode!=null) {
                  String Value     = (String)JSTDNode.getMember("innerHTML");
                  String ColorName = "#FFFFFF";

                  if (Value!=null){
                    // convert the value 

                    int val =0;
                    try {
                      val = Integer.parseInt(Value);
                    } catch (NumberFormatException NumberFormatException_Arg) {
                      //NumberFormatException_Arg.printStackTrace();
                      return;
                    }

                    // from Color to html format #FF0088

                    Color col = Color.RED;
                    if (col!=null) {
                      String RedString   = Integer.toHexString(col.getRed());
                      String GreenString = Integer.toHexString(col.getGreen());
                      String BlueString  = Integer.toHexString(col.getBlue());
                      if (RedString.length()==1)   RedString   = "0"+RedString;
                      if (GreenString.length()==1) GreenString = "0"+GreenString;
                      if (BlueString.length()==1)  BlueString  = "0"+BlueString;
                      ColorName = "#"+RedString+GreenString+BlueString;
                    }

                    // update the applet here

                  }// if Value!=null

                  // update the parameters of the html cell
                  JSTDNode.setMember("bgColor", ColorName);
                  //JSCell_Arg.setMember("align",   "right");
                }// if JSTDNode != null

              }// if we are after the 1rst column to consider
            }// for loop on columns
          }// if we are after the 1rst row to consider
        }// for loop on rows
      }// if JSTable!=null

    } catch (JSException JSException_Arg){
      JSException_Arg.printStackTrace();
      System.out.println("ex"+JSException_Arg.getWrappedExceptionType()+"="+JSException_Arg.getMessage());
    } catch(Exception Exception_Arg) {
       Exception_Arg.printStackTrace();
    }
  }// updateHTMLLink()

	A	B	C	D	E	F	G	H
1	23	13	87	89	76	02	68	41
2	58	50	97	88	56	65	66	76
3	28	12	09	34	07	37	49	46
4	95	31	10	69	01	63	55	73
5	10	95	30	09	49	69	99	45
6	lO	08	09	18	51	57	96	76
7	08	51	08	01	45	67	75	45
8	54	87	12	76	66	56	65	79

	A	B	C	D	E	F	G	H
1	23	13	87	89	76	02	68	41
2	58	50	97	88	56	65	66	76
3	28	12	09	34	07	37	49	46
4	95	31	10	69	01	63	55	73
5	10	95	30	09	49	69	99	45
6	lO	08	09	18	51	57	96	76
7	08	51	08	01	45	67	75	45
8	54	87	12	76	66	56	65	79

	A	B	C	D	E	F	G	H
1	23	13	87	89	76	02	68	41
2	58	50	97	88	56	65	66	76
3	28	12	09	34	07	37	49	46
4	95	31	10	69	01	63	55	73
5	10	95	30	09	49	69	99	45
6	lO	08	09	18	51	57	96	76
7	08	51	08	01	45	67	75	45
8	54	87	12	76	66	56	65	79