rgraves
/
freetype2
forked from minhngoc25a/freetype2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding 3 Sprite Animations and adding DLL locations

This commit is contained in:
Kushal K S V S 2017-08-27 12:44:54 -07:00
parent 8f99ece4ef
commit 13d3b701f0
7 changed files with 154 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
tests/make_png/README
View File

@ -74,16 +74,18 @@ FEATURES
View lists of glyphs in tables in the left iFrame accessed by
selecting values from the drop-box.
By clicking on the Headers of the respective columns,they can be
arranged (in increasing/decreasing order) based on
-> Glyph-Index
-> Name
-> Difference Metric
By clicking on the Headers of the respective columns,they can be
arranged (in increasing/decreasing order) based on
-> Glyph-Index
-> Name
-> Difference Metric
When clicked on any image in the table, a detailed visualization
page for the glyph is shown in the right iFrame.
When clicked on any image in the table, a detailed visualization
page for the glyph is shown in the right iFrame.
To be ADDED ...
Click on the Buttons below the iframe for the animations.
To be Added ...

10
tests/make_png/bitmap.c
View File

@ -664,16 +664,20 @@ void Print_Head( FILE* fp ){
</head>\n\
<body>\n\
<table>\n\
<colgroup>\n\
<col span=\"3\" style=\"background-color:white\">\n\
<col style=\"width:50%%\">\n\
</colgroup>\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\
<a href=\"#\">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\
<a href=\"#\">Name</a>\n\
</th>\n\
<th onclick=\"sort_t(data,2,asc3);asc3*=-1;asc1=1;asc2=1;\">\n\
<a href=\"#\">Difference</a>\n\
<a href=\"#\">Diff</a>\n\
</th>\n\
<th>\n\
Images\n\

52
tests/make_png/html/diff.html
View File

@ -2,62 +2,10 @@
<html id="body">
<head>
<title>Detailed Comparison</title>
<script type="text/javascript" src ="scripts/jquery-3.2.1.js"></script>
<script type="text/javascript" src ="scripts/jquery.animateSprite.js"></script>
<script type="text/javascript" src ="scripts/top.js" ></script>
<link rel="stylesheet" type="text/css" href="styles/top.css">
</head>
<p id="demo"></p>
<div id="animation" class="animation"></div><br>
<button id="start">Start</button>
<button id="play">Play</button>
<button id="stop">Stop</button>
<button id="changeFPS">Change FPS</button><br>
<script>
/* global $ */
var currentFps = 1;
var animationSettings = {
fps: currentFps,
loop: true,
autoplay: false,
animations: {
walkRight: [0, 3]
}
};
$(document).ready(function(){
$("#start").click(function(){
$('.animation').animateSprite(animationSettings);
var play = function(){
$('.animation').animateSprite('play');
}
$('#play').on('click', play);
$('#stop').on('click', function(){
$('.animation').animateSprite('stop');
});
$('#changeFPS').on('click', function(){
currentFps = (currentFps === 2) ? 1 : 2;
$('.animation').animateSprite('fps', currentFps);
});
$('body').on('keydown', function(ev){
if (ev.keyCode === 39){
goRight();
} else if (ev.keyCode === 37) {
goLeft();
}
console.log('ev', ev.keyCode);
});
});
});
</script>
</body>
</html>

227
tests/make_png/html/scripts/jquery.animateSprite.js
View File

@ -1,227 +0,0 @@
/*! jqueryanimatesprite - v1.3.5 - 2014-10-17
* http://blaiprat.github.io/jquery.animateSprite/
* Copyright (c) 2014 blai Pratdesaba; Licensed MIT */
(function ($, window, undefined) {
'use strict';
var init = function (options) {
return this.each(function () {
var $this = $(this),
data = $this.data('animateSprite');
// ASYNC
// If we don't specify the columns, we
// can discover using the background size
var discoverColumns = function (cb) {
var imageSrc = $this.css('background-image').replace(/url\((['"])?(.*?)\1\)/gi, '$2');
var image = new Image();
image.onload = function () {
var width = image.width,
height = image.height;
cb(width, height);
};
image.src = imageSrc;
};
if (!data) {
$this.data('animateSprite', {
settings: $.extend({
width: $this.width(),
height: $this.height(),
totalFrames: false,
columns: false,
fps: 12,
complete: function () {},
loop: false,
autoplay: true
}, options),
currentFrame: 0,
controlAnimation: function () {
var checkLoop = function (currentFrame, finalFrame) {
currentFrame++;
if (currentFrame >= finalFrame) {
if (this.settings.loop === true) {
currentFrame = 0;
data.controlTimer();
} else {
this.settings.complete();
}
} else {
data.controlTimer();
}
return currentFrame;
};
if (this.settings.animations === undefined) {
$this.animateSprite('frame', this.currentFrame);
this.currentFrame = checkLoop.call(this, this.currentFrame, this.settings.totalFrames);
} else {
if (this.currentAnimation === undefined) {
for (var k in this.settings.animations) {
this.currentAnimation = this.settings.animations[k];
break;
}
}
var newFrame = this.currentAnimation[this.currentFrame];
$this.animateSprite('frame', newFrame);
this.currentFrame = checkLoop.call(this, this.currentFrame, this.currentAnimation.length);
}
},
controlTimer: function () {
// duration overrides fps
var speed = 1000 / data.settings.fps;
if (data.settings.duration !== undefined) {
speed = data.settings.duration / data.settings.totalFrames;
}
data.interval = setTimeout(function () {
data.controlAnimation();
}, speed);
}
});
data = $this.data('animateSprite');
// Setting up columns and total frames
if (!data.settings.columns) {
// this is an async function
discoverColumns(function (width, height) {
// getting amount of columns
data.settings.columns = Math.round(width / data.settings.width);
// if totalframes are not specified
if (!data.settings.totalFrames) {
// total frames is columns times rows
var rows = Math.round(height / data.settings.height);
data.settings.totalFrames = data.settings.columns * rows;
}
if (data.settings.autoplay) {
data.controlTimer();
}
});
} else {
// if everything is already set up
// we start the interval
if (data.settings.autoplay) {
data.controlTimer();
}
}
}
});
};
var frame = function (frameNumber) {
// frame: number of the frame to be displayed
return this.each(function () {
if ($(this).data('animateSprite') !== undefined) {
var $this = $(this),
data = $this.data('animateSprite'),
row = Math.floor(frameNumber / data.settings.columns),
column = frameNumber % data.settings.columns;
$this.css('background-position', (-data.settings.width * column) + 'px ' + (-data.settings.height * row) + 'px');
}
});
};
var stop = function () {
return this.each(function () {
var $this = $(this),
data = $this.data('animateSprite');
clearTimeout(data.interval);
});
};
var resume = function () {
return this.each(function () {
var $this = $(this),
data = $this.data('animateSprite');
// always st'op animation to prevent overlapping intervals
$this.animateSprite('stopAnimation');
data.controlTimer();
});
};
var restart = function () {
return this.each(function () {
var $this = $(this),
data = $this.data('animateSprite');
$this.animateSprite('stopAnimation');
data.currentFrame = 0;
data.controlTimer();
});
};
var play = function (animationName) {
return this.each(function () {
var $this = $(this),
data = $this.data('animateSprite');
if (typeof animationName === 'string') {
$this.animateSprite('stopAnimation');
if (data.settings.animations[animationName] !== data.currentAnimation) {
data.currentFrame = 0;
data.currentAnimation = data.settings.animations[animationName];
}
data.controlTimer();
} else {
$this.animateSprite('stopAnimation');
data.controlTimer();
}
});
};
var fps = function (val) {
return this.each(function () {
var $this = $(this),
data = $this.data('animateSprite');
// data.fps
data.settings.fps = val;
});
};
var methods = {
init: init,
frame: frame,
stop: stop,
resume: resume,
restart: restart,
play: play,
stopAnimation: stop,
resumeAnimation: resume,
restartAnimation: restart,
fps: fps
};
$.fn.animateSprite = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.animateSprite');
}
};
})(jQuery, window);

17
tests/make_png/html/scripts/top.js
View File

@ -49,7 +49,7 @@ function frame_2_source(image){
//Using dimensions of the iFrame
var win_w = window.innerWidth;
var win_h = window.innerHeight-60;
var win_h = window.innerHeight-40;
// r_w and r_j represent the maximum times that the width or the
// height can be multiplied so that we get the maximum image size
@ -77,3 +77,18 @@ function frame_2_source(image){
div.style.height= div_h + "px";
}
function class_one_two(){
var div = frame_2.document.getElementById('animation');
div.className = 'animation one_two';
}
function class_one_three(){
var div = frame_2.document.getElementById('animation');
div.className = 'animation one_three';
}
function class_one_four(){
var div = frame_2.document.getElementById('animation');
div.className = 'animation one_four';
}

113
tests/make_png/html/styles/top.css
View File

@ -1,3 +1,6 @@
* {
font-family: "Courier New", Courier, monospace;
}
#sprite {
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
@ -6,13 +9,14 @@
image-rendering: pixelated; /* Chrome */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
width: 70%;
width: 100%;
height: auto;
}
table {
border-collapse: collapse;
border: none;
position: relative;
width: 100%;
}
th,
td {
@ -26,19 +30,25 @@ th {
background-color: #C8C8C8;
cursor: pointer;
}
#image_row{
width: 50%;
height: auto;
}
/*Top Page styling begins*/
#frame_1{
width:49%;
height:500px;
align-self: right;
width:49%;
height:500px;
align-self: right;
}
#frame_2{
width:49%;
height:500px;
align-self: left;
width:49%;
height:500px;
align-self: left;
}
#select_animation{
margin-left: 50%;
}
.select {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
text-align: left;
}
@ -53,13 +63,96 @@ th {
margin: auto;
display: block;
background: url("braceleft.png");
background: url("");
background-repeat: no-repeat;
background-size: cover;
width: 120px;
height: 130px;
}
/*Animations*/
.one_two {
-webkit-animation: one_two 2s steps(2) infinite;
-moz-animation: one_two 2s steps(2) infinite;
-ms-animation: one_two 2s steps(2) infinite;
-o-animation: one_two 2s steps(2) infinite;
animation: one_two 2s steps(2) infinite;
}
.one_three {
-webkit-animation: one_three 2s steps(2) infinite;
-moz-animation: one_three 2s steps(2) infinite;
-ms-animation: one_three 2s steps(2) infinite;
-o-animation: one_three 2s steps(2) infinite;
animation: one_three 2s steps(2) infinite;
}
.one_four {
-webkit-animation: one_four 2s steps(2) infinite;
-moz-animation: one_four 2s steps(2) infinite;
-ms-animation: one_four 2s steps(2) infinite;
-o-animation: one_four 2s steps(2) infinite;
animation: one_four 2s steps(2) infinite;
}
@-webkit-keyframes one_two {
from { background-position: 0px; }
to { background-position: 66.66%; }
}
@-webkit-keyframes one_three {
from { background-position: 0px; }
to { background-position: 133.33%; }
}
@-webkit-keyframes one_four {
from { background-position: 0px; }
to { background-position: 200%; }
}
@-moz-keyframes one_two {
from { background-position: 0px; }
to { background-position: 66.66%; }
}
@-moz-keyframes one_three {
from { background-position: 0px; }
to { background-position: 133.33%; }
}@-moz-keyframes one_four {
from { background-position: 0px; }
to { background-position: 200%; }
}
@-ms-keyframes one_two {
from { background-position: 0px; }
to { background-position: 66.66%; }
}
@-ms-keyframes one_three {
from { background-position: 0px; }
to { background-position: 133.33%; }
}
@-ms-keyframes one_four {
from { background-position: 0px; }
to { background-position: 200%; }
}
@-o-keyframes one_two {
from { background-position: 0px; }
to { background-position: 66.66%; }
}
@-o-keyframes one_three {
from { background-position: 0px; }
to { background-position: 133.33%; }
}
@-o-keyframes one_four {
from { background-position: 0px; }
to { background-position: 200%; }
}
@keyframes one_two {
from { background-position: 0px; }
to { background-position: 66.66%; }
}
@keyframes one_three {
from { background-position: 0px; }
to { background-position: 133.33%; }
}
@keyframes one_four {
from { background-position: 0px; }
to { background-position: 200%; }
}

