index.html 16.4 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rekkverkskalkulator</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

    <!-- My CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">

<!------------------------------------------------------ SCRIPT ------------------------------------------------------->
    <script src="lib/babylon.js"></script>
    <script src="lib/jspdf.debug.js"></script>

    <script src="js/materials/GridMaterial.js"></script>
    <script src="js/MaterialProvider.js"></script>

    <script src="js/app.js"></script>
    <script src="js/Glass.js"></script>
    <script src="js/GlassProvider.js"></script>
    <script src="js/MeshControls.js"></script>
    <script src="js/pole/PoleProvider.js"></script>
    <script src="js/pole/Pole.js"></script>
    <script src="js/terrace/BuildingPlane.js"></script>
    <script src="js/TextProvider.js"></script>
    <script src="js/Segment.js"></script>
    <script src="js/Modules.js"></script>

    <script src="js/terrace/Terrace.js"></script>
    <script src="js/terrace/CustomTerrace.js"></script>

    <script src="js/camera/CameraController.js"></script>
    <script src="js/camera/OrthographicCamera.js"></script>

    <script src="js/gui/GUI.js"></script>
    <script src="js/gui/CustomTerraceGUI.js"></script>
    <script src="js/gui/LayoutSelectionGUI.js"></script>
    <script src="js/HTMLGUI.js"></script>
    <script src="js/gui/NotificationMessage.js"></script>

    <script src="js/PDF/PDF.js"></script>
    <script src="js/PDF/ImageURLS.js"></script>

    <script src="js/Constants.js"></script>
<!--------------------------------------------------------------------------------------------------------------------->
    
