-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
90 lines (73 loc) · 3.42 KB
/
demo.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shapes Algorithm</title>
</head>
<body>
<h1>Shapes Algorithm</h1>
<p>In a shape(rectangle or square) with width n and length m, We want to know how many shapes there are with width and length a and b. We also want to know the remaining forms.</p>
<hr>
<p>Enter numbers to see the result.</p>
<label>Width of the main window:</label>
<input id="window_width" type="number" pattern="[0-9]+" value="10">
<br>
<label>Height of the main window:</label>
<input id="window_height" type="number" pattern="[0-9]+" value="10">
<br>
<label>Width of biggest box:</label>
<input id="biggest_box_width" type="number" pattern="[0-9]+" value="2">
<br>
<label>Height of biggest box:</label>
<input id="biggest_box_height" type="number" pattern="[0-9]+" value="5">
<br>
<button id="button">Preview</button>
<br><br>
<div id="output"></div>
<br>
<b id="quantities_title" style="display: none;">Quantity of boxes:</b>
<ul id="quantities"></ul>
<script type="text/javascript" src="ShapeAlgorithm.js"></script>
<script type="text/javascript">
// Elements
const elm_window_width = document.querySelector("#window_width");
const elm_window_height = document.querySelector("#window_height");
const elm_biggest_box_width = document.querySelector("#biggest_box_width");
const elm_biggest_box_height = document.querySelector("#biggest_box_height");
const elm_button = document.querySelector("#button");
const elm_output = document.querySelector("#output");
const elm_quantities = document.querySelector("#quantities");
const elm_quantities_title = document.querySelector("#quantities_title");
// Events
elm_button.addEventListener("click", () => {
const window_width = parseInt(elm_window_width.value);
const window_height = parseInt(elm_window_height.value);
const biggest_box_width = parseInt(elm_biggest_box_width.value);
const biggest_box_height = parseInt(elm_biggest_box_height.value);
const shape = new ShapeAlgorithm(window_width, window_height, biggest_box_width, biggest_box_height);
shape.calculate();
// Draw
shape.draw(elm_output);
// Quantities
elm_quantities.innerHTML = "";
quantities_title.style.display = "block";
const quantities = shape.getQuantities();
for (let i = 0; i < quantities.length; i++) {
const quantity = quantities[i];
const elm_quantity = document.createElement("li");
elm_quantity.innerHTML = `<b>${quantity.width}x${quantity.height} = ${quantity.quantity} (labeled ${quantity.label})</b>`;
const ul = document.createElement("ul");
for (let position of quantity.positions) {
const ul_item = document.createElement("li");
ul_item.innerHTML = `(${position.from_w}, ${position.from_h}) => (${position.to_w}, ${position.to_h})`;
ul.appendChild(ul_item);
}
elm_quantity.appendChild(ul);
elm_quantities.appendChild(elm_quantity);
}
});
</script>
</body>
</html>