1187 lines
44 KiB
HTML
1187 lines
44 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Settings Rack</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="apple-mobile-web-app-title" content="Align">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<link rel="apple-touch-startup-image" href="/launch.png">
|
|
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
|
|
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
|
|
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<link rel="stylesheet" href="css/cropper.css">
|
|
<!-- Page specific styles -->
|
|
|
|
<style>
|
|
.container {
|
|
margin: 20px auto;
|
|
max-width: 640px;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<!-- Web audio buttons defaults -->
|
|
<script type="application/javascript" src="webcomponents-lite.js"></script>
|
|
<script type="application/javascript" src="config.js"></script>
|
|
<script>
|
|
WebAudioControlsOptions={
|
|
useMidi:1,
|
|
knobSrc:"knobs/simplegray.png",
|
|
knobSprites:100,
|
|
switchSrc:"knobs/switch_toggle.png",
|
|
sliderSrc:"knobs/sliderblue.png",
|
|
sliderKnobsrc:"knobs/LittePhatty.png",
|
|
}
|
|
</script>
|
|
<script src="webaudio-controls.js"></script>
|
|
<!-- link rel="stylesheet" href="LJgrid.css" / -->
|
|
<link rel="stylesheet" type="text/css" href="selector.min.css">
|
|
<script type="application/javascript" src="selector.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="css/common.css" />
|
|
</head>
|
|
|
|
<body style="background-color:#222;">
|
|
<div class="Rackcontent">
|
|
|
|
|
|
<!--
|
|
Navigation Rack
|
|
-->
|
|
|
|
<div class="content">
|
|
<div class="buttons-7container">
|
|
|
|
<a href="index.html">
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled">
|
|
Index
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="settings.html">
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled">
|
|
Settings
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="auralls.html">
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled">
|
|
Aurora
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="trckr/trckrcam1.html">
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled">
|
|
Lasercam
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="simu.html">
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled">
|
|
Simu
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="webaudiobut">
|
|
<button type="button" class="navled" style="border : #222222 1px;" onclick="onSubmit(this.id)" id="settings/reset" >
|
|
Reset
|
|
</button>
|
|
</div>
|
|
|
|
<a href="status.html">
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled">
|
|
Status
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Display Rack
|
|
-->
|
|
|
|
<div class="content">
|
|
<div class="TopRackGrid">
|
|
|
|
<div>
|
|
<h2 style="margin-bottom: 30px;">
|
|
LJ Settings
|
|
<span class="shade"> </span>
|
|
</h2>
|
|
<webaudio-switch id="on" value="0" tooltip="Switch-B" height="30" width="90" src="knobs/power.png">
|
|
</webaudio-switch>
|
|
</div>
|
|
|
|
<div class="webaudiobut">
|
|
<div align="center" id="line1" class="busled">
|
|
Settings Rack
|
|
</div>
|
|
<div align="center" id="status" class="busled">
|
|
/team/laser
|
|
</div>
|
|
</div>
|
|
|
|
<div class="etherled" style="margin-left: 30px;margin-top: 1px;">
|
|
Stt
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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 class="etherled" style="margin-left: 30px;margin-top: 1px;">
|
|
Ack
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Scene choice Rack
|
|
-->
|
|
|
|
<div class="content">
|
|
<div class="Settingrid">
|
|
|
|
<div>
|
|
<h2>Scene</h2>
|
|
</div>
|
|
|
|
<div class="webaudiobut" align="center" style="width: 83px;">
|
|
<button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="scene/0/start 1" >
|
|
0
|
|
</button>
|
|
</div>
|
|
|
|
<div></div>
|
|
|
|
<div class="webaudiobut" align="center" style="width: 83px;">
|
|
<button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="scene/1/start 1" >
|
|
1
|
|
</button>
|
|
</div>
|
|
|
|
<div></div>
|
|
|
|
<div class="webaudiobut" align="center" style="width: 83px;">
|
|
<button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="scene/2/start 1" >
|
|
2
|
|
</button>
|
|
</div>
|
|
|
|
<div></div>
|
|
|
|
<div class="webaudiobut" align="center" style="width: 83px;">
|
|
<button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="scene/3/start 1" >
|
|
3
|
|
</button>
|
|
</div>
|
|
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div> </div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
Settings Rack
|
|
|
|
<div class="content">
|
|
<div class="Settingrid">
|
|
|
|
<div>
|
|
<h2>Settings</h2>
|
|
</div>
|
|
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled" style="border: 1px solid #222;">
|
|
Lasers
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<select name="settings/lasers" class = "submitalign" onchange = "onSubmit(this.id)" type="text" id="settings/lasers">
|
|
<option value="1" selected>1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
</select>
|
|
</form>
|
|
</div>
|
|
<div class="webaudiobut" align="center" style="width: 83px;">
|
|
<button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="settings/rescan" >
|
|
Rescan
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<select name="settings/debug" class = "submitalign" onchange = "onSubmit(this.id)" type="text" id="settings/debug">
|
|
<option value="0" selected>0</option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
</select>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="webaudiobut">
|
|
<div align="center" class="navled" style="border: 1px solid #222;">
|
|
Debug
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="settings/IP">
|
|
</form>
|
|
</div>
|
|
|
|
<div class="webaudiobut" align="center" style="width: 73px;">
|
|
<button type="button" class="navled" style="border: 1px solid #002020;" onclick="onSubmit(this.id)" id="settings/regen" >
|
|
Regen
|
|
</button>
|
|
</div>
|
|
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div> </div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
|
|
<!--
|
|
Align Rack
|
|
-->
|
|
<div class="content" style="height: 420px">
|
|
|
|
<div class="TextGrid">
|
|
|
|
<div class="mgalign" style="margin-left:0px;">
|
|
|
|
<!--
|
|
Laser 0
|
|
-->
|
|
<div class="laserbox" align="center">
|
|
<!-- IP laser 0 -->
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ip/0">
|
|
</form>
|
|
</div>
|
|
|
|
<!-- engine state 0 -->
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="stt/0">
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Ack 0 -->
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ack/0">
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Laser type
|
|
<div class="spacer" style="height: 10px;"></div>
|
|
<div >
|
|
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<select name="lasertype" class = "submite" onchange = "onSubmit(this.id)" type="text" id="lasertype/0">
|
|
<option value="DS1000" selected>DS1000</option>
|
|
<option value="Luke400">Luke400</option>
|
|
<option value="Spectra">Spectra</option>
|
|
<option value="Fire500">Fire500</option>
|
|
</select>
|
|
</form>
|
|
</div>
|
|
-->
|
|
|
|
<div class="spacer" style="height: 8px;"></div>
|
|
|
|
<div>
|
|
<!-- Align Icons -->
|
|
<webaudio-switch id="grid/0" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/grid.png"></webaudio-switch>
|
|
<!-- Blackout icon -->
|
|
<webaudio-switch id="black/0" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
|
|
<!-- Swap Icons -->
|
|
<webaudio-switch id="swap/X/0" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapx.png"></webaudio-switch>
|
|
<webaudio-switch id="swap/Y/0" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
|
|
</div>
|
|
|
|
|
|
<div class="spacer" style="height: 6px;"></div>
|
|
|
|
<!-- Lasergrid 0 -->
|
|
<div class="lasergridslid">
|
|
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Laser 0 buffer </div>
|
|
<div><webaudio-param id="points/0" link="points/0"></webaudio-param></div>
|
|
<!-- kPPS -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;color: #eee;">kPPS</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="kpps/0" width="128" min="0" max="40000" value="25000" height="24" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobrange.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="kpps/0" link="kpps/0"></webaudio-param></div>
|
|
|
|
<!-- Angle -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Angle</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="angle/0" width="128" height="24" min="0" max="360" value="0" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobyellow.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="angle/0" link="angle/0"></webaudio-param>
|
|
</div>
|
|
|
|
<!-- intensity -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;color: #ddd;">INTENSITY</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="intens/0" width="128" height="24" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknob.png" min="0" max="255" value="255" ></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="intens/0" link="intens/0"></webaudio-param></div>
|
|
|
|
<!-- Red green blue % Intensity for color balancing -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Colors</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="red/0" width="128" height="24" min="0" max="255" value="255" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobred.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="red/0" link="red/0"></webaudio-param>
|
|
</div>
|
|
|
|
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="green/0" width="128" height="24" min="0" max="255" value="255" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobgreen.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="green/0" link="green/0"></webaudio-param>
|
|
</div>
|
|
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="blue/0" width="128" height="24" min="0" max="255" value="255" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknoblue.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="blue/0" link="blue/0"></webaudio-param>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Laser 1
|
|
-->
|
|
<div class="laserbox" align="center">
|
|
<!-- IP laser 1 -->
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ip/1">
|
|
</form>
|
|
</div>
|
|
<!-- engine state 1 -->
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="stt/1">
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Ack 1 -->
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ack/1">
|
|
</form>
|
|
</div>
|
|
|
|
<div class="spacer" style="height: 8px;"></div>
|
|
<div >
|
|
|
|
<!-- Align Icons -->
|
|
<webaudio-switch id="grid/1" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/grid.png"></webaudio-switch>
|
|
<!-- Blackout icon -->
|
|
<webaudio-switch id="black/1" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
|
|
<!-- Swap Icons -->
|
|
<webaudio-switch id="swap/X/1" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapx.png"></webaudio-switch>
|
|
<webaudio-switch id="swap/Y/1" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
|
|
</div>
|
|
<div class="spacer" style="height: 6px;"></div>
|
|
|
|
<!-- Lasergrid 1 -->
|
|
<div class="lasergridslid">
|
|
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Laser 1 buffer </div>
|
|
<div><webaudio-param id="points/1" link="points/1"></webaudio-param></div>
|
|
<!-- kPPS -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;color: #eee;">kPPS</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="kpps/1" width="128" min="0" max="40000" value="25000" height="24" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobrange.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="kpps/1" link="kpps/1"></webaudio-param></div>
|
|
|
|
<!-- Angle -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Angle</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="angle/1" width="128" height="24" min="0" max="360" value="0" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobyellow.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="angle/1" link="angle/1"></webaudio-param>
|
|
</div>
|
|
|
|
<!-- intensity -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;color: #ddd;">INTENSITY</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="intens/1" width="128" height="24" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknob.png" min="0" max="255" value="255" ></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="intens/1" link="intens/1"></webaudio-param></div>
|
|
|
|
|
|
<!-- Red green blue % Intensity for color balancing -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Colors</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="red/1" width="128" height="24" min="0" max="255" value="255" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobred.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="red/1" link="red/1"></webaudio-param>
|
|
</div>
|
|
|
|
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="green/1" width="128" height="24" min="0" max="255" value="255" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobgreen.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="green/1" link="green/1"></webaudio-param>
|
|
</div>
|
|
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="blue/1" width="128" height="24" min="0" max="255" value="255" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknoblue.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="blue/1" link="blue/1"></webaudio-param>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Laser 2
|
|
-->
|
|
<div class="laserbox" align="center">
|
|
<!-- IP laser 2 -->
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ip/2">
|
|
</form>
|
|
</div>
|
|
<!-- engine state 2 -->
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="stt/2">
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Ack 2 -->
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ack/2">
|
|
</form>
|
|
</div>
|
|
|
|
<div class="spacer" style="height: 8px;"></div>
|
|
<div>
|
|
|
|
<!-- Align Icons -->
|
|
<webaudio-switch id="grid/2" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/grid.png"></webaudio-switch>
|
|
|
|
<!-- Blackout icon -->
|
|
<webaudio-switch id="black/2" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
|
|
|
|
<!-- Swap Icons -->
|
|
<webaudio-switch id="swap/X/2" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapx.png"></webaudio-switch>
|
|
<webaudio-switch id="swap/Y/2" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
|
|
</div>
|
|
<div class="spacer" style="height: 6px;"></div>
|
|
|
|
<!-- Lasergrid 2 -->
|
|
<div class="lasergridslid">
|
|
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Laser 2 buffer </div>
|
|
<div><webaudio-param id="points/2" link="points/2"></webaudio-param></div>
|
|
<!-- kPPS -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;color: #eee;">kPPS</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="kpps/2" width="128" min="0" max="40000" value="25000" height="24" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobrange.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="kpps/2" link="kpps/2"></webaudio-param></div>
|
|
|
|
<!-- Angle -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Angle</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="angle/2" width="128" height="24" min="0" max="360" value="0" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobyellow.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="angle/2" link="angle/2"></webaudio-param>
|
|
</div>
|
|
|
|
<!-- intensity -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;color: #ddd;">INTENSITY</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="intens/2" width="128" height="24" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknob.png" min="0" max="255" value="255" ></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="intens/2" link="intens/2"></webaudio-param></div>
|
|
|
|
|
|
<!-- Red green blue % Intensity for color balancing -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Colors</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="red/2" width="128" height="24" min="0" max="255" value="255" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobred.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="red/2" link="red/2"></webaudio-param>
|
|
</div>
|
|
|
|
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="green/2" width="128" height="24" min="0" max="255" value="255" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobgreen.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="green/2" link="green/2"></webaudio-param>
|
|
</div>
|
|
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="blue/2" width="128" height="24" min="0" max="255" value="255" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknoblue.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="blue/2" link="blue/2"></webaudio-param>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Laser 3
|
|
-->
|
|
<div class="laserbox" align="center">
|
|
<!-- IP laser 3 -->
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ip/3">
|
|
</form>
|
|
</div>
|
|
|
|
<!-- engine state 3 -->
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="stt/3">
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Ack 3 -->
|
|
<div>
|
|
<form onsubmit="onSubmit(); return false;">
|
|
<input class = "submite" onchange = "onSubmit(this.id)" type="text" id="ack/3">
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<div class="spacer" style="height: 8px;"></div>
|
|
<div>
|
|
|
|
<!-- Align Icons -->
|
|
<webaudio-switch id="grid/3" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/grid.png"></webaudio-switch>
|
|
|
|
<!-- Blackout icon -->
|
|
<webaudio-switch id="black/3" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/blackout.png"></webaudio-switch>
|
|
|
|
<!-- Swap Icons -->
|
|
<webaudio-switch id="swap/X/3" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapx.png"></webaudio-switch>
|
|
<webaudio-switch id="swap/Y/3" value="0" height="25" width="25" tooltip="Switch-B" src="knobs/swapy.png"></webaudio-switch>
|
|
|
|
</div>
|
|
<div class="spacer" style="height: 6px;"></div>
|
|
|
|
<!-- Lasergrid 3 -->
|
|
<div class="lasergridslid">
|
|
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Laser 3 buffer </div>
|
|
<div><webaudio-param id="points/3" link="points/3"></webaudio-param></div>
|
|
<!-- kPPS -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;color: #eee">kPPS</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="kpps/3" width="128" min="0" max="40000" value="25000" height="24" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobrange.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="kpps/3" link="kpps/3"></webaudio-param></div>
|
|
|
|
|
|
<!-- Angle -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Angle</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="angle/3" width="128" height="24" min="0" max="360" value="0" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobyellow.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="angle/3" link="angle/3"></webaudio-param>
|
|
</div>
|
|
|
|
<!-- intensity -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;color: #ddd;">INTENSITY</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="intens/3" width="128" height="24" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknob.png" min="0" max="255" value="255" ></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="intens/3" link="intens/3"></webaudio-param></div>
|
|
|
|
|
|
<!-- Red green blue % Intensity for color balancing -->
|
|
<div class="lasertext" style="font-size: 2.3ex;font-family:'Bus Led Display Small' !important;">Colors</div>
|
|
<div></div>
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="red/3" width="128" height="24" min="0" max="255" value="255" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobred.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="red/3" link="red/3"></webaudio-param>
|
|
</div>
|
|
|
|
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="green/3" width="128" height="24" min="0" max="255" value="255" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknobgreen.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="green/3" link="green/3"></webaudio-param>
|
|
</div>
|
|
|
|
<div width="128" heigth="24">
|
|
<webaudio-slider id="blue/3" width="128" height="24" min="0" max="255" value="255" src="knobs/hsliderbody5.png" knobsrc="knobs/hsliderknoblue.png"></webaudio-slider>
|
|
</div>
|
|
<div><webaudio-param id="blue/3" link="blue/3"></webaudio-param>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Mapper Rack
|
|
-->
|
|
<div class="content">
|
|
<div class="Rackgrid">
|
|
<div>
|
|
<h2>Mapper</h2>
|
|
</div>
|
|
<div></div>
|
|
<div class="webaudiobut"><webaudio-switch id="noteon 24" value="1" tooltip="Switch-B" height="64" width="64" src="knobs/big0.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="noteon 25" value="0" tooltip="Switch-B" height="64" width="64" src=" knobs/big1.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="noteon 26" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/big2.png"></webaudio-switch></div>
|
|
<div class="webaudiobut"><webaudio-switch id="noteon 27" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/big3.png"></webaudio-switch></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div> </div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Mapper cropper Rack
|
|
-->
|
|
<div class="content" height="640" style="background-image: linear-gradient(174deg, #111,#030303);">
|
|
|
|
<div class="container" height="640" >
|
|
<div>
|
|
<img id="image" src="knobs/picture2.png" alt="Picture">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
Encoders Line
|
|
|
|
# /aurora/radius layernumber radius [0-1]
|
|
# /aurora/rotdirec layer axe direc
|
|
# /aurora/linesize layer value
|
|
# /aurora/rotdirec layer axe direc
|
|
# /aurora/rotspeed layernumber axe speed
|
|
# /aurora/transpeed layernumber axe transpeed
|
|
# /aurora/transamt layernumber axe maxposition
|
|
-->
|
|
|
|
|
|
<!--
|
|
JS
|
|
-->
|
|
|
|
<!-- LJ style WS : A nettoyer ! -->
|
|
|
|
<script type="text/javascript">
|
|
|
|
// green (1) PLAYING / cyan (2) PREPARE / blue (3) IDLE
|
|
let acks = new Array ( "0","PLAYING", "PREPARE", "IDLE");
|
|
|
|
// green (1) ACK / yellow (4) INVALID / orange (5) FULL / (6) no connection
|
|
let stts = new Array ("0", "ACK", "2", "3", "INVALID", "FULL", "no connection");
|
|
|
|
let type = "settings";
|
|
var LJ = websocket_uri
|
|
|
|
var _WS = {
|
|
uri: LJ,
|
|
ws: null,
|
|
|
|
init : function (e) {
|
|
_WS.s = new WebSocket(_WS.uri);
|
|
_WS.s.onopen = function (e) { _WS.onOpen(e); };
|
|
_WS.s.onclose = function (e) { _WS.onClose(e); };
|
|
_WS.s.onmessage = function (e) { _WS.onMessage(e); };
|
|
_WS.s.onerror = function (e) { _WS.onError(e); };
|
|
},
|
|
|
|
onOpen: function () {
|
|
_WS.showstatus("Connected to "+LJ);
|
|
document.getElementById("on").value = 1;
|
|
},
|
|
|
|
onClose: function () {
|
|
_WS.showline1('<span style="color: red;">LJ DISCONNECTED</span> ');
|
|
document.getElementById("on").value = 0;
|
|
document.getElementById("lstt/0").value = 0;
|
|
document.getElementById("lstt/1").value = 0;
|
|
document.getElementById("lstt/2").value = 0;
|
|
document.getElementById("lstt/3").value = 0;
|
|
document.getElementById("lack/0").value = 0;
|
|
document.getElementById("lack/1").value = 0;
|
|
document.getElementById("lack/2").value = 0;
|
|
document.getElementById("lack/3").value = 0;
|
|
},
|
|
|
|
onMessage: function (e) {
|
|
var res = e.data.split(" ");
|
|
//console.log(e.data)
|
|
//console.log(res[0].substring(0,6))
|
|
//console.log(res)
|
|
//console.log(res[0].slice(1))
|
|
var divtext = document.getElementById('status');
|
|
var divtextp = document.getElementById('players');
|
|
|
|
switch (res[0].substring(0,6)) {
|
|
|
|
case "/statu":
|
|
_WS.showline1("connected to "+LJ);
|
|
if (res[2]==="Disconnected"){
|
|
_WS.showstatus(res[1]+" "+'<span style="color: red;">'+ res[2]+'</span> ');
|
|
}
|
|
else{
|
|
_WS.showstatus(res[1]+" "+res[2]);
|
|
}
|
|
break;
|
|
|
|
case "/redst":
|
|
//console.log("red"+res[1]+" "+res[2]);
|
|
_WS.showstatus('<span style="color: red;">'+res[1]+" "+ res[2]+'</span> ');
|
|
break;
|
|
|
|
case "/line1":
|
|
//divtext.innerHTML="connected to "+LJ;
|
|
divtext1.innerHTML=res[1]+" "+res[2];
|
|
break;
|
|
|
|
case "/redline1":
|
|
//divtext.innerHTML="connected to "+LJ;
|
|
divtext1.innerHTML='<span style="color: red;">'+ res[1]+" "+res[2]+'</span>';
|
|
break;
|
|
|
|
case "/lack/":
|
|
//console.log("/lack "+res[1])
|
|
document.getElementById(res[0].slice(1)).value = res[1];
|
|
document.getElementById(res[0].slice(2)).value = acks[res[1]];
|
|
break;
|
|
|
|
case "/lstt/":
|
|
//console.log("/lstt "+res[0].slice(1)+" "+res[0].slice(2))
|
|
document.getElementById(res[0].slice(1)).value = res[1];
|
|
document.getElementById(res[0].slice(2)).value = stts[res[1]];
|
|
break;
|
|
|
|
case "/point":
|
|
if (type === 'settings') {
|
|
//console.log("buffer display"+res[1]);
|
|
document.getElementById(res[0].slice(1)).value = res[1];
|
|
}
|
|
break;
|
|
|
|
case "/simul":
|
|
if (type === 'simu') {
|
|
console.log("simul "+res[1]);
|
|
document.getElementById(res[0].slice(1)).value = res[1];
|
|
}
|
|
break;
|
|
|
|
case "/laser":
|
|
console.log("/laser "+res[1]);
|
|
newlaser(res[1]);
|
|
break;
|
|
|
|
|
|
// /scale/Y/0 38.0625
|
|
case "/scale":
|
|
console.log("/scale laser "+res[0].substring(9,10)+ " axe "+res[0].substring(7,8)+" value "+res[1]);
|
|
UpdateCrop(res[0].substring(0,6), res[0].substring(7,8), res[1]);
|
|
|
|
//cropper.setCropBoxData{"left":-67.10000000000048,"top":13.543124999999971,"width":503.1000000000006,"height":507.9937500000003}
|
|
|
|
//console.log(cropper.getCropBoxData());
|
|
break;
|
|
|
|
// /loffset/Y/0 15372
|
|
case "/loffs":
|
|
console.log("/loffs laser "+res[0].substring(11,12)+" axe "+res[0].substring(9,10)+" value "+res[1]);
|
|
//newlaser(res[1])
|
|
UpdateCrop(res[0].substring(0,6), res[0].substring(9,10), res[1]);
|
|
break;
|
|
|
|
default:
|
|
var element = document.getElementById(res[0].slice(1));
|
|
if(typeof(element) != 'undefined' && element != null){
|
|
console.log("default handler for "+res[0].slice(1)+" "+res[1]);
|
|
document.getElementById(res[0].slice(1)).value = res[1];
|
|
_WS.showstatus(res[0].slice(1)+" "+res[1]);
|
|
} else{
|
|
//console.log("default handler for "+res[0].slice(1)+" "+res[1]+' : does not exist.');
|
|
}
|
|
}
|
|
},
|
|
|
|
onError: function (e) {
|
|
_WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data);
|
|
},
|
|
|
|
showin: function (message) {
|
|
var divtext = document.getElementById('status');
|
|
divtext.innerHTML="";
|
|
divtext.innerHTML= message.toString();
|
|
},
|
|
|
|
showout: function (message) {
|
|
var divtext = document.getElementById('status');
|
|
divtext.innerHTML="";
|
|
divtext.innerHTML= message.toString();
|
|
},
|
|
|
|
showstatus: function (message) {
|
|
var divtext = document.getElementById('status');
|
|
divtext.innerHTML="";
|
|
divtext.innerHTML= message.toString();
|
|
},
|
|
|
|
showline1: function (message) {
|
|
var divtext = document.getElementById('line1');
|
|
divtext.innerHTML="";
|
|
divtext.innerHTML= message.toString();
|
|
},
|
|
|
|
|
|
send: function (message) {
|
|
if (!message.length) {
|
|
alert('Empty message not allowed !');
|
|
} else {
|
|
_WS.showstatus(message);
|
|
_WS.s.send(message);
|
|
}
|
|
},
|
|
|
|
close: function () {
|
|
_WS.showstatus('GOODBYE !');
|
|
_WS.s.close();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('load', _WS.init, false);
|
|
|
|
//
|
|
// Forms submits
|
|
//
|
|
|
|
function onSubmit(clicked_id) {
|
|
var input = document.getElementById(clicked_id);
|
|
console.log("/" + clicked_id + " " + input.value);
|
|
_WS.send("/" + clicked_id + " " + input.value);
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<!--
|
|
web audio encoders scripts
|
|
-->
|
|
|
|
<script type="text/javascript">
|
|
var message="";
|
|
var log=[];
|
|
var knobs = document.getElementsByTagName('webaudio-knob');
|
|
var laser = 0;
|
|
|
|
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 newlaser(id) {
|
|
|
|
console.log("newlaser " +id);
|
|
var laserid = 24+ parseInt(id,10);
|
|
laser = "noteon "+laserid;
|
|
console.log("laser "+laser);
|
|
nolaser();
|
|
|
|
var x = document.getElementById(laser);
|
|
x.value = 1 ;
|
|
//nofx();
|
|
laser = id;
|
|
}
|
|
|
|
function nolaser() {
|
|
//console.log("nolaser")
|
|
var x = document.getElementById("noteon 24");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("noteon 25");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("noteon 26");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("noteon 27");
|
|
x.value = 0 ;
|
|
}
|
|
|
|
function nofx0() {
|
|
console.log("nofx0")
|
|
var x = document.getElementById("aurora/fx/0 ScanH");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/0 ScanV");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/0 Wave");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/0 Circle");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/0 Starfield");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/0 Word");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/fx/0 Trckr");
|
|
x.value = 0 ;
|
|
}
|
|
|
|
function nocolor0() {
|
|
console.log("nocolor0")
|
|
var x = document.getElementById("aurora/color/0 red");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/color/0 yellow");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/color/0 green");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/color/0 blue");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/color/0 cyan");
|
|
x.value = 0 ;
|
|
var x = document.getElementById("aurora/color/0 white");
|
|
x.value = 0 ;
|
|
}
|
|
|
|
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/>";
|
|
}
|
|
|
|
_WS.send("/" + e.target.id + " " + e.target.value);
|
|
|
|
var res = e.target.id.split(" ");
|
|
|
|
// on off
|
|
if (e.target.id === "on" && e.type === "change") {
|
|
window.location.reload();
|
|
}
|
|
|
|
// Go to index
|
|
if (e.target.id === "index" && e.type === "change") {
|
|
window.location.assign("index.html");
|
|
}
|
|
|
|
// Fx
|
|
if (res[0].substring(7,9) === "fx" && e.type === "change") {
|
|
var layer = res[0].substring(10,12);
|
|
nofx0();
|
|
var x = document.getElementById(e.target.id);
|
|
x.value = 1 ;
|
|
_WS.showstatus(e.target.id);
|
|
}
|
|
|
|
// Colors
|
|
if (res[0].substring(7,9) === "co" && e.type === "change") {
|
|
var layer = res[0].substring(13,14);
|
|
console.log(layer)
|
|
nocolor0();
|
|
var x = document.getElementById(e.target.id);
|
|
x.value = 1 ;
|
|
_WS.showstatus(e.target.id);
|
|
}
|
|
|
|
// Lasers
|
|
if (res[0] === "noteon" && e.type === "change") {
|
|
//console.log(e.target.id)
|
|
nolaser();
|
|
var x = document.getElementById(e.target.id);
|
|
x.value = 1 ;
|
|
//cropper.updatecrop
|
|
_WS.showstatus(e.target.id);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script src="cropper.js"></script>
|
|
<script>
|
|
// Use a crop UI as laser area projection modifier inside etherdream space
|
|
|
|
//window.addEventListener('DOMContentLoaded', function () {
|
|
//var image = document.querySelector('#image');
|
|
const canvasize = 420;
|
|
const maxsize = 60;
|
|
const image = document.getElementById('image');
|
|
var minAspectRatio = 0.1;
|
|
var maxAspectRatio = 1.5;
|
|
var cropBoxData = document.querySelector('#cropBoxData');
|
|
var cropper = new Cropper(image, {
|
|
|
|
movable: false,
|
|
zoomable: false,
|
|
rotatable: false,
|
|
scalable: false,
|
|
|
|
crop(event) {
|
|
|
|
// 27000 = 128 * half canvasize (= 210)
|
|
console.log("/loffset/X/"+ laser + " " + ((event.detail.x - (canvasize/2)))*128);
|
|
console.log("/loffset/Y/"+ laser + " " + ((event.detail.y - (canvasize/2)))*-128);
|
|
console.log("/scale/X/"+ laser + " " + (maxsize*event.detail.width/canvasize));
|
|
console.log("/scale/Y/"+ laser + " " + (maxsize*event.detail.height/canvasize));
|
|
_WS.send("/loffset/X/"+ laser + " " + (event.detail.x - (canvasize/2))*128);
|
|
_WS.send("/loffset/Y/"+ laser + " " + ((event.detail.y - (canvasize/2)))*-128);
|
|
_WS.send("/scale/X/"+ laser + " " + (maxsize*event.detail.width/canvasize));
|
|
_WS.send("/scale/Y/"+ laser + " " + (maxsize*event.detail.height/canvasize));
|
|
},
|
|
|
|
cropmove: function () {
|
|
var cropper = this.cropper;
|
|
var cropBoxData = cropper.getCropBoxData();
|
|
var aspectRatio = cropBoxData.width / cropBoxData.height;
|
|
|
|
if (aspectRatio < minAspectRatio) {
|
|
cropper.setCropBoxData({
|
|
width: cropBoxData.height * minAspectRatio
|
|
});
|
|
} else if (aspectRatio > maxAspectRatio) {
|
|
cropper.setCropBoxData({
|
|
width: cropBoxData.height * maxAspectRatio
|
|
});
|
|
}
|
|
},
|
|
|
|
});
|
|
|
|
|
|
//});
|
|
</script>
|
|
<script type="text/javascript">
|
|
|
|
// laser -> UI
|
|
function UpdateCrop(param, axe, value) {
|
|
|
|
console.log('UpdateCrop');
|
|
console.log('new param '+param+ " for axe "+axe+" value "+Number(value));
|
|
|
|
var cropParameters = cropper.getData(true);
|
|
|
|
console.log('Current croparameters : x ' + cropParameters.x+ ' y '+ cropParameters.y+ ' width '+cropParameters.width+ ' height '+cropParameters.height);
|
|
|
|
// /scale/Y/0 38.0625
|
|
if (param === "/scale") {
|
|
if (axe === "X") {
|
|
cropParameters.width = value * canvasize / maxsize;
|
|
};
|
|
};
|
|
if (param === "/scale") {
|
|
if (axe === "Y") {
|
|
cropParameters.height = value * canvasize / maxsize;
|
|
};
|
|
};
|
|
|
|
// /loffset/Y/0 15372
|
|
if (param === "/loffs") {
|
|
if (axe === "X") {
|
|
cropParameters.x = (canvasize/2) + (value/128);
|
|
};
|
|
};
|
|
if (param === "/loffs") {
|
|
if (axe === "Y") {
|
|
cropParameters.y = (canvasize/2) + (value/-128);
|
|
};
|
|
};
|
|
|
|
console.log('New croparameters : x ' + cropParameters.x+ ' y '+ cropParameters.y+ ' width '+cropParameters.width+ ' height '+cropParameters.height);
|
|
|
|
|
|
cropper.setCropBoxData( cropParameters );
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|