LJ/webui/blocks/footer.html

  

 
  <!-- 
    Footer block display events for debug 
  -->
  
  <div class="mgfooter">
        <div id="showin"></div>
		<div id="showout"></div>
    	<div id="events"</div>
  </div>

</div>


<!-- 
  web audio buttons 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);

        if (e.target.id === "align" && e.type === "change") {
            showAlign();
            }
         if (e.target.id === "simu" && e.type === "change") {   
            showCanvas();
            }
         if (e.target.id === "live" && e.type === "change") {   
            showLive();
            }
         if (e.target.id === "nozoid" && e.type === "change") {   
            showNozoid();
            }
          if (e.target.id === "run" && e.type === "change") {   
            showRun();
            }
          if (e.target.id === "on" && e.type === "change") {   
            window.location.reload();
            }

          if (e.target.id === "nozoid/down 50" && e.type === "input") {
              e.target.value = 1 ;
            }
            
          if (e.target.id === "noteon" && e.type ==="input")
          	 console.log("only noteon change are sent not input");

          else
          	 _WS.send("/" + e.target.id + " " +  e.target.value);
  
          // for /scale : after a change (knob is released) reset knob value to 0
          if (e.target.id.substring(0,5) === "scale" && e.type === "change") {
          	 e.target.value = 0;
          	//console.log(e.target.id + "set to 0")
          	}
          // for /loffset : after a change (knob is released) reset knob value to 0
          if (e.target.id.substring(0,7) === "loffset" && e.type === "change") {
          	 e.target.value = 0;
          	 console.log(e.target.id + "set to 0")
          	}
          // for /angle : after a change (knob is released) reset knob value to 0
          if (e.target.id.substring(0,5) === "angle" && e.type === "change") {
          	 e.target.value = 0;
          	 //console.log(e.target.id + "set to 0")
          	}
    }
</script>


<!-- 
  Simulator Point lists drawing scripts 
-->

<script type="text/javascript">

  //
  // Align canvas : store Reference To The Canvas & Set Context
  //

  var aligncanvas = document.getElementById("aligncanvas");
  var alignctx = aligncanvas.getContext("2d");
  alignctx.clearRect(0,0,400,400);
  var mousePosDown =  { x: 0, y: 0};
  var mousePosUp =  { x: 0, y: 0 };
  var mouseMsgDown = '';
  var mouseMsgUp = '';


  function getMousePos(aligncanvas,evt) 
      {
      var rect = aligncanvas.getBoundingClientRect();
      return { x: evt.clientX - rect.left, y: evt.clientY - rect.top };
      }

   
  function MouseDown(evt)
      {
      mousePosDown = getMousePos(aligncanvas, evt);
      mouseMsgDown = mousePosDown.x + ' ' + mousePosDown.y;
      _WS.showin(mouseMsgDown);
      }
      
  function MouseUp(evt)
      {
      mousePosUp = getMousePos(aligncanvas, evt);
      mouseMsgUp = mousePosUp.x + ' ' + mousePosUp.y;
      _WS.showin(mouseMsgUp);
      _WS.s.send('/mouse '+mouseMsgDown+' '+mouseMsgUp);
      _WS.showin('/mouse '+mouseMsgDown+' '+mouseMsgUp);
      }

  aligncanvas.addEventListener("mouseup", MouseUp, false);
  aligncanvas.addEventListener("mousedown", MouseDown, false);



  //
	// Simulator canvas : store Reference To The Canvas & Set Context
	//

  var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
  var lastpoint = { x: 0, y: 0, color: 0};
  ctx.clearRect(0,0,400,400);
  var zoom = 0.5;
  //ctx.save


  // Todo : laser point will have black points to go from a polyline to another. Need to discard those black points.
  function draw() {


      // Clear Canvas At The Start Of Every Frame
      //ctx.restore
      
      if (pl2.length > 0)
        {

        // Begin a new path
        // 0.7 reduces max coordinates in a more browser compatible resolution.
        ctx.clearRect(0,0,400,400);
        ctx.beginPath();
       
        ctx.moveTo(pl2[0]*zoom, pl2[1]*zoom);
        lastpoint.color = pl2[2];

        // Draw n Lines
        for (var i = 0; i < pl2.length/3; i++) 
          {
          
          // New point has the same color -> add a new line to the new point
          if (pl2[2+(i*3)] === lastpoint.color)
            {
            ctx.lineTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
            }

          // New point has different color -> stroke with previous color
          if (pl2[2+(i*3)] != lastpoint.color) 
            {
            ctx.strokeStyle = "#"+(lastpoint.color + Math.pow(16, 6)).toString(16).slice(-6);
            ctx.stroke();
            ctx.closePath()
            //ctx.restore
            ctx.beginPath();
            //ctx.clearRect(0,0,400,400);
            
            ctx.moveTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
            }

          // Last point -> stroke with current color
          if (i === (pl2.length/3)-1 ) 
            {
            ctx.moveTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom);
            ctx.strokeStyle = "#"+((pl2[2+(i*3)]) + Math.pow(16, 6)).toString(16).slice(-6);
            ctx.stroke();
            
            ctx.closePath()
            //ctx.restore
            //ctx.clearRect(0,0,400,400);
            }

          // store point for comparison
          lastpoint.x = pl2[i*3];
          lastpoint.y = pl2[1+(i*3)];
          lastpoint.color = pl2[2+(i*3)];
          }

      } 
      // Call Draw Function Again To Create Animation
      window.requestAnimationFrame(draw);
    }
      
  // Initialize The Draw Function
  draw();
</script>
</body>

<!-- non displayed items, for code reference mainly for other type of webaudio buttons
        <div>
        	<span  class="lasertext">Swap X</span>
        	<span  class="lasertext">Swap Y</span>
        </div>
        <div>
        	<webaudio-switch id="swap/X" value="0" height="76" width="76" tooltip="Switch-B" src="knobs/switch_toggle.png"></webaudio-switch>
        	<webaudio-switch id="swap/Y" value="0" height="76" width="76" tooltip="Switch-B" src="knobs/switch_toggle.png"></webaudio-switch>
        </div>

	<div><webaudio-knob id="choice"  src="knobs/Prophet5.png" diameter="80" min="0" max="10" value="0" sprites="9"></webaudio-knob></div>
<div><webaudio-knob id="choice2" src="knobs/Old11.png"  diameter="80" min="0" max="10" value="0" sprites="10">></webaudio-knob></div>
<div><webaudio-knob id="laser"  src="knobs/Prophetic5.png" diameter="70" min="0" max="5" value="0" sprites="5"></webaudio-knob></div>

	<div>
    <webaudio-slider id="slider1" width="24" height="120"></webaudio-slider>
    <webaudio-slider id="slider2" width="24" height="120"></webaudio-slider>
    </div>

    <div>
	<webaudio-switch id="laser/0" height="64" width="25"   value="0" src="knobs/key0.png" type="toggle"></webaudio-switch>
	<webaudio-switch id="laser/1" height="64" width="25"   value="0" src="knobs/key0.png" type="toggle"></webaudio-switch>
	<webaudio-switch id="laser/2" height="64" width="25"  value="0" src="knobs/key0.png" type="toggle"></webaudio-switch>
	<webaudio-switch id="laser/3" height="64" width="25" value="0" src="knobs/key0.png" type="toggle"></webaudio-switch>
	</div>
	-->
 <!-- End of Footer block -->
</html>