2024-05-08 21:08:47 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Filmout Manager</title>
|
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" />
|
2024-05-08 21:08:47 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-07-31 19:07:09 +00:00
|
|
|
<div class="window" id="main">
|
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">
|
2024-08-16 04:52:46 +00:00
|
|
|
<div>
|
|
|
|
|
<ul class="tree-view" id="display"><canvas></canvas></ul>
|
2024-08-19 19:08:48 +00:00
|
|
|
<div class="flex">
|
2024-08-19 19:01:25 +00:00
|
|
|
<fieldset id="screenResolution" class="inline third">
|
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>
|
2024-08-19 19:01:25 +00:00
|
|
|
<fieldset id="sourceResolution" class="inline third">
|
|
|
|
|
<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 third">
|
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>
|
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>
|
|
|
|
|
-->
|
2024-08-24 14:23:15 +00:00
|
|
|
<div class="flex">
|
|
|
|
|
<fieldset id="sequenceSelect" class="inline half">
|
2024-08-19 19:01:25 +00:00
|
|
|
<legend>Sequence</legend>
|
2024-08-24 14:23:15 +00:00
|
|
|
<form id="sequenceSelectForm" onsubmit="return false;">
|
2024-08-19 19:01:25 +00:00
|
|
|
<select name="sequence" id="sequence">
|
|
|
|
|
<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>
|
2024-08-24 14:23:15 +00:00
|
|
|
<fieldset id="displayAdjust" class="inline half">
|
|
|
|
|
<legend>Display Adjust</legend>
|
|
|
|
|
<form id="displayAdjustForm" onsubmit="return false;">
|
2024-08-24 20:26:49 +00:00
|
|
|
<button class="small sequenceCtrl" id="offsetXPlus">X +</button>
|
|
|
|
|
<button class="small sequenceCtrl" id="offsetXMinus">X -</button>
|
|
|
|
|
<button class="small sequenceCtrl" id="offsetYPlus">Y +</button>
|
|
|
|
|
<button class="small sequenceCtrl" id="offsetYMinus">Y -</button>
|
|
|
|
|
<button class="small sequenceCtrl" id="widthPlus">W +</button>
|
|
|
|
|
<button class="small sequenceCtrl" id="widthMinus">W -</button>
|
|
|
|
|
<button class="small sequenceCtrl" id="heightPlus">H +</button>
|
|
|
|
|
<button class="small sequenceCtrl" id="heightMinus">H -</button>
|
2024-08-24 14:23:15 +00:00
|
|
|
</form>
|
|
|
|
|
</fieldset>
|
2024-08-16 04:52:46 +00:00
|
|
|
</div>
|
2024-08-24 20:26:49 +00:00
|
|
|
<div class="flex">
|
|
|
|
|
<fieldset class="inline half" id="sequenceCtrl">
|
2024-08-19 19:01:25 +00:00
|
|
|
<legend>Sequence Controls</legend>
|
|
|
|
|
<form id="sequenceCtrlForm" onsubmit="return false;">
|
2024-08-24 20:26:49 +00:00
|
|
|
<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 medium" disabled />
|
|
|
|
|
<button id="advance" class="small sequenceCtrl" onclick="client.sendAdvance()" disabled>></button>
|
|
|
|
|
<button id="advance" class="small sequenceCtrl" onclick="client.sendToEnd()" disabled>>></button>
|
2024-08-19 19:01:25 +00:00
|
|
|
</form>
|
|
|
|
|
</fieldset>
|
2024-08-01 15:57:49 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2024-08-19 19:01:25 +00:00
|
|
|
<fieldset id="manualCtrl">
|
|
|
|
|
<legend>Manual Controls</legend>
|
|
|
|
|
<form id="manualCtrlForm" onsubmit="return false;" >
|
2024-08-24 20:26:49 +00:00
|
|
|
<button id="open" class="manualCtrl" onclick="client.sendCameraOpen()">Open</button>
|
|
|
|
|
<button id="close" class="manualCtrl" onclick="client.sendCameraClose()">Close</button>
|
2024-08-19 19:01:25 +00:00
|
|
|
<button id="focus" class="manualCtrl" onclick="">Focus</button>
|
|
|
|
|
<button id="framing" class="manualCtrl" onclick="">Framing</button>
|
|
|
|
|
</form>
|
|
|
|
|
</fieldset>
|
2024-08-09 20:20:07 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2024-08-16 04:52:46 +00:00
|
|
|
<progress id="progress"></progress>
|
2024-08-01 15:57:49 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="status-bar" id="status">
|
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>
|
2024-08-24 14:23:15 +00:00
|
|
|
<p class="status-bar-field" id="progressText">Progress: 0%</p>
|
2024-08-16 04:52:46 +00:00
|
|
|
<p class="status-bar-field" id="sequenceLength">Sequence Length: 0</p>
|
2024-08-01 15:57:49 +00:00
|
|
|
</div>
|
2024-07-31 19:07:09 +00:00
|
|
|
</div>
|
2024-08-15 02:43:02 +00:00
|
|
|
</div>
|
|
|
|
|
<div id="overlay"></div>
|
2024-08-24 20:26:49 +00:00
|
|
|
<script>
|
|
|
|
|
const WEBSOCKET_PORT = {{wsPort}};
|
|
|
|
|
</script>
|
2024-05-15 21:29:59 +00:00
|
|
|
<script src="/static/js/index.js"></script>
|
2024-05-08 21:08:47 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
