André Abt

Waterglass Effect with KineticJS

André — Wed, 16 Jan 2013 19:56:56 +0000

I needed to code a Waterglass fill effect for a project and this seemed to be a good KineticJS beginner example and a nice topic for a new blog post. I think especially the image preloader is a good learning example.

Checkout the demo!

You can view the running demo on jsfiddle and play live with the code here: http://jsfiddle.net/monobasic/Vs23S/
From here it would be easy to add more animated layers like shadows and make the animation even more realistic.

HTML



    
        
        Glass

JS (main.js)

/*jslint browser: true, sloppy: true, plusplus: true, nomen: true, todo: true*/
/*globals $, jQuery, console, window, Kinetic*/

var glass,
    water,
    levelFull = 70,
    levelEmpty = 300,
    currentWaterY,
    currentWaterScale,
    layer = new Kinetic.Layer(),
    stage = new Kinetic.Stage({
        container: 'container',
        width: 240,
        height: 300
    }),
    sources = {
        bg: 'img/glass_bg.png',
        water: 'img/glass_water.png'
    };

function loadImages(sources, callback) {
    var images = {},
        loadedImages = 0,
        numImages = 0,
        src;
    // get num of sources
    for (src in sources) {
        numImages++;
    }
    for (src in sources) {
        images[src] = new Image();
        images[src].onload = function () {
            if (++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}

function changeWaterLevel(level) {
    var newLevelPercent,
        newLevel,
        newScaleX;

    newLevelPercent = parseInt(level, 10);
    if (newLevelPercent > 100) {
        newLevelPercent = 100;
    }

    newLevel = levelEmpty - (100 / levelFull * newLevelPercent);  // calculate new level, 0% is 190px and 100% is 30px
    newScaleX = 1 + (0.3 / 100 * newLevelPercent); // calculate new scale multiplicator, 0% is 1 and 100% is 1.5

    water.transitionTo({
        x: glass.getWidth() / 2 - 3,
        y: newLevel,
        opacity: 1,
        scale: {
            x: newScaleX,
            y: 1
        },
        duration: 1,
        easing: 'ease-out'
    });
}

// load images and init
loadImages(sources, function (images) {
    glass = new Kinetic.Image({
        width: 248,
        height: 275,
        x: 0,
        y: 0,
        image: images.bg
    });

    water = new Kinetic.Image({
        x: glass.getWidth() / 2 - 3,
        y: levelEmpty,
        width: 86,
        height: 20,
        offset: [43, 106],
        image: images.water
    });

    // add the shapes to the layer
    layer.add(glass);
    layer.add(water);

    // add the layer to the stage
    stage.add(layer);

    // add click function to fill the glas
    stage.on('click', function (evt) {
        var mousePosition = stage.getMousePosition(),
            newLevelPx = 148 - mousePosition.y + 50,
            newLevelPercent = parseInt(100 / 148 * newLevelPx, 10);
        if (newLevelPercent < 0) {
            newLevelPercent = 0;
        }
        changeWaterLevel(newLevelPercent);
    });

    // get current values
    currentWaterY = water.getY();
    currentWaterScale = water.getScale();
});

$(document).ready(function () {

    $('.button').click(function () {
        var newLevel = $('.percent').val();
        //console.log('change water level to: ' + newLevel);

        changeWaterLevel(newLevel);
    });

});

jQuery AJAX Loader

André — Sun, 16 Dec 2012 12:16:49 +0000

This is a simple jQuery Ajax Loader you can use in your projects. If a Element of the site is loaded via Ajax, just trigger the $(‘#elementToLoad’).showLoaderPanel(); method before the ajax load, and in the callback of the load function, trigger the $(‘#elementToLoad’).hideLoaderPanel();.

To generate a animated loader .gif, visit this site:
http://www.ajaxload.info/.

The CSS:

.loader {
    display: none; /* hidden on init */
    position: absolute;
    top: 0;
    left: 0;
    background: url(/bundles/epaymentviewer/images/loader_bg.png) top left repeat;
}

.spinner-small {
  height: 16px;
  width: 16px;
  background: url('/bundles/epaymentviewer/images/ajax-loader-small.gif') center left no-repeat;
}

.spinner-medium {
  height: 32px;
  width: 32px;
  background: url('/bundles/epaymentviewer/images/ajax-loader-medium.gif') center left no-repeat;
}

.spinner-big {
  height: 48px;
  width: 48px;
  background: url('/bundles/epaymentviewer/images/ajax-loader-big.gif') center left no-repeat;
}

The Javascript:

(function($) {

        // cool way to find the current element with the highest z-index
        var maxZIndex = Math.max.apply(null, $.map($('body *'), function(e,n){
            if($(e).css('position')=='absolute')
                return parseInt($(e).css('z-index')) || 1 ;
            })
        );

        // show/hide ajax loader panel methods
        $.fn.showLoaderPanel = function (spinnerSize) {

            spinnerSize = typeof spinnerSize !== 'undefined' ? spinnerSize : false;
            console.log(spinnerSize);

            var element, elementOffset, activeLoaderClass, panel, panelWidth, panelHeight, spinner;
            element = $(this);
            activeLoaderClass = 'loader-panel-active';
            panel = $('');
            spinner = $('');
            elementOffset = element.offset()

            // check if there is allready a visible loader panel
            if (element.hasClass(activeLoaderClass)) {
                console.log('there is allready a active loader panel!');
                return;
            } else {
                // add class indicator
                element.addClass(activeLoaderClass);
                console.log('generating loader panel..');

                // add parent element indicator
                element.data('panel', panel);
                console.log(element.data('panel'));

                // determine/set size/position of element
                panelWidth = element.width();
                panelHeight = element.height();
                console.log('panelWidth: ' + panelWidth);
                console.log('panelHeight: ' + panelHeight);

                // determine spinner size (sizes 16x16, 32x32, 48x48)
                if (spinnerSize) {
                    // override spinner size
                    spinner.addClass('ddt-spinner-' + spinnerSize);
                } else if (panelWidth > 400 && panelHeight > 400) {
                    // big spinner
                    spinner.addClass('ddt-spinner-big');
                    console.log('add big spinner class!');
                } else if (panelWidth > 200 && panelWidth < 400 && panelHeight > 200 && panelHeight < 400) {
                    // medium spinner
                    spinner.addClass('ddt-spinner-medium');
                    console.log('add medium spinner class!');
                } else if (panelWidth > 20 && panelWidth < 200 && panelHeight > 20 && panelHeight < 200) {
                    // small spinner
                    spinner.addClass('ddt-spinner-small');
                    console.log('add small spinner class!');
                }

                panel.css('width', panelWidth);
                panel.css('height', panelHeight);
                panel.css('top', elementOffset.top);
                panel.css('left', elementOffset.left);
                panel.css ('z-index', maxZIndex + 1);

                // position and generate spinner
                spinner.css('display', 'none');
                spinner.css('position', 'absolute');
                spinner.css('top', panel.offset().top + ( panel.height() / 2 - 24 ));
                spinner.css('left', panel.offset().left + ( panel.width() / 2 - 24 ));
                spinner.css('z-index', panel.css('z-index') + 1);

                // generate loader panel
                $('body').append(panel);

                // fade in loader panel
                panel.fadeIn(500, function() {
                    $(this).append(spinner);
                    spinner.show();
                });
            }
        };

        $.fn.hideLoaderPanel = function () {
            var activeLoaderClass = 'loader-panel-active';
            var element = $(this);

            // remove class indicator
            element.removeClass(activeLoaderClass);

            if (element.data('panel')) {
                // fadeout and remove loader panel from element
                element.data('panel').fadeOut();
            }
        };

    })(jQuery);

Tame Styled Blockquote Quotation Icons Positioning

André — Thu, 09 Aug 2012 11:45:51 +0000

Lately I run into a problem with styled blockquote quotation marks. This is a short explanation of the problem and a fix for all modern Browsers and IE>8.

If the last line length of the blockquote text was near the right border, the quotation mark was overlapping the text.

No Problem with shorter Texts.

Let’s have a look at the CSS after the fix:

blockquote {
    position: relative; /* That's the interesting part, "::after" elements seems to have a child/parent with their predcessor */
    padding: 8px 20px 5px 32px;
    width: 173px; /*225*/
}

blockquote::after {
    position: absolute; /* set the position here does the trick */
    content: "\201D";
    bottom: 5px;
    font-weight: bold;
    line-height: 0;
    vertical-align: bottom;
    color: #01428C;
 }

Problem solved:

Debug SimpleXML objects with Twig

André — Thu, 12 Apr 2012 16:01:34 +0000

Using SimpleXML objects in Twig templates sucks.. especially with older Twig versions.
To at least debug them, I’ve added a custom twig filter with the following method:

public function debugSimpleXml($simpleXmlObject) {
    $json = json_encode($simpleXmlObject);
    $array = json_decode($json, true);
    echo '';
    var_dump($array);
    echo '';
}

The “magic” happens on line 3, the second attribute set to “true”, converts returned objects into associative arrays.

JHS Little Black Buffer Review

André — Mon, 12 Dec 2011 11:48:17 +0000

I finally received my ordered LBB (Little Black Buffer) from JHS Pedals and was able to try it out over the weekend. I’ve added the Buffer to the beginning of my Pedal Chain which consists around ten different Overdrives, Delays and stuff. Most of the Pedals are True Bypass – thats a good thing you may think, but actually that causes a big treble loss.

I’ve compared the signal from the guitar running through a 3m cable direct into the Amp, and the signal running through the complete setup with all pedals and the buffer – and guess what? The Sound is 100% identical.

I can’t recommend this Buffer Pedal high enough!

http://www.jhspedals.com/jhspedals/JHS_Little_Black_Buffer.html

LiipUrlAutoConverterBundle available on github

André — Wed, 26 Oct 2011 19:23:13 +0000

Added a little Twig Extension with a Filter Method to github. It will convert urls and email addresses in a string to working html links. Nothing super fancy, but as its my first little Symfony2 bundle, its worth a blog post.

https://github.com/liip/LiipUrlAutoConverterBundle

Form Protection CSRF/XSS Nightmare today…

André — Mon, 25 Jul 2011 12:55:37 +0000

If you have a PHP Problem, do you cross check it in another browser usually? Well I’ll do in the future..

This morning I implemented a XSS/CSRF protection into a newsletter subscription form. Usually I do it with a token, that will be generated during the frontend page load, and will be written in the php session. The form content is submitted via AJAX to a PHP script, that handles the complete newsletter opt-in process. This script cross-checks the current token in the session with the submitted one.

So, inside the form page, there is something like this:

The security check is in the processing php script:

//$data is the via AJAX submited, json decoded data
if ($data['token'] !== $_SESSION['newsletter_token']) {
    die();
}

So far so good. But it was not working – so I started to debug. On the form page I checked the values of the generated token and the one in the session:

Session-Token: token_newsletter_4e2d5dd92732e4.19727735

Token: token_newsletter_4e2d5dd92732e4.19727735

Of course identical, so I checked the vars in the processing script:

string(46) “data: token_newsletter_4e2d5dd92732e4.19727735″
string(49) “session: token_newsletter_4e2d5eab38b752.61124898″

different! :-S – now how could that be?

First instant thought: “There must be a Problem with the AJAX call, so there is a different session generated or something”.. short after that I realized, that the server handles “normal” and ajax browser calls the same way. So they share the same PHP Session.

After a tipp from a friend I decided to write a quick debug script that writes debug output into a text file. This way its possible to see if the writer is called more than once.

$token = uniqid('token_newsletter_', true);
$_SESSION['newsletter_token'] = $token;
//debug write to text file
$file = 'debug.txt';
$fh = fopen($file, 'a');
$stringData = $token.PHP_EOL;
fwrite($fh, $stringData);
fclose($fh);

Now on every page reload, two new entries where written in the file, with different tokens of course! So my next idea was, there must be a problem with the CMS so the form code gets executed twice. Step, by step I broke it down, at the end I putted the code above right on top to the index.php and now what? Still two entries in the text file where generated..

I am using the Chrome Browser for Web Development usually, so I tried the same thing with Firefox -> badam only one entry!

“No way!” – so I disabled all Chrome addons but still the same problem.

After some googling I found this:

http://code.google.com/p/chromium/issues/detail?id=39402

Know what? Chrome is sending a request for a favicon on every page reload. As, is likely, you aren’t sending a favicon back, it requests one after every legitimate request.

This causes this weird problem.. in the background the favicon call seems to trigger a new execution of the php script, so a new token will be generated and stored into the session, the html output of this will not be transfered back to the client.. Very annoying but interesting problem – 3 hours waste so far.

But the story goes on, after a quick check in all other browsers I realized, Safari has the same problem.. argh!
What now? Both browsers seems to do a second request 1-2 seconds after the page load. The request dosen’t show up in the Chrome Networking Monitor. So I just created a favicon.ico file on: http://www.favicon.cc/. -> Problem gone in both Browsers! Aha!

I realized that probably this second favicon request will be translated from the .htaccess file (we have url rewriting in our CMS) and redirected to the home.php script. The Server parses the PHP, then he responds with the html output. Because this is no favicon, both browsers ignore the response. But at this time, a new token was allready generated on the server and saved into the session…

After some more tests I got to the real source of the problem in the .htaccess file. “ErrorDocument 404 /error ” – we use a custom page of our cms as 404 Error Document, so if the favicon is not found the page from the cms will be rendered and returned.. fewwww… what a way to start the week. But – I learned a lot!

Now the best solution for this seems to just allways use a favicon. Not sure if there would be a fix to exclude the favicon from the error redirect – if you know something, please let me know!

Browser based classic Sierra Adventure Games

André — Sun, 24 Oct 2010 21:19:04 +0000

If you are like me, you love those old Sierra PC Games like Space Quest, Larry, Kings Quest and so on.
Martin Kool, a crazy dutch guy ported some of the games for your browser completely based on XHTML/CSS and JS. At the moment he work on a iPad port of Space Quest.

check this out: http://sarien.net

Plasma Effect with Processing

André — Fri, 08 Oct 2010 08:13:23 +0000

I allways wanted to code “Plasma”, a psychedelic color palette effect. A FX seen a lot in Demos of the good old C-64 and Amiga days. I didn’t found any good example on the net, but a friend of mine gave me some hints and so I did it. The example should be easy to understand, if you have any questions – drop me a line! The source code is hosted on GitHub: https://github.com/monobasic/Plasma-for-Processing

Here we go with the code:

color palette [] = new color [256];  // array with 256 colors

void setup() {
  size(250, 250, P2D);
  background(51);
  noStroke();
  //smooth();

  // create color palette
  int i, r, g, b;
  // between 0..100 fade black to red
  for (i = 0; i < 100; i++)
  {
    r = i * 255 / 100;
    g = 0;
    b = 0;
    palette[i] = color (r, g, b);
  }
  // between 100..150 fade red to yellow
  for ( ; i < 150; i++)
  {
    r = 255;
    g = (i-100) * 255 / 50;
    b = 0;
    palette[i] = color (r, g, b);
  }
  // between 150..255 fade yellow to blue
  for ( ; i <= 255; i++)
  {
    r = 255 - ((i - 150) * 255 / 106);
    g = 255 - ((i - 150) * 255 / 106);
    b = (i - 150) * 255 / 106;
    palette[i] = color (r, g, b);
  }
}

float deg;
float rad;
color currentColor;
int currentPixel;
float fColor;
int time;
float value;

void draw() {

  loadPixels();

  for(int y=0;y<height;y++) {
    //draw line
    for(int x=0;x<width;x++) {
      // 4 different sinus functions modulating
      fColor = ((sin (x/18.0 + time/99.0) + cos (y/39.0 + time/30.0))
               + sin (x/39.0 - time/40.0) + cos (y/15.0 - time/40.0))
               / 4;
      /* variante
      fColor = ((sin (x/15.0 + time/99.0) * cos (y/39.0 + time/30.0))
               + sin (x/39.0 - time/40.0) * cos (y/15.0 - time/40.0)) / 4;
      */

      // normalize to 0..255.
      fColor = ((fColor + 1) / 2) * 255;

      // get color from palette
      currentColor = palette[int (fColor)];

      // colorize current pixel
      currentPixel = (y * width)  + x;
      pixels[currentPixel] = currentColor;
    }
  }
  updatePixels();
  time++;
}

The even better way to debug web sites and applications in IE 6-9

André — Wed, 28 Jul 2010 17:43:32 +0000

IETester is a free WebBrowser that allows you to have the rendering and javascript engines ofIE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process. You can extend it with “DebugBar” from the same guys – this way its finally possible to have something like FireBug for IE6. I use it every day and it rocks.

http://www.my-debugbar.com/wiki/IETester/HomePage