micurs
micurs
Reputation Top 1%
Michele Ursino
28 Snippets  (18th place)
Published
3 Channels
Created
18 Channels
Following
81556 points  (3rd place)
Reputation
Top 5% Publisher
Junior Code Generator
Serious Code Generator
Senior Code Generator
Junior Publisher
Serious Publisher
Senior Publisher
Junior Topic Creator
Serious Topic Creator
Senior Topic Creator
Junior Topic Hub
Serious Topic Hub
Senior Topic Hub
Master Topic Hub
Junior Trend Maker
Serious Trend Maker
Senior Trend Maker
Master Trend Maker
Guru Trend Maker
Junior Influencer
Junior Commenter
Serious Commenter
Senior Commenter
Junior Judge
Serious Judge
Senior Judge
Master Judge
Junior Popular Coder
Serious Popular Coder
Senior Popular Coder
Master Popular Coder
Junior Autobiographer
Serious Autobiographer
Senior Autobiographer
Master Autobiographer
Junior Famous Coder
Serious Famous Coder
Master Famous Coder
Junior Wise Coder
Serious Wise Coder

Recent Snippets See all snippets by micurs

public by micurs  33920  565  8  3

HTML5 Canvas: drawing an arrow at the end of the line

The Canvas 2D API does not have a way to draw an arrow as endpoint of a line. This simple code shows how you can draw one yourself. With this HTML: Running demo available here: http://jsfiddle.net/n7e2zhj3/2/
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

function grid() {
    for (var x = 0.5; x < canvas.width; x += 10) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
    }
    for (var y = 0.5; y < canvas.height; y += 10) {
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
    }
    ctx.strokeStyle = "#eee";
    ctx.stroke();
}

function arrow(p1, p2) {

    ctx.save();
    var dist = Math.sqrt((p2[0] - p1[0]) * (p2[0] - p1[0]) + (p2[1] - p1[1]) * (p2[1] - p1[1]));

    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#0000ff';
    ctx.moveTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.stroke();

    var angle = Math.acos((p2[1] - p1[1]) / dist);

    if (p2[0] < p1[0]) angle = 2 * Math.PI - angle;

    var size = 15;

    ctx.beginPath();
    ctx.translate(p2[0], p2[1]);
    ctx.rotate(-angle);
    ctx.fillStyle = '#0000ff';
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#ff0000';
    ctx.moveTo(0, -size);
    ctx.lineTo(-size, -size);
    ctx.lineTo(0, 0);
    ctx.lineTo(size, -size);
    ctx.lineTo(0, -size);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
}

$('#myCanvas').bind('mousemove', function (e) {
    var offset = $(this).offset();
    var p1 = [200.0, 200.0];
    var p2 = [e.pageX - offset.left, e.pageY - offset.top];

    ctx.clearRect(0, 0, 400, 400);
    grid();
    arrow(p1, p2);
})                                  
;

public by micurs  6176  16  8  6

Using promise() with JQuery animate

With jQuery 1.5 the $.ajax implements the Promise interface. So you can use done() fail() and always() on the returned promise object returned from the ajax call. You can do the same when invoking the animate() function. The animate function returns the collection of elements the animate() is acting on, so you can create the promise explicitly
// Shows an alert at the end of an animation.
$('#myElement').animate( {  height: 200 + 'px'}, 500)
  .promise()
  .done( function () {
    alert('Animation complete!');
  });

;

public by micurs  267837  11  7  2

Check if Event was Triggered or Native

You can easily add extra argument when triggering an event function programmatically in jquery. This way you can recognize if the event was triggered by a real mouse click rather than a direct call to the .click() function. As seen on http://css-tricks.com/snippets/jquery/check-if-event-was-triggered-or-native/
$('button').click(function(event, wasTriggered) {
    if (wasTriggered) {
        alert('triggered in code');
    } else {
        alert('triggered by mouse');
    }
});

$('button').trigger('click', true);
;

public by micurs  4285  1  7  3

Defininig arrays using templates in Typescript

You can now define an array using the template feature in Typescript. Be aware this way to build array is just a compile time 'type annotation' used to check type validity when using the array.
class MyItemClass {
  ...
}

// Define an array for MyItemClass
var itemArray : Array<MyItemClass>;
...

var item : MyItem = itemArray[3];
;

public by micurs  12323  4  10  4

Typescript + underscore: serializing objects

This little example runs on node.js and assumes you have the typescript type-definition file in the types subdirectory. The example defines two classes one representing a undergrad course in computer science and another one representing possible students for the course. Few things are interesting here: 1 - the overloading of the toString()
///<reference path='../types/node.d.ts'/>
///<reference path='../types/underscore.d.ts'/>

import _ = require("underscore");

function write(msg) {
    process.stdout.write(msg+'\n');
}

class Student {
  firstName : string;
  lastName : string;

  constructor( n: string, v: string ) {
    this.firstName = n;
    this.lastName = v;
  }

  toString() : string {
    return '[ ' + this.firstName + ' ' + this.lastName + ' ]';
  }
}

class Class {
  title : string = "Computer Science 101";
  participants : Student[] = new Array();

  addStudent( s : Student ) : any {
    this.participants.push(s);
  }

  toString() : string {
    return this.title + '\n\t' 
          + _.reduce( this.participants, (acc,s) => acc += '\n\t'+ s );
  }

}

var firstSemesterClass : Class = new Class();

firstSemesterClass.addStudent( new Student("John","Smith"));
firstSemesterClass.addStudent( new Student("Frank","Gehry"));

write( firstSemesterClass );

    
;