</head>
<body onload="main()">

    <canvas id="renderCanvas">
        Denne nettleseren støtter ikke "canvas"-elementet!
    </canvas>

    <!-- Remove? -->
    <a id="inputTabFix" href="" onClick="return false;"></a>

    <div class="setup" id="setup">
        <div class="container">
            <div class="row">
                <div class="col-md-7 box">

                    <div id="layout">
                        <div class="row">
                            <div class="col-md-12">
                                <h1 class="text-center headline">Velg utforming på din terrasse</h1>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <p class="text-center grey" style="padding-bottom: 20px">I neste steg kan du legge inn sidemål</p>
                            </div>
                        </div>
                        <div id="layoutButtons" class="row">
                            <div class="col-lg-3 col-6">
                                <img id="btLayout1" class="layoutButton img-fluid" src="images/terrace_square.png">
                            </div>
                            <div class="col-lg-3 col-6">
                                <img id="btLayout2" class="layoutButton img-fluid" src="images/terrace_l_shape.png">
                            </div>
                            <div class="col-lg-3 col-6">
                                <img id="btLayout3" class="layoutButton img-fluid" src="images/terrace_diamond.png">
                            </div>
                            <div class="col-lg-3 col-6">
                                <img id="btLayout4" class="layoutButton img-fluid" src="images/terrace_triangle.png">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12" style="padding-top: 20px">
                                <p class="text-center grey">Ser du ikke noe som likner?</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12" style="padding-bottom: 15px">
                                <button class="center" id="btBuild"><span>Bygg din egen</span></button>
                            </div>
                        </div>
                    </div>

                    <div id="measurements">
                        <div class="row">
                            <div class="col-md-12">
                                <h1 class="text-center headline">Legg inn mål for din terrasse</h1>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-7">
                                <img class="img-fluid float-right" id="layoutPreview" src="">
                            </div>
                            <div class="col-lg-5">
                                <form id="lengths">
                                    <div class="form-group" id="formA">
                                        <label for="sideA">Side A</label>
                                        <input type="text" class="form-control" id="sideA" placeholder="Lengde i mm"/>
                                    </div>
                                    <div class="form-group" id="formB">
                                        <label for="sideB">Side B</label>
                                        <input type="text" class="form-control" id="sideB" placeholder="Lengde i mm"/>
                                    </div>
                                    <div class="form-group" id="formC">
                                        <label for="sideC">Side C</label>
                                        <input type="text" class="form-control" id="sideC" placeholder="Lengde i mm"/>
                                    </div>
                                    <div class="form-group" id="formD">
                                        <label for="sideD">Side D</label>
                                        <input type="text" class="form-control" id="sideD" placeholder="Lengde i mm"/>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <button class="float-left" id="btBack"><span>Forrige</span></button>
                                <button class="float-right" id="btNext"><span>Neste</span></button>
                            </div>
                        </div>
                        <!-- Button trigger modal -->
                        <button id="triggerModal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"></button>
                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Ugyldig</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        Vennligst oppgi numeriske verdier
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Lukk</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="main" id="main">
        <div id="gui">
            <input id="moduleMenuToggleButton" type="image" src="images/menu_toggle_arrows.png" title="Skjul menyen" onclick="toggleMenuVisibility()" ondragstart="return false;" />
            <div id="moduleMenu">
                <div id="poleHeader" class="menuHeader">Stolper</div>
                <div id="poleButtons">
                    <div id="poleRow1Buttons">
                        <input class="poleButton" type="image" src="images/menu_pole_180.png" title="180&#176; Stolpe" onmousedown="addPoleFromMenu('180')" ondragstart="return false;" />
                        <input class="poleButton" type="image" src="images/menu_pole_90.png" title="90&#176; Stolpe" onmousedown="addPoleFromMenu('90')" ondragstart="return false;" />
                        <input class="poleButton" type="image" src="images/menu_pole_45.png" title="45&#176; Stolpe" onmousedown="addPoleFromMenu('45')" ondragstart="return false;" />
                    </div>
                    <div id="poleRow2Buttons">
                        <input class="poleButton" type="image" src="images/menu_pole_end.png" title="Endestolpe" onmousedown="addPoleFromMenu('end')" ondragstart="return false;" />
                        <input class="poleButton" type="image" src="images/menu_pole_wall.png" title="Veggfeste" onmousedown="addPoleFromMenu('wall')" ondragstart="return false;" />
                    </div>
                </div>

                <div id="glassHeader" class="menuHeader">Glass</div>
                <div id="glassTypeInfo">
                    Glasstype:
                    <select id="glassTypeSelect" onchange="changeMenuGlassType()">
                        <optgroup label="Glasstype:">
                            <option value="0">Klart</option>
                            <option value="1">Frostet</option>
                            <option value="2">Sotet</option>
                        </optgroup>
                    </select>
                </div>
                <div id="glassButtons">
                    <input id="decreaseGlassWidth" type="image" src="images/menu_arrow.png" title="Reduser glassbredde" onclick="reduceGlassSize()" ondragstart="return false;" />
                    <input id="glassButton" type="image" src="images/menu_glass_clear.png" title="Glass" onmousedown="addGlassFromMenu()" ondragstart="return false;" />
                    <input id="increaseGlassWidth" type="image" src="images/menu_arrow.png" title="Øk glassbredde" onclick="increaseGlassSize()" ondragstart="return false;" />
                </div>
                <div id="glassWidthInfo">
                    <select id="glassWidthText" title="Glassbredde" onchange="updateGlassStretch()">
                        <optgroup label="Glassbredde:">
                            <option value="120">120mm</option>
                            <option value="220">220mm</option>
                            <option value="320">320mm</option>
                            <option value="420">420mm</option>
                            <option value="520">520mm</option>
                            <option value="620">620mm</option>
                            <option value="720">720mm</option>
                            <option value="820">820mm</option>
                            <option value="920">920mm</option>
                            <option value="1020">1020mm</option>
                            <option value="1120" selected="selected">1120mm</option>
                        </optgroup>
                    </select>
                    x 840mm
                </div>
                <p class ="moduleMenuHeader" id="fpsCounter">fps: </p>
            </div>

            <div id="topButtons">
                <input class="cameraButtons" id="camera2DButton" type="image" src="images/cam2D_blk.png" onclick="use2DCamera()" ondragstart="return false;" />
                <input class="cameraButtons" id="camera3DButton" type="image" src="images/cam3D_red.png" onclick="use3DCamera()" ondragstart="return false;" />
                <input id="helpLinesButton" type="image" src="images/ruler.png" onclick="toggleHelplines()" ondragstart="return false;" />
            </div>

            <button id="totalCostButton" onclick="displayItemList()">0 kr</button>

            <div id="itemList">
                <div id="itemListHeader">
                    <div class="menuHeader">Plukkliste</div>
                    <button id="closeItemList" onclick="hideItemList()">X</button>
                </div>
                <div id="itemTableDiv">
                    <table id="itemTable">
                        <thead>
                        <tr>
                            <th>Varenr</th>
                            <th>Nobbnr</th>
                            <th>Artikkel</th>
                            <th>Antall</th>
                            <th>Pris</th>
                        </tr>
                        </thead>
                        <tbody id="itemTableBody">

                        </tbody>
                    </table>
                </div>
                <div id="itemListFooter">
                    <button id="downloadItemListButton" onclick="downloadItemList()">Last ned</button>
                </div>
            </div>
        </div>

        <div id="poleMenu">
            <div class="meshControlsButtonsDiv"><input class="meshControlsButtons" type="image" src="images/menu_pole_rotate_left.png" onclick="rotateMeshLeft()" ondragstart="return false;" /></div>
            <div class="meshControlsButtonsDiv"><input class="meshControlsButtons" type="image" src="images/menu_pole_rotate_right.png" onclick="rotateMeshRight()" ondragstart="return false;" /></div>
            <div class="meshControlsButtonsDiv"><input class="meshControlsButtons" type="image" src="images/menu_pole_delete.png" onclick="deleteMesh()" ondragstart="return false;" /></div>
            <div class="meshControlsButtonsDiv"><input id="autoGenButton" type="button" onclick="startAutoGeneration()" value="Auto"/></div>
        </div>

        <div id="glassMenu">
            <div class="meshControlsButtonsDiv"><input class="meshControlsButtons" type="image" src="images/menu_pole_rotate_left.png" onclick="rotateMeshLeft()" ondragstart="return false;" /></div>
            <div class="meshControlsButtonsDiv"><input class="meshControlsButtons" type="image" src="images/menu_pole_rotate_right.png" onclick="rotateMeshRight()" ondragstart="return false;" /></div>
            <div class="meshControlsButtonsDiv"><input class="meshControlsButtons" type="image" src="images/menu_pole_delete.png" onclick="deleteMesh()" ondragstart="return false;" /></div>
            <div id="glassMenuType">
                <select title="Glasstype" id="glassMenuTypeSelect" onchange="changeGlassType()">
                    <optgroup label="Glasstype:">
                        <option value="0">Klart</option>
                        <option value="1">Frostet</option>
                        <option value="2">Sotet</option>
                    </optgroup>
                </select>
            </div>
        </div>

        <div id="autoGenPoleSelect">
            <div id="autoGenPoleSelectHeader">Velg stolpe</div>
            <div class="autoGenPoleRow">
                <input class="autoGenPoleButton" type="image" src="images/menu_pole_180.png" title="180&#176; Stolpe" onclick="onAutoGenPoleSelected('180')" ondragstart="return false;" />
                <input class="autoGenPoleButton" type="image" src="images/menu_pole_90.png" title="90&#176; Stolpe" onclick="onAutoGenPoleSelected('90')" ondragstart="return false;" />
                <input class="autoGenPoleButton" type="image" src="images/menu_pole_45.png" title="45&#176; Stolpe" onclick="onAutoGenPoleSelected('45')" ondragstart="return false;" />
            </div>
            <div class="autoGenPoleRow">
                <input class="autoGenPoleButton" type="image" src="images/menu_pole_end.png" title="Endestolpe" onclick="onAutoGenPoleSelected('end')" ondragstart="return false;" />
                <input class="autoGenPoleButton" type="image" src="images/menu_pole_wall.png" title="Veggfeste" onclick="onAutoGenPoleSelected('wall')" ondragstart="return false;" />
            </div>
        </div>

        <button id="autoGenFinishButton" onclick="onAutoGenFinished()">Ferdig</button>
    </div>

    <!-- jQuery -->
    <script src="lib/jquery-3.3.1.min.js"></script>

    <!-- Bootstrap JavaScript -->
    <script src="lib/bootstrap.min.js"></script>

</body>
</html>