rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added capture and capture previews to web UI

Browse source
This commit is contained in:
Joel Collins 2018-11-12 16:22:49 +00:00
parent 49331d36a8
commit d75efa630b
5 changed files with 252 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

23
openflexure_microscope/api/templates/index_v1.html
View file

@ -28,14 +28,14 @@
<div class="clearfix">
<div class="left-col">FOV width:</div>
<div class="right-col">
<input type="text" id="fovXText" size="4" onchange="fovX = Number(this.value); updateTextBoxes();">
<input type="number" id="fovXText" onchange="fovX = Number(this.value); updateTextBoxes();" style="width: 7em" >
</div>
</div>
<div class="clearfix">
<div class="left-col">FOV height:</div>
<div class="right-col">
<input type="text" id="fovYText" size="4" onchange="fovY = Number(this.value); updateTextBoxes();">
<input type="number" id="fovYText" onchange="fovY = Number(this.value); updateTextBoxes();" style="width: 7em" >
</div>
</div>
</p>
@ -72,16 +72,25 @@
</div>
<div class="column right">
<h2>Capture</h2>
Filename: <br>
<input type="text" id="captureFilenameInput" placeholder="Leave blank for default"><br>
Store on Pi: <input type="checkbox" id="captureKeepOnDiskCheck"><br>
Full resolution: <input type="checkbox" id="captureFullResolutionCheck"><br>
Resize capture: <input type="checkbox" id="captureResizeCheck" onclick="newCaptureResizeToggle(this);"><br>
<input type="number" id="captureWidthInput" value="640" style="width: 7em" disabled>
<input type="number" id="captureHeightInput" value="480" style="width: 7em" disabled><br>
<button type="button" onclick="newCaptureFromInput();">Capture</button>
<h2>Captures</h2>
<div id="captures">
<p>Not yet implemented.</p>
<div class="capture">Capture 1</div>
</div>
<button type="button" onclick="getCaptures();">Update</button>
<div id="captures"></div>
</div>
<div class="column middle">
<img src="/api/v1/stream" ondblclick="clickHotspotImage(event)" ;="" style="width: 100%;">
<img src="/api/v1/stream" ondblclick="clickHotspotImage(event);">
</div>
</div>