Skip to content

GitLab

Commit 44165092 authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

updated irradiance styling with legend

parent 1d180a02
Pipeline #5846 passed with stage
in 9 seconds
Hide whitespace changes
Inline Side-by-side
public/CSS/rosensteinviertel3D.css
View file @ 44165092
...@@ -66,43 +66,63 @@ button.cesium-infoBox-camera { ...@@ -66,43 +66,63 @@ button.cesium-infoBox-camera {
.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;
} }
#bottom-round {
.my-legend a { border-top-left-radius: 20px;
color: #777; 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;
......
public/Source/App.js
View file @ 44165092
...@@ -81,12 +81,31 @@ ...@@ -81,12 +81,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
View file @ 44165092
...@@ -31,25 +31,24 @@ ...@@ -31,25 +31,24 @@
<input id="irradiance" name="source" type="radio"/> <input id="irradiance" name="source" type="radio"/>
<label for="irradiance">Solar Irradiance</label> <label for="irradiance">Solar Irradiance</label>
</div> </div>
<br>
<!-- for legend panel --> </div>
<div id=irradianceLegend> <div class="legends" id="irradianceLegend">
<hr color='white'> <div class="irradianceLegend-container">
<div class='my-legend' id="legendcontainer"> <h3 id="irradianceLegend-title">
<div class='legend-title'>Solar Irradiance (kWh/(m².a))</div> Solar Irradiance (kWh/(m².a))
<div class='legend-scale'> </h3>
<ul class='legend-labels'> <div class= "irradianceLegend-Bar" id="bottom-round"/>
<li><span style='background:#6495ED;'></span>Less than 200</li> </div>
<li><span style='background:#9370DB;'></span>200 to 450</li> <div class="values">
<li><span style='background:#8B0000;'></span>450 to 700</li> <div class="value">0</div>
<li><span style='background:#D2691E;'></span>700 to 950</li> <div class="value">200</div>
<li><span style='background:#FFEBCD;'></span>950 to 1250</li> <div class="value">400</div>
<li><span style='background:#EC1414;'></span>More than 1250</li> <div class="value">800</div>
</ul> <div class="value">1000</div>
</div> <div class="value">>1200</div>
</div> </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>
......
Markdown is supported
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