<!DOCTYPE html>
<html>
    <head>
        <title>OCS-2</title>
        <meta charset="utf-8" />
        <style>
        .grid-container {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: 0.8fr 47px 0.7fr 2.8fr;
          grid-template-areas: ". . ." ". . ." ". . ." ". . .";
        }
        .buttons-container {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: 1fr;
          grid-template-areas: ". . ." ". . ." ". . ." ". . .";
        }
        #title{
            font-family: "Lucida Grande", Verdana, Arial, sans-serif;
            text-align: center;
            color: #ddd;
            font-size: 4ex;
        }
        #text{
            font-family: "Lucida Grande", Verdana, Arial, sans-serif;
            text-align: center;
            color: #ccc;
            font-size: 2ex;
        }
        .encoders{
            margin: 0 auto;
        }
        .mainGrid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr;
            gap: 1px 1px;
            grid-template-areas: ". . . . . . . .";
        }

        .encodersGrid {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
            gap: 1px 1px;
            grid-template-areas: "." "." "." "." ".";
            }
        a:link {
            color: white;
            }
        a:visited {
            color: gray;
            }
        a:visited {
            color: gray;
            }
    

        </style>

        <!-- Web audio buttons defaults -->
        <script  type="application/javascript" src="webcomponents-lite.js"></script>
        <script>
        WebAudioControlsOptions={
          useMidi:1,
          knobSrc:"knobs/simplegray.png",
          knobSprites:100,
          switchSrc:"knobs/switch_toggle.png",
          sliderSrc:"knobs/vsliderbody.png",
          sliderKnobsrc:"knobs/vsliderknob.png",
        }
        </script>
        <script src="webaudio-controls.js"></script>
        <!-- link rel="stylesheet" href="LJgrid.css" / -->
        <link rel="stylesheet" type="text/css" href="selector.min.css">
        <script type="application/javascript" src="selector.min.js"></script>
    </head>

    <body style="background-color:#000;">

        <!--
        Top Line
        -->

       <div id="status" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
            text-align: center;color: #ddd;font-size: 3ex;">not available

        </div>


        <!--
        Buttons Line
        
        <div></div>
            <div  class="buttons-container" id="text">
                <div>
                    <webaudio-switch id="select" value="1" height="35" width="100" tooltip="Switch-B" src="knobs/select.png"  type="toggle" onclick="socket.emit('message', '/select');"></webaudio-switch>
                </div>
                <div>
                    <webaudio-switch id="rate" value="1" height="35" width="100" tooltip="Switch-B" src="knobs/rate.png"  type="toggle" onclick="socket.emit('message', '/rate');"></webaudio-switch>
                </div>
                <div>
                    <webaudio-switch id="steps" value="1" height="35" width="100" tooltip="Switch-B" src="knobs/steps.png"  type="toggle" onclick="socket.emit('message', '/steps');"></webaudio-switch>
                </div>
            </div>
        <div></div>
        -->
       <!--
        OCS 2 encoders 1 x 8 horizontal grid
        -->
        <div class="mainGrid">

            <!-- VCO 1 vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        VCO 1
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/0" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">FQ -0</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/1" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">WF -1</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/2" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">Mod 1 -2</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/3" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">Mod 2 -3</div>
                        </div>
                </div> 


            <!-- VCO 2 vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        VCO 2
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/5" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">FQ -5</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/6" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">WF -6</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/7" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">Mod 1 -7</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/8" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">Mod 2 -8</div>
                        </div>
                </div> 


            <!-- VCF vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        VCF
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/9" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">FQ -9</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/10" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">Q -10</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/11" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">Mod 1 -11</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/12" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">Mod 2 -12</div>
                        </div>
                </div> 
            <!-- LFO 1 vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        LFO 1
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/13" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">FQ -13</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/14" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">WF -14</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/15" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">SYM -15</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/16" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">ATTACK -16</div>
                        </div>
                </div> 

            <!-- LFO 2 vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        LFO 2
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/17" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">FQ -17</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/18" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">WF -18</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/19" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">SYM -19</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/20" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">DECAY -20</div>
                        </div>
                </div> 

            <!-- LFO 3 vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        LFO 3
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/21" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">FQ -21</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/22" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">MOD -22</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/23" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">WET EFFECT -23</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/24" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">SUSTAIN -24</div>
                        </div>
                </div> 

            <!-- CV GEN vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        CV GEN
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/25" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">PARAM 1 -25</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/26" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">PARAM 2 -26</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/27" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">MOD EFFECT -27</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/28" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">RELEASE -28</div>
                        </div>
                </div> 

            <!-- VCA vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        VCA
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/29" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">MIX 1/2 -29</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/30" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">MOD -30</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="ocs2/cc/31" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="text">VOL -31</div>
                        </div>
                        <div class="encoders">
                        <webaudio-switch id="ocs2/reset" value="1" height="70" width="70" tooltip="Switch-B" src="knobs/rebuild.png"  type="toggle"></webaudio-switch>
                        </div>
                </div> 



            </div>
        </div> 

            </div>
        </div> 
        

        <!-- LJ style WS : A nettoyer ! -->

        <script type="text/javascript">

            <!-- var LJ = 'ws://xrkia.org:8081/' -->
            <!-- var LJ = 'ws://laser.teamlaser.fr:8081/' -->
            var LJ = 'ws://127.0.0.1:8081/'
            var _WS = {
            uri: LJ,
            ws: null,
        
            init : function (e) {
              _WS.s = new WebSocket(_WS.uri);
              _WS.s.onopen = function (e) { _WS.onOpen(e); };
              _WS.s.onclose = function (e) { _WS.onClose(e); };
              _WS.s.onmessage = function (e) { _WS.onMessage(e); };
              _WS.s.onerror = function (e) { _WS.onError(e); };
              },
        
            onOpen: function () {
            var divtext = document.getElementById('status');
                divtext.innerHTML="";
                divtext.innerHTML= "Connected";
              },
        
            onClose: function () {
              _WS.showout('DISCONNECTED');

              },
        
            onMessage: function (e) {
              var res = e.data.split(" ");
              console.log(e.data)
              //console.log(res[0].substring(0,6))
              //console.log(res)
              //console.log(res[0].slice(1))
              var divtext = document.getElementById('status');
              var divtextp = document.getElementById('players');


              switch (res[0].substring(0,6)) {
                
                case "/statu":
                      divtext.innerHTML="OCS-2";
                      break;
                case "/playe":
                      divtext.innerHTML="OCS-2 ("+res[1]+" player(s))";
                      divtextp.innerHTML=" ("+res[1]+" player(s))";
                      break;
                case "/simul":
                    pl = e.data.slice(7);
                    //console.log(pl)
                    pl2 = eval(pl.replace(/[()]/g, ''));
                    break;
                case "/plpoi":
                    //console.log("plpoint");
                    break;
                default:
                    //console.log(e);
                    document.getElementById(res[0].slice(1)).value = res[1];
                    _WS.showin(e.data);
                }
              },
        
            onError: function (e) {
              _WS.showin('<span style="color: red;">ERROR:</span> ' + e.data);
              },
        
            showin: function (message) {
                var divtext = document.getElementById('status');
                divtext.innerHTML="";
                divtext.innerHTML= message.toString();
              },
        
            showout: function (message) {
                var divtext = document.getElementById('status');
                divtext.innerHTML="";
                divtext.innerHTML= message.toString();
              },
        
            showstatus: function (message) {
                var divtext = document.getElementById('status');
                divtext.innerHTML="";
                divtext.innerHTML= message.toString();
              },
        
            send: function (message) {
              if (!message.length) {
                alert('Empty message not allowed !');
              } else {
                _WS.showout(message);
                _WS.s.send(message);
              }
            },
        
            close: function () {
              _WS.showout('GOODBYE !');
              _WS.s.close();
            }
          };
        
          window.addEventListener('load', _WS.init, false);     

        </script>




        <!-- 
          web audio encoders scripts 
        -->
        
        <script type="text/javascript">
            var message="";
            var log=[];
            var knobs = document.getElementsByTagName('webaudio-knob');
            
            for(var i = 0; i < knobs.length; i++){
                knobs[i].addEventListener("input",Dump,false);
                knobs[i].addEventListener("change",Dump,false);
            }
            var sliders = document.getElementsByTagName('webaudio-slider');
            
            for(var i = 0; i < sliders.length; i++){
                sliders[i].addEventListener("input",Dump,false);
                sliders[i].addEventListener("change",Dump,false);
            }
            var switches = document.getElementsByTagName('webaudio-switch');
            
            for(var i = 0; i < switches.length; i++) {
                switches[i].addEventListener("change",Dump,false);
            }

            function Dump(e) {
                var str="";
                str=e.type + " : " + e.target.id + " : " + e.target.value + " ";
                console.log(str);
                log.unshift(str);
                log.length=1;
                str="";
                
                for(var i=19;i>=0;--i) {
                    if(log[i])
                        str+=log[i]+"<br/>";
                }
                //var evview=document.getElementById("events");
                //evview.innerHTML=str;
                //console.log(  e.type + "/" + e.target.id + "/" +  e.target.value);
                //console.log('/' + e.target.id + ' ' +  e.target.value);
                //socket.emit('message', '/' + e.target.id + ' ' +  e.target.value);
                _WS.send("/" + e.target.id + " " +  e.target.value);

                if (e.target.id === "on" && e.type === "change") {   
                    window.location.reload();
                    }
        
                if (e.target.id === "rate" && e.type === "change") {
                      e.target.value = 1 ;
                    }
                    
                if (e.target.id === "range" && e.type === "change") {
                      e.target.value = 1 ;
                    }
                if (e.target.id === "select" && e.type === "change") {
                      e.target.value = 1 ;
                    }
          
            }
        </script>

        <div id="title"  align ="center" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
            text-align: center;color: #ddd;font-size: 2ex;">
            <a href="mmo3.html">MMO-3</a>
	    <span id="players"></span>
        </div>

    </body>
</html>