Minhaz's Experiments
Hack your way out!
Blog About Me Research Github LinkedIn

jQuery DigitalWrite plugin

This is a jQuery plugin that allows you to create UPPERCASE english alphabets in a 5X5 matrix. Its very easy to use!

  1. Include jQuery js library 
    <script src="<path to jQuery.version.js>"></script>

  2. Include this library <script src="./js/jquery.digitalwrite.js"><script>
    OR use the minified version <script src="./js/jquery.digitalwrite.min.js"><script>

  3. And tadaa! - for any html dom element call the digitalwrite method!
    $("#target").digitalwrite({char: 'W'});

  4. And then transform to some other charecter using transformTo method!
    $("#target").transformTo({'M'});




Fork this on



Properties

Properties are passed as parameter, for example:

$("#target").digitalwrite({char: 'W'});
Here {char: 'W'} is the charecter property! Other customisable properties include

Property Description
char (REQUIRED) Charecter to print:
$("#target").digitalwrite({char: 'W'});
width Width of the charecter block in px
$("#target").digitalwrite({char: 'W', width: 100});
height Height of the charecter block in px
$("#target").digitalwrite({char: 'W', height: 100});
background background of the charecter block 
$("#target").digitalwrite({char: 'W', background: 'red'});
$("#target").digitalwrite({char: 'W', background: 'rgb(255, 255, 0)'});
$("#target").digitalwrite({char: 'W', background: 'rgba(0, 0, 0, 0.1)'});
$("#target").digitalwrite({char: 'W', background: '#abc123'});
border Border of the charecter block in px
$("#target").digitalwrite({char: 'W', border: '1px dashed red'});
animation animation you expect for final transition! The categories are: motion, spiral, contract & fade
Note that fade is experimental and buggy! 
$("#target").digitalwrite({char: 'W', border: '1px dashed red'});
success (callback function) called when the alphabet has been created on screen. 

$("#target").digitalwrite({
	char: 'W',
	border: '1px dashed red',
	success: function() {
		console.log('successfully wrote alphabet W');
	}
});
timeout time in ms, for animations 1000, default 

$("#target").digitalwrite({char: 'W', border: '1px dashed red', timeout: 500});

transformTo() method

Once you have created some digital alphabet, you can transform it to some other alphabet using the transformTo() method.
For example call $('#transform_MK').transformTo('N');

You can make a whole storyline using the success callback

$('#transform_MK').digitalwrite({
	char: 'M',
	background: 'rgba(0,0,0,.1)',
	animation: 'default',
	success: function() {
		setTimeout(function() {
			$('#transform_MK').transformTo('N');
		}, 1000);
	}
});

transformTo() method format

$(identifier).transformTo(char, callback);
char - (charecter) the charecter to transform to. callback - (function, optional) callback called on completion of transformation.

Customisations

Size




Code used for them respectively are:

$("#m20").digitalwrite({char: 'M', height: 20, width: 20, animation: 'none'});
$("#m40").digitalwrite({char: 'M', height: 40, width: 40, animation: 'none'});
$("#m60").digitalwrite({char: 'M', height: 60, width: 60, animation: 'none'});
$("#m80").digitalwrite({char: 'M', height: 80, width: 80, animation: 'none'});
$("#m100").digitalwrite({char: 'M', height: 100, width: 100, animation: 'none'});
$("#m120").digitalwrite({char: 'M', height: 120, width: 120, animation: 'none'});

Colors




Code used for them respectively are:

$("#c1").digitalwrite({char: 'M', background: 'rgba(0, 0, 0, .1)'})
$("#c2").digitalwrite({char: 'I', background: 'rgba(255, 0, 0, .1)', border: '1px dotted red'});
$("#c3").digitalwrite({char: 'N', background: 'yellow', border: '1px solid red'});
$("#c4").digitalwrite({char: 'H', background: 'yellowGreen', border: '1px solid green'});
$("#c5").digitalwrite({char: 'A'});
$("#c6").digitalwrite({char: 'Z', background: 'red', border: '1px solid red'});


Animations

motion


spiral (experimental)


contract


fade (experimental)





Code used for them respectively are:

$("#m1").digitalwrite({char: 'M', background: 'rgba(0, 0, 0, .1)'});
$("#m3").digitalwrite({char: 'M', background: 'rgba(0, 0, 0, .1)', animation: 'contract'});
$("#m4").digitalwrite({char: 'M', background: 'rgba(0, 0, 0, .1)', animation: 'fade'});



Star Fork Issue Download

Comments