Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
KIIRTHANA committed Mar 21, 2021
2 parents 4a9919c + 0dbe4db commit 701b460
Show file tree
Hide file tree
Showing 6 changed files with 313 additions and 137 deletions.
170 changes: 114 additions & 56 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -58,104 +58,162 @@ transition: opacity 0.5s;
}

.button {
background-color: #4CAF50; /* Green */
color: #4CAF50;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
float: left;
border: 1px solid black;
border-radius: 6px;
}
.button1 {
background-color: #4CAF50;
color: white;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: white;
color: black;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.buttonspn {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
background-color: #000000;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 22px;
font-size: 20px;
padding: 20px;
width: 200px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

.buttonspn span {
float: left;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonspn span:after {
}

.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.buttonspn:hover span {
padding-right: 25px;
}
.buttonspn:hover span:after {
}

.button:hover span {
padding-right: 20px;
}

.button:hover span:after {
opacity: 1;
right: 0;
}

.buttonspn2 {
}
.button1 {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
background-color: #000000;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 22px;
font-size: 20px;
padding: 20px;
width: 200px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

.buttonspn2 span {
float: left;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
}

.button1 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonspn2 span:after {
}

.button1 span:after {
content: '\00ab';
position: absolute;
opacity: 0;
top: 0;
left: -20px;
transition: 0.5s;
}

.button1:hover span {
padding-left: 15px;
}

.button1:hover span:after {
opacity: 1;
left: 0;
}
.button2 {
display: inline-block;
border-radius: 4px;
background-color: #000000;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 20px;
padding: 20px;
width: 300px;
transition: all 0.5s;
cursor: pointer;
margin: 6px;
float: left;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
}

/* define a fixed width for the entire menu */
.navigation {
width: 300px;
background-color: rgb(43, 51, 51);
color: ghostwhite;
}

/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 1;
margin: 2;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: rgb(69, 66, 228);
text-decoration: none;
padding: 10068px;
color: rgb(38, 138, 71);
}

/* add hover behaviour */
.mainmenu a:hover {
background-color: rgb(230, 25, 93);
}

.mainmenu li:hover .submenu {
display: block;
max-height: 200px;
}

/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu a {
background-color: #999;
}

.buttonspn2:hover span {
padding-left: 25px;
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}

.buttonspn2:hover span:after {
opacity: 1;
left: 0;
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
59 changes: 52 additions & 7 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,68 @@
<!-- Main body START -->

<!-- Title Bar -->
<div class="row">
<div class="row" style="position:absolute; opacity: 0.6; filter: alpha(opacity=60); background-color: white; width:100%;">
<div class="column">
<img src="models/Ingersoll_Rand_logo.svg.png" align='Left' style="width:auto; height: 50px;">
<img src="models/Ingersoll_Rand_logo.svg.png" align='left' style="width:auto;height:50px;">
</div>
<div class="column">
<img src="models/logo2.png" align="center" style="width:auto;height: 50px;">
<div style="margin:0; height: 10px; vertical-align: middle;" align="center"><font face="Calibri" size="7" color="red">3D Modelling</font></div>
</div>
<div class="column">
<img src="models/logo-2.jpg" align="right" style="width:auto; height: 60px;" >
<img src="models/logo-2.jpg" align="right" style="width:auto; height:50px;" >
</div>

</div>

<!-- Menu Panel-->
<div class="navigation" style="position: absolute; top: 80px; left: 5px;">
<h3 style="margin-left: 30px;">Generic Compressor</h3>
<hr>
<ul class="mainmenu">
<li>Cylinder 1
<ul class="submenu"><li>Left end temperature: <span id="aComp1LT"></span>%<br>Right end temperature: <span id="aComp1RT"></span>% </li>
</ul></li>
<br>
<li>Cylinder 2
<ul class="submenu"><li>Left end temperature: <span id="aComp2LT"></span>%<br>Right end temperature: <span id="aComp2RT"></span>%</li>
</ul></li>
<br>
<li>Cylinder 3
<ul class="submenu"><li>Left end temperature: <span id="aComp3LT"></span>%<br>Right end temperature: <span id="aComp3RT"></span>%</li>
</ul></li>
<br>
<li>Cylinder 4
<ul class="submenu"><li>Left end temperature: <span id="aComp4LT"></span>%<br>Right end temperature: <span id="aComp4RT"></span>%</li>
</ul></li>
<br>
<li>Pipe 1
<ul class="submenu"><li>Left end temperature: <span id="aComp8LT"></span>%<br>Right end temperature: <span id="aComp5RT"></span>%</li>
</ul></li>
<br>
<li>Pipe 2
<ul class="submenu"><li>Left end temperature: <span id="aComp9LT"></span>%<br>Right end temperature: <span id="aComp6RT"></span>%</li>
</ul></li>
<br>
<li>Component 7
<ul class="submenu"><li>Left end temperature: <span id="aComp7LT"></span>%<br>Right end temperature: <span id="aComp7RT"></span>%</li>
</ul></li>
<br>
<li>Component 8
<ul class="submenu"><li>Left end temperature: <span id="aComp5LT"></span>%<br>Right end temperature: <span id="aComp8RT"></span>%</li>
</ul></li>
<br>
<li>Component 9
<ul class="submenu"><li>Left end temperature: <span id="aComp6LT"></span>%<br>Right end temperature: <span id="aComp9RT"></span>%</li>
</ul></li>
</ul>
</div>

<!-- Buttons for history -->
<button class = "buttonspn2"><span>PAST</span></button>
<button class = "button button1">text</button>
<button class = "buttonspn"><span>FUTURE</span></button>
<div style="position: absolute; top: 80%; left:30%">
<button class="button1" style="vertical-align:middle" onclick="updatePastValues()"><span>Back </span></button>
<button id="dt" class="button2" style="vertical-align:middle"><span>Loading...</span></button>
<button class="button" style="vertical-align:middle" onclick="updateFutureValues()"><span> Next </span></button>
</div>

<!-- Annotation for comp1-->
<div class="annotation" hidden="true" id="anComp1">
Expand Down
3 changes: 3 additions & 0 deletions js/ComponentSelector.js
Original file line number Diff line number Diff line change
Expand Up @@ -181,4 +181,7 @@ function updateScreenPosition() {
function setAnnotationValues(compNo, lT, rT) {
document.getElementById("anComp" + compNo + "LT").textContent = lT;
document.getElementById("anComp" + compNo + "RT").textContent = rT;
// TODO
document.getElementById("aComp" + compNo + "LT").textContent = lT;
document.getElementById("aComp" + compNo + "RT").textContent = rT;
}
7 changes: 7 additions & 0 deletions js/gradient.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,11 @@ function setCompUniforms(compNo, colorA, colorB) {
function setCompValues(compNo, leftTemp, rightTemp) {
setCompUniforms(compNo, leftTemp, rightTemp);
setAnnotationValues(compNo, leftTemp, rightTemp);
}

function getCompValues(compNo) {
var value1 = compGroup[compNo-1].colorA.value.r*100;
var value2 = compGroup[compNo-1].colorB.value.r*100;

return { value1, value2};
}
Loading

0 comments on commit 701b460

Please sign in to comment.