286 lines
11 KiB
Handlebars
286 lines
11 KiB
Handlebars
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Filmout Manager</title>
|
|
<link rel="stylesheet" href="/static/css/98.min.css" />
|
|
<link rel="stylesheet" href="/static/css/style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="window" id="main">
|
|
<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">
|
|
<div>
|
|
<ul class="tree-view" id="display"><canvas></canvas></ul>
|
|
<div class="flex">
|
|
<fieldset id="screenResolution" class="inline quarter">
|
|
<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>
|
|
<fieldset id="sourceResolution" class="inline quarter">
|
|
<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>
|
|
<fieldset id="displayResolution" class="inline quarter">
|
|
<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>
|
|
<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">
|
|
<label for="offsetTop">Top</label>
|
|
<input id="offsetTop" type="text" value="0" readonly />
|
|
</span>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<select name="video" id="video">
|
|
<option> - Select Video - </option>
|
|
{{#each videos}}
|
|
<option value="{{this.hash}}">{{this.name}}</option>
|
|
{{/each}}
|
|
</select>
|
|
-->
|
|
<div class="flex">
|
|
<fieldset id="sequenceSelect" class="inline half">
|
|
<legend>Sequence</legend>
|
|
<form id="sequenceSelectForm" onsubmit="return false;">
|
|
<select name="sequence" id="sequence" oninput="client.edited(this);">
|
|
<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>
|
|
<fieldset id="exposureCtrl" class="inline half">
|
|
<legend>Exposure</legend>
|
|
<form id="exposureCtrlForm" onsubmit="return false;">
|
|
<input id="exposure" class="large exposureCtrl" type="number" value="0" oninput="client.edited(this);" disabled />
|
|
<span>ms </span>
|
|
<button id="exposureUpdate" class="exposureCtrl" onclick="client.sendExposure();">Update</button>
|
|
</form>
|
|
</fieldset>
|
|
</div>
|
|
<div class="flex">
|
|
<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>
|
|
<button id="focus" class="manualCtrl" onclick="client.sendFocus();">Focus</button>
|
|
<button id="framing" class="manualCtrl" onclick="client.sendFraming();">Framing</button>
|
|
</form>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="half">
|
|
<fieldset id="displayAdjust" class="inline half">
|
|
<legend>Display Adjust</legend>
|
|
<form id="displayAdjustForm" onsubmit="return false;">
|
|
<span>
|
|
<div></div>
|
|
<div>
|
|
<button class="small manualCtrl" id="offsetXMinus" onclick="client.sendOffset(-1, 0);" disabled>←</button>
|
|
</div>
|
|
<div></div>
|
|
</span>
|
|
<span>
|
|
<div>
|
|
<button class="small manualCtrl" id="offsetYPlus" onclick="client.sendOffset(0, -1);" disabled>↑</button>
|
|
</div>
|
|
<div>
|
|
Position
|
|
</div>
|
|
<div>
|
|
<button class="small manualCtrl" id="offsetYMinus" onclick="client.sendOffset(0, 1);" disabled>↓</button>
|
|
</div>
|
|
</span>
|
|
<span>
|
|
<div></div>
|
|
<div>
|
|
<button class="small manualCtrl" id="offsetXPlus" onclick="client.sendOffset(1, 0);" disabled>→</button>
|
|
</div>
|
|
<div></div>
|
|
</span>
|
|
<span>
|
|
<div style="width: 30px;"> </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;"> </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>
|
|
</span>
|
|
</form>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<fieldset id="statistics" class="inline">
|
|
<legend>Statistics</legend>
|
|
<form id="statisticsForm" onsubmit="return false;" class="flex">
|
|
<div id="statisticsFrame" class="quarter">
|
|
<div>
|
|
<label for="statsFrameTotalAvg">Frame Total Avg</label><input id="statsFrameTotalAvg" class="large" type="text" readonly value="0" /><span> ms ±</span>
|
|
<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>
|
|
<label for="statsFrameLoadAvg">Frame Load Avg</label><input id="statsFrameLoadAvg" class="large" type="text" readonly value="0" /><span> ms ±</span>
|
|
<input id="statsFrameLoadMargin" class="small" type="text" readonly value="0"/><span>%</span>
|
|
</div>
|
|
</div>
|
|
<div id="statisticsOpenClose" class="quarter">
|
|
<div>
|
|
<label for="statsFrameOpenAvg">Cam Open Avg</label><input id="statsFrameOpenAvg" class="large" type="text" readonly value="0" /><span> ms ±</span>
|
|
<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>
|
|
<label for="statsFrameCloseAvg">Cam Close Avg</label><input id="statsFrameCloseAvg" class="large" type="text" readonly value="0" /><span> ms ±</span>
|
|
<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>
|
|
<label for="statsExposureAvg">Exposure Avg</label><input id="statsExposureAvg" class="large" type="text" readonly value="0" /><span> ms ±</span>
|
|
<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">
|
|
<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>
|
|
</div>
|
|
</form>
|
|
</fieldset>
|
|
</div>
|
|
<div>
|
|
<progress id="progress"></progress>
|
|
</div>
|
|
<div class="status-bar" id="status">
|
|
<p class="status-bar-field" id="sequenceStatus">Idle</p>
|
|
<p class="status-bar-field" id="sequenceName">Not Set</p>
|
|
<p class="status-bar-field" id="progressText">Progress: 0%</p>
|
|
<p class="status-bar-field" id="sequenceLength">Sequence Length: 0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="overlay"></div>
|
|
<script>
|
|
const WEBSOCKET_PORT = {{wsPort}};
|
|
</script>
|
|
<script src="/static/js/humanize-duration.js"></script>
|
|
<script src="/static/js/index.js"></script>
|
|
</body>
|
|
</html> |