<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>mcopy</title> <link href="./css/bootstrap.min.css" rel="stylesheet"> <link href="./css/font-awesome.min.css" rel="stylesheet"> <link href="./css/w2ui-1.4.3.min.css" rel="stylesheet"> <link href="./css/effeckt.css" rel="stylesheet"> <link href="./css/codemirror.min.css" rel="stylesheet"> <link href="./css/monokai.css" rel="stylesheet"> <link href="./css/app.css" rel="stylesheet"> </head> <body onload="init();" style="background:#272b30;"> <nav id="toolbar"></nav> <div id="screens"> <div id="sequencer" class="screen" style="display: block;"> <div id="counters"> <div class="cam"> <label>CAMERA</label> <input type="number" id="seq_cam_count" class="count" value="00000" onchange="gui.counterFormat(this, cam.pos);" onblur="gui.updateCam(this);" /> </div> <div class="cam2"> <label>CAMERA</label> <input type="number" id="seq_cam_2_count" class="count" value="00000" onchange="gui.counterFormat(this, cam.second.pos);" onblur="gui.updateCam2(this);" /> </div> <div class="proj2"> <label>PROJECTOR 2</label> <input type="number" id="seq_proj_2_count" class="count" value="00000" onchange="gui.counterFormat(this, proj.second.pos);" onblur="gui.updateProj2(this);" /> </div> <div class="proj"> <label>PROJECTOR</label> <input type="number" id="seq_proj_count" class="count" value="00000" onchange="gui.counterFormat(this, proj.pos);" onblur="gui.updateProj(this);" /> </div> </div> <div id="seq_scroll"> <div id="sequence"> <div id="camera_forward" class="row" y="0"></div> <div id="camera_second_forward" class="row cam2" y="2"></div> <div id="projector_forward" class="row" y="1"></div> <div id="projector_second_forward" class="row proj2" y="3"></div> <div id="camera_backward" class="row spacer" y="0"></div> <div id="camera_second_backward" class="row cam2" y="2"></div> <div id="projector_backward" class="row" y="1"></div> <div id="projector_second_backward" class="row proj2" y="3"></div> <div id="black" class="row black"></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 class="cam2"><span>CAM2 </span><i class="fa fa-plus"></i></div> <div><span>PROJ </span><i class="fa fa-plus"></i></div> <div class="proj2"><span>PROJ2 </span><i class="fa fa-plus"></i></div> <div class="spacer"><span>CAM </span><i class="fa fa-minus"></i></div> <div class="cam2"><span>CAM2 </span><i class="fa fa-minus"></i></div> <div><span>PROJ </span><i class="fa fa-minus"></i></div> <div class="proj2"><span>PROJ2 </span><i class="fa fa-minus"></i></div> <div class="black"><span>BLANK </span><i class="fa fa-times"></i></div> <div class="spacer"><span>LIGHT</span></div> </div> </div> <div id="actions"> <button id="seq_run" onclick="seq.start();">START</button> <button id="seq_pause" onclick="seq.pause();">STOP</button> <button id="seq_stop" onclick="seq.stop();">STOP</button> <button id="seq_clear" onclick="grid.clear();">CLEAR</button> <button id="seq_plus24" onclick="grid.plus_24();">+ 24</button> <button id="seq_mscript" onclick="mse.mscript.fromSequence();">TO SCRIPT</button> <input id="seq_scroll_state" type="number" min="0" value="00000" /> </div> <div id="seq_stats"> <div class="seq_count"># of steps: <span>0</span></div> <div class="timing">To complete: <span>0 ms</span></div> <div class="cam_end">Camera end: <span>00000</span></div> <div class="proj_end">Projector end: <span>00000</span></div> </div> <div id="seq_loop_wrap"> <h3>LOOPS</h3> <input type="number" min="1" id="seq_loop" value="00001" onchange="this.value = gui.fmtZero(this.value, 6); seq.setLoops(parseInt(this.value));"/> <div id="loop_current"></div> </div> <div id="seq_progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> <span class="sr-only">0% Complete</span> </div> </div> </div> <div id="script" class="screen"> <textarea id="editor"></textarea> <footer id="console"> <div id="mscript_cmd"> <button id="mscript_compile" onclick="mse.mscript.compile()">COMPILE</button> <button id="mscript_compile" onclick="mse.mscript.run()">RUN</button> <button id="mscript_seq" onclick="mse.mscript.toSequence();">TO SEQUENCE</button> </div> <textarea>> </textarea> </footer> </div> <div id="controls" class="screen"> <div id="counters_2" class="clearfix"> <div class="cam"> <label>CAMERA</label> <input type="number" id="seq_cam_count_2" class="count" value="00000" onchange="gui.counterFormat(this, cam.pos);" onblur="gui.updateCam(this);" /> </div> <div class="proj"> <label>PROJECTOR</label> <input type="number" id="seq_proj_count_2" class="count" value="00000" onchange="gui.counterFormat(this, proj.pos);" onblur="gui.updateProj(this);" /> </div> </div> <div id="move_to" class="clearfix"> <div class="cam"> <!--<label>MOVE TO</label>--> <div> <input type="number" id="move_cam_to" class="count" value="00000" onchange="gui.counterFormat(this, this.value);" /> <button id="move_cam_to_go" onclick="return cmd.camera_to();">GO TO</button> </div> </div> <div class="proj"> <!--<label>MOVE TO</label>--> <div> <input type="number" id="move_proj_to" class="count" value="00000" onchange="gui.counterFormat(this, this.value);"/> <button id="move_proj_to_go" onclick="return cmd.projector_to();">GO TO</button> </div> </div> </div> <div id="buttons" class="clearfix"> <div> <div> <button id="cmd_cam_forward" onclick="cmd.camera_forward(light.color);" class="cmd fwd"> <i class="fa fa-video-camera"></i> CAMERA +1 <i class="fa fa-step-forward"></i> </button> </div> <div> <button id="cmd_cam_backward" onclick="cmd.camera_backward(light.color);" class="cmd bwd"> <i class="fa fa-video-camera"></i> CAMERA -1 <i class="fa fa-step-backward"></i> </button> </div> <div class="hide"> <button id="cmd_black_forward" onclick="cmd.black_forward();" class="cmd fwd"> <i class="fa fa-times-circle"></i> BLANK +1 <i class="fa fa-step-forward"></i> </button> </div> <div class="hide"> <button id="cmd_black_backward" onclick="cmd.black_backward();" class="cmd bwd"> <i class="fa fa-times-circle"></i> BLANK -1 <i class="fa fa-step-backward"></i> </button> </div> <div class="hide"> <button id="cmd_capper_on" onclick="cmd.capper_on();" class="cmd capper"> <i class="fa fa-times-circle"></i> CAPPER ON <i class="fa fa-eye"></i> </button> </div> <div class="hide"> <button id="cmd_capper_off" onclick="cmd.capper_off();" class="cmd capper active"> <i class="fa fa-eye"></i> CAPPER OFF <i class="fa fa-eye"></i> </button> </div> </div> <div> <div> <button id="cmd_proj_forward" onclick="cmd.projector_forward();" class="cmd fwd"> <i class="fa fa-film"></i> PROJECTOR +1 <i class="fa fa-step-forward"></i> </button> </div> <div> <button id="cmd_proj_backward" onclick="cmd.projector_backward();" class="cmd bwd"> <i class="fa fa-film"></i> PROJECTOR -1 <i class="fa fa-step-backward"></i> </button> </div> </div> </div> <div id="counters_3" class="clearfix"> <div class="cam2"> <label>CAMERA 2</label> <input type="number" id="seq_cam_2_count_2" class="count" value="00000" onchange="gui.counterFormat(this, cam.second.pos);" onblur="gui.updateCam2(this);" /> </div> <div class="proj2"> <label>PROJECTOR 2</label> <input type="number" id="seq_proj_2_count_2" class="count" value="00000" onchange="gui.counterFormat(this, proj.second.pos);" onblur="gui.updateProj2(this);" /> </div> </div> <div id="move_to_2" class="clearfix"> <div class="cam2"> <!--<label>MOVE TO</label>--> <div> <input type="number" id="move_cam_to_2" class="count" value="00000" onchange="gui.counterFormat(this, this.value);" /> <button id="move_cam_to_go_2" onclick="return cmd.camera_second_to();">GO TO</button> </div> </div> <div class="proj2"> <!--<label>MOVE TO</label>--> <div> <input type="number" id="move_proj_to_2" class="count" value="00000" onchange="gui.counterFormat(this, this.value);"/> <button id="move_proj_to_go_2" onclick="return cmd.projector_second_to();">GO TO</button> </div> </div> </div> <div id="buttons_2" class="clearfix"> <div class="cam2"> <div> <button id="cmd_cam2_forward" onclick="cmd.camera_second_forward(light.color);" class="cmd fwd"> <i class="fa fa-video-camera"></i> CAMERA 2 +1 <i class="fa fa-step-forward"></i> </button> </div> <div> <button id="cmd_cam2_backward" onclick="cmd.camera_second_backward(light.color);" class="cmd bwd"> <i class="fa fa-video-camera"></i> CAMERA 2 -1 <i class="fa fa-step-backward"></i> </button> </div> <div> <button id="cmd_black2_forward" onclick="cmd.black2_forward();" class="cmd fwd"> <i class="fa fa-times-circle"></i> BLANK +1 <i class="fa fa-step-forward"></i> </button> </div> <div> <button id="cmd_black2_backward" onclick="cmd.black2_backward();" class="cmd bwd"> <i class="fa fa-times-circle"></i> BLANK -1 <i class="fa fa-step-backward"></i> </button> </div> </div> <div class="proj2"> <div> <button id="cmd_proj2_forward" onclick="cmd.projector_second_forward();" class="cmd fwd"> <i class="fa fa-film"></i> PROJECTOR 2 +1 <i class="fa fa-step-forward"></i> </button> </div> <div> <button id="cmd_proj2_backward" onclick="cmd.projector_second_backward();" class="cmd bwd"> <i class="fa fa-film"></i> PROJECTOR 2 -1 <i class="fa fa-step-backward"></i> </button> </div> </div> </div> </div> <div id="light" class="screen"> <div id="colors-tabs"></div> <div id="colors-content"> <div id="kelvin-page" class="colors-page" style="display: block;"> <h3>TEMPERATURE</h3> <input id="kelvin" type="number" min="0" max="20000" value="0" /> <h4>KELVIN</h4> <div id="kelvin-slider"> <div id="kelvin-scale"></div> <div id="kelvin-pos"></div> <div id="kelvin-preview"> rgb(0, 0, 0) </div> </div> </div> <!--<div id="cmy-page" class="colors-page"> <div id="dial-c" class="dial-wrapper"> <div class="dial-container dial-container1"> <div class="dial-wedge"></div> </div> <div class="dial-container dial-container2"> <div class="dial-wedge"></div> </div> <div class="dial-marker dial-start"></div> <div class="dial-marker dial-end"></div> <input type="number" value="1.00" step="0.01" min="0.00" max="1.00" /> </div> <div id="dial-m" class="dial-wrapper"> <div class="dial-container dial-container1"> <div class="dial-wedge"></div> </div> <div class="dial-container dial-container2"> <div class="dial-wedge"></div> </div> <div class="dial-marker dial-start"></div> <div class="dial-marker dial-end"></div> <input type="number" value="1.00" step="0.01" min="0.00" max="1.00" /> </div> <div id="dial-y" class="dial-wrapper"> <div class="dial-container dial-container1"> <div class="dial-wedge"></div> </div> <div class="dial-container dial-container2"> <div class="dial-wedge"></div> </div> <div class="dial-marker dial-start"></div> <div class="dial-marker dial-end"></div> <input type="number" value="1.00" step="0.01" min="0.00" max="1.00" /> </div> <div id="dial-k" class="dial-wrapper"> <div class="dial-container-bg"></div> <div class="dial-container dial-container1"> <div class="dial-wedge"></div> </div> <div class="dial-container dial-container2"> <div class="dial-wedge"></div> </div> <div class="dial-marker dial-start"></div> <div class="dial-marker dial-end"></div> <input type="number" value="1.00" step="0.01" min="0.00" max="1.00" /> </div> <div id="cmy-preview"> rgb(0, 0, 0) </div> </div>--> <div id="rgb-page" class="colors-page"> <input id="rgb" value="rgb(0, 0, 0)" /> </div> </div> <div id="light-status"> <h3>LIGHT STATUS</h3> <div> <form> <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> <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 id="video" class="screen"> <div> <div> <div id="path_bar"> <input id="filmout_file" type="text" onclick="filmout.selectFile();" readonly /> <button onclick="$('#projector_type_digital').click();">USE FILE</button> <select id="filmout_displays"></select> </div> <div id="filmout_preview_wrap"> <div id="filmout_monitor"> <div id="filmout"></div> </div> </div> <div id="filmout_stats"> <div id="filmout_stats_video"> <h3>File</h3> <div id="filmout_stats_video_name"></div> <div id="filmout_stats_video_size"></div> <div id="filmout_stats_video_frames"></div> </div> <div id="filmout_stats_monitor"> <h3>Monitor</h3> <div id="filmout_stats_monitor_size"></div> <div id="filmout_stats_monitor_aspect"></div> <div id="filmout_stats_monitor_scale"></div> </div> </div> <div id="filmout_position_wrap"> <div> <button id="filmout_rewind" title="Rewind 1 Frame" onclick="filmout.rewind();"><</button> <input id="filmout_position" class="count" type="number" value="00000" onchange="gui.counterFormat(this, this.value);" /> <button id="filmout_advance" title="Advance 1 Frame" onclick="filmout.advance();">></button> </div> </div> <div id="filmout_functions"> <div> <button id="filmout_preview" onclick="filmout.preview();">PREVIEW</button> <button id="filmout_meter" onclick="filmout.meter();">METER</button> <button id="filmout_focus" onclick="filmout.focus();">FOCUS</button> <button id="filmout_field" onclick="filmout.field();">FIELD GUIDE</button> </div> </div> </div> </div> </div> <div id="settings" class="screen"> <div class="left"> <div> <h4>Devices</h4> <select id="devices"> <option>Not Set</option> </select> <button title="Refresh devices"><i class="fa fa-refresh"></i></button> </div> <div> <h4>Projector</h4> <select id="projector_device"> <option>Not Set</option> </select> <input type="radio" id="projector_type_arduino" name="projector_type" value="arduino" checked="checked" /> </div> <div class="spacer"> <input type="text" id="digital" name="digital" placeholder="Digital file" onclick="filmout.selectFile();" data-file="" readonly /> <input type="radio" id="projector_type_digital" name="projector_type" value="video" onclick="filmout.useFile();" /> </div> <div> <h4>Camera</h4> <select id="camera_device"> <option>Not Set</option> </select> <input type="radio" id="camera_type_arduino" name="camera_type" value="arduino" checked="checked" /> </div> <div class="spacer"> <input type="text" id="intval" name="intval" placeholder="INTVAL3 URL"/> <input type="radio" id="camera_type_intval" name="camera_type" value="intval" onclick="devices.intval();" /> </div> <div class="spacer"> <input type="text" id="processing" name="processing" placeholder="PROCESSING URL" /> <input type="radio" id="camera_type_processing" name="camera_type" value="processing" onclick="devices.processing();" /> </div> <div> <div id="version"></div> </div> <div> <h4>Light</h4> <select id="light_device"> <option>Not Set</option> </select> </div> <div> <h4>Profile</h4> <select id="profile"> <option>Not Set</option> </select> </div> </div> <div class="right"> <div class="spacer"></div> <div class="proj_time"> <h4>Projector Time (ms)</h4> <input type="number" readonly id="proj_time" value="0" /> <button id="submit_proj_time" class="hide">✓</button> </div> <div class="cam_time"> <h4>Camera Time (ms)</h4> <input type="number" readonly id="cam_time" value="0" /> <button id="submit_cam_time" class="hide" onclick="cam.exposure($('#cam_time').val());">✓</button> </div> </div> </div> </div> <div id="overlay" onclick="gui.overlay(false);gui.spinner(false);"></div> <div id="spinner"> <div id="spinnerMsg"></div> <div id="spinnerCancel"> <div class="btn" style="margin:auto;" onclick="seq.cancel();">Cancel</div> </div> <div id="spinnerProgress" class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> <span class="sr-only">0% Complete</span> </div> </div> </div> <script src="./js/app.js"></script> </body> </html>