Adding 3 Sprite Animations and adding DLL locations
This commit is contained in:
Kushal K S V S
parent
8f99ece4ef
commit
13d3b701f0
|
|
@ -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 ...
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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\
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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%; }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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        :<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
|
||||
|
|
|
|||
Loading…
Reference in New Issue