merged circular control

index.html

@@ -12,6 +12,8 @@
     <link rel="stylesheet" href="vendor/contextMenu/jquery.contextMenu.min.css" />
     <link rel="stylesheet" href="vendor/font-awesome-4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="assets/main.css" />
+    <link rel="stylesheet" href="knob/css/custom-size.css" />
+    <link rel="stylesheet" href="knob/css/roundslider.css" />
 
     <script src="//code.jquery.com/jquery-1.12.4.js"></script>
     <script src="vendor/bootstrap/bootstrap.min.js"></script>
@@ -26,11 +28,13 @@
     <script src="vendor/angular.min.js" type="text/javascript"></script>
     <script src="vendor/angular-ui-router.min.js" type="text/javascript"></script>
     <script src="vendor/ng-file-upload.min.js" type="text/javascript"></script>
+    <script src="knob/js/roundslider.js"></script>
 
     <script src="common/bundle.utils.js" type="text/javascript"></script>
     <script src="common/utils.js" type="text/javascript"></script>
     <script src="synthesizerV2/audioLibrary.js" type="text/javascript"></script>
     <script src="app.js" type="text/javascript"></script>
+    <script src="knob/js/circular-range.js"></script>
     <script src="sound-clips/sounds.js" type="text/javascript"></script>
     <script src="editor/sound-renderer.js" type="text/javascript"></script>
     <script src="sampler/player.js" type="text/javascript"></script>

knob/css/custom-size.css

