About me

traceit.js SandBox

traceit.js is a jQuery Plugin that lets you trace page elements ... Check it out
Or perhaps you're looking for a way to provide your user with a visual cue? Tracing part of an image can do this. To see it in action, select a cat mood from the list below :
  • Friendly and content
  • Non-threatening, unsure
  • Derisive
  • Friendly but unsure
  • Amicable, not fearful or aggressive
  • Defensive aggression
  • Angry
  • Potentially aggressive
  • Submissive
  • Very happy
  • Excited, angry or irritable
  • Alert, interested

Getting Started

Get the latest version of jquery.traceit.js. traceit on GitHub
Include the jquery.traceit.js script and it's dependencies jQuery (tested with jquery.js 1.10.2), Raphaël (tested with raphael.js 2.1.2) ) in your page.

			
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/raphael.js"></script>
<script src="../js/jquery.traceit.js"></script>

Or include jquery.traceit.min.js script and jquery.min.js. raphael_traceit.min.js is combined and minified raphael.js (v2.1.2) and jquery.traceit.js.

			
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/raphael_traceit.min.js"></script>

Choose an element you would like to trace. For instance:

<div id="example">Let's trace this element.</div>

If you would like to see your element be traced immediately initialize a trace instance with:

//Initialize a trace instance with:
$('#example').trace();

Or initialize a trace instance with 'isVisible' option set to false. Then later in your code you can call reTrace({isVisible: true}) method or trigger its equivalent 'adjust.trace' event to start the animation.

//Initialize a trace instance with isVisible set to false
$('#example').trace({isVisible: false});

//then later in your code you can call reTrace({ isVisible: true }) method
var inst = $('#example').data('trace');
inst.reTrace({ isVisible: true });

//or trigger its equivalent 'adjust.trace' event
$('#example').trigger('adjust.trace');

To trace this element click here.

#example

What can I configure? All options are optional. You can overwrite default options by initializing 'trace' instance with options object 'traceOpt'. See the list of trace options below.

//Initialize a trace instance with options object.
$('#example2').trace({
    traceOpt: {
        'stroke': 'blue',
        'stroke-width': 3,
        'stroke-opacity': 1,
        'fill': '#00ff00',
        'fill-opacity': 0.2,
        'gap-point': 'top_left',
        'title': "see, this is example2! Click to hide."
    },
    redrawSpeed: 6000,
    traceCanvasPadding: 8
});

click to trace.

#example2

You can similarly set new options when calling reTrace method or when triggering 'adjust.trace' event

//$('#example31').trace({isVisible: false});
var inst =  $('#example31').data('trace');
inst.reTrace({
    'stroke': 'red',
    'stroke-width': 2,
    'stroke-opacity': 1,
    'arrow-end': 'classic-wide-long',
    'isVisible': 'true'
});

//or trigger 'adjust.trace' event
//$('#example32').trace({ isVisible: false });
$('#example32').trigger({
    type: 'adjust.trace',
    adjustments: {
        'stroke': '#aa0000',
        'stroke-width': 4,
        'stroke-opacity': 1,
        'stroke-dasharray' : '--..',
		'gap-point': 'bottom_right'
    }
});

click to trace

#example3_1
#example3_2

Can I have callbacks? Sure.


//or trigger 'adjust.trace' event
$('#example4').trace({
    traceOpt: {
        'stroke-width': 4,
        'stroke-opacity': .5,
        'title': "click to trigger onClick function."
    },
    onClick: function (me) {
        alert('triggered when user clicks on a trace shape.');
        me.options.shape.animate({
            opacity: 0
        }, 1000, function () {
            me.hideTrace();
        });
    },
    onHide: function () {
        alert('triggered when hide animation completes.');
    },
    onEndTrace: function () {
        alert("triggered when trace animation completes.");
    }
});

click to trace

#example4

Resizing a window or pressing the escape key will redraw all the traces.


The list of trace options

/********************************************************************************************************************
arrow-end		string		arrowhead on the end of the path. The format for string is 
					type[-width[-length]]. 
					Possible types: classic, block, open, oval, diamond, none, 
					width: wide, narrow, midium, 
					length: long, short, midium.
cursor			string		CSS type of the cursor
fill			string 		colour, gradient or image
fill-opacity		number 
gap-point		string		["top","top_left","top_right","bottom","bottom_left","bottom_right"] 
			or number	0 - 100, where 0 and 100 both mean "top" (@12 o'clock position), 50 is "bottom" (@6pm), 
							25 is "top_right" (@3pm) etc.
opacity			number 
stroke			string 		stroke colour
stroke-dasharray		string 		[“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]
stroke-linecap		string 		[“butt”, “square”, “round”]
stroke-opacity		number 
stroke-width		number 		stroke width in pixels, default is '1'
title 			string 		will create tooltip with a given text
**********************************************************************************************************************/

Studies

Raphael js, Bootstrap, JavaScript Design Patterns, jQuery plugin boilerplates (traceit.js), HCI Need Finding, Prototyping and Proof of Concept.


Raphael js animation I

Flat Design is in, but 3D animation is still fun. This is my tribute to gradients, lights and shadows. Using objects to organize the code

test



Raphael js Font, Cufon

Playing with custom font. Raphael path element contains whole text as a separate path. Animation with backIn easing.

test



Raphael path, animating image along a path.

These animations could be used for traceit plugin.

Note: (mx > nx || my < ny) && (alpha += 180); in raphael.js flips the image at start of a path, commenting this line out fixes the problem.

test



HCI: Need Finding

Negative emotions are a part of life, but we should not let them take over our lives. Lets create an electronic “Assistant” to prompt us to become aware of our own emotions, deepen our self-awareness and Emotional Intelligence.

Go



HCI: Prototyping

MoodFlow is a mobile app that accompanies a wearable, wireless biosensor, that constantly measures your emotional state. MoodFlow app processes this stream of emotional data and gently brings your attention to your negative emotions, helping you to avoid unwanted reactions.

Go



Human-Computer Interaction

Quantified Self: user interface that will allow users to access, manipulate and analyze stress level data.

Go