Compare View

switch
from
...
to
 
Commits (2)
css/style.css
... ... @@ -136,10 +136,6 @@ ul li {
136 136 /* ----------------------------------------------------------- */
137 137 /* ------------------- Measurement input --------------------- */
138 138  
139   -#measurements {
140   -
141   -}
142   -
143 139 #lengths {
144 140 padding-top: 20px;
145 141 padding-bottom: 20px;
... ... @@ -228,7 +224,7 @@ ul li {
228 224 height: 100%;
229 225 }
230 226  
231   -.test-wrapper {
  227 +.custom-terrace-wrapper {
232 228 overflow-y: auto;
233 229 overflow-x: hidden;
234 230 border-top-left-radius: 10px;
... ... @@ -238,10 +234,8 @@ ul li {
238 234 height: 100%;
239 235 width: 275px;
240 236 z-index: 20;
241   - /*background-image: url("../images/wallpapers/seamless_paper_texture.png");*/
  237 + background: url("../images/wallpapers/funky-lines.png");
242 238 border: 1px solid black;
243   - background-color: #f9f9f9;
244   - /*margin: 10px;*/
245 239 }
246 240  
247 241 /* ----------------------------------------------------------- */
... ... @@ -327,7 +321,6 @@ ul li {
327 321 #gui {
328 322 width: 100%;
329 323 height: 100%;
330   - /*display: none;*/
331 324 z-index: 10;
332 325 }
333 326  
... ... @@ -338,7 +331,7 @@ ul li {
338 331 position: fixed;
339 332 bottom: 5px;
340 333 left: 5px;
341   - width: 100px;
  334 + width: 80px;
342 335 z-index: 15;
343 336 text-align: center;
344 337 transition: all 0.2s ease-in-out;
... ... @@ -355,12 +348,12 @@ ul li {
355 348 }
356 349  
357 350 #imgCart {
358   - width: 50px;
  351 + width: 40px;
359 352 bottom: 0;
360 353 }
361 354  
362 355 #subtotal {
363   - font-size: 15px;
  356 + font-size: 10px;
364 357 font-family: Arial, Helvetica, sans-serif;
365 358 }
366 359  
... ... @@ -401,16 +394,34 @@ ul li {
401 394  
402 395 #closeItemList {
403 396 position: absolute;
404   - top: -30px;
  397 + top: -20px;
405 398 right: 10px;
406 399 cursor: pointer;
407 400 font-size: 50px;
408 401 }
409 402  
410   -#itemTableDiv {
  403 +#itemTableHead {
  404 + position: relative;
  405 + margin-top: 10px;
  406 + left: 1%;
411 407 width: 98%;
412   - height: 75%;
  408 + text-align: center;
  409 + background-color: #cccccc;
413 410 border: 1px solid black;
  411 +}
  412 +
  413 +#itemTableHead thead tr th {
  414 + text-align: center;
  415 +}
  416 +
  417 +#itemTableDiv {
  418 + position: relative;
  419 + top: 2%;
  420 + width: 98%;
  421 + height: 70%;
  422 + border-left: 1px solid black;
  423 + border-right: 1px solid black;
  424 + border-top: 1px solid black;
414 425 margin: 0 1%;
415 426 overflow: auto;
416 427 background-color: white;
... ... @@ -429,6 +440,19 @@ ul li {
429 440 vertical-align: top;
430 441 }
431 442  
  443 +#itemTableFoot {
  444 + position: relative;
  445 + top: 2%;
  446 + left: 1%;
  447 + width: 98%;
  448 + background-color: #cccccc;
  449 + border: 1px solid black;
  450 +}
  451 +
  452 +#itemTableFoot tr th div, #itemTableFoot tr th {
  453 + text-align: right;
  454 +}
  455 +
432 456 #itemListFooter {
433 457 position: relative;
434 458 width: 100%;
... ... @@ -437,7 +461,7 @@ ul li {
437 461 #downloadItemListButton {
438 462 position: relative;
439 463 right: -355px;
440   - bottom: -5px;
  464 + top: 20px;
441 465 width: 70px;
442 466 cursor: pointer;
443 467 transition: all 0.2s ease-in-out;
... ... @@ -469,24 +493,41 @@ ul li {
469 493 width: 200px;*/
470 494 }
471 495  
  496 +#home {
  497 + position: fixed;
  498 + top: 0;
  499 + z-index: 20;
  500 + width: 30px;
  501 + display: none;
  502 +}
  503 +
  504 +#helpLinesButton {
  505 + position: fixed;
  506 + top: -1px;
  507 + z-index: 20;
  508 + margin: 5px;
  509 + left: 10px;
  510 + height: 40px;
  511 +}
  512 +
472 513 .view-nav {
473 514 position: relative;
474 515 top: 0;
475   - left: -20px;
476   - width: 60px;
  516 + left: 28px;
  517 + width: 45px;
477 518 }
478 519  
479   -/* https://bit.ly/2L2k2qd */
  520 +/************ https://bit.ly/2L2k2qd **************/
