Skip to content
GitLab
Commit 1fbb086a authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

updated irradiance styling with legend

parent 38f941b2
Pipeline #5845 passed with stage
in 21 seconds
Hide whitespace changes
Inline Side-by-side
public/CSS/rotterdam3d.css
View file @ 1fbb086a
/*
html,
body,
*/
#Navbar {
overflow: hidden;
}
......@@ -22,13 +16,6 @@ body,
overflow: hidden;
z-index: -1;
}
#legend {
position: relative;
left: 5px;
top: 5px;
}
.backdrop {
display: inline-block;
background: rgba(42, 42, 42, 0.7);
......@@ -43,7 +30,6 @@ body,
button.cesium-infoBox-camera {
display: none;
}
.cesium-infoBox {
width: 80%;
......@@ -57,52 +43,91 @@ button.cesium-infoBox-camera {
font: 1em "Fira Sans", sans-serif;
float: right;
}
.cesium-infoBox-title {
background: rgba(0, 0, 0, 0);
font: 1em "Fira Sans", sans-serif;
}
.cesium-infoBox-close {
z-index: 99999;
}
.my-legend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight: bold;
font-size: 90%;
.legends {
transform: translate(0, 0);
display: none;
bottom: 35px;
right: 10px;
width: 70%;
max-width: 480px;
color: #edffff;
border: 1px solid #444;
border-right: none;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
box-shadow: 0 0 10px 1px #000;
opacity: 0.9;
transition: visibility 0s 0.3s, opacity 0.3s ease-in, transform 0.3s ease-in;
background: rgba(42, 42, 42, 0.9);
position: absolute;
padding: 8px;
border-radius: 10px;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
.irradianceLegend-container {
background: rgba(42, 42, 42, 0.9);
padding: 8px;
border-radius: 4px;
text-align: center;
}
.my-legend .legend-scale ul li {
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
#irradianceLegend-title {
margin: 0px;
padding-bottom: 10px;
}
.my-legend ul.legend-labels li span {
display: block;
float: left;
height: 16px;
width: 30px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
.irradianceLegend-Bar {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 30px;
background: linear-gradient(to right, #0D0887 0%, #8305A7 25%, #D04D73 50%, #FBA139 75%, #F0F921 100%);
color: #000;
font-size: 14px;
font-weight: bold;
}
.my-legend a {
color: #777;
.pvLegend-container {
background: rgba(42, 42, 42, 0.9);
padding: 8px;
border-radius: 4px;
text-align: center;
}
#pvLegend-title {
margin: 0px;
padding-bottom: 10px;
}
.pvLegend-Bar {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 30px;
background: linear-gradient(to right, #ff0000 0%, #e29700 50%, #00ff00 100%);
color: #000;
font-size: 14px;
font-weight: bold;
}
#bottom-round {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.values {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 25px;
color: #edffff;
font-size: 14px;
font-weight: bold;
}
.credit {
width: 100px;
......@@ -115,6 +140,5 @@ button.cesium-infoBox-camera {
bottom: 70px;
left: 10px;
box-shadow: 0 0 10px 1px #000;
/* left: 5px;*/
}
}
public/Source/App.js
View file @ 1fbb086a
......@@ -82,12 +82,31 @@
var irradiancestyle = new Cesium.Cesium3DTileStyle({
color : {
conditions : [
["(${Irr_kWh} > 0) && (${Irr_kWh} < 200)", "color('#6495ED')"],
["(${Irr_kWh} >= 200) && (${Irr_kWh} < 450)", "color('#9370DB')"],
["(${Irr_kWh} >= 450) && (${Irr_kWh} < 700)", "color('#8B0000')"],
["(${Irr_kWh} >= 700) && (${Irr_kWh} < 950)", "color('#D2691E')"],
["(${Irr_kWh} >= 950) && (${Irr_kWh} < 1250)", "color('#FFEBCD')"],
["(${Irr_kWh} >= 1250)", "color('#EC1414')"],
["(${Irr_kWh} > 0) && (${Irr_kWh} < 50)", "color('#0D0887')"],
["(${Irr_kWh} >= 50) && (${Irr_kWh} < 100)", "color('#280592')"],
["(${Irr_kWh} >= 100) && (${Irr_kWh} < 150)", "color('#3C049B')"],
["(${Irr_kWh} >= 150) && (${Irr_kWh} < 200)", "color('#4E02A2')"],
["(${Irr_kWh} >= 200) && (${Irr_kWh} < 250)", "color('#6001A6')"],
["(${Irr_kWh} >= 250) && (${Irr_kWh} < 300)", "color('#7100A8')"],
["(${Irr_kWh} >= 300) && (${Irr_kWh} < 350)", "color('#8305A7')"],
["(${Irr_kWh} >= 350) && (${Irr_kWh} < 400)", "color('#920FA3')"],
["(${Irr_kWh} >= 400) && (${Irr_kWh} < 450)", "color('#A11B9B')"],
["(${Irr_kWh} >= 450) && (${Irr_kWh} < 500)", "color('#AE2892')"],
["(${Irr_kWh} >= 500) && (${Irr_kWh} < 550)", "color('#BB3488')"],
["(${Irr_kWh} >= 550) && (${Irr_kWh} < 600)", "color('#C6417D')"],
["(${Irr_kWh} >= 600) && (${Irr_kWh} < 650)", "color('#D04D73')"],
["(${Irr_kWh} >= 650) && (${Irr_kWh} < 700)", "color('#DA5A6A')"],
["(${Irr_kWh} >= 700) && (${Irr_kWh} < 750)", "color('#E26660')"],
["(${Irr_kWh} >= 750) && (${Irr_kWh} < 800)", "color('#EA7457')"],
["(${Irr_kWh} >= 800) && (${Irr_kWh} < 850)", "color('#F1814D')"],
["(${Irr_kWh} >= 850) && (${Irr_kWh} < 900)", "color('#F79044')"],
["(${Irr_kWh} >= 900) && (${Irr_kWh} < 950)", "color('#FBA139')"],
["(${Irr_kWh} >= 950) && (${Irr_kWh} < 1000)", "color('#FDB130')"],
["(${Irr_kWh} >= 1000) && (${Irr_kWh} < 1050)", "color('#FDC229')"],
["(${Irr_kWh} >= 1050) && (${Irr_kWh} < 1100)", "color('#FBD324')"],
["(${Irr_kWh} >= 1100) && (${Irr_kWh} < 1150)", "color('#F6E626')"],
["(${Irr_kWh} >= 1150) && (${Irr_kWh} < 1200)", "color('#F0F921')"],
["(${Irr_kWh} >= 1200)", "color('#F0F921')"],
["true", "color('#000000')"]
]
},
......
public/index.html
View file @ 1fbb086a
......@@ -35,44 +35,44 @@
<input id="pv" name="source" type="radio"/>
<label for="pv">Photovoltaic Potential</label>
</div>
<br>
</div>
<!-- for legend panel -->
<div id=irradianceLegend>
<hr color='white'>
<div class='my-legend' id="legendcontainer">
<div class='legend-title'>Solar Irradiance (kWh/(m².a))</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#6495ED;'></span>Less than 200</li>
<li><span style='background:#9370DB;'></span>200 to 450</li>
<li><span style='background:#8B0000;'></span>450 to 700</li>
<li><span style='background:#D2691E;'></span>700 to 950</li>
<li><span style='background:#FFEBCD;'></span>950 to 1250</li>
<li><span style='background:#EC1414;'></span>More than 1250</li>
</ul>
</div>
<div class="legends" id="irradianceLegend">
<div class="irradianceLegend-container">
<h3 id="irradianceLegend-title">
Solar Irradiance (kWh/(m².a))
</h3>
<div class= "irradianceLegend-Bar" id="bottom-round"/>
</div>
</div>
<div id=pvLegend>
<hr color='white'>
<div class='my-legend' id="legendcontainer">
<div class='legend-title'>Photovoltaic Potential (MWh/a)</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#ff0000;'></span>No Photovoltaic Potential</li>
<li><span style='background:#fc4f00;'></span>Less than 5</li>
<li><span style='background:#f27600;'></span>5 to 10</li>
<li><span style='background:#e29700;'></span>10 to 15</li>
<li><span style='background:#cab500;'></span>15 to 20</li>
<li><span style='background:#aad000;'></span>20 to 25</li>
<li><span style='background:#7de800;'></span>25 to 30</li>
<li><span style='background:#00ff00;'></span>More than 30</li>
</ul>
</div>
<div class="values">
<div class="value">0</div>
<div class="value">200</div>
<div class="value">400</div>
<div class="value">800</div>
<div class="value">1000</div>
<div class="value">>1200</div>
</div>
</div>
</div>
<div class="legends" id="pvLegend">
<div class="pvLegend-container">
<h3 id="pvLegend-title">
Photovoltaic Potential (MWh/a)
</h3>
<div class= "pvLegend-Bar" id="bottom-round"/>
</div>
<div class="values">
<div class="value">0</div>
<div class="value">5</div>
<div class="value">10</div>
<div class="value">15</div>
<div class="value">20</div>
<div class="value">25</div>
<div class="value">>30</div>
</div>
</div>
</div>
<a href="https://www.hft-stuttgart.de/" target='_blank'>
<div class="credit"></div>
</a>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal