Commit 7f4709268daf74ae1303c7c0f41cf9f843e0c299

Authored by Lars Jørgen Fredheim
1 parent c7a74f56

GUI Update

Showing 61 changed files with 542 additions and 213 deletions   Show diff stats
@@ -8,10 +8,10 @@ html, body { @@ -8,10 +8,10 @@ html, body {
8 margin : 0; 8 margin : 0;
9 padding : 0; 9 padding : 0;
10 font-family: Arial, Helvetica, sans-serif; 10 font-family: Arial, Helvetica, sans-serif;
11 - font-size: 16px;  
12 } 11 }
13 12
14 input:focus, select:focus, button:focus { 13 input:focus, select:focus, button:focus {
  14 + font-size: 16px;
15 outline: 0; 15 outline: 0;
16 } 16 }
17 17
@@ -19,6 +19,11 @@ label { @@ -19,6 +19,11 @@ label {
19 font-weight: bold; 19 font-weight: bold;
20 } 20 }
21 21
  22 +ul li {
  23 + list-style-type: none;
  24 + text-align: left;
  25 +}
  26 +
22 /* ----------------------------------------------------------- */ 27 /* ----------------------------------------------------------- */
23 /* -------------------- Main Wrappers ------------------------ */ 28 /* -------------------- Main Wrappers ------------------------ */
24 29
@@ -83,6 +88,10 @@ label { @@ -83,6 +88,10 @@ label {
83 margin-right: auto; 88 margin-right: auto;
84 } 89 }
85 90
  91 +.full-width {
  92 + width: 100%;
  93 +}
  94 +
86 /* ----------------------------------------------------------- */ 95 /* ----------------------------------------------------------- */
87 /* ------------------------ Text ----------------------------- */ 96 /* ------------------------ Text ----------------------------- */
88 97
@@ -208,11 +217,10 @@ label { @@ -208,11 +217,10 @@ label {
208 } 217 }
209 218
210 #angle-headline, #angle-length{ 219 #angle-headline, #angle-length{
211 - font-size: 30px; 220 + font-size: 2em;
212 } 221 }
213 222
214 .angleButtons { 223 .angleButtons {
215 - padding-bottom: 40px;  
216 margin: 20px; 224 margin: 20px;
217 } 225 }
218 226
@@ -316,12 +324,22 @@ label { @@ -316,12 +324,22 @@ label {
316 /* ----------------------------------------------------------- */ 324 /* ----------------------------------------------------------- */
317 /* ------------------------- Main GUI ------------------------ */ 325 /* ------------------------- Main GUI ------------------------ */
318 326
  327 +#gui {
  328 + width: 100%;
  329 + height: 100%;
  330 + /*display: none;*/
  331 + z-index: 10;
  332 +}
  333 +
  334 +/* ----------------------------------------------------------- */
  335 +/* ------------------ Shopping Cart Button ------------------- */
  336 +
319 #shoppingCart { 337 #shoppingCart {
320 position: fixed; 338 position: fixed;
321 bottom: 5px; 339 bottom: 5px;
322 left: 5px; 340 left: 5px;
323 width: 100px; 341 width: 100px;
324 - z-index: 20; 342 + z-index: 15;
325 text-align: center; 343 text-align: center;
326 transition: all 0.2s ease-in-out; 344 transition: all 0.2s ease-in-out;
327 cursor: pointer; 345 cursor: pointer;
@@ -358,43 +376,17 @@ label { @@ -358,43 +376,17 @@ label {
358 border-radius: 5px; 376 border-radius: 5px;
359 } 377 }
360 378
361 -#gui {  
362 - width: 100%;  
363 - height: 100%;  
364 - /*display: none;*/  
365 - z-index: 10;  
366 -}  
367 -  
368 -#topButtons {  
369 - width: 12%;  
370 - height: 5%;  
371 - position: fixed;  
372 - z-index: 10;  
373 - left: 0;  
374 - top: 0;  
375 -}  
376 -  
377 -.cameraButtons {  
378 - float: left;  
379 - height: 100%;  
380 - margin: 1%;  
381 -}  
382 -  
383 -#helpLinesButton {  
384 - height: 100%;  
385 - float: left;  
386 - margin: 1%;  
387 -}  
388 - 379 +/* ----------------------------------------------------------- */
  380 +/* --------------------- Shopping Cart ----------------------- */
