Code for List-View HTML page generation

6 files changed, 152 insertions, 11 deletions

diff --git a/tests/make_png/README b/tests/make_png/README
index 4a1523d33..ee28296f2 100644
--- a/tests/make_png/README
+++ b/tests/make_png/README
@@ -48,7 +48,9 @@ To generate 32-bit RGBA PNG(s) of all glyphs in a font\n
 
 /*******************************************************************/
 
-To generate sprite sheets,
+To generate sprite sheets in the /images folder and to generate the
+"index.html" (List-View) of the glyphs.
+
 First compile and install two versions of the FreeType libray 
 in different folders (with SUBPIXEL_RENDERING enabled in ftoption.h)
 
@@ -68,3 +70,5 @@ in different folders (with SUBPIXEL_RENDERING enabled in ftoption.h)
 
 		Render modes similar to generating PNG(s).
 
+
+
diff --git a/tests/make_png/bitmap.c b/tests/make_png/bitmap.c
index f3d26c246..7cf5eb4ac 100644
--- a/tests/make_png/bitmap.c
+++ b/tests/make_png/bitmap.c
@@ -372,15 +372,12 @@ IMAGE* Adjust_Height(IMAGE* small, IMAGE* big){
 
 IMAGE* Adjust_Width(IMAGE* small, IMAGE* big){
   
-  int w_delta;
   IMAGE* result = (IMAGE*)malloc(sizeof(IMAGE));
 
   result->height = small->height;
   result->width = big->width; 
   result->pixels = (PIXEL*)malloc(result->width * result->height * sizeof(PIXEL));
 
-  w_delta = big->width - small->width;
-
   for (int x = small->width; x < big->width; ++x)
   {
     for (int y = 0; y < result->height; ++y)
@@ -410,8 +407,10 @@ IMAGE* Adjust_Width(IMAGE* small, IMAGE* big){
   return result;
 }
 
-void Add_effect(IMAGE* base, IMAGE* test, IMAGE* out, int Effect_ID)
+int Add_effect(IMAGE* base, IMAGE* test, IMAGE* out, int Effect_ID)
 { 
+  int pixel_diff = 0;
+
   out->width = base->width;
   out->height = base->height;
   out->pixels = (PIXEL*)malloc(base->width * base->height * sizeof(PIXEL));
@@ -451,6 +450,9 @@ void Add_effect(IMAGE* base, IMAGE* test, IMAGE* out, int Effect_ID)
         pixel_out->green  = 0;
         pixel_out->blue   = 0;
         pixel_out->alpha  = 255;
+
+        pixel_diff++;
+
       }else{
         if (Effect_ID == 2)
         {
@@ -462,6 +464,7 @@ void Add_effect(IMAGE* base, IMAGE* test, IMAGE* out, int Effect_ID)
       }
     }
   }
+  return pixel_diff;
 }
 
 void Stitch(IMAGE* left, IMAGE* right, IMAGE* result){
@@ -499,3 +502,15 @@ void Stitch(IMAGE* left, IMAGE* right, IMAGE* result){
     }
   }
 }
+
+void Print_Row( FILE* fp, int index, char* name, int diff){
+  fprintf(fp,
+
+    "<tr>\n\
+      <td>%04d</td>\n\
+      <td>%s</td>\n\
+      <td>%04d</td>\n\
+      <td><img id=\"sprite\" src=\"images/sprite_%04d.png\"></td>\n\
+      <td>To-be-displayed</td>\n\
+    </tr>\n", index, name, diff, index);
+}
diff --git a/tests/make_png/bitmap.h b/tests/make_png/bitmap.h
index 27cc56900..2f2fcb585 100644
--- a/tests/make_png/bitmap.h
+++ b/tests/make_png/bitmap.h
@@ -72,10 +72,12 @@ void Read_PNG(char *filename, IMAGE * after_effect);
 // Base Glyph = Gray {127,0,0,255} OR as it is 
 // Differences = Red {255,0,0,255}
 // Effect_ID = {1 or 2}
-void Add_effect(IMAGE* base, IMAGE* test, IMAGE* out, int Effect_ID); 
+int Add_effect(IMAGE* base, IMAGE* test, IMAGE* out, int Effect_ID);
 // Stitch 2 PNG files
 void Stitch(IMAGE* left, IMAGE* right, IMAGE* result);
 // Make the Height of both the PNG(s) same by filling with white pixels
 IMAGE* Adjust_Height(IMAGE* small, IMAGE* big );
 // Make the Width of both the PNG(s) same by filling with white pixels
-IMAGE* Adjust_Width(IMAGE* small, IMAGE* big );
\ No newline at end of file
+IMAGE* Adjust_Width(IMAGE* small, IMAGE* big );
+// Print Row in a HTML file
+void Print_Row( FILE* fp, int index, char* name, int diff);
diff --git a/tests/make_png/make_sprite.c b/tests/make_png/make_sprite.c
index e63d9030d..141dec0e0 100644
--- a/tests/make_png/make_sprite.c
+++ b/tests/make_png/make_sprite.c
@@ -61,9 +61,11 @@ int main(int argc, char const *argv[])
 
   HASH_128 *  base_murmur = (HASH_128 *) malloc(sizeof(HASH_128)) ;
   HASH_128 *  test_murmur = (HASH_128 *) malloc(sizeof(HASH_128)) ;  
-  char base_hash[32];
-  char test_hash[32];
+
   int Is_Different;
+  int pixel_diff;
+
+  char glyph_name[50] = ".not-def";
 /*******************************************************************/
 
   FT_Error ( *Base_Init_FreeType )( FT_Library* );
