Commit 5e1a356702c0b847f86ccad210f07f41c5059f00

Authored by Lars Jørgen Fredheim
1 parent ae77d47e

Help-overlay

@@ -136,10 +136,6 @@ ul li { @@ -136,10 +136,6 @@ ul li {
136 /* ----------------------------------------------------------- */ 136 /* ----------------------------------------------------------- */
137 /* ------------------- Measurement input --------------------- */ 137 /* ------------------- Measurement input --------------------- */
138 138
139 -#measurements {  
140 -  
141 -}  
142 -  
143 #lengths { 139 #lengths {
144 padding-top: 20px; 140 padding-top: 20px;
145 padding-bottom: 20px; 141 padding-bottom: 20px;
@@ -327,7 +323,6 @@ ul li { @@ -327,7 +323,6 @@ ul li {
327 #gui { 323 #gui {
328 width: 100%; 324 width: 100%;
329 height: 100%; 325 height: 100%;
330 - /*display: none;*/  
331 z-index: 10; 326 z-index: 10;
332 } 327 }
333 328
@@ -543,7 +538,7 @@ ul li { @@ -543,7 +538,7 @@ ul li {
543 border: none; 538 border: none;
544 height: 20px; 539 height: 20px;
545 transform: rotate(180deg); 540 transform: rotate(180deg);
546 - transition: all 1s; 541 + transition: all 0.5s;
547 } 542 }
548 543
549 #moduleMenuGUI { 544 #moduleMenuGUI {
@@ -565,7 +560,7 @@ ul li { @@ -565,7 +560,7 @@ ul li {
565 background: url("../images/wallpapers/funky-lines.png"); 560 background: url("../images/wallpapers/funky-lines.png");
566 border-top-left-radius: 10px; 561 border-top-left-radius: 10px;
567 border-bottom-left-radius: 10px; 562 border-bottom-left-radius: 10px;
568 - transition: right 1s; 563 + transition: right 0.5s;
569 } 564 }
570 565
571 .poleButtons { 566 .poleButtons {
@@ -610,10 +605,6 @@ ul li { @@ -610,10 +605,6 @@ ul li {
610 margin-top: 10px; 605 margin-top: 10px;
611 } 606 }
612 607
613 -#glassTypeInfo {  
614 - padding-bottom: 2%;  
615 -}  
616 -  
617 #glassButtons { 608 #glassButtons {
618 position: relative; 609 position: relative;
619 } 610 }
@@ -639,11 +630,16 @@ ul li { @@ -639,11 +630,16 @@ ul li {
639 left: 10%; 630 left: 10%;
640 } 631 }
641 632
642 -.option-dropdown-info { 633 +#glass-type-selection, #glass-width-selection {
  634 + width: 80%;
  635 + left: 10%;
  636 +}
  637 +
  638 +#glassTypeInfo, #glassWidthInfo{
643 width: 35%; 639 width: 35%;
644 } 640 }
645 641
646 -.option-dropdown-selection { 642 +#glassTypeSelect, #glassWidthSelect {
647 width: 65%; 643 width: 65%;
648 } 644 }
649 645
@@ -871,26 +867,98 @@ ul li { @@ -871,26 +867,98 @@ ul li {
871 background-color: rgba(0, 0, 0, 0.8); 867 background-color: rgba(0, 0, 0, 0.8);
872 } 868 }
873 869
  870 +#info {
  871 + font-size: 1.25em;
  872 + overflow-y: auto;
  873 + overflow-x: hidden;
  874 +}
  875 +
