Lighting GUI complete
Able to store swatches of colors in active memory and apply to steps in the sequencer
This commit is contained in:
parent
d7414d9b7f
commit
3006e2e706
176
app/css/app.css
176
app/css/app.css
|
@ -39,6 +39,11 @@ footer {
|
||||||
#light-status {
|
#light-status {
|
||||||
width: 388px;
|
width: 388px;
|
||||||
float: right;
|
float: right;
|
||||||
|
margin-top: -25px;
|
||||||
|
}
|
||||||
|
#light-status h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
#light-status > div {
|
#light-status > div {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -60,9 +65,84 @@ footer {
|
||||||
}
|
}
|
||||||
#light-status form input[type=text] {
|
#light-status form input[type=text] {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid #fff;
|
||||||
}
|
}
|
||||||
#preview {
|
#light-swatches {
|
||||||
margin-top: 40px;
|
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 {
|
#rgb {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -120,32 +200,53 @@ footer {
|
||||||
#seq_scroll > div > div > div input {
|
#seq_scroll > div > div > div input {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
#seq_scroll > div > div > div > div {
|
#numbers div {
|
||||||
font-size: 8px;
|
font-size: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #dcdcdc;
|
color: #dcdcdc;
|
||||||
}
|
}
|
||||||
#actions {
|
#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 {
|
#seq_stats {
|
||||||
width: 40%;
|
width: 50%;
|
||||||
float: right;
|
float: right;
|
||||||
padding: 20px;
|
padding: 0 20px;
|
||||||
margin-top: 57px;
|
}
|
||||||
|
#seq_stats h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 12px 0 3px;
|
||||||
}
|
}
|
||||||
#seq_stats span {
|
#seq_stats span {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
#seq_loop {
|
#seq_loop {
|
||||||
|
width: 40%;
|
||||||
|
float: left;
|
||||||
padding: 0 28px;
|
padding: 0 28px;
|
||||||
}
|
}
|
||||||
|
#seq_loop h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 12px 0 3px;
|
||||||
|
}
|
||||||
#seq_loop input {
|
#seq_loop input {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 23px;
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 21px;
|
||||||
width: 121px;
|
width: 121px;
|
||||||
padding: 12px;
|
padding: 6px 12px;
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -177,9 +278,8 @@ button:focus {
|
||||||
}
|
}
|
||||||
#sequence {
|
#sequence {
|
||||||
width: 970px;
|
width: 970px;
|
||||||
padding-bottom: 25px;
|
padding-bottom: 21px;
|
||||||
padding-left: 70px;
|
padding-left: 70px;
|
||||||
height: 230px;
|
|
||||||
}
|
}
|
||||||
#sequence #cam_forward,
|
#sequence #cam_forward,
|
||||||
#sequence #proj_forward,
|
#sequence #proj_forward,
|
||||||
|
@ -190,7 +290,6 @@ button:focus {
|
||||||
#sequence #proj_forward input[type=checkbox],
|
#sequence #proj_forward input[type=checkbox],
|
||||||
#sequence #black_forward input[type=checkbox] {
|
#sequence #black_forward input[type=checkbox] {
|
||||||
border: 1px solid #00C4A0;
|
border: 1px solid #00C4A0;
|
||||||
margin-right: 3px;
|
|
||||||
}
|
}
|
||||||
#sequence #cam_forward input[type=checkbox]:checked,
|
#sequence #cam_forward input[type=checkbox]:checked,
|
||||||
#sequence #proj_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 #proj_backward input[type=checkbox],
|
||||||
#sequence #black_backward input[type=checkbox] {
|
#sequence #black_backward input[type=checkbox] {
|
||||||
border: 1px solid #AB1A25;
|
border: 1px solid #AB1A25;
|
||||||
margin-right: 3px;
|
|
||||||
}
|
}
|
||||||
#sequence #cam_backward input[type=checkbox]:checked,
|
#sequence #cam_backward input[type=checkbox]:checked,
|
||||||
#sequence #proj_backward input[type=checkbox]:checked,
|
#sequence #proj_backward input[type=checkbox]:checked,
|
||||||
|
@ -223,23 +321,36 @@ button:focus {
|
||||||
#sequence #black_backward > div {
|
#sequence #black_backward > div {
|
||||||
color: #AB1A25;
|
color: #AB1A25;
|
||||||
}
|
}
|
||||||
#sequence #cam_backward {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
#sequence input[type=checkbox] {
|
#sequence input[type=checkbox] {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
outline: none;
|
outline: none;
|
||||||
display: block;
|
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
float: left;
|
margin-right: 3px;
|
||||||
|
display: inline-block;
|
||||||
box-sizing: border-box;
|
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 {
|
#sequence input.h {
|
||||||
border-color: #DAE035 !important;
|
border-color: #DAE035 !important;
|
||||||
|
@ -255,10 +366,35 @@ button:focus {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
float: left;
|
float: left;
|
||||||
margin: 3px;
|
margin-right: 3px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
opacity: 0.5;
|
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 {
|
.cp-app {
|
||||||
position: relative !important;
|
position: relative !important;
|
||||||
border-radius: 0px !important;
|
border-radius: 0px !important;
|
||||||
|
|
190
app/css/app.less
190
app/css/app.less
|
@ -8,6 +8,8 @@
|
||||||
@SEQ: #3C3636;
|
@SEQ: #3C3636;
|
||||||
@SCRIPT: rgb(39, 40, 34);
|
@SCRIPT: rgb(39, 40, 34);
|
||||||
|
|
||||||
|
@INPUT_BG : rgba(255, 255, 255, 0.05);
|
||||||
|
|
||||||
.monospace () {
|
.monospace () {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
}
|
}
|
||||||
|
@ -85,6 +87,11 @@ footer{
|
||||||
#light-status{
|
#light-status{
|
||||||
width: 388px;
|
width: 388px;
|
||||||
float: right;
|
float: right;
|
||||||
|
margin-top: -25px;
|
||||||
|
h3{
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
>div{
|
>div{
|
||||||
position: relative;
|
position: relative;
|
||||||
clear: both;
|
clear: both;
|
||||||
|
@ -104,11 +111,91 @@ footer{
|
||||||
}
|
}
|
||||||
input[type=text]{
|
input[type=text]{
|
||||||
width: 40px;
|
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{
|
#preview{
|
||||||
margin-top: 40px;
|
//margin-top: 40px;
|
||||||
}
|
}
|
||||||
#rgb{
|
#rgb{
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -135,7 +222,7 @@ footer{
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
input{
|
input{
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: @INPUT_BG;
|
||||||
color: @COMMON;
|
color: @COMMON;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
|
@ -163,22 +250,36 @@ footer{
|
||||||
input{
|
input{
|
||||||
float: none;
|
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{
|
#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{
|
#seq_stats{
|
||||||
width: 40%;
|
width: 50%;
|
||||||
float: right;
|
float: right;
|
||||||
padding: 20px;
|
padding: 0 20px;
|
||||||
margin-top: 57px;
|
h3{
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 12px 0 3px;
|
||||||
|
}
|
||||||
span{
|
span{
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
float: right;
|
float: right;
|
||||||
|
@ -187,12 +288,20 @@ footer{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#seq_loop{
|
#seq_loop{
|
||||||
|
width: 40%;
|
||||||
|
float: left;
|
||||||
padding: 0 28px;
|
padding: 0 28px;
|
||||||
|
h3{
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 12px 0 3px;
|
||||||
|
}
|
||||||
input{
|
input{
|
||||||
.monospace();
|
.monospace();
|
||||||
font-size: 23px;
|
background: @INPUT_BG;
|
||||||
|
color: @COMMON;
|
||||||
|
font-size: 21px;
|
||||||
width: 121px;
|
width: 121px;
|
||||||
padding: 12px;
|
padding: 6px 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
button{
|
button{
|
||||||
|
@ -207,16 +316,14 @@ button{
|
||||||
}
|
}
|
||||||
#sequence{
|
#sequence{
|
||||||
width: 970px;
|
width: 970px;
|
||||||
padding-bottom: 25px;
|
padding-bottom: 21px;
|
||||||
padding-left: 70px;
|
padding-left: 70px;
|
||||||
height: 230px;
|
|
||||||
#cam_forward,
|
#cam_forward,
|
||||||
#proj_forward,
|
#proj_forward,
|
||||||
#black_forward{
|
#black_forward{
|
||||||
clear: both;
|
clear: both;
|
||||||
input[type=checkbox]{
|
input[type=checkbox]{
|
||||||
border: 1px solid @FORWARD;
|
border: 1px solid @FORWARD;
|
||||||
margin-right: 3px;
|
|
||||||
&:checked{
|
&:checked{
|
||||||
background: @FORWARD;
|
background: @FORWARD;
|
||||||
//background: radial-gradient(circle at 25px 25px, #00C4A0, #343434);
|
//background: radial-gradient(circle at 25px 25px, #00C4A0, #343434);
|
||||||
|
@ -232,7 +339,6 @@ button{
|
||||||
clear: both;
|
clear: both;
|
||||||
input[type=checkbox]{
|
input[type=checkbox]{
|
||||||
border: 1px solid @BACKWARD;
|
border: 1px solid @BACKWARD;
|
||||||
margin-right: 3px;
|
|
||||||
&:checked{
|
&:checked{
|
||||||
background: @BACKWARD;
|
background: @BACKWARD;
|
||||||
//background: radial-gradient(circle at 25px 25px, #AB1A25, #343434);
|
//background: radial-gradient(circle at 25px 25px, #AB1A25, #343434);
|
||||||
|
@ -242,23 +348,36 @@ button{
|
||||||
color: @BACKWARD;
|
color: @BACKWARD;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#cam_backward{
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
input[type=checkbox]{
|
input[type=checkbox]{
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
outline: none;
|
outline: none;
|
||||||
display: block;
|
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
float: left;
|
margin-right: 3px;
|
||||||
|
display: inline-block;
|
||||||
box-sizing: border-box;
|
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{
|
input.h{
|
||||||
//background: @SELECTED !important;
|
//background: @SELECTED !important;
|
||||||
|
@ -274,11 +393,36 @@ button{
|
||||||
color: @COMMON;
|
color: @COMMON;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
float: left;
|
float: left;
|
||||||
margin: 3px;
|
margin-right: 3px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
opacity: 0.5;
|
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{
|
.cp-app{
|
||||||
|
|
|
@ -5,6 +5,7 @@ var gulp = require('gulp'),
|
||||||
var scripts = [
|
var scripts = [
|
||||||
'./src/jquery-1.11.3.min.js',
|
'./src/jquery-1.11.3.min.js',
|
||||||
'./src/jquery-electron-fix.js',
|
'./src/jquery-electron-fix.js',
|
||||||
|
'./src/jquery.contextMenu.min.js',
|
||||||
'./src/w2ui-1.4.3.min.js',
|
'./src/w2ui-1.4.3.min.js',
|
||||||
'./src/moment.min.js',
|
'./src/moment.min.js',
|
||||||
'./src/colors.js',
|
'./src/colors.js',
|
||||||
|
|
|
@ -16,22 +16,39 @@
|
||||||
<div id="counters">
|
<div id="counters">
|
||||||
<div class="cam">
|
<div class="cam">
|
||||||
<label>CAMERA</label>
|
<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>
|
||||||
<div class="proj">
|
<div class="proj">
|
||||||
<label>PROJECTOR</label>
|
<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>
|
</div>
|
||||||
<div id="seq_scroll">
|
<div id="seq_scroll">
|
||||||
<div id="sequence">
|
<div id="sequence">
|
||||||
<div id="cam_forward" class="row" y="0"></div>
|
<div id="cam_forward" class="row" y="0"></div>
|
||||||
<div id="proj_forward" class="row" y="1"></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 spacer" y="0"></div>
|
||||||
<div id="cam_backward" class="row" y="0"></div>
|
|
||||||
<div id="proj_backward" class="row" y="1"></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>
|
||||||
|
<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>
|
||||||
<div id="seq_stats">
|
<div id="seq_stats">
|
||||||
<h3>STATS</h3>
|
<h3>STATS</h3>
|
||||||
|
@ -40,16 +57,9 @@
|
||||||
<div class="cam_end">Camera end position: <span>00000</span></div>
|
<div class="cam_end">Camera end position: <span>00000</span></div>
|
||||||
<div class="proj_end">Projector end position: <span>00000</span></div>
|
<div class="proj_end">Projector end position: <span>00000</span></div>
|
||||||
</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">
|
<div id="seq_loop">
|
||||||
<h3>LOOPS</h3>
|
<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>
|
</div>
|
||||||
<div id="script" class="screen"></div>
|
<div id="script" class="screen"></div>
|
||||||
|
@ -66,18 +76,26 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="light-status">
|
<div id="light-status">
|
||||||
|
<h3>LIGHT STATUS</h3>
|
||||||
<div>
|
<div>
|
||||||
<form>
|
<form>
|
||||||
<span>R</span><input type="text" value="0"/><br />
|
<span>R</span><input type="text" value="0" readonly /><br />
|
||||||
<span>G</span><input type="text" value="0"/><br />
|
<span>G</span><input type="text" value="0" readonly /><br />
|
||||||
<span>B</span><input type="text" value="0"/>
|
<span>B</span><input type="text" value="0" readonly />
|
||||||
</form>
|
</form>
|
||||||
<div id="color"></div>
|
<div id="color"></div>
|
||||||
</div>
|
</div>
|
||||||
Preview
|
<div id="preview-wrap">
|
||||||
|
<h4><span>PREVIEW</span></h4>
|
||||||
<input type="checkbox" name="preview" id="preview" class="effeckt-ckbox-ios7" />
|
<input type="checkbox" name="preview" id="preview" class="effeckt-ckbox-ios7" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<footer id="light-swatches">
|
||||||
|
<div id="new-swatch">
|
||||||
|
<i class="fa fa-plus"></i>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="./js/app.js"></script>
|
<script src="./js/app.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
672
app/js/app.js
672
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'),
|
var electron = require('electron'),
|
||||||
fs = require('fs'),
|
fs = require('fs'),
|
||||||
Menu = require('menu'),
|
Menu = require('menu'),
|
||||||
|
MenuItem = require('menu-item'),
|
||||||
|
notifier = require('node-notifier'),
|
||||||
ipcMain = require('electron').ipcMain,
|
ipcMain = require('electron').ipcMain,
|
||||||
app = electron.app,
|
app = electron.app,
|
||||||
BrowserWindow = electron.BrowserWindow,
|
BrowserWindow = electron.BrowserWindow,
|
||||||
|
@ -32,7 +34,9 @@ var init = function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
mcopy.cfgInit();
|
mcopy.cfgInit();
|
||||||
createWindow();
|
createWindow();
|
||||||
|
//createMenu();
|
||||||
log.init();
|
log.init();
|
||||||
|
light.init();
|
||||||
arduino = require('./lib/mcopy-arduino.js')(mcopy.cfg);
|
arduino = require('./lib/mcopy-arduino.js')(mcopy.cfg);
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
arduino.init(function (err, device) {
|
arduino.init(function (err, device) {
|
||||||
|
@ -52,14 +56,144 @@ var init = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
var createMenu = 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 () {
|
var createWindow = function () {
|
||||||
'use strict';
|
'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.loadURL('file://' + __dirname + '/index.html');
|
||||||
//mainWindow.webContents.openDevTools();
|
mainWindow.webContents.openDevTools();
|
||||||
mainWindow.on('closed', function() {
|
mainWindow.on('closed', function() {
|
||||||
mainWindow = null;
|
mainWindow = null;
|
||||||
});
|
});
|
||||||
|
@ -68,9 +202,9 @@ var createWindow = function () {
|
||||||
app.on('ready', init);
|
app.on('ready', init);
|
||||||
|
|
||||||
app.on('window-all-closed', function () {
|
app.on('window-all-closed', function () {
|
||||||
if (process.platform !== 'darwin') {
|
//if (process.platform !== 'darwin') {
|
||||||
app.quit();
|
app.quit();
|
||||||
}
|
//}
|
||||||
});
|
});
|
||||||
|
|
||||||
app.on('activate', function () {
|
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 = {};
|
var light = {};
|
||||||
|
light.init = function () {
|
||||||
light.set = function (rgb) {
|
|
||||||
'use strict';
|
'use strict';
|
||||||
var str = rgb.join(','),
|
light.listen();
|
||||||
deferred = Q.defer();
|
};
|
||||||
|
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 () {
|
arduino.send(mcopy.cfg.arduino.cmd.light, function () {
|
||||||
log.info('Light set to ' + str, 'LIGHT', true, true);
|
light.end(rgb, id);
|
||||||
return deferred.resolve(mcopy.cfg.arduino.cmd.light);
|
|
||||||
});
|
});
|
||||||
arduino.string(str);
|
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 = {};
|
var log = {};
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
"description": "16mm optical printer",
|
"description": "16mm optical printer",
|
||||||
"main": "main.js",
|
"main": "main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "electron main.js"
|
"start": "gulp && electron main.js"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
@ -31,6 +31,7 @@
|
||||||
"gulp-less": "^3.0.5"
|
"gulp-less": "^3.0.5"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"humanize-duration": "^3.7.0",
|
||||||
"moment": "^2.12.0",
|
"moment": "^2.12.0",
|
||||||
"node-notifier": "^4.5.0",
|
"node-notifier": "^4.5.0",
|
||||||
"node-uuid": "^1.4.7",
|
"node-uuid": "^1.4.7",
|
||||||
|
|
653
app/src/index.js
653
app/src/index.js
|
@ -1,10 +1,14 @@
|
||||||
var remote = require('remote'),
|
var remote = require('remote'),
|
||||||
|
dialog = require('electron').remote.dialog,
|
||||||
fs = require('fs'),
|
fs = require('fs'),
|
||||||
uuid = require('node-uuid'),
|
uuid = require('node-uuid'),
|
||||||
|
moment = require('moment'),
|
||||||
|
humanizeDuration = require('humanize-duration')
|
||||||
ipcRenderer = require('electron').ipcRenderer,
|
ipcRenderer = require('electron').ipcRenderer,
|
||||||
mcopy = {},
|
mcopy = {},
|
||||||
light = {},
|
light = {},
|
||||||
nav = {},
|
nav = {},
|
||||||
|
seq = {},
|
||||||
gui = {},
|
gui = {},
|
||||||
log = {};
|
log = {};
|
||||||
//console.log(ipcRenderer.sendSync('light', { 'fuck' : true }) );
|
//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
|
State shared by ALL interfaces
|
||||||
*******/
|
*******/
|
||||||
mcopy.state = {
|
mcopy.state = {
|
||||||
version : 'alpha', //use for file compatibility check
|
version : '2.0.0', //use for file compatibility check
|
||||||
camera : {
|
camera : {
|
||||||
pos : 0,
|
pos : 0,
|
||||||
direction: true
|
direction: true
|
||||||
|
@ -27,6 +31,7 @@ mcopy.state = {
|
||||||
sequence : {
|
sequence : {
|
||||||
size : 24,
|
size : 24,
|
||||||
arr : ['CF', 'PF'],
|
arr : ['CF', 'PF'],
|
||||||
|
light : ['255,255,255', ''],
|
||||||
cmd : {
|
cmd : {
|
||||||
camera: mcopy.cfg.arduino.cmd.camera,
|
camera: mcopy.cfg.arduino.cmd.camera,
|
||||||
projector: mcopy.cfg.arduino.cmd.projector,
|
projector: mcopy.cfg.arduino.cmd.projector,
|
||||||
|
@ -40,7 +45,9 @@ mcopy.state = {
|
||||||
|
|
||||||
cam_backward: 'CB',
|
cam_backward: 'CB',
|
||||||
proj_backward : 'PB',
|
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);
|
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
|
Sequencer grid
|
||||||
*******/
|
*******/
|
||||||
gui.grid = {};
|
gui.grid = {};
|
||||||
gui.grid.layout = function () {
|
gui.grid.swatchesElem = {};
|
||||||
|
gui.grid.init = function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
gui.grid.refresh();
|
gui.grid.refresh();
|
||||||
//mcopy.seq.stats();
|
seq.stats();
|
||||||
|
gui.grid.events();
|
||||||
};
|
};
|
||||||
|
|
||||||
gui.grid.state = function (i) {
|
gui.grid.state = function (i) {
|
||||||
'use strict';
|
'use strict';
|
||||||
if (mcopy.state.sequence.arr[i] !== undefined) {
|
var elem = $('input[x=' + i + ']'),
|
||||||
$('input[x=' + i + ']').prop('checked', false);
|
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);
|
$('.' + 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 () {
|
gui.grid.refresh = function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
var cmds = ['cam_forward', 'proj_forward', 'black_forward', 'cam_backward', 'proj_backward', 'black_backward'],
|
var cmds = ['cam_forward', 'proj_forward', 'cam_backward', 'proj_backward', 'light_set', 'numbers'],
|
||||||
check = '',
|
check = '<input type="checkbox" x="xxxx" />',
|
||||||
width = 970 + ((940 / 24) * Math.abs(24 - mcopy.state.sequence.size));
|
div = '<div x="xxxx"></div>',
|
||||||
|
elem,
|
||||||
|
width = 970 - 34 + ((940 / 24) * Math.abs(24 - mcopy.state.sequence.size));
|
||||||
$('#sequence').width(width + 'px');
|
$('#sequence').width(width + 'px');
|
||||||
for (var i = 0; i < cmds.length; i++) {
|
for (var i = 0; i < cmds.length; i++) {
|
||||||
$('#' + cmds[i]).empty();
|
$('#' + cmds[i]).empty();
|
||||||
for (var x = 0; x < mcopy.state.sequence.size; x++) {
|
for (var x = 0; x < mcopy.state.sequence.size; x++) {
|
||||||
check = '<input type="checkbox" x="xxxx" />'.replace('xxxx', x);
|
|
||||||
|
|
||||||
if (i === cmds.length - 1) {
|
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 {
|
} 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);
|
gui.grid.state(x);
|
||||||
}
|
}
|
||||||
|
@ -140,66 +445,221 @@ gui.grid.refresh = function () {
|
||||||
};
|
};
|
||||||
gui.grid.click = function (t) {
|
gui.grid.click = function (t) {
|
||||||
'use strict';
|
'use strict';
|
||||||
var i = parseInt($(t).attr('x'));
|
var i = parseInt($(t).attr('x')),
|
||||||
|
cmd;
|
||||||
if ($(t).prop('checked')) {
|
if ($(t).prop('checked')) {
|
||||||
mcopy.log( $(t).attr('class').replace('.', ''));
|
cmd = $(t).attr('class').replace('.', '');
|
||||||
mcopy.state.sequence.arr[i] = $(t).attr('class').replace('.', '');
|
mcopy.state.sequence.arr[i] = cmd;
|
||||||
gui.grid.state(i);
|
if (cmd === 'CF'
|
||||||
|
|| cmd === 'CB') {
|
||||||
|
mcopy.state.sequence.light[i] = light.color.join(',');
|
||||||
|
} else {
|
||||||
|
mcopy.state.sequence.light[i] = '';
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
mcopy.state.sequence.arr[i] = undefined;
|
mcopy.state.sequence.arr[i] = undefined;
|
||||||
delete mcopy.state.sequence.arr[i];
|
delete mcopy.state.sequence.arr[i];
|
||||||
}
|
}
|
||||||
mcopy.seq.stats();
|
gui.grid.state(i);
|
||||||
|
seq.stats();
|
||||||
};
|
};
|
||||||
gui.grid.clear = function () {
|
gui.grid.clear = function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
var doit = confirm('Are you sure you want to clear this sequence?');
|
var doit = confirm('Are you sure you want to clear this sequence?');
|
||||||
if (doit) {
|
if (doit) {
|
||||||
mcopy.seq.clear();
|
seq.clear();
|
||||||
gui.grid.refresh();
|
gui.grid.refresh();
|
||||||
mcopy.seq.stats();
|
seq.stats();
|
||||||
mcopy.log('Sequencer cleared');
|
console.log('Sequencer cleared');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
gui.grid.loopChange = function (t) {
|
gui.grid.loopChange = function (t) {
|
||||||
'use strict';
|
'use strict';
|
||||||
count = parseInt(t.value);
|
var count = parseInt(t.value);
|
||||||
mcopy.loop = count;
|
mcopy.loop = count;
|
||||||
mcopy.log('Loop count set to ' + mcopy.loop);
|
console.log('Loop count set to ' + mcopy.loop);
|
||||||
mcopy.seq.stats();
|
seq.stats();
|
||||||
};
|
};
|
||||||
gui.grid.plus_24 = function () {
|
gui.grid.plus_24 = function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
mcopy.state.sequence.size += 24;
|
mcopy.state.sequence.size += 24;
|
||||||
gui.grid.refresh();
|
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 () {
|
gui.grid.events = function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
$(document.body).on('click', 'input[type=checkbox]', function () {
|
$(document.body).on('click', '#sequencer input[type=checkbox]', function () {
|
||||||
gui.grid.click(this);
|
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
|
||||||
light.preview = false;
|
light.preview_state = false; //light is on/off for preview viewing
|
||||||
light.color = [0, 0, 0]; //preview status
|
light.color = [255, 255, 255]; //default color
|
||||||
light.current = [0, 0, 0]; //last sent
|
light.current = [0, 0, 0]; //last sent
|
||||||
|
light.rgb_on = false;
|
||||||
light.icon = {};
|
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 () {
|
light.init = function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
light.listen();
|
||||||
|
|
||||||
|
//create dynamic style for displaying light across screens
|
||||||
light.icon = document.createElement('style');
|
light.icon = document.createElement('style');
|
||||||
light.icon.innerHTML = 'span.mcopy-light{background-color: #000;}';
|
light.icon.innerHTML = 'span.mcopy-light{background-color: #000;}';
|
||||||
document.body.appendChild(light.icon);
|
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({
|
$('#colors-tabs').w2tabs({
|
||||||
name: 'colors',
|
name: 'colors',
|
||||||
active: 'rgb',
|
active: 'rgb',
|
||||||
tabs: [
|
tabs: [
|
||||||
{ id: 'rgb', caption: 'RGB' },
|
{ id: 'kelvin', caption: 'Kelvin'},
|
||||||
{ id: 'cmy', caption: 'CMY'},
|
{ id: 'cmy', caption: 'CMY'},
|
||||||
{ id: 'kelvin', caption: 'Kelvin'}
|
{ id: 'rgb', caption: 'RGB' }
|
||||||
],
|
],
|
||||||
onClick: function (event) {
|
onClick: function (event) {
|
||||||
//$('#colors-content').html('Tab: ' + event.target);
|
//$('#colors-content').html('Tab: ' + event.target);
|
||||||
|
@ -256,33 +716,63 @@ light.init = function () {
|
||||||
//console.dir(type);
|
//console.dir(type);
|
||||||
var a = colors.RND.rgb,
|
var a = colors.RND.rgb,
|
||||||
rgb = [a.r, a.g, a.b];
|
rgb = [a.r, a.g, a.b];
|
||||||
|
light.preview(rgb);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
light.preview = function (rgb) {
|
||||||
|
'use strict';
|
||||||
|
var rgbStr = 'rgb(' + rgb.join(',') + ')';
|
||||||
light.color = rgb;
|
light.color = rgb;
|
||||||
if (light.preview) {
|
$('#light-swatches .swatch.set').css('background', rgbStr)
|
||||||
|
.attr('color', rgb.join(','))
|
||||||
|
.prop('title', rgbStr);
|
||||||
|
|
||||||
|
if (light.preview_state) {
|
||||||
light.display(rgb);
|
light.display(rgb);
|
||||||
light.set(rgb);
|
light.set(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]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
//rgb = [0,0,0]
|
light.display = function (rgb) { //display light active state
|
||||||
light.set = function (rgb) {
|
|
||||||
'use strict';
|
|
||||||
light.current = rgb;
|
|
||||||
return ipcRenderer.sendSync('light', rgb);
|
|
||||||
};
|
|
||||||
light.display = function (rgb) {
|
|
||||||
'use strict';
|
'use strict';
|
||||||
var str,
|
var str,
|
||||||
i;
|
i;
|
||||||
|
@ -296,14 +786,65 @@ light.display = function (rgb) {
|
||||||
light.icon.deleteRule(0);
|
light.icon.deleteRule(0);
|
||||||
light.icon.insertRule('span.mcopy-light{background-color: ' + str + ';}', 0)
|
light.icon.insertRule('span.mcopy-light{background-color: ' + str + ';}', 0)
|
||||||
};
|
};
|
||||||
light.color_on = false;
|
|
||||||
light.color_init = function () {
|
light.color_init = function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
if (!light.color_on) {
|
if (!light.rgb_on) {
|
||||||
$('#rgb').focus();
|
$('#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 () {
|
nav.init = function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
@ -336,7 +877,7 @@ nav.change = function (id) {
|
||||||
var init = function () {
|
var init = function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
nav.init();
|
nav.init();
|
||||||
gui.grid.layout();
|
|
||||||
log.init();
|
log.init();
|
||||||
|
gui.grid.init();
|
||||||
light.init();
|
light.init();
|
||||||
};
|
};
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue