DISTRHO
/
DPF
mirror of https://github.com/DISTRHO/DPF
1
0
Fork 0
Code Releases 0 Activity
DISTRHO Plugin Framework
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2351 Commits
6 Branches
75MB
Tree: ba259618fb
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'ba259618fb'
${ noResults }
DPF/examples/WebMeters/index.html

151 lines
4.1KB
Raw Blame History 

  1. <!DOCTYPE html>

  2. <html lang="">

  3.   <head>

  4.     <meta charset="utf-8">

  5.     <title></title>

  6.     <script>

  7.       const METER_COLOR_GREEN = 0;

  8.       const METER_COLOR_BLUE = 1;

  9.       const kSmoothMultiplier = 3.0;

  10.       let fColorValue = null;

  11.       let fColor = 'rgb(93, 231, 61)';

  12.       let fOutLeft = 0.0;

  13.       let fOutRight = 0.0;

  14. 

  15.       setTimeout(function() {

  16.         document.getElementById('user-agent').textContent = window.navigator.userAgent;

  17.         document.getElementById('left-meter').onclick = function() {

  18.           console.log("left meter clicked");

  19.           fColorValue = fColorValue == 1 ? 0 : 1;

  20.           updateColor(fColorValue, true);

  21.           setParameterValue(0, fColorValue);

  22.           repaint();

  23.         }

  24.         document.getElementById('right-meter').onclick = function() {

  25.           console.log("right meter clicked");

  26.           fColorValue = fColorValue == 1 ? 0 : 1;

  27.           updateColor(fColorValue, true);

  28.           setParameterValue(0, fColorValue);

  29.           repaint();

  30.         }

  31.       }, 1)

  32. 

  33.       function repaint() {

  34.         const lmeter = document.getElementById('left-meter-x');

  35.         const rmeter = document.getElementById('right-meter-x');

  36.         lmeter.setAttribute('style', 'background:' + fColor + ';top:' + (100 * (1.0 - fOutLeft)) + '%;height:' + (100 * fOutLeft) + '%');

  37.         rmeter.setAttribute('style', 'background:' + fColor + ';top:' + (100 * (1.0 - fOutRight)) + '%;height:' + (100 * fOutRight) + '%');

  38.         setTimeout(function() {

  39.           setState('reset', '');

  40.         }, 1)

  41.       }

  42.       function updateColor(color, forced) {

  43.         if (fColorValue === color && !forced)

  44.             return;

  45. 

  46.         fColorValue = color;

  47. 

  48.         switch (color) {

  49.         case METER_COLOR_GREEN:

  50.           fColor = "rgb(93, 231, 61)";

  51.           break;

  52.         case METER_COLOR_BLUE:

  53.           fColor = "rgb(82, 238, 248)";

  54.           break;

  55.         }

  56. 

  57.         repaint();

  58.       }

  59.       function parameterChanged(index, value) {

  60.         // console.log("paramChanged", index, value)

  61.         switch (index) {

  62.           case 0: // color

  63.             updateColor(parseInt(Math.round(value)));

  64.             break;

  65.           case 1: // out-left

  66.             value = (fOutLeft * kSmoothMultiplier + value) / (kSmoothMultiplier + 1.0);

  67. 

  68.             /**/ if (value < 0.001) value = 0.0;

  69.             else if (value > 0.999) value = 1.0;

  70. 

  71.             if (fOutLeft != value)

  72.             {

  73.                 fOutLeft = value;

  74.                 repaint();

  75.             }

  76.             break;

  77.           case 2: // out-right

  78.             value = (fOutRight * kSmoothMultiplier + value) / (kSmoothMultiplier + 1.0);

  79. 

  80.             /**/ if (value < 0.001) value = 0.0;

  81.             else if (value > 0.999) value = 1.0;

  82. 

  83.             if (fOutRight != value)

  84.             {

  85.                 fOutRight = value;

  86.                 repaint();

  87.             }

  88.             break;

  89.         }

  90.       }

  91.     </script>

  92.     <style>

  93.       html, body {

  94.         background: grey;

  95.         color: white;

  96.         margin: 0;

  97.         padding: 0;

  98.       }

  99.       body {

  100.         display: flex;

  101.         flex-direction: column;

  102.       }

  103.       p {

  104.         margin: 6px;

  105.         font-size: 15px;

  106.         overflow: hidden;

  107.         text-overflow: ellipsis;

  108.         width: calc(100% - 12px);

  109.         height: 15px;

  110.         white-space: nowrap;

  111.       }

  112.       #meters {

  113.         display: flex;

  114.         flex-direction: row;

  115.       }

  116.       .meter {

  117.         background: black;

  118.         margin: 6px;

  119.         margin-top: 0px;

  120.         width: calc(50vw - 9px);

  121.         height: calc(100vh - 12px - 6px - 15px);

  122.       }

  123.       .meter:first-child {

  124.         margin-right: 3px;

  125.       }

  126.       .meter:last-child {

  127.         margin-left: 3px;

  128.       }

  129.       .meter-x {

  130.         background: rgb(93, 231, 61);

  131.         position: relative;

  132.         top: 0%;

  133.         left: 0;

  134.         width: 100%;

  135.         height: 0%;

  136.       }

  137.     </style>

  138.   </head>

  139.   <body>

  140.     <p id="user-agent">&nbsp;</p>

  141.     <div id="meters">

  142.       <div class="meter" id="left-meter">

  143.         <div class="meter-x" id="left-meter-x"></div>

  144.       </div>

  145.       <div class="meter" id="right-meter">

  146.         <div class="meter-x" id="right-meter-x"></div>

  147.       </div>

  148.     </div>

  149.   </body>

  150. </html>