jQuery Kontrol Test

by firegroove

HTML

<script src="&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://anthonyterrien.com/demo/kontrol/jquery.kontrol.js"></script>
<script src="https://www.cyberselfie.fr/wp2/wp-content/uploads/2018/03/jquery.kontrol.js"></script>
<head>
  <title>jQuery Kontrol</title>
  <script>
    $(function() {
      var $all = $(".dial, .bars1, .bars2, .pad"),
        $body = $("body");

      $(".bars1").bars({
        fgColor: "#222222",
        bgColor: "#EEEEEE"
        /*, change : function (value) {
         console.log("change : ", value);
         }*/
        /*, draw : function () {
         console.log(this.o);
         }*/
      });

      /*$(".bars2").bars({
       fgColor:"#222222"
       , bgColor:"#EEEEEE"
       });*/

      var $pad = $(".pad")
        .xy({
          displayPrevious: false,
          min: -100,
          max: 100,
          fgColor: "#222222",
          bgColor: "#EEEEEE"
          /*, change : function (value) {
           console.log("change : ", value);
           }*/
        })
        .css({
          'border': '5px solid #BBB'
        });

      $(".dial")
        .dial({
          fgColor: "#222222",
          bgColor: "#EEEEEE",
          thickness: .3
          /*, change : function (value) {
           console.log("change : ", value);
           }*/
        })
        .css({
          display: 'inline',
          padding: '0px 10px'
        });

      var skins = {
        skin0: {
          kontrol: {
            fgColor: "#87CEEB",
            bgColor: "#EEEEEE"
          },
          rack: {
            "background-color": "#FFFFFF",
            "color": "#87CEEB"
          }
        },
        skin1: {
          kontrol: {
            fgColor: "#222222",
            bgColor: "#EEEEEE"
          },
          rack: {
            "background-color": "#FFFFFF",
            "color": "#222222"
          }
        },
        skin2: {
          kontrol: {
            fgColor: "#FFFFFF",
   ...

CSS

body {
          padding: 0;
          margin: 0;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: 300;
          text-rendering: optimizelegibility;
        }

        p {
          font-size: 30px;
          line-height: 30px
        }

        div.demo {
          text-align: center;
          width: 300px;
          float: left
        }

        div.demo>p {
          font-size: 20px
        }

        .rack {
          font: bold 14px;
        }

        .opt {
          background: #FFF;
          -webkit-box-shadow: inset 0 4px 4px -2px #888, inset 0 -4px 4px -2px #888;
          -moz-box-shadow: inset 0 4px 4px -2px #888, inset 0 -4px 4px -2px #888;
          box-shadow: inset 0 4px 4px -2px #888, inset 0 -4px 4px -2px #888;
        }

        .opt div {
          padding: 0px 10px;
          color: #AAA;
          font: 10px Arial;
        }

        select {
          width: 100px;
          padding: 5px;
          font-size: 16px;
          border: 1px solid #ccc;
          height: 34px;
        }

JavaScript

$(function() {
  var $all = $(".dial, .bars1, .bars2, .pad"),
    $body = $("body");

  $(".bars1").bars({
    fgColor: "#222222",
    bgColor: "#EEEEEE"
    /*, change : function (value) {
     console.log("change : ", value);
     }*/
    /*, draw : function () {
     console.log(this.o);
     }*/
  });

  /*$(".bars2").bars({
   fgColor:"#222222"
   , bgColor:"#EEEEEE"
   });*/

  var $pad = $(".pad")
    .xy({
      displayPrevious: false,
      min: -100,
      max: 100,
      fgColor: "#222222",
      bgColor: "#EEEEEE"
      /*, change : function (value) {
       console.log("change : ", value);
       }*/
    })
    .css({
      'border': '5px solid #BBB'
    });

  $(".dial")
    .dial({
      fgColor: "#222222",
      bgColor: "#EEEEEE",
      thickness: .3
      /*, change : function (value) {
       console.log("change : ", value);
       }*/
    })
    .css({
      display: 'inline',
      padding: '0px 10px'
    });

  var skins = {
    skin0: {
      kontrol: {
        fgColor: "#87CEEB",
        bgColor: "#EEEEEE"
      },
      rack: {
        "background-color": "#FFFFFF",
        "color": "#87CEEB"
      }
    },
    skin1: {
      kontrol: {
        fgColor: "#222222",
        bgColor: "#EEEEEE"
      },
      rack: {
        "background-color": "#FFFFFF",
        "color": "#222222"
      }
    },
    skin2: {
      kontrol: {
        fgColor: "#FFFFFF",
        bgColor: "#444444"
      },
      rack: {
        "background-color": "#222222",
        "color": "#FFFFFF"
      }
    },
    skin3: {
      kontrol: {
        fgColor: "#00FF00",
        bgColor: "#DDDDDD"
      },
      rack: {
        "background-color": "#FFFFFF",
        "color": "#00FF00"
      }
    },
    skin4: {
      kontrol: {
        fgColor: "#FF0000",
        bgColor: "#DDDDDD"
      },
      rack: {
        "background-color": "#EEEEEE",
        "color": "#FF0000"
      }
    }
  };

  var changeSkin = function(skin) {
    $body.css(skin.rack);
    $all.trigger(
     ...