Friday 26 January 2018

Create a Drawing Board using Html5 Canvas , Angular and draw using mouse

In this post we are going to see  how to create a drawing board using Html5 Canvas and angular.This sample will make users to draw a free flow diagram while just drag the mouse over canvas.

Html
*****
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
    <script src="angular.js"></script>
    <script src="app.js"></script>
</head>
<body>

    <div style="margin-left: 400px;">
        <h1>Drawing board, click and drag to draw</h1>
        <canvas width="500" height="500" id="drawingarea" free-flow-drawing></canvas>
    </div>
</body>
</html>

style.css
*********
#drawingarea{
    border-bottom: 1px solid rgba(0,0,0,0.3);    background-color: #FFF;    box-shadow: 0 9px 20px -5px rgba(0,0,0,0.8);}

JS
***
Below directive will draw the canvas container when ever user click and draw above container

var app = angular.module("app",[]);
app.directive('freeFlowDrawing',[function () {
return {
    restrict:'A',    link:function(scope,element,attr){
        var Drawingctx = element[0].getContext('2d');        var oldX;        var oldY;        var drawing = false;                function Draw(ox, oy, nx, ny) {
            Drawingctx.moveTo(ox,oy);            Drawingctx.lineTo(nx,ny);            Drawingctx.lineWidth = 8;            Drawingctx.strokeStyle = "blue";            Drawingctx.stroke();        }
        
        element.bind('mousedown',function (event) {
            oldX = event.offsetX;            oldY = event.offsetY;            Drawingctx.beginPath();            drawing = true;        });
        element.bind('mousemove',function (event) {
            if(drawing) {
                var newX = event.offsetX;                var newY = event.offsetY;                Draw(oldX,oldY,newX,newY);                oldX = newX;                oldY = newY;            }
        });
        element.bind('mouseup',function (event) {
            drawing = false;        });
    }
}
}]);

Output:
******






From this post you can learn how to create a drawing board using canvas and draw using mouse.

Sunday 21 January 2018

How to find that service is registered in angular js

In this post we are going to see how to find whether service is register in angular js. for that first we create the service and then inject that as a interceptor.

Define the RequestTracker which will have a common structure to inject a call, four common methods that we can inject for a $http service is response, request, requestError, responseError

var mainApp = angular.module('mainApp', []);

mainApp.factory('RequestTracker'function () {

    var _interceptors = {

        request: function (config) { },
        response: function (response) { },
        requestError: function (requestReject) { },
        responseError: function (response) { }

    };

    return _interceptors;

});


Add the interceptors to the $httpProvider, Here we are adding the RequestTracker to the interceptor.

mainApp.config(['$httpProvider'function ($httpProvider) {

var $injector = angular.injector();
    if(!$injector.has('RequestTracker'))
    $httpProvider.interceptors.push('RequestTracker');

}]);



From this post we can learn how to find the service is registered in Angular JS

Timer trigger in azure webjob

In this post we are going to see how to create the timer trigger in azure and what is the purpose of it.

TimerTrigger is the attribute which does the trigger for execute a function at certain intervals in webjob.

Code:
class Program
  {
    static void Main(string[] args)
    {
      JobHostConfiguration config = new JobHostConfiguration();
      config.NameResolver = new TriggerResolver();
      config.UseTimers();

      JobHost host = new JobHost(config);
      host.RunAndBlock();
    }

    private class TriggerResolver: INameResolver
    {
      public string Resolve(string name)
      {
        string value = ConfigurationManager.AppSettings[name];              
      }
    }
  }
  
  public class Startup
  {
    public static void ScheduleTrigger([TimerTrigger("%Schedule%")] TimerInfo timer)
    {
      
    }
  }
}



From the above code you can see the schedule information is loaded from configuration file using INameResolver interface

Configuration value:
<add key=”Schedule” value=”24:00:00″/>


in another way we can schedule the timer using the typeof a class or cron expression

public static void LoggingFunction([TimerTrigger("0 0 6 * * *", RunOnStartup = false)] 
TimerInfo timerInfo, TextWriter log) 
{

  //Do stuff every day at 6AM

}


in the above cron expression

*    *    *    *    *    *  command to be executed
{second} {minute} {hour} {day} {month} {day-of-week}


From this post you can learn Timer Trigger in Azure webjobs