874 .infotext { 876 .infotext {
875 - position: absolute;  
876 - top: 50%;  
877 - left: 35%;  
878 - font-size: 50px;  
879 color: white; 877 color: white;
  878 + margin-top: 5px;
  879 + float: left;
  880 + text-align: left;
  881 + font-size: 0.8em;
880 } 882 }
881 883
882 -.close-info {  
883 - position: absolute;  
884 - top: 20px;  
885 - right: 40px; 884 +.close {
  885 + position: fixed;
  886 + top: 10px;
  887 + right: 25px;
  888 + z-index: 31;
886 font-size: 3em; 889 font-size: 3em;
887 color: white; 890 color: white;
888 cursor: pointer; 891 cursor: pointer;
889 } 892 }
890 893
891 -.btNextTip {  
892 - position: absolute;  
893 - right: 50px;  
894 - top: 50%;  
895 - width: 100px; 894 +.close:hover {
  895 + color: white;
  896 +}
  897 +
  898 +.info-pole-buttons {
  899 + background-color: white;
  900 + border: 1px solid black;
  901 + border-radius: 5px;
  902 + height: 60px;
  903 + width: 60px;
  904 +}
  905 +
  906 +.element-row{
  907 + margin-top: 8px;
  908 +}
  909 +
  910 +.right {
  911 + float: right;
  912 +}
  913 +
  914 +.select-img {
  915 + height: 30px;
  916 + float: right;
  917 +}
  918 +
  919 +.scaled-img {
  920 + height: 60px;
  921 + float: right;
  922 + transform: scaleX(1.4);
  923 + padding-left: 40px;
  924 +}
  925 +
  926 +.glass-row {
  927 + margin-right: 20px;
  928 +}
  929 +
  930 +.img {
  931 + height: 30px;
  932 + background-color: rgba(255, 255, 255, 0.9);
  933 + border: 1px solid black;
  934 + border-radius: 5px;
896 } 935 }
  936 +
  937 +.shopping-cart {
  938 + height: 30px;
  939 + background-color: rgba(255, 255, 255, 0.9);
  940 + border: 1px solid black;
  941 + border-radius: 5px;
  942 + padding: 2px;
  943 +}
  944 +
  945 +.pdf {
  946 + height: 55px;
  947 +}
  948 +
  949 +.perspective {
  950 + height: 50px;
  951 +}
  952 +
  953 +.ruler {
  954 + height: 45px;
  955 + margin-bottom: 50px;
  956 +}
  957 +
  958 +.offset15 {
  959 + margin-top: 15px;
  960 +}
  961 +
  962 +.offset20 {
  963 + margin-top: 20px;
  964 +}
897 \ No newline at end of file 965 \ No newline at end of file
images/icons/close.png 0 → 100644

3.95 KB

images/icons/pdf.png

4.58 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/type.png 0 → 100644

10.7 KB

images/icons/view_outlined.png 0 → 100644

7 KB

images/icons/width.png 0 → 100644

11.8 KB

