Lighting GUI complete
Able to store swatches of colors in active memory and apply to steps in the sequencer
This commit is contained in:
Matt
parent
d7414d9b7f
commit
3006e2e706
176
app/css/app.css
176
app/css/app.css
|
|
@ -39,6 +39,11 @@ footer {
|
|||
#light-status {
|
||||
width: 388px;
|
||||
float: right;
|
||||
margin-top: -25px;
|
||||
}
|
||||
#light-status h3 {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
#light-status > div {
|
||||
position: relative;
|
||||
|
|
@ -60,9 +65,84 @@ footer {
|
|||
}
|
||||
#light-status form input[type=text] {
|
||||
width: 40px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
#preview {
|
||||
margin-top: 40px;
|
||||
#light-swatches {
|
||||
width: 100%;
|
||||
}
|
||||
#light-swatches .swatch {
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
#light-swatches .swatch.default {
|
||||
border-color: #9ecaed;
|
||||
box-shadow: 0 0 10px #9ecaed;
|
||||
}
|
||||
#light-swatches #new-swatch {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
border: 1px solid #ffffff;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 3px;
|
||||
box-sizing: border-box;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
position: relative;
|
||||
opacity: 0.25;
|
||||
}
|
||||
#light-swatches #new-swatch:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
#light-swatches #new-swatch:active {
|
||||
opacity: 1;
|
||||
}
|
||||
#light-swatches #new-swatch i {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
#w2ui-popup .swatch {
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
#w2ui-popup .swatch.default {
|
||||
border-color: #9ecaed;
|
||||
box-shadow: 0 0 10px #9ecaed;
|
||||
}
|
||||
#w2ui-popup #new-swatch {
|
||||
display: none;
|
||||
}
|
||||
#preview-wrap {
|
||||
margin-top: 140px;
|
||||
}
|
||||
#preview-wrap h4 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
margin-left: 123px;
|
||||
margin-right: 10px;
|
||||
width: 81px;
|
||||
height: 30px;
|
||||
}
|
||||
#preview-wrap h4 span {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
position: absolute;
|
||||
}
|
||||
#rgb {
|
||||
border: 0;
|
||||
|
|
@ -120,32 +200,53 @@ footer {
|
|||
#seq_scroll > div > div > div input {
|
||||
float: none;
|
||||
}
|
||||
#seq_scroll > div > div > div > div {
|
||||
font-size: 8px;
|
||||
#numbers div {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
color: #dcdcdc;
|
||||
}
|
||||
#actions {
|
||||
padding: 20px 0 0 55px;
|
||||
padding: 8px 0 0 55px;
|
||||
}
|
||||
#actions input[type=number] {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 2px solid #fff;
|
||||
color: #fff;
|
||||
padding: 6px;
|
||||
border-radius: 5px;
|
||||
float: right;
|
||||
width: 90px;
|
||||
margin-right: 60px;
|
||||
}
|
||||
#seq_stats {
|
||||
width: 40%;
|
||||
width: 50%;
|
||||
float: right;
|
||||
padding: 20px;
|
||||
margin-top: 57px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
#seq_stats h3 {
|
||||
font-size: 20px;
|
||||
margin: 12px 0 3px;
|
||||
}
|
||||
#seq_stats span {
|
||||
font-weight: 600;
|
||||
float: right;
|
||||
}
|
||||
#seq_loop {
|
||||
width: 40%;
|
||||
float: left;
|
||||
padding: 0 28px;
|
||||
}
|
||||
#seq_loop h3 {
|
||||
font-size: 20px;
|
||||
margin: 12px 0 3px;
|
||||
}
|
||||
#seq_loop input {
|
||||
font-family: monospace;
|
||||
font-size: 23px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #fff;
|
||||
font-size: 21px;
|
||||
width: 121px;
|
||||
padding: 12px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
|
|
@ -177,9 +278,8 @@ button:focus {
|
|||
}
|
||||
#sequence {
|
||||
width: 970px;
|
||||
padding-bottom: 25px;
|
||||
padding-bottom: 21px;
|
||||
padding-left: 70px;
|
||||
height: 230px;
|
||||
}
|
||||
#sequence #cam_forward,
|
||||
#sequence #proj_forward,
|
||||
|
|
@ -190,7 +290,6 @@ button:focus {
|
|||
#sequence #proj_forward input[type=checkbox],
|
||||
#sequence #black_forward input[type=checkbox] {
|
||||
border: 1px solid #00C4A0;
|
||||
margin-right: 3px;
|
||||
}
|
||||
#sequence #cam_forward input[type=checkbox]:checked,
|
||||
#sequence #proj_forward input[type=checkbox]:checked,
|
||||
|
|
@ -211,7 +310,6 @@ button:focus {
|
|||
#sequence #proj_backward input[type=checkbox],
|
||||
#sequence #black_backward input[type=checkbox] {
|
||||
border: 1px solid #AB1A25;
|
||||
margin-right: 3px;
|
||||
}
|
||||
#sequence #cam_backward input[type=checkbox]:checked,
|
||||
#sequence #proj_backward input[type=checkbox]:checked,
|
||||
|
|
@ -223,23 +321,36 @@ button:focus {
|
|||
#sequence #black_backward > div {
|
||||
color: #AB1A25;
|
||||
}
|
||||
#sequence #cam_backward {
|
||||
margin-top: 15px;
|
||||
}
|
||||
#sequence input[type=checkbox] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
margin: 0;
|
||||
margin-bottom: 3px;
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
#sequence .L {
|
||||
display: inline-block;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 35px;
|
||||
margin: 0;
|
||||
margin-bottom: 3px;
|
||||
margin-right: 3px;
|
||||
border: 1px solid #fff;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
#sequence .L.a {
|
||||
opacity: 1;
|
||||
}
|
||||
#sequence input.h {
|
||||
border-color: #DAE035 !important;
|
||||
|
|
@ -255,10 +366,35 @@ button:focus {
|
|||
color: #fff;
|
||||
font-family: monospace;
|
||||
float: left;
|
||||
margin: 3px;
|
||||
margin-right: 3px;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#sequence #numbers > div.h {
|
||||
color: #DAE035;
|
||||
opacity: 1;
|
||||
}
|
||||
#seq_labels {
|
||||
font-family: monospace;
|
||||
background-color: #272b30;
|
||||
position: absolute;
|
||||
top: 128px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 15px;
|
||||
width: 54px;
|
||||
}
|
||||
#seq_labels div {
|
||||
height: 43px;
|
||||
line-height: 35px;
|
||||
}
|
||||
#seq_labels span {
|
||||
text-indent: 7px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.spacer {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.cp-app {
|
||||
position: relative !important;
|
||||
border-radius: 0px !important;
|
||||
|
|
|
|||
192
app/css/app.less
192
app/css/app.less
|
|
@ -8,6 +8,8 @@
|
|||
@SEQ: #3C3636;
|
||||
@SCRIPT: rgb(39, 40, 34);
|
||||
|
||||
@INPUT_BG : rgba(255, 255, 255, 0.05);
|
||||
|
||||
.monospace () {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
|
@ -85,6 +87,11 @@ footer{
|
|||
#light-status{
|
||||
width: 388px;
|
||||
float: right;
|
||||
margin-top: -25px;
|
||||
h3{
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
>div{
|
||||
position: relative;
|
||||
clear: both;
|
||||
|
|
@ -104,11 +111,91 @@ footer{
|
|||
}
|
||||
input[type=text]{
|
||||
width: 40px;
|
||||
background: @INPUT_BG;
|
||||
color: @COMMON;
|
||||
border: 1px solid @COMMON;
|
||||
}
|
||||
}
|
||||
}
|
||||
#light-swatches{
|
||||
width: 100%;
|
||||
.swatch{
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #fff;
|
||||
&.default{
|
||||
border-color: #9ecaed;
|
||||
box-shadow: 0 0 10px #9ecaed;
|
||||
}
|
||||
}
|
||||
#new-swatch{
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
border: 1px solid rgb(255, 255, 255);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 3px;
|
||||
box-sizing: border-box;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
position: relative;
|
||||
opacity: 0.25;
|
||||
&:hover{
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:active{
|
||||
opacity: 1;
|
||||
}
|
||||
i{
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
#w2ui-popup{
|
||||
.swatch{
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #fff;
|
||||
&.default{
|
||||
border-color: #9ecaed;
|
||||
box-shadow: 0 0 10px #9ecaed;
|
||||
}
|
||||
}
|
||||
#new-swatch{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#preview-wrap{
|
||||
margin-top: 140px;
|
||||
h4{
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
margin-left: 123px;
|
||||
margin-right: 10px;
|
||||
width: 81px;
|
||||
height: 30px;
|
||||
span{
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
#preview{
|
||||
margin-top: 40px;
|
||||
//margin-top: 40px;
|
||||
}
|
||||
#rgb{
|
||||
border: 0;
|
||||
|
|
@ -135,7 +222,7 @@ footer{
|
|||
display: block;
|
||||
}
|
||||
input{
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: @INPUT_BG;
|
||||
color: @COMMON;
|
||||
padding: 6px 12px;
|
||||
font-size: 21px;
|
||||
|
|
@ -163,22 +250,36 @@ footer{
|
|||
input{
|
||||
float: none;
|
||||
}
|
||||
>div{
|
||||
font-size: 8px;
|
||||
text-align: center;
|
||||
|
||||
color: rgb(220, 220, 220);
|
||||
}
|
||||
}
|
||||
}
|
||||
#numbers{
|
||||
div{
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
color: rgb(220, 220, 220);
|
||||
}
|
||||
}
|
||||
#actions{
|
||||
padding: 20px 0 0 55px;
|
||||
padding: 8px 0 0 55px;
|
||||
input[type=number] {
|
||||
background: @INPUT_BG;
|
||||
border: 2px solid @COMMON;
|
||||
color: @COMMON;
|
||||
padding: 6px;
|
||||
border-radius: 5px;
|
||||
float: right;
|
||||
width: 90px;
|
||||
margin-right: 60px;
|
||||
}
|
||||
}
|
||||
#seq_stats{
|
||||
width: 40%;
|
||||
width: 50%;
|
||||
float: right;
|
||||
padding: 20px;
|
||||
margin-top: 57px;
|
||||
padding: 0 20px;
|
||||
h3{
|
||||
font-size: 20px;
|
||||
margin: 12px 0 3px;
|
||||
}
|
||||
span{
|
||||
font-weight: 600;
|
||||
float: right;
|
||||
|
|
@ -187,12 +288,20 @@ footer{
|
|||
}
|
||||
}
|
||||
#seq_loop{
|
||||
width: 40%;
|
||||
float: left;
|
||||
padding: 0 28px;
|
||||
h3{
|
||||
font-size: 20px;
|
||||
margin: 12px 0 3px;
|
||||
}
|
||||
input{
|
||||
.monospace();
|
||||
font-size: 23px;
|
||||
background: @INPUT_BG;
|
||||
color: @COMMON;
|
||||
font-size: 21px;
|
||||
width: 121px;
|
||||
padding: 12px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
button{
|
||||
|
|
@ -207,16 +316,14 @@ button{
|
|||
}
|
||||
#sequence{
|
||||
width: 970px;
|
||||
padding-bottom: 25px;
|
||||
padding-bottom: 21px;
|
||||
padding-left: 70px;
|
||||
height: 230px;
|
||||
#cam_forward,
|
||||
#proj_forward,
|
||||
#black_forward{
|
||||
clear: both;
|
||||
input[type=checkbox]{
|
||||
border: 1px solid @FORWARD;
|
||||
margin-right: 3px;
|
||||
&:checked{
|
||||
background: @FORWARD;
|
||||
//background: radial-gradient(circle at 25px 25px, #00C4A0, #343434);
|
||||
|
|
@ -232,7 +339,6 @@ button{
|
|||
clear: both;
|
||||
input[type=checkbox]{
|
||||
border: 1px solid @BACKWARD;
|
||||
margin-right: 3px;
|
||||
&:checked{
|
||||
background: @BACKWARD;
|
||||
//background: radial-gradient(circle at 25px 25px, #AB1A25, #343434);
|
||||
|
|
@ -242,23 +348,36 @@ button{
|
|||
color: @BACKWARD;
|
||||
}
|
||||
}
|
||||
#cam_backward{
|
||||
margin-top: 15px;
|
||||
}
|
||||
input[type=checkbox]{
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
margin: 0;
|
||||
margin-bottom: 3px;
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
.L{
|
||||
display: inline-block;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 35px;
|
||||
margin: 0;
|
||||
margin-bottom: 3px;
|
||||
margin-right: 3px;
|
||||
border: 1px solid @COMMON;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
&.a{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
input.h{
|
||||
//background: @SELECTED !important;
|
||||
|
|
@ -274,12 +393,37 @@ button{
|
|||
color: @COMMON;
|
||||
font-family: monospace;
|
||||
float: left;
|
||||
margin: 3px;
|
||||
margin-right: 3px;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
&.h{
|
||||
color: @SELECTED;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#seq_labels{
|
||||
.monospace();
|
||||
background-color: #272b30;
|
||||
position: absolute;
|
||||
top: 128px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 15px;
|
||||
width: 54px;
|
||||
div{
|
||||
height: 43px;
|
||||
line-height: 35px;
|
||||
}
|
||||
span{
|
||||
text-indent: 7px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.spacer{
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.cp-app{
|
||||
position: relative !important;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ var gulp = require('gulp'),
|
|||
var scripts = [
|
||||
'./src/jquery-1.11.3.min.js',
|
||||
'./src/jquery-electron-fix.js',
|
||||
'./src/jquery.contextMenu.min.js',
|
||||
'./src/w2ui-1.4.3.min.js',
|
||||
'./src/moment.min.js',
|
||||
'./src/colors.js',
|
||||
|
|
|
|||
|
|
@ -16,22 +16,39 @@
|
|||
<div id="counters">
|
||||
<div class="cam">
|
||||
<label>CAMERA</label>
|
||||
<input type="number" id="seq_cam_count" class="count" value="00000" onchange="mcopy.gui.trad.counterFormat(this, mcopy.state.camera.pos);" onblur="mcopy.gui.trad.updateCam(this);" />
|
||||
<input type="number" id="seq_cam_count" class="count" value="00000" onchange="gui.counterFormat(this, mcopy.state.camera.pos);" onblur="gui.updateCam(this);" />
|
||||
</div>
|
||||
<div class="proj">
|
||||
<label>PROJECTOR</label>
|
||||
<input type="number" id="seq_proj_count" class="count" value="00000" onchange="mcopy.gui.trad.counterFormat(this, mcopy.state.projector.pos);" onblur="mcopy.gui.trad.updateProj(this);" />
|
||||
<input type="number" id="seq_proj_count" class="count" value="00000" onchange="gui.counterFormat(this, mcopy.state.projector.pos);" onblur="gui.updateProj(this);" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="seq_scroll">
|
||||
<div id="sequence">
|
||||
<div id="cam_forward" class="row" y="0"></div>
|
||||
<div id="proj_forward" class="row" y="1"></div>
|
||||
<div id="black_forward" class="row" y="2"></div>
|
||||
<div id="cam_backward" class="row" y="0"></div>
|
||||
<div id="cam_backward" class="row spacer" y="0"></div>
|
||||
<div id="proj_backward" class="row" y="1"></div>
|
||||
<div id="black_backward" class="row" y="2"></div>
|
||||
<div id="light_set" class="row spacer"></div>
|
||||
<div id="numbers" class="row"></div>
|
||||
</div>
|
||||
<div id="seq_labels">
|
||||
<div><span>CAM </span><i class="fa fa-plus"></i></div>
|
||||
<div><span>PRO </span><i class="fa fa-plus"></i></div>
|
||||
|
||||
<div class="spacer"><span>CAM </span><i class="fa fa-minus"></i></div>
|
||||
<div><span>PRO </span><i class="fa fa-minus"></i></div>
|
||||
|
||||
<div class="spacer"><span>LIGHT</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="actions">
|
||||
<button id="seq_run" onclick="seq.init();">RUN</button>
|
||||
<button id="seq_stop" onclick="seq.stop(true);">STOP</button>
|
||||
<button id="seq_clear" onclick="gui.grid.clear();">CLEAR</button>
|
||||
<button id="seq_plus24" onclick="gui.grid.plus_24();">+ 24</button>
|
||||
<button id="seq_mscript" onclick="gui.mscript.generate(mcopy.state.sequence.arr);">TO SCRIPT</button>
|
||||
<input id="seq_scroll_state" type="number" min="0" value="00000" />
|
||||
</div>
|
||||
<div id="seq_stats">
|
||||
<h3>STATS</h3>
|
||||
|
|
@ -40,16 +57,9 @@
|
|||
<div class="cam_end">Camera end position: <span>00000</span></div>
|
||||
<div class="proj_end">Projector end position: <span>00000</span></div>
|
||||
</div>
|
||||
<div id="actions">
|
||||
<button id="seq_run" onclick="mcopy.seq.init();">RUN</button>
|
||||
<button id="seq_stop" onclick="mcopy.seq.stop(true);">STOP</button>
|
||||
<button id="seq_clear" onclick="mcopy.gui.grid.clear();">CLEAR</button>
|
||||
<button id="seq_plus24" onclick="mcopy.gui.grid.plus_24();">+ 24</button>
|
||||
<button id="seq_mscript" onclick="mcopy.gui.mscript.generate(mcopy.state.sequence.arr);">TO SCRIPT</button>
|
||||
</div>
|
||||
<div id="seq_loop">
|
||||
<h3>LOOPS</h3>
|
||||
<input type="number" min="1" id="seq_loop" value="00001" onchange="this.value = mcopy.fmtZero(this.value, 6); mcopy.gui.grid.loopChange(this);"/>
|
||||
<input type="number" min="1" id="seq_loop" value="00001" onchange="this.value = gui.fmtZero(this.value, 6); gui.grid.loopChange(this);"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="script" class="screen"></div>
|
||||
|
|
@ -66,17 +76,25 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="light-status">
|
||||
<h3>LIGHT STATUS</h3>
|
||||
<div>
|
||||
<form>
|
||||
<span>R</span><input type="text" value="0"/><br />
|
||||
<span>G</span><input type="text" value="0"/><br />
|
||||
<span>B</span><input type="text" value="0"/>
|
||||
<span>R</span><input type="text" value="0" readonly /><br />
|
||||
<span>G</span><input type="text" value="0" readonly /><br />
|
||||
<span>B</span><input type="text" value="0" readonly />
|
||||
</form>
|
||||
<div id="color"></div>
|
||||
</div>
|
||||
Preview
|
||||
<input type="checkbox" name="preview" id="preview" class="effeckt-ckbox-ios7" />
|
||||
<div id="preview-wrap">
|
||||
<h4><span>PREVIEW</span></h4>
|
||||
<input type="checkbox" name="preview" id="preview" class="effeckt-ckbox-ios7" />
|
||||
</div>
|
||||
</div>
|
||||
<footer id="light-swatches">
|
||||
<div id="new-swatch">
|
||||
<i class="fa fa-plus"></i>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./js/app.js"></script>
|
||||
|
|
|
|||
668
app/js/app.js
668
app/js/app.js
File diff suppressed because one or more lines are too long
173
app/main.js
173
app/main.js
|
|
@ -1,6 +1,8 @@
|
|||
var electron = require('electron'),
|
||||
fs = require('fs'),
|
||||
Menu = require('menu'),
|
||||
MenuItem = require('menu-item'),
|
||||
notifier = require('node-notifier'),
|
||||
ipcMain = require('electron').ipcMain,
|
||||
app = electron.app,
|
||||
BrowserWindow = electron.BrowserWindow,
|
||||
|
|
@ -32,7 +34,9 @@ var init = function () {
|
|||
'use strict';
|
||||
mcopy.cfgInit();
|
||||
createWindow();
|
||||
//createMenu();
|
||||
log.init();
|
||||
light.init();
|
||||
arduino = require('./lib/mcopy-arduino.js')(mcopy.cfg);
|
||||
setTimeout(function () {
|
||||
arduino.init(function (err, device) {
|
||||
|
|
@ -52,14 +56,144 @@ var init = function () {
|
|||
};
|
||||
|
||||
var createMenu = function () {
|
||||
var template = [
|
||||
{
|
||||
label: 'mcopy',
|
||||
submenu: [
|
||||
{
|
||||
label: 'About mcopy',
|
||||
selector: 'orderFrontStandardAboutPanel:'
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Services',
|
||||
submenu: []
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Hide mcopy',
|
||||
accelerator: 'Command+H',
|
||||
selector: 'hide:'
|
||||
},
|
||||
{
|
||||
label: 'Hide Others',
|
||||
accelerator: 'Command+Shift+H',
|
||||
selector: 'hideOtherApplications:'
|
||||
},
|
||||
{
|
||||
label: 'Show All',
|
||||
selector: 'unhideAllApplications:'
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
accelerator: 'Command+Q',
|
||||
selector: 'terminate:'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Undo',
|
||||
accelerator: 'Command+Z',
|
||||
selector: 'undo:'
|
||||
},
|
||||
{
|
||||
label: 'Redo',
|
||||
accelerator: 'Shift+Command+Z',
|
||||
selector: 'redo:'
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Cut',
|
||||
accelerator: 'Command+X',
|
||||
selector: 'cut:'
|
||||
},
|
||||
{
|
||||
label: 'Copy',
|
||||
accelerator: 'Command+C',
|
||||
selector: 'copy:'
|
||||
},
|
||||
{
|
||||
label: 'Paste',
|
||||
accelerator: 'Command+V',
|
||||
selector: 'paste:'
|
||||
},
|
||||
{
|
||||
label: 'Select All',
|
||||
accelerator: 'Command+A',
|
||||
selector: 'selectAll:'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'View',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Reload',
|
||||
accelerator: 'Command+R',
|
||||
click: function() { getCurrentWindow().reload(); }
|
||||
},
|
||||
{
|
||||
label: 'Toggle DevTools',
|
||||
accelerator: 'Alt+Command+I',
|
||||
click: function() { getCurrentWindow().toggleDevTools(); }
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Window',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Minimize',
|
||||
accelerator: 'Command+M',
|
||||
selector: 'performMiniaturize:'
|
||||
},
|
||||
{
|
||||
label: 'Close',
|
||||
accelerator: 'Command+W',
|
||||
selector: 'performClose:'
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Bring All to Front',
|
||||
selector: 'arrangeInFront:'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Help',
|
||||
submenu: []
|
||||
}
|
||||
];
|
||||
|
||||
menu = Menu.buildFromTemplate(template);
|
||||
|
||||
Menu.setApplicationMenu(menu);
|
||||
};
|
||||
|
||||
var createWindow = function () {
|
||||
'use strict';
|
||||
mainWindow = new BrowserWindow({width: 800, height: 600});
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
minWidth : 800,
|
||||
minHeight : 600
|
||||
});
|
||||
mainWindow.loadURL('file://' + __dirname + '/index.html');
|
||||
//mainWindow.webContents.openDevTools();
|
||||
mainWindow.webContents.openDevTools();
|
||||
mainWindow.on('closed', function() {
|
||||
mainWindow = null;
|
||||
});
|
||||
|
|
@ -68,9 +202,9 @@ var createWindow = function () {
|
|||
app.on('ready', init);
|
||||
|
||||
app.on('window-all-closed', function () {
|
||||
if (process.platform !== 'darwin') {
|
||||
//if (process.platform !== 'darwin') {
|
||||
app.quit();
|
||||
}
|
||||
//}
|
||||
});
|
||||
|
||||
app.on('activate', function () {
|
||||
|
|
@ -79,23 +213,30 @@ app.on('activate', function () {
|
|||
}
|
||||
});
|
||||
|
||||
ipcMain.on('light', function(event, arg) {
|
||||
light.set(arg);
|
||||
event.returnValue = true;
|
||||
});
|
||||
|
||||
var light = {};
|
||||
|
||||
light.set = function (rgb) {
|
||||
light.init = function () {
|
||||
'use strict';
|
||||
var str = rgb.join(','),
|
||||
deferred = Q.defer();
|
||||
light.listen();
|
||||
};
|
||||
light.listen = function () {
|
||||
'use strict';
|
||||
ipcMain.on('light', function(event, arg) {
|
||||
light.set(arg.rgb, arg.id);
|
||||
event.returnValue = true;
|
||||
});
|
||||
};
|
||||
light.set = function (rgb, id) {
|
||||
'use strict';
|
||||
var str = rgb.join(',');
|
||||
arduino.send(mcopy.cfg.arduino.cmd.light, function () {
|
||||
log.info('Light set to ' + str, 'LIGHT', true, true);
|
||||
return deferred.resolve(mcopy.cfg.arduino.cmd.light);
|
||||
light.end(rgb, id);
|
||||
});
|
||||
arduino.string(str);
|
||||
return deferred.promise;
|
||||
};
|
||||
light.end = function (rgb, id) {
|
||||
'use strict';
|
||||
log.info('Light set to ' + rgb.join(','), 'LIGHT', true, true);
|
||||
mainWindow.webContents.send('light', {rgb: rgb, id : id});
|
||||
};
|
||||
|
||||
var log = {};
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"description": "16mm optical printer",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"start": "electron main.js"
|
||||
"start": "gulp && electron main.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -31,6 +31,7 @@
|
|||
"gulp-less": "^3.0.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"humanize-duration": "^3.7.0",
|
||||
"moment": "^2.12.0",
|
||||
"node-notifier": "^4.5.0",
|
||||
"node-uuid": "^1.4.7",
|
||||
|
|
|
|||
649
app/src/index.js
649
app/src/index.js
|
|
@ -1,10 +1,14 @@
|
|||
var remote = require('remote'),
|
||||
dialog = require('electron').remote.dialog,
|
||||
fs = require('fs'),
|
||||
uuid = require('node-uuid'),
|
||||
moment = require('moment'),
|
||||
humanizeDuration = require('humanize-duration')
|
||||
ipcRenderer = require('electron').ipcRenderer,
|
||||
mcopy = {},
|
||||
light = {},
|
||||
nav = {},
|
||||
seq = {},
|
||||
gui = {},
|
||||
log = {};
|
||||
//console.log(ipcRenderer.sendSync('light', { 'fuck' : true }) );
|
||||
|
|
@ -15,7 +19,7 @@ mcopy.cfg = JSON.parse(fs.readFileSync('./data/cfg.json'), 'utf8');
|
|||
State shared by ALL interfaces
|
||||
*******/
|
||||
mcopy.state = {
|
||||
version : 'alpha', //use for file compatibility check
|
||||
version : '2.0.0', //use for file compatibility check
|
||||
camera : {
|
||||
pos : 0,
|
||||
direction: true
|
||||
|
|
@ -27,6 +31,7 @@ mcopy.state = {
|
|||
sequence : {
|
||||
size : 24,
|
||||
arr : ['CF', 'PF'],
|
||||
light : ['255,255,255', ''],
|
||||
cmd : {
|
||||
camera: mcopy.cfg.arduino.cmd.camera,
|
||||
projector: mcopy.cfg.arduino.cmd.projector,
|
||||
|
|
@ -40,7 +45,9 @@ mcopy.state = {
|
|||
|
||||
cam_backward: 'CB',
|
||||
proj_backward : 'PB',
|
||||
black_backward : 'BB'
|
||||
black_backward : 'BB',
|
||||
|
||||
light_set : 'L'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -101,38 +108,336 @@ log.info = function (action, service, status, time) {
|
|||
console.log(obj);
|
||||
};
|
||||
|
||||
/******
|
||||
Sequence Object
|
||||
*******/
|
||||
seq.i = 0;
|
||||
mcopy.loop = 1;
|
||||
mcopy.loopCount = 0;
|
||||
mcopy.seq_time = 0;
|
||||
seq.stopState = false;
|
||||
seq.run = function () {
|
||||
var cmd = mcopy.state.sequence.arr[seq.i],
|
||||
action = function () {
|
||||
setTimeout(function () {
|
||||
seq.i++;
|
||||
seq.run();
|
||||
}, mcopy.cfg.arduino.sequenceDelay);
|
||||
},
|
||||
timeEnd = 0;
|
||||
if (seq.stop()) {
|
||||
$('.row input').removeClass('h');
|
||||
console.log('Sequence stepped');
|
||||
return false;
|
||||
}
|
||||
if (seq.i <= mcopy.state.sequence.arr.length && cmd !== undefined) {
|
||||
console.log('Sequence step ' + seq.i + ' command ' + cmd + '...');
|
||||
//gui action
|
||||
$('.row input').removeClass('h');
|
||||
$('.row input[x=' + seq.i + ']').addClass('h');
|
||||
$('#numbers div[x=' + seq.i + ']').addClass('h');
|
||||
/*if (cmd === 'CF'){
|
||||
mcopy.cmd.cam_forward(action);
|
||||
} else if (cmd === 'CB') {
|
||||
mcopy.cmd.cam_backward(action);
|
||||
} else if (cmd === 'PF') {
|
||||
mcopy.cmd.proj_forward(action);
|
||||
} else if (cmd === 'PB') {
|
||||
mcopy.cmd.proj_backward(action);
|
||||
} else if (cmd === 'BF') {
|
||||
mcopy.cmd.black_forward(action);
|
||||
} else if (cmd === 'BB') {
|
||||
mcopy.cmd.black_backward(action);
|
||||
}*/
|
||||
} else {
|
||||
mcopy.loopCount++;
|
||||
if (mcopy.loopCount < mcopy.loop) {
|
||||
console.log('Loop ' + mcopy.loopCount + ' completed!');
|
||||
$('.row input').removeClass('h');
|
||||
seq.i = 0;
|
||||
seq.run();
|
||||
} else {
|
||||
console.log('Sequence completed!');
|
||||
timeEnd = +new Date();
|
||||
timeEnd = timeEnd - mcopy.seq_time;
|
||||
setTimeout(function () {
|
||||
if (timeEnd < 2000) {
|
||||
console.log('Sequence took ' + timeEnd + 'ms');
|
||||
} else {
|
||||
console.log('Sequence took ' + humanizeDuration(timeEnd));
|
||||
}
|
||||
}, 500);
|
||||
//clear gui
|
||||
$('.row input').removeClass('h');
|
||||
$('#numbers div').removeClass('h');
|
||||
seq.stats();
|
||||
}
|
||||
}
|
||||
};
|
||||
seq.stop = function (state) {
|
||||
if (typeof state === 'undefined') {
|
||||
return seq.stopState;
|
||||
} else {
|
||||
seq.stopState = state;
|
||||
}
|
||||
};
|
||||
seq.init = function (start) {
|
||||
if (typeof start === 'undefined') {
|
||||
start = 0;
|
||||
mcopy.loopCount = 0;
|
||||
mcopy.seq_time = +new Date();
|
||||
}
|
||||
seq.stop(false);
|
||||
seq.i = start;
|
||||
seq.run();
|
||||
};
|
||||
seq.stats = function () {
|
||||
var ms = 0,
|
||||
cmd = '',
|
||||
cam_total = 0,
|
||||
proj_total = 0,
|
||||
real_total = mcopy.state.sequence.arr.filter(function (elem) {
|
||||
if (elem === undefined) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
//timing
|
||||
for (var i = 0; i < mcopy.state.sequence.arr.length; i++) {
|
||||
cmd = mcopy.state.sequence.arr[i];
|
||||
if (cmd === 'CF' || cmd === 'CB'){
|
||||
ms += mcopy.cfg.arduino.cam.time;
|
||||
ms += mcopy.cfg.arduino.cam.delay;
|
||||
ms += mcopy.cfg.arduino.serialDelay;
|
||||
}
|
||||
if (cmd === 'PF' || cmd === 'PB'){
|
||||
ms += mcopy.cfg.arduino.proj.time;
|
||||
ms += mcopy.cfg.arduino.proj.delay;
|
||||
ms += mcopy.cfg.arduino.serialDelay;
|
||||
}
|
||||
if (cmd === 'BF' || cmd === 'BB'){
|
||||
ms += mcopy.cfg.arduino.black.before;
|
||||
ms += mcopy.cfg.arduino.black.after;
|
||||
ms += mcopy.cfg.arduino.cam.time;
|
||||
ms += mcopy.cfg.arduino.cam.delay;
|
||||
ms += mcopy.cfg.arduino.serialDelay;
|
||||
}
|
||||
ms += mcopy.cfg.arduino.sequenceDelay;
|
||||
|
||||
if (cmd === 'CF' || cmd === 'BF') {
|
||||
cam_total++;
|
||||
}
|
||||
if (cmd === 'CB' || cmd === 'BB') {
|
||||
cam_total--;
|
||||
}
|
||||
if (cmd === 'PF') {
|
||||
proj_total++;
|
||||
}
|
||||
if (cmd === 'PB') {
|
||||
proj_total--;
|
||||
}
|
||||
}
|
||||
|
||||
//timing
|
||||
ms = ms * mcopy.loop;
|
||||
if (ms < 2000) {
|
||||
$('#seq_stats .timing span').text(ms + 'ms');
|
||||
} else {
|
||||
$('#seq_stats .timing span').text(humanizeDuration(ms));
|
||||
}
|
||||
|
||||
//ending frames
|
||||
cam_total = cam_total * mcopy.loop;
|
||||
proj_total = proj_total * mcopy.loop;
|
||||
|
||||
$('#seq_stats .cam_end span').text(gui.fmtZero(mcopy.state.camera.pos + cam_total, 6));
|
||||
$('#seq_stats .proj_end span').text(gui.fmtZero(mcopy.state.projector.pos + proj_total, 6));
|
||||
|
||||
//count
|
||||
$('#seq_stats .seq_count span').text(real_total.length * mcopy.loop);
|
||||
return ms;
|
||||
};
|
||||
seq.clear = function () {
|
||||
mcopy.state.sequence.size = 24;
|
||||
mcopy.state.sequence.arr = [];
|
||||
};
|
||||
|
||||
//GUI
|
||||
gui.fmtZero = function (val, len) {
|
||||
var raw = val,
|
||||
str = val + '',
|
||||
output = ''
|
||||
if (raw < 0) {
|
||||
output = '-' + Array(len - (str.length - 1)).join('0') + str.replace('-', '');
|
||||
} else {
|
||||
if (str.length < len) {
|
||||
output = Array(len - str.length).join('0') + str;
|
||||
} else if (str.length >= len) {
|
||||
str = parseInt(str) + '';
|
||||
output = Array(len - str.length).join('0') + str;
|
||||
}
|
||||
}
|
||||
return output;
|
||||
};
|
||||
gui.counterFormat = function (t, normal, prevent) {
|
||||
var raw = t.value;
|
||||
t.value = gui.fmtZero(raw, 6);
|
||||
if (typeof normal !== 'undefined' && parseInt(raw) !== normal) {
|
||||
$(t).addClass('changed');
|
||||
} else {
|
||||
$(t).removeClass('changed');
|
||||
}
|
||||
if (typeof prevent === 'undefined') { prevent = false; }
|
||||
if (!prevent) {
|
||||
gui.shootGoto(t);
|
||||
}
|
||||
};
|
||||
gui.shootGoto = function (t) {
|
||||
var elem = $(t),
|
||||
id = elem.attr('id').split('_'),
|
||||
val = 0,
|
||||
comp = 0,
|
||||
other = {};
|
||||
if (id[1] === 'cam') {
|
||||
comp = mcopy.state.camera.pos;
|
||||
} else if (id[1] === 'proj') {
|
||||
comp = mcopy.state.projector.pos;
|
||||
}
|
||||
if (id[0] === 'shoot') {
|
||||
other = $('#goto_' + id[1]);
|
||||
val = parseInt(elem.val()) + comp;
|
||||
other.val(val);
|
||||
gui.counterFormat(other[0], comp, true);
|
||||
//other.trigger('change');
|
||||
} else if (id[0] === 'goto'){
|
||||
other = $('#shoot_' + id[1]);
|
||||
val = parseInt(elem.val()) - comp;
|
||||
other.val(val);
|
||||
gui.counterFormat(other[0], undefined, true);
|
||||
} else {
|
||||
//ALLOW TO EXECUTE WITH NO RESULTS
|
||||
//console.log('You screwed up the markup.');
|
||||
}
|
||||
};
|
||||
gui.updateCam = function (t) {
|
||||
var val = t.value,
|
||||
change;
|
||||
if (parseInt(val) === mcopy.state.camera.pos) { return false; }
|
||||
change = confirm('Are you sure you want to set camera counter to ' + val + '?');
|
||||
if (change) {
|
||||
mcopy.state.camera.pos = parseInt(val);
|
||||
gui.updateState();
|
||||
} else {
|
||||
t.value = mcopy.state.camera.pos;
|
||||
gui.counterFormat(t);
|
||||
}
|
||||
};
|
||||
gui.updateProj = function (t) {
|
||||
var val = t.value,
|
||||
change;
|
||||
if (parseInt(val) === mcopy.state.projector.pos) { return false; }
|
||||
change = confirm('Are you sure you want to set projector counter to ' + val + '?');
|
||||
if (change) {
|
||||
mcopy.state.projector.pos = parseInt(val);
|
||||
gui.updateState();
|
||||
} else {
|
||||
t.value = mcopy.state.projector.pos;
|
||||
gui.counterFormat(t);
|
||||
}
|
||||
};
|
||||
gui.updateState = function () {
|
||||
var cpos = mcopy.state.camera.pos,
|
||||
ppos = mcopy.state.projector.pos;
|
||||
$('#trad_cam_count').val(cpos).change();
|
||||
$('#trad_proj_count').val(ppos).change();
|
||||
|
||||
$('#seq_cam_count').val(cpos).change();
|
||||
$('#seq_proj_count').val(ppos).change();
|
||||
|
||||
$('#goto_cam').val(cpos).change();
|
||||
$('#goto_proj').val(ppos).change();
|
||||
};
|
||||
gui.info = function (title, message) {
|
||||
'use strict';
|
||||
var config = {
|
||||
type : 'info',
|
||||
buttons : ['Ok'],
|
||||
title: 'Sometitle',
|
||||
message : 'some message'
|
||||
};
|
||||
dialog.showMessageBox(config);
|
||||
/*
|
||||
type String - Can be "none", "info", "error", "question" or "warning". On Windows, "question" displays the same icon as "info", unless you set an icon using the "icon" option.
|
||||
buttons Array - Array of texts for buttons.
|
||||
defaultId Integer - Index of the button in the buttons array which will be selected by default when the message box opens.
|
||||
title String - Title of the message box, some platforms will not show it.
|
||||
message String - Content of the message box.
|
||||
detail String - Extra information of the message.
|
||||
icon NativeImage
|
||||
cancelId Integer - The value will be returned when user cancels the dialog instead of clicking the buttons of the dialog. By default it is the index of the buttons that have "cancel" or "no" as label, or 0 if there is no such buttons. On OS X and Windows the index of "Cancel" button will always be used as cancelId, not matter whether it is already specified.
|
||||
noLink Boolean - On Windows Electron will try to figure out which one of the buttons are common buttons (like "Cancel" or "Yes"), and show the others as command links in the dialog. This can make the dialog appear in the style of modern Windows apps. If you don't like this behavior, you can set noLink to true.
|
||||
*/
|
||||
};
|
||||
gui.confirm = function () {};
|
||||
gui.error = function () {};
|
||||
|
||||
/******
|
||||
Sequencer grid
|
||||
*******/
|
||||
gui.grid = {};
|
||||
gui.grid.layout = function () {
|
||||
gui.grid.swatchesElem = {};
|
||||
gui.grid.init = function () {
|
||||
'use strict';
|
||||
gui.grid.refresh();
|
||||
//mcopy.seq.stats();
|
||||
seq.stats();
|
||||
gui.grid.events();
|
||||
};
|
||||
|
||||
gui.grid.state = function (i) {
|
||||
'use strict';
|
||||
if (mcopy.state.sequence.arr[i] !== undefined) {
|
||||
$('input[x=' + i + ']').prop('checked', false);
|
||||
var elem = $('input[x=' + i + ']'),
|
||||
lightElem = $('.L' + '[x=' + i + ']');
|
||||
if (typeof mcopy.state.sequence.arr[i] !== 'undefined') {
|
||||
elem.prop('checked', false);
|
||||
$('.' + mcopy.state.sequence.arr[i] + '[x=' + i + ']').prop('checked', true);
|
||||
if (mcopy.state.sequence.arr[i] === 'CF'
|
||||
|| mcopy.state.sequence.arr[i] === 'CB') {
|
||||
lightElem.css('background', 'rgb(' + mcopy.state.sequence.light[i] + ')')
|
||||
.addClass('a')
|
||||
.prop('title', 'rgb(' + mcopy.state.sequence.light[i] + ')');
|
||||
|
||||
} else {
|
||||
lightElem.css('background', 'transparent')
|
||||
.removeClass('a')
|
||||
.prop('title', '');
|
||||
}
|
||||
} else {
|
||||
lightElem.css('background', 'transparent')
|
||||
.removeClass('a')
|
||||
.prop('title', '');
|
||||
}
|
||||
};
|
||||
gui.grid.refresh = function () {
|
||||
'use strict';
|
||||
var cmds = ['cam_forward', 'proj_forward', 'black_forward', 'cam_backward', 'proj_backward', 'black_backward'],
|
||||
check = '',
|
||||
width = 970 + ((940 / 24) * Math.abs(24 - mcopy.state.sequence.size));
|
||||
var cmds = ['cam_forward', 'proj_forward', 'cam_backward', 'proj_backward', 'light_set', 'numbers'],
|
||||
check = '<input type="checkbox" x="xxxx" />',
|
||||
div = '<div x="xxxx"></div>',
|
||||
elem,
|
||||
width = 970 - 34 + ((940 / 24) * Math.abs(24 - mcopy.state.sequence.size));
|
||||
$('#sequence').width(width + 'px');
|
||||
for (var i = 0; i < cmds.length; i++) {
|
||||
$('#' + cmds[i]).empty();
|
||||
for (var x = 0; x < mcopy.state.sequence.size; x++) {
|
||||
check = '<input type="checkbox" x="xxxx" />'.replace('xxxx', x);
|
||||
|
||||
if (i === cmds.length - 1) {
|
||||
$('#' + cmds[i]).append($('<div>').append($(check).addClass(mcopy.state.sequence.pads[cmds[i]])).append($('<div>').text(x)));
|
||||
elem = div.replace('xxxx', x);
|
||||
$('#' + cmds[i]).append($(elem).text(x));
|
||||
} else if (i === cmds.length - 2) {
|
||||
elem = div.replace('xxxx', x);
|
||||
$('#' + cmds[i]).append($(elem).addClass(mcopy.state.sequence.pads[cmds[i]]));
|
||||
} else {
|
||||
$('#' + cmds[i]).append($(check).addClass(mcopy.state.sequence.pads[cmds[i]]));
|
||||
elem = check.replace('xxxx', x);
|
||||
$('#' + cmds[i]).append($(elem).addClass(mcopy.state.sequence.pads[cmds[i]]));
|
||||
}
|
||||
gui.grid.state(x);
|
||||
}
|
||||
|
|
@ -140,66 +445,221 @@ gui.grid.refresh = function () {
|
|||
};
|
||||
gui.grid.click = function (t) {
|
||||
'use strict';
|
||||
var i = parseInt($(t).attr('x'));
|
||||
var i = parseInt($(t).attr('x')),
|
||||
cmd;
|
||||
if ($(t).prop('checked')) {
|
||||
mcopy.log( $(t).attr('class').replace('.', ''));
|
||||
mcopy.state.sequence.arr[i] = $(t).attr('class').replace('.', '');
|
||||
gui.grid.state(i);
|
||||
cmd = $(t).attr('class').replace('.', '');
|
||||
mcopy.state.sequence.arr[i] = cmd;
|
||||
if (cmd === 'CF'
|
||||
|| cmd === 'CB') {
|
||||
mcopy.state.sequence.light[i] = light.color.join(',');
|
||||
} else {
|
||||
mcopy.state.sequence.light[i] = '';
|
||||
}
|
||||
} else {
|
||||
mcopy.state.sequence.arr[i] = undefined;
|
||||
delete mcopy.state.sequence.arr[i];
|
||||
}
|
||||
mcopy.seq.stats();
|
||||
gui.grid.state(i);
|
||||
seq.stats();
|
||||
};
|
||||
gui.grid.clear = function () {
|
||||
'use strict';
|
||||
var doit = confirm('Are you sure you want to clear this sequence?');
|
||||
if (doit) {
|
||||
mcopy.seq.clear();
|
||||
seq.clear();
|
||||
gui.grid.refresh();
|
||||
mcopy.seq.stats();
|
||||
mcopy.log('Sequencer cleared');
|
||||
seq.stats();
|
||||
console.log('Sequencer cleared');
|
||||
}
|
||||
};
|
||||
gui.grid.loopChange = function (t) {
|
||||
'use strict';
|
||||
count = parseInt(t.value);
|
||||
var count = parseInt(t.value);
|
||||
mcopy.loop = count;
|
||||
mcopy.log('Loop count set to ' + mcopy.loop);
|
||||
mcopy.seq.stats();
|
||||
console.log('Loop count set to ' + mcopy.loop);
|
||||
seq.stats();
|
||||
};
|
||||
gui.grid.plus_24 = function () {
|
||||
'use strict';
|
||||
mcopy.state.sequence.size += 24;
|
||||
gui.grid.refresh();
|
||||
mcopy.log('Sequencer expanded to ' + mcopy.state.sequence.size + ' steps');
|
||||
console.log('Sequencer expanded to ' + mcopy.state.sequence.size + ' steps');
|
||||
};
|
||||
gui.grid.setLight = function (x, rgb) {
|
||||
'use strict';
|
||||
mcopy.state.sequence.light[x] = rgb.join(',');
|
||||
gui.grid.state(x);
|
||||
};
|
||||
gui.grid.blackout = function (t) {
|
||||
var elem = $(t),
|
||||
i = elem.attr('x');
|
||||
if (typeof mcopy.state.sequence.light[i] === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
if (mcopy.state.sequence.light[i] === '0,0,0') {
|
||||
gui.grid.setLight(i, light.color);
|
||||
} else {
|
||||
gui.grid.setLight(i, [0, 0, 0]);
|
||||
}
|
||||
};
|
||||
gui.grid.changeAll = function () {
|
||||
'use strict';
|
||||
var rgb = $('.w2ui-msg-body .default').attr('color').split(','),
|
||||
i;
|
||||
for (i = 0; i < mcopy.state.sequence.arr.length; i++) {
|
||||
if (mcopy.state.sequence.arr[i] === 'CF'
|
||||
|| mcopy.state.sequence.arr[i] === 'CB') {
|
||||
gui.grid.setLight(i, rgb);
|
||||
}
|
||||
}
|
||||
};
|
||||
gui.grid.swatches = function (x) {
|
||||
'use strict';
|
||||
var current = mcopy.state.sequence.light[x];
|
||||
gui.grid.swatchesElem = w2popup.open({
|
||||
title : 'Select Color',
|
||||
body : $('#light-swatches').html(),
|
||||
buttons : '<button id="sequencer-ok" class="btn btn-default">Ok</button> <button id="sequencer-changeall" class="btn btn-warning">Change All</button> <button id="sequencer-cancel" class="btn btn-default">Cancel</button>',
|
||||
onClose : function () {
|
||||
|
||||
//
|
||||
}
|
||||
});
|
||||
$('.w2ui-msg-body .swatch').removeClass('default set');
|
||||
$('.w2ui-msg-body .swatch[color="' + current + '"').eq(0).addClass('default set');
|
||||
|
||||
$('#sequencer-cancel').on('click', function () {
|
||||
gui.grid.swatchesElem.close();
|
||||
});
|
||||
$('#sequencer-changeall').on('click', function () {
|
||||
var doit = confirm('You sure you want to change all light settings?');
|
||||
if (doit) {
|
||||
gui.grid.changeAll();
|
||||
gui.grid.swatchesElem.close();
|
||||
}
|
||||
});
|
||||
$('#sequencer-ok').on('click', function () {
|
||||
var rgb = $('.w2ui-msg-body .default').attr('color').split(',');
|
||||
gui.grid.setLight(x, rgb);
|
||||
light.color = rgb;
|
||||
gui.grid.swatchesElem.close();
|
||||
});
|
||||
};
|
||||
gui.grid.scrollTo = function (i) {
|
||||
'use strict';
|
||||
var w = 35 + 3; //width of pad + margin
|
||||
$('#seq_scroll').scrollLeft(i * w);
|
||||
};
|
||||
gui.grid.events = function () {
|
||||
'use strict';
|
||||
$(document.body).on('click', 'input[type=checkbox]', function () {
|
||||
$(document.body).on('click', '#sequencer input[type=checkbox]', function () {
|
||||
gui.grid.click(this);
|
||||
});
|
||||
//$(document.body).on('click', '.L', function () {
|
||||
//alert('click');
|
||||
//console.log('please dont happen');
|
||||
//});
|
||||
$(document.body).on('dblclick', '.L', function () {
|
||||
gui.grid.blackout(this);
|
||||
});
|
||||
$(document.body).on('contextmenu', '.L', function (e) {
|
||||
var x = e.target.attributes.x.value;
|
||||
setTimeout(function () {
|
||||
gui.grid.swatches(x);
|
||||
}, 300);
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
$('#seq_scroll').on('scroll', function () {
|
||||
var i = Math.ceil($('#seq_scroll').scrollLeft() / (35 + 3));
|
||||
$('#seq_scroll_state').val(gui.fmtZero(i, 6));
|
||||
});
|
||||
$('#seq_scroll_state').on('change', function () {
|
||||
var i = parseInt($(this).val());
|
||||
$(this).val(gui.fmtZero(i, 6));
|
||||
gui.grid.scrollTo(i);
|
||||
});
|
||||
$(document.body).on('click', '.w2ui-msg-body .swatch', function () {
|
||||
var color = $(this).attr('color'),
|
||||
title = $(this).attr('title');
|
||||
if (typeof color !== 'undefined') {
|
||||
color = color.split(',');
|
||||
$('.w2ui-msg-body .swatch').removeClass('default set');
|
||||
$('#light-swatches .swatch').removeClass('default set');
|
||||
$(this).addClass('default set');
|
||||
$('#light-swatches .swatch[title="' + title + '"]').eq(0).addClass('default set');
|
||||
light.color = color;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//LIGHT
|
||||
light.preview = false;
|
||||
light.color = [0, 0, 0]; //preview status
|
||||
light.preview_state = false; //light is on/off for preview viewing
|
||||
light.color = [255, 255, 255]; //default color
|
||||
light.current = [0, 0, 0]; //last sent
|
||||
light.rgb_on = false;
|
||||
light.icon = {};
|
||||
light.swatches = [
|
||||
{
|
||||
rgb : [0, 0, 0],
|
||||
name : 'off'
|
||||
},
|
||||
{
|
||||
rgb : [255, 255, 255],
|
||||
name : 'white (LED)'
|
||||
},
|
||||
{
|
||||
rgb : chroma.kelvin(2500).rgb(),
|
||||
name : '2500 kelvin'
|
||||
},
|
||||
{
|
||||
rgb : chroma.kelvin(5600).rgb(),
|
||||
name : '5600 kelvin'
|
||||
},
|
||||
{
|
||||
rgb : light.color,
|
||||
set : true,
|
||||
default : true
|
||||
}
|
||||
];
|
||||
light.queue = {};
|
||||
light.lock = false;
|
||||
light.init = function () {
|
||||
'use strict';
|
||||
|
||||
light.listen();
|
||||
|
||||
//create dynamic style for displaying light across screens
|
||||
light.icon = document.createElement('style');
|
||||
light.icon.innerHTML = 'span.mcopy-light{background-color: #000;}';
|
||||
document.body.appendChild(light.icon);
|
||||
|
||||
light.colorPickers();
|
||||
light.swatch.init();
|
||||
|
||||
light.display(light.current);
|
||||
|
||||
$('#preview').on('change', function () {
|
||||
light.preview_state = $(this).prop('checked');
|
||||
if (light.preview_state) {
|
||||
light.display(light.color);
|
||||
light.set(light.color);
|
||||
} else {
|
||||
light.display([0,0,0]);
|
||||
light.set([0,0,0]);
|
||||
}
|
||||
});
|
||||
};
|
||||
light.colorPickers = function () {
|
||||
'use strict';
|
||||
$('#colors-tabs').w2tabs({
|
||||
name: 'colors',
|
||||
active: 'rgb',
|
||||
tabs: [
|
||||
{ id: 'rgb', caption: 'RGB' },
|
||||
{ id: 'kelvin', caption: 'Kelvin'},
|
||||
{ id: 'cmy', caption: 'CMY'},
|
||||
{ id: 'kelvin', caption: 'Kelvin'}
|
||||
{ id: 'rgb', caption: 'RGB' }
|
||||
],
|
||||
onClick: function (event) {
|
||||
//$('#colors-content').html('Tab: ' + event.target);
|
||||
|
|
@ -256,33 +716,63 @@ light.init = function () {
|
|||
//console.dir(type);
|
||||
var a = colors.RND.rgb,
|
||||
rgb = [a.r, a.g, a.b];
|
||||
light.color = rgb;
|
||||
if (light.preview) {
|
||||
light.display(rgb);
|
||||
light.set(rgb);
|
||||
}
|
||||
|
||||
light.preview(rgb);
|
||||
}
|
||||
});
|
||||
light.display([0, 0, 0]);
|
||||
$('#preview').on('change', function () {
|
||||
light.preview = $(this).prop('checked');
|
||||
if (light.preview) {
|
||||
light.display(light.color);
|
||||
light.set(light.color);
|
||||
} else {
|
||||
light.display([0,0,0]);
|
||||
light.set([0,0,0]);
|
||||
};
|
||||
light.set = function (rgb, callback) { //rgb = [0,0,0]
|
||||
'use strict';
|
||||
var obj;
|
||||
|
||||
if (light.lock) {
|
||||
//potential for logging overlapping commands
|
||||
return false;
|
||||
}
|
||||
|
||||
obj = {
|
||||
rgb : rgb,
|
||||
id : uuid.v4()
|
||||
};
|
||||
ipcRenderer.sendSync('light', obj);
|
||||
|
||||
if (typeof callback !== 'undefined') {
|
||||
obj.callback = callback;
|
||||
}
|
||||
light.queue[obj.id] = obj;
|
||||
light.current = rgb;
|
||||
light.lock = true;
|
||||
};
|
||||
light.end = function (id) {
|
||||
'use strict';
|
||||
if (typeof light.queue[id] !== 'undefined') {
|
||||
if (typeof light.queue[id].callback !== 'undefined') {
|
||||
light.queue[id].callback();
|
||||
}
|
||||
delete light.queue[id];
|
||||
light.lock = false;
|
||||
}
|
||||
}
|
||||
light.listen = function () {
|
||||
'use strict';
|
||||
ipcRenderer.on('light', function (event, arg) {
|
||||
light.end(arg.id);
|
||||
return event.returnValue = true;
|
||||
});
|
||||
};
|
||||
//rgb = [0,0,0]
|
||||
light.set = function (rgb) {
|
||||
light.preview = function (rgb) {
|
||||
'use strict';
|
||||
light.current = rgb;
|
||||
return ipcRenderer.sendSync('light', rgb);
|
||||
var rgbStr = 'rgb(' + rgb.join(',') + ')';
|
||||
light.color = rgb;
|
||||
$('#light-swatches .swatch.set').css('background', rgbStr)
|
||||
.attr('color', rgb.join(','))
|
||||
.prop('title', rgbStr);
|
||||
|
||||
if (light.preview_state) {
|
||||
light.display(rgb);
|
||||
light.set(rgb);
|
||||
}
|
||||
};
|
||||
light.display = function (rgb) {
|
||||
light.display = function (rgb) { //display light active state
|
||||
'use strict';
|
||||
var str,
|
||||
i;
|
||||
|
|
@ -296,14 +786,65 @@ light.display = function (rgb) {
|
|||
light.icon.deleteRule(0);
|
||||
light.icon.insertRule('span.mcopy-light{background-color: ' + str + ';}', 0)
|
||||
};
|
||||
light.color_on = false;
|
||||
light.color_init = function () {
|
||||
'use strict';
|
||||
if (!light.color_on) {
|
||||
if (!light.rgb_on) {
|
||||
$('#rgb').focus();
|
||||
light.color_on = true;
|
||||
light.rgb_on = true;
|
||||
}
|
||||
};
|
||||
light.swatch = {};
|
||||
light.swatch.init = function () {
|
||||
'use strict';
|
||||
var number = 12,
|
||||
add,
|
||||
elem,
|
||||
rgb,
|
||||
i,
|
||||
x;
|
||||
for (i = 0; i < light.swatches.length; i++) {
|
||||
for (x = 0; x < 3; x++) {
|
||||
light.swatches[i].rgb[x] = Math.floor(light.swatches[i].rgb[x]);
|
||||
}
|
||||
rgb = 'rgb(' + light.swatches[i].rgb.join(',') + ')';
|
||||
elem = $('<div class="swatch"></div>');
|
||||
elem.css('background', rgb);
|
||||
elem.attr('color', light.swatches[i].rgb.join(','));
|
||||
if (typeof light.swatches[i].name !== 'undefined') {
|
||||
elem.prop('title', light.swatches[i].name);
|
||||
} else {
|
||||
elem.prop('title', rgb);
|
||||
}
|
||||
if (light.swatches[i].default) {
|
||||
elem.addClass('default');
|
||||
}
|
||||
if (light.swatches[i].set) {
|
||||
elem.addClass('set');
|
||||
}
|
||||
$('#new-swatch').before(elem);
|
||||
}
|
||||
$('#new-swatch').on('click', light.swatch.add);
|
||||
$(document.body).on('click', '#light-swatches .swatch', function () {
|
||||
var rgb = $(this).attr('color');
|
||||
if (typeof color !== 'undefined') {
|
||||
rgb = rgb.split(',');
|
||||
$('#light-swatches .swatch').removeClass('default set');
|
||||
$(this).addClass('default set');
|
||||
light.preview(rgb);
|
||||
}
|
||||
});
|
||||
$(document.body).on('dblclick', '.swatch', function () {
|
||||
|
||||
});
|
||||
};
|
||||
light.swatch.add = function () {
|
||||
'use strict';
|
||||
var swatch = $('<div class="swatch default set"></div>');
|
||||
$('#light-swatches .swatch').removeClass('default set');
|
||||
$('#new-swatch').before(swatch);
|
||||
light.preview(light.color);
|
||||
};
|
||||
|
||||
|
||||
nav.init = function () {
|
||||
'use strict';
|
||||
|
|
@ -336,7 +877,7 @@ nav.change = function (id) {
|
|||
var init = function () {
|
||||
'use strict';
|
||||
nav.init();
|
||||
gui.grid.layout();
|
||||
log.init();
|
||||
gui.grid.init();
|
||||
light.init();
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue