All template work

This commit is contained in:
Matt McWilliams 2024-08-19 15:01:25 -04:00
parent bc44bf4f5d
commit 641ad70732
2 changed files with 61 additions and 27 deletions

View File

@ -43,11 +43,25 @@ html, body{
max-height: 50vh;
}
#screen .field-row{
.half{
box-sizing: border-box;
width: 50%;
}
.third{
box-sizing: border-box;
width: 33.3%;
}
fieldset.inline {
display: flex;
}
fieldset.inline .field-row{
display: inline-block;
margin-left: 10px;
}
#screen .field-row input {
fieldset.inline .field-row input {
max-width: 50px;
}

View File

@ -21,7 +21,7 @@
<div>
<ul class="tree-view" id="display"><canvas></canvas></ul>
<div>
<fieldset id="screenResolution">
<fieldset id="screenResolution" class="inline third">
<legend>Screen</legend>
<span class="field-row">
<label for="width">Width</label>
@ -32,7 +32,18 @@
<input id="height" type="text" value="{{height}}" readonly />
</span>
</fieldset>
<fieldset id="displayResolution">
<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">
<legend>Display</legend>
<span class="field-row">
<label for="displayWidth">Width</label>
@ -54,33 +65,42 @@
</select>
-->
<div>
<form id="sequenceForm" onsubmit="return false;">
<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 id="sequenceSelect">
<legend>Sequence</legend>
<form id="sequenceForm" onsubmit="return false;">
<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>
</div>
<div>
<form id="sequenceCtrlForm" onsubmit="return false;">
<button id="start" class="sequenceCtrl" disabled>Start</button>
<button id="stop" class="sequenceCtrl" disabled>Stop</button>
<button id="pause" class="sequenceCtrl" disabled>Pause</button>
<button id="rewind" class="sequenceCtrl" disabled><<</button>
<input id="frame" value="00000" class="sequenceCtrl" disabled />
<button id="forward" class="sequenceCtrl" disabled>>></button>
</form>
<fieldset id="sequenceCtrl">
<legend>Sequence Controls</legend>
<form id="sequenceCtrlForm" onsubmit="return false;">
<button id="start" class="sequenceCtrl" disabled>Start</button>
<button id="stop" class="sequenceCtrl" disabled>Stop</button>
<button id="pause" class="sequenceCtrl" disabled>Pause</button>
<button id="rewind" class="sequenceCtrl" disabled><<</button>
<input id="frame" value="00000" class="sequenceCtrl" disabled />
<button id="forward" class="sequenceCtrl" disabled>>></button>
</form>
</fieldset>
</div>
<div>
<form id="manualCtrlForm" onsubmit="return false;" >
<button id="open" class="manualCtrl" onclick="client.sendCameraOpen()">Open Gate</button>
<button id="close" class="manualCtrl" onclick="client.sendCameraClose()">Close Gate</button>
<button id="focus" class="manualCtrl" onclick="">Focus</button>
<button id="framing" class="manualCtrl" onclick="">Framing</button>
</form>
<fieldset id="manualCtrl">
<legend>Manual Controls</legend>
<form id="manualCtrlForm" onsubmit="return false;" >
<button id="open" class="manualCtrl" onclick="client.sendCameraOpen()">Open Gate</button>
<button id="close" class="manualCtrl" onclick="client.sendCameraClose()">Close Gate</button>
<button id="focus" class="manualCtrl" onclick="">Focus</button>
<button id="framing" class="manualCtrl" onclick="">Framing</button>
</form>
</fieldset>
</div>
<div>
<progress id="progress"></progress>