diff --git a/css/styles.css b/css/styles.css index 006fa87..8edfb3b 100644 --- a/css/styles.css +++ b/css/styles.css @@ -386,9 +386,9 @@ RIGHT PANEL position: absolute; width: 17%; /* background-color: rgba(255, 0, 254, 0.4); */ -top: 0px; - right: 0px; - bottom: 0px; +top: 0; + right: 0; + bottom: 0; } .btnPrint { @@ -431,40 +431,59 @@ top: 0px; /* -PRINT PROGRESS DISPLAY +PROGRESSGUAGE AND THERMOMETER SHARED STYLES */ -#printProgressContainer { - position: absolute; - right: 30px; - top: 370px; - width: 110px; - margin: 5px 0px; - font-weight: bold; - display: none; +.progressbarAppear,.thermometerAppear { + right: 1.5% !important; } -#progressbarContainer { - margin: 3px 0px; - width: inherit; - height: 20px; - background-color: #fff; - border: 2px solid #333; - border-radius: 5px; +/* + +PROGRESS GUAGE + + */ +.progressbarCanvasContainerParent { + position: relative; + width: 100%; } -.progressAmount { - margin: 0px 5px; -} - -#progressbar { - position: relative; /*margin-bottom: -20px; +#progressbarCanvasContainer { + /*position: absolute; */ -width: 0%; - height: 100%; - background-color: #4c4; - border: 0px solid #f0f; - border-radius: 3px; +position: relative; /*right: 0; + */ +/*top: 10%; + */ +width: 30%; + float: right; /*height: auto; + */ + +-webkit-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); + -moz-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); + -o-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); + -ms-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); + transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); + right: -36%; +} + +#progressbarCanvas { + /*position: absolute; + */ +top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: auto; + background-color: #fff; + border: solid #000; + border-width: 2px 0 2px 2px; + border-radius: 15px 0 0 15px; + padding: 5px 0px 5px 5px; + + -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); + box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); } /* @@ -472,17 +491,46 @@ width: 0%; THERMOMETER */ +.thermometerContainerParent { + position: relative; + width: 100%; +} + #thermometerContainer { - position: absolute; - right: 25px; - top: 370px; + /*position: absolute; + */ +position: relative; /*right: 0; + */ +/*top: 40%; + */ +width: 25%; + float: right; + + -webkit-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); + -moz-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); + -o-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); + -ms-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); + transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); + right: -30%; } #thermometerCanvas { - /*background: #59b2b8; - */ -/*zoom: 2; + /*position: absolute; */ +top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: auto; + background-color: #fff; + border: solid #000; + border-width: 2px 0 2px 2px; + border-radius: 15px 0 0 15px; + padding: 5px 0px 5px 5px; + + -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); + box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); } /* diff --git a/css/styles.min.css b/css/styles.min.css index 21bcb8b..0b3115f 100644 --- a/css/styles.min.css +++ b/css/styles.min.css @@ -1 +1 @@ -body{background-color:#fcfcfc;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;}img{z-index:5;}.btn{background-repeat:no-repeat;cursor:pointer;}#landscape{position:absolute;background-color:#fff;width:100%;max-width:1024px;max-height:768px;top:0px;bottom:0px;left:0px;right:0px;z-index:5;overflow:hidden;margin:0px auto;outline:2px solid #5e8c71;-webkit-box-shadow:0 0 8px rgba(8, 8, 8, 0.25);box-shadow:0 0 8px rgba(8, 8, 8, 0.25);}#portrait{display:none;}.bgContainer{position:absolute;width:100%;height:100%;overflow:hidden;}.bgTop,.bgMiddle,.bgBottom{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1.0;-webkit-transition:opacity .35s linear;-moz-transition:opacity .35s linear;-o-transition:opacity .35s linear;-ms-transition:opacity .35s linear;transition:opacity .35s linear;position:absolute;left:0px;z-index:-5;}.bgTop{top:0px;}.bgMiddle{top:30%;}.bgBottom{bottom:0px;}.centerpanel{position:absolute;left:50%;margin-left:-33%;width:66%;height:100%;z-index:5;}.logopanel{height:25%;}.d3dlogo{position:relative;top:15%;width:100%;height:100%;margin:0px auto;max-width:399px;height:139px;background:url('../img/logo/logo_full.png') no-repeat center center;cursor:pointer;}#verticalShapes{position:absolute;right:0;bottom:15px;margin-right:-8.5%;width:8%;}#verticalShapes > div{border:2px solid #333;border-radius:0px 5px 5px 0px;margin-top:4px;background-color:#fff;cursor:pointer;}#verticalShapes > div img.verticalshape{width:100%;max-width:50px;height:auto;vertical-align:bottom;}.drawareacontainer{position:relative;width:100%;height:65%;background-color:#fff;border:4px solid #000;border-radius:15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;z-index:15;}#canvasContainers{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;padding:0;margin:0;}#mycanvasContainer{position:absolute;top:0;left:0;width:78%;height:100%;}#mycanvas{width:100%;height:100%;margin:0;padding:0;border-right:2px solid #333;}#previewContainer{position:absolute;top:0;right:0;width:22%;height:100%;}#preview{min-width:50px;width:100%;height:100%;margin:0;padding:0;}#preview_tmp{position:absolute;top:0px;left:0px;z-index:500;border:1px solid #f80;display:none;}.bottompanel{position:relative;bottom:0px;width:100%;height:10%;}.manipulationBtns{margin:2px 5px;position:absolute;right:0;top:0;max-width:340px;max-height:70px;width:45%;}.manipulationBtn{width:45%;height:auto;cursor:pointer;}#btnsUpDown{float:left;width:45%;}#btnsUpDown > div{float:left;padding-right:8px;background-repeat:no-repeat;}#btnsTurnLeftRight{float:right;width:45%;}#btnsTurnLeftRight > div{float:left;padding-right:8px;background-repeat:no-repeat;}#btnMoveUp{max-width:65px;}#btnMoveDown{max-width:64px;}#btnTwistLeft{max-width:59px;}#btnTwistRight{max-width:64px;}@media screen and (max-height: 700px){.logopanel{height:22%;}.doodlecontainer{height:68%;}.d3dlogo{top:25%;max-width:399px;height:74px;background-image:url('../img/logo/logo_small.png');}}@media screen and (max-height: 655px){.bgMiddle{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;}}@media screen and (max-height: 525px){.d3dlogo{top:20%;height:57px;max-width:307px;background-image:url('../img/logo/logo_smaller.png');}}@media screen and (max-height: 375px){.d3dlogo{height:40px;max-width:216px;background-image:url('../img/logo/logo_smallest.png');}}.leftpanel{position:absolute;width:17%;top:0px;left:0px;bottom:0px;}.btnNew{margin:5% 0% 1% 5%;width:100%;max-width:180px;height:auto;}.btnsPrevNext{margin:1% 7%;max-width:160px;}.btnPrevious{width:40%;max-width:56px;height:auto;}.btnNext{width:40%;max-width:56px;height:auto;float:right;}.btnSave{margin:5% 5% 1% 5%;width:90%;max-width:144px;height:auto;}.btnOops{margin:5% 5% 1% 5%;width:90%;max-width:144px;height:auto;}.rightpanel{position:absolute;width:17%;top:0px;right:0px;bottom:0px;}.btnPrint{margin:1% 5% 5% 0%;width:100%;max-width:163px;height:auto;float:right;}.btnStop{margin:5% 10% 1% 5%;float:right;width:90%;max-width:98px;height:auto;}.btnsSettingsInfo{position:absolute;bottom:25px;right:5px;width:80%;margin:1% 5%;max-width:160px;}.btnInfo{width:40%;max-width:53px;height:auto;}.btnSettings{width:40%;max-width:53px;height:auto;float:right;}#printProgressContainer{position:absolute;right:30px;top:370px;width:110px;margin:5px 0px;font-weight:bold;display:none;}#progressbarContainer{margin:3px 0px;width:inherit;height:20px;background-color:#fff;border:2px solid #333;border-radius:5px;}.progressAmount{margin:0px 5px;}#progressbar{position:relative;width:0%;height:100%;background-color:#4c4;border:0px solid #f0f;border-radius:3px;}#thermometerContainer{position:absolute;right:25px;top:370px;}.disabled{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter:alpha(opacity=30);opacity:0.3;cursor:default;}#btnStop.disabled{display:none;}.clearfix:before,.clearfix:after{content:" ";display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;}#contentOverlay{background-color:rgba(255, 255, 255, 0.65);z-index:20;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:none;}#contentOverlay #settings{background-color:#fff;position:absolute;top:0;left:0;right:0;bottom:0;z-index:15;max-width:775px;max-height:540px;width:80%;height:75%;margin:7% 8%;-webkit-box-shadow:0px 2px 6px 0px rgba(16, 16, 16, 0.65);box-shadow:0px 2px 6px 0px rgba(16, 16, 16, 0.65);border:2px solid #222;border-radius:15px;padding:2%;}#contentOverlay #settings .toppanel{height:10%;}#contentOverlay #settings .toppanel .settingsLabelContainer{width:100%;height:auto;margin-bottom:1%;}#contentOverlay #settings .toppanel .settingsLabelContainer .settingsLabelImg{width:45%;max-width:373px;height:auto;}#contentOverlay #settings .bottompanel{width:100%;height:90%;}#contentOverlay #settings .bottompanel > .settingsContainer{float:left;width:83%;height:98%;margin:.5%;-ms-overflow-y:scroll;overflow-y:scroll;border:1px solid #bbbbbb;border-radius:5px;}#contentOverlay #settings .bottompanel > .btnContainer{width:15%;height:100%;float:right;position:relative;right:0;}#contentOverlay #settings .bottompanel > .btnContainer > .btnOK{position:absolute;bottom:3%;right:7%;max-width:85px;min-width:42px;width:88%;height:auto;margin:0 2% 2% 0;cursor:pointer;}@media only screen and (max-width: 480px),only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5),only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5){.centerpanel{left:0;margin-left:0;width:100%;}.logopanel{height:40px;}.d3dlogo{top:0;height:40px;max-width:216px;background-image:url('../img/logo/logo_smallest.png');}.drawareacontainer{height:70%;}.bottompanel{height:10%;}.bottompanel .manipulationBtns{margin:2px -27;right:22%;width:38%;}.leftpanel{width:100px;background-color:#fff;z-index:50;-webkit-transition:left 0.3s ease-out;-moz-transition:left 0.3s ease-out;-o-transition:left 0.3s ease-out;-ms-transition:left 0.3s ease-out;transition:left 0.3s ease-out;}.hideleft{left:-101px;}.shadowright{-webkit-box-shadow:2px 0 4px rgba(42, 42, 41, 0.6);box-shadow:2px 0 4px rgba(42, 42, 41, 0.6);}.btnNew{margin:5% 5% 1% 5%;width:90%;}.btnSave{margin-left:9%;width:75%;}.btnOops{margin-left:6%;width:71%;}.rightpanel{width:100px;background-color:#fff;z-index:50;-webkit-transition:right 0.3s ease-out;-moz-transition:right 0.3s ease-out;-o-transition:right 0.3s ease-out;-ms-transition:right 0.3s ease-out;transition:right 0.3s ease-out;}.hideright{right:-101px;}.shadowleft{-webkit-box-shadow:-2px 0 4px rgba(42, 42, 41, 0.6);box-shadow:-2px 0 4px rgba(42, 42, 41, 0.6);}.btnPrint{margin:1% 5% 5% 5%;width:90%;}.btnStop{margin:5% 6% 1% 5%;width:70%;}.sidebutton{display:block;position:absolute;top:40px;width:25px;height:38px;border:1px solid #808;background:url('../img/arrows.png') no-repeat;background-color:#eee;cursor:pointer;}.sidebutton:active{background-color:#aaa;}.leftpanel .sidebutton{right:-27px;background-position:0px 0px;}.rightpanel .sidebutton{left:-27px;background-position:-25px 0px;}.sidebuttonin:active{background-color:#888;}.leftpanel .sidebuttonin{background-color:#ccc;background-position:-25px 0px;}.rightpanel .sidebuttonin{background-color:#ccc;background-position:0px 0px;}#contentOverlay{z-index:200;}#contentOverlay #settings{width:87%;height:82%;margin:6% 4%;}#contentOverlay #settings > .right{width:14%;}}@media only screen and (orientation: portrait){#landscape{display:none;}#portrait{display:block;}.vertImage{margin:0px;padding:0px;max-width:100%;height:auto;width:auto;}} \ No newline at end of file +body{background-color:#fcfcfc;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;}img{z-index:5;}.btn{background-repeat:no-repeat;cursor:pointer;}#landscape{position:absolute;background-color:#fff;width:100%;max-width:1024px;max-height:768px;top:0px;bottom:0px;left:0px;right:0px;z-index:5;overflow:hidden;margin:0px auto;outline:2px solid #5e8c71;-webkit-box-shadow:0 0 8px rgba(8, 8, 8, 0.25);box-shadow:0 0 8px rgba(8, 8, 8, 0.25);}#portrait{display:none;}.bgContainer{position:absolute;width:100%;height:100%;overflow:hidden;}.bgTop,.bgMiddle,.bgBottom{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1.0;-webkit-transition:opacity .35s linear;-moz-transition:opacity .35s linear;-o-transition:opacity .35s linear;-ms-transition:opacity .35s linear;transition:opacity .35s linear;position:absolute;left:0px;z-index:-5;}.bgTop{top:0px;}.bgMiddle{top:30%;}.bgBottom{bottom:0px;}.centerpanel{position:absolute;left:50%;margin-left:-33%;width:66%;height:100%;z-index:5;}.logopanel{height:25%;}.d3dlogo{position:relative;top:15%;width:100%;height:100%;margin:0px auto;max-width:399px;height:139px;background:url('../img/logo/logo_full.png') no-repeat center center;cursor:pointer;}#verticalShapes{position:absolute;right:0;bottom:15px;margin-right:-8.5%;width:8%;}#verticalShapes > div{border:2px solid #333;border-radius:0px 5px 5px 0px;margin-top:4px;background-color:#fff;cursor:pointer;}#verticalShapes > div img.verticalshape{width:100%;max-width:50px;height:auto;vertical-align:bottom;}.drawareacontainer{position:relative;width:100%;height:65%;background-color:#fff;border:4px solid #000;border-radius:15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;z-index:15;}#canvasContainers{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;padding:0;margin:0;}#mycanvasContainer{position:absolute;top:0;left:0;width:78%;height:100%;}#mycanvas{width:100%;height:100%;margin:0;padding:0;border-right:2px solid #333;}#previewContainer{position:absolute;top:0;right:0;width:22%;height:100%;}#preview{min-width:50px;width:100%;height:100%;margin:0;padding:0;}#preview_tmp{position:absolute;top:0px;left:0px;z-index:500;border:1px solid #f80;display:none;}.bottompanel{position:relative;bottom:0px;width:100%;height:10%;}.manipulationBtns{margin:2px 5px;position:absolute;right:0;top:0;max-width:340px;max-height:70px;width:45%;}.manipulationBtn{width:45%;height:auto;cursor:pointer;}#btnsUpDown{float:left;width:45%;}#btnsUpDown > div{float:left;padding-right:8px;background-repeat:no-repeat;}#btnsTurnLeftRight{float:right;width:45%;}#btnsTurnLeftRight > div{float:left;padding-right:8px;background-repeat:no-repeat;}#btnMoveUp{max-width:65px;}#btnMoveDown{max-width:64px;}#btnTwistLeft{max-width:59px;}#btnTwistRight{max-width:64px;}@media screen and (max-height: 700px){.logopanel{height:22%;}.doodlecontainer{height:68%;}.d3dlogo{top:25%;max-width:399px;height:74px;background-image:url('../img/logo/logo_small.png');}}@media screen and (max-height: 655px){.bgMiddle{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;}}@media screen and (max-height: 525px){.d3dlogo{top:20%;height:57px;max-width:307px;background-image:url('../img/logo/logo_smaller.png');}}@media screen and (max-height: 375px){.d3dlogo{height:40px;max-width:216px;background-image:url('../img/logo/logo_smallest.png');}}.leftpanel{position:absolute;width:17%;top:0px;left:0px;bottom:0px;}.btnNew{margin:5% 0% 1% 5%;width:100%;max-width:180px;height:auto;}.btnsPrevNext{margin:1% 7%;max-width:160px;}.btnPrevious{width:40%;max-width:56px;height:auto;}.btnNext{width:40%;max-width:56px;height:auto;float:right;}.btnSave{margin:5% 5% 1% 5%;width:90%;max-width:144px;height:auto;}.btnOops{margin:5% 5% 1% 5%;width:90%;max-width:144px;height:auto;}.rightpanel{position:absolute;width:17%;top:0;right:0;bottom:0;}.btnPrint{margin:1% 5% 5% 0%;width:100%;max-width:163px;height:auto;float:right;}.btnStop{margin:5% 10% 1% 5%;float:right;width:90%;max-width:98px;height:auto;}.btnsSettingsInfo{position:absolute;bottom:25px;right:5px;width:80%;margin:1% 5%;max-width:160px;}.btnInfo{width:40%;max-width:53px;height:auto;}.btnSettings{width:40%;max-width:53px;height:auto;float:right;}.progressbarAppear,.thermometerAppear{right:1.5% !important;}.progressbarCanvasContainerParent{position:relative;width:100%;}#progressbarCanvasContainer{position:relative;width:30%;float:right;-webkit-transition:right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);-moz-transition:right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);-o-transition:right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);-ms-transition:right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);transition:right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);right:-36%;}#progressbarCanvas{top:0;right:0;bottom:0;left:0;width:100%;height:auto;background-color:#fff;border:solid #000;border-width:2px 0 2px 2px;border-radius:15px 0 0 15px;padding:5px 0px 5px 5px;-webkit-box-shadow:0 2px 5px rgba(37, 37, 37, 0.35);box-shadow:0 2px 5px rgba(37, 37, 37, 0.35);}.thermometerContainerParent{position:relative;width:100%;}#thermometerContainer{position:relative;width:25%;float:right;-webkit-transition:right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);-moz-transition:right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);-o-transition:right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);-ms-transition:right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);transition:right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);right:-30%;}#thermometerCanvas{top:0;right:0;bottom:0;left:0;width:100%;height:auto;background-color:#fff;border:solid #000;border-width:2px 0 2px 2px;border-radius:15px 0 0 15px;padding:5px 0px 5px 5px;-webkit-box-shadow:0 2px 5px rgba(37, 37, 37, 0.35);box-shadow:0 2px 5px rgba(37, 37, 37, 0.35);}.disabled{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter:alpha(opacity=30);opacity:0.3;cursor:default;}#btnStop.disabled{display:none;}.clearfix:before,.clearfix:after{content:" ";display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;}#contentOverlay{background-color:rgba(255, 255, 255, 0.65);z-index:20;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:none;}#contentOverlay #settings{background-color:#fff;position:absolute;top:0;left:0;right:0;bottom:0;z-index:15;max-width:775px;max-height:540px;width:80%;height:75%;margin:7% 8%;-webkit-box-shadow:0px 2px 6px 0px rgba(16, 16, 16, 0.65);box-shadow:0px 2px 6px 0px rgba(16, 16, 16, 0.65);border:2px solid #222;border-radius:15px;padding:2%;}#contentOverlay #settings .toppanel{height:10%;}#contentOverlay #settings .toppanel .settingsLabelContainer{width:100%;height:auto;margin-bottom:1%;}#contentOverlay #settings .toppanel .settingsLabelContainer .settingsLabelImg{width:45%;max-width:373px;height:auto;}#contentOverlay #settings .bottompanel{width:100%;height:90%;}#contentOverlay #settings .bottompanel > .settingsContainer{float:left;width:83%;height:98%;margin:.5%;-ms-overflow-y:scroll;overflow-y:scroll;border:1px solid #bbbbbb;border-radius:5px;}#contentOverlay #settings .bottompanel > .btnContainer{width:15%;height:100%;float:right;position:relative;right:0;}#contentOverlay #settings .bottompanel > .btnContainer > .btnOK{position:absolute;bottom:3%;right:7%;max-width:85px;min-width:42px;width:88%;height:auto;margin:0 2% 2% 0;cursor:pointer;}@media only screen and (max-width: 480px),only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5),only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5){.centerpanel{left:0;margin-left:0;width:100%;}.logopanel{height:40px;}.d3dlogo{top:0;height:40px;max-width:216px;background-image:url('../img/logo/logo_smallest.png');}.drawareacontainer{height:70%;}.bottompanel{height:10%;}.bottompanel .manipulationBtns{margin:2px -27;right:22%;width:38%;}.leftpanel{width:100px;background-color:#fff;z-index:50;-webkit-transition:left 0.3s ease-out;-moz-transition:left 0.3s ease-out;-o-transition:left 0.3s ease-out;-ms-transition:left 0.3s ease-out;transition:left 0.3s ease-out;}.hideleft{left:-101px;}.shadowright{-webkit-box-shadow:2px 0 4px rgba(42, 42, 41, 0.6);box-shadow:2px 0 4px rgba(42, 42, 41, 0.6);}.btnNew{margin:5% 5% 1% 5%;width:90%;}.btnSave{margin-left:9%;width:75%;}.btnOops{margin-left:6%;width:71%;}.rightpanel{width:100px;background-color:#fff;z-index:50;-webkit-transition:right 0.3s ease-out;-moz-transition:right 0.3s ease-out;-o-transition:right 0.3s ease-out;-ms-transition:right 0.3s ease-out;transition:right 0.3s ease-out;}.hideright{right:-101px;}.shadowleft{-webkit-box-shadow:-2px 0 4px rgba(42, 42, 41, 0.6);box-shadow:-2px 0 4px rgba(42, 42, 41, 0.6);}.btnPrint{margin:1% 5% 5% 5%;width:90%;}.btnStop{margin:5% 6% 1% 5%;width:70%;}.sidebutton{display:block;position:absolute;top:40px;width:25px;height:38px;border:1px solid #808;background:url('../img/arrows.png') no-repeat;background-color:#eee;cursor:pointer;}.sidebutton:active{background-color:#aaa;}.leftpanel .sidebutton{right:-27px;background-position:0px 0px;}.rightpanel .sidebutton{left:-27px;background-position:-25px 0px;}.sidebuttonin:active{background-color:#888;}.leftpanel .sidebuttonin{background-color:#ccc;background-position:-25px 0px;}.rightpanel .sidebuttonin{background-color:#ccc;background-position:0px 0px;}#contentOverlay{z-index:200;}#contentOverlay #settings{width:87%;height:82%;margin:6% 4%;}#contentOverlay #settings > .right{width:14%;}}@media only screen and (orientation: portrait){#landscape{display:none;}#portrait{display:block;}.vertImage{margin:0px;padding:0px;max-width:100%;height:auto;width:auto;}} \ No newline at end of file diff --git a/index.html b/index.html index 226dbaf..a4cc261 100755 --- a/index.html +++ b/index.html @@ -39,9 +39,15 @@
-
-
-
+ + + +
+ +
+
+ +
+
+
+ +
+
+
+
+ +
+
+ + + + +
@@ -128,6 +150,7 @@ + diff --git a/js/Progressbar.js b/js/Progressbar.js index 147c18d..aaa7dc1 100644 --- a/js/Progressbar.js +++ b/js/Progressbar.js @@ -16,12 +16,17 @@ function Progressbar() { this.$canvas; this.canvas; this.context; + this.$container; this.isInitted = false; - this.init = function(targCanvas) { + this.enabled = true; + + this.init = function(targCanvas, targCanvasContainer) { console.log("Thermometer.init()"); + this.$container = targCanvasContainer; + this.$canvas = targCanvas; this.canvas = this.$canvas[0]; this.context = this.canvas.getContext('2d'); @@ -88,4 +93,14 @@ function Progressbar() { console.log("Progressbar.setTemperature() -> thermometer not initialized!"); } } + this.show = function() { + this.$container.addClass("progressbarAppear"); + // this.$container.show(); + this.enabled = true; + } + this.hide = function() { + this.$container.removeClass("progressbarAppear"); + // this.$container.hide(); + this.enabled = false; + } } diff --git a/js/Thermometer.js b/js/Thermometer.js index cae66d3..b171d80 100644 --- a/js/Thermometer.js +++ b/js/Thermometer.js @@ -124,11 +124,15 @@ function Thermometer() { } } this.show = function() { - this.$container.show(); + this.$container.addClass("thermometerAppear"); +// $("#progressbarCanvasContainer").addClass("thermometerAppear"); +// this.$container.show(); this.enabled = true; } this.hide = function() { - this.$container.hide(); + this.$container.removeClass("thermometerAppear"); +// $("#progressbarCanvasContainer").removeClass("thermometerAppear"); +// this.$container.hide(); this.enabled = false; } } diff --git a/js/main.js b/js/main.js index 6420c12..2fcf0ff 100644 --- a/js/main.js +++ b/js/main.js @@ -5,6 +5,7 @@ var wifiboxIsRemote = false; // when you want to run the client on a comp var autoUpdate = true; // auto retrieve updates about temperature and progress from printer var printer = new Printer(); +var progressbar = new Progressbar(); var thermometer = new Thermometer(); var settingsWindow = new SettingsWindow(); @@ -53,6 +54,10 @@ $(function() { thermometer.init($("#thermometerCanvas"), $("#thermometerContainer")); + progressbar = new Progressbar(); + progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer")); + + printer.init(); $(document).on(Printer.UPDATE,update); @@ -93,8 +98,25 @@ $(function() { }, 1000); //*/ } + showhideInterval = setInterval(showOrHideThermo, 2500); +}); + +var showhideInterval; +var showOrHide = false; + +function showOrHideThermo() { + console.log("f:showOrHideThermo()"); + if (showOrHide) { + thermometer.hide(); + progressbar.hide(); + } else { + thermometer.show(); + progressbar.show(); + + } + showOrHide = !showOrHide; +} -}) function settingsLoaded() { console.log("settingsLoaded"); console.log("autoHeatup: ",settings["printer.heatup.enabled"]); diff --git a/less/base_rightpanel.less b/less/base_rightpanel.less index 3fb9425..1de9e78 100644 --- a/less/base_rightpanel.less +++ b/less/base_rightpanel.less @@ -3,9 +3,9 @@ position: absolute; width: 17%; /* background-color: rgba(255, 0, 254, 0.4);*/ - top: 0px; - right: 0px; - bottom: 0px; + top: 0; + right: 0; + bottom: 0; } .btnPrint { margin: 1% 5% 5% 0%; @@ -22,12 +22,12 @@ height: auto; } .btnsSettingsInfo { - position: absolute; - bottom: 25px; - right: 5px; - width: 80%; + position: absolute; + bottom: 25px; + right: 5px; + width: 80%; margin: 1% 5%; - max-width: 160px; + max-width: 160px; } .btnInfo { width: 40%; @@ -41,59 +41,140 @@ float: right; } +/* + + PROGRESSGUAGE AND THERMOMETER SHARED STYLES + +*/ +.progressbarAppear, .thermometerAppear { +// margin-right: 1.5% !important; + right: 1.5% !important; +} + /* - PRINT PROGRESS DISPLAY + PROGRESS GUAGE */ -#printProgressContainer { - position: absolute; - right: 30px; - top: 370px; - width: 110px; - margin: 5px 0px; - font-weight: bold; - display:none; +.progressbarCanvasContainerParent { + position:relative; + width:100%; } -#progressbarContainer { - margin: 3px 0px; - width: inherit; - height: 20px; - background-color: #fff; - border: 2px solid #333; - border-radius: 5px; - -o-border-radius: 5px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; -} -.progressAmount { - margin: 0px 5px; -} -#progressbar { +#progressbarCanvasContainer { +/*position: absolute;*/ position: relative; -/*margin-bottom: -20px;*/ - width: 0%; - height: 100%; - background-color: #4c4; - border: 0px solid #f0f; - border-radius: 3px; - -o-border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; +/*right: 0;*/ +/*top: 10%;*/ + width: 30%; + float:right; +/*height: auto;*/ + + transition: right .40s cubic-bezier(0.68, -0.55, 0.265, 1.55); + right: -36%; } +#progressbarCanvas { +/*position: absolute;*/ + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: auto; + background-color: #fff; + border: solid #000; + border-width: 2px 0 2px 2px; + border-radius: 15px 0 0 15px; + padding: 5px 0px 5px 5px; + + -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); + box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); +} + + +//#printProgressContainer { +// position: absolute; +// right: 30px; +// top: 370px; +// width: 110px; +// margin: 5px 0px; +// font-weight: bold; +// display:none; +//} +//#progressbarContainer { +// margin: 3px 0px; +// width: inherit; +// height: 20px; +// background-color: #fff; +// border: 2px solid #333; +// border-radius: 5px; +// -o-border-radius: 5px; +// -moz-border-radius: 5px; +// -webkit-border-radius: 5px; +//} +//.progressAmount { +// margin: 0px 5px; +//} +//#progressbar { +// position: relative; +///*margin-bottom: -20px;*/ +// width: 0%; +// height: 100%; +// background-color: #4c4; +// border: 0px solid #f0f; +// border-radius: 3px; +// -o-border-radius: 3px; +// -moz-border-radius: 3px; +// -webkit-border-radius: 3px; +//} + /* THERMOMETER */ +.thermometerContainerParent { + position:relative; + width:100%; +} #thermometerContainer { - position: absolute; - right: 25px; - top: 370px; +/*position: absolute;*/ + position: relative; +/*right: 0;*/ +/*top: 40%;*/ + width: 25%; + float: right; + + transition: right .50s cubic-bezier(0.68, -0.55, 0.265, 1.55); + right: -30%; } + #thermometerCanvas { -/*background: #59b2b8;*/ -/*zoom: 2;*/ +/*position: absolute;*/ + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: auto; + background-color: #fff; + border: solid #000; + border-width: 2px 0 2px 2px; + border-radius: 15px 0 0 15px; + padding: 5px 0px 5px 5px; + + -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); + box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); } + + +//#thermometerContainer { +// position: absolute; +// right: 25px; +// top: 370px; +//} +//#thermometerCanvas { +///*background: #59b2b8;*/ +///*zoom: 2;*/ +//}