From 13d3b701f0a4c8d9a21ecdad970a62748e098521 Mon Sep 17 00:00:00 2001 From: Kushal K S V S Date: Sun, 27 Aug 2017 12:44:54 -0700 Subject: [PATCH] Adding 3 Sprite Animations and adding DLL locations --- tests/make_png/README | 18 +- tests/make_png/bitmap.c | 10 +- tests/make_png/html/diff.html | 52 ---- .../html/scripts/jquery.animateSprite.js | 227 ------------------ tests/make_png/html/scripts/top.js | 17 +- tests/make_png/html/styles/top.css | 113 ++++++++- tests/make_png/runme.sh | 28 ++- 7 files changed, 154 insertions(+), 311 deletions(-) delete mode 100755 tests/make_png/html/scripts/jquery.animateSprite.js diff --git a/tests/make_png/README b/tests/make_png/README index a878e8332..91c4d340d 100644 --- a/tests/make_png/README +++ b/tests/make_png/README @@ -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 ... diff --git a/tests/make_png/bitmap.c b/tests/make_png/bitmap.c index 6773b7de8..5fa1f2bb3 100644 --- a/tests/make_png/bitmap.c +++ b/tests/make_png/bitmap.c @@ -664,16 +664,20 @@ void Print_Head( FILE* fp ){ \n\ \n\ \n\ + \n\ + \n\ + \n\ + \n\ \n\ \n\ \n\ \n\ \n\
\n\ - Glyph Index\n\ + Index\n\ \n\ - Glyph Name\n\ + Name\n\ \n\ - Difference\n\ + Diff\n\ \n\ Images\n\ diff --git a/tests/make_png/html/diff.html b/tests/make_png/html/diff.html index 2d187a06f..0702fa3df 100644 --- a/tests/make_png/html/diff.html +++ b/tests/make_png/html/diff.html @@ -2,62 +2,10 @@ Detailed Comparison - - -


- - - - -
- - diff --git a/tests/make_png/html/scripts/jquery.animateSprite.js b/tests/make_png/html/scripts/jquery.animateSprite.js deleted file mode 100755 index 0ef4fe885..000000000 --- a/tests/make_png/html/scripts/jquery.animateSprite.js +++ /dev/null @@ -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); diff --git a/tests/make_png/html/scripts/top.js b/tests/make_png/html/scripts/top.js index adc269c71..b3fabf8c0 100644 --- a/tests/make_png/html/scripts/top.js +++ b/tests/make_png/html/scripts/top.js @@ -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'; +} + diff --git a/tests/make_png/html/styles/top.css b/tests/make_png/html/styles/top.css index c69b6981e..c2c0029a0 100644 --- a/tests/make_png/html/styles/top.css +++ b/tests/make_png/html/styles/top.css @@ -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%; } +} diff --git a/tests/make_png/runme.sh b/tests/make_png/runme.sh index 0133dd420..f67695fdf 100755 --- a/tests/make_png/runme.sh +++ b/tests/make_png/runme.sh @@ -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 " - - - - + + - - - -
- '>./html/top.html + +
+

Base Version: $FT_TEST_BASE_DLL
+ Test Version: $FT_TEST_TEST_DLL +

+
+ + ">./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 '
+ + + +
+
'>>./html/top.html +##################################################################### echo '