480 521 .view-nav li ul {
481 522 position:absolute;
482 523 left: 0;
483   - top:36px;
  524 + top: 36px;
484 525 z-index:1;
485 526 }
486 527 .view-nav li ul li {
487 528 overflow:hidden;
488 529 max-height:0;
489   - width: 70px;
  530 + width: 55px;
490 531 -webkit-transition:max-height 500ms ease;
491 532 -moz-transition:max-height 500ms ease;
492 533 -o-transition:max-height 500ms ease;
... ... @@ -495,18 +536,19 @@ ul li {
495 536 .view-nav ul > li:hover ul li {
496 537 max-height:100px;
497 538 }
  539 +/**************************************************/
498 540  
499 541 .view {
500   - width: 60px;
  542 + width: 45px;
501 543 }
502 544  
503 545 .dropdown-view {
504   - padding-top: 20px;
  546 + padding-top: 5px;
505 547 padding-left: 40px
506 548 }
507 549  
508 550 .cameraButtons {
509   - width: 45px;
  551 + width: 35px;
510 552 margin-left: 5px;
511 553 margin-top: 5px;
512 554 }
... ... @@ -515,20 +557,30 @@ ul li {
515 557 transform: scale(1.05);
516 558 }
517 559  
518   -#helpLinesButton {
  560 +
  561 +#zoom-out {
519 562 position: fixed;
520   - top:0;
  563 + top: 0;
521 564 z-index: 20;
522   - margin: 5px;
523   - left: 90px;
524   - height: 50px;
  565 + margin-top: 10px;
  566 + height: 30px;
  567 + left: 125px;
  568 +}
  569 +
  570 +#zoom-in {
  571 + position: fixed;
  572 + top: 0;
  573 + z-index: 20;
  574 + margin-top: 10px;
  575 + height: 30px;
  576 + left: 170px;
525 577 }
526 578  
527 579 #helpButton {
528 580 position: fixed;
529   - top: 2px;
530   - left: 150px;
531   - height: 45px;
  581 + top: 6px;
  582 + left: 210px;
  583 + height: 25px;
532 584 margin: 5px;
533 585 }
534 586  
... ... @@ -543,7 +595,7 @@ ul li {
543 595 border: none;
544 596 height: 20px;
545 597 transform: rotate(180deg);
546   - transition: all 1s;
  598 + transition: all 0.5s;
547 599 }
548 600  
549 601 #moduleMenuGUI {
... ... @@ -565,7 +617,7 @@ ul li {
565 617 background: url("../images/wallpapers/funky-lines.png");
566 618 border-top-left-radius: 10px;
567 619 border-bottom-left-radius: 10px;
568   - transition: right 1s;
  620 + transition: right 0.5s;
569 621 }
570 622  
571 623 .poleButtons {
... ... @@ -610,10 +662,6 @@ ul li {
610 662 margin-top: 10px;
611 663 }
612 664  
613   -#glassTypeInfo {
614   - padding-bottom: 2%;
615   -}
616   -
617 665 #glassButtons {
618 666 position: relative;
619 667 }
... ... @@ -639,11 +687,16 @@ ul li {
639 687 left: 10%;
640 688 }
641 689  
642   -.option-dropdown-info {
  690 +#glass-type-selection, #glass-width-selection {
  691 + width: 80%;
  692 + left: 10%;
  693 +}
  694 +
  695 +#glassTypeInfo, #glassWidthInfo{
643 696 width: 35%;
644 697 }
645 698  
646   -.option-dropdown-selection {
  699 +#glassTypeSelect, #glassWidthSelect {
647 700 width: 65%;
648 701 }
649 702  
... ... @@ -738,12 +791,11 @@ ul li {
738 791 height: 40px;
739 792 }
740 793  
741   -/*******************************************************/
742   -/************ AutoGen ********************/
743   -/*******************************************************/
  794 +/************************************************/
  795 +/***************** Autogen **********************/
744 796  
745 797 .autoGenPoleButton {
746   - height: 125px;
  798 + height: 80px;
747 799 border: 1px solid black;
748 800 border-radius: 5px;
749 801 }
... ... @@ -871,26 +923,111 @@ ul li {
871 923 background-color: rgba(0, 0, 0, 0.8);
872 924 }
873 925  
  926 +#info {
  927 + font-size: 1.25em;
  928 + overflow-y: auto;
  929 + overflow-x: hidden;
  930 +}
  931 +
