-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
39 lines (38 loc) · 1.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="loading-controls">
<p>Choose an image to load or use the test image:</p>
<button id="image-browser-button" onclick="document.getElementById('image-browser').click()">Load an image</button>
<input type="file" id="image-browser" onclick="checkMarks(event)" onchange="loadImage()" style="display:none;">
<span style="margin-left: 3em;"></span>
<button onclick="loadTestImage()">Load a test image</button>
<span>Current image name: <span id="current-image-name"></span></span>
</div>
<div id="image-working-area">
<div id="mark-size-block">
<label for="mark-size">Mark Diameter</label>
<button onclick="changeMarkSize(-1);">-</button>
<input type="range" id="mark-size" name="mark-size" min="1" max="80" value="15" oninput="changeMarkSize()">
<button onclick="changeMarkSize(+1);">+</button>
<output name="mark-size-value" id="mark-size-value">15</output>
</div>
<div id="floating-block">
<div id="controls">
<button class="floating" onclick="undoClick()">Undo a Click</button>
<button class="floating" onclick="undoAllClicks()">Undo All</button>
<button class="floating" onclick="document.getElementById('points-browser').click()">Load points</button>
<input type="file" id="points-browser" onclick="checkMarks(event)" onchange="loadPoints()" style="display:none;">
<button class="floating" onclick="downloadPoints()">Download Points</button>
<button class="floating" id="toggle-marks" onclick="togglePointsVisibility()">Hide All</button>
</div>
<p id="total" class="floating-text">Total: <span id="colonies-counter">0</span></p>
</div>
<div id="canvas-wrapper"></div>
</div>
<script src="scripts/main.js"></script>
</body>
</html>