16mm
/
mcopy
1
0
Fork 0
Code Issues 14 Pull Requests Projects 2 Releases 13 Wiki Activity
mcopy/app/index.html

305 lines
13 KiB
HTML
Raw Normal View History

got up to electron-quick-start level
2016-04-11 06:01:26 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
Add correct jquery
2016-04-12 17:57:59 +00:00
<title>mcopy</title>
Add libraries Add bootstrap w/ slate theme, effect.css, w2ui, jquery
2016-04-12 06:18:33 +00:00
<link href="./css/bootstrap.min.css" rel="stylesheet">
Add font-awesome
2016-04-13 01:04:13 +00:00
<link href="./css/font-awesome.min.css" rel="stylesheet">
Add libraries Add bootstrap w/ slate theme, effect.css, w2ui, jquery
2016-04-12 06:18:33 +00:00
<link href="./css/w2ui-1.4.3.min.css" rel="stylesheet">
<link href="./css/effeckt.css" rel="stylesheet">
Build with spin.js, codemirror, and mscript
2016-04-19 03:44:31 +00:00
<link href="./css/codemirror.min.css" rel="stylesheet">
Add codemirror for editing mscript
2016-04-19 20:49:37 +00:00
<link href="./css/monokai.css" rel="stylesheet">
Add libraries Add bootstrap w/ slate theme, effect.css, w2ui, jquery
2016-04-12 06:18:33 +00:00
<link href="./css/app.css" rel="stylesheet">
got up to electron-quick-start level
2016-04-11 06:01:26 +00:00
</head>
Settings styles. Commands screen styles. Devices represented in UI.
2018-01-09 18:01:19 +00:00
<body onload="init();" style="background:#272b30;">
Add log to footer
2016-04-13 02:05:57 +00:00
<nav id="toolbar"></nav>
<div id="screens">
Sequencer added
2016-04-14 04:17:42 +00:00
<div id="sequencer" class="screen" style="display: block;">
<div id="counters">
<div class="cam">
<label>CAMERA</label>
Lighting GUI complete Able to store swatches of colors in active memory and apply to steps in the sequencer
2016-04-17 21:55:23 +00:00
<input type="number" id="seq_cam_count" class="count" value="00000" onchange="gui.counterFormat(this, mcopy.state.camera.pos);" onblur="gui.updateCam(this);" />
Sequencer added
2016-04-14 04:17:42 +00:00
</div>
<div class="proj">
<label>PROJECTOR</label>
Lighting GUI complete Able to store swatches of colors in active memory and apply to steps in the sequencer
2016-04-17 21:55:23 +00:00
<input type="number" id="seq_proj_count" class="count" value="00000" onchange="gui.counterFormat(this, mcopy.state.projector.pos);" onblur="gui.updateProj(this);" />
Sequencer added
2016-04-14 04:17:42 +00:00
</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>
Lighting GUI complete Able to store swatches of colors in active memory and apply to steps in the sequencer
2016-04-17 21:55:23 +00:00
<div id="cam_backward" class="row spacer" y="0"></div>
Sequencer added
2016-04-14 04:17:42 +00:00
<div id="proj_backward" class="row" y="1"></div>
Lighting GUI complete Able to store swatches of colors in active memory and apply to steps in the sequencer
2016-04-17 21:55:23 +00:00
<div id="light_set" class="row spacer"></div>
<div id="numbers" class="row"></div>
Sequencer added
2016-04-14 04:17:42 +00:00
</div>
Lighting GUI complete Able to store swatches of colors in active memory and apply to steps in the sequencer
2016-04-17 21:55:23 +00:00
<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>
All UI update for new mscript features
2018-03-15 03:17:42 +00:00
<button id="seq_mscript" onclick="mse.mscript.fromSequence();">TO SCRIPT</button>
Lighting GUI complete Able to store swatches of colors in active memory and apply to steps in the sequencer
2016-04-17 21:55:23 +00:00
<input id="seq_scroll_state" type="number" min="0" value="00000" />
Sequencer added
2016-04-14 04:17:42 +00:00
</div>
<div id="seq_stats">
Add codemirror for editing mscript
2016-04-19 20:49:37 +00:00
<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>
Sequencer added
2016-04-14 04:17:42 +00:00
</div>
Fix loop bug. When selection a video as a projector (need to work on this metaphor) the loops are automatically set. Previous issues were due to id re-use. Also, (almost) you can choose a light color value that a frame will be overlayed on with a Darken composite mode. This is almost working but is kludgey because the first frame is always coming up black. Will need to make adjustments in the light module.
2019-02-11 06:08:20 +00:00
<div id="seq_loop_wrap">
Sequencer added
2016-04-14 04:17:42 +00:00
<h3>LOOPS</h3>
Lighting GUI complete Able to store swatches of colors in active memory and apply to steps in the sequencer
2016-04-17 21:55:23 +00:00
<input type="number" min="1" id="seq_loop" value="00001" onchange="this.value = gui.fmtZero(this.value, 6); gui.grid.loopChange(this);"/>
Display the current loop state below the loop counter setting
2017-12-20 22:12:45 +00:00
<div id="loop_current"></div>
Sequencer added
2016-04-14 04:17:42 +00:00
</div>
</div>
Add codemirror for editing mscript
2016-04-19 20:49:37 +00:00
<div id="script" class="screen">
<textarea id="editor"></textarea>
Move mscript commands into footer of the text editor
2018-03-05 04:57:45 +00:00
<footer id="console">
Reposition icons within the command buttons
2018-02-01 19:54:12 +00:00
<div id="mscript_cmd">
All UI update for new mscript features
2018-03-15 03:17:42 +00:00
<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>
Reposition icons within the command buttons
2018-02-01 19:54:12 +00:00
</div>
Add codemirror for editing mscript
2016-04-19 20:49:37 +00:00
<textarea>> </textarea>
</footer>
</div>
Set light from UI
2016-04-13 04:06:19 +00:00
<div id="controls" class="screen">
Build with spin.js, codemirror, and mscript
2016-04-19 03:44:31 +00:00
<div id="counters_2">
<div class="cam">
<label>CAMERA</label>
<input type="number" id="seq_cam_count_2" 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_2" class="count" value="00000" onchange="gui.counterFormat(this, mcopy.state.projector.pos);" onblur="gui.updateProj(this);" />
</div>
</div>
All UI update for new mscript features
2018-03-15 03:17:42 +00:00
<div id="move_to">
<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.cam_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.proj_to();">GO TO</button>
</div>
</div>
</div>
Reposition icons within the command buttons
2018-02-01 19:54:12 +00:00
<div id="buttons" class="clearfix">
Remove CMY tab and add command buttons
2018-01-02 06:14:06 +00:00
<div>
Add cmd buttons and styles. Add delay before registering devices when no serial devices are found.
2018-01-02 14:46:05 +00:00
<div>
Add additional icons to command buttons (maybe overkill)
2018-01-06 22:50:53 +00:00
<button id="cmd_cam_forward" onclick="cmd.cam_forward(light.color);" class="cmd fwd">
<i class="fa fa-video-camera"></i>
Reposition icons within the command buttons
2018-02-01 19:54:12 +00:00
CAMERA +1
<i class="fa fa-step-forward"></i>
</button>
Add cmd buttons and styles. Add delay before registering devices when no serial devices are found.
2018-01-02 14:46:05 +00:00
</div>
<div>
Add additional icons to command buttons (maybe overkill)
2018-01-06 22:50:53 +00:00
<button id="cmd_cam_backward" onclick="cmd.cam_backward(light.color);" class="cmd bwd">
<i class="fa fa-video-camera"></i>
Reposition icons within the command buttons
2018-02-01 19:54:12 +00:00
CAMERA -1
<i class="fa fa-step-backward"></i>
</button>
Add cmd buttons and styles. Add delay before registering devices when no serial devices are found.
2018-01-02 14:46:05 +00:00
</div>
<div>
Add additional icons to command buttons (maybe overkill)
2018-01-06 22:50:53 +00:00
<button id="cmd_black_forward" onclick="cmd.black_forward();" class="cmd fwd">
<i class="fa fa-times-circle"></i>
All UI update for new mscript features
2018-03-15 03:17:42 +00:00
BLANK +1
Reposition icons within the command buttons
2018-02-01 19:54:12 +00:00
<i class="fa fa-step-forward"></i>
</button>
Add cmd buttons and styles. Add delay before registering devices when no serial devices are found.
2018-01-02 14:46:05 +00:00
</div>
<div>
Add additional icons to command buttons (maybe overkill)
2018-01-06 22:50:53 +00:00
<button id="cmd_black_backward" onclick="cmd.black_backward();" class="cmd bwd">
<i class="fa fa-times-circle"></i>
All UI update for new mscript features
2018-03-15 03:17:42 +00:00
BLANK -1
Reposition icons within the command buttons
2018-02-01 19:54:12 +00:00
<i class="fa fa-step-backward"></i>
</button>
Add cmd buttons and styles. Add delay before registering devices when no serial devices are found.
2018-01-02 14:46:05 +00:00
</div>
Remove CMY tab and add command buttons
2018-01-02 06:14:06 +00:00
</div>
<div>
Add cmd buttons and styles. Add delay before registering devices when no serial devices are found.
2018-01-02 14:46:05 +00:00
<div>
Reposition icons within the command buttons
2018-02-01 19:54:12 +00:00
<button id="cmd_proj_forward" onclick="cmd.proj_forward();" class="cmd fwd">
Add additional icons to command buttons (maybe overkill)
2018-01-06 22:50:53 +00:00
<i class="fa fa-film"></i>
Reposition icons within the command buttons
2018-02-01 19:54:12 +00:00
PROJECTOR +1
<i class="fa fa-step-forward"></i>
</button>
Add cmd buttons and styles. Add delay before registering devices when no serial devices are found.
2018-01-02 14:46:05 +00:00
</div>
<div>
Reposition icons within the command buttons
2018-02-01 19:54:12 +00:00
<button id="cmd_proj_backward" onclick="cmd.proj_backward();" class="cmd bwd">
Add additional icons to command buttons (maybe overkill)
2018-01-06 22:50:53 +00:00
<i class="fa fa-film"></i>
Reposition icons within the command buttons
2018-02-01 19:54:12 +00:00
PROJECTOR -1
<i class="fa fa-step-backward"></i>
</button>
Add cmd buttons and styles. Add delay before registering devices when no serial devices are found.
2018-01-02 14:46:05 +00:00
</div>
Remove CMY tab and add command buttons
2018-01-02 06:14:06 +00:00
</div>
</div>
Successfully change led color from colorPicker :-3
2016-04-13 07:26:35 +00:00
<footer>
<div id="log"></div>
</footer>
Set light from UI
2016-04-13 04:06:19 +00:00
</div>
Successfully change led color from colorPicker :-3
2016-04-13 07:26:35 +00:00
<div id="light" class="screen">
Display light color from UI with state displayed
2016-04-13 04:44:52 +00:00
<div id="colors-tabs"></div>
<div id="colors-content">
Add kelvin selection UI Set swatches and preview kelvin light
2016-04-18 00:34:18 +00:00
<div id="kelvin-page" class="colors-page" style="display: block;">
Change Kelvin messaging Use Temperature as the heading and Kelvin as the unit
2016-04-18 16:27:15 +00:00
<h3>TEMPERATURE</h3>
Add kelvin selection UI Set swatches and preview kelvin light
2016-04-18 00:34:18 +00:00
<input id="kelvin" type="number" min="0" max="20000" value="0" />
Change Kelvin messaging Use Temperature as the heading and Kelvin as the unit
2016-04-18 16:27:15 +00:00
<h4>KELVIN</h4>
Add kelvin selection UI Set swatches and preview kelvin light
2016-04-18 00:34:18 +00:00
<div id="kelvin-slider">
<div id="kelvin-scale"></div>
<div id="kelvin-pos"></div>
Build out CMY controls for lighting
2016-05-16 14:41:24 +00:00
<div id="kelvin-preview">
rgb(0, 0, 0)
</div>
Add kelvin selection UI Set swatches and preview kelvin light
2016-04-18 00:34:18 +00:00
</div>
</div>
Remove CMY tab and add command buttons
2018-01-02 06:14:06 +00:00
<!--<div id="cmy-page" class="colors-page">
Establish CMYK controls in markup
2016-05-13 21:28:51 +00:00
<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>
Build out CMY controls for lighting
2016-05-16 14:41:24 +00:00
<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>
Remove CMY tab and add command buttons
2018-01-02 06:14:06 +00:00
</div>-->
Successfully change led color from colorPicker :-3
2016-04-13 07:26:35 +00:00
<div id="rgb-page" class="colors-page">
<input id="rgb" value="rgb(0, 0, 0)" />
</div>
Display light color from UI with state displayed
2016-04-13 04:44:52 +00:00
</div>
<div id="light-status">
Lighting GUI complete Able to store swatches of colors in active memory and apply to steps in the sequencer
2016-04-17 21:55:23 +00:00
<h3>LIGHT STATUS</h3>
Successfully change led color from colorPicker :-3
2016-04-13 07:26:35 +00:00
<div>
<form>
Lighting GUI complete Able to store swatches of colors in active memory and apply to steps in the sequencer
2016-04-17 21:55:23 +00:00
<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 />
Successfully change led color from colorPicker :-3
2016-04-13 07:26:35 +00:00
</form>
<div id="color"></div>
</div>
Lighting GUI complete Able to store swatches of colors in active memory and apply to steps in the sequencer
2016-04-17 21:55:23 +00:00
<div id="preview-wrap">
<h4><span>PREVIEW</span></h4>
<input type="checkbox" name="preview" id="preview" class="effeckt-ckbox-ios7" />
</div>
Display light color from UI with state displayed
2016-04-13 04:44:52 +00:00
</div>
Lighting GUI complete Able to store swatches of colors in active memory and apply to steps in the sequencer
2016-04-17 21:55:23 +00:00
<footer id="light-swatches">
<div id="new-swatch">
<i class="fa fa-plus"></i>
</div>
</footer>
Set light from UI
2016-04-13 04:06:19 +00:00
</div>
Remove CMY tab and add command buttons
2018-01-02 06:14:06 +00:00
<div id="settings" class="screen">
Settings styles. Commands screen styles. Devices represented in UI.
2018-01-09 18:01:19 +00:00
<div>
<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>
Digital projector feature added. Select a video and it will be displayed on the main monitor (TODO: address this) and the camera will advance in sync, as with a regular optical printer.
2019-02-08 23:21:16 +00:00
<input type="radio" id="projector_type_arduino" name="projector_type" value="arduino" checked="checked" />
Settings styles. Commands screen styles. Devices represented in UI.
2018-01-09 18:01:19 +00:00
</div>
Device UI
2019-02-08 19:28:57 +00:00
<div class="spacer">
Digital projector feature added. Select a video and it will be displayed on the main monitor (TODO: address this) and the camera will advance in sync, as with a regular optical printer.
2019-02-08 23:21:16 +00:00
<input type="text" id="digital" name="digital" placeholder="Digital file" onclick="devices.digitalSelect();" data-file="" readonly />
<input type="radio" id="projector_type" name="projector_type" value="video" onclick="devices.digital();" />
Device UI
2019-02-08 19:28:57 +00:00
</div>
Settings styles. Commands screen styles. Devices represented in UI.
2018-01-09 18:01:19 +00:00
<div>
<h4>Camera</h4>
<select id="camera_device">
<option>Not Set</option>
</select>
Add id's to the INTVAL selection UI
2018-02-01 02:46:21 +00:00
<input type="radio" id="camera_type_arduino" name="camera_type" value="arduino" checked="checked" />
Settings styles. Commands screen styles. Devices represented in UI.
2018-01-09 18:01:19 +00:00
</div>
<div class="spacer">
<input type="text" id="intval" name="intval" placeholder="INTVAL3 URL"/>
Add id's to the INTVAL selection UI
2018-02-01 02:46:21 +00:00
<input type="radio" id="camera_type_intval" name="camera_type" value="intval" onclick="devices.intval();" />
Settings styles. Commands screen styles. Devices represented in UI.
2018-01-09 18:01:19 +00:00
</div>
<div>
<h4>Light</h4>
<select id="light_device">
<option>Not Set</option>
</select>
</div>
Reposition icons within the command buttons
2018-02-01 19:54:12 +00:00
<div>
<h4>Profile</h4>
<select id="profile">
<option>Not Set</option>
</select>
</div>
Settings styles. Commands screen styles. Devices represented in UI.
2018-01-09 18:01:19 +00:00
</div>
Remove CMY tab and add command buttons
2018-01-02 06:14:06 +00:00
</div>
Add log to footer
2016-04-13 02:05:57 +00:00
</div>
Hide spinner and overlay when clicking
2016-04-22 18:34:02 +00:00
<div id="overlay" onclick="gui.overlay(false);gui.spinner(false);"></div>
Add id's to the INTVAL selection UI
2018-02-01 02:46:21 +00:00
<div id="spinner">
<div id="spinnerMsg"></div>
All UI update for new mscript features
2018-03-15 03:17:42 +00:00
<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>
Add id's to the INTVAL selection UI
2018-02-01 02:46:21 +00:00
</div>
Restructure for gulp build of app.js
2016-04-13 00:53:28 +00:00
<script src="./js/app.js"></script>
got up to electron-quick-start level
2016-04-11 06:01:26 +00:00
</body>
</html>