Compare View

switch
from
...
to
 
Commits (6)
index.html
... ... @@ -42,46 +42,47 @@
42 42 <script src="js/Constants.js"></script>
43 43  
44 44 </head>
45   -<body onload="main()">
46   - <canvas id="renderCanvas"></canvas>
47   - <a id="inputTabFix" href="" onClick="return false;"></a>
  45 + <body onload="main()">
  46 + <canvas id="renderCanvas"></canvas>
  47 + <a id="inputTabFix" href="" onClick="return false;"></a>
48 48  
49   - <!--<div id="moduleMenu">
50   - <table id="moduleMenuRow1">
51   - <tr>
52   - <th class="moduleMenuHeader" colspan="6">Stolper</th>
53   - </tr>
54   - <tr>
55   - <td colspan="1"></td>
56   - <td colspan="1"></td>
57   - <td colspan="1"></td>
58   - <td colspan="1"></td>
59   - <td colspan="1"></td>
60   - <td colspan="1"></td>
61   - </tr>
62   - <tr>
63   - <td class="poleButtonHeader" colspan="2">180* Stolpe</td>
64   - <td class="poleButtonHeader" colspan="2">Endestolpe</td>
65   - <td class="poleButtonHeader" colspan="2">Veggfeste</td>
66   - </tr>
67   - <tr>
68   - <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_180.png" onmousedown="addPoleFromMenu('180')" ondragstart="return false"/></td>
69   - <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_end.png" onmousedown="addPoleFromMenu('end')" ondragstart="return false"/></td>
70   - <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_end.png" onmousedown="addPoleFromMenu('wall')" ondragstart="return false"/></td>
71   - </tr>
72   - <tr>
73   - <td colspan="1"></td>
74   - <td class="poleButtonHeader" colspan="2">90* Stolpe</td>
75   - <td class="poleButtonHeader" colspan="2">45* Stolpe</td>
76   - <td colspan="1"></td>
77   - </tr>
78   - <tr>
79   - <td colspan="1"></td>
80   - <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_90.png" onmousedown="addPoleFromMenu('90')" ondragstart="return false"/></td>
81   - <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_135.png" onmousedown="addPoleFromMenu('45')" ondragstart="return false"/></td>
82   - <td colspan="1"></td>
83   - </tr>
84   - </table>
85   - <p class ="moduleMenuHeader" id="fpsCounter">fps: </p>-->
86   -</body>
  49 + <!--<div id="moduleMenu">
  50 + <table id="moduleMenuRow1">
  51 + <tr>
  52 + <th class="moduleMenuHeader" colspan="6">Stolper</th>
  53 + </tr>
  54 + <tr>
  55 + <td colspan="1"></td>
  56 + <td colspan="1"></td>
  57 + <td colspan="1"></td>
  58 + <td colspan="1"></td>
  59 + <td colspan="1"></td>
  60 + <td colspan="1"></td>
  61 + </tr>
  62 + <tr>
  63 + <td class="poleButtonHeader" colspan="2">180* Stolpe</td>
  64 + <td class="poleButtonHeader" colspan="2">Endestolpe</td>
  65 + <td class="poleButtonHeader" colspan="2">Veggfeste</td>
  66 + </tr>
  67 + <tr>
  68 + <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_180.png" onmousedown="addPoleFromMenu('180')" ondragstart="return false"/></td>
  69 + <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_end.png" onmousedown="addPoleFromMenu('end')" ondragstart="return false"/></td>
  70 + <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_end.png" onmousedown="addPoleFromMenu('wall')" ondragstart="return false"/></td>
  71 + </tr>
  72 + <tr>
  73 + <td colspan="1"></td>
  74 + <td class="poleButtonHeader" colspan="2">90* Stolpe</td>
  75 + <td class="poleButtonHeader" colspan="2">45* Stolpe</td>
  76 + <td colspan="1"></td>
  77 + </tr>
  78 + <tr>
  79 + <td colspan="1"></td>
  80 + <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_90.png" onmousedown="addPoleFromMenu('90')" ondragstart="return false"/></td>
  81 + <td class="poleButtonContainer" colspan="2"><input class="poleButton" type="image" src="images/menu_pole_135.png" onmousedown="addPoleFromMenu('45')" ondragstart="return false"/></td>
  82 + <td colspan="1"></td>
  83 + </tr>
  84 + </table>
  85 + <p class ="moduleMenuHeader" id="fpsCounter">fps: </p>-->
  86 +
  87 + </body>
