forked from protonphoton/LJ
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.
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@
|
|||
var x = document.getElementById("showlive");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
|
||||
function showNozoid() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgnozoid");
|
||||
|
|
@ -76,14 +77,17 @@
|
|||
var x = document.getElementById("shownozoid");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
|
||||
function showPlanet() {
|
||||
noMenu();
|
||||
var x = document.getElementById("mgplanet");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("cnvbuttons");
|
||||
x.style.display = "grid";
|
||||
var x = document.getElementById("showplanet");
|
||||
x.className = "button:checked";
|
||||
}
|
||||
u
|
||||
|
||||
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;
|
||||
|
|
|
|||
155
webui/index.html
155
webui/index.html
|
|
@ -258,6 +258,7 @@
|
|||
<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>
|
||||
|
|
@ -313,6 +314,7 @@
|
|||
<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>
|
||||
|
|
@ -339,6 +341,11 @@
|
|||
<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>
|
||||
|
||||
|
||||
|
|
@ -359,6 +366,7 @@
|
|||
<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>
|
||||
|
|
@ -367,6 +375,7 @@
|
|||
<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>
|
||||
|
|
@ -544,24 +553,102 @@
|
|||
|
||||
<!--
|
||||
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>
|
||||
<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>
|
||||
<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" >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)
|
||||
{
|
||||
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