-
Notifications
You must be signed in to change notification settings - Fork 7
/
generate-3d-garden.html
155 lines (153 loc) · 6.98 KB
/
generate-3d-garden.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chance the Gardener - Generate 3D Garden</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./script.js"></script>
<script src="./generate-3d-garden.js"></script>
</head>
<body>
<div class="container-fluid">
<button class="btn btn-back mt-2" onclick="changePage('3d-garden-menu.html')">Back</button>
<header class="text-center mb-5">
<h1><img src="img/Chance-the-Gardener_logo_icon.png" class="app-logo col-1 me-4">Chance the Gardener</h1>
</header>
<div class="d-grid gap-2 col-sm-11 col-md-9 mx-auto mt-3">
<div class="d-flex mx-auto">
<i class="bi bi-exclamation-circle-fill col-1 align-self-center ms-2" style="font-size: 2rem;"></i>
<div class="d-flex flex-column ms-2">
<p>Generating a 3D garden will take a long amount of time, potentially hours, depending on your hardware specifications. </p>
<p>This is a resource intensive process, which means you will likely be unable to use your computer normally during this time.</p>
<p><strong>This application cannot be closed while the 3D garden generation is in progress, or you will have to restart the process.</strong></p>
<p>It is recommended that you set aside sufficient time for the process to complete.</p>
</div>
</div>
</div>
<div id="render-info" class="d-grid gap-2 col-sm-4 col-md-3 col-xl-2 mx-auto mt-3 w-fit-content d-none">
<div class="row">
<p class="col-3 w-fit-content fw-bold me-auto">User:</p>
<p id="render-user-info" class="col-sm-8 w-fit-content"></p>
</div>
<div class="row">
<p class="col-3 w-fit-content fw-bold">Scan date & time:</p>
<p id="render-datetime-info" class="col-sm-8 w-fit-content"></p>
</div>
</div>
<div id="render-selection-form" class="d-grid gap-2 col-sm-10 col-md-8 col-lg-6 col-xl-4 mx-auto mt-3">
<div class="row">
<div class="col-4 me-auto">
<label class="col-form-label col-4 w-fit-content fw-bold" for="user-picker">User:</label>
</div>
<div class=" col-8">
<select class="form-select" name="user-picker" id="user-select" onchange="reloadDateTimeSelect('scans')">
</select>
</div>
</div>
<div class="row">
<div class="col-4 me-auto">
<label class="col-form-label w-fit-content fw-bold" for="date-time-picker">Scan date & time:</label>
</div>
<div class="col-8">
<select class="form-select" name="date-time-picker" id="date-time-select">
</select>
</div>
</div>
</div>
<div id="render-progress-spinner" class="d-flex justify-content-center d-none">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-grid gap-2 col-sm-4 col-md-3 col-xl-2 mx-auto mt-5">
<button id="start-render-btn" class="btn btn-run" onclick="createRender()"><i class="bi bi-lightning-fill"></i> Start 3D garden generation</button>
<button id="cancel-render-btn" class="btn btn-danger d-none" data-bs-toggle="modal" data-bs-target="#cancel-render-modal">Cancel</button>
</div>
</div>
<div id="cancel-render-modal" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Cancel 3D Garden Generation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Cancelling will reset all progress made for the generation of this 3D garden.</p>
<p><i>This will also likely result in a corrupted 3D rendering cache, which can be cleared in <b>Settings</b>.</i></p>
<p>Are you sure you wish to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Back</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="cancelRender()">Cancel 3D garden generation</button>
</div>
</div>
</div>
</div>
<div id="render-success-modal" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Success</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Your 3D garden was successfully generated!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Okay</button>
</div>
</div>
</div>
</div>
<div id="render-failure-modal" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Failure</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Your 3D garden generation failed.</p>
<p>If you did not cancel it, this can happen for a number of possible reasons:
<ul>
<li>You need to <b>clear the 3D render cache</b> in <b>Settings</b> after a previous failure.</li>
<li>You do not have enough disk space for the 3D garden.</li>
<li>Your hardware does not meet the requirements — a CUDA-enabled NVIDIA GPU is compulsory.</li>
<li>Your chosen scan farm size was too small, resulting in too little images to turn into a 3D garden.</li>
<li>Uneven lighting in scan photos, usually caused by sunlight — ensure you perform scans at night with the LED light turned on.</li>
<li>Scan photos do not have at least 40% overlap. This can be caused by scan z heights being too low.</li>
</ul>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Okay</button>
</div>
</div>
</div>
</div>
<div class="bottom-0" aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container position-absolute bottom-0 end-0 p-3">
<div id="render-already-exists-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Error</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This 3D garden already exists.
</div>
</div>
<div id="scan-no-choice-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Error</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
No scan has been selected.
</div>
</div>
</div>
</div>
</body>
</html>