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; 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; display: inline-block;
margin-left: 10px; margin-left: 10px;
} }
#screen .field-row input { fieldset.inline .field-row input {
max-width: 50px; max-width: 50px;
} }

View File

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