images/references.txt
@@ -12,7 +12,7 @@ help.png https://www.iconfinder.com/icons/40797/blue_help_icon#size=128 @@ -12,7 +12,7 @@ help.png https://www.iconfinder.com/icons/40797/blue_help_icon#size=128
12 double_arrow.png https://www.iconfinder.com/icons/383079/arrow_double_right_icon#size=128 12 double_arrow.png https://www.iconfinder.com/icons/383079/arrow_double_right_icon#size=128
13 cancel.png https://www.iconfinder.com/icons/646197/cancel_close_cross_delete_remove_stop_wrong_icon#size=128 13 cancel.png https://www.iconfinder.com/icons/646197/cancel_close_cross_delete_remove_stop_wrong_icon#size=128
14 finished.png https://www.iconfinder.com/icons/646195/done_ok_right_success_tick_valid_yes_icon#size=128 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  
16 - 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 17
18 graySpecularHDR.dds https://github.com/sbtron/BabylonJS-glTFLoader/blob/master/src/images/graySpecularHDR.dds 18 graySpecularHDR.dds https://github.com/sbtron/BabylonJS-glTFLoader/blob/master/src/images/graySpecularHDR.dds
19 \ No newline at end of file 19 \ No newline at end of file
@@ -292,8 +292,8 @@ @@ -292,8 +292,8 @@
292 292
293 <!-- Glass --> 293 <!-- Glass -->
294 <div id="glassHeader" class="menuHeader">Glass</div> 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 <label class="input-group-text full-width" for="glassTypeSelect">Type</label> 297 <label class="input-group-text full-width" for="glassTypeSelect">Type</label>
298 </div> 298 </div>
299 <select class="custom-select option-dropdown-selection" id="glassTypeSelect" onchange="changeMenuGlassType()"> 299 <select class="custom-select option-dropdown-selection" id="glassTypeSelect" onchange="changeMenuGlassType()">
@@ -303,8 +303,8 @@ @@ -303,8 +303,8 @@
303 </select> 303 </select>
304 </div> 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 <label class="input-group-text full-width" for="glassWidthSelect">Bredde</label> 308 <label class="input-group-text full-width" for="glassWidthSelect">Bredde</label>
309 </div> 309 </div>
310 <select class="custom-select option-dropdown-selection" id="glassWidthSelect" onchange="updateGlassStretch()"> 310 <select class="custom-select option-dropdown-selection" id="glassWidthSelect" onchange="updateGlassStretch()">
@@ -389,16 +389,16 @@ @@ -389,16 +389,16 @@
389 389
390 <div id="poleMenu"> 390 <div id="poleMenu">
391 <div class="meshControlsButtonsDiv" style="margin-left: 8px;"> 391 <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;" /> 392 + <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 </div> 393 </div>
394 <div class="meshControlsButtonsDiv"> 394 <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;" /> 395 + <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 </div> 396 </div>
397 <div class="meshControlsButtonsDiv"> 397 <div class="meshControlsButtonsDiv">
398 - <input class="meshControlsButtons" type="image" src="images/menu_pole_delete.png" onclick="deleteMesh()" title="Slett stolpe" ondragstart="return false;" /> 398 + <input class="meshControlsButtons" id="pole-del" type="image" src="images/menu_pole_delete.png" onclick="deleteMesh()" title="Slett stolpe" ondragstart="return false;" />
399 </div> 399 </div>
400 <div class="meshControlsButtonsDiv"> 400 <div class="meshControlsButtonsDiv">
401 - <input class="meshControlsButtons" type="image" src="images/icons/auto.png" onclick="startAutoGeneration()" value="Auto" title="Utvid rekkverk"/> 401 + <input class="meshControlsButtons" id="pole-auto" type="image" src="images/icons/auto.png" onclick="startAutoGeneration()" value="Auto" title="Utvid rekkverk"/>
402 </div> 402 </div>
403 </div> 403 </div>
404 404
@@ -458,19 +458,196 @@ @@ -458,19 +458,196 @@
458 </div> 458 </div>
459 </div> 459 </div>
460 460
461 - <div class="init-info hide" id="init-info"> 461 + <!--<div class="init-info hide" id="init-info">
462 <div class="init-info-box"> 462 <div class="init-info-box">
463 <div style="margin-top: 10px">Ønsker du en gjennomgang av programmets funksjoner?</div> 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> 464 <button class="btn btn-yes" id="btYes" onclick="displayInfo()">Ja</button>
465 <button class="btn btn-no" id="btNo" onclick="hidePopup()">Nei</button> 465 <button class="btn btn-no" id="btNo" onclick="hidePopup()">Nei</button>
466 </div> 466 </div>
467 - </div> 467 + </div>-->
468 468
469 <div class="info hide" id="info"> 469 <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()"/> 470 +
  471 + <div class="close" onclick="closeInfo()" title="Lukk">&times;</div>
  472 +
  473 + <div class="container">
  474 +
  475 + <!-- Poles -->
  476 + <div class="row element-row" style="margin-top: 50px">
  477 + <div class="col-sm-6">
  478 + <div class="right">
  479 + <img class="img-fluid info-pole-buttons" src="images/poles/end_labeled.png">
  480 + <img class="img-fluid info-pole-buttons" src="images/poles/wall_labeled.png">
  481 + <img class="img-fluid info-pole-buttons" src="images/poles/90_labeled.png">
  482 + <img class="img-fluid info-pole-buttons" src="images/poles/45_labeled.png">
  483 + <img class="img-fluid info-pole-buttons" src="images/poles/180_labeled.png">
  484 + </div>
  485 + </div>
  486 + <div class="col-sm-6">
  487 + <div class="infotext offset20">
  488 + Klikk og dra stolper fra menyen for å plassere de på terrassen
  489 + </div>
  490 + </div>
  491 + </div>
  492 +
  493 + <!-- Glass type -->
  494 + <div class="row element-row">
  495 + <div class="col-sm-6">
  496 + <img class="img-fluid select-img" src="images/icons/type.png">
  497 + </div>
  498 + <div class="col-sm-6">
  499 + <div class="infotext">
  500 + Endre glasstype
  501 + </div>
  502 + </div>
  503 + </div>
  504 +
  505 + <!-- Glass width -->
  506 + <div class="row element-row">
  507 + <div class="col-sm-6">
  508 + <img class="img-fluid select-img" src="images/icons/width.png">
  509 + </div>
  510 + <div class="col-sm-6">
  511 + <div class="infotext">
  512 + Endre glassbredde
  513 + </div>
  514 + </div>
  515 + </div>
  516 +
  517 + <!-- Glass -->
  518 + <div class="row element-row">
  519 + <div class="col-sm-6">
  520 + <div class="glass-row">
  521 + <img class="img-fluid scaled-img" src="images/menu_glass_clear.png">
  522 + <img class="img-fluid scaled-img" src="images/menu_glass_frosted.png">
  523 + <img class="img-fluid scaled-img" src="images/menu_glass_darkened.png">
  524 + </div>
  525 + </div>
  526 + <div class="col-sm-6">
  527 + <div class="infotext offset20" >
  528 + Klikk og dra glass fra menyen for å plassere de på terrassen
  529 + </div>
  530 + </div>
  531 + </div>
  532 +
  533 + <!-- Rotate -->
  534 + <div class="row element-row">
  535 + <div class="col-sm-6">
  536 + <div class="right">
  537 + <img class="img-fluid img" src="images/menu_pole_rotate_left.png">
  538 + <img class="img-fluid img" src="images/menu_pole_rotate_right.png">
  539 + </div>
  540 + </div>
  541 + <div class="col-sm-6">
  542 + <div class="infotext">
  543 + Roter markert stolpe eller glass til venstre/høyre
  544 + </div>
  545 + </div>
  546 + </div>
  547 +
  548 + <!-- Delete -->
  549 + <div class="row element-row">
  550 + <div class="col-sm-6">
  551 + <div class="right">
  552 + <img class="img-fluid img" src="images/menu_pole_delete.png">
  553 + </div>
  554 + </div>
  555 + <div class="col-sm-6">
  556 + <div class="infotext">
  557 + Fjern markert stolpe eller glass fra terrassen
  558 + </div>
  559 + </div>
  560 + </div>
  561 +
  562 + <!-- Auto -->
  563 + <div class="row element-row">
  564 + <div class="col-sm-6">
  565 + <div class="right">
  566 + <img class="img-fluid img" src="images/icons/auto.png">
  567 + </div>
  568 + </div>
  569 + <div class="col-sm-6">
  570 + <div class="infotext">
  571 + Start automatisk generering av rekkverk
  572 + </div>
  573 + </div>
  574 + </div>
  575 +
  576 + <!-- Shopping cart -->
  577 + <div class="row element-row">
  578 + <div class="col-sm-6">
  579 + <div class="right">
  580 + <img class="img-fluid shopping-cart" src="images/icons/shoppingCart.png">
  581 + </div>
  582 + </div>
  583 + <div class="col-sm-6">
  584 + <div class="infotext">
  585 + Åpne handlekurven
  586 + </div>
  587 + </div>
  588 + </div>
  589 +
  590 + <!-- PDF -->
  591 + <div class="row element-row">
  592 + <div class="col-sm-6">
  593 + <div class="right">
  594 + <img class="img-fluid pdf" src="images/icons/pdf_2.png">
  595 + </div>
  596 + </div>
  597 + <div class="col-sm-6">
  598 + <div class="infotext offset15">
  599 + Last ned utstyrslisten som et PDF-dokument
  600 + </div>
  601 + </div>
  602 + </div>
  603 +
  604 + <!-- View -->
  605 + <div class="row element-row">
  606 + <div class="col-sm-6">
  607 + <div class="right">
  608 + <img class="img-fluid perspective" src="images/icons/view_outlined.png">
  609 + </div>
  610 + </div>
  611 + <div class="col-sm-6">
  612 + <div class="infotext offset15">
  613 + Beveg musepekeren over for å velge mellom 2D og 3D-perspektiv
  614 + </div>
  615 + </div>
  616 + </div>
  617 +
  618 + <!-- Help lines -->
  619 + <div class="row element-row">
  620 + <div class="col-sm-6">
  621 + <div class="right">
  622 + <img class="img-fluid ruler" src="images/icons/ruler_2.png">
  623 + </div>
  624 + </div>
  625 + <div class="col-sm-6">
  626 + <div class="infotext offset15">
  627 + Skru av og på hjelpelinjer
  628 + </div>
  629 + </div>
  630 + </div>
  631 +
  632 + </div>
  633 +
  634 + <!-- Module menu --
  635 + <p class="infotext" id="info-close-menu">Klikk her for å skjule/vise menyen</p>
  636 + <p class="infotext" id="info-pole-buttons">Klikk og dra stolper fra menyen<br>for å plassere de på terrrassen</p>
  637 + <p class="infotext" id="info-glass-type">Endre glasstype her</p>
  638 + <p class="infotext" id="info-glass-width">Endre glassbredde her</p>
  639 + <p class="infotext" id="info-glass-button">Klikk og dra glass fra menyen<br>for å plassere de på terrrassen</p>
  640 +
  641 + <!-- Pole tool menu --
  642 + <p class="infotext" id="info-pole-rotate-left">Roter til venstre</p>
  643 + <p class="infotext" id="info-pole-rotate-right">Roter til høyre</p>
  644 + <p class="infotext" id="info-pole-delete">Slett stolpe</p>
  645 + <p class="infotext" id="info-pole-auto">Start automatisk generering av rekkverk</p>
  646 +
  647 + <!-- Glass tool menu --
  648 + <p class="infotext" id="info-glass-menu-type">Endre glasstype</p>
  649 + -->
  650 +
