Commit 00412db4205cc3c84aa5a5cfcc2ba605c2187cb7

Authored by Lars Jørgen Fredheim
1 parent bb30a8e5

fix

index.html
... ... @@ -34,11 +34,7 @@
34 34 <script src="js/camera/CameraController.js"></script>
35 35 <script src="js/camera/OrthographicCamera.js"></script>
36 36  
37   - <script src="js/gui/GUI.js"></script>
38   - <script src="js/gui/CustomTerraceGUI.js"></script>
39   - <script src="js/gui/LayoutSelectionGUI.js"></script>
40 37 <script src="js/HTMLGUI.js"></script>
41   - <script src="js/gui/NotificationMessage.js"></script>
42 38  
43 39 <script src="js/PDF/PDF.js"></script>
44 40 <script src="js/PDF/ImageURLS.js"></script>
... ... @@ -53,9 +49,6 @@
53 49 Denne nettleseren støtter ikke "canvas"-elementet!
54 50 </canvas>
55 51  
56   - <!-- Remove? -->
57   - <a id="inputTabFix" href="" onClick="return false;"></a>
58   -
59 52 <div class="setup" id="setup">
60 53 <div class="container">
61 54 <div class="row">
... ...
index_OLD.html deleted
1   -<!DOCTYPE html>
2   -<html>
3   - <head>
4   - <meta charset="UTF-8">
5   -
6   - <title>Rekkverkskalkulator</title>
7   -
8   - <link rel="stylesheet" type="text/css" href="style/style.css" />
9   -
10   - <script src="lib/babylon.js"></script>
11   - <script src="lib/jspdf.debug.js"></script>
12   -
13   - <script src="js/materials/GridMaterial.js"></script>
14   - <script src="js/MaterialProvider.js"></script>
15   -
16   - <script src="js/app.js"></script>
17   - <script src="js/HTMLGUI.js"></script>
18   - <script src="js/Glass.js"></script>
19   - <script src="js/GlassProvider.js"></script>
20   - <script src="js/MeshControls.js"></script>
21   - <script src="js/pole/PoleProvider.js"></script>
22   - <script src="js/pole/Pole.js"></script>
23   - <script src="js/terrace/BuildingPlane.js"></script>
24   - <script src="js/TextProvider.js"></script>
25   - <script src="js/Segment.js"></script>
26   - <script src="js/Modules.js"></script>
27   -
28   - <script src="js/terrace/Terrace.js"></script>
29   - <script src="js/terrace/CustomTerrace.js"></script>
30   -
31   - <script src="js/camera/CameraController.js"></script>
32   - <script src="js/camera/OrthographicCamera.js"></script>
33   -
34   - <script src="js/gui/GUI.js"></script>
35   - <script src="js/gui/CustomTerraceGUI.js"></script>
36   - <script src="js/gui/LayoutSelectionGUI.js"></script>
37   - <script src="js/gui/NotificationMessage.js"></script>
38   -
39   - <script src="js/PDF/PDF.js"></script>
40   - <script src="js/PDF/ImageURLS.js"></script>
41   -
42   - <script src="js/Constants.js"></script>
43   -
44   - </head>
45   - <body onload="main()">
46   - <canvas id="renderCanvas"></canvas>
47   - <a id="inputTabFix" href="" onClick="return false;"></a>
48   -
49   - <div id="gui">
50   - <input id="moduleMenuToggleButton" type="image" src="images/menu_toggle_arrows.png" title="Skjul menyen" onclick="toggleMenuVisibility()" ondragstart="return false;" />
51   - <div id="moduleMenu">
52   - <div id="poleHeader" class="menuHeader">Stolper</div>
53   - <div id="poleButtons">
54   - <div id="poleRow1Buttons">
55   - <input class="poleButton" type="image" src="images/menu_pole_180.png" title="180&#176; Stolpe" onmousedown="addPoleFromMenu('180')" ondragstart="return false;" />
56   - <input class="poleButton" type="image" src="images/menu_pole_90.png" title="90&#176; Stolpe" onmousedown="addPoleFromMenu('90')" ondragstart="return false;" />
57   - <input class="poleButton" type="image" src="images/menu_pole_45.png" title="45&#176; Stolpe" onmousedown="addPoleFromMenu('45')" ondragstart="return false;" />
58   - </div>
59   - <div id="poleRow2Buttons">
60   - <input class="poleButton" type="image" src="images/menu_pole_end.png" title="Endestolpe" onmousedown="addPoleFromMenu('end')" ondragstart="return false;" />
61   - <input class="poleButton" type="image" src="images/menu_pole_wall.png" title="Veggfeste" onmousedown="addPoleFromMenu('wall')" ondragstart="return false;" />
62   - </div>
63   - </div>
64   -
65   - <div id="glassHeader" class="menuHeader">Glass</div>
66   - <div id="glassTypeInfo">
67   - Glasstype:
68   - <select id="glassTypeSelect" onchange="changeMenuGlassType()">
69   - <optgroup label="Glasstype:">
70   - <option value="0">Klart</option>
71   - <option value="1">Frostet</option>
72   - <option value="2">Sotet</option>
73   - </optgroup>
74   - </select>
75   - </div>
76   - <div id="glassButtons">
77   - <input id="decreaseGlassWidth" type="image" src="images/menu_arrow.png" title="Reduser glassbredde" onclick="reduceGlassSize()" ondragstart="return false;" />
78   - <input id="glassButton" type="image" src="images/menu_glass_clear.png" title="Glass" onmousedown="addGlassFromMenu()" ondragstart="return false;" />
79   - <input id="increaseGlassWidth" type="image" src="images/menu_arrow.png" title="Øk glassbredde" onclick="increaseGlassSize()" ondragstart="return false;" />
80   - </div>
81   - <div id="glassWidthInfo">
82   - <select id="glassWidthText" title="Glassbredde" onchange="updateGlassStretch()">
83   - <optgroup label="Glassbredde:">
84   - <option value="120">120mm</option>
85   - <option value="220">220mm</option>
86   - <option value="320">320mm</option>
87   - <option value="420">420mm</option>
88   - <option value="520">520mm</option>
89   - <option value="620">620mm</option>
90   - <option value="720">720mm</option>
91   - <option value="820">820mm</option>
92   - <option value="920">920mm</option>
93   - <option value="1020">1020mm</option>
94   - <option value="1120" selected="selected">1120mm</option>
95   - </optgroup>
96   - </select>
97   - x 840mm
98   - </div>
99   - <p class ="moduleMenuHeader" id="fpsCounter">fps: </p>
100   - </div>
101   -
102   - <div id="topButtons">
103   - <input class="cameraButtons" id="camera2DButton" type="image" src="images/cam2D_blk.png" onclick="use2DCamera()" ondragstart="return false;" />
104   - <input class="cameraButtons" id="camera3DButton" type="image" src="images/cam3D_red.png" onclick="use3DCamera()" ondragstart="return false;" />
105   - <input id="helpLinesButton" type="image" src="images/ruler.png" onclick="toggleHelplines()" ondragstart="return false;" />
106   - </div>
107   -
108   - <button id="totalCostButton" onclick="displayItemList()">0 kr</button>
109   -
110   - <div id="itemList">
111   - <div id="itemListHeader">
112   - <div class="menuHeader">Plukkliste</div>
113   - <button id="closeItemList" onclick="hideItemList()">X</button>
114   - </div>
115   - <div id="itemTableDiv">
116   - <table id="itemTable">
117   - <thead>
118   - <tr>
119   - <th>Varenr</th>
120   - <th>Nobbnr</th>
121   - <th>Artikkel</th>
122   - <th>Antall</th>
123   - <th>Pris</th>
124   - </tr>
125   - </thead>
126   - <tbody id="itemTableBody">
127   -
128   - </tbody>
129   - </table>
130   - </div>
131   - <div id="itemListFooter">
132   - <button id="downloadItemListButton" onclick="downloadItemList()">Last ned</button>
133   - </div>
134   - </div>
135   - </div>
136   -
137   - <div id="poleMenu">
138   - <div class="meshControlsButtonsDiv"><input class="meshControlsButtons" type="image" src="images/menu_pole_rotate_left.png" onclick="rotateMeshLeft()" ondragstart="return false;" /></div>
139   - <div class="meshControlsButtonsDiv"><input class="meshControlsButtons" type="image" src="images/menu_pole_rotate_right.png" onclick="rotateMeshRight()" ondragstart="return false;" /></div>
140   - <div class="meshControlsButtonsDiv"><input class="meshControlsButtons" type="image" src="images/menu_pole_delete.png" onclick="deleteMesh()" ondragstart="return false;" /></div>
141   - <div class="meshControlsButtonsDiv"><input id="autoGenButton" type="button" onclick="startAutoGeneration()" value="Auto"/></div>
142   - </div>
143   -
144   - <div id="glassMenu">
145   - <div class="meshControlsButtonsDiv"><input class="meshControlsButtons" type="image" src="images/menu_pole_rotate_left.png" onclick="rotateMeshLeft()" ondragstart="return false;" /></div>
146   - <div class="meshControlsButtonsDiv"><input class="meshControlsButtons" type="image" src="images/menu_pole_rotate_right.png" onclick="rotateMeshRight()" ondragstart="return false;" /></div>
147   - <div class="meshControlsButtonsDiv"><input class="meshControlsButtons" type="image" src="images/menu_pole_delete.png" onclick="deleteMesh()" ondragstart="return false;" /></div>
148   - <div id="glassMenuType">
149   - <select title="Glasstype" id="glassMenuTypeSelect" onchange="changeGlassType()">
150   - <optgroup label="Glasstype:">
151   - <option value="0">Klart</option>
152   - <option value="1">Frostet</option>
153   - <option value="2">Sotet</option>
154   - </optgroup>
155   - </select>
156   - </div>
157   - </div>
158   -
159   - <div id="autoGenPoleSelect">
160   - <div id="autoGenPoleSelectHeader">Velg stolpe</div>
161   - <div class="autoGenPoleRow">
162   - <input class="autoGenPoleButton" type="image" src="images/menu_pole_180.png" title="180&#176; Stolpe" onclick="onAutoGenPoleSelected('180')" ondragstart="return false;" />
163   - <input class="autoGenPoleButton" type="image" src="images/menu_pole_90.png" title="90&#176; Stolpe" onclick="onAutoGenPoleSelected('90')" ondragstart="return false;" />
164   - <input class="autoGenPoleButton" type="image" src="images/menu_pole_45.png" title="45&#176; Stolpe" onclick="onAutoGenPoleSelected('45')" ondragstart="return false;" />
165   - </div>
166   - <div class="autoGenPoleRow">
167   - <input class="autoGenPoleButton" type="image" src="images/menu_pole_end.png" title="Endestolpe" onclick="onAutoGenPoleSelected('end')" ondragstart="return false;" />
168   - <input class="autoGenPoleButton" type="image" src="images/menu_pole_wall.png" title="Veggfeste" onclick="onAutoGenPoleSelected('wall')" ondragstart="return false;" />
169   - </div>
170   - </div>
171   -
172   - <button id="autoGenFinishButton" onclick="onAutoGenFinished()">Ferdig</button>
173   - </body>
174   -</html>
175 0 \ No newline at end of file
js/MeshControls.js
... ... @@ -204,7 +204,7 @@ class MeshControls {
204 204 canMoveCamera = false;
205 205 document.getElementById("autoGenPoleSelect").style.display = "block";
206 206 } else {
207   - gui.notificationMessage.displayErrorMessage("Too close to the edge");
  207 + // TODO: Create popup msg
208 208 }
209 209 }
210 210  
... ...
js/app.js
... ... @@ -80,9 +80,6 @@ function main() {
80 80 }
81 81 }
82 82 }
83   - if (gui.layoutSelectionGUI !== undefined && gui.layoutSelectionGUI.container.isVisible) {
84   - gui.layoutSelectionGUI.handleKeyPresses(event);
85   - }
86 83 }, false);
87 84  
88 85 window.addEventListener('keydown', function(event) {
... ... @@ -197,7 +194,7 @@ function onMouseMove(event) {
197 194 pointerMeshStartingPoint = current;
198 195 }
199 196 }
200   - else if(canMoveCamera && !gui.pointerInMenu) {
  197 + else if(canMoveCamera) {
201 198 camera.onMouseMove(event);
202 199 }
203 200 }
... ...
js/gui/CustomTerraceGUI.js deleted
1   -class CustomTerraceGUI {
2   - constructor(gui, customTerrace) {
3   - this.gui = gui;
4   - this.customTerrace = customTerrace;
5   -
6   - this.customTerraceMenu = undefined;
7   - this.angleButtons = [];
8   - this.activeButton = 3;
9   -
10   - this.createGUI();
11   - }
12   -
13   - createGUI() {
14   - // Meny container
15   - this.customTerraceMenu = this.gui.createStackPanel(1, 1, "1%", true);
16   - this.gui.menuContainer.addControl(this.customTerraceMenu);
17   -
18   - // Header
19   - var header = this.gui.createStackPanel(1, 0.05, false);
20   - header.addControl(this.gui.createTextBlock("Vinkler", "30px"));
21   - this.customTerraceMenu.addControl(header);
22   -
23   - // Første rad med vinkel knapper
24   - var angleRow1 = this.gui.createStackPanel(1, 0.12, 0, false);
25   - this.customTerraceMenu.addControl(angleRow1);
26   -
27   - angleRow1.addControl(this.gui.createStackPanel(0.2, 1, 0, true));
28   - angleRow1.addControl(this.createAngleButton("btnAngle225", "images/menu_angle_225.png",
29   - () => { this.onAngleButtonPushed(45, 0); }));
30   - angleRow1.addControl(this.createAngleButton("btnAngle135", "images/menu_angle_135.png",
31   - () => { this.onAngleButtonPushed(315, 1); }));
32   -
33   - // Andre rad med vinkel knapper
34   - var angleRow2 = this.gui.createStackPanel(1, 0.12, 0, false);
35   - this.customTerraceMenu.addControl(angleRow2);
36   -
37   - angleRow2.addControl(this.gui.createStackPanel(0.05, 1, 0, true));
38   - angleRow2.addControl(this.createAngleButton("btnAngle90", "images/menu_angle_270.png",
39   - () => { this.onAngleButtonPushed(90, 2); }));
40   - angleRow2.addControl(this.createAngleButton("btnAngle180", "images/menu_angle_180.png",
41   - () => { this.onAngleButtonPushed(0, 3); }));
42   - angleRow2.addControl(this.createAngleButton("btnAngle270", "images/menu_angle_90.png",
43   - () => { this.onAngleButtonPushed(270, 4); }));
44   -
45   - this.angleButtons[this.activeButton].background = "green";
46   -
47   - // Spacing
48   - this.customTerraceMenu.addControl(this.gui.createStackPanel(1, 0.03, 0, false));
49   -
50   - // Input rad
51   - var inputRow = this.gui.createStackPanel(1, 0.05, 0, false);
52   - inputRow.name = "terraceInputRow";
53   - this.customTerraceMenu.addControl(inputRow);
54   -
55   - var lengthText = this.gui.createTextBlock("Lengde:", "24px");
56   - lengthText.width = 0.3;
57   - inputRow.addControl(lengthText);
58   -
59   - var input = this.gui.createInputText(0.4, 1, "1000");
60   - input.onTextChangedObservable.add(() => {
61   - if(this.verifyInput(input.text)) {
62   - this.customTerrace.onInputValueChanged(parseInt(input.text));
63   - }
64   - });
65   - inputRow.addControl(input);
66   -
67   - var unitText = this.gui.createTextBlock("mm", "24px");
68   - unitText.width = 0.3;
69   - inputRow.addControl(unitText);
70   -
71   - // Knapp for å legge til et nytt segment
72   - var addButton = this.gui.createTextButton("btnAddTerraceSegment", "Legg til");
73   - addButton.height = 0.08;
74   - addButton.width = 0.4;
75   - addButton.paddingTop = "0.5%";
76   - addButton.textBlock.fontSize = "24px";
77   - addButton.onPointerUpObservable.add(() => {
78   - if(this.verifyInput(input.text)) {
79   - var pathEnd = this.customTerrace.path[this.customTerrace.path.length - 1];
80   - var value = parseInt(input.text);
81   - this.customTerrace.extendPath(
82   - new BABYLON.Vector3(
83   - Math.round(pathEnd.x + value * this.customTerrace.directionVector.x),
84   - 0,
85   - Math.round(pathEnd.z + value * this.customTerrace.directionVector.z)
86   - )
87   - );
88   - this.setStraightLineButtonAsActive();
89   - }
90   - });
91   - this.customTerraceMenu.addControl(addButton);
92   -
93   - // Knapp for å slette det forrige segmentet
94   - var deleteButton = this.gui.createTextButton("btnDeleteTerraceSegment", "Slett forrige");
95   - deleteButton.height = 0.08;
96   - deleteButton.width = 0.4;
97   - deleteButton.paddingTop = "0.5%";
98   - deleteButton.textBlock.fontSize = "24px";
99   - deleteButton.onPointerUpObservable.add(() => {
100   - this.customTerrace.shrinkPath();
101   - this.setStraightLineButtonAsActive();
102   - });
103   - this.customTerraceMenu.addControl(deleteButton);
104   -
105   - // Spacing
106   - this.customTerraceMenu.addControl(this.gui.createStackPanel(1, 0.36, 0, true));
107   -
108   - var controlCont = this.gui.createStackPanel(1, 0.08, 0, false);
109   - this.customTerraceMenu.addControl(controlCont);
110   -
111   - // Knapp for å gå tilbake til forrige meny
112   - var backButton = this.gui.createTextButton("btnBackFromCustomTerrace", "Tilbake");
113   - backButton.height = 1;
114   - backButton.width = 0.5;
115   - backButton.paddingLeft = "5%";
116   - backButton.paddingRight = "5%";
117   - backButton.textBlock.fontSize = "24px";
118   - backButton.onPointerUpObservable.add(() => {
119   - this.customTerrace.dispose();
120   - this.gui.menuContainer.isVisible = false;
121   - this.gui.menuTab.isVisible = false;
122   - this.gui.layoutSelectionGUI.show();
123   - });
124   - controlCont.addControl(backButton);
125   -
126   - // Knapp for å lage terrasse
127   - var continueButton = this.gui.createTextButton("btnCreateTerrace", "Fortsett");
128   - continueButton.height = 1;
129   - continueButton.width = 0.5;
130   - continueButton.paddingLeft = "5%";
131   - continueButton.paddingRight = "5%";
132   - continueButton.textBlock.fontSize = "24px";
133   - continueButton.onPointerUpObservable.add(() => {
134   - this.customTerrace.path[this.customTerrace.path.length - 1].x = this.customTerrace.path[0].x;
135   - this.customTerrace.path[this.customTerrace.path.length - 1].z = this.customTerrace.path[0].z;
136   - this.customTerrace.displayTerrace();
137   - });
138   - controlCont.addControl(continueButton);
139   -
140   - return this.customTerraceMenu;
141   - }
142   -
143   - verifyInput(input) {
144   - return (input !== "" && !isNaN(input) && parseInt(input) > 0);
145   - }
146   -
147   - setStraightLineButtonAsActive() {
148   - if(this.activeButton !== 3) {
149   - this.angleButtons[this.activeButton].background = this.gui.buttonColor;
150   - this.activeButton = 3;
151   - this.angleButtons[this.activeButton].background = "green";
152   - }
153   - }
154   -
155   - createAngleButton(name, image, onClickFunc) {
156   - var button = this.gui.createImageButton(0.3, 1, "2%", 5, name, image, true);
157   - button.onPointerUpObservable.add(onClickFunc);
158   - this.angleButtons.push(button);
159   - return button;
160   - }
161   -
162   - onAngleButtonPushed(angle, buttonNumber) {
163   - this.customTerrace.updateDirectionVector(angle);
164   -
165   - this.angleButtons[this.activeButton].background = this.gui.buttonColor;
166   - this.angleButtons[buttonNumber].background = "green";
167   - this.activeButton = buttonNumber;
168   - }
169   -
170   - hide() {
171   - this.customTerraceMenu.isVisible = false;
172   - }
173   -
174   - show() {
175   - this.customTerraceMenu.isVisible = true;
176   - }
177   -
178   - dispose() {
179   - this.customTerraceMenu.dispose();
180   - }
181   -}
182 0 \ No newline at end of file
js/gui/GUI.js deleted
1   -class GUI {
2   - constructor() {
3   - this.gui = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("GUI", true);
4   -
5   - // Farger
6   - this.menuColor = "#b3ffff";
7   - this.borderColor = "#000000";
8   - this.textColor = "#000000";
9   - this.buttonColor = "#e6ffff";
10   -
11   - this.menuVisible = true;
12   - this.pointerInMenu = false;
13   -
14   - this.menuContainer = undefined;
15   - this.menuTab = undefined;
16   -
17   - // Klasser
18   - this.layoutSelectionGUI = undefined;
19   - this.customTerraceGUI = undefined;
20   -
21   - this.notificationMessage = new NotificationMessage(this);
22   - }
23   -
24   - showLayoutSelection() {
25   - if(this.layoutSelectionGUI === undefined){
26   - this.layoutSelectionGUI = new LayoutSelectionGUI(this);
27   - }
28   - }
29   -
30   - createMenuContainer() {
31   - // Lager en container som inneholder sidemenyen
32   - this.menuContainer = this.createRectangleGUI(0.2, 1, 20, this.menuColor);
33   - this.menuContainer.color = this.borderColor;
34   - this.menuContainer.isVisible = this.menuVisible;
35   - this.menuContainer.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
36   - this.gui.addControl(this.menuContainer);
37   -
38   - this.menuContainer.onPointerEnterObservable.add(() => {
39   - this.pointerInMenu = true;
40   - });
41   -
42   - this.menuContainer.onPointerOutObservable.add(() => {
43   - this.pointerInMenu = false;
44   - });
45   -
46   - // knapp for å lukke/åpne menyen
47   - this.menuTab = this.createRectangleGUI(0.01, 0.05, 0, this.menuColor);
48   - this.menuTab.thickness = 0;
49   - this.menuTab.color = this.borderColor;
50   - this.menuTab.left = "30%";
51   - this.gui.addControl(this.menuTab);
52   -
53   - var menuTabImage = this.createImageButton(1, 1, 0, 0, "btnMenuTab", "images/menu_toggle_arrows.png", false);
54   - menuTabImage.onPointerUpObservable.add(() => {
55   - this.menuVisible = !this.menuVisible;
56   - this.menuContainer.isVisible = this.menuVisible;
57   -
58   - if(this.menuVisible) {
59   - this.menuTab.left = "30%";
60   - menuTabImage.rotation = 0;
61   - }
62   - else {
63   - this.menuTab.left = "49.5%";
64   - menuTabImage.rotation = Math.PI;
65   - }
66   -
67   - //camera.offsetPerspectiveCamera();
68   - });
69   - this.menuTab.addControl(menuTabImage);
70   - }
71   -
72   - isPointerInMenu() {
73   - return this.pointerInMenu;
74   - }
75   -
76   - createCustomTerraceGUI(customTerrace) {
77   - if(this.menuContainer === undefined)
78   - this.createMenuContainer();
79   -
80   - this.menuContainer.isVisible = true;
81   - this.menuTab.isVisible = true;
82   -
83   - if(this.customTerraceGUI === undefined) {
84   - this.customTerraceGUI = new CustomTerraceGUI(this, customTerrace);
85   - }
86   - else {
87   - this.customTerraceGUI.show();
88   - }
89   - }
90   -
91   - createMenu() {
92   - document.getElementById("gui").style.display = "block";
93   - }
94   -
95   - createInputText(width, height, text) {
96   - var input = new BABYLON.GUI.InputText();
97   - input.width = width;
98   - input.height = height;
99   - input.text = text;
100   - input.color = this.textColor;
101   - input.background = "white";
102   - input.focusedBackground = "white";
103   - return input;
104   - }
105   -
106   - createTextButton(name, text) {
107   - var button = BABYLON.GUI.Button.CreateSimpleButton(name, text);
108   - button.textBlock = button.getChildByName(name + "_button");
109   - button.background = this.buttonColor;
110   - button.color = this.borderColor;
111   - button.textBlock.color = this.textColor;
112   - button.cornerRadius = 5;
113   - return button;
114   - }
115   -
116   - createTextBlock(text, fontSize) {
117   - var textBlock = new BABYLON.GUI.TextBlock();
118   - textBlock.text = text;
119   - textBlock.fontSize = fontSize;
120   - textBlock.color = this.textColor;
121   - return textBlock;
122   - }
123   -
124   - createRectangleGUI(width, height, cornerRadius, background) {
125   - var rectangle = new BABYLON.GUI.Rectangle();
126   - rectangle.width = width;
127   - rectangle.height = height;
128   - rectangle.cornerRadius = cornerRadius;
129   - rectangle.background = background;
130   - //rectangle.color = this.borderColor;
131   - return rectangle;
132   - }
133   -
134   - createStackPanel(width, height, padding, vertical) {
135   - var stackPanel = new BABYLON.GUI.StackPanel();
136   - stackPanel.width = width;
137   - stackPanel.height = height;
138   - stackPanel.paddingRight = padding;
139   - stackPanel.paddingLeft = padding;
140   - stackPanel.paddingTop = padding;
141   - stackPanel.paddingBottom = padding;
142   - stackPanel.isVertical = vertical;
143   - return stackPanel;
144   - }
145   -
146   - createImageButton(width, height, padding, cornerRadius, name, image, isUniformStretch) {
147   - var button = BABYLON.GUI.Button.CreateImageOnlyButton(name, image);
148   - button.width = width;
149   - button.height = height;
150   - button.color = this.borderColor;
151   - button.background = this.buttonColor;
152   - button.paddingLeft = padding;
153   - button.paddingRight = padding;
154   - button.paddingTop = padding;
155   - button.paddingBottom = padding;
156   - button.cornerRadius = cornerRadius;
157   - button.image = button.getChildByName(name + "_icon");
158   - if(isUniformStretch) {
159   - button.image.stretch = BABYLON.GUI.Image.STRETCH_UNIFORM;
160   - }
161   - return button;
162   - }
163   -
164   -}
165 0 \ No newline at end of file
js/gui/LayoutSelectionGUI.js deleted
1   -class LayoutSelectionGUI {
2   - constructor(gui) {
3   - this.gui = gui;
4   -
5   - this.container = this.gui.createRectangleGUI(0.7, 0.9, 20, this.gui.menuColor);
6   - this.container.color = this.gui.borderColor;
7   - this.gui.gui.addControl(this.container);
8   -
9   - this.layoutSelectContainer = undefined;
10   - this.layoutMeasurementsContainer = undefined;
11   -
12   - this.layoutImage = undefined;
13   - this.layoutSides = undefined;
14   - this.layoutName = undefined;
15   -
16   - this.inputs = [];
17   - this.inputFocused = [];
18   - this.readInput = false;
19   -
20   - this.createSelectionGUI();
21   - }
22   -
23   - createSelectionGUI() {
24   - if(this.layoutSelectContainer === undefined) {
25   - this.layoutSelectContainer = this.gui.createStackPanel(1, 1, "1%", true);
26   - this.container.addControl(this.layoutSelectContainer);
27   -
28   - var header = this.gui.createStackPanel(1, 0.1, 0, true);
29   - header.addControl(this.gui.createTextBlock("Velg utforming p\u00E5 terrasse:", 40));
30   - this.layoutSelectContainer.addControl(header);
31   -
32   - var layoutSelectRow1 = this.gui.createStackPanel(1, 0.4, 0, false);
33   - this.layoutSelectContainer.addControl(layoutSelectRow1);
34   -
35   - this.createLayoutPreview(0.25, 0.8, "terraceSquare", "terrace_square", 2, layoutSelectRow1);
36   - this.createLayoutPreview(0.25, 0.8, "terraceLShape", "terrace_l_shape", 4, layoutSelectRow1);
37   - this.createLayoutPreview(0.25, 0.8, "terraceDiamond", "terrace_diamond", 4, layoutSelectRow1);
38   - this.createLayoutPreview(0.25, 0.8, "terraceTriangle", "terrace_triangle", 2, layoutSelectRow1);
39   -
40   - var layoutSelectRow2 = this.gui.createStackPanel(1, 0.4, 0, false);
41   - this.layoutSelectContainer.addControl(layoutSelectRow2);
42   -
43   - /********************** Fjern ****************************/
44   - var debugContainer = this.gui.createRectangleGUI(0.25, 0.8, 5, this.gui.buttonColor);
45   - debugContainer.paddingTop = "1%";
46   - debugContainer.paddingLeft = "1%";
47   - debugContainer.paddingRight = "1%";
48   - debugContainer.paddingBottom = "1%";
49   - debugContainer.color = this.gui.borderColor;
50   - layoutSelectRow2.addControl(debugContainer);
51   - var debugBtn = this.gui.createTextButton("debugLayout", "4m x 4m");
52   - debugContainer.addControl(debugBtn);
53   - debugBtn.onPointerUpObservable.add(() => {
54   - this.container.isVisible = false;
55   - this.gui.createMenu();
56   - var inputs = [4000, 4000];
57   - inputs.name = "terraceSquare";
58   - displayTerrace(inputs);
59   - });
60   -
61   - /*var downloadContainer = this.gui.createRectangleGUI(0.25, 0.8, 5, this.gui.buttonColor);
62   - downloadContainer.paddingBottom = "1%";
63   - downloadContainer.paddingLeft = "1%";
64   - downloadContainer.paddingRight = "1%";
65   - downloadContainer.paddingTop = "1%";
66   - downloadContainer.color = this.gui.borderColor;
67   - layoutSelectRow2.addControl(downloadContainer);
68   - var downloadBtn = this.gui.createTextButton("downloadLayout", "PDF");
69   - downloadContainer.addControl(downloadBtn);
70   - downloadBtn.onPointerUpObservable.add(() => {
71   - var pdf = new PDF();
72   - pdf.download();
73   - });*/
74   - /***********************************************************/
75   -
76   - var createEmptyContainer = () => {
77   - var emptyContainer = this.gui.createRectangleGUI(0.25, 0.8, 5, this.gui.buttonColor);
78   - emptyContainer.paddingBottom = "1%";
79   - emptyContainer.paddingLeft = "1%";
80   - emptyContainer.paddingRight = "1%";
81   - emptyContainer.paddingTop = "1%";
82   - emptyContainer.color = this.gui.borderColor;
83   - return emptyContainer;
84   - };
85   - layoutSelectRow2.addControl(createEmptyContainer());
86   - layoutSelectRow2.addControl(createEmptyContainer());
87   -
88   -
89   - var button = this.gui.createImageButton(0.25, 0.8, "1%", 5, "layoutCustom", "images/menu_arrow.png", true);
90   - button.onPointerUpObservable.add(() => {
91   - createCustomTerrace();
92   - this.container.isVisible = false;
93   - });
94   - var customTerraceButton = this.gui.createTextButton("btnCustomTerrace", "Egendefinert \nterrasse");
95   - customTerraceButton.width = 0.25;
96   - customTerraceButton.height = 0.8;
97   - customTerraceButton.cornerRadius = 5;
98   - customTerraceButton.paddingBottom = "1%";
99   - customTerraceButton.paddingLeft = "1%";
100   - customTerraceButton.paddingRight = "1%";
101   - customTerraceButton.paddingTop = "1%";
102   - customTerraceButton.textBlock.fontSize = "28px";
103   - customTerraceButton.onPointerUpObservable.add(() => {
104   - if(this.gui.customTerraceGUI === undefined)
105   - createCustomTerrace();
106   - else{
107   - this.gui.menuContainer.isVisible = true;
108   - this.gui.menuTab.isVisible = true;
109   - customTerrace.initLines();
110   - }
111   - this.container.isVisible = false;
112   - });
113   - layoutSelectRow2.addControl(customTerraceButton);
114   - }
115   - else {
116   - this.layoutSelectContainer.isVisible = true;
117   - }
118   - }
119   -
120   - createMeasurementsGUI() {
121   - this.layoutMeasurementsContainer = this.gui.createStackPanel(1, 1, "1%", true);
122   - this.container.addControl(this.layoutMeasurementsContainer);
123   -
124   - var header = this.gui.createStackPanel(1, 0.1, 0, true);
125   - header.addControl(this.gui.createTextBlock("Legg inn sidelengder p\u00E5 terrassen:", 40));
126   - this.layoutMeasurementsContainer.addControl(header);
127   -
128   - var measurementRow1 = this.gui.createStackPanel(1, 0.78, 0, false);
129   - this.layoutMeasurementsContainer.addControl(measurementRow1);
130   -
131   - var imageCont = this.gui.createStackPanel(0.5, 1, 0, true);
132   - measurementRow1.addControl(imageCont);
133   - imageCont.addControl(this.layoutImage);
134   -
135   - var measurementsCont = this.gui.createStackPanel(0.5, 1, 0, true);
136   - measurementsCont.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
137   - measurementRow1.addControl(measurementsCont);
138   -
139   - var airCont = this.gui.createStackPanel(0.5, 0.5 - (this.layoutSides * 0.05), 0, true);
140   - measurementsCont.addControl(airCont);
141   -
142   - this.inputs = [];
143   - this.inputFocused = [];
144   -
145   - for(let i = 0; i < this.layoutSides; i++) {
146   - var measurementInputRow = this.gui.createStackPanel(1, 0.1, "1%", false);
147   -
148   - var labelCont = this.gui.createStackPanel(0.1, 1, 0, true);
149   - labelCont.addControl(this.gui.createTextBlock(String.fromCharCode(97 + i) + ":", 20));
150   - measurementInputRow.addControl(labelCont);
151   -
152   - var input = this.gui.createInputText(0.3, "40px", "");
153   - input.onBlurObservable.add(() => { this.inputFocused[i] = false; this.readInput = false; });
154   - input.onFocusObservable.add(() => { this.inputFocused[i] = true; });
155   - measurementInputRow.addControl(input);
156   -
157   - var unitCont = this.gui.createStackPanel(0.1, 1, 0, true);
158   - unitCont.addControl(this.gui.createTextBlock("mm", 20));
159   - measurementInputRow.addControl(unitCont);
160   -
161   - this.inputs.push(input);
162   - this.inputFocused.push(false);
163   - measurementsCont.addControl(measurementInputRow);
164   - }
165   -
166   - var nav = this.gui.createRectangleGUI(1, 0.1, 0, undefined);
167   - nav.thickness = 0;
168   - this.layoutMeasurementsContainer.addControl(nav);
169   -
170   - var btnBack = this.gui.createTextButton("btnMeasurementBack", "Tilbake");
171   - btnBack.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
172   - btnBack.width = "20%";
173   - btnBack.onPointerUpObservable.add(() => {
174   - this.layoutMeasurementsContainer.isVisible = false;
175   - this.layoutSelectContainer.isVisible = true;
176   - });
177   - nav.addControl(btnBack);
178   -
179   - var btnForward = this.gui.createTextButton("btnMeasurementForward", "Neste");
180   - btnForward.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
181   - btnForward.width = "20%";
182   - btnForward.onPointerUpObservable.add(() => {
183   - this.next();
184   - });
185   - nav.addControl(btnForward);
186   - }
187   -
188   - next() {
189   - this.inputs.name = this.layoutName;
190   - if(this.verifyInputs()) {
191   - this.container.isVisible = false;
192   - this.gui.createMenu();
193   -
194   - var input = [];
195   - input.name = this.layoutName;
196   - for(let i = 0; i < this.layoutSides; i++) {
197   - input.push(parseInt(this.inputs[i].text));
198   - }
199   -
200   - displayTerrace(input);
201   - }
202   - else {
203   - this.gui.notificationMessage.displayErrorMessage("Ugyldig input");
204   - }
205   - }
206   -
207   - verifyInputs() {
208   - for (let i = 0; i < this.inputs.length; i++) {
209   - if (isNaN(this.inputs[i].text) || parseInt(this.inputs[i].text) < 0 || this.inputs[i].text === "")
210   - return false;
211   - }
212   -
213   - switch(this.layoutName) {
214   - case "terraceSquare":
215   - break;
216   - case "terraceLShape":
217   - case "terraceDiamond":
218   - if(parseInt(this.inputs[0].text) <= parseInt(this.inputs[2].text)
219   - || parseInt(this.inputs[1].text) <= parseInt(this.inputs[3].text))
220   - return false;
221   - break;
222   - case "terraceTriangle":
223   - break;
224   - }
225   -
226   - return true;
227   - }
228   -
229   - handleKeyPresses(event) {
230   - if(event.keyCode === 9){
231   - for(let i = 0; i < this.inputFocused.length; i++) {
232   - if(this.inputFocused[i]) {
233   - this.inputs[i].onBlur();
234   - if(i + 1 < this.inputFocused.length){
235   - this.inputs[i + 1].onFocus();
236   - }
237   - else {
238   - this.inputs[0].onFocus();
239   - }
240   - this.readInput = true;
241   - return;
242   - }
243   - }
244   - } else if(event.keyCode === 13) {
245   - this.next();
246   - } else {
247   - for(let i = 0; i < this.inputFocused.length; i++) {
248   - if(this.inputFocused[i] && this.readInput){
249   - this.inputs[i].processKeyboard(event);
250   - return;
251   - }
252   - }
253   - }
254   - }
255   -
256   - createLayoutPreview(width, height, name, image, sides, container) {
257   - var button = this.gui.createImageButton(width, height, "1%", 5, name,
258   - "images/" + image + ".png", true);
259   -
260   - button.onPointerUpObservable.add(() => {
261   - this.layoutSelectContainer.isVisible = false;
262   -
263   - this.layoutSides = sides;
264   - this.layoutName = name;
265   - this.layoutImage = new BABYLON.GUI.Image(name + "_labeled", "images/" + image + "_labeled.png");
266   - this.layoutImage.stretch = BABYLON.GUI.Image.STRETCH_UNIFORM;
267   - this.layoutImage.width = "50%";
268   -
269   - this.createMeasurementsGUI();
270   - });
271   -
272   - container.addControl(button);
273   - }
274   -
275   - hide() {
276   - this.container.isVisible = false;
277   - }
278   -
279   - show() {
280   - this.container.isVisible = true;
281   - }
282   -
283   - dispose() {
284   - this.container.dispose();
285   - }
286   -}
287 0 \ No newline at end of file
js/gui/NotificationMessage.js deleted
1   -class NotificationMessage {
2   - constructor(gui) {
3   - this.gui = gui;
4   -
5   - this.MESSAGE_DELAY = 1500;
6   - this.messageTimer = undefined;
7   -
8   - this.container = this.gui.createRectangleGUI(0.5, 0.1, 5, "red");
9   - this.container.thickness = 0;
10   - this.container.top = "-40%";
11   - this.container.isVisible = false;
12   - this.container.zIndex = 99;
13   - this.container.onPointerUpObservable.add(() => {
14   - this.container.isVisible = false;
15   - clearTimeout(this.messageTimer);
16   - });
17   -
18   - this.gui.gui.addControl(this.container);
19   -
20   - this.message = this.gui.createTextBlock("", "30px");
21   - this.container.addControl(this.message);
22   - }
23   -
24   - displayErrorMessage(text) {
25   - this.displayMessage(text, "red");
26   - }
27   -
28   - displayStatusMessage(text) {
29   - this.displayMessage(text, "green");
30   - }
31   -
32   - displayMessage(text, color) {
33   - this.message.text = text;
34   - this.container.background = color;
35   - this.container.isVisible = true;
36   -
37   - clearTimeout(this.messageTimer);
38   - this.messageTimer = setTimeout(() => {
39   - this.container.isVisible = false;
40   - }, this.MESSAGE_DELAY);
41   - }
42   -}
43 0 \ No newline at end of file
style/style.css deleted
1   -html, body {
2   - overflow: hidden;
3   - width : 100%;
4   - height : 100%;
5   - margin : 0;
6   - padding : 0;
7   - font-family: Arial, Helvetica, sans-serif;
8   - font-size: 16px;
9   - text-align: center;
10   -}
11   -
12   -#renderCanvas {
13   - width : 100%;
14   - height : 100%;
15   - z-index : 5;
16   - touch-action: none;
17   -}
18   -
19   -#gui {
20   - width: 100%;
21   - height: 100%;
22   - display: none;
23   - z-index: 10;
24   -}
25   -
26   -#topButtons {
27   - width: 12%;
28   - height: 5%;
29   - position: fixed;
30   - left: 0;
31   - top: 0;
32   -}
33   -
34   -.cameraButtons {
35   - float: left;
36   - height: 100%;
37   - margin: 1%;
38   -}
39   -
40   -#helpLinesButton {
41   - height: 100%;
42   - float: left;
43   - margin: 1%;
44   -}
45   -
46   -#totalCostButton {
47   - position: fixed;
48   - left: 0;
49   - bottom: 0;
50   - height: 50px;
51   - width: 200px;
52   - font-size: 1.4em;
53   - border: 1px solid black;
54   - border-radius: 5px;
55   -}
56   -
57   -#itemList {
58   - position: fixed;
59   - width: 50%;
60   - height: 70%;
61   - background: lightgrey url("../images/background.jpg") no-repeat center;
62   - left: 25%;
63   - top: 15%;
64   - border: 1px solid black;
65   - border-radius: 10px;
66   - display: none;
67   - z-index: 15;
68   -}
69   -
70   -#itemListHeader {
71   - position: relative;
72   - width: 100%;
73   - height: 10%;
74   - top: 0;
75   -}
76   -
77   -#closeItemList {
78