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 /tests/make_png/html
parent: 8f99ece4ef296350f6b86643f0ce2284a99162b0 (diff)
download: freetype2-13d3b701f0a4c8d9a21ecdad970a62748e098521.tar.gz
4 files changed, 119 insertions, 290 deletions
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%; }
+}
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 /tests/make_png/html
parent	8f99ece4ef296350f6b86643f0ce2284a99162b0 (diff)
download	freetype2-13d3b701f0a4c8d9a21ecdad970a62748e098521.tar.gz