389 381
390 #itemList { 382 #itemList {
391 position: fixed; 383 position: fixed;
392 - z-index: 15;  
393 - width: 50%;  
394 - height: 70%;  
395 - background: lightgrey url("../images/background.jpg") no-repeat center;  
396 - left: 25%;  
397 - top: 15%; 384 + z-index: 20;
  385 + width: 800px;
  386 + height: 700px;
  387 + background: url("../images/wallpapers/funky-lines.png");
  388 + left: calc(50% - 400px);
  389 + top: calc(50% - 350px);
398 border: 1px solid black; 390 border: 1px solid black;
399 border-radius: 10px; 391 border-radius: 10px;
400 display: none; 392 display: none;
@@ -409,21 +401,18 @@ label { @@ -409,21 +401,18 @@ label {
409 401
410 #closeItemList { 402 #closeItemList {
411 position: absolute; 403 position: absolute;
412 - top: 25%;  
413 - right: 2%;  
414 - background-color: red;  
415 - border: 1px solid black;  
416 - border-radius: 5px; 404 + top: -30px;
  405 + right: 10px;
417 cursor: pointer; 406 cursor: pointer;
418 - font-size: 1.4em; 407 + font-size: 50px;
419 } 408 }
420 409
421 #itemTableDiv { 410 #itemTableDiv {
422 width: 98%; 411 width: 98%;
423 - height: 80%; 412 + height: 75%;
424 border: 1px solid black; 413 border: 1px solid black;
425 margin: 0 1%; 414 margin: 0 1%;
426 - overflow: scroll; 415 + overflow: auto;
427 background-color: white; 416 background-color: white;
428 } 417 }
429 418
@@ -443,55 +432,182 @@ label { @@ -443,55 +432,182 @@ label {
443 #itemListFooter { 432 #itemListFooter {
444 position: relative; 433 position: relative;
445 width: 100%; 434 width: 100%;
446 - height: 10%;  
447 - bottom: 0;  
448 } 435 }
449 436
450 #downloadItemListButton { 437 #downloadItemListButton {
451 - position: absolute;  
452 - right: 1%;  
453 - bottom: 25%;  
454 - border: 1px solid black;  
455 - background-color: white;  
456 - border-radius: 5px;  
457 - font-size: 1.3em; 438 + position: relative;
  439 + right: -355px;
  440 + bottom: -5px;
  441 + width: 70px;
  442 + cursor: pointer;
  443 + transition: all 0.2s ease-in-out;
458 } 444 }
459 445
  446 +#downloadItemListButton:hover {
  447 + transform: scale(1.05);
  448 +}
  449 +
  450 +.fade-background {
  451 + position: fixed;
  452 + top: 0;
  453 + left: 0;
  454 + z-index: 19;
  455 + width: 100%;
  456 + height: 100%;
  457 + background: rgba(0, 0, 0, 0.8);
  458 +}
  459 +
  460 +/* ----------------------------------------------------------- */
  461 +/* ----------------- Main GUI Top Buttons -------------------- */
  462 +
  463 +#topButtons {
  464 + position: fixed;
  465 + float: right;
  466 + top: 0;
  467 + left: 0;
  468 + z-index: 10;/*
  469 + width: 200px;*/
  470 +}
  471 +
  472 +.view-nav {
  473 + position: relative;
  474 + top: 0;
  475 + left: -20px;
  476 + width: 60px;
  477 +}
  478 +
  479 +/* https://bit.ly/2L2k2qd */
  480 +.view-nav li ul {
  481 + position:absolute;
  482 + left: 0;
  483 + top:36px;
  484 + z-index:1;
  485 +}
  486 +.view-nav li ul li {
  487 + overflow:hidden;
  488 + max-height:0;
  489 + width: 70px;
  490 + -webkit-transition:max-height 500ms ease;
  491 + -moz-transition:max-height 500ms ease;
  492 + -o-transition:max-height 500ms ease;
  493 + transition:max-height 500ms ease;
  494 +}
  495 +.view-nav ul > li:hover ul li {
  496 + max-height:100px;
  497 +}
  498 +
  499 +.view {
  500 + width: 60px;
  501 +}
  502 +
  503 +.dropdown-view {
  504 + padding-top: 20px;
  505 + padding-left: 40px
  506 +}
  507 +
  508 +.cameraButtons {
  509 + width: 45px;
  510 + margin-left: 5px;
  511 + margin-top: 5px;
  512 +}
  513 +
  514 +.cameraButtons:hover {
  515 + transform: scale(1.05);
  516 +}
  517 +
  518 +#helpLinesButton {
  519 + position: fixed;
  520 + top:0;
  521 + z-index: 20;
  522 + margin: 5px;
  523 + left: 90px;
  524 + height: 50px;
  525 +}
  526 +
  527 +#helpButton {
  528 + position: fixed;
  529 + top: 2px;
  530 + left: 150px;
  531 + height: 45px;
  532 + margin: 5px;
  533 +}
  534 +
  535 +/* ----------------------------------------------------------- */
  536 +/* ------------------- Module Menu --------------------------- */
  537 +
