Skip to content

Commit 06d22af

Browse files
huningxinhuningxin
committed
Use horizontal input/output images layout in OpenCV.js tutorials
1 parent 386f402 commit 06d22af

File tree

65 files changed

+1163
-555
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1163
-555
lines changed

‎doc/js_tutorials/js_assets/js_basic_ops_copymakeborder.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,24 @@ <h2>Image Padding Example</h2>
1919
<p class="err" id="errorMessage"></p>
2020
</div>
2121
<div>
22-
<div class="inputoutput">
23-
<canvas id="canvasInput"></canvas>
24-
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
25-
</div>
26-
<div class="inputoutput">
27-
<canvas id="canvasOutput"></canvas>
28-
<div class="caption">canvasOutput</div>
29-
</div>
22+
<table cellpadding="0" cellspacing="0" width="0" border="0">
23+
<tr>
24+
<td>
25+
<canvas id="canvasInput"></canvas>
26+
</td>
27+
<td>
28+
<canvas id="canvasOutput"></canvas>
29+
</td>
30+
</tr>
31+
<tr>
32+
<td>
33+
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
34+
</td>
35+
<td>
36+
<div class="caption">canvasOutput</div>
37+
</td>
38+
</tr>
39+
</table>
3040
</div>
3141
<script src="utils.js" type="text/javascript"></script>
3242
<script id="codeSnippet" type="text/code-snippet">

‎doc/js_tutorials/js_assets/js_basic_ops_roi.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,24 @@ <h2>Image ROI Example</h2>
1919
<p class="err" id="errorMessage"></p>
2020
</div>
2121
<div>
22-
<div class="inputoutput">
23-
<canvas id="canvasInput"></canvas>
24-
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
25-
</div>
26-
<div class="inputoutput">
27-
<canvas id="canvasOutput"></canvas>
28-
<div class="caption">canvasOutput</div>
29-
</div>
22+
<table cellpadding="0" cellspacing="0" width="0" border="0">
23+
<tr>
24+
<td>
25+
<canvas id="canvasInput"></canvas>
26+
</td>
27+
<td>
28+
<canvas id="canvasOutput"></canvas>
29+
</td>
30+
</tr>
31+
<tr>
32+
<td>
33+
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
34+
</td>
35+
<td>
36+
<div class="caption">canvasOutput</div>
37+
</td>
38+
</tr>
39+
</table>
3040
</div>
3141
<script src="utils.js" type="text/javascript"></script>
3242
<script id="codeSnippet" type="text/code-snippet">

‎doc/js_tutorials/js_assets/js_canny.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,24 @@ <h2>Image Canny Example</h2>
1919
<p class="err" id="errorMessage"></p>
2020
</div>
2121
<div>
22-
<div class="inputoutput">
23-
<canvas id="canvasInput"></canvas>
24-
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
25-
</div>
26-
<div class="inputoutput">
27-
<canvas id="canvasOutput"></canvas>
28-
<div class="caption">canvasOutput</div>
29-
</div>
22+
<table cellpadding="0" cellspacing="0" width="0" border="0">
23+
<tr>
24+
<td>
25+
<canvas id="canvasInput"></canvas>
26+
</td>
27+
<td>
28+
<canvas id="canvasOutput"></canvas>
29+
</td>
30+
</tr>
31+
<tr>
32+
<td>
33+
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
34+
</td>
35+
<td>
36+
<div class="caption">canvasOutput</div>
37+
</td>
38+
</tr>
39+
</table>
3040
</div>
3141
<script src="utils.js" type="text/javascript"></script>
3242
<script id="codeSnippet" type="text/code-snippet">

‎doc/js_tutorials/js_assets/js_colorspaces_cvtColor.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,24 @@ <h2>Convert Color Example</h2>
1919
<p class="err" id="errorMessage"></p>
2020
</div>
2121
<div>
22-
<div class="inputoutput">
23-
<canvas id="canvasInput"></canvas>
24-
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
25-
</div>
26-
<div class="inputoutput">
27-
<canvas id="canvasOutput"></canvas>
28-
<div class="caption">canvasOutput</div>
29-
</div>
22+
<table cellpadding="0" cellspacing="0" width="0" border="0">
23+
<tr>
24+
<td>
25+
<canvas id="canvasInput"></canvas>
26+
</td>
27+
<td>
28+
<canvas id="canvasOutput"></canvas>
29+
</td>
30+
</tr>
31+
<tr>
32+
<td>
33+
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
34+
</td>
35+
<td>
36+
<div class="caption">canvasOutput</div>
37+
</td>
38+
</tr>
39+
</table>
3040
</div>
3141
<script src="utils.js" type="text/javascript"></script>
3242
<script id="codeSnippet" type="text/code-snippet">

‎doc/js_tutorials/js_assets/js_colorspaces_inRange.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,24 @@ <h2>Image InRange Example</h2>
1919
<p class="err" id="errorMessage"></p>
2020
</div>
2121
<div>
22-
<div class="inputoutput">
23-
<canvas id="canvasInput"></canvas>
24-
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
25-
</div>
26-
<div class="inputoutput">
27-
<canvas id="canvasOutput"></canvas>
28-
<div class="caption">canvasOutput</div>
29-
</div>
22+
<table cellpadding="0" cellspacing="0" width="0" border="0">
23+
<tr>
24+
<td>
25+
<canvas id="canvasInput"></canvas>
26+
</td>
27+
<td>
28+
<canvas id="canvasOutput"></canvas>
29+
</td>
30+
</tr>
31+
<tr>
32+
<td>
33+
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
34+
</td>
35+
<td>
36+
<div class="caption">canvasOutput</div>
37+
</td>
38+
</tr>
39+
</table>
3040
</div>
3141
<script src="utils.js" type="text/javascript"></script>
3242
<script id="codeSnippet" type="text/code-snippet">

