svg radar

simple svg radar jquery and raphael

by dirkk0

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Radar</title>
     <link rel="stylesheet" href="style.css" type="text/css" media="screen">
    <script src="http://yandex.st/raphael/1.5.2/raphael.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
        <input id="startBtn" type="button" disabled="disabled" onclick="this.disabled=true; radar.show();  startRadar(); document.getElementById('stopBtn').disabled=false" value="Start"/>
        <input id="stopBtn" type="button" onclick="this.disabled=true; radar.hide(); stopRadar();document.getElementById('startBtn').disabled=false" value="Stop"/>

        <div id="holder"></div>
  </body>
</html>

CSS

body {
        background: #333;
        color: #fff;
    }
    #holder {
        height:300px;
        left: 50%;
        margin: -150px 150px 150px -150px;
        position: absolute;
        top: 50%;
        width: 300px;
        z-index:50;
    }

JavaScript

var radar = null;
var d = 0
var t;
var paper = null;
var pos = new Array(10);

function startRadar() {
    radar.rotate(d, 150, 150);
    d = d + 1;
    if (d > 360) d = 0;
    t = setTimeout("startRadar()", 30);
}

function stopRadar() {
    clearTimeout(t);
    radar.hide();
}

function openRadar() {
    var circle = paper.circle(150, 150, 10);
    circle.attr({
        "fill": "90-#1151f5:5-#4bc1ff:95",
        "stroke": "#fff"
    });
    circle.animate({
        r: 150
    }, 2000);
    radar = paper.path("M150,150 v-150 a150,150 0 0,0 -150,150 z");
    radar.hide();
    radar.attr({
        "fill": "225-#ff0:20-#ff0:50",
        "fill-opacity": "0.01",
        "stroke": ""
    });
}


$(document).ready(function() {
    paper = Raphael("holder", 300, 300);
    openRadar();
    setTimeout(function() {
        radar.show();
        startRadar();

    }, 3000);
});