460 #moduleMenuToggleButton { 538 #moduleMenuToggleButton {
461 z-index: 20; 539 z-index: 20;
462 position: fixed; 540 position: fixed;
463 - top: 1%;  
464 - right: 0.5%;  
465 - border: 1px solid black;  
466 - border-radius: 5px;  
467 - height: 2%; 541 + top: 10px;
  542 + right: 245px;
  543 + border: none;
  544 + height: 20px;
468 transform: rotate(180deg); 545 transform: rotate(180deg);
469 - transition: transform 1s; 546 + transition: all 1s;
  547 +}
  548 +
  549 +#moduleMenuGUI {
  550 + width: 300px;
  551 + text-align: center;
  552 + height: 100%;
470 } 553 }
471 554
472 #moduleMenu { 555 #moduleMenu {
473 - width: 15%; 556 + overflow-y: auto;
  557 + overflow-x: hidden;
  558 + width: 275px;
474 height: 100%; 559 height: 100%;
475 position: fixed; 560 position: fixed;
476 - z-index: 10;  
477 - left: 85%; 561 + right:0;
478 top: 0; 562 top: 0;
479 - background: lightgrey url("../images/background.jpg") no-repeat center; 563 + z-index: 10;
480 border: 1px solid black; 564 border: 1px solid black;
481 - border-radius: 10px;  
482 - transition: left 1s; 565 + background: url("../images/wallpapers/funky-lines.png");
  566 + border-top-left-radius: 10px;
  567 + border-bottom-left-radius: 10px;
  568 + transition: right 1s;
483 } 569 }
484 570
485 -.poleButton { 571 +.poleButtons {
  572 + position: fixed;
  573 + right: 0;
  574 + width: 275px;
  575 + margin-bottom: 30px;
  576 +}
  577 +
  578 +.pole-button {
486 border: 1px solid black; 579 border: 1px solid black;
487 border-radius: 5px; 580 border-radius: 5px;
488 background-color: white; 581 background-color: white;
489 - width: 25%; 582 + margin-left: 5px;
  583 + margin-right: 5px;
  584 + width: 42%;
  585 +}
  586 +
  587 +.pole-row {
  588 + margin-bottom: 5px;
  589 +}
  590 +
  591 +.pole-description {
  592 + width: 50%;
  593 + float: left;
  594 + margin-bottom: 20px;
  595 +}
  596 +
  597 +.pole-description-center {
  598 + width: 100%;
  599 + margin-bottom: 20px;
490 } 600 }
491 601
492 .menuHeader { 602 .menuHeader {
493 - font-size: 1.5em;  
494 - padding: 2% 0; 603 + font-size: 2em;
  604 + margin-top: 10px;
  605 + /*margin-bottom: 5px;*/
  606 + /*margin: 20px;*/
  607 +}
  608 +
  609 +#glassHeader {
  610 + margin-top: 10px;
495 } 611 }
496 612
497 #glassTypeInfo { 613 #glassTypeInfo {
@@ -517,45 +633,81 @@ label { @@ -517,45 +633,81 @@ label {
517 top: 40%; 633 top: 40%;
518 } 634 }
519 635
520 -#glassButton {  
521 - width: 55%;  
522 - transform: scale(1.4, 1); 636 +
  637 +.option-dropdown {
  638 + width: 80%;
  639 + left: 10%;
523 } 640 }
524 641
  642 +.option-dropdown-info {
  643 + width: 35%;
  644 +}
  645 +
  646 +.option-dropdown-selection {
  647 + width: 65%;
  648 +}
  649 +
  650 +/* ----------------------------------------------------------- */
  651 +/* --------------------- Mesh Controls ----------------------- */
  652 +
525 #poleMenu { 653 #poleMenu {
526 position: fixed; 654 position: fixed;
527 z-index: 15; 655 z-index: 15;
528 - bottom: -5.5%;  
529 - left: 40%;  
530 - width: 15%;  
531 - height: 5%;  
532 - background: lightgrey; 656 + left: calc(50% - 180px);
  657 + width: 190px;
  658 + height: 55px;
  659 + background: rgba(211, 211, 211, 0.8);