474 </div> 651 </div>
475 652
476 653
@@ -10,4 +10,17 @@ const GLASS_POLE_OVERLAP = 14.69; @@ -10,4 +10,17 @@ const GLASS_POLE_OVERLAP = 14.69;
10 // Minimum distance from edge allowed to enable auto build 10 // Minimum distance from edge allowed to enable auto build
11 const MIN_AUTO_DIST = MIN_DIST_FROM_EDGE + 3 / 2 * POLE_BASE_WIDTH + MIN_GLASS_WIDTH - 2 * GLASS_POLE_OVERLAP; 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 \ No newline at end of file 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 \ No newline at end of file 28 \ No newline at end of file
@@ -253,13 +253,22 @@ function cancelAutoGen() { @@ -253,13 +253,22 @@ function cancelAutoGen() {
253 253
254 function toggleMenuVisibility() { 254 function toggleMenuVisibility() {
255 if(menuVisible) { 255 if(menuVisible) {
256 - document.getElementById("moduleMenu").style.right = "-275px";  
257 - document.getElementById("moduleMenuToggleButton").style.right = "10px"; 256 + if (isDownscaled) {
  257 + document.getElementById("moduleMenu").style.right = "-230px";
  258 + document.getElementById("moduleMenuToggleButton").style.right = "10px";
  259 + } else {
  260 + document.getElementById("moduleMenu").style.right = "-275px";
  261 + document.getElementById("moduleMenuToggleButton").style.right = "10px";
  262 + }
258 document.getElementById("moduleMenuToggleButton").style.transform = "rotate(0deg)"; 263 document.getElementById("moduleMenuToggleButton").style.transform = "rotate(0deg)";
259 } 264 }
260 else { 265 else {
  266 + if (isDownscaled) {
  267 + document.getElementById("moduleMenuToggleButton").style.right = "205px";
  268 + } else {
  269 + document.getElementById("moduleMenuToggleButton").style.right = "245px";
  270 + }
261 document.getElementById("moduleMenu").style.right = "0"; 271 document.getElementById("moduleMenu").style.right = "0";
262 - document.getElementById("moduleMenuToggleButton").style.right = "245px";  
263 document.getElementById("moduleMenuToggleButton").style.transform = "rotate(180deg)"; 272 document.getElementById("moduleMenuToggleButton").style.transform = "rotate(180deg)";
264 } 273 }
265 menuVisible = !menuVisible; 274 menuVisible = !menuVisible;
@@ -313,24 +322,12 @@ function onAutoGenFinished() { @@ -313,24 +322,12 @@ function onAutoGenFinished() {
313 displaySolutions(findSolutions(length)); 322 displaySolutions(findSolutions(length));
314 } 323 }
315 324
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 function closeInfo() { 325 function closeInfo() {
323 document.getElementById("info").style.display = "none"; 326 document.getElementById("info").style.display = "none";
324 } 327 }
325 328
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"; 329 +function displayInfo() {
  330 + document.getElementById("info").style.display = "inline";
334 } 331 }
335 332
336 function findSolutions(segmentLength) { 333 function findSolutions(segmentLength) {
@@ -604,6 +601,60 @@ function initHelpOverlay() { @@ -604,6 +601,60 @@ function initHelpOverlay() {
604 601
605 } 602 }
606 603
  604 +function downscale() {
  605 +
  606 + // Module Menu
  607 + document.getElementById("moduleMenu").style.width = "230px";
  608 + document.getElementById("moduleMenuToggleButton").style.right = menuVisible ? "205px" : "10px";
  609 + document.getElementById("moduleMenuToggleButton").style.height = "15px";
  610 + document.getElementById("glass-type-selection").style.width = "90%";
  611 + document.getElementById("glass-type-selection").style.left = "5%";
  612 + document.getElementById("glass-width-selection").style.width = "90%";
  613 + document.getElementById("glass-width-selection").style.left = "5%";
  614 +
  615 + // Info overlay
  616 + /*document.getElementById("info").style.fontSize = "1em";
  617 + document.getElementById("info-close-menu").style.top = "5px";
  618 + document.getElementById("info-close-menu").style.right = "250px";
  619 + document.getElementById("info-pole-buttons").style.top = "190px";
  620 + document.getElementById("info-pole-buttons").style.right = "250px";
  621 + document.getElementById("info-glass-type").style.top = "445px";
  622 + document.getElementById("info-glass-type").style.right = "250px";
  623 + document.getElementById("info-glass-width").style.top = "495px";
  624 + document.getElementById("info-glass-width").style.right = "250px";
  625 + document.getElementById("info-glass-button").style.top = "585px";
  626 + document.getElementById("info-glass-button").style.right = "250px";*/
  627 +
  628 + isDownscaled = true;
  629 +}
  630 +
  631 +function upscale() {
  632 +
  633 + // Module Menu
  634 + document.getElementById("moduleMenu").style.width = "275px";
  635 + document.getElementById("moduleMenuToggleButton").style.right = menuVisible ? "245px" : "10px";
  636 + document.getElementById("moduleMenuToggleButton").style.height = "20px";
  637 + document.getElementById("glass-type-selection").style.width = "80%";
  638 + document.getElementById("glass-type-selection").style.left = "10%";
  639 + document.getElementById("glass-width-selection").style.width = "80%";
  640 + document.getElementById("glass-width-selection").style.left = "10%";
  641 +
  642 + // Info overlay
  643 + /*document.getElementById("info").style.fontSize = "1.25em";
  644 + document.getElementById("info-close-menu").style.top = "5px";
  645 + document.getElementById("info-close-menu").style.right = "300px";
  646 + document.getElementById("info-pole-buttons").style.top = "215px";
  647 + document.getElementById("info-pole-buttons").style.right = "300px";
  648 + document.getElementById("info-glass-type").style.top = "495px";
  649 + document.getElementById("info-glass-type").style.right = "300px";
  650 + document.getElementById("info-glass-width").style.top = "550px";
  651 + document.getElementById("info-glass-width").style.right = "300px";
  652 + document.getElementById("info-glass-button").style.top = "645px";
  653 + document.getElementById("info-glass-button").style.right = "300px";*/
  654 +
  655 + isDownscaled = false;
  656 +}
  657 +
607 const MODULE_PRICES = { 658 const MODULE_PRICES = {
608 "wall": 628, 659 "wall": 628,
609 "end" : 1848, 660 "end" : 1848,
js/MeshControls.js
@@ -339,7 +339,6 @@ class MeshControls { @@ -339,7 +339,6 @@ class MeshControls {
339 hideMeshMenu() { 339 hideMeshMenu() {
340 document.getElementById("poleMenu").style.bottom = "-55px"; 340 document.getElementById("poleMenu").style.bottom = "-55px";
341 document.getElementById("glassMenu").style.bottom = "-55px"; 341 document.getElementById("glassMenu").style.bottom = "-55px";
342 - document.getElementById("toolbar-tip").style.display = "none";  
343 document.getElementById("autoGenPoleSelect").style.display = "none"; 342 document.getElementById("autoGenPoleSelect").style.display = "none";
344 document.getElementById("moduleMenu").style.pointerEvents = "auto"; 343 document.getElementById("moduleMenu").style.pointerEvents = "auto";
345 } 344 }
@@ -109,7 +109,7 @@ class Setup { @@ -109,7 +109,7 @@ class Setup {
109 document.getElementById("setup").style.display = "none"; 109 document.getElementById("setup").style.display = "none";
110 document.getElementById("main").style.display = "inline"; 110 document.getElementById("main").style.display = "inline";
111 canvas.style.display = "inline"; 111 canvas.style.display = "inline";
112 - document.getElementById("init-info").style.display = "inline"; 112 + //document.getElementById("init-info").style.display = "inline";
113 113
114 initCanvas(); 114 initCanvas();
115 terrace.displayTerrace(inputs); 115 terrace.displayTerrace(inputs);
@@ -29,6 +29,11 @@ var autoGenEndPole = undefined; @@ -29,6 +29,11 @@ var autoGenEndPole = undefined;
29 var autoGenEndPoleType = undefined; 29 var autoGenEndPoleType = undefined;
30 var isAutoGen = false; 30 var isAutoGen = false;
31 31
  32 +var isDownscaled = false;
  33 +var infoPage = 0;
  34 +var currentText = "";
  35 +var currentElement = undefined;
  36 +
32 var timer = 0; 37 var timer = 0;
33 38
34 //var layoutSelected = undefined; 39 //var layoutSelected = undefined;
@@ -145,6 +150,12 @@ function initCanvas() { @@ -145,6 +150,12 @@ function initCanvas() {
145 function resize() { 150 function resize() {
146 scene.getEngine().resize(); 151 scene.getEngine().resize();
147 camera.orthographicCamera.resize(); 152 camera.orthographicCamera.resize();
  153 +
  154 + if (window.innerHeight < 750 && !isDownscaled) {
  155 + downscale();
  156 + } else if (window.innerHeight >= 750 && isDownscaled) {
  157 + upscale();
  158 + }
148 } 159 }
149 160
150 function onPointerDown(event) { 161 function onPointerDown(event) {