16mm
/
filmout_manager
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity
filmout_manager/views/index.hbs

286 lines
11 KiB
Handlebars
Raw Permalink Normal View History

Add all work on filmout manager from laptop
2024-05-08 21:08:47 +00:00
<!doctype html>
<html>
<head>
<title>Filmout Manager</title>
Use 98.css to style app. Add logging to mock mode.
2024-07-31 19:07:09 +00:00
<link rel="stylesheet" href="/static/css/98.min.css" />
<link rel="stylesheet" href="/static/css/style.css" />
Add all work on filmout manager from laptop
2024-05-08 21:08:47 +00:00
</head>
<body>
Use 98.css to style app. Add logging to mock mode.
2024-07-31 19:07:09 +00:00
<div class="window" id="main">
Add fonts. Update UI to open/close and select a sequence.
2024-08-01 15:57:49 +00:00
<div class="title-bar">
<div class="title-bar-text">
Filmout Manager
</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize" onclick="client.fullscreen();"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
Established several improvments: disabled buttons work more like expected. Started a display UI feature for showing the screen vs the image.
2024-08-16 04:52:46 +00:00
<div>
<ul class="tree-view" id="display"><canvas></canvas></ul>
Fixed display of multiple boxes in fieldset
2024-08-19 19:08:48 +00:00
<div class="flex">
All work on focus feature (still in progress)
2024-10-22 03:51:38 +00:00
<fieldset id="screenResolution" class="inline quarter">
Start work on better layout. Abuse and modify the fieldset tag design.
2024-08-18 13:10:37 +00:00
<legend>Screen</legend>
<span class="field-row">
<label for="width">Width</label>
<input id="width" type="text" value="{{width}}" readonly />
</span>
<span class="field-row">
<label for="height">Height</label>
<input id="height" type="text" value="{{height}}" readonly />
</span>
</fieldset>
All work on focus feature (still in progress)
2024-10-22 03:51:38 +00:00
<fieldset id="sourceResolution" class="inline quarter">
All template work
2024-08-19 19:01:25 +00:00
<legend>Source</legend>
<span class="field-row">
<label for="sourceWidth">Width</label>
<input id="sourceWidth" type="text" value="0" readonly />
</span>
<span class="field-row">
<label for="sourceHeight">Height</label>
<input id="sourceHeight" type="text" value="0" readonly />
</span>
</fieldset>
All work on focus feature (still in progress)
2024-10-22 03:51:38 +00:00
<fieldset id="displayResolution" class="inline quarter">
Start work on better layout. Abuse and modify the fieldset tag design.
2024-08-18 13:10:37 +00:00
<legend>Display</legend>
<span class="field-row">
<label for="displayWidth">Width</label>
<input id="displayWidth" type="text" value="0" readonly />
</span>
<span class="field-row">
<label for="displayHeight">Height</label>
<input id="displayHeight" type="text" value="0" readonly />
</span>
</fieldset>
All work on focus feature (still in progress)
2024-10-22 03:51:38 +00:00
<fieldset id="offsetPosition" class="inline quarter">
<legend>Offset</legend>
<span class="field-row">
<label for="offsetLeft">Left</label>
<input id="offsetLeft" type="text" value="0" readonly />
</span>
<span class="field-row">
Add position adjustment logic and size adjustment logic. Still need to complete scale and fix an issue with letterboxed images just discovered with a 4:3 monitor
2024-10-22 19:04:25 +00:00
<label for="offsetTop">Top</label>
All work on focus feature (still in progress)
2024-10-22 03:51:38 +00:00
<input id="offsetTop" type="text" value="0" readonly />
</span>
</fieldset>
Add fonts. Update UI to open/close and select a sequence.
2024-08-01 15:57:49 +00:00
</div>
</div>
<!--
<select name="video" id="video">
<option> - Select Video - </option>
{{#each videos}}
<option value="{{this.hash}}">{{this.name}}</option>
{{/each}}
</select>
-->
Added any number of untold features. Saving.
2024-08-24 14:23:15 +00:00
<div class="flex">
<fieldset id="sequenceSelect" class="inline half">
All template work
2024-08-19 19:01:25 +00:00
<legend>Sequence</legend>
Added any number of untold features. Saving.
2024-08-24 14:23:15 +00:00
<form id="sequenceSelectForm" onsubmit="return false;">
Add all work on statistics. Still need to add work on display manipulation but the ground is laid.
2024-10-19 02:13:52 +00:00
<select name="sequence" id="sequence" oninput="client.edited(this);">
All template work
2024-08-19 19:01:25 +00:00
<option> - Select Image Sequence - </option>
{{#each sequences}}
<option value="{{this.hash}}">{{this.name}}</option>
{{/each}}
</select>
<button id="select" onclick="client.sendSelect();">Select</button>
</form>
</fieldset>
All work on manual exposure control. Disable image controls UI for now (needs more thought and positional guardrails). Placeholder types for SequenceStatistics which will have data and estimates about completion times.
2024-10-18 03:06:37 +00:00
<fieldset id="exposureCtrl" class="inline half">
<legend>Exposure</legend>
<form id="exposureCtrlForm" onsubmit="return false;">
Add all work on statistics. Still need to add work on display manipulation but the ground is laid.
2024-10-19 02:13:52 +00:00
<input id="exposure" class="large exposureCtrl" type="number" value="0" oninput="client.edited(this);" disabled />
All work on manual exposure control. Disable image controls UI for now (needs more thought and positional guardrails). Placeholder types for SequenceStatistics which will have data and estimates about completion times.
2024-10-18 03:06:37 +00:00
<span>ms </span>
<button id="exposureUpdate" class="exposureCtrl" onclick="client.sendExposure();">Update</button>
Added any number of untold features. Saving.
2024-08-24 14:23:15 +00:00
</form>
</fieldset>
Established several improvments: disabled buttons work more like expected. Started a display UI feature for showing the screen vs the image.
2024-08-16 04:52:46 +00:00
</div>
UI updates and improved client connection logic to allow for multiple machines.
2024-08-24 20:26:49 +00:00
<div class="flex">
Add all work on statistics. Still need to add work on display manipulation but the ground is laid.
2024-10-19 02:13:52 +00:00
<div class="half">
<div>
<fieldset id="sequenceCtrl">
<legend>Sequence Controls</legend>
<form id="sequenceCtrlForm" onsubmit="return false;">
<button id="start" class="medium sequenceCtrl" onclick="client.sendStart();" disabled>Start</button>
<button id="stop" class="medium sequenceCtrl" onclick="client.sendStop();" disabled>Stop</button>
<button id="rewind" class="small sequenceCtrl" onclick="client.sendToStart();" disabled><<</button>
<button id="rewind" class="small sequenceCtrl" onclick="client.sendRewind();" disabled><</button>
<input id="frame" type="number" value="00000" class="sequenceCtrl large" oninput="client.edited(this);" onchange="client.sendFrameSet();" disabled />
<button id="advance" class="small sequenceCtrl" onclick="client.sendAdvance()" disabled>></button>
<button id="advance" class="small sequenceCtrl" onclick="client.sendToEnd()" disabled>>></button>
</form>
</fieldset>
</div>
<div>
<fieldset id="manualCtrl">
<legend>Manual Controls</legend>
<form id="manualCtrlForm" onsubmit="return false;" >
<button id="open" class="manualCtrl" onclick="client.sendCameraOpen()">Open</button>
<button id="close" class="manualCtrl" onclick="client.sendCameraClose()">Close</button>
All work on focus feature (still in progress)
2024-10-22 03:51:38 +00:00
<button id="focus" class="manualCtrl" onclick="client.sendFocus();">Focus</button>
Add framing feature. Also only works correctly when sequence is selected but that's okay for now. Resolves #2
2024-10-24 15:23:33 +00:00
<button id="framing" class="manualCtrl" onclick="client.sendFraming();">Framing</button>
Add all work on statistics. Still need to add work on display manipulation but the ground is laid.
2024-10-19 02:13:52 +00:00
</form>
</fieldset>
</div>
</div>
<div class="half">
<fieldset id="displayAdjust" class="inline half">
<legend>Display Adjust</legend>
<form id="displayAdjustForm" onsubmit="return false;">
All work on focus feature (still in progress)
2024-10-22 03:51:38 +00:00
<span>
<div></div>
<div>
Add position adjustment logic and size adjustment logic. Still need to complete scale and fix an issue with letterboxed images just discovered with a 4:3 monitor
2024-10-22 19:04:25 +00:00
<button class="small manualCtrl" id="offsetXMinus" onclick="client.sendOffset(-1, 0);" disabled>←</button>
All work on focus feature (still in progress)
2024-10-22 03:51:38 +00:00
</div>
<div></div>
</span>
<span>
<div>
Add position adjustment logic and size adjustment logic. Still need to complete scale and fix an issue with letterboxed images just discovered with a 4:3 monitor
2024-10-22 19:04:25 +00:00
<button class="small manualCtrl" id="offsetYPlus" onclick="client.sendOffset(0, -1);" disabled>↑</button>
All work on focus feature (still in progress)
2024-10-22 03:51:38 +00:00
</div>
<div>
Position
</div>
<div>
Add position adjustment logic and size adjustment logic. Still need to complete scale and fix an issue with letterboxed images just discovered with a 4:3 monitor
2024-10-22 19:04:25 +00:00
<button class="small manualCtrl" id="offsetYMinus" onclick="client.sendOffset(0, 1);" disabled>↓</button>
All work on focus feature (still in progress)
2024-10-22 03:51:38 +00:00
</div>
</span>
<span>
<div></div>
<div>
Add position adjustment logic and size adjustment logic. Still need to complete scale and fix an issue with letterboxed images just discovered with a 4:3 monitor
2024-10-22 19:04:25 +00:00
<button class="small manualCtrl" id="offsetXPlus" onclick="client.sendOffset(1, 0);" disabled>→</button>
All work on focus feature (still in progress)
2024-10-22 03:51:38 +00:00
</div>
<div></div>
</span>
<span>
Add position adjustment logic and size adjustment logic. Still need to complete scale and fix an issue with letterboxed images just discovered with a 4:3 monitor
2024-10-22 19:04:25 +00:00
<div style="width: 30px;">&nbsp;</div>
</span>
<span>
<div></div>
<div>
<button class="small manualCtrl" id="widthMinus" onclick="client.sendSize(-1, 0);" disabled>W -</button>
</div>
<div></div>
</span>
<span>
<div>
<button class="small manualCtrl" id="heightPlus" onclick="client.sendSize(0, 1);" disabled>H +</button>
</div>
<div>Size</div>
<div>
<button class="small manualCtrl" id="heightMinus" onclick="client.sendSize(0, -1);" disabled>H -</button>
</div>
</span>
<span>
<div></div>
<div>
<button class="small manualCtrl" id="widthPlus" onclick="client.sendSize(1, 0);" disabled>W +</button>
</div>
<div></div>
</span>
<span>
<div style="width: 30px;">&nbsp;</div>
</span>
<span>
<div>
<button class="small manualCtrl" id="scalePlus" onclick="client.sendScale(2);" disabled>S +</button>
</div>
<div>Scale</div>
<div>
<button class="small manualCtrl" id="scaleMinus" onclick="client.sendScale(-2);" disabled>S -</button>
</div>
All work on focus feature (still in progress)
2024-10-22 03:51:38 +00:00
</span>
Add all work on statistics. Still need to add work on display manipulation but the ground is laid.
2024-10-19 02:13:52 +00:00
</form>
</fieldset>
</div>
Add fonts. Update UI to open/close and select a sequence.
2024-08-01 15:57:49 +00:00
</div>
<div>
Add all work on statistics. Still need to add work on display manipulation but the ground is laid.
2024-10-19 02:13:52 +00:00
<fieldset id="statistics" class="inline">
<legend>Statistics</legend>
<form id="statisticsForm" onsubmit="return false;" class="flex">
<div id="statisticsFrame" class="quarter">
<div>
Round all numbers in stats using roundDigits
2024-10-20 12:53:25 +00:00
<label for="statsFrameTotalAvg">Frame Total Avg</label><input id="statsFrameTotalAvg" class="large" type="text" readonly value="0" /><span> ms ±</span>
Add all work on statistics. Still need to add work on display manipulation but the ground is laid.
2024-10-19 02:13:52 +00:00
<input id="statsFrameTotalMargin" class="small" type="text" readonly value="0"/><span>%</span>
</div>
<div>
<label for="statsFrameTotalLast">Frame Total Last</label><input id="statsFrameTotalLast" class="large" type="text" readonly value="0" /><span> ms</span>
</div>
<div>
<label for="statsFPS">FPS</label><input id="statsFPS" class="large" type="text" readonly value="0" />
</div>
<div>
Round all numbers in stats using roundDigits
2024-10-20 12:53:25 +00:00
<label for="statsFrameLoadAvg">Frame Load Avg</label><input id="statsFrameLoadAvg" class="large" type="text" readonly value="0" /><span> ms ±</span>
Add all work on statistics. Still need to add work on display manipulation but the ground is laid.
2024-10-19 02:13:52 +00:00
<input id="statsFrameLoadMargin" class="small" type="text" readonly value="0"/><span>%</span>
</div>
</div>
<div id="statisticsOpenClose" class="quarter">
<div>
Round all numbers in stats using roundDigits
2024-10-20 12:53:25 +00:00
<label for="statsFrameOpenAvg">Cam Open Avg</label><input id="statsFrameOpenAvg" class="large" type="text" readonly value="0" /><span> ms ±</span>
Add all work on statistics. Still need to add work on display manipulation but the ground is laid.
2024-10-19 02:13:52 +00:00
<input id="statsFrameOpenMargin" class="small" type="text" readonly value="0"/><span>%</span>
</div>
<div>
<label for="statsFrameOpenLast">Frame Open Last</label><input id="statsFrameOpenLast" class="large" type="text" readonly value="0" /><span> ms</span>
</div>
<div>
Round all numbers in stats using roundDigits
2024-10-20 12:53:25 +00:00
<label for="statsFrameCloseAvg">Cam Close Avg</label><input id="statsFrameCloseAvg" class="large" type="text" readonly value="0" /><span> ms ±</span>
Add all work on statistics. Still need to add work on display manipulation but the ground is laid.
2024-10-19 02:13:52 +00:00
<input id="statsFrameCloseMargin" class="small" type="text" readonly value="0"/><span>%</span>
</div>
<div>
<label for="statsFrameCloseLast">Frame Close Last</label><input id="statsFrameCloseLast" class="large" type="text" readonly value="0" /><span> ms</span>
</div>
</div>
<div id="statisticsExposure" class="quarter">
<div>
Round all numbers in stats using roundDigits
2024-10-20 12:53:25 +00:00
<label for="statsExposureAvg">Exposure Avg</label><input id="statsExposureAvg" class="large" type="text" readonly value="0" /><span> ms ±</span>
Add all work on statistics. Still need to add work on display manipulation but the ground is laid.
2024-10-19 02:13:52 +00:00
<input id="statsExposureMargin" class="small" type="text" readonly value="0"/><span>%</span>
</div>
<div>
<label for="statsExposureLast">Exposure Last</label><input id="statsExposureLast" class="large" type="text" readonly value="0" /><span> ms</span>
</div>
<div>
<label for="statsExposureLast">Equivalent</label><input id="statsExposureEquivalent" class="large" type="text" readonly value="1s" /><span> ms</span>
</div>
</div>
<div id="statisticsTiming" class="quarter">
Display the statistics in an organizing way
2024-10-20 01:15:52 +00:00
<div>
<label for="statsElapsed">Elapsed</label>
<input id="statsElapsed" class="large" type="text" readonly value="0" /><span> ms</span>
</div>
<div>
<label for="statsElapsedHuman"> </label>
<input id="statsElapsedHuman" type="text" class="xlarge" readonly value="" />
</div>
<div>
<label for="statsEstimate">Remaining</label>
<input id="statsEstimate" class="large" type="text" readonly value="0" /><span> ms</span>
</div>
<div>
<label for="statsEstimateHuman"> </label>
<input id="statsEstimateHuman" type="text" class="xlarge" readonly value="" />
</div>
Add all work on statistics. Still need to add work on display manipulation but the ground is laid.
2024-10-19 02:13:52 +00:00
</div>
All template work
2024-08-19 19:01:25 +00:00
</form>
</fieldset>
Added ffprobe functionality. On UI side, enable and disable buttons via class to prevent user error
2024-08-09 20:20:07 +00:00
</div>
<div>
Established several improvments: disabled buttons work more like expected. Started a display UI feature for showing the screen vs the image.
2024-08-16 04:52:46 +00:00
<progress id="progress"></progress>
Add fonts. Update UI to open/close and select a sequence.
2024-08-01 15:57:49 +00:00
</div>
<div class="status-bar" id="status">
Established several improvments: disabled buttons work more like expected. Started a display UI feature for showing the screen vs the image.
2024-08-16 04:52:46 +00:00
<p class="status-bar-field" id="sequenceStatus">Idle</p>
<p class="status-bar-field" id="sequenceName">Not Set</p>
Added any number of untold features. Saving.
2024-08-24 14:23:15 +00:00
<p class="status-bar-field" id="progressText">Progress: 0%</p>
Established several improvments: disabled buttons work more like expected. Started a display UI feature for showing the screen vs the image.
2024-08-16 04:52:46 +00:00
<p class="status-bar-field" id="sequenceLength">Sequence Length: 0</p>
Add fonts. Update UI to open/close and select a sequence.
2024-08-01 15:57:49 +00:00
</div>
Use 98.css to style app. Add logging to mock mode.
2024-07-31 19:07:09 +00:00
</div>
Display now properly calculates position for displaying images. Move towards a send-everything-to-every-client broadcast model for the server
2024-08-15 02:43:02 +00:00
</div>
<div id="overlay"></div>
UI updates and improved client connection logic to allow for multiple machines.
2024-08-24 20:26:49 +00:00
<script>
const WEBSOCKET_PORT = {{wsPort}};
</script>
Display the statistics in an organizing way
2024-10-20 01:15:52 +00:00
<script src="/static/js/humanize-duration.js"></script>
Add ffmpeg list demux types feature. Add websocket basic server. Add browser build project with stub websocket.
2024-05-15 21:29:59 +00:00
<script src="/static/js/index.js"></script>
Add all work on filmout manager from laptop
2024-05-08 21:08:47 +00:00
</body>
</html>