533 border: 1px solid black; 660 border: 1px solid black;
534 - border-radius: 5px; 661 + border-top-left-radius: 10px;
  662 + border-top-right-radius: 10px;
535 transition: bottom 0.5s; 663 transition: bottom 0.5s;
536 } 664 }
537 665
538 #glassMenu { 666 #glassMenu {
539 position: fixed; 667 position: fixed;
540 z-index: 15; 668 z-index: 15;
541 - bottom: -5.5%;  
542 - left: 40%;  
543 - width: 20%;  
544 - height: 5%;  
545 - background-color: lightgrey; 669 + left: calc(50% - 233px);
  670 + width: 295px;
  671 + height: 55px;
  672 + background: rgba(211, 211, 211, 0.8);
546 border: 1px solid black; 673 border: 1px solid black;
547 - border-radius: 5px; 674 + border-top-left-radius: 10px;
  675 + border-top-right-radius: 10px;
548 transition: bottom 0.5s; 676 transition: bottom 0.5s;
  677 + padding-left: 5px;
  678 +}
  679 +
  680 +#glassButton {
  681 + width: 55%;
  682 + transform: scale(1.4, 1);
  683 +}
  684 +
  685 +.no-width {
  686 + width: 0;
  687 +}
  688 +
  689 +.toolbar-tip {
  690 + position: fixed;
  691 + z-index: 15;
  692 + bottom: 60px;
  693 + width: 190px;
  694 + text-align: center;
  695 + left: calc(50% - 180px);
  696 + background-color: white;
  697 + border: 1px solid black;
  698 + padding: 5px;
  699 + border-radius: 5px;
549 } 700 }
550 701
551 .meshControlsButtonsDiv { 702 .meshControlsButtonsDiv {
552 - height: 80%; 703 + height: 40px;
553 float: left; 704 float: left;
554 margin: 1%; 705 margin: 1%;
555 } 706 }
556 707
557 .meshControlsButtons { 708 .meshControlsButtons {
558 height: 100%; 709 height: 100%;
  710 + margin-top: 5px;
559 border: 1px solid black; 711 border: 1px solid black;
560 border-radius: 5px; 712 border-radius: 5px;
561 background-color: white; 713 background-color: white;
@@ -563,54 +715,106 @@ label { @@ -563,54 +715,106 @@ label {
563 715
564 #autoGenButton { 716 #autoGenButton {
565 height: 100%; 717 height: 100%;
  718 + margin-top: 5px;
566 border: 1px solid black; 719 border: 1px solid black;
567 border-radius: 5px; 720 border-radius: 5px;
568 background-color: white; 721 background-color: white;
569 cursor: pointer; 722 cursor: pointer;
570 } 723 }
571 724
  725 +.meshControlsButtons:hover, #autoGenButton:hover {
  726 + background-color: #f0f0f0;
  727 +}
  728 +
  729 +#glassMenuType {
  730 + width: 140px;
  731 +}
  732 +
572 #glassMenuTypeSelect { 733 #glassMenuTypeSelect {
573 - font-size: 1.5em;  
574 - margin: 2.4% 1%; 734 + position: relative;
  735 + left: -27px;
  736 + margin-top: 8px;
  737 + border: 1px solid black;
  738 + height: 40px;
575 } 739 }
576 740
577 #autoGenPoleSelect { 741 #autoGenPoleSelect {
578 position: fixed; 742 position: fixed;
579 z-index: 15; 743 z-index: 15;
580 - width: 20%;  
581 - height: 50%;  
582 - left: 40%;  
583 - top: 25%;  
584 - background: lightgrey url("../images/background.jpg") no-repeat center; 744 + width: 655px;
  745 + height: 135px;
  746 + left: calc(50% - 412px);
  747 + bottom: 150px;
  748 + background: rgba(211, 211, 211, 0.5);
