jquery plugin to write charecters in digital format in a 5x5 matrix
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
sample speed control added Dec 1, 2015
README.md url correction Aug 4, 2016
jquery-digitalwrite.jquery.json
jquery.digitalwrite.js
jquery.digitalwrite.min.js speed control added Dec 1, 2015
license.md
package.json code algo modified, transformTo method implemented Nov 18, 2015

README.md

digitalwrite jQuery plugin

todofy badge

jQuery plugin to write charecters in digital format in a 5x5 matrix. Output looks something like this:

screenshot

Using this plugin, you can create such charecters with animations, color options & size options! In future it may enable you to transform one charecter to another - that should be kinda cool!

Live Demo & more information - minhazav.xyz

Its live on: http://minhazav.xyz/samples/jquery-digitalwrite-example/

How to use: (Read More)

  • Create a div
<div id="M_Placeholder"></div>
  • Include jQuery and this library and in js
   $("#M_Placeholder").digitalwrite({char: 'M'});

This will create a 5X5 digital M with width = 100px & height = 500px, in black color. These properties can be customised as follows:

char - (required) Charecter to print, (A-Z, '.', '!') supported
height - height of the charecter in px
width - width of the charecter in px
background - background color of the blocks, ex red, rgba(255, 0, 0, 1)
border - border property of the blocks, ex 1px solid red, 2px dotted black
animation - how the blocks animate to form the charecter at the end. Categories are: none, motion, spiral, contract & fade of these spiral & fade are experimental and buggy!
success - (function) callback called when charecter has been printed on screen
timeout - control speed of animation, value in ms, 500, default

So if we use everything it would look something like

$("#M_Placeholder").digitalwrite({
    char: 'M',
    height: 120,
    width: 120,
    background: 'rgba(0, 0, 0, .1)',
    border: '1px dased black',
    animate: 'contract',
    success: function() {
        console.info('Charecter M ready');
    }
});

You can also convert a text to other text!

$("#M_Placeholder").transformTo('K', function() {
  console.info('successfully transformed to K');  
});

Image M will transform to Image K with animation!

For more information view documentation

Animations

Different possible animations are: none, motion, spiral, contract & fade screenshot