87 88 </html>
88 89 \ No newline at end of file
... ...
index_NEW.html
... ... @@ -48,23 +48,35 @@
48 48  
49 49 <div id="layoutSelection">
50 50 <div class="centeredContent">
51   - <div class="headline">Velg utforming på terrasse</div>
  51 + <div class="headline">Velg utforming på din terrasse</div>
52 52 <div class="preamble">I neste steg kan du legge inn sidemål</div>
53   - <div id="divider"></div>
54   - <div id="row1">
  53 +
  54 + <div id="layoutRow">
55 55 <input id="btLayout1" class="layoutButton" type="image" src="images/terrace_square.png">
56 56 <input id="btLayout2" class="layoutButton" type="image" src="images/terrace_l_shape.png">
57 57 <input id="btLayout3" class="layoutButton" type="image" src="images/terrace_triangle.png">
58 58 <input id="btLayout4" class="layoutButton" type="image" src="images/terrace_diamond.png">
59 59 </div>
  60 +
  61 + <button id="btNext"><span>Neste</span></button>
  62 +
60 63 </div>
61 64 </div>
62 65  
63   - <button id="btNext">Neste</button>
  66 + <div id="layout1" style="visibility: hidden">
  67 + <div class="centeredContent">
  68 + <div class="headline">Oppgi sidelengder på din terrasse</div>
  69 +
  70 +
  71 + </div>
  72 + </div>
  73 +
  74 +
64 75  
65 76 <canvas id="renderCanvas">
66 77 Denne nettleseren støtter ikke "canvas"-elementet!
67 78 </canvas>
  79 +
68 80 <a id="inputTabFix" href="" onClick="return false;"></a>
69 81  
70 82 </div>
... ...
js/Glass.js
... ... @@ -84,6 +84,10 @@ class Glass {
84 84 }
85 85 }
86 86  
  87 + isMesh(mesh) {
  88 + return mesh === this.glass || mesh === this.handrail;
  89 + }
  90 +
