Adding 3 Sprite Animations and adding DLL locations

author: Kushal K S V S <kkushal32@gmail.com> 2017-08-27 12:44:54 -0700
committer: Kushal K S V S <kkushal32@gmail.com> 2018-03-18 20:40:45 +0530
commit: 13d3b701f0a4c8d9a21ecdad970a62748e098521 (patch)
tree: a6ecec93454446c87844eb31211c0e6fd996b05b
parent: 8f99ece4ef296350f6b86643f0ce2284a99162b0 (diff)
download: freetype2-13d3b701f0a4c8d9a21ecdad970a62748e098521.tar.gz
7 files changed, 154 insertions, 311 deletions
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 ){
     </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 2d187a06f..0702fa3df 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 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 "
 <!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
author	Kushal K S V S <kkushal32@gmail.com>	2017-08-27 12:44:54 -0700
committer	Kushal K S V S <kkushal32@gmail.com>	2018-03-18 20:40:45 +0530
commit	13d3b701f0a4c8d9a21ecdad970a62748e098521 (patch)
tree	a6ecec93454446c87844eb31211c0e6fd996b05b
parent	8f99ece4ef296350f6b86643f0ce2284a99162b0 (diff)
download	freetype2-13d3b701f0a4c8d9a21ecdad970a62748e098521.tar.gz