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
Showing
with 132 additions and 89 deletions
+132 -89
public/CSS/rotterdam3d.css
+ 74
- 50
View file @ 1fbb086a
/*
html,
body,
*/
#Navbar { #Navbar {
overflow: hidden; overflow: hidden;
} }
...@@ -22,13 +16,6 @@ body, ...@@ -22,13 +16,6 @@ body,
overflow: hidden; overflow: hidden;
z-index: -1; z-index: -1;
} }
#legend {
position: relative;
left: 5px;
top: 5px;
}
.backdrop { .backdrop {
display: inline-block; display: inline-block;
background: rgba(42, 42, 42, 0.7); background: rgba(42, 42, 42, 0.7);
...@@ -43,7 +30,6 @@ body, ...@@ -43,7 +30,6 @@ body,
button.cesium-infoBox-camera { button.cesium-infoBox-camera {
display: none; display: none;
} }
.cesium-infoBox { .cesium-infoBox {
width: 80%; width: 80%;
...@@ -57,52 +43,91 @@ button.cesium-infoBox-camera { ...@@ -57,52 +43,91 @@ button.cesium-infoBox-camera {
font: 1em "Fira Sans", sans-serif; font: 1em "Fira Sans", sans-serif;
float: right; float: right;
} }
.cesium-infoBox-title { .cesium-infoBox-title {
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
font: 1em "Fira Sans", sans-serif; font: 1em "Fira Sans", sans-serif;
} }
.cesium-infoBox-close { .cesium-infoBox-close {
z-index: 99999; z-index: 99999;
} }
.legends {
.my-legend .legend-title { transform: translate(0, 0);
text-align: left; display: none;
margin-bottom: 5px; bottom: 35px;
font-weight: bold; right: 10px;
font-size: 90%; 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;
} }
.irradianceLegend-container {
.my-legend .legend-scale ul { background: rgba(42, 42, 42, 0.9);
margin: 0; padding: 8px;
margin-bottom: 5px; border-radius: 4px;
padding: 0; text-align: center;
float: left;
list-style: none;
} }
#irradianceLegend-title {
.my-legend .legend-scale ul li { margin: 0px;
list-style: none; padding-bottom: 10px;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
} }
.irradianceLegend-Bar {
.my-legend ul.legend-labels li span { display: flex;
display: block; justify-content: space-around;
float: left; align-items: center;
height: 16px; width: 100%;
width: 30px; height: 30px;
margin-right: 5px; background: linear-gradient(to right, #0D0887 0%, #8305A7 25%, #D04D73 50%, #FBA139 75%, #F0F921 100%);
margin-left: 0; color: #000;
border: 1px solid #999; font-size: 14px;
font-weight: bold;
} }
.pvLegend-container {
.my-legend a { background: rgba(42, 42, 42, 0.9);
color: #777; 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 { .credit {
width: 100px; width: 100px;
...@@ -115,6 +140,5 @@ button.cesium-infoBox-camera { ...@@ -115,6 +140,5 @@ button.cesium-infoBox-camera {
bottom: 70px; bottom: 70px;
left: 10px; left: 10px;
box-shadow: 0 0 10px 1px #000; box-shadow: 0 0 10px 1px #000;
/* left: 5px;*/ }
}
public/Source/App.js
+ 25
- 6
View file @ 1fbb086a
...@@ -82,12 +82,31 @@ ...@@ -82,12 +82,31 @@
var irradiancestyle = new Cesium.Cesium3DTileStyle({ var irradiancestyle = new Cesium.Cesium3DTileStyle({
color : { color : {
conditions : [ conditions : [
["(${Irr_kWh} > 0) && (${Irr_kWh} < 200)", "color('#6495ED')"], ["(${Irr_kWh} > 0) && (${Irr_kWh} < 50)", "color('#0D0887')"],
["(${Irr_kWh} >= 200) && (${Irr_kWh} < 450)", "color('#9370DB')"], ["(${Irr_kWh} >= 50) && (${Irr_kWh} < 100)", "color('#280592')"],
["(${Irr_kWh} >= 450) && (${Irr_kWh} < 700)", "color('#8B0000')"], ["(${Irr_kWh} >= 100) && (${Irr_kWh} < 150)", "color('#3C049B')"],
["(${Irr_kWh} >= 700) && (${Irr_kWh} < 950)", "color('#D2691E')"], ["(${Irr_kWh} >= 150) && (${Irr_kWh} < 200)", "color('#4E02A2')"],
["(${Irr_kWh} >= 950) && (${Irr_kWh} < 1250)", "color('#FFEBCD')"], ["(${Irr_kWh} >= 200) && (${Irr_kWh} < 250)", "color('#6001A6')"],
["(${Irr_kWh} >= 1250)", "color('#EC1414')"], ["(${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')"] ["true", "color('#000000')"]
] ]
}, },
......
public/index.html
+ 33
- 33
View file @ 1fbb086a
...@@ -35,44 +35,44 @@ ...@@ -35,44 +35,44 @@
<input id="pv" name="source" type="radio"/> <input id="pv" name="source" type="radio"/>
<label for="pv">Photovoltaic Potential</label> <label for="pv">Photovoltaic Potential</label>
</div> </div>
<br> </div>
<!-- for legend panel --> <div class="legends" id="irradianceLegend">
<div id=irradianceLegend> <div class="irradianceLegend-container">
<hr color='white'> <h3 id="irradianceLegend-title">
<div class='my-legend' id="legendcontainer"> Solar Irradiance (kWh/(m².a))
<div class='legend-title'>Solar Irradiance (kWh/(m².a))</div> </h3>
<div class='legend-scale'> <div class= "irradianceLegend-Bar" id="bottom-round"/>
<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> </div>
</div> <div class="values">
<div id=pvLegend> <div class="value">0</div>
<hr color='white'> <div class="value">200</div>
<div class='my-legend' id="legendcontainer"> <div class="value">400</div>
<div class='legend-title'>Photovoltaic Potential (MWh/a)</div> <div class="value">800</div>
<div class='legend-scale'> <div class="value">1000</div>
<ul class='legend-labels'> <div class="value">>1200</div>
<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> </div>
</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'> <a href="https://www.hft-stuttgart.de/" target='_blank'>
<div class="credit"></div> <div class="credit"></div>
</a> </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