Code for List-View HTML page generation
This commit is contained in:
parent
f5a2bc2e60
commit
98839c0811
|
@ -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).
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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>";
|
||||
}
|
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue