Advertisement
Guest User

Untitled

a guest
Aug 11th, 2014
377
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.90 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>aPreAmp</title>
  7. <link href="http://www.cs.helsinki.fi/u/ljlukkar/apreamp/css/main.css" rel="stylesheet">
  8. </head>
  9.  
  10. <body>
  11.  
  12. <div class="buttons">
  13. <input type="radio" id="input0" name="inputSelect" value="0">
  14. <label for="input0" class="button">input 1</label>
  15. <input type="radio" id="input1" name="inputSelect" value="1">
  16. <label for="input1" class="button">input 2</label>
  17. <input type="radio" id="input2" name="inputSelect" value="2">
  18. <label for="input2" class="button">input 3</label>
  19. </div>
  20.  
  21. <div id="volumeSlider" class="center-block"></div>
  22.  
  23. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  24. <script src="http://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
  25.  
  26. <script>
  27.  
  28. var state = {
  29. v: 0,
  30. i: 0
  31. };
  32.  
  33. var busy = false;
  34.  
  35. var inputSelect = $('input[name="inputSelect"]:radio');
  36. var volumeSlider = $("#volumeSlider");
  37.  
  38. volumeSlider.noUiSlider({
  39. start: 0,
  40. orientation: 'vertical',
  41. direction: "rtl",
  42. range: {
  43. 'min': 0,
  44. 'max': 192
  45. }
  46. });
  47.  
  48. volumeSlider.on({
  49. slide: function () {
  50. busy = true;
  51. },
  52. set: function (event, value) {
  53. state.v = parseInt(value);
  54. busy = false;
  55. saveState(state);
  56. }
  57. });
  58.  
  59.  
  60. inputSelect.change(function () {
  61. state.i = Number(this.value);
  62. saveState(state);
  63. });
  64.  
  65.  
  66. function fetchState() {
  67.  
  68. if (busy) return;
  69.  
  70. busy = true;
  71.  
  72. $.getJSON("/state", function (serverState) {
  73. state.i = serverState.i;
  74. state.v = serverState.v;
  75. volumeSlider.val(state.v);
  76. $("input[name=inputSelect][value=" + state.i + "]").prop('checked', true);
  77. busy = false;
  78. });
  79. }
  80.  
  81. function saveState(newState) {
  82. $.ajax({
  83. type: "PUT",
  84. url: '/state',
  85. contentType: 'application/json',
  86. data: JSON.stringify(newState)
  87. });
  88. }
  89.  
  90. function resizeControls() {
  91.  
  92. var height = $(window).height();
  93. var width = $(window).width();
  94.  
  95. var reference = (height / width < 1.30) ? (height * 0.45) : (width * 0.60);
  96.  
  97. $("#volumeSlider").width(reference).height(1.49 * reference);
  98. $(".noUi-handle").width(0.41 * reference).height(0.41 * reference);
  99. $(".buttons").width(1.56 * reference);
  100. $(".button").width(0.51 * reference).height(0.23 * reference);
  101.  
  102. }
  103.  
  104. $(window).resize(function () {
  105.  
  106. resizeControls();
  107.  
  108. });
  109.  
  110. $(function () {
  111.  
  112. resizeControls();
  113. setInterval(fetchState, 500);
  114.  
  115. });
  116.  
  117. </script>
  118.  
  119. </body>
  120. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement