Sound controls in circle

index.html

<div style="height:auto;width:auto; position:relative">
<ul class='circle-container'>

  <li><a href='#'><input class="knobSmall"/></a></li>
  <li><a href='#'><input class="knobSmall"/></a></li>
  <li><a href='#'><input class="knobSmall"/></a></li>
  <li><a href='#'><input class="knobSmall"/></a></li>
  <li><a href='#'><input class="knobSmall"/></a></li>
  <li><a href='#'><input class="knobSmall"/></a></li>
  <li><a href='#'><input class="knobSmall"/></a></li>
  <li><a href='#'><input class="knobSmall"/></a></li>
  <li><a href='#'><input class="knobSmall"/></a></li>
  <li><a href='#'><input class="knobSmall"/></a></li>
</ul>
<div style="position:absolute; height:250px;width:250px;margin:0 auto;top:50%;right:50%;margin-right:-125px;margin-top:-125px">
     <input type="text" class="knob" id="master" name="master" value="50" data-fgColor="#999999" data-width="250" data-height="250" data-thickness=".5" />
  </div>
  <div>

script.js

/**
 * Apply a class to each child
 * Required for IE8-
 */
$('.circle-container').children().each(function() {
  $(this).addClass('item'+($(this).index() + 1));
});
$('.knobSmall').prop("value",50)
          .data("fgColor","#999999")
          .data("width",100)
          .data("height",100)
          .data("thickness",0.7)


$('.knobSmall').knob();
$("#master").knob();

Sound-controls-in-circle.markdown

Sound controls in circle

knobjs sound controls in circular view in order to be used as mplayer's input in pi-web-agent ---------------------Inspired by A Sass version of Ana's work consisting on putting items on circle with CSS: http://stackoverflow.com/questions/12813573/position-icons-into-circle. Made a mixin to make everything easy to use. Just set the size of the circle and the number of items to place.

Forked from Hugo Giraudel's Pen Items on circle.

A Pen by Andreas Galazis on CodePen.

License.

style.scss

@import "bourbon";
/**
 * Mixin to put items on a circle
 * [1] - Allows children to be absolutely positioned
 * [2] - Allows the mixin to be used on a list
 * [3] - In case box-sizing: border-box has been enabled
 * [4] - Allows any type of direct children to be targeted
 */

@mixin putOnCircle( 
          $nb-items, //Number of items
          $circle-size, //Parent size
          $item-size, //Item size
          $class-for-IE: false //Base class name, false means use of pseudo-selectors
       ) {
  $half-item:     $item-size / 2;
  $half-parent: $circle-size / 2;
  
  position: relative;               /* [1] */
  width:  $circle-size;
  height: $circle-size;
  padding: 0;
  border-radius: 50%; 
  list-style: none;                 /* [2] */ 
  @include box-sizing(content-box); /* [3] */ 
  
  > * {                             /* [4] */
    display: block;
    position: absolute;
    top:  50%; 
    left: 50%;
    width:  $item-size;
    height: $item-size;
    margin: -$half-item;
  
    $angle: 360 / $nb-items;
    $rot: 0;
    @for $i from 1 to $nb-items+1 {
      
      // If no support for IE8-
      
      @if $class-for-IE == false {
        &:nth-of-type(#{$i}) {
          @include transform(rotate(#{$rot}deg) translate($half-parent) rotate(-#{$rot}deg));
        }
      }
      
      // If support for IE8-  
      
      @else {
        &.#{$class-for-IE}#{$i} {
          // If CSS transforms are not supported
          $mt: sin($rot * pi() / 180) * $half-parent - $half-item;
          $ml: cos($rot * pi() / 180) * $half-parent - $half-item;
          margin: $mt 0 0 $ml;
        }
      }
      $rot: $rot + $angle;
    }
  }
}

.circle-container {
  @include putOnCircle(10, 30em, 100px, false); 
  margin: 40px auto 0;
  border: solid 5px transparent;
  
  a {
    display: block;
    border-radius: 50%;
    box-shadow: 0 0 0 5px transparent;
  }
  

}