‎doc/js_tutorials/js_assets/js_contour_features_approxPolyDP.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,24 @@ <h2>Image ApproxPolyDP Example</h2>
1919
<p class="err" id="errorMessage"></p>
2020
</div>
2121
<div>
22-
<div class="inputoutput">
23-
<canvas id="canvasInput"></canvas>
24-
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
25-
</div>
26-
<div class="inputoutput">
27-
<canvas id="canvasOutput"></canvas>
28-
<div class="caption">canvasOutput</div>
29-
</div>
22+
<table cellpadding="0" cellspacing="0" width="0" border="0">
23+
<tr>
24+
<td>
25+
<canvas id="canvasInput"></canvas>
26+
</td>
27+
<td>
28+
<canvas id="canvasOutput"></canvas>
29+
</td>
30+
</tr>
31+
<tr>
32+
<td>
33+
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
34+
</td>
35+
<td>
36+
<div class="caption">canvasOutput</div>
37+
</td>
38+
</tr>
39+
</table>
3040
</div>
3141
<script src="utils.js" type="text/javascript"></script>
3242
<script id="codeSnippet" type="text/code-snippet">

‎doc/js_tutorials/js_assets/js_contour_features_area.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ <h2>Image Area Example</h2>
1919
<p class="err" id="errorMessage"></p>
2020
</div>
2121
<div>
22-
<div class="inputoutput">
22+
<div>
2323
<canvas id="canvasInput"></canvas>
2424
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
2525
</div>
26-
<div class="inputoutput">
26+
<div>
2727
<p><strong>The area is: </strong><span id="areaOutput"></span></p>
2828
</div>
2929

‎doc/js_tutorials/js_assets/js_contour_features_boundingRect.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,24 @@ <h2>Bounding Rect Example</h2>
1919
<p class="err" id="errorMessage"></p>
2020
</div>
2121
<div>
22-
<div class="inputoutput">
23-
<canvas id="canvasInput"></canvas>
24-
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
25-
</div>
26-
<div class="inputoutput">
27-
<canvas id="canvasOutput"></canvas>
28-
<div class="caption">canvasOutput</div>
29-
</div>
22+
<table cellpadding="0" cellspacing="0" width="0" border="0">
23+
<tr>
24+
<td>
25+
<canvas id="canvasInput"></canvas>
26+
</td>
27+
<td>
28+
<canvas id="canvasOutput"></canvas>
29+
</td>
30+
</tr>
31+
<tr>
32+
<td>
33+
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
34+
</td>
35+
<td>
36+
<div class="caption">canvasOutput</div>
37+
</td>
38+
</tr>
39+
</table>
3040
</div>
3141
<script src="utils.js" type="text/javascript"></script>
3242
<script id="codeSnippet" type="text/code-snippet">

‎doc/js_tutorials/js_assets/js_contour_features_convexHull.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,24 @@ <h2>Convex Hull Example</h2>
1919
<p class="err" id="errorMessage"></p>
2020
</div>
2121
<div>
22-
<div class="inputoutput">
23-
<canvas id="canvasInput"></canvas>
24-
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
25-
</div>
26-
<div class="inputoutput">
27-
<canvas id="canvasOutput"></canvas>
28-
<div class="caption">canvasOutput</div>
29-
</div>
22+
<table cellpadding="0" cellspacing="0" width="0" border="0">
23+
<tr>
24+
<td>
25+
<canvas id="canvasInput"></canvas>
26+
</td>
27+
<td>
28+
<canvas id="canvasOutput"></canvas>
29+
</td>
30+
</tr>
31+
<tr>
32+
<td>
33+
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
34+
</td>
35+
<td>
36+
<div class="caption">canvasOutput</div>
37+
</td>
38+
</tr>
39+
</table>
3040
</div>
3141
<script src="utils.js" type="text/javascript"></script>
3242
<script id="codeSnippet" type="text/code-snippet">

‎doc/js_tutorials/js_assets/js_contour_features_fitEllipse.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,24 @@ <h2>Fit Ellipse Example</h2>
1919
<p class="err" id="errorMessage"></p>
2020
</div>
2121
<div>
22-
<div class="inputoutput">
23-
<canvas id="canvasInput"></canvas>
24-
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
25-
</div>
26-
<div class="inputoutput">
27-
<canvas id="canvasOutput"></canvas>
28-
<div class="caption">canvasOutput</div>
29-
</div>
22+
<table cellpadding="0" cellspacing="0" width="0" border="0">
23+
<tr>
24+
<td>
25+
<canvas id="canvasInput"></canvas>
26+
</td>
27+
<td>
28+
<canvas id="canvasOutput"></canvas>
29+
</td>
30+
</tr>
31+
<tr>
32+
<td>
33+
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
34+
</td>
35+
<td>
36+
<div class="caption">canvasOutput</div>
37+
</td>
38+
</tr>
39+
</table>
3040
</div>
3141
<script src="utils.js" type="text/javascript"></script>
3242
<script id="codeSnippet" type="text/code-snippet">

0 commit comments

Comments
 (0)