585 border: 1px solid black; 749 border: 1px solid black;
586 border-radius: 10px; 750 border-radius: 10px;
587 display: none; 751 display: none;
588 } 752 }
589 753
590 -#autoGenPoleSelectHeader {  
591 - width: 100%;  
592 - height: 10%;  
593 - font-size: 1.4em;  
594 -}  
595 -  
596 -.autoGenPoleRow {  
597 - width: 98%;  
598 - height: 43%;  
599 - padding: 1%;  
600 -}  
601 -  
602 .autoGenPoleButton { 754 .autoGenPoleButton {
603 - width: 25%; 755 + height: 94%;
604 border: 1px solid black; 756 border: 1px solid black;
605 border-radius: 5px; 757 border-radius: 5px;
606 background-color: white; 758 background-color: white;
  759 + margin-top: 4px;
607 } 760 }
608 761
609 -#autoGenFinishButton { 762 +#autoGenFinishButton, #autoGenCancelButton {
610 position: fixed; 763 position: fixed;
611 z-index: 15; 764 z-index: 15;
  765 + height: 50px;
  766 + bottom: 105px;
  767 + display: none;
  768 + cursor: pointer;
  769 +}
  770 +
  771 +#autoGenFinishButton:hover, #autoGenCancelButton:hover {
  772 + transform: scale(1.1);
  773 +}
  774 +
  775 +#autoGenFinishButton {
  776 + left: calc(50% + 25px);
  777 +}
  778 +
  779 +#autoGenCancelButton {
  780 + left: calc(50% - 240px);
  781 +}
  782 +
  783 +/************************************************/
  784 +/***************** Overlay **********************/
  785 +
  786 +.info {
  787 + position: fixed;
  788 + z-index: 30;
  789 + width: 100%;
  790 + height: 100%;
612 left: 0; 791 left: 0;
  792 + top: 0;
  793 + background-color: rgba(0, 0, 0, 0.8);
  794 +}
  795 +
  796 +.infotext {
  797 + position: absolute;
613 top: 50%; 798 top: 50%;
614 - font-size: 1.5em;  
615 - display: none;  
616 -}  
617 \ No newline at end of file 799 \ No newline at end of file
  800 + left: 35%;
  801 + font-size: 50px;
  802 + color: white;
  803 +}
  804 +
  805 +.close-info {
  806 + position: absolute;
  807 + top: 20px;
  808 + right: 40px;
  809 + font-size: 3em;
  810 + color: white;
  811 + cursor: pointer;
  812 +}
  813 +
  814 +.btNextTip {
  815 + position: absolute;
  816 + right: 50px;
  817 + top: 50%;
  818 + width: 100px;
  819 +}
  820 +
  821 +/************************************************/
618 \ No newline at end of file 822 \ No newline at end of file
images/cam2D_red.png

2.99 KB | W: | H:

3.2 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/cam3D_red.png

3.1 KB | W: | H:

3.32 KB | W: | H:

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

4.99 KB

images/icons/auto.psd 0 → 100644
No preview for this file type
images/icons/cancel.png 0 → 100644

5.25 KB

images/icons/double_arrow.png 0 → 100644

1.89 KB

images/icons/finished.png 0 → 100644

5.3 KB

images/icons/help.png 0 → 100644

6.02 KB

images/icons/left_arrow.png 0 → 100644

1.81 KB

images/icons/left_arrow_black.png 0 → 100644

1.14 KB

images/icons/next.png 0 → 100644

2.58 KB

images/icons/pdf.png 0 → 100644

4.58 KB

images/ruler.png renamed to images/icons/ruler_2.png

10.6 KB

images/icons/shoppingCart.png 0 → 100644

1.44 KB

images/icons/view.png 0 → 100644

2.01 KB

images/menu_glass_clear.png

231 Bytes | W: | H:

1.65 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/menu_glass_darkened.png

1.65 KB | W: | H:

1.85 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/menu_glass_frosted.png

231 Bytes | W: | H:

1.44 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/poles/180.png 0 → 100644

19.6 KB

images/poles/180_labeled.png 0 → 100644

22.6 KB

images/poles/180_labeled.psd 0 → 100644
No preview for this file type
images/poles/45.png 0 → 100644

17.9 KB

images/poles/45_alt.png 0 → 100644

18.9 KB

images/poles/45_labeled.png 0 → 100644

25.9 KB

images/poles/45_labeled.psd 0 → 100644
No preview for this file type
images/poles/90.png 0 → 100644

22.4 KB

images/poles/90_labeled 0 → 100644
No preview for this file type
images/poles/90_labeled.png 0 → 100644

24 KB

images/poles/end.png 0 → 100644

16.1 KB

images/poles/end_labeled.png 0 → 100644

18.9 KB

images/poles/end_labeled.psd 0 → 100644
No preview for this file type
images/poles/psd/180.psd 0 → 100644
No preview for this file type
images/poles/psd/45.psd 0 → 100644
No preview for this file type
images/poles/psd/90.psd 0 → 100644
No preview for this file type
images/poles/psd/end.psd 0 → 100644
No preview for this file type
images/poles/psd/wall.psd 0 → 100644
No preview for this file type
images/poles/raw/180.png 0 → 100644

27.6 KB

images/poles/raw/45.png 0 → 100644