Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Rushikesh Padsala
Rosensteinviertel3D
Commits
44165092
Commit
44165092
authored
Feb 15, 2022
by
Rushikesh Padsala
Browse files
updated irradiance styling with legend
parent
1d180a02
Pipeline
#5846
passed with stage
in 9 seconds
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
public/CSS/rosensteinviertel3D.css
View file @
44165092
...
...
@@ -66,43 +66,63 @@ button.cesium-infoBox-camera {
.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
;
#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
;
...
...
public/Source/App.js
View file @
44165092
...
...
@@ -81,12 +81,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 @
44165092
...
...
@@ -31,25 +31,24 @@
<input
id=
"irradiance"
name=
"source"
type=
"radio"
/>
<label
for=
"irradiance"
>
Solar Irradiance
</label>
</div>
<br>
<!-- 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
>
<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
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>
<a
href=
"https://www.hft-stuttgart.de/"
target=
'_blank'
>
<div
class=
"credit"
></div>
</a>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment