All template work

static/css/style.css

@@ -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;
 }

views/index.hbs

@@ -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,6 +65,8 @@
 			</select>
 			-->
 			<div>
+				<fieldset id="sequenceSelect">
+					<legend>Sequence</legend>
 					<form id="sequenceForm" onsubmit="return false;">
 						<select name="sequence" id="sequence">
 							<option> - Select Image Sequence - </option>
@@ -63,8 +76,11 @@
 						</select>
 						<button id="select" onclick="client.sendSelect();">Select</button>
 					</form>
+				</fieldset>
 			</div>
 			<div>
+				<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>
@@ -73,14 +89,18 @@
 						<input id="frame" value="00000" class="sequenceCtrl" disabled />
 						<button id="forward" class="sequenceCtrl" 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 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>