28
tests/make_png/runme.sh
View File

@ -17,20 +17,21 @@ FT_TEST_TEST_DLL=${FT_TEST_TEST_DLL:-$FT_TEST_TEST_DIR/objs/.libs/libfreetype.so
mkdir ./html/pages
touch ./html/top.html
#####################################################################
echo '
echo "
<!DOCTYPE html>
<head>
<script type="text/javascript" src ="scripts/jquery-3.2.1.js"></script>
<script type="text/javascript" src ="scripts/jquery.animateSprite.js"></script>
<script type="text/javascript" src ="scripts/top.js" ></script>
<link rel="stylesheet" type="text/css" href="styles/top.css">
<script type=\"text/javascript\" src =\"scripts/top.js\" ></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"styles/top.css\">
</head>
<html>
<body onload="change()">
<iframe id="frame_1" name="frame_1" src="" ></iframe>
<iframe id="frame_2" name="frame_2" src="diff.html" ></iframe>
<div class="select">
'>./html/top.html
<body onload=\"change()\">
<div id=\"top_info\">
<p>Base Version: $FT_TEST_BASE_DLL<br>
Test Version: $FT_TEST_TEST_DLL
</p>
</div>
<iframe id=\"frame_1\" name=\"frame_1\" src=\"\" ></iframe>
<iframe id=\"frame_2\" name=\"frame_2\" src=\"diff.html\" ></iframe>">./html/top.html
#####################################################################
for i in $FT_TEST_DPI; do
mkdir ./html/pages/$i
@ -47,6 +48,13 @@ for i in $FT_TEST_DPI; do
done
done
#####################################################################
echo '<div id="select_animation">
<button onclick="class_one_two()">One-Two</button>
<button onclick="class_one_three()">One-Three</button>
<button onclick="class_one_four()">One-Four</button>
</div>
<div class="select">'>>./html/top.html
#####################################################################
echo '<label>DPI&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp:<select name="dpi" id="dpi" onchange="change()">'>>./html/top.html
for i in $FT_TEST_DPI; do
echo " <option value= $i > $i </option>">>./html/top.html