@@ -306,6 +308,49 @@ int main(int argc, char const *argv[])
   if (stat("./images/", &st) == -1) {
       mkdir("./images/", 0777);
   }
+
+  FILE* fp = fopen("index.html","w");
+
+  fprintf(fp,
+  "<html>\n\
+    <head>\n\
+      <title>\n\
+        Glyph_Diff\n\
+      </title>\n\
+      <script src=\"script.js\" type=\"text/javascript\"></script>\n\
+      <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">\n\
+    </head>\n\
+    <body>\n\
+    <div class=\"freeze\">\n\
+      <h4>Font Family: %s</h4>\n\
+      <h4>Style:       %s</h4>\n\
+      <p><b>%d</b>pt at <b>%d</b>ppi</p>\n\
+    </div>\n\
+    <table>\n\
+    <thead>\n\
+      <tr>\n\
+      <th onclick=\"sort_t(data,0,asc1);asc1*=-1;asc2=1;asc3=1;\">\n\
+        <a href=\"#\">Glyph Index</a>\n\
+      </th>\n\
+      <th onclick=\"sort_t(data,1,asc2);asc2*=-1;asc3=1;asc1=1;\">\n\
+        <a href=\"#\">Glyph Name</a>\n\
+      </th>\n\
+      <th onclick=\"sort_t(data,2,asc3);asc3*=-1;asc1=1;asc2=1;\">\n\
+        <a href=\"#\">Difference</a>\n\
+      </th>\n\
+      <th>\n\
+        Images\n\
+      </th>\n\
+      <th>\n\
+        Hash-Values\n\
+      </th>\n\
+      </tr>\n\
+    </thead>\n\
+    <tbody id=\"data\">\n", base_face->family_name,
+                              base_face->style_name,
+                              size,
+                              DPI);
+
 // Need to write code to check the values in FT_Face and compare
   for (int i = 0; i < base_face->num_glyphs; ++i)
   {
@@ -373,10 +418,11 @@ int main(int argc, char const *argv[])
       exit(1);
     }
     
-    sprintf( output_file_name, "./images/sprite_%d.png", i );
+    sprintf( output_file_name, "./images/sprite_%04d.png", i );
 
     if (Is_Different != 0)
     {
+      pixel_diff = 0;
       if (render_mode == 0)
       {
         Make_PNG( &base_target, base_png, i, render_mode );
@@ -405,7 +451,7 @@ int main(int argc, char const *argv[])
       }
 
       Add_effect( base_png, test_png, after_effect_1, 1);
-      Add_effect( base_png, test_png, after_effect_2, 2);
+      pixel_diff = Add_effect( base_png, test_png, after_effect_2,2);
 
       Stitch( base_png, test_png, combi_effect_1);
       Stitch( after_effect_1, after_effect_2, combi_effect_2);
@@ -413,9 +459,27 @@ int main(int argc, char const *argv[])
       Stitch( combi_effect_1, combi_effect_2, output);
 
       Generate_PNG ( output, output_file_name, render_mode );
+
+      if (FT_HAS_GLYPH_NAMES(base_face))
+      {
+        FT_Get_Glyph_Name(  base_face,
+                            i,
+                            glyph_name,
+                            50 );
+      }
+
+      Print_Row(fp,i,glyph_name,pixel_diff);
     }
   }
 
+  fprintf(fp,
+        "</tbody>\n\
+        </table>\n\
+      </body>\n\
+    </html>\n" );
+
+  fclose(fp);
+
   error = Base_Done_Face(base_face);
   if(error){
     printf("Error freeing the face object");
diff --git a/tests/make_png/script.js b/tests/make_png/script.js
new file mode 100644
index 000000000..0198cf9ea
--- /dev/null
+++ b/tests/make_png/script.js
@@ -0,0 +1,22 @@
+var people, asc1 = 1,asc2 = 1,asc3 = 1;
+
+function sort_t(tbody, col, asc){
+    var rows = tbody.rows, rlen = rows.length, arr = new Array(), i, j, cells, clen;
+    // fill the array with values from the table
+    for(i = 0; i < rlen; i++){
+    cells = rows[i].cells;
+    clen = cells.length;
+    arr[i] = new Array();
+        for(j = 0; j < clen; j++){
+        arr[i][j] = cells[j].innerHTML;
+        }
+    }
+    // sort the array by the specified column number (col) and order (asc)
+    arr.sort(function(a, b){
+        return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1*asc);
+    });
+    for(i = 0; i < rlen; i++){
+        arr[i] = "<td>"+arr[i].join("</td><td>")+"</td>";
+    }
+    tbody.innerHTML = "<tr>"+arr.join("</tr><tr>")+"</tr>";
+}
\ No newline at end of file
diff --git a/tests/make_png/style.css b/tests/make_png/style.css
new file mode 100644
index 000000000..64a3e4a00
--- /dev/null
+++ b/tests/make_png/style.css
@@ -0,0 +1,34 @@
+.freeze{
+  height: 50px;
+  line-height: 60%;
+  padding: 4px 16px;
+}
+#sprite { 
+    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
+    image-rendering: -moz-crisp-edges;          /* Firefox                        */
+    image-rendering: -o-crisp-edges;            /* Opera                          */
+    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
+    image-rendering: pixelated;                 /* Chrome */
+    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
+    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
+    width: 50%;
+    height: auto;
+}
+table {
+  border-collapse: collapse;
+  border: none;
+  position: relative;
+  top: 60px;
+}
+th,
+td {
+  border: 1px solid black;
+  padding: 4px 16px;
+  font-family: "Courier New", Courier, monospace;
+  font-size: 16px;
+  text-align: left;
+}
+th {
+  background-color: #C8C8C8;
+  cursor: pointer;
+}
\ No newline at end of file