[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[freetype2] GSoC-2017-kushal ec0f3ae: Adding 3 Sprite Animations and add
|
From: |
Kushal K S V S |
|
Subject: |
[freetype2] GSoC-2017-kushal ec0f3ae: Adding 3 Sprite Animations and adding DLL locations |
|
Date: |
Sun, 27 Aug 2017 15:45:14 -0400 (EDT) |
branch: GSoC-2017-kushal
commit ec0f3aea2d590dd06900a7d2e805400cd75c5235
Author: Kushal K S V S <address@hidden>
Commit: Kushal K S V S <address@hidden>
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 -----
.../make_png/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(-)
diff --git a/tests/make_png/README b/tests/make_png/README
index a878e83..91c4d34 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 6773b7d..5fa1f2b 100644
--- a/tests/make_png/bitmap.c
+++ b/tests/make_png/bitmap.c
@@ -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\
diff --git a/tests/make_png/html/diff.html b/tests/make_png/html/diff.html
index 2d187a0..0702fa3 100644
--- a/tests/make_png/html/diff.html
+++ b/tests/make_png/html/diff.html
@@ -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>
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 0ef4fe8..0000000
--- 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 adc269c..b3fabf8 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 c69b698..c2c0029 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;
+}
address@hidden one_two {
+ from { background-position: 0px; }
+ to { background-position: 66.66%; }
+}
address@hidden one_three {
+ from { background-position: 0px; }
+ to { background-position: 133.33%; }
+}
address@hidden one_four {
+ from { background-position: 0px; }
+ to { background-position: 200%; }
+}
+
address@hidden one_two {
+ from { background-position: 0px; }
+ to { background-position: 66.66%; }
+}
address@hidden one_three {
+ from { background-position: 0px; }
+ to { background-position: 133.33%; }
address@hidden one_four {
+ from { background-position: 0px; }
+ to { background-position: 200%; }
+}
address@hidden one_two {
+ from { background-position: 0px; }
+ to { background-position: 66.66%; }
+}
address@hidden one_three {
+ from { background-position: 0px; }
+ to { background-position: 133.33%; }
+}
address@hidden one_four {
+ from { background-position: 0px; }
+ to { background-position: 200%; }
+}
+
address@hidden one_two {
+ from { background-position: 0px; }
+ to { background-position: 66.66%; }
+}
address@hidden one_three {
+ from { background-position: 0px; }
+ to { background-position: 133.33%; }
+}
address@hidden one_four {
+ from { background-position: 0px; }
+ to { background-position: 200%; }
+}
+
address@hidden one_two {
+ from { background-position: 0px; }
+ to { background-position: 66.66%; }
+}
address@hidden one_three {
+ from { background-position: 0px; }
+ to { background-position: 133.33%; }
+}
address@hidden 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 0133dd4..f67695f 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 "
<!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
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [freetype2] GSoC-2017-kushal ec0f3ae: Adding 3 Sprite Animations and adding DLL locations,
Kushal K S V S <=