Code for List-View HTML page generation

This commit is contained in:
Kushal K S V S 2017-07-17 01:35:00 +05:30
parent f5a2bc2e60
commit 98839c0811
6 changed files with 152 additions and 11 deletions

View File

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

View File

@ -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);
}

View File

@ -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 );
IMAGE* Adjust_Width(IMAGE* small, IMAGE* big );
// Print Row in a HTML file
void Print_Row( FILE* fp, int index, char* name, int diff);

View File

@ -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");

22
tests/make_png/script.js Normal file
View File

@ -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>";
}

34
tests/make_png/style.css Normal file
View File

@ -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;
}