Simple Pendulum Simulator

This is a very basic simple pendulum simulator. Change the value and observe the effect on the pendulum!

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="myController">
     <H1>Simple Pendulum</H1>
    <div ng-if="currrentView === 'about'">
        <H3>About</H3>
    <p>A simple pendulum consists of a mass m hanging from a string of length L and fixed at a pivot point P. When displaced to an initial angle and released, the pendulum will swing back and forth with periodic motion.</p>
      <img src="http://www.acs.psu.edu/drussell/Demos/Pendulum/Pendulum.gif">
    </div>
    <div ng-if="currrentView === 'playground'" ng-controller='playgroundController'>
    <H3>Simulator</H3>
    <p>This is a very basic simple pendulum simulator. This simulator assumes ideal conditions, that is no firction or air resistance and also that the string connecting the mass to pivot has zero elasticity.</p><p>  Change the values and observe the effect on the pendulum!</p>
    <div
        pendulum 
        width='600' 
        height='300'
        meter-to-pixel='50'
        pendulum-radius='3'
        theta-max=thetaMax
        length=length
        gravity=gravity
        callback="callback(data)"
        
        ></div>
    <p>Time Period (T): {{data.period}} Current Angle: {{data.theta}} Time: {{data.time}}</p>
    <div class="slider" slider
        track-width='250' 
        track-height='20' 
        head-height='20' 
        head-width='20'
        min-value = '1'
        max-value = '90'
        precesion = '0'        
        suffix = '&deg;'
        preffix = 'Max Angle: '
        track-class = 'slider-track'
        head-class = 'slider-head'
        label-class = 'slider-label'
        value = thetaMax      ...

CSS

body{
    padding-left:30px;
    padding-right:30px;
}

.slider-track{
    border-radius:10px;   
}

.slider-head{
    border-radius:10px;
}

.slider-label{
    font-weight:900;
    padding-left:10px;
}

.nav-disabled{
    opacity:.6;
    cursor:default!important;
}

.next-nav{
    padding-top:10px;
    float:right; 
    cursor:pointer;
}

.previous-nav{
    padding-top:10px;
    float:left; 
    cursor:pointer;
}
.small {
    width:50px;
    border-radius:5px;
    padding:5px;
}
.slider {
}
.slider-track {
    background-color:#666;
    cursor:pointer;
}
.slider-head {
    background-color:#000;
    cursor:pointer;
    position:relative;
}

JavaScript

//Global variables
var myApp = angular.module('myApp', ['ngSanitize']);
var sliderTemplate;
sliderTemplate = '<div>'
sliderTemplate += '<span class="{{labelClass}}" ng-if="showValue === true"><span ng-bind-html="preffix"></span>{{value}}<span ng-bind-html="suffix"></span></span><div '
sliderTemplate += 'ng-mousemove="trackMouseMove($event)" '
sliderTemplate += 'ng-mouseup="trackMouseUp($event)" '
sliderTemplate += 'class="slider-track {{trackClass}}"'
sliderTemplate += 'style="width:{{trackWidth}}px;';
sliderTemplate += 'height:{{trackHeight}}px;" > '
sliderTemplate += '<div '
sliderTemplate += 'ng-mousedown="headMouseDown($event)" '
sliderTemplate += 'ng-mouseup="headMouseUp($event)" '
sliderTemplate += 'class="slider-head {{headClass}}" '
sliderTemplate += 'style="width:{{headWidth}}px;'
sliderTemplate += 'height:{{headHeight}}px;'
sliderTemplate += 'left:{{headPosition}}px;">'
sliderTemplate += '</div>'
sliderTemplate += '</div>'
sliderTemplate += '</div>'
const ABOUT = 'about';
const PLAYGROUND = 'playground'
const TEST_BEGINS = 'testbegins'
const PAGES = [ABOUT, PLAYGROUND, TEST_BEGINS];
//End of Global Variables

//Controllers
myApp.controller('myController', function ($scope) {
    var currentPage = 0;
    var totalPages = PAGES.length;
    var lastPage = totalPages - 1;
    var firstPage = 0;
    
    var setPage = function(){
    	$scope.currrentView = PAGES[currentPage];
        if(currentPage >= lastPage){
        	$scope.onLastPage = true;
        }else{
        	$scope.onLastPage = false;
        }
        
        
        if(currentPage <= firstPage){
        	$scope.onFirstPage = true;
        }else{
        	$scope.onFirstPage = false;
        }
    }
    
    $scope.nextPage = function(){
    	if(currentPage + 1 <= lastPage){
        	currentPage++;
            setPage();
        }
    }
    
    $scope.previousPage = function(){
    	if(currentPage - 1 >= firstPage){
        	currentPage--;
            setPage();
        }
    }
    
    
   ...