lapin/LJ
1
0
Fork 0
forked from protonphoton/LJ
Code Issues Pull Requests Releases Wiki Activity
9ecee93b43
LJ/webui/index.html
nrhck 9ecee93b43 UI upgrades
2019-02-26 11:10:57 +01:00

1317 lines
59 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<!--
LJ webapp 'mg' stand for main grid elements
-->
<html>
<head>
<meta charset="utf-8">
<title>LJ</title>
<!-- Web audio buttons defaults -->
<script 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" />
<!-- Javascript for this webapp is a the end of this html page and in LJ.js -->
<script src="LJ.js"></script>
</head>
<body style="background-color:#222;">
<!--
MainGrid Webpage one column, different raws displayed or hidden by menu button
-->
<div class="maingrid">
<!--
Title and laser state
-->
<div class="mgtitle">
<!-- LJ Logo -->
<div><img src="knobs/ljaylogo.png">
</div>
<!-- ON OFF button -->
<div class="onoffgrid">
<div class="lasertextxs">/on</div>
<div><webaudio-switch id="on" height="52" width="41" value="0" src="knobs/bigbluetoggle.png" type="toggle"></webaudio-switch></div>
</div>
<!-- Lasers state grid -->
<div class="lsttgrid">
<div></div>
<div></div>
<div class="lasertextxs">S</div>
<div class="lasertextxs">C</div>
<div class="lasertextxs">0</div>
<div></div>
<div><webaudio-knob id="lstt/0" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob></div>
<div><webaudio-knob id="lack/0" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob></div>
<div class="lasertextxs">1</div>
<div></div>
<div><webaudio-knob id="lstt/1" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob></div>
<div><webaudio-knob id="lack/1" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob></div>
<div class="lasertextxs">2</div>
<div></div>
<div><webaudio-knob id="lstt/2" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob></div>
<div><webaudio-knob id="lack/2" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob></div>
<div class="lasertextxs">3</div>
<div></div>
<div><webaudio-knob id="lstt/3" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob></div>
<div><webaudio-knob id="lack/3" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob></div>
</div>
<!-- blackout button -->
<div class="blackout">
<div class="lasertextxs">Emergy Black</div>
<div><webaudio-switch id="emergency" height="64" width="64" value="0" src="knobs/blackout.png" type="toggle"></webaudio-switch></div>
</div>
<div>
<div class="topgrid">
<!--
<div class="app">
<x-sign>
<div class="glitch __city" data-text="paris city">
</div>
<div class="glitch __info" data-text="paris city">
</div>
<div class="glitch __state">
<table class="t-info">
<tr>
<th class="xl-info" colspan="2" rowspan="2"></th>
<th class="sm-info" colspan="2"></th>
</tr>
<tr>
<td class="sm-info" colspan="2">http://www.teamlaser.fr</td>
</tr>
</table>
</div>
</x-sign>
</div>
-->
<!--
<div class="lasertext">Laser</div>
<div><webaudio-knob id="noteon" src="knobs/Prophetic5.png" diameter="70" min="16" max="20" value="0" sprites="5"></webaudio-knob></div>
<div><webaudio-param style="font-size:medium;" link="noteon"></webaudio-param></div>
<div class="lasertext">Set</div>
<div><webaudio-knob id="noteon" src="knobs/Prophetic5.png" diameter="70" min="8" max="12" value="4" sprites="5"></webaudio-knob></div>
<div class="lasertext">Curve</div>
<div><webaudio-knob id="noteon" src="knobs/Prophetic10.png" diameter="70" min="0" max="7" value="4" sprites="10"></webaudio-knob></div>
<div class="lasertext">Simu</div>
<div><webaudio-knob id="noteon" src="knobs/Prophetic5.png" diameter="70" min="24" max="28" value="0" sprites="5"></webaudio-knob></div>
-->
</div>
</div>
<div></div>
<div></div>
</div>
<!--
Menu buttons and Status display
-->
<div id="mgstatus" class="mgstatus">
<div>
<!-- <webaudio-switch id="align" height="10" width="99" value="0" src="knobs/align.png" type="toggle"></webaudio-switch>
<webaudio-switch id="simu" height="10" width="99" value="0" src="knobs/simu.png" type="toggle"></webaudio-switch>
<webaudio-switch id="run" height="10" width="99" value="0" src="knobs/run.png" type="toggle"></webaudio-switch>
<webaudio-switch id="live" height="10" width="99" value="0" src="knobs/live.png" type="toggle"></webaudio-switch> -->
<webaudio-switch id="align" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/align.png"></webaudio-switch>
<webaudio-switch id="simu" value="1" height="27" width="75" tooltip="Switch-B" src="knobs/simu.png"></webaudio-switch>
<webaudio-switch id="live" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/live.png"></webaudio-switch>
<webaudio-switch id="run" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/run.png"></webaudio-switch>
<webaudio-switch id="planet" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/planet.png"></webaudio-switch>
<webaudio-switch id="nozoid" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/nozoid.png"></webaudio-switch>
<!--
<button class="button" id="showrun" onclick="showRun()">Run</button>
<button class="button" id="shownozoid" onclick="showNozoid()">Nozoid</button>
<button class="button" id="showplanet" onclick="showPlanet()">Planet</button>
-->
</div>
<div><button class="submit" id="showstatus">OFFLINE</button></div>
<div>
<div>
<span class="lasertext">Client</span>
<select onclick="buttonClicked(this.value)">
<option value="noteon 0 selected="selected" ">0</option>
<option value="noteon 1">1</option>
<option value="noteon 2">2</option>
<option value="noteon 3">3</option>
</select>
<span class="lasertext">PL</span>
<select onclick="buttonClicked(this.value)">
<option value="noteon 24" selected="selected" >0</option>
<option value="noteon 25">1</option>
<option value="noteon 26">2</option>
<option value="noteon 27">3</option>
</select>
<span class="lasertext">Laser</span>
<select onclick="buttonClicked(this.value)">
<option value="noteon 24" selected="selected" >0</option>
<option value="noteon 25">1</option>
<option value="noteon 26">2</option>
<option value="noteon 27">3</option>
</select>
<select onclick="buttonClicked(this.value)">
<option value="planet/planetUI" selected="selected" >Planetarium</option>
<option value="nozoid/nozoidUI">Nozoid</option>
<option value="vj/vjUI">VJing</option>
<option value="ai/aiUI">AI</option>
<option value="lissa/lissaUI">Lissa</option>
</select>
</div>
</div>
</div>
<!--
Align
-->
<div id="mgalign" class="mgalign">
<!-- Laser 0 -->
<div class="laserbox">
<!-- IP laser 0 -->
<div>
<form onsubmit="onSubmit(); return false;">
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="ip/0">
</form>
</div>
<div>
<!-- Align Icons -->
<webaudio-switch id="grid/0" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/grid.png"></webaudio-switch>
<webaudio-switch id="mouse/0" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/mouse.png"></webaudio-switch>
<!-- Blackout icon -->
<webaudio-switch id="black/0" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
<!-- Swap Icons -->
<webaudio-switch id="swap/X/0" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/swapx.png"></webaudio-switch>
<webaudio-switch id="swap/Y/0" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
</div>
<!-- Lasergrid 0 -->
<div class="lasergrid" style="background-image: url(knobs/lasergrid0.png);">
<div><webaudio-param id="kpps/0" link="kpps/0" ></webaudio-param></div>
<div><webaudio-param id="points/0" link="points/0"></webaudio-param></div>
<div class="lasertext">kPPS</div>
<div class="lasertext">Points</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="loffset/X/0" diameter="60" min="-320" max="320" value="0"></webaudio-knob></div>
<div><webaudio-knob id="loffset/Y/0" diameter="60" min="-320" max="320" value="0"></webaudio-knob></div>
<div class="lasertext">Offset X</div>
<div class="lasertext">Offset Y</div>
<div><webaudio-param link="loffset/X/0" value="0"></webaudio-param></div>
<div><webaudio-param link="loffset/Y/0" value="0"></webaudio-param></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="scale/X/0" diameter="60" min="-10" max="10" value="0"></webaudio-knob></div>
<div><webaudio-knob id="scale/Y/0" diameter="60" min="-10" max="10" value="0"></webaudio-knob></div>
<div class="lasertext">Scale X</div>
<div class="lasertext">Scale Y</div>
<div><webaudio-param link="scale/X/0" value="0"></webaudio-param></div>
<div><webaudio-param link="scale/Y/0" value="0"></webaudio-param></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="angle/0" diameter="60" min="-1" max="1" value="0"></webaudio-knob></div>
<div><webaudio-knob id="intens/0" diameter="60" min="0" max="127" value="127"></webaudio-knob></div>
<div class="lasertext">Angle</div>
<div class="lasertext">Intens.</div>
</div>
</div>
<!-- Laser 1 -->
<div class="laserbox">
<!-- IP laser 1 -->
<div>
<form onsubmit="onSubmit(); return false;">
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="ip/1">
</form>
</div>
<div>
<!-- Align Icons -->
<webaudio-switch id="grid/1" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/grid.png"></webaudio-switch>
<webaudio-switch id="mouse/1" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/mouse.png"></webaudio-switch>
<!-- Blackout icon -->
<webaudio-switch id="black/1" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
<!-- Swap Icons -->
<webaudio-switch id="swap/X/1" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/swapx.png"></webaudio-switch>
<webaudio-switch id="swap/Y/1" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
</div>
<!-- Lasergrid 1 -->
<div class="lasergrid" style="background-image: url(knobs/lasergrid1.png);">
<div><webaudio-param id="kpps/1" link="kpps/1"></webaudio-param></div>
<div><webaudio-param id="points/1" link="points/1"></webaudio-param></div>
<div class="lasertext">kPPS</div>
<div class="lasertext">Points</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="loffset/X/1" diameter="60" min="-20" max="20" value="0"></webaudio-knob></div>
<div><webaudio-knob id="loffset/Y/1" diameter="60" min="-20" max="20" value="0"></webaudio-knob></div>
<div class="lasertext">Offset X</div>
<div class="lasertext">Offset Y</div>
<div><webaudio-param link="loffset/X/1" value="0"></webaudio-param></div>
<div><webaudio-param link="loffset/Y/1" value="0"></webaudio-param></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="scale/X/1" diameter="60" min="-10" max="10" value="0"></webaudio-knob></div>
<div><webaudio-knob id="scale/Y/1" diameter="60" min="-10" max="10" value="0"></webaudio-knob></div>
<div class="lasertext">Scale X</div>
<div class="lasertext">Scale Y</div>
<div><webaudio-param link="scale/X/1" value="0"></webaudio-param></div>
<div><webaudio-param link="scale/Y/1" value="0"></webaudio-param></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="angle/1" diameter="60" min="-1" max="1" value="0"></webaudio-knob></div>
<div><webaudio-knob id="intens/1" diameter="60" min="0" max="127"value="127"></webaudio-knob></div>
<div class="lasertext">Angle</div>
<div class="lasertext">Intens.</div>
</div>
</div>
<!-- Laser 2 -->
<div class="laserbox">
<!-- IP laser 2 -->
<div>
<form onsubmit="onSubmit(); return false;">
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="ip/2">
</form>
</div>
<div>
<!-- Align Icons -->
<webaudio-switch id="grid/2" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/grid.png"></webaudio-switch>
<webaudio-switch id="mouse/2" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/mouse.png"></webaudio-switch>
<!-- Blackout icon -->
<webaudio-switch id="black/2" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
<!-- Swap Icons -->
<webaudio-switch id="swap/X/2" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/swapx.png"></webaudio-switch>
<webaudio-switch id="swap/Y/2" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
</div>
<!-- Laser 2 grid -->
<div class="lasergrid" style="background-image: url(knobs/lasergrid2.png)">
<div><webaudio-param id="kpps/2" link="kpps/2"></webaudio-param></div>
<div><webaudio-param id="points/2" link="points/2"></webaudio-param></div>
<div class="lasertext">kPPS</div>
<div class="lasertext">Points</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="loffset/X/2" diameter="60" min="-20" max="20" value="0"></webaudio-knob></div>
<div><webaudio-knob id="loffset/Y/2" diameter="60" min="-20" max="20" value="0"></webaudio-knob></div>
<div class="lasertext">Offset X</div>
<div class="lasertext">Offset Y</div>
<div><webaudio-param link="loffset/X/2" value="0"></webaudio-param></div>
<div><webaudio-param link="loffset/Y/2" value="0"></webaudio-param></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="scale/X/2" diameter="60" min="-10" max="10" value="0"></webaudio-knob></div>
<div><webaudio-knob id="scale/Y/2" diameter="60" min="-10" max="10" value="0"></webaudio-knob></div>
<div class="lasertext">Scale X</div>
<div class="lasertext">Scale Y</div>
<div><webaudio-param link="scale/X/2" value="0"></webaudio-param></div>
<div><webaudio-param link="scale/Y/2" value="0"></webaudio-param></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="angle/2" diameter="60" min="-1" max="1" value="0"></webaudio-knob></div>
<div><webaudio-knob id="intens/2" diameter="60" min="0" max="127"value="127"></webaudio-knob></div>
<div class="lasertext">Angle</div>
<div class="lasertext">Intens.</div>
</div>
</div>
<!-- Laser 3 -->
<div class="laserbox">
<!-- IP laser 3 -->
<div>
<form onsubmit="onSubmit(); return false;">
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="ip/3">
</form>
</div>
<div>
<!-- Align Icons -->
<webaudio-switch id="grid/3" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/grid.png"></webaudio-switch>
<webaudio-switch id="mouse/3" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/mouse.png"></webaudio-switch>
<!-- Blackout icon -->
<webaudio-switch id="black/3" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
<!-- Swap Icons -->
<webaudio-switch id="swap/X/3" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/swapx.png"></webaudio-switch>
<webaudio-switch id="swap/Y/3" value="0" height="25" width="21" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
</div>
<!-- Laser 3 grid -->
<div class="lasergrid" style="background-image: url(knobs/lasergrid3.png)">
<div><webaudio-param id="kpps/3" link="kpps/3" ></webaudio-param></div>
<div><webaudio-param id="points/3" link="points/3"></webaudio-param></div>
<div class="lasertext">kPPS</div>
<div class="lasertext">Points</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="loffset/X/3" diameter="60" min="-20" max="20" value="0"></webaudio-knob></div>
<div><webaudio-knob id="loffset/Y/3" diameter="60" min="-20" max="20" value="0"></webaudio-knob></div>
<div class="lasertext">Offset X</div>
<div class="lasertext">Offset Y</div>
<div><webaudio-param link="loffset/X/3" value="0"></webaudio-param></div>
<div><webaudio-param link="loffset/Y/3" value="0"></webaudio-param></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="scale/X/3" diameter="60" min="-10" max="10" value="0"></webaudio-knob></div>
<div><webaudio-knob id="scale/Y/3" diameter="60" min="-10" max="10" value="0"></webaudio-knob></div>
<div class="lasertext">Scale X</div>
<div class="lasertext">Scale Y</div>
<div><webaudio-param link="scale/X/3" value="0"></webaudio-param></div>
<div><webaudio-param link="scale/Y/3" value="0"></webaudio-param></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="angle/2" diameter="60" min="-1" max="1" value="0"></webaudio-knob></div>
<div><webaudio-knob id="intens/3" diameter="60" min="0" max="127" value="127"></webaudio-knob></div>
<div class="lasertext">Angle</div>
<div class="lasertext">Intens.</div>
</div>
</div>
<div>
<canvas id="aligncanvas" width="336" height="400" style="border-color: #445;border-style:groove;border-width:1px;"></canvas>
</div>
</div>
<!--
Live
-->
<div id="mglive" class="mglive">
<!-- with AI Interface -->
<div class="withaibox">
<div class="lasertext" style="border-color:#334;border-style: groove;border-width:1px;">With AI
</div>
<div class="withaigrid">
<div><webaudio-knob id="ai/velocity" diameter="60" min="0" max="127" value="64"></webaudio-knob></div>
<div><webaudio-knob id="ai/expressivity" diameter="60" min="0" max="127" value="64"></webaudio-knob></div>
<div><webaudio-param link="ai/velocity" value="64"></webaudio-param></div>
<div><webaudio-param link="ai/expressivity" value="64"></webaudio-param></div>
<div class="lasertext">Velocity</div>
<div class="lasertext">Express.</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="ai/sensibility" diameter="60" min="0" max="127" value="64"></webaudio-knob></div>
<div><webaudio-knob id="ai/beauty" diameter="60" min="0" max="127" value="64"></webaudio-knob></div>
<div><webaudio-param link="ai/sensibility" value="64"></webaudio-param></div>
<div><webaudio-param link="ai/beauty" value="64"></webaudio-param></div>
<div class="lasertext">Sens.</div>
<div class="lasertext">Beauty</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="cc/1" diameter="60" min="1" max="127" value="64"></webaudio-knob></div>
<div><webaudio-knob id="cc/2" diameter="60" min="1" max="127" value="64"></webaudio-knob></div>
<div><webaudio-param link="cc/1" value="1"></webaudio-param></div>
<div><webaudio-param link="cc/2" value="1"></webaudio-param></div>
<div class="lasertext">CC 1</div>
<div class="lasertext">CC 2</div>
</div>
</div>
<!-- Lissa interface -->
<div class="lissabox">
<div class="lasertext" style="border-color:#334;border-style: groove;border-width:1px;">LISSA
</div>
<div class="lissagrid">
<div><webaudio-knob id="cc/5" diameter="60" min="0" max="127" value="0"></webaudio-knob></div>
<div><webaudio-knob id="cc/6" diameter="60" min="0" max="127" value="0"></webaudio-knob></div>
<div><webaudio-param link="cc/5" value="0"></webaudio-param></div>
<div><webaudio-param link="cc/6" value="0"></webaudio-param></div>
<div class="lasertext">Select X</div>
<div class="lasertext">Select Y</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="cc/21" diameter="60" min="1" max="127" value="1"></webaudio-knob></div>
<div><webaudio-knob id="cc/22" diameter="60" min="1" max="127" value="1"></webaudio-knob></div>
<div><webaudio-param link="cc/21" value="0"></webaudio-param></div>
<div><webaudio-param link="cc/22" value="0"></webaudio-param></div>
<div class="lasertext">FOV</div>
<div class="lasertext">Dist</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="cc/1" diameter="60" min="1" max="127" value="1"></webaudio-knob></div>
<div><webaudio-knob id="cc/2" diameter="60" min="1" max="127" value="1"></webaudio-knob></div>
<div><webaudio-param link="cc/1" value="0"></webaudio-param></div>
<div><webaudio-param link="cc/2" value="0"></webaudio-param></div>
<div class="lasertext">Offset X</div>
<div class="lasertext">Offset Y</div>
</div>
</div>
<!-- 3D proj interface -->
<div class="projgrid">
<div></div>
<div class="lasertext" style="border-color:#334;border-style: groove;border-width:1px;">3D ROT</div>
<div></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="cc/29" diameter="60" min="0" max="127" value="0" ></webaudio-knob></div>
<div><webaudio-knob id="cc/10" diameter="60" min="0" max="127" value="0"></webaudio-knob></div>
<div><webaudio-knob id="cc/31" diameter="60" min="0" max="127" value="0"></webaudio-knob></div>
<div><webaudio-param link="cc/29" value="0"></webaudio-param></div>
<div><webaudio-param link="cc/10" value="0"></webaudio-param></div>
<div><webaudio-param link="cc/31" value="0"></webaudio-param></div>
<div class="lasertext">X</div>
<div class="lasertext">Y</div>
<div class="lasertext">Z</div>
</div>
</div>
<!--
Simulator and interfaces
-->
<div id = "mgsimu" class="mgsimu">
<!-- left part : simulator -->
<div>
<canvas id="canvas" width="500" height="400" style="border-color: #445;border-style:groove;border-width:1px;"></canvas>
</div>
<!-- right part : interdace -->
<div>
<!-- sub right part : planetarium -->
<div id ="planetUI" style = "display: grid;justify-items: center;">
<!-- Stop and start switch -->
<div>
<div><webaudio-switch id="planet/start" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/planet.png"></webaudio-switch></div>
</div>
<form onsubmit="onSubmit(); return false;">
<span class="lasertext">Country (FR)</span>
<input class = "submitsmall" onchange = "onSubmit(this.id)" type="text" id="planet/country">
<span class="lasertext">City</span>
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/city">
</form>
<form>
<span class="lasertext">Date/Time (2012-7-12 23:00:00) </span>
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/time">
</form>
<form onsubmit="onSubmit(); return false;">
<span class="lasertext">Laser 0 : Alt</span>
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/alt/0">
<span class="lasertext">Az</span>
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/az/0">
<span class="lasertext">Angle</span>
<input class = "submitsmall" onchange = "onSubmit(this.id)" type="text" id="planet/angle/0">
</form>
<form onsubmit="onSubmit(); return false;">
<span class="lasertext">Laser 1 : Alt</span>
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/alt/1">
<span class="lasertext">Az</span>
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/az/1">
<span class="lasertext">Angle</span>
<input class = "submitsmall" onchange = "onSubmit(this.id)" type="text" id="planet/angle/1">
</form>
<form onsubmit="onSubmit(); return false;">
<span class="lasertext">Laser 2 : Alt</span>
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/alt/2">
<span class="lasertext">Az</span>
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/az/2">
<span class="lasertext">Angle</span>
<input class = "submitsmall" onchange = "onSubmit(this.id)" type="text" id="planet/angle/2">
</form>
<form onsubmit="onSubmit(); return false;">
<span class="lasertext">Laser 3 : Alt</span>
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/alt/3">
<span class="lasertext">Az</span>
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="planet/az/3">
<span class="lasertext">Angle</span>
<input class = "submitsmall" onchange = "onSubmit(this.id)" type="text" id="planet/angle/3">
</form>
</div>
<!-- sub right part : lissaUI -->
<div id ="lissaUI" style = "display: none;justify-items: center;">
<!-- Lissa interface -->
<div class="lissabox">
<div class="lasertext" style="border-color:#334;border-style: groove;border-width:1px;">LISSA
</div>
<div class="lissagrid">
<div><webaudio-knob id="cc/5" diameter="60" min="0" max="127" value="0"></webaudio-knob></div>
<div><webaudio-knob id="cc/6" diameter="60" min="0" max="127" value="0"></webaudio-knob></div>
<div><webaudio-param link="cc/5" value="0"></webaudio-param></div>
<div><webaudio-param link="cc/6" value="0"></webaudio-param></div>
<div class="lasertext">Select X</div>
<div class="lasertext">Select Y</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="cc/21" diameter="60" min="1" max="127" value="1"></webaudio-knob></div>
<div><webaudio-knob id="cc/22" diameter="60" min="1" max="127" value="1"></webaudio-knob></div>
<div><webaudio-param link="cc/21" value="0"></webaudio-param></div>
<div><webaudio-param link="cc/22" value="0"></webaudio-param></div>
<div class="lasertext">FOV</div>
<div class="lasertext">Dist</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="cc/1" diameter="60" min="1" max="127" value="1"></webaudio-knob></div>
<div><webaudio-knob id="cc/2" diameter="60" min="1" max="127" value="1"></webaudio-knob></div>
<div><webaudio-param link="cc/1" value="0"></webaudio-param></div>
<div><webaudio-param link="cc/2" value="0"></webaudio-param></div>
<div class="lasertext">Offset X</div>
<div class="lasertext">Offset Y</div>
</div>
</div>
</div>
<!-- sub right part : aiUI -->
<div id ="aiUI" style = "display: none;justify-items: center;">
<!-- with AI Interface -->
<div class="withaibox">
<div class="lasertext" style="border-color:#334;border-style: groove;border-width:1px;">With AI
</div>
<div class="withaigrid">
<div><webaudio-knob id="ai/velocity" diameter="60" min="0" max="127" value="64"></webaudio-knob></div>
<div><webaudio-knob id="ai/expressivity" diameter="60" min="0" max="127" value="64"></webaudio-knob></div>
<div><webaudio-param link="ai/velocity" value="64"></webaudio-param></div>
<div><webaudio-param link="ai/expressivity" value="64"></webaudio-param></div>
<div class="lasertext">Velocity</div>
<div class="lasertext">Express.</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="ai/sensibility" diameter="60" min="0" max="127" value="64"></webaudio-knob></div>
<div><webaudio-knob id="ai/beauty" diameter="60" min="0" max="127" value="64"></webaudio-knob></div>
<div><webaudio-param link="ai/sensibility" value="64"></webaudio-param></div>
<div><webaudio-param link="ai/beauty" value="64"></webaudio-param></div>
<div class="lasertext">Sens.</div>
<div class="lasertext">Beauty</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div><webaudio-knob id="cc/1" diameter="60" min="1" max="127" value="64"></webaudio-knob></div>
<div><webaudio-knob id="cc/2" diameter="60" min="1" max="127" value="64"></webaudio-knob></div>
<div><webaudio-param link="cc/1" value="1"></webaudio-param></div>
<div><webaudio-param link="cc/2" value="1"></webaudio-param></div>
<div class="lasertext">CC 1</div>
<div class="lasertext">CC 2</div>
</div>
</div>
</div>
<!-- sub right part : vjUI -->
<div id ="vjUI" style = "display: none;justify-items: center;">
<!-- VJ Interface -->
<!-- Stop and start switch -->
<div><webaudio-switch id="vj/start" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/live.png"></webaudio-switch></div>
</div>
<!-- sub right part : NozoidUI -->
<div id ="nozoidUI" style = "display: none;justify-items: center;">
<!-- Stop and start switch -->
<div>
<div><webaudio-switch id="nozoid/start" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/nozoids.png"></webaudio-switch></div>
</div>
<div>
<!-- Nozoids list and leds -->
<div>
<webaudio-switch id="nozoid/mmo3" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/mmo3.png"></webaudio-switch>
<webaudio-knob id="nozoid/mmo3/led" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
<webaudio-switch id="nozoid/ocs2" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/ocs2.png"></webaudio-switch>
<webaudio-knob id="nozoid/ocs2/led" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
</div>
<!-- Curve choice -->
<div>
<span class="lasertext" >Curve</span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/curve 0">0</option>
<option value="nozoid/curve 1">1</option>
<option value="nozoid/curve 2">2</option>
<option value="nozoid/curve 3">3</option>
</select>
<!-- Color choice -->
<span class="lasertext" >Color</span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/color 255 0 0">Red</option>
<option value="nozoid/color 0 255 0">Green</option>
<option value="nozoid/color 0 0 255">Blue</option>
<option value="nozoid/color 255 255 0">Yellow</option>
<option value="nozoid/color 0 255 255">Cyan</option>
<option value="nozoid/color 255 0 255">Magenta</option>
</select>
</div>
<!-- X curve Line IN and X Curve choices -->
<div>
<span class="lasertext" >X : LineIN</span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/X/IN 0">STOP</option>
<option value="nozoid/X/IN 1">VCO1</option>
<option value="nozoid/X/IN 2">VCO2</option>
<option value="nozoid/X/IN 3">LFO1</option>
<option value="nozoid/X/IN 4">LFO2</option>
<option value="nozoid/X/IN 5">LFO3</option>
<option value="nozoid/X/IN 6">CV/GEN</option>
<option value="nozoid/X/IN 7">ADSR</option>
<option value="nozoid/X/IN 8">LIGHT</option>
<option value="nozoid/X/IN 9">LINE IN</option>
<option value="nozoid/X/IN 10">MIDI</option>
<option value="nozoid/X/IN 11">CV1</option>
<option value="nozoid/X/IN 12">CV2</option>
<option value="nozoid/X/IN 13">CV3</option>
<option value="nozoid/X/IN 17">1 Out</option>
<option value="nozoid/X/IN 18">2 Out</option>
<option value="nozoid/X/IN 20">VCF</option>
<option value="nozoid/X/IN 21">MIX</option>
<option value="nozoid/X/IN 22">VCA</option>
</select>
<span class="lasertext" >Curve</span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/X/IN 0">Stop</option>
<option value="nozoid/X/IN 1">OSC1</option>
<option value="nozoid/X/IN 2">OSC2</option>
<option value="nozoid/X/IN 3">OSC3</option>
<option value="nozoid/X/IN 4">LFO1</option>
<option value="nozoid/X/IN 5">LFO2</option>
<option value="nozoid/X/IN 6">LFO3</option>
<option value="nozoid/X/IN 7">ADSR</option>
<option value="nozoid/X/IN 8">CV</option>
<option value="nozoid/X/IN 9">Line IN</option>
<option value="nozoid/X/IN 10">Jstck</option>
<option value="nozoid/X/IN 11">INL</option>
<option value="nozoid/X/IN 12">INR</option>
</select>
</div>
<!-- Y curve Line IN and Y Curve choices -->
<div>
<span class="lasertext" >Y : LineIN</span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/Y/IN 0">STOP</option>
<option value="nozoid/Y/IN 1">VCO1</option>
<option value="nozoid/Y/IN 2">VCO2</option>
<option value="nozoid/Y/IN 3">LFO1</option>
<option value="nozoid/Y/IN 4">LFO2</option>
<option value="nozoid/Y/IN 5">LFO3</option>
<option value="nozoid/Y/IN 6">CV/GEN</option>
<option value="nozoid/Y/IN 7">ADSR</option>
<option value="nozoid/Y/IN 8">LIGHT</option>
<option value="nozoid/Y/IN 9">LINE IN</option>
<option value="nozoid/Y/IN 10">MIDI</option>
<option value="nozoid/Y/IN 11">CV1</option>
<option value="nozoid/Y/IN 12">CV2</option>
<option value="nozoid/Y/IN 13">CV3</option>
<option value="nozoid/Y/IN 17">1 Out</option>
<option value="nozoid/Y/IN 18">2 Out</option>
<option value="nozoid/Y/IN 20">VCF</option>
<option value="nozoid/Y/IN 21">MIX</option>
<option value="nozoid/Y/IN 22">VCA</option>
</select>
<span class="lasertext" >Curve</span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/Y/IN 0">Stop</option>
<option value="nozoid/Y/IN 1">OSC1</option>
<option value="nozoid/Y/IN 2">OSC2</option>
<option value="nozoid/Y/IN 3">OSC3</option>
<option value="nozoid/Y/IN 4">LFO1</option>
<option value="nozoid/Y/IN 5">LFO2</option>
<option value="nozoid/Y/IN 6">LFO3</option>
<option value="nozoid/Y/IN 7">ADSR</option>
<option value="nozoid/Y/IN 8">CV</option>
<option value="nozoid/Y/IN 9">Line IN</option>
<option value="nozoid/Y/IN 10">Jstck</option>
<option value="nozoid/Y/IN 11">INL</option>
<option value="nozoid/X/IN 12">INR</option>
</select>
</div>
<!-- Automodulation X and Y choice -->
<div>
<span class="lasertext" >Automod : X</span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/auto/X/0">0</option>
<option value="nozoid/auto/X/1 Out">1 Out</option>
<option value="nozoid/auto/X/2 Out">2 Out</option>
<option value="nozoid/auto/X/3 Out">3 Out</option>
<option value="nozoid/auto/X/OutR">OutR</option>
<option value="nozoid/auto/X/OutL">OutL</option>
</select>
<span class="lasertext">Y</span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/auto/Y/0">0</option>
<option value="nozoid/auto/Y/1 Out">1 Out</option>
<option value="nozoid/auto/Y/2 Out">2 Out</option>
<option value="nozoid/auto/Y/3 Out">3 Out</option>
<option value="nozoid/auto/Y/OutR">OutR</option>
<option value="nozoid/auto/Y/OutL">OutL</option>
</select>
</div>
<!-- Nozoid speed UP and Down -->
<div>
<webaudio-switch id="nozoid/down 50" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/slower.png"></webaudio-switch>
<webaudio-switch id="nozoid/up 50" value="0" height="27" width="75" tooltip="Switch-B" src="knobs/faster.png"></webaudio-switch>
</div>
</div>
</div>
</div>
<!-- Selection buttons grid
<div id="cnvbuttons" class="cnvbuttons">
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><button id ="noteon 0" onclick ="buttonClicked(this.id)" class="button:checked">0</button></div>
<div><button id ="noteon 1" onclick ="buttonClicked(this.id)" class="button">1</button></div>
<div><button id ="noteon 2" onclick ="buttonClicked(this.id)" class="button">2</button></div>
<div><button id ="noteon 3" onclick ="buttonClicked(this.id)" class="button">3</button></div>
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
<div><button id ="noteon 24" onclick ="buttonClicked(this.id)" class="button:checked">PL 0</button></div>
<div><button id ="noteon 25" onclick ="buttonClicked(this.id)" class="button">PL 1</button></div>
<div><button id ="noteon 26" onclick ="buttonClicked(this.id)" class="button">PL 2</button></div>
<div><button id ="noteon 27" onclick ="buttonClicked(this.id)" class="button">PL 3</button></div>
</div>
-->
</div>
<!--
Run
-->
<div id="mgrun" class="mgrun">
<!-- Laser Client selection grid -->
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><button id ="noteon 0" onclick ="buttonClicked(this.id)" class="button:checked">0</button></div>
<div><button id ="noteon 1" onclick ="buttonClicked(this.id)" class="button">1</button></div>
<div><button id ="noteon 2" onclick ="buttonClicked(this.id)" class="button">2</button></div>
<div><button id ="noteon 3" onclick ="buttonClicked(this.id)" class="button">3</button></div>
<div><button id ="noteon 4" onclick ="buttonClicked(this.id)" class="button">4</button></div>
<div><button id ="noteon 5" onclick ="buttonClicked(this.id)" class="button">5</button></div>
<div><button id ="noteon 6" onclick ="buttonClicked(this.id)" class="button">6</button></div>
<div><button id ="noteon 7" onclick ="buttonClicked(this.id)" class="button">7</button></div>
<!-- Simulator PL selection grid -->
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><button id ="noteon 24" onclick ="buttonClicked(this.id)" class="button:checked">PL 0</button></div>
<div><button id ="noteon 25" onclick ="buttonClicked(this.id)" class="button">PL 1</button></div>
<div><button id ="noteon 26" onclick ="buttonClicked(this.id)" class="button">PL 2</button></div>
<div><button id ="noteon 27" onclick ="buttonClicked(this.id)" class="button">PL 3</button></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- Laser selection grid -->
<div><img src="knobs/iconlaser.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconlaser.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconlaser.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconlaser.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><button id ="noteon 16" onclick ="buttonClicked(this.id)" class="button:checked">0</button></div>
<div><button id ="noteon 17" onclick ="buttonClicked(this.id)" class="button">1</button></div>
<div><button id ="noteon 18" onclick ="buttonClicked(this.id)" class="button">2</button></div>
<div><button id ="noteon 19" onclick ="buttonClicked(this.id)" class="button">3</button></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- Hidden grid -->
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconblack.png" alt=" " class="icongrid" /></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!--
Nozoid
todo : buttons stop/start, stopX, stop Y
Colors
Curve
-->
<div id = "mgnozoid" class="mgnozoid">
<div>
<div>
<div>
<span class="lasertext" >MMO-3</span>
<webaudio-knob id="mmo3" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
</div>
<div>
<span class="lasertext" >OCS-2</span>
<webaudio-knob id="ocs2" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
</div>
</div>
<div>
<div><webaudio-switch id="Start" value="0" height="76" width="76" tooltip="Switch-B" src="knobs/switch_toggle.png"></webaudio-switch></div>
<span class="lasertext" >STOP/START</span>
</div>
<div>
<span class="lasertext" >Color ? </span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/color 255 0 0">Red</option>
<option value="nozoid/color 0 255 0">Green</option>
<option value="nozoid/color 0 0 255">Blue</option>
<option value="nozoid/color 255 255 0">Yellow</option>
<option value="nozoid/color 0 255 255">Cyan</option>
<option value="nozoid/color 255 0 255">Magenta</option>
</select>
</div>
<div>
<span class="lasertext" >XCURVE LineIN</span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/X/IN 0">STOP</option>
<option value="nozoid/X/IN 1">VCO1</option>
<option value="nozoid/X/IN 2">VCO2</option>
<option value="nozoid/X/IN 3">LFO1</option>
<option value="nozoid/X/IN 4">LFO2</option>
<option value="nozoid/X/IN 5">LFO3</option>
<option value="nozoid/X/IN 6">CV/GEN</option>
<option value="nozoid/X/IN 7">ADSR</option>
<option value="nozoid/X/IN 8">LIGHT</option>
<option value="nozoid/X/IN 9">LINE IN</option>
<option value="nozoid/X/IN 10">MIDI</option>
<option value="nozoid/X/IN 11">CV1</option>
<option value="nozoid/X/IN 12">CV2</option>
<option value="nozoid/X/IN 13">CV3</option>
<option value="nozoid/X/IN 17">1 Out</option>
<option value="nozoid/X/IN 18">2 Out</option>
<option value="nozoid/X/IN 20">VCF</option>
<option value="nozoid/X/IN 21">MIX</option>
<option value="nozoid/X/IN 22">VCA</option>
</select>
<span class="lasertext" >XCURVE</span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/X/IN 0">Stop</option>
<option value="nozoid/X/IN 1">OSC1</option>
<option value="nozoid/X/IN 2">OSC2</option>
<option value="nozoid/X/IN 3">OSC3</option>
<option value="nozoid/X/IN 4">LFO1</option>
<option value="nozoid/X/IN 5">LFO2</option>
<option value="nozoid/X/IN 6">LFO3</option>
<option value="nozoid/X/IN 7">ADSR</option>
<option value="nozoid/X/IN 8">CV</option>
<option value="nozoid/X/IN 9">Line IN</option>
<option value="nozoid/X/IN 10">Jstck</option>
<option value="nozoid/X/IN 11">INL</option>
<option value="nozoid/X/IN 12">INR</option>
</select>
</div>
<div>
<span class="lasertext" >Automodulation X ? </span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/auto/X/0">0</option>
<option value="nozoid/auto/X/1 Out">1 Out</option>
<option value="nozoid/auto/X/2 Out">2 Out</option>
<option value="nozoid/auto/X/3 Out">3 Out</option>
<option value="nozoid/auto/X/OutR">OutR</option>
<option value="nozoid/auto/X/OutL">OutL</option>
</select>
<span class="lasertext">Automodulation Y ? </span>
<select onclick="buttonClicked(this.value)">
<option value="nozoid/auto/Y/0">0</option>
<option value="nozoid/auto/Y/1 Out">1 Out</option>
<option value="nozoid/auto/Y/2 Out">2 Out</option>
<option value="nozoid/auto/Y/3 Out">3 Out</option>
<option value="nozoid/auto/Y/OutR">OutR</option>
<option value="nozoid/auto/Y/OutL">OutL</option>
</select>
</div>
</div>
</div>
<!--
Planetarium
-->
<div id = "mgplanet" class="mgplanet">
<!-- Simuator canvas -->
<div>
<canvas id="canvas" width="500" height="400" style="border-color: #445;border-style:groove;border-width:1px;"></canvas>
</div>
<!-- Selection buttons grid -->
<div id="cnvbuttons" class="cnvbuttons">
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/client.png" alt=" " class="icongrid" /></div>
<div><button id ="noteon 0" onclick ="buttonClicked(this.id)" class="button:checked">0</button></div>
<div><button id ="noteon 1" onclick ="buttonClicked(this.id)" class="button">1</button></div>
<div><button id ="noteon 2" onclick ="buttonClicked(this.id)" class="button">2</button></div>
<div><button id ="noteon 3" onclick ="buttonClicked(this.id)" class="button">3</button></div>
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
<div><img src="knobs/iconljay2.png" alt=" " class="icongrid" /></div>
<div><button id ="noteon 24" onclick ="buttonClicked(this.id)" class="button:checked">PL 0</button></div>
<div><button id ="noteon 25" onclick ="buttonClicked(this.id)" class="button">PL 1</button></div>
<div><button id ="noteon 26" onclick ="buttonClicked(this.id)" class="button">PL 2</button></div>
<div><button id ="noteon 27" onclick ="buttonClicked(this.id)" class="button">PL 3</button></div>
</div>
</div>
<!--
Footer 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 === "planet" && e.type === "change") {
showPlanet();
}
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>
-->
</html>
Reference in New Issue View Git Blame Copy Permalink