protonphoton/LJ
7
0
Fork 1
Code Issues Pull Requests 2 Releases Wiki Activity

Nozoid WebUI

Browse Source
This commit is contained in:
nrhck 2019-02-11 00:31:24 +01:00
parent 6ae38061a5
commit 770e178513
4 changed files with 218 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
clients/planetarium/Readme.txt
View File

@ -2,14 +2,16 @@ Multi Laser planetarium in python3 for LJ.
v0.01 v0.01
Sam Neurohack 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 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 : It's an alpha release so a little hardcoded :
- set observer position (find SkyCity, SkyCountryCode) in main.py like 'Paris' and 'FR' - 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 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 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,... 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 : To install :
go3.sh Install LJ first.
go3.sh install required python3 modules
NB : NB :
- if you get an year error out of range : install the last skyfield "python-skyfield" in github. - if you get an year error out of range : install the last skyfield "python-skyfield" in github.

6
webui/LJ.js
View File

@ -69,6 +69,7 @@
var x = document.getElementById("showlive"); var x = document.getElementById("showlive");
x.className = "button:checked"; x.className = "button:checked";
} }
function showNozoid() { function showNozoid() {
noMenu(); noMenu();
var x = document.getElementById("mgnozoid"); var x = document.getElementById("mgnozoid");
@ -76,14 +77,17 @@
var x = document.getElementById("shownozoid"); var x = document.getElementById("shownozoid");
x.className = "button:checked"; x.className = "button:checked";
} }
function showPlanet() { function showPlanet() {
noMenu(); noMenu();
var x = document.getElementById("mgplanet"); 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"); 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); _WS.send("/" + clicked_id);
} }

2
webui/LJgrid.css
View File

@ -39,7 +39,7 @@
.mgalign { .mgalign {
display: grid; display: grid;
height: 400px; height: 400px;
grid-template-columns: 144px 144px 138px 138px 10px; grid-template-columns: 144px 144px 138px 138px 10px 326px;
grid-template-rows: 1Fr; grid-template-rows: 1Fr;
background-color: #151515; background-color: #151515;
border-color: #445; border-color: #445;

155
webui/index.html
View File

@ -258,6 +258,7 @@
<div><webaudio-param id="points/2" link="points/2"></webaudio-param></div> <div><webaudio-param id="points/2" link="points/2"></webaudio-param></div>
<div class="lasertext">kPPS</div> <div class="lasertext">kPPS</div>
<div class="lasertext">Points</div> <div class="lasertext">Points</div>
<div class="spacer"></div> <div class="spacer"></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/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><webaudio-param id="points/3" link="points/3"></webaudio-param></div>
<div class="lasertext">kPPS</div> <div class="lasertext">kPPS</div>
<div class="lasertext">Points</div> <div class="lasertext">Points</div>
<div class="spacer"></div> <div class="spacer"></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/X/3" diameter="60" min="-20" max="20" value="0"></webaudio-knob></div>
@ -339,6 +341,11 @@
<div class="lasertext">Intens.</div> <div class="lasertext">Intens.</div>
</div> </div>
</div> </div>
<div>
<canvas id="aligncanvas" width="336" height="400" style="border-color: #445;border-style:groove;border-width:1px;"></canvas>
</div>
</div> </div>
@ -359,6 +366,7 @@
<div><webaudio-param link="ai/expressivity" value="64"></webaudio-param></div> <div><webaudio-param link="ai/expressivity" value="64"></webaudio-param></div>
<div class="lasertext">Velocity</div> <div class="lasertext">Velocity</div>
<div class="lasertext">Express.</div> <div class="lasertext">Express.</div>
<div class="spacer"></div> <div class="spacer"></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/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><webaudio-param link="ai/beauty" value="64"></webaudio-param></div>
<div class="lasertext">Sens.</div> <div class="lasertext">Sens.</div>
<div class="lasertext">Beauty</div> <div class="lasertext">Beauty</div>
<div class="spacer"></div> <div class="spacer"></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/1" diameter="60" min="1" max="127" value="64"></webaudio-knob></div>
@ -544,24 +553,102 @@
<!-- <!--
Nozoid Nozoid
todo : buttons stop/start, stopX, stop Y
Colors
Curve
--> -->
<div id = "mgnozoid" class="mgnozoid"> <div id = "mgnozoid" class="mgnozoid">
<div> <div>
<span class="lasertext">X</span> <div>
<select> <div>
<option value="LFO1">LFO1</option> <span class="lasertext" >MMO-3</span>
<option value="LFO2">LFO2</option> <webaudio-knob id="mmo3" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob>
<option value="LFO3">LFO3</option>
<option value="LFO4">LFO4</option> </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> </select>
<span class="lasertext">Y</span> </div>
<select> <div>
<option value="LFO1">LFO1</option> <span class="lasertext" >XCURVE LineIN</span>
<option value="LFO2">LFO2</option> <select onclick="buttonClicked(this.value)">
<option value="LFO3">LFO3</option> <option value="x/IN 0">STOP</option>
<option value="LFO4">LFO4</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> </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>
</div> </div>
@ -673,50 +760,66 @@
<!-- <!--
Simulator Point list drawing scripts Simulator Point lists drawing scripts
--> -->
<script type="text/javascript"> <script type="text/javascript">
// Store Reference To The Canvas & Set Context //
var canvas = document.getElementById("canvas"); // Align canvas : store Reference To The Canvas & Set Context
var ctx = canvas.getContext("2d"); //
var lastpoint = { x: 0, y: 0, color: 0};
ctx.clearRect(0,0,400,400); var aligncanvas = document.getElementById("aligncanvas");
var zoom = 0.5; var alignctx = aligncanvas.getContext("2d");
alignctx.clearRect(0,0,400,400);
var mousePosDown = { x: 0, y: 0}; var mousePosDown = { x: 0, y: 0};
var mousePosUp = { x: 0, y: 0 }; var mousePosUp = { x: 0, y: 0 };
var mouseMsgDown = ''; var mouseMsgDown = '';
var mouseMsgUp = ''; 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 }; 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; mouseMsgDown = mousePosDown.x + ' ' + mousePosDown.y;
_WS.showin(mouseMsgDown); _WS.showin(mouseMsgDown);
} }
function MouseUp(evt) function MouseUp(evt)
{ {
mousePosUp = getMousePos(canvas, evt); mousePosUp = getMousePos(aligncanvas, evt);
mouseMsgUp = mousePosUp.x + ' ' + mousePosUp.y; mouseMsgUp = mousePosUp.x + ' ' + mousePosUp.y;
_WS.showin(mouseMsgUp); _WS.showin(mouseMsgUp);
_WS.s.send('/mouse '+mouseMsgDown+' '+mouseMsgUp); _WS.s.send('/mouse '+mouseMsgDown+' '+mouseMsgUp);
_WS.showin('/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. // Todo : laser point will have black points to go from a polyline to another. Need to discard those black points.
function draw() { function draw() {
// Clear Canvas At The Start Of Every Frame // Clear Canvas At The Start Of Every Frame
//ctx.restore //ctx.restore