<!DOCTYPE html>
<html>
    <head>
        <title>MMO-3</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;
        }
        #smalltext{
            font-family: "Lucida Grande", Verdana, Arial, sans-serif;
            text-align: center;
            color: #ccc;
            font-size: 1.6ex;
        }
        .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="smalltext">
                <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">

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


            <!-- OSC 2 vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        OCS 2
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/5" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">FQ -5</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/6" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">Mod 1 -6</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/7" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">Mod 2 -7</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/8" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">Mod 3 -8</div>
                        </div>
                </div> 


            <!-- OSC 3 vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        OSC 3
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/9" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">FQ -9</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/10" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">Mod 1 -10</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/11" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">Mod 2 -11</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/12" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">Mod 3 -12</div>
                        </div>
                </div> 
            <!-- LFO 1 vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        LFO 1
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/13" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">FQ -13</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/14" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">WF -14</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/15" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">SYM -15</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/16" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">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="mmo3/cc/17" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">FQ 1 -17</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/18" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">FQ 2 -18</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/19" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">MOD -19</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/20" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">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="mmo3/cc/21" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">FQ -21</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/22" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">Param 1 -22</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/23" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">Param 2 -23</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/24" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">SUSTAIN -24</div>
                        </div>
                </div> 

            <!-- MIX vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        MIX
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/25" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">OSC 1 -25</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/26" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">OSC 2 -26</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/27" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">OSC 3 -27</div>
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/28" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">RELEASE -28</div>
                        </div>
                </div> 

            <!-- AUDIO vertical Grid -->
                <div class="encodersGrid">
                        <div  id="title">
                        AUDIO
                        </div>
                        <div class="encoders">
                            <div><webaudio-knob id="mmo3/cc/29" diameter="70" min="0" max="127" value="64"></webaudio-knob>   </div>
                            <div></div>
                            <div id="smalltext">VOL -29</div>
                        </div>
                        <div>

                        </div>
                        <div>

                        </div>
                        <div class="encoders">
                        <webaudio-switch id="mmo3/reset" value="1" height="70" width="70" tooltip="Switch-B" src="knobs/rebuild.png"  type="toggle"></webaudio-switch>
                        </div>
                </div> 



            </div>
        </div> 

            </div>
        </div> 
        
         <div  align ="center" class="encoders">
            <webaudio-switch id="store" value="1" height="45" width="45" tooltip="Switch-B" src="knobs/save.png"  type="toggle"></webaudio-switch>
            <webaudio-switch id="load" value="1" height="45" width="45" tooltip="Switch-B" src="knobs/load.png"  type="toggle"></webaudio-switch>
        </div>

        <div id="title"  align ="center" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
            text-align: center;color: #ddd;font-size: 2ex;">
            <a href="ocs2.html">OCS-2</a>
        <span id="players"></span>
        </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="MMO-3";
                      break;
                case "/playe":
                      //divtext.innerHTML="OCS-2 ("+res[1]+" player(s))";
                      //divtextp.innerHTML=" ("+res[1]+" player(s))";
                      divtext.innerHTML="MMO-3 "+res[1];
                      divtextp.innerHTML=" "+res[1];
                      //console.log(res)
                      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);
                    //console.log(res[0].slice(1))
                    //console.log(document.getElementById(res[0].slice(1)));
                    //console.log(res[0].slice(1)+" "+res[1])
                    //let documentX = document.getElementById(res[0].slice(1));
                    //documentX.value=res[1];

                    //document.getElementById(res[0].slice(1)).value = res[1];
                    document.getElementById(res[0].slice(1)).setAttribute('value',res[1]);
                    //document.getElementById(res[0].slice(1)).setValue(res[1],true);
                    document.getElementById(res[0].slice(1)).setValue(res[1],false);

                    //console.log(documentX.value)
                    //console.log(document.getElementById(res[0].slice(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');
            var knobState = []
            
            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 + ' ' + e.type);
                //socket.emit('message', '/' + e.target.id + ' ' +  e.target.value);
                
                if (e.target.id === "load" || e.target.id === "store") {

                     if (e.type === "change") {

                        if (e.target.id === "store") {
                            //var knobState = []
                            //var knobs = document.getElementsByTagName('webaudio-knob');
                            for (var i = 0; i < knobs.length; i++) {
                              var knob = knobs[i] ;
                              //console.log(knob) ;
                              knobState[i] = knob.getAttribute('id')+" "+knob.getAttribute('value') ;
                              localStorage.setItem(knob.getAttribute('id'),knob.getAttribute('value')) ;
                            }
                            //console.log(knobState) ;
                            console.log('store clique') ;
                            }
                        if (e.target.id === "load") {
                            if (knobState.length > 0) {
                                for (var i = 0; i < knobState.length; i++) {
                                    ccstate=knobState[i] ; 
                                    _WS.send("/" + ccstate) ;
                                }
                            }
                            else {
                                for (var i = 0; i < knobs.length; i++) {
                                  var knob = knobs[i];
                                  var value = localStorage.getItem(knob.getAttribute('id'));
                                  if ( value != null) {
                                    ccstate = knob.getAttribute('id')+" "+value;
                                    _WS.send("/" + ccstate) ;
                                    console.log(ccstate) ;
                                 }
                                 else console.log("no localstorage");
                               }
                            }
                            console.log('load clique') ;
                        }
                     }

                    }
                else {
    
                    _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>


    </body>
</html>