87 91 getYRotation() {
88 92 return this.mesh.rotationQuaternion.toEulerAngles().y;
89 93 }
... ... @@ -119,7 +123,6 @@ class Glass {
119 123 }
120 124  
121 125 delete() {
122   - // TODO: Hva skjer med segment på stolpe?
123 126 this.removeSegment();
124 127 this.dispose();
125 128 }
... ... @@ -128,28 +131,7 @@ class Glass {
128 131 if(x === 0 && z === 0) {
129 132 return false;
130 133 }
131   - if(this.end1.connectedMesh && this.end2.connectedMesh) {
132   - return false;
133   - }
134   - else if(this.end1.connectedMesh) {
135   - if(Math.abs(x) > 70 || Math.abs(z) > 70) {
136   - removeConnection(this.end1.connectedMesh, this.end1);
137   - this.removeSegment();
138   - }
139   - else {
140   - return false;
141   - }
142   - }
143   - else if(this.end2.connectedMesh) {
144   - if(Math.abs(x) > 70 || Math.abs(z) > 70) {
145   - removeConnection(this.end2.connectedMesh, this.end2);
146   - this.removeSegment();
147   - }
148   - else {
149   - return false;
150   - }
151   - }
152   - return true;
  134 + return !(this.end1.connectedMesh || this.end2.connectedMesh);
153 135 }
154 136  
155 137 translate(x, z) {
... ... @@ -158,8 +140,8 @@ class Glass {
158 140 return;
159 141 }
160 142  
161   - var minDistanceToEdgeX = 0;
162   - var minDistanceToEdgeZ = 0;
  143 + var minDistanceToEdgeX = 19;
  144 + var minDistanceToEdgeZ = 19;
163 145 var rayXZLength = 150;
164 146  
165 147 var yRot = this.getYRotation();
... ... @@ -252,7 +234,7 @@ class Glass {
252 234 }
253 235  
254 236 placeGlassOnPole(pole) {
255   - if(pole.getChildren().length === 1) {
  237 + if(pole.containerClass.type === POLE_END || pole.containerClass.type === WALL_MOUNT) {
256 238 this.attachGlassToHolder(pole.getChildren()[0]);
257 239 }
258 240 else {
... ... @@ -326,7 +308,6 @@ class Glass {
326 308 this.mesh.position = holder.absolutePosition.clone();
327 309 var rotation = holder.rotationQuaternion.multiply(holder.parent.rotationQuaternion)
328 310 .multiply(closestEnd.rotationQuaternion);
329   - // TODO: Finn riktig offset på holdere.
330 311 if(holder.name === "pole135.holder1") {
331 312 rotation.multiplyInPlace(new BABYLON.Quaternion(0, -0.9238795325112866, 0, 0.3826834323650897));
332 313 }
... ... @@ -346,7 +327,6 @@ class Glass {
346 327 }
347 328 this.mesh.markAsDirty();
348 329 this.onTerrace = true;
349   - console.log("hei");
350 330  
351 331 setTimeout(() => {
352 332 this.checkForSegment(holder);
... ...
js/MeshControls.js
... ... @@ -104,15 +104,8 @@ class MeshControls {
104 104  
105 105 onPointerDown() {
106 106 var pickInfo = scene.pick(scene.pointerX, scene.pointerY, (mesh) => {
107   - if (this.meshClass instanceof Glass) {
108   - if (mesh === this.meshClass.glass || mesh === this.meshClass.handrail) {
109   - return true;
110   - }
111   - }
112   - else {
113   - if (mesh === this.meshClass.mesh || mesh === this.meshClass.mesh.getChildren()[1]) {
114   - return true;
115   - }
  107 + if(this.meshClass.isMesh(mesh)) {
  108 + return true;
116 109 }
117 110 });
118 111  
... ...
js/Segment.js
... ... @@ -100,7 +100,7 @@ class Segment {
100 100  
101 101 if(this.lengthTextPlane) {
102 102 this.lengthTextPlane.material.diffuseTexture.getContext().clearRect(0, 0, 128, 32);
103   - this.lengthTextPlane.material.diffuseTexture.drawText(length.toFixed(2) + "mm", 0, 26, "20px Verdana", "red", "white");
  103 + this.lengthTextPlane.material.diffuseTexture.drawText(length.toFixed(2) + "mm", 0, 26, "19px Verdana", "red", "white");
104 104 this.lengthTextPlane.position = new BABYLON.Vector3(planeX, 5, planeZ);
105 105  
106 106 if(ends.dir === "x") {
... ... @@ -156,7 +156,7 @@ class Segment {
156 156 else {
157 157 var dt = new BABYLON.DynamicTexture("segmentText", {width: 128, height: 32}, scene);
158 158 dt.hasAlpha = true;
159   - dt.drawText(length.toFixed(2) + "mm", 0, 26, "20px Verdana", "red", "white");
  159 + dt.drawText(length.toFixed(2) + "mm", 0, 26, "19px Verdana", "red", "white");
160 160  
161 161 this.lengthTextPlane = BABYLON.MeshBuilder.CreatePlane("segmentTextPlane", {width: 512, height: 128}, scene);
162 162 this.lengthTextPlane.material = new BABYLON.StandardMaterial("segmentPlaneMat2", scene);
... ... @@ -279,13 +279,19 @@ class Segment {
279 279 }
280 280  
281 281 addElement(mesh, connectedMesh) {
282   - if(connectedMesh === this.elements[0]) {
283   - this.elements.unshift(mesh);
  282 + try {
  283 + if(connectedMesh === this.elements[0]) {
  284 + this.elements.unshift(mesh);
  285 + }
  286 + else if(connectedMesh === this.elements[this.elements.length - 1]) {
  287 + this.elements.push(mesh);
  288 + }
  289 + this.drawLength();
284 290 }
285   - else if(connectedMesh === this.elements[this.elements.length - 1]) {
286   - this.elements.push(mesh);
  291 + catch(e) {
  292 + console.log("Noe gikk galt");
  293 + console.log(e);
287 294 }
288   - this.drawLength();
289 295 }
290 296  
291 297 removeElement(meshId) {
... ...
js/app.js
... ... @@ -25,6 +25,8 @@ var glassEnds = [];
25 25 var shoppingCart = [];
26 26 var totalCost = 0;
27 27  
  28 +var layoutSelected = undefined;
  29 +
28 30 function main() {
29 31 canvas = document.getElementById("renderCanvas");
30 32 var engine = new BABYLON.Engine(canvas, true);
... ... @@ -171,7 +173,6 @@ function onMouseMove(event) {
171 173 }
172 174 else {
173 175 pointerMeshClass.mesh.position = current;
174   - console.log(current);
175 176 }
176 177  
177 178 pointerMeshStartingPoint = current;
... ... @@ -307,11 +308,13 @@ function addGlass(glass) {
307 308  
308 309 function placeGlass(meshClass) {
309 310 meshControls.show(meshClass);
  311 + meshClass.mesh.markAsDirty();
310 312 meshClass.collect();
311 313 }
312 314  
313 315 function placePole(meshClass) {
314 316 meshControls.show(meshClass);
  317 + meshClass.mesh.markAsDirty();
315 318 meshClass.collect();
316 319 }
317 320  
... ... @@ -489,17 +492,26 @@ function addEverything() {
489 492 this.addToCart(glassTypes[i]);
490 493 }
491 494  
492   -/*
493 495 function initButtons() {
494   - document.getElementById("btLayout1").onclick = function () { selectedLayout(1); };
495   - document.getElementById("btLayout2").onclick = function () { selectedLayout(2); };
496   - document.getElementById("btLayout3").onclick = function () { selectedLayout(3); };
497   - document.getElementById("btLayout4").onclick = function () { selectedLayout(4); };
  496 + document.getElementById("btLayout1").onclick = function () { selectedLayout(1) };
  497 + document.getElementById("btLayout2").onclick = function () { selectedLayout(2) };
  498 + document.getElementById("btLayout3").onclick = function () { selectedLayout(3) };
  499 + document.getElementById("btLayout4").onclick = function () { selectedLayout(4) };
  500 + document.getElementById("btNext").onclick = function () { initLayoutMeasurements() };
498 501 }
499 502  
500 503 function selectedLayout(num) {
501   - console.log("Layout #" + num + " selected.");
502   -}*/
  504 + layoutSelected = num;
  505 +}
  506 +
  507 +function initLayoutMeasurements() {
  508 + if (layoutSelected) {
  509 + console.log("Layout " + layoutSelected + " selected.");
  510 + document.getElementById("layoutSelection").style.display = "none";
  511 + } else {
  512 + console.log("Layout not selected.");
  513 + }
  514 +}
503 515  
504 516 // GUI
505 517  
... ...
js/pole/Pole.js
... ... @@ -60,7 +60,27 @@ class Pole {
60 60 camera.setPerspectiveCameraTarget(this.mesh.position.clone(), 500);
61 61 }
62 62 )
63   - )
  63 + );
  64 +
  65 + if(this.type === WALL_MOUNT) {
  66 + var wall = this.mesh.getChildren()[1];
  67 + wall.actionManager = new BABYLON.ActionManager(scene);
  68 + wall.actionManager.registerAction(
  69 + new BABYLON.ExecuteCodeAction(
  70 + BABYLON.ActionManager.OnPickTrigger, () => {
  71 + if(meshControls.meshClass !== this) {
  72 + meshControls.show(this);
  73 + }
  74 +
  75 + camera.setPerspectiveCameraTarget(this.mesh.position.clone(), 500);
  76 + }
  77 + )
  78 + );
  79 + }
  80 + }
  81 +
  82 + isMesh(mesh) {
  83 + return mesh === this.mesh || (this.type === WALL_MOUNT && mesh === this.mesh.getChildren()[1]);
64 84 }
65 85  
66 86 getYRotation() {
... ... @@ -86,6 +106,9 @@ class Pole {
86 106  
87 107 updateHoverCursor(cursor) {
88 108 this.mesh.actionManager.hoverCursor = cursor;
  109 + if(this.type === WALL_MOUNT) {
  110 + this.mesh.getChildren()[1].actionManager.hoverCursor = cursor;
  111 + }
89 112 }
90 113  
91 114 rotate(amount) {
... ... @@ -183,37 +206,13 @@ class Pole {
183 206 }
184 207 if(this.type === POLE_END || this.type === WALL_MOUNT) {
185 208 if(this.holder1.connectedMesh) {
186   - if(Math.abs(x) < 70 && Math.abs(z) < 70) {
187   - return false;
188   - }
189   - else {
190   - removeConnection(this.holder1, this.holder1.connectedMesh);
191   - this.removeSegment(this.holder1);
192   - }
  209 + return false;
193 210 }
194 211 }
195 212 else {
196   - if(this.holder1.connectedMesh && this.holder2.connectedMesh) {
  213 + if(this.holder1.connectedMesh || this.holder2.connectedMesh) {
197 214 return false;
198 215 }
199   - else if(this.holder1.connectedMesh) {
200   - if(Math.abs(x) > 70 || Math.abs(z) > 70) {
201   - removeConnection(this.holder1, this.holder1.connectedMesh);
202   - this.removeSegment(this.holder1);
203   - }
204   - else {
205   - return false;
206   - }
207   - }
208   - else if(this.holder2.connectedMesh) {
209   - if(Math.abs(x) > 70 || Math.abs(z) > 70) {
210   - removeConnection(this.holder2, this.holder2.connectedMesh);
211   - this.removeSegment(this.holder2);
212   - }
213   - else {
214   - return false;
215   - }
216   - }
217 216 }
218 217 return true;
219 218 }
... ... @@ -321,6 +320,7 @@ class Pole {
321 320 addConnection(holder, glassEnd);
322 321  
323 322 this.mesh.markAsDirty();
  323 + this.onTerrace = true;
324 324  
325 325 setTimeout(() => {
326 326 this.checkForSegment(holder, glassEnd.parent);
... ...
js/pole/PoleProvider.js
... ... @@ -257,7 +257,7 @@ class PoleProvider {
257 257  
258 258 let holder1 = BABYLON.MeshBuilder.CreateBox("holder1", {size: 10}, scene);
259 259 holder1.position.x -= 34.69;
260   - holder1.position.y -= 6;
  260 + holder1.position.y = 0;
261 261 holder1.isVisible = false;
262 262 this.wallMount.addChild(holder1);
263 263  
... ... @@ -347,7 +347,7 @@ class PoleProvider {
347 347 wallMount.addLODLevel(this.lodDistance, poleLod);
348 348 }
349 349  
350   - wallMount.getChildren()[0].isVisible = true; // Holder
  350 + //wallMount.getChildren()[0].isVisible = true; // Holder
351 351 wallMount.getChildren()[1].isVisible = true; // Wall
352 352  
353 353 wallMount.position.y = 0;
... ...
style.css
... ... @@ -17,36 +17,63 @@ button:focus {
17 17 outline: 0;
18 18 }
19 19  
  20 +input:focus {
  21 + outline: none;
  22 +}
  23 +
20 24 #layoutSelection {
21 25 position: absolute;
22 26 left: 50%;
23   - top: 10%;
  27 + top: 50%;
  28 + width: 750px;
  29 + height: 600px;
24 30 }
25 31  
26 32 #btNext {
27 33 position: relative;
28   - left: 90%;
29   - top: 90%;
  34 + left: 42%;
30 35 border: none;
31 36 color: white;
32   - padding: 14px 28px;
  37 + padding: 10px;
  38 + margin: 10px;
  39 + width: 100px;
33 40 cursor: pointer;
34   - background-color: #4CAF50;
  41 + background-color: #05AE0E;
35 42 font-size: 1em;
36 43 border-radius: 5px;
  44 + transition: all 0.2s ease-in-out;
  45 +}
  46 +
  47 +#btNext:hover span {
  48 + padding-right: 15px;
  49 +}
  50 +
  51 +#btNext span {
  52 + cursor: pointer;
  53 + display: inline-block;
  54 + position: relative;
  55 + transition: 0.5s;
  56 +}
  57 +
  58 +#btNext span:after {
  59 + content: '\00bb';
  60 + position: absolute;
  61 + opacity: 0;
  62 + top: 0;
  63 + right: -10px;
  64 + transition: 0.5s;
37 65 }
38 66  
39   -#btNext:hover {
40   - background-color: #46a049;
  67 +#btNext:hover span:after {
  68 + opacity: 1;
  69 + right: 0;
41 70 }
42 71  
43   -#divider {
44   - width: 100%;
45   - height: 3px;
46   - background-color: black;
  72 +#btNext:active {
  73 + transform: scale(0.95);
47 74 }
48 75  
49   -#row1 {
  76 +#layoutRow {
50 77 padding: 20px;
51 78 }
52 79  
... ... @@ -62,8 +89,10 @@ button:focus {
62 89 position: relative;
63 90 text-align: center;
64 91 left: -50%;
  92 + top: -40%;
65 93 background: white;
66   - border-radius: 20px;
  94 + border-radius: 10px;
  95 + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
67 96 }
68 97  
69 98 .headline {
... ... @@ -77,6 +106,7 @@ button:focus {
77 106 font-family: Arial, Helvetica, sans-serif;
78 107 font-style: normal;
79 108 font-size: 1em;
  109 + color: dimgrey;
80 110 padding-top: 10px;
81 111 padding-bottom: 30px
82 112 }
... ... @@ -84,4 +114,11 @@ button:focus {
84 114 .layoutButton {
85 115 width: 150px;
86 116 height: 150px;
  117 + padding: 10px;
  118 + transition: all .2s ease-in-out;
  119 +}
  120 +
  121 +.layoutButton:hover {
  122 + cursor: pointer;
  123 + transform: scale(1.1);
87 124 }
88 125 \ No newline at end of file
... ...