strip-packing/index.html at main · R-Besson/strip-packing · GitHub

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
<!-- ------------------------------------------------------------------------------------

Author    : Romain Besson

Date      : 22/10/2021

Published : 27/10/2021

------------------------------------------------------------------------------------ -->

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="canvas">
        <span class="grid-size" style="margin-top: 3px; margin-left: -2px;">0</span>
        <span class="grid-size" style="margin-top: 3px; margin-left: 328px;" id="width-value">0</span>
        <span class="grid-size" style="margin-top: 550px; margin-left: -2px;" id="height-value">0</span>
        <canvas id="output-canvas"></canvas>
    </div>

    <div id="output-box">
        <span style="color: rgb(255, 255, 255);">Output:</span>
        <p></p>

        <span style="font-size: 14px;">Theoretical Min Height:</span><span class="output-info" name="theoreticalMinHeight" style="color: rgb(255, 255, 255);">NaN</span>
        <br>
        <span style="font-size: 14px;">Height Calculated:</span><span class="output-info" name="endHeight" style="color: rgb(255, 255, 255);">NaN</span>
        <br>
        <span style="font-size: 14px;">Used % (boxes):</span><span class="output-info" name="percUsed" style="color: rgb(255, 255, 255);">NaN</span>
        <br>
        <span style="font-size: 14px;">Lost % (gray):</span><span class="output-info" name="percLost" style="color: rgb(255, 255, 255);">NaN</span>
        <br>
        <span style="font-size: 14px;">Run Time:</span><span class="output-info" name="runTime" style="color: rgb(255, 255, 255);">NaN</span>
    </div>

    <div id="output-boxes">
        <span style="color: rgb(255, 255, 255);">Rectangles:</span>
        <span id="outputRectangles" style="width: fit-content;"></span>
    </div>

    <div class="options">
        Can Rotate
        <label class="switch" option="canRotate">
            <input type="checkbox">
            <span class="slider round"></span>
        </label>

        <p></p>

        Canvas Width
        <input type="number" min="1" max="10000" placeholder="width"  class="input-box" option="width">
    </div>

    <div class="coords-box">
        Boxes:
        <p></p>
        <input type="number" min="1" max="300" placeholder="number" style="float: none; width: 62px;" class="input-box" option="randomNumber">
        <button class="controls-button" style="width: 175px; float: right;" onclick="randomizeCoords()">Generate Boxes</button>
        <p></p>
        <textarea id="box-coordinates" placeholder="width, height (ex: 100, 50)"></textarea>
    </div>

    <div class="control-box" style="text-align: center;">
        <button class="controls-button" onclick="Main()">Start</button>
        <p></p>
        <button class="controls-button" onclick="Reset()">Reset</button>
        <p></p>
        Status: <span id="status" style="color:rgb(255, 255, 0)">Idle</span>
    </div>

    <script src="script.js"></script>
</body>

</html>