@@ -0,0 +1,33 @@
+.rs-container { 
+    height: 60px !important; 
+    width: 60px !important;
+}
+
+.rs-handle { border-top: 5px solid transparent;
+    border-right: 8px solid black;
+    border-bottom: 5px solid transparent; }
+
+.container {
+    margin: 0px !important;
+    padding: 0px !important;
+    background-image: url('../images/knob_Base.png');
+    background-size: 60px 60px;
+    background-repeat: no-repeat;
+    height: 60px !important;
+    width: 60px !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+.knob-center .col-2{
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+.knob-center .knob-label{
+    padding-top: 10px;
+}
+    /* radius, width in js for control width, radius*/
+    /* container for image size */
+    /* rs handle for pointer size */

knob/css/roundslider.css

@@ -0,0 +1,198 @@
+/*!
+ * roundSlider v1.3.2 | (c) 2015-2018, Soundar
+ * MIT license | http://roundsliderui.com/licence.html
+ */
+
+.rs-ie, .rs-edge {
+    -ms-touch-action: none;
+    touch-action: none;
+}
+.rs-control { position: relative; outline: 0 none; }
+.rs-container { position: relative;}
+.rs-control *, .rs-control *:before, .rs-control *:after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.rs-animation .rs-transition
+{
+    -webkit-transition: all 0.5s linear 0s;
+    -moz-transition: all 0.5s linear 0s;
+    -o-transition: all 0.5s linear 0s;
+    transition: all 0.5s linear 0s;
+}
+.rs-bar
+{
+    -webkit-transform-origin: 100% 50%;
+    -moz-transform-origin: 100% 50%;
+    -ms-transform-origin: 100% 50%;
+    -o-transform-origin: 100% 50%;
+    transform-origin: 100% 50%;
+}
+.rs-control .rs-split .rs-path,
+.rs-control .rs-overlay1,
+.rs-control .rs-overlay2
+{
+    -webkit-transform-origin: 50% 100%;
+    -moz-transform-origin: 50% 100%;
+    -ms-transform-origin: 50% 100%;
+    -o-transform-origin: 50% 100%;
+    transform-origin: 50% 100%;
+}
+.rs-control .rs-overlay
+{
+    -webkit-transform-origin: 100% 100%;
+    -moz-transform-origin: 100% 100%;
+    -ms-transform-origin: 100% 100%;
+    -o-transform-origin: 100% 100%;
+    transform-origin: 100% 100%;
+}
+.rs-rounded .rs-seperator, .rs-split .rs-path {
+    -webkit-background-clip: padding-box; 
+    -moz-background-clip: padding; 
+    background-clip: padding-box;
+}
+.rs-control.rs-error
+{
+    border: 1px dotted;
+    text-align: center;
+}
+.rs-readonly {
+    height: 100%;
+    width: 100%;
+    top: 0;
+    position: absolute;
+    z-index: 100;
+}
+.rs-disabled {
+    opacity: 0.35;
+}
+.rs-inner-container
+{
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+.quarter div.rs-block { height: 200%; width: 200%; }
+.half.top div.rs-block, .half.bottom div.rs-block { height: 200%; width: 100%; }
+.half.left div.rs-block, .half.right div.rs-block { height: 100%; width: 200%; }
+.bottom > .rs-inner-container > .rs-block { top: auto; bottom: 0; }
+.right .rs-inner-container > .rs-block { right: 0; }
+div.rs-block { -webkit-border-radius: 1000px; border-radius: 1000px; }
+.rs-block
+{
+    height: 100%;
+    width: 100%;
+    display: block;
+    position: absolute;
+    top: 0;
+    overflow: hidden;
+    z-index: 3;
+}
+.rs-block .rs-inner
+{
+    -webkit-border-radius: 1000px;
+    border-radius: 1000px;
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: relative;
+}
+.rs-overlay { width: 50%; }
+.rs-overlay1, .rs-overlay2 { width: 100%; }
+.rs-overlay, .rs-overlay1, .rs-overlay2
+{
+    position: absolute;
+    background-color: white;
+    z-index: 3;
+    top: 0;
+    height: 50%;
+}
+.rs-bar
+{
+    display: block;
+    position: absolute;
+    height: 0;
+    z-index: 10;
+}
+.rs-bar.rs-rounded {
+    z-index: 5;
+}
+.rs-bar .rs-seperator {
+    height: 0px;
+    display: block;
+    float: left;
+}
+.rs-bar:not(.rs-rounded) .rs-seperator {
+    border-left: none;
+    border-right: none;
+}
+.rs-bar.rs-start  .rs-seperator { border-top: none; }
+.rs-bar.rs-end  .rs-seperator { border-bottom: none; }
+.rs-bar.rs-start.rs-rounded .rs-seperator { border-radius: 0 0 1000px 1000px; }
+.rs-bar.rs-end.rs-rounded .rs-seperator { border-radius: 1000px 1000px 0 0; }
+.full .rs-bar, .half .rs-bar { width: 50%; }
+.half.left .rs-bar, .half.right .rs-bar, .quarter .rs-bar { width: 100%; }
+.full .rs-bar, .half.left .rs-bar, .half.right .rs-bar { top: 50%; }
+.bottom .rs-bar { top: 0; }
+.half.right .rs-bar, .quarter.right .rs-bar { right: 100%; }
+
+.rs-handle.rs-move { cursor: grab; }
+
+.rs-readonly .rs-handle.rs-move { cursor: default; }
+.rs-path { display: block; height: 100%; width: 100%; }
+.rs-split .rs-path
+{
+    -webkit-border-radius: 1000px 1000px 0 0;
+    border-radius: 1000px 1000px 0 0;
+    overflow: hidden;
+    height: 50%;
+    position: absolute;
+    top: 0;
+    z-index: 2;
+}
+
+/*** tooltip styles ***/
+.rs-tooltip
+{
+    position: absolute;
+    cursor: default;
+    border: 1px solid transparent;
+    z-index: 10;
+}
+.full .rs-tooltip { top: 50%; left: 50%; }
+.bottom .rs-tooltip { top: 0; } 
+.top .rs-tooltip { bottom: 0; }
+.right .rs-tooltip { left: 0; }
+.left .rs-tooltip { right: 0; }
+.half.top .rs-tooltip, .half.bottom .rs-tooltip { left: 50%; }
+.half.left .rs-tooltip, .half.right .rs-tooltip { top: 50%; }
+.rs-tooltip .rs-input { outline: 0 none; border: none; background: transparent; }
+.rs-tooltip-text { font-family: verdana; font-size: 13px; border-radius: 7px; text-align: center; }
+.rs-tooltip.edit, .rs-tooltip .rs-input { padding: 5px 8px; display: none;}
+.rs-tooltip.hover, .rs-tooltip.edit:hover { border: 1px solid #AAAAAA; cursor: pointer; }
+.rs-readonly .rs-tooltip.edit:hover { border-color: transparent; cursor: default; }
+
+/*** handle types ***/
+.rs-handle {  outline: 0 none; float: left; }
+.rs-handle.rs-handle-square { border-radius: 0px; }
+.rs-handle-dot { border: 1px solid #AAAAAA; padding: 6px; }
+.rs-handle-dot:after {
+    display: block;
+    content: "";
+    border: 1px solid #AAAAAA;
+    height: 100%;
+    width: 100%;
+    border-radius: 1000px;
+}
+
+/*** theming - colors ***/
+.rs-seperator { border: 1px solid #AAAAAA; }
+.rs-border { border: 1px solid transparent }
+.rs-path-color { background-color: transparent; }
+.rs-range-color { background-color: transparent; }
+.rs-bg-color { background-color: transparent; }
+
+.rs-handle-dot { background-color: #FFFFFF; }
+.rs-handle-dot:after { background-color: #838383; }

knob/js/circular-range.js

@@ -0,0 +1,36 @@
+angular.module('mainApp').directive('circularRange', [function () {
+      return {
+          restrict: 'A',
+          terminal: true, 
+          priority: 1001, 
+          scope: {
+              'model': '=',
+              'max' : '@',
+              'step' : '@',
+              'value' : '@',
+              'min' : '@'
+          },
+          link: function (scope, elem, attrs) {
+              scope.model = scope.value;
+              var $slider = $(elem);
+              $($slider).roundSlider({
+                  value: scope.model,
+                  max: scope.max,
+                  step: scope.step,
+                  min: scope.min,
+                  sliderType: "min-range",
+                  change: function (ui) {
+                      scope.$apply(function () {
+                          scope.model = ui.value;
+                      });
+                  },
+                  drag: function (ui) {
+                      scope.$apply(function () {
+                          scope.model = ui.value;
+                      });
+                  }
+              });
+
+          }
+      }
+  }]);