lapin/LJ
1
0
Fork 0
forked from protonphoton/LJ
Code Issues Pull Requests 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
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.

6
webui/LJ.js
View File

@ -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);
}

2
webui/LJgrid.css
View File

@ -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
View File

@ -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