Nozoid WebUI
This commit is contained in:
nrhck
parent
6ae38061a5
commit
770e178513
|
|
@ -2,14 +2,16 @@ Multi Laser planetarium in python3 for LJ.
|
|||
v0.01
|
||||
Sam Neurohack
|
||||
|
||||
Make sure to understand altitude/azimuth coordinate system.
|
||||
|
||||
|
||||
Display all solar planets and hipparcos catalog objects below a given magnitude. Accuracy tested against apparent data and starchart at https://www.calsky.com/cs.cgi?cha=7&sec=3&sub=2
|
||||
|
||||
It's an alpha release so a little hardcoded :
|
||||
|
||||
- set observer position (find SkyCity, SkyCountryCode) in main.py like 'Paris' and 'FR'
|
||||
- set observer date.time in InitObserver() arguments (default is now in UTC)
|
||||
- set what sky part you want to display for each laser in 'LaserSkies' variable : Define alitude and azimuth for top left and bottom right
|
||||
- set observer date/time in InitObserver() arguments (default is now in UTC)
|
||||
- set what sky part you want to display for each laser in 'LaserSkies' variable : Define alitude and azimuth for top left and bottom right of each laser.
|
||||
|
||||
It needs more libraries than plan. Currently it relies on the awesome astropy, skyfield,...
|
||||
|
||||
|
|
@ -25,7 +27,8 @@ For debug options and more type : python3 --help
|
|||
|
||||
To install :
|
||||
|
||||
go3.sh
|
||||
Install LJ first.
|
||||
go3.sh install required python3 modules
|
||||
|
||||
NB :
|
||||
- if you get an year error out of range : install the last skyfield "python-skyfield" in github.
|
||||
|
|
|
|||
48
webui/LJ.js
48
webui/LJ.js
|
|
@ -6,18 +6,18 @@
|
|||
|
||||
function noMenu() {
|
||||
// Set all menu button with normal button style
|
||||
var x = document.getElementById("showalign");
|
||||
var x = document.getElementById("showalign");
|
||||
x.className = "button";
|
||||
var x = document.getElementById("showrun");
|
||||
x.className = "button";
|
||||
x.className = "button";
|
||||
var x = document.getElementById("showcanvas");
|
||||
x.className = "button";
|
||||
x.className = "button";
|
||||
var x = document.getElementById("showlive");
|
||||
x.className = "button";
|
||||
x.className = "button";
|
||||
var x = document.getElementById("shownozoid");
|
||||
x.className = "button";
|
||||
x.className = "button";
|
||||
var x = document.getElementById("showplanet");
|
||||
x.className = "button";
|
||||
x.className = "button";
|
||||
|
||||
// Hide all possible main central grids.
|
||||
var x = document.getElementById("mgalign");
|
||||
|
|
@ -39,52 +39,56 @@
|
|||
function showAlign() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgalign");
|
||||
x.style.display = "grid";
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("showalign");
|
||||
x.className = "button:checked";
|
||||
x.className = "button:checked";
|
||||
}
|
||||
|
||||
function showRun() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgrun");
|
||||
x.style.display = "grid";
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("showrun");
|
||||
x.className = "button:checked";
|
||||
x.className = "button:checked";
|
||||
}
|
||||
|
||||
function showCanvas() {
|
||||
function showCanvas() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgsimu");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("cnvbuttons");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("showcanvas");
|
||||
x.className = "button:checked";
|
||||
x.className = "button:checked";
|
||||
}
|
||||
|
||||
function showLive() {
|
||||
function showLive() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mglive");
|
||||
x.style.display = "grid";
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("showlive");
|
||||
x.className = "button:checked";
|
||||
x.className = "button:checked";
|
||||
}
|
||||
function showNozoid() {
|
||||
|
||||
function showNozoid() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgnozoid");
|
||||
x.style.display = "grid";
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("shownozoid");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
function showPlanet() {
|
||||
|
||||
function showPlanet() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgplanet");
|
||||
x.style.display = "grid";
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("cnvbuttons");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("showplanet");
|
||||
x.className = "button:checked";
|
||||
x.className = "button:checked";
|
||||
}
|
||||
u
|
||||
function buttonClicked(clicked_id) {
|
||||
|
||||
function buttonClicked(clicked_id) {
|
||||
_WS.send("/" + clicked_id);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
.mgalign {
|
||||
display: grid;
|
||||
height: 400px;
|
||||
grid-template-columns: 144px 144px 138px 138px 10px;
|
||||
grid-template-columns: 144px 144px 138px 138px 10px 326px;
|
||||
grid-template-rows: 1Fr;
|
||||
background-color: #151515;
|
||||
border-color: #445;
|
||||
|
|
|
|||
267
webui/index.html
267
webui/index.html
|
|
@ -131,10 +131,10 @@
|
|||
<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>
|
||||
<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>
|
||||
|
|
@ -181,11 +181,11 @@
|
|||
<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>
|
||||
<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>
|
||||
|
|
@ -234,10 +234,10 @@
|
|||
<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>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="ip/2">
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<!-- Align Icons -->
|
||||
|
|
@ -254,34 +254,35 @@
|
|||
|
||||
<!-- Laser 2 grid -->
|
||||
<div class="lasergrid" style="background-image: url(lasergrid2.png)">
|
||||
<div><webaudio-param id="kpps/2" link="kpps/2"></webaudio-param></div>
|
||||
<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 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 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 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 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 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 class="lasertext">Intens.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -289,10 +290,10 @@
|
|||
<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>
|
||||
<form onsubmit="onSubmit(); return false;">
|
||||
<input class = "submit" onchange = "onSubmit(this.id)" type="text" id="ip/3">
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<!-- Align Icons -->
|
||||
|
|
@ -309,36 +310,42 @@
|
|||
|
||||
<!-- Laser 3 grid -->
|
||||
<div class="lasergrid" style="background-image: url(lasergrid3.png)">
|
||||
<div><webaudio-param id="kpps/3" link="kpps/3" ></webaudio-param></div>
|
||||
<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 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 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 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 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 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 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>
|
||||
|
||||
|
||||
|
|
@ -358,17 +365,19 @@
|
|||
<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 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 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>
|
||||
|
|
@ -442,10 +451,10 @@
|
|||
|
||||
<!-- 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><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>
|
||||
|
|
@ -458,7 +467,7 @@
|
|||
<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>
|
||||
|
||||
|
||||
|
|
@ -544,25 +553,103 @@
|
|||
|
||||
<!--
|
||||
Nozoid
|
||||
todo : buttons stop/start, stopX, stop Y
|
||||
Colors
|
||||
Curve
|
||||
-->
|
||||
|
||||
<div id = "mgnozoid" class="mgnozoid">
|
||||
<div>
|
||||
<span class="lasertext">X</span>
|
||||
<select>
|
||||
<option value="LFO1">LFO1</option>
|
||||
<option value="LFO2">LFO2</option>
|
||||
<option value="LFO3">LFO3</option>
|
||||
<option value="LFO4">LFO4</option>
|
||||
</select>
|
||||
<span class="lasertext">Y</span>
|
||||
<select>
|
||||
<option value="LFO1">LFO1</option>
|
||||
<option value="LFO2">LFO2</option>
|
||||
<option value="LFO3">LFO3</option>
|
||||
<option value="LFO4">LFO4</option>
|
||||
<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="x/IN 0">STOP</option>
|
||||
<option value="x/IN 1">VCO1</option>
|
||||
<option value="x/IN 2">VCO2</option>
|
||||
<option value="x/IN 3">LFO1</option>
|
||||
<option value="x/IN 4">LFO2</option>
|
||||
<option value="x/IN 5">LFO3</option>
|
||||
<option value="x/IN 6">CV/GEN</option>
|
||||
<option value="x/IN 7">ADSR</option>
|
||||
<option value="x/IN 8">LIGHT</option>
|
||||
<option value="x/IN 9">LINE IN</option>
|
||||
<option value="x/IN 10">MIDI</option>
|
||||
<option value="x/IN 11">CV1</option>
|
||||
<option value="x/IN 12">CV2</option>
|
||||
<option value="x/IN 13">CV3</option>
|
||||
<option value="x/IN 17">1 Out</option>
|
||||
<option value="x/IN 18">2 Out</option>
|
||||
<option value="x/IN 20">VCF</option>
|
||||
<option value="x/IN 21">MIX</option>
|
||||
<option value="x/IN 22">VCA</option>
|
||||
</select>
|
||||
|
||||
|
||||
<span class="lasertext" >XCURVE</span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="x/IN 0">Stop</option>
|
||||
<option value="x/IN 1">OSC1</option>
|
||||
<option value="x/IN 2">OSC2</option>
|
||||
<option value="x/IN 3">OSC3</option>
|
||||
<option value="x/IN 4">LFO1</option>
|
||||
<option value="x/IN 5">LFO2</option>
|
||||
<option value="x/IN 6">LFO3</option>
|
||||
<option value="x/IN 7">ADSR</option>
|
||||
<option value="x/IN 8">CV</option>
|
||||
<option value="x/IN 9">Line IN</option>
|
||||
<option value="x/IN 10">Jstck</option>
|
||||
<option value="x/IN 11">INL</option>
|
||||
<option value="x/IN 12">INR</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="lasertext" >Automodulation X ? </span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="auto/X/0">0</option>
|
||||
<option value="auto/X/1 Out">1 Out</option>
|
||||
<option value="auto/X/2 Out">2 Out</option>
|
||||
<option value="auto/X/3 Out">3 Out</option>
|
||||
<option value="auto/X/OutR">OutR</option>
|
||||
<option value="auto/X/OutL">OutL</option>
|
||||
</select>
|
||||
<span class="lasertext">Automodulation Y ? </span>
|
||||
<select onclick="buttonClicked(this.value)">
|
||||
<option value="auto/Y/0">0</option>
|
||||
<option value="auto/Y/1 Out">1 Out</option>
|
||||
<option value="auto/Y/2 Out">2 Out</option>
|
||||
<option value="auto/Y/3 Out">3 Out</option>
|
||||
<option value="auto/Y/OutR">OutR</option>
|
||||
<option value="auto/Y/OutL">OutL</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -673,50 +760,66 @@
|
|||
|
||||
|
||||
<!--
|
||||
Simulator Point list drawing scripts
|
||||
Simulator Point lists drawing scripts
|
||||
-->
|
||||
<script type="text/javascript">
|
||||
|
||||
// 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;
|
||||
//
|
||||
// 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 = '';
|
||||
//ctx.save
|
||||
|
||||
canvas.addEventListener("mouseup", MouseUp, false);
|
||||
canvas.addEventListener("mousedown", MouseDown, false);
|
||||
|
||||
function getMousePos(canvas,evt)
|
||||
function getMousePos(aligncanvas,evt)
|
||||
{
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
var rect = aligncanvas.getBoundingClientRect();
|
||||
return { x: evt.clientX - rect.left, y: evt.clientY - rect.top };
|
||||
}
|
||||
|
||||
function MouseDown(evt)
|
||||
function MouseDown(evt)
|
||||
{
|
||||
mousePosDown = getMousePos(canvas, evt);
|
||||
mousePosDown = getMousePos(aligncanvas, evt);
|
||||
mouseMsgDown = mousePosDown.x + ' ' + mousePosDown.y;
|
||||
_WS.showin(mouseMsgDown);
|
||||
}
|
||||
|
||||
function MouseUp(evt)
|
||||
{
|
||||
mousePosUp = getMousePos(canvas, 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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue