VizHash.js Demo (english)

HTML

<script src="https://raw.github.com/sametmax/VizHash.js/master/vizhash.min.js"></script>
<div class="demo" id="demo">

<h1>VizHash.js Demo</h1>
    
  <p><a href="https://github.com/sametmax/VizHash.js">Project page</a> </p> 
    
<p>Change the domain name, the picture will be completly different:</p>


<form action="." method="post" name="hashForm"
      accept-charset="utf-8" onSubmit="return addHash()">
  <p>
    <label for="userInput">
      Text : <input type="text" name="userInput" value="mozilla.org">
    </label>

    Image size:
    <input type="text" name="width" value="64" style="width:4ex">px X
    <input type="text" name="height" value="64" style="width:4ex">px
</p><p>
    <input type="submit" value="Hash It!">
  </p>
  <dl id="canvas_list">
  </dl>

</form>

</div>

CSS

.demo p, dl {
margin:1em;
}    
.demo canvas, .demo img {
        -moz-box-shadow: 3px 3px 3px rgba(68,68,68,0.6);
        -webkit-box-shadow: 3px 3px 3px rgba(68,68,68,0.6);
        box-shadow: 3px 3px 3px rgba(68,68,68,0.6);

        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        margin:1em;
        vertical-align:middle;
    }

JavaScript

$(function() {

    
   var addHash = function(val) {

        var value = val || document.hashForm.userInput.value;
        var width = parseInt(document.hashForm.width.value, 10);
        var height = parseInt(document.hashForm.height.value, 10);

        if (vizhash.supportCanvas()) {
            try {
                var vhash = vizhash.canvasHash(value, width, height);
                var dt = document.createElement('dt');
                dt.appendChild(document.createTextNode(value + ":"));
                var dd = document.createElement('dd');
                var list = document.getElementById('canvas_list');
                dd.appendChild(vhash.toImage());

                list.insertBefore(dd, list.childNodes[0]);
                list.insertBefore(dt, list.childNodes[0]);

            } catch (err) {
                alert(err);
            }


        } else {
            alert("Your browser doesn't support canvas: you can't test this demo");
        }

        return false;
    };

    
    $('.demo form').submit(function(){addHash(); return false;});
        
    addHash('mozilla.org');
    addHash('mozilla.com');
    addHash('mozilla.org');

});