874 932 .infotext {
875   - position: absolute;
876   - top: 50%;
877   - left: 35%;
878   - font-size: 50px;
879 933 color: white;
  934 + margin-top: 5px;
  935 + float: left;
  936 + text-align: left;
  937 + font-size: 0.8em;
880 938 }
881 939  
882   -.close-info {
883   - position: absolute;
884   - top: 20px;
885   - right: 40px;
  940 +.close {
  941 + position: fixed;
  942 + top: 10px;
  943 + right: 25px;
  944 + z-index: 31;
886 945 font-size: 3em;
887 946 color: white;
888 947 cursor: pointer;
889 948 }
890 949  
891   -.btNextTip {
892   - position: absolute;
893   - right: 50px;
894   - top: 50%;
895   - width: 100px;
  950 +.close:hover {
  951 + color: white;
  952 +}
  953 +
  954 +.info-pole-buttons {
  955 + background-color: white;
  956 + border: 1px solid black;
  957 + border-radius: 5px;
  958 + height: 60px;
  959 + width: 60px;
  960 +}
  961 +
  962 +.element-row{
  963 + margin-top: 8px;
  964 +}
  965 +
  966 +.right {
  967 + float: right;
  968 +}
  969 +
  970 +.select-img {
  971 + height: 30px;
  972 + float: right;
896 973 }
  974 +
  975 +.scaled-img {
  976 + height: 60px;
  977 + float: right;
  978 + transform: scaleX(1.4);
  979 + padding-left: 40px;
  980 +}
  981 +
  982 +.glass-row {
  983 + margin-right: 20px;
  984 +}
  985 +
  986 +.img {
  987 + height: 30px;
  988 + background-color: rgba(255, 255, 255, 0.9);
  989 + border: 1px solid black;
  990 + border-radius: 5px;
  991 +}
  992 +
  993 +.shopping-cart {
  994 + height: 30px;
  995 + background-color: rgba(255, 255, 255, 0.9);
  996 + border: 1px solid black;
  997 + border-radius: 5px;
  998 + padding: 2px;
  999 +}
  1000 +
  1001 +.pdf {
  1002 + height: 55px;
  1003 + right: -30px;
  1004 +}
  1005 +
  1006 +.perspective {
  1007 + height: 45px;
  1008 +}
  1009 +
  1010 +.ruler {
  1011 + height: 40px;
  1012 +}
  1013 +
  1014 +.zoom {
  1015 + height: 30px;
  1016 + margin-bottom: 50px;
  1017 +}
  1018 +
  1019 +.offset5 {
  1020 + margin-top: 5px;
  1021 +}
  1022 +
  1023 +.offset10 {
  1024 + margin-top: 10px;
  1025 +}
  1026 +
  1027 +.offset15 {
  1028 + margin-top: 15px;
  1029 +}
  1030 +
  1031 +.offset20 {
  1032 + margin-top: 20px;
  1033 +}
897 1034 \ No newline at end of file
... ...
images/icons/close.png 0 → 100644

3.95 KB

images/icons/help.png

6.02 KB | W: | H:

2.6 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/home.png 0 → 100644

759 Bytes

images/icons/pdf.png

4.79 KB | W: | H:

4.79 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/pdf_2.png 0 → 100644

5.02 KB

images/icons/ruler_2.png

10.6 KB | W: | H:

848 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/ruler_3.png 0 → 100644

10.6 KB

images/icons/ruler_inverted.png 0 → 100644

1.92 KB

images/icons/ruler_outlined.png 0 → 100644

3.38 KB

images/icons/type.png 0 → 100644

10.7 KB

images/icons/view.png

2.01 KB | W: | H:

1.85 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/view_.png 0 → 100644

2.01 KB

images/icons/view_inverted.png 0 → 100644

2.04 KB

images/icons/view_outlined.png 0 → 100644

7 KB

images/icons/width.png 0 → 100644

11.8 KB

images/icons/zoom_in.png 0 → 100644

2.73 KB

images/icons/zoom_in_inverted.png 0 → 100644

2.2 KB

images/icons/zoom_out.png 0 → 100644

2.6 KB

images/icons/zoom_out_inverted.png 0 → 100644

2.18 KB

images/menu_terrace_texture_9.png 0 → 100644

76.7 KB

images/psd/terrace_diamond_labeled.psd 0 → 100644
No preview for this file type
images/psd/terrace_l_shape_labeled.psd 0 → 100644
No preview for this file type
images/psd/terrace_square_labeled.psd 0 → 100644
No preview for this file type
images/psd/terrace_triangle_labeled.psd 0 → 100644
No preview for this file type
images/references.txt
... ... @@ -8,11 +8,19 @@ ruler.png https://www.iconfinder.com/icons/296913/design_ruler_icon#si
8 8 plus.png https://www.iconfinder.com/icons/126583/add_plus_icon#size=128
9 9 shoppingcart.png https://www.iconfinder.com/icons/1608412/cart_shopping_icon#size=128
10 10 view.png https://www.iconfinder.com/icons/216550/view_icon#size=128
11   -help.png https://www.iconfinder.com/icons/40797/blue_help_icon#size=128
  11 +help.png https://www.iconfinder.com/icons/183285/help_mark_question_icon#size=128
12 12 double_arrow.png https://www.iconfinder.com/icons/383079/arrow_double_right_icon#size=128
13 13 cancel.png https://www.iconfinder.com/icons/646197/cancel_close_cross_delete_remove_stop_wrong_icon#size=128
14 14 finished.png https://www.iconfinder.com/icons/646195/done_ok_right_success_tick_valid_yes_icon#size=128
15   -pdf.png https://www.iconfinder.com/icons/511559/document_download_file_files_pdf_icon#size=128
  15 +pdf.png https://www.iconfinder.com/icons/511559/document_download_file_files_pdf_icon#size=128
  16 +close.png https://www.iconfinder.com/icons/216470/close_icon#size=128
  17 +zoom_out.png https://www.iconfinder.com/icons/106233/out_zoom_icon#size=128
  18 +zoom_in.png https://www.iconfinder.com/icons/106237/in_zoom_icon#size=128
  19 +camera.png https://www.iconfinder.com/icons/211634/camera_icon#size=128
  20 +home.png https://www.iconfinder.com/icons/183566/home_icon#size=128
16 21  
17 22  
18   -graySpecularHDR.dds https://github.com/sbtron/BabylonJS-glTFLoader/blob/master/src/images/graySpecularHDR.dds
19 23 \ No newline at end of file
  24 +graySpecularHDR.dds https://github.com/sbtron/BabylonJS-glTFLoader/blob/master/src/images/graySpecularHDR.dds
  25 +
  26 +terrace texture https://www.sketchuptextureclub.com/textures/architecture/wood-planks/wood-decking/laminated-beech-wood-decking-texture-seamless-09323
  27 +funky lines https://www.toptal.com/designers/subtlepatterns/funky-lines/
20 28 \ No newline at end of file
... ...
index.html
... ... @@ -7,7 +7,7 @@
7 7 <!-- Bootstrap CSS -->
8 8 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
9 9  
10   - <!-- My CSS -->
  10 + <!-- Custom CSS -->
11 11 <link rel="stylesheet" type="text/css" href="css/style.css">
12 12  
13 13 <!------------------------------------------------------ SCRIPT ------------------------------------------------------->
... ... @@ -36,18 +36,18 @@
36 36  
37 37 <script src="js/HTMLGUI.js"></script>
38 38  
39   - <!------------------------------------------------>
40   - <script src="js/gui/GUI.js"></script>
41   - <script src="js/gui/CustomTerraceGUI.js"></script>
42   - <script src="js/gui/NotificationMessage.js"></script>
43   - <script src="js/gui/LayoutSelectionGUI.js"></script>
44   - <!------------------------------------------------>
45   -
46 39 <script src="js/PDF/PDF.js"></script>
47 40 <script src="js/PDF/ImageURLS.js"></script>
48 41  
49 42 <script src="js/Constants.js"></script>
50 43 <script src="js/Setup.js"></script>
  44 +
  45 + <!-- Warn user on page refresh/exit -->
  46 + <script type="text/javascript">
  47 + window.onbeforeunload = function() {
  48 + return "Verify page refresh";
  49 + }
  50 + </script>
51 51 <!--------------------------------------------------------------------------------------------------------------------->
52 52  
53 53 </head>
... ... @@ -187,8 +187,8 @@
187 187  
188 188 </div>
189 189  
190   - <!-- Testing -->
191   - <div class="test-wrapper hide" id="testWrapper">
  190 + <!-- Custom terrace wrapper -->
  191 + <div class="custom-terrace-wrapper hide" id="testWrapper">
192 192  
193 193 <!-- Custom terrace GUI -->
194 194 <div id="customTerraceGUI" class="center hide">
... ... @@ -292,8 +292,8 @@
292 292  
293 293 <!-- Glass -->
294 294 <div id="glassHeader" class="menuHeader">Glass</div>
295   - <div class="input-group mb-3 option-dropdown" id="glass-type-selection">
296   - <div class="input-group-prepend option-dropdown-info">
  295 + <div class="input-group mb-3" id="glass-type-selection">
  296 + <div class="input-group-prepend option-dropdown-info" id="glassTypeInfo">
297 297 <label class="input-group-text full-width" for="glassTypeSelect">Type</label>
298 298 </div>
299 299 <select class="custom-select option-dropdown-selection" id="glassTypeSelect" onchange="changeMenuGlassType()">
... ... @@ -303,8 +303,8 @@
303 303 </select>
304 304 </div>
305 305  
306   - <div class="input-group mb-3 option-dropdown" id="glass-width-selection">
307   - <div class="input-group-prepend option-dropdown-info">
  306 + <div class="input-group mb-3" id="glass-width-selection">
  307 + <div class="input-group-prepend option-dropdown-info" id="glassWidthInfo">
308 308 <label class="input-group-text full-width" for="glassWidthSelect">Bredde</label>
309 309 </div>
310 310 <select class="custom-select option-dropdown-selection" id="glassWidthSelect" onchange="updateGlassStretch()">
... ... @@ -326,11 +326,12 @@
326 326 <input id="glassButton" type="image" src="images/menu_glass_clear.png" title="Glass (høyde = 840mm)" onmousedown="addGlassFromMenu()" ondragstart="return false;" />
327 327 <input id="increaseGlassWidth" type="image" src="images/icons/left_arrow.png" title="Øk glassbredde" onclick="increaseGlassSize()" ondragstart="return false;" />
328 328 </div>
329   - <!--<p class ="moduleMenuHeader" id="fpsCounter">fps: </p>-->
330 329 </div>
331 330  
332 331 <!-- Top left toolbar -->
333 332 <div id="topButtons">
  333 + <input id="home" type="image" src="images/icons/home.png">
  334 + <input id="helpLinesButton" type="image" src="images/icons/ruler_2.png" onclick="toggleHelplines()" ondragstart="return false;" />
334 335 <div class="view-nav">
335 336 <ul>
336 337 <li>
... ... @@ -346,11 +347,12 @@
346 347 </li>
347 348 </ul>
348 349 </div>
349   - <input id="helpLinesButton" type="image" src="images/icons/ruler_2.png" onclick="toggleHelplines()" ondragstart="return false;" />
  350 + <input id="zoom-out" type="image" src="images/icons/zoom_out.png" onmousedown="zoomOutCamera()" onmouseup="noZoom()" ondragstart="return false;">
  351 + <input id="zoom-in" type="image" src="images/icons/zoom_in.png" onmousedown="zoomInCamera()" onmouseup="noZoom()" ondragstart="return false;">
350 352 <input id="helpButton" type="image" src="images/icons/help.png" onclick="displayInfo()"/>
351 353 </div>
352 354  
353   - <!-- Shopping cart -->
  355 + <!-- Shopping cart button -->
354 356 <div id="shoppingCart" onclick="displayItemList()">
355 357 <img src="images/icons/shoppingCart.png" id="imgCart">
356 358 <div id="subtotal">0 kr</div>
... ... @@ -361,21 +363,49 @@
361 363 <div id="itemListHeader">
362 364 <div class="menuHeader">Utstyrsliste</div>
363 365 <div id="closeItemList" onclick="hideItemList()" title="Lukk">&times;</div>
  366 + <table id="itemTableHead">
  367 + <col width="12%">
  368 + <col width="18%">
  369 + <col width="45%">
  370 + <col width="13%">
  371 + <col width="12%">
  372 + <tr>
  373 + <th>Varenr</th>
  374 + <th>Nobbnr</th>
  375 + <th>Artikkel</th>
  376 + <th>Antall</th>
  377 + <th>Pris</th>
  378 + </tr>
  379 + </table>
364 380 </div>
365 381 <div id="itemTableDiv">
366 382 <table id="itemTable" cellpadding="5">
367 383 <thead>
368   - <tr>
  384 + <!-- <tr>
369 385 <th>Varenr</th>
370 386 <th>Nobbnr</th>
371 387 <th>Artikkel</th>
372 388 <th>Antall</th>
373 389 <th>Pris</th>
374   - </tr>
  390 + </tr> -->
375 391 </thead>
376 392 <tbody id="itemTableBody"></tbody>
377 393 </table>
378 394 </div>
  395 + <table id="itemTableFoot">
  396 + <col width="13%">
  397 + <col width="13%">
  398 + <col width="44%">
  399 + <col width="14%">
  400 + <col width="16%">
  401 + <tr>
  402 + <th></th>
  403 + <th></th>
  404 + <th></th>
  405 + <th>Sum:</th>
  406 + <th><div id="totalCost">0,-</div></th>
  407 + </tr>
  408 + </table>
379 409 <div id="itemListFooter">
380 410 <img id="downloadItemListButton" src="images/icons/pdf.png" onclick="downloadItemList()" title="Last ned som PDF">
381 411 </div>
... ... @@ -387,21 +417,23 @@
387 417  
388 418 </div>
389 419  
  420 + <!-- Pole mesh controls -->
390 421 <div id="poleMenu">
391 422 <div class="meshControlsButtonsDiv" style="margin-left: 8px;">
392   - <input class="meshControlsButtons" type="image" src="images/menu_pole_rotate_left.png" onclick="rotateMeshLeft()" title="Roter mot venstre" ondragstart="return false;" />
  423 + <input class="meshControlsButtons" id="pole-rot-left" type="image" src="images/menu_pole_rotate_left.png" onclick="rotateMeshLeft()" title="Roter mot venstre" ondragstart="return false;" />
393 424 </div>
394 425 <div class="meshControlsButtonsDiv">
395   - <input class="meshControlsButtons" type="image" src="images/menu_pole_rotate_right.png" onclick="rotateMeshRight()" title="Roter mot høyre" ondragstart="return false;" />
  426 + <input class="meshControlsButtons" id="pole-rot-right" type="image" src="images/menu_pole_rotate_right.png" onclick="rotateMeshRight()" title="Roter mot høyre" ondragstart="return false;" />
396 427 </div>
397 428 <div class="meshControlsButtonsDiv">
398   - <input class="meshControlsButtons" type="image" src="images/menu_pole_delete.png" onclick="deleteMesh()" title="Slett stolpe" ondragstart="return false;" />
  429 + <input class="meshControlsButtons" id="pole-del" type="image" src="images/menu_pole_delete.png" onclick="deleteMesh()" title="Slett stolpe" ondragstart="return false;" />
399 430 </div>
400 431 <div class="meshControlsButtonsDiv">
401   - <input class="meshControlsButtons" type="image" src="images/icons/auto.png" onclick="startAutoGeneration()" value="Auto" title="Utvid rekkverk"/>
  432 + <input class="meshControlsButtons" id="pole-auto" type="image" src="images/icons/auto.png" onclick="startAutoGeneration()" value="Auto" title="Utvid rekkverk"/>
402 433 </div>
403 434 </div>
404 435  
  436 + <!-- Glass mesh controls -->
405 437 <div id="glassMenu">
406 438 <div class="meshControlsButtonsDiv">
407 439 <input class="meshControlsButtons" type="image" src="images/menu_pole_rotate_left.png" onclick="rotateMeshLeft()" title="Roter mot venstre" ondragstart="return false;" />
... ... @@ -421,22 +453,20 @@
421 453 </div>
422 454 </div>
423 455  
  456 + <!-- Autogenerate railing -->
424 457 <div id="autoGenInfo">
425 458 <p id="autoGenInfoHeader">Automatisk generering av rekkverk</p>
426 459 <p id="autoGenHelp" class="grey">Trykk på en av pilene for å velge hvilken retning du vil ha rekkverk i</p>
427 460  
428 461 <div id="autoGenPoleSelect" style="display: none">
429 462 <div class="autoGenPoleRow">
  463 + <input class="autoGenPoleButton" type="image" src="images/poles/end_labeled.png" title="Endestolpe" onclick="onAutoGenPoleSelected('end')" ondragstart="return false;" />
  464 + <input class="autoGenPoleButton" type="image" src="images/poles/wall_labeled.png" title="Veggfeste" onclick="onAutoGenPoleSelected('wall')" ondragstart="return false;" />
430 465 <input class="autoGenPoleButton" type="image" src="images/poles/180_labeled.png" title="180&#176; Stolpe" onclick="onAutoGenPoleSelected('180')" ondragstart="return false;" />
431 466 <input class="autoGenPoleButton" type="image" src="images/poles/90_labeled.png" title="90&#176; Stolpe" onclick="onAutoGenPoleSelected('90')" ondragstart="return false;" />
432 467 <input class="autoGenPoleButton" type="image" src="images/poles/45_labeled.png" title="45&#176; Stolpe" onclick="onAutoGenPoleSelected('45')" ondragstart="return false;" />
433 468 </div>
434   - <div class="autoGenPoleRow">
435   - <input class="autoGenPoleButton" type="image" src="images/poles/end_labeled.png" title="Endestolpe" onclick="onAutoGenPoleSelected('end')" ondragstart="return false;" />
436   - <input class="autoGenPoleButton" type="image" src="images/poles/wall_labeled.png" title="Veggfeste" onclick="onAutoGenPoleSelected('wall')" ondragstart="return false;" />
437   - </div>
438 469 </div>
439   -
440 470 <div id="autoGenSuggestions">
441 471 <table id="suggestionsTable">
442 472 <thead>
... ... @@ -458,21 +488,187 @@
458 488 </div>
459 489 </div>
460 490  
461   - <div class="init-info hide" id="init-info">
462   - <div class="init-info-box">
463   - <div style="margin-top: 10px">Ønsker du en gjennomgang av programmets funksjoner?</div>
464   - <button class="btn btn-yes" id="btYes" onclick="displayInfo()">Ja</button>
465   - <button class="btn btn-no" id="btNo" onclick="hidePopup()">Nei</button>
466   - </div>
467   - </div>
468   -
  491 + <!-- Help menu overlay -->
469 492 <div class="info hide" id="info">
470   - <p class="infotext" id="info1">This is an overlay</p>
471   - <p class="infotext hide" id="info2">This is another overlay</p>
472   - <span class="close-info" onclick="closeInfo()">&times;</span>
473   - <input class="btNextTip" id="btNextTip" type="image" src="images/icons/next.png" onclick="nextTip()"/>
474   - </div>
475 493  
  494 + <div class="close" onclick="closeInfo()" title="Lukk">&times;</div>
  495 +
  496 + <div class="container">
  497 +
  498 + <!-- Poles -->
  499 + <div class="row element-row" style="margin-top: 50px">
  500 + <div class="col-sm-5">
  501 + <div class="right">
  502 + <img class="img-fluid info-pole-buttons" src="images/poles/end_labeled.png">
  503 + <img class="img-fluid info-pole-buttons" src="images/poles/wall_labeled.png">
  504 + <img class="img-fluid info-pole-buttons" src="images/poles/90_labeled.png">
  505 + <img class="img-fluid info-pole-buttons" src="images/poles/45_labeled.png">
  506 + <img class="img-fluid info-pole-buttons" src="images/poles/180_labeled.png">
  507 + </div>
  508 + </div>
  509 + <div class="col-sm-7">
  510 + <div class="infotext offset20">
  511 + Klikk og dra stolper fra menyen for å plassere de på terrassen
  512 + </div>
  513 + </div>
  514 + </div>
  515 +
  516 + <!-- Glass type -->
  517 + <div class="row element-row">
  518 + <div class="col-sm-5">
  519 + <img class="img-fluid select-img" src="images/icons/type.png">
  520 + </div>
  521 + <div class="col-sm-7">
  522 + <div class="infotext">
  523 + Endre glasstype
  524 + </div>
  525 + </div>
  526 + </div>
  527 +
  528 + <!-- Glass width -->
  529 + <div class="row element-row">
  530 + <div class="col-sm-5">
  531 + <img class="img-fluid select-img" src="images/icons/width.png">
  532 + </div>
  533 + <div class="col-sm-7">
  534 + <div class="infotext">
  535 + Endre glassbredde
  536 + </div>
  537 + </div>
  538 + </div>
  539 +
  540 + <!-- Glass -->
  541 + <div class="row element-row">
  542 + <div class="col-sm-5">
  543 + <div class="glass-row">
  544 + <img class="img-fluid scaled-img" src="images/menu_glass_clear.png">
  545 + <img class="img-fluid scaled-img" src="images/menu_glass_frosted.png">
  546 + <img class="img-fluid scaled-img" src="images/menu_glass_darkened.png">
  547 + </div>
  548 + </div>
  549 + <div class="col-sm-7">
  550 + <div class="infotext offset20" >
  551 + Klikk og dra glass fra menyen for å plassere de på terrassen
  552 + </div>
  553 + </div>
  554 + </div>
  555 +
  556 + <!-- Rotate -->
  557 + <div class="row element-row">
  558 + <div class="col-sm-5">
  559 + <div class="right">
  560 + <img class="img-fluid img" src="images/menu_pole_rotate_left.png">
  561 + <img class="img-fluid img" src="images/menu_pole_rotate_right.png">
  562 + </div>
  563 + </div>
  564 + <div class="col-sm-7">
  565 + <div class="infotext">
  566 + Roter markert stolpe eller glass til venstre/høyre
  567 + </div>
  568 + </div>
  569 + </div>
  570 +
  571 + <!-- Delete -->
  572 + <div class="row element-row">
  573 + <div class="col-sm-5">
  574 + <div class="right">
  575 + <img class="img-fluid img" src="images/menu_pole_delete.png">
  576 + </div>
  577 + </div>
  578 + <div class="col-sm-7">
  579 + <div class="infotext">
  580 + Fjern markert stolpe eller glass fra terrassen
  581 + </div>
  582 + </div>
  583 + </div>
  584 +
  585 + <!-- Auto -->
  586 + <div class="row element-row">
  587 + <div class="col-sm-5">
  588 + <div class="right">
  589 + <img class="img-fluid img" src="images/icons/auto.png">
  590 + </div>
  591 + </div>
  592 + <div class="col-sm-7">
  593 + <div class="infotext">
  594 + Start automatisk generering av rekkverk
  595 + </div>
  596 + </div>
  597 + </div>
  598 +
  599 + <!-- Shopping cart -->
  600 + <div class="row element-row">
  601 + <div class="col-sm-5">
  602 + <div class="right">
  603 + <img class="img-fluid shopping-cart" src="images/icons/shoppingCart.png">
  604 + </div>
  605 + </div>
  606 + <div class="col-sm-7">
  607 + <div class="infotext">
  608 + Åpne handlekurven
  609 + </div>
  610 + </div>
  611 + </div>
  612 +
  613 + <!-- PDF -->
  614 + <div class="row element-row">
  615 + <div class="col-sm-5">
  616 + <div class="right">
  617 + <img class="img-fluid pdf" src="images/icons/pdf_2.png">
  618 + </div>
  619 + </div>
  620 + <div class="col-sm-7">
  621 + <div class="infotext offset15">
  622 + Last ned utstyrslisten som et PDF-dokument
  623 + </div>
  624 + </div>
  625 + </div>
  626 +
  627 + <!-- View -->
  628 + <div class="row element-row">
  629 + <div class="col-sm-5">
  630 + <div class="right">
  631 + <img class="img-fluid perspective" src="images/icons/view_inverted.png">
  632 + </div>
  633 + </div>
  634 + <div class="col-sm-7">
  635 + <div class="infotext offset15">
  636 + Beveg musepekeren over for å velge mellom 2D og 3D-perspektiv
  637 + </div>
  638 + </div>
  639 + </div>
  640 +
  641 + <!-- Help lines -->
  642 + <div class="row element-row">
  643 + <div class="col-sm-5">
  644 + <div class="right">
  645 + <img class="img-fluid ruler" src="images/icons/ruler_inverted.png">
  646 + </div>
  647 + </div>
  648 + <div class="col-sm-7">
  649 + <div class="infotext offset10">
  650 + Skru av og på hjelpelinjer
  651 + </div>
  652 + </div>
  653 + </div>
  654 +
  655 + <!-- Zoom -->
  656 + <div class="row element-row">
  657 + <div class="col-sm-5">
  658 + <div class="right">
  659 + <img class="img-fluid zoom" src="images/icons/zoom_out_inverted.png">
  660 + <img class="img-fluid zoom" src="images/icons/zoom_in_inverted.png">
  661 + </div>
  662 + </div>
  663 + <div class="col-sm-7">
  664 + <div class="infotext offset10">
  665 + Juster kamerazoom (du kan også bruke scrollehjulet på musen din)
  666 + </div>
  667 + </div>
  668 + </div>
  669 +
  670 + </div>
  671 + </div>
476 672  
477 673 </div>
478 674  
... ... @@ -483,4 +679,4 @@
483 679 <script src="lib/bootstrap.min.js"></script>
484 680  
485 681 </body>
486   -</html>
487 682 \ No newline at end of file
  683 +</html>
... ...
js/Constants.js
... ... @@ -10,4 +10,17 @@ const GLASS_POLE_OVERLAP = 14.69;
10 10 // Minimum distance from edge allowed to enable auto build
11 11 const MIN_AUTO_DIST = MIN_DIST_FROM_EDGE + 3 / 2 * POLE_BASE_WIDTH + MIN_GLASS_WIDTH - 2 * GLASS_POLE_OVERLAP;
12 12  
13   -const MIN_DISTANCE_POLE_TO_EDGE = 54;
14 13 \ No newline at end of file
  14 +const MIN_DISTANCE_POLE_TO_EDGE = 54;
  15 +
  16 +const OVERLAY_SLIDES = [
  17 + [
  18 + document.getElementById("info-close-menu"), document.getElementById("info-pole-buttons"),
  19 + document.getElementById("info-glass-type"), document.getElementById("info-glass-width"),
  20 + document.getElementById("info-glass-button")
  21 + ],
  22 +
  23 + [
  24 + document.getElementById("info-pole-rotate-left"), document.getElementById("info-pole-rotate-right"),
  25 + document.getElementById("info-pole-delete"), document.getElementById("info-pole-auto")
  26 + ]
  27 +];
15 28 \ No newline at end of file
... ...
js/HTMLGUI.js
... ... @@ -126,11 +126,11 @@ function updateTotalCost() {
126 126 }
127 127  
128 128 function displayItemList() {
129   - if (shoppingCart.length > 0) {
130   - document.getElementById("itemList").style.display = "inline";
  129 + document.getElementById("itemList").style.display = "inline";
131 130  
132   - document.getElementById("fade-background").style.display = "inline";
  131 + document.getElementById("fade-background").style.display = "inline";
133 132  
  133 + if (shoppingCart.length > 0) {
134 134 document.getElementById("itemTable").removeChild(document.getElementById("itemTableBody"));
135 135  
136 136 var tableBody = document.createElement("tbody");
... ... @@ -140,14 +140,17 @@ function displayItemList() {
140 140 for(let i = 0; i < shoppingCart.length; i++) {
141 141 tableBody.appendChild(createItemListRow(shoppingCart[i], i));
142 142 }
143   - tableBody.children[shoppingCart.length - 1].style.borderBottom = "1px solid black";
  143 + //tableBody.children[shoppingCart.length - 1].style.borderBottom = "1px solid black";
144 144  
145   - var sumItem = {item: "", nobb: "", description: "", amount: "sum:", price: totalCost};
  145 + /*var sumItem = {item: "", nobb: "", description: "", amount: "sum:", price: totalCost};
146 146 var sumRow = createItemListRow(sumItem, 0, tableBody);
147   - sumRow.children[4].innerHTML = PDF.NumToStr(totalCost, ",-") + "&#160; &#160;";
  147 + sumRow.children[4].innerHTML = PDF.NumToStr(totalCost, ",-") + "&#160;";
148 148 sumRow.style.fontWeight = "bold";
149 149 sumRow.style.backgroundColor = "rgb(230, 230, 230)";
150   - tableBody.appendChild(sumRow);
  150 + tableBody.appendChild(sumRow);*/
  151 +
  152 + document.getElementById("totalCost").innerHTML = PDF.NumToStr(totalCost, ",-") + "&#160;&#160;";
  153 +
151 154 }
152 155 }
153 156  
... ... @@ -172,7 +175,7 @@ function createItemListRow(item, pos) {
172 175 row.appendChild(amount);
173 176  
174 177 var price = document.createElement("td");
175   - price.innerHTML = PDF.NumToStr(item.price * item.amount, ",-") + "&#160; &#160;";;
  178 + price.innerHTML = PDF.NumToStr(item.price * item.amount, ",-") + "&#160;";;
176 179 price.style.textAlign = "right";
177 180 row.appendChild(price);
178 181  
... ... @@ -253,13 +256,22 @@ function cancelAutoGen() {
253 256  
254 257 function toggleMenuVisibility() {
255 258 if(menuVisible) {
256   - document.getElementById("moduleMenu").style.right = "-275px";
257   - document.getElementById("moduleMenuToggleButton").style.right = "10px";
  259 + if (isDownscaled) {
  260 + document.getElementById("moduleMenu").style.right = "-230px";
  261 + document.getElementById("moduleMenuToggleButton").style.right = "10px";
  262 + } else {
  263 + document.getElementById("moduleMenu").style.right = "-275px";
  264 + document.getElementById("moduleMenuToggleButton").style.right = "10px";
  265 + }
258 266 document.getElementById("moduleMenuToggleButton").style.transform = "rotate(0deg)";
259 267 }
260 268 else {
  269 + if (isDownscaled) {
  270 + document.getElementById("moduleMenuToggleButton").style.right = "205px";
  271 + } else {
  272 + document.getElementById("moduleMenuToggleButton").style.right = "245px";
  273 + }
261 274 document.getElementById("moduleMenu").style.right = "0";
262   - document.getElementById("moduleMenuToggleButton").style.right = "245px";
263 275 document.getElementById("moduleMenuToggleButton").style.transform = "rotate(180deg)";
264 276 }
265 277 menuVisible = !menuVisible;
... ... @@ -313,24 +325,12 @@ function onAutoGenFinished() {
313 325 displaySolutions(findSolutions(length));
314 326 }
315 327  
316   -function displayInfo() {
317   - document.getElementById("init-info").style.display = "none";
318   - document.getElementById("info").style.display = "inline";
319   - document.getElementById("topButtons").style.zIndex = "31";
320   -}
321   -
322 328 function closeInfo() {
323 329 document.getElementById("info").style.display = "none";
324 330 }
325 331  
326   -function nextTip() {
327   - document.getElementById("info1").style.display = "none";
328   - document.getElementById("info2").style.display = "inline";
329   - document.getElementById("helpLinesButton").style.zIndex = "40";
330   -}
331   -
332   -function disableClicks() {
333   - document.getElementById("moduleMenu").style.pointerEvents = "none";
  332 +function displayInfo() {
  333 + document.getElementById("info").style.display = "inline";
334 334 }
335 335  
336 336 function findSolutions(segmentLength) {
... ... @@ -604,6 +604,60 @@ function initHelpOverlay() {
604 604  
605 605 }
606 606  
  607 +function downscale() {
  608 +
  609 + // Module Menu
  610 + document.getElementById("moduleMenu").style.width = "230px";
  611 + document.getElementById("moduleMenuToggleButton").style.right = menuVisible ? "205px" : "10px";
  612 + document.getElementById("moduleMenuToggleButton").style.height = "15px";
  613 + document.getElementById("glass-type-selection").style.width = "90%";
  614 + document.getElementById("glass-type-selection").style.left = "5%";
  615 + document.getElementById("glass-width-selection").style.width = "90%";
  616 + document.getElementById("glass-width-selection").style.left = "5%";
  617 +
  618 + // Info overlay
  619 + /*document.getElementById("info").style.fontSize = "1em";
  620 + document.getElementById("info-close-menu").style.top = "5px";
  621 + document.getElementById("info-close-menu").style.right = "250px";
  622 + document.getElementById("info-pole-buttons").style.top = "190px";
  623 + document.getElementById("info-pole-buttons").style.right = "250px";
  624 + document.getElementById("info-glass-type").style.top = "445px";
  625 + document.getElementById("info-glass-type").style.right = "250px";
  626 + document.getElementById("info-glass-width").style.top = "495px";
  627 + document.getElementById("info-glass-width").style.right = "250px";
  628 + document.getElementById("info-glass-button").style.top = "585px";
  629 + document.getElementById("info-glass-button").style.right = "250px";*/
  630 +
  631 + isDownscaled = true;
  632 +}
  633 +
  634 +function upscale() {
  635 +
  636 + // Module Menu
  637 + document.getElementById("moduleMenu").style.width = "275px";
  638 + document.getElementById("moduleMenuToggleButton").style.right = menuVisible ? "245px" : "10px";
  639 + document.getElementById("moduleMenuToggleButton").style.height = "20px";
  640 + document.getElementById("glass-type-selection").style.width = "80%";
  641 + document.getElementById("glass-type-selection").style.left = "10%";
  642 + document.getElementById("glass-width-selection").style.width = "80%";
  643 + document.getElementById("glass-width-selection").style.left = "10%";
  644 +
  645 + // Info overlay
  646 + /*document.getElementById("info").style.fontSize = "1.25em";
  647 + document.getElementById("info-close-menu").style.top = "5px";
  648 + document.getElementById("info-close-menu").style.right = "300px";
  649 + document.getElementById("info-pole-buttons").style.top = "215px";
  650 + document.getElementById("info-pole-buttons").style.right = "300px";
  651 + document.getElementById("info-glass-type").style.top = "495px";