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
css/style.css
... ... @@ -8,10 +8,10 @@ html, body {
8 8 margin : 0;
9 9 padding : 0;
10 10 font-family: Arial, Helvetica, sans-serif;
11   - font-size: 16px;
12 11 }
13 12  
14 13 input:focus, select:focus, button:focus {
  14 + font-size: 16px;
15 15 outline: 0;
16 16 }
17 17  
... ... @@ -19,6 +19,11 @@ label {
19 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 28 /* -------------------- Main Wrappers ------------------------ */
24 29  
... ... @@ -83,6 +88,10 @@ label {
83 88 margin-right: auto;
84 89 }
85 90  
  91 +.full-width {
  92 + width: 100%;
  93 +}
  94 +
86 95 /* ----------------------------------------------------------- */
87 96 /* ------------------------ Text ----------------------------- */
88 97  
... ... @@ -208,11 +217,10 @@ label {
208 217 }
209 218  
210 219 #angle-headline, #angle-length{
211   - font-size: 30px;
  220 + font-size: 2em;
212 221 }
213 222  
214 223 .angleButtons {
215   - padding-bottom: 40px;
216 224 margin: 20px;
217 225 }
218 226  
... ... @@ -316,12 +324,22 @@ label {
316 324 /* ----------------------------------------------------------- */
317 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 337 #shoppingCart {
320 338 position: fixed;
321 339 bottom: 5px;
322 340 left: 5px;
323 341 width: 100px;
324   - z-index: 20;
  342 + z-index: 15;
325 343 text-align: center;
326 344 transition: all 0.2s ease-in-out;
327 345 cursor: pointer;
... ... @@ -358,43 +376,17 @@ label {
358 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 382 #itemList {
391 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 390 border: 1px solid black;
399 391 border-radius: 10px;
400 392 display: none;
... ... @@ -409,21 +401,18 @@ label {
409 401  
410 402 #closeItemList {
411 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 406 cursor: pointer;
418   - font-size: 1.4em;
  407 + font-size: 50px;
419 408 }
420 409  
421 410 #itemTableDiv {
422 411 width: 98%;
423   - height: 80%;
  412 + height: 75%;
424 413 border: 1px solid black;
425 414 margin: 0 1%;
426   - overflow: scroll;
  415 + overflow: auto;
427 416 background-color: white;
428 417 }
429 418  
... ... @@ -443,55 +432,182 @@ label {
443 432 #itemListFooter {
444 433 position: relative;
445 434 width: 100%;
446   - height: 10%;
447   - bottom: 0;
448 435 }
449 436  
450 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 538 #moduleMenuToggleButton {
461 539 z-index: 20;
462 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 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 555 #moduleMenu {
473   - width: 15%;
  556 + overflow-y: auto;
  557 + overflow-x: hidden;
  558 + width: 275px;
474 559 height: 100%;
475 560 position: fixed;
476   - z-index: 10;
477   - left: 85%;
  561 + right:0;
478 562 top: 0;
479   - background: lightgrey url("../images/background.jpg") no-repeat center;
  563 + z-index: 10;
480 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 579 border: 1px solid black;
487 580 border-radius: 5px;
488 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 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 613 #glassTypeInfo {
... ... @@ -517,45 +633,81 @@ label {
517 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 653 #poleMenu {
526 654 position: fixed;
527 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 660 border: 1px solid black;
534   - border-radius: 5px;
  661 + border-top-left-radius: 10px;
  662 + border-top-right-radius: 10px;
535 663 transition: bottom 0.5s;
536 664 }
537 665  
538 666 #glassMenu {
539 667 position: fixed;
540 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 673 border: 1px solid black;
547   - border-radius: 5px;
  674 + border-top-left-radius: 10px;
  675 + border-top-right-radius: 10px;
548 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 702 .meshControlsButtonsDiv {
552   - height: 80%;
  703 + height: 40px;
553 704 float: left;
554 705 margin: 1%;
555 706 }
556 707  
557 708 .meshControlsButtons {
558 709 height: 100%;
  710 + margin-top: 5px;
559 711 border: 1px solid black;
560 712 border-radius: 5px;
561 713 background-color: white;
... ... @@ -563,54 +715,106 @@ label {
563 715  
564 716 #autoGenButton {
565 717 height: 100%;
  718 + margin-top: 5px;
566 719 border: 1px solid black;
567 720 border-radius: 5px;
568 721 background-color: white;
569 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 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 741 #autoGenPoleSelect {
578 742 position: fixed;
579 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 749 border: 1px solid black;
586 750 border-radius: 10px;
587 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 754 .autoGenPoleButton {
603   - width: 25%;
  755 + height: 94%;
604 756 border: 1px solid black;
605 757 border-radius: 5px;
606 758 background-color: white;
  759 + margin-top: 4px;
607 760 }
608 761  
609   -#autoGenFinishButton {
  762 +#autoGenFinishButton, #autoGenCancelButton {
610 763 position: fixed;
611 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 791 left: 0;
  792 + top: 0;
  793 + background-color: rgba(0, 0, 0, 0.8);
  794 +}
  795 +
  796 +.infotext {
  797 + position: absolute;
613 798 top: 50%;
614   - font-size: 1.5em;
615   - display: none;
616   -}
617 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 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