Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
DigiTwins4PEDs
Application
Commits
0d18d88c
Commit
0d18d88c
authored
Sep 03, 2025
by
Rushikesh Padsala
Browse files
Replace App.js
parent
6714be6c
Pipeline
#11817
passed with stage
in 8 seconds
Changes
1
Pipelines
1
Show whitespace changes
Inline
Side-by-side
public/App.js
View file @
0d18d88c
...
@@ -62,10 +62,10 @@ viewer.scene.globe.depthTestAgainstTerrain = true;
...
@@ -62,10 +62,10 @@ viewer.scene.globe.depthTestAgainstTerrain = true;
------------------------- */
------------------------- */
const
nordbahnhofPosition
=
{
const
nordbahnhofPosition
=
{
//destination: Cesium.Cartesian3.fromDegrees(9.201548, 48.791157, 1077.10),
//destination: Cesium.Cartesian3.fromDegrees(9.201548, 48.791157, 1077.10),
destination
:
Cesium
.
Cartesian3
.
fromDegrees
(
9.20
3916
,
48.78
7847
,
1069.24
),
destination
:
Cesium
.
Cartesian3
.
fromDegrees
(
9.20
2145
,
48.78
5568
,
1013.42
),
orientation
:
{
orientation
:
{
heading
:
Cesium
.
Math
.
toRadians
(
3
1
9.
05
),
heading
:
Cesium
.
Math
.
toRadians
(
3
2
9.
74
),
pitch
:
Cesium
.
Math
.
toRadians
(
-
30.25
),
pitch
:
Cesium
.
Math
.
toRadians
(
-
27.69
),
roll
:
Cesium
.
Math
.
toRadians
(
0
)
roll
:
Cesium
.
Math
.
toRadians
(
0
)
}
}
};
};
...
@@ -352,19 +352,39 @@ function parseWFSDistricts(xmlDoc) {
...
@@ -352,19 +352,39 @@ function parseWFSDistricts(xmlDoc) {
return
rec
&&
rec
.
amount
?
rec
.
amount
.
value
:
null
;
return
rec
&&
rec
.
amount
?
rec
.
amount
.
value
:
null
;
}
}
// Read raw values from WFS
const
annual_res
=
getAmount
(
D16
);
const
annual_nonres
=
getAmount
(
D17
);
const
summer_res_24
=
getSeries
(
D18
);
const
winter_res_24
=
getSeries
(
D19
);
const
summer_nonres_24
=
getSeries
(
D20
);
const
winter_nonres_24
=
getSeries
(
D21
);
const
pv_summer_24
=
getSeries
(
D24
);
const
pv_winter_24
=
getSeries
(
D25
);
const
price_summer_24
=
getSeries
(
D26
);
const
price_winter_24
=
getSeries
(
D27
);
// ***** OVERRIDE REQUEST *****
// Hard-code the following to zero so they contribute nothing:
// 17) annual_demand_nonres_base_MWh
// 20) summer_load_nonres_base_24h_kWh[h]
// 21) winter_load_nonres_base_24h_kWh[h]
const
forcedZeroNonResAnnual
=
0
;
const
forcedZeroArray24
=
new
Array
(
24
).
fill
(
0
);
result
[
gmlId
]
=
{
result
[
gmlId
]
=
{
gml_id
:
gmlId
,
gml_id
:
gmlId
,
area
,
areaUnit
:
theAreaUnit
,
buildingsEstimated
:
buildingsEst
,
householdsEstimated
:
householdsEst
,
area
,
areaUnit
:
theAreaUnit
,
buildingsEstimated
:
buildingsEst
,
householdsEstimated
:
householdsEst
,
annual_demand_res_base_MWh
:
getAmount
(
D16
)
,
annual_demand_res_base_MWh
:
annual_res
,
annual_demand_nonres_base_MWh
:
getAmount
(
D17
),
annual_demand_nonres_base_MWh
:
forcedZeroNonResAnnual
,
// <-- forced to 0
summer_load_res_base_24h_kWh
:
getSeries
(
D18
)
,
summer_load_res_base_24h_kWh
:
summer_res_24
,
winter_load_res_base_24h_kWh
:
getSeries
(
D19
)
,
winter_load_res_base_24h_kWh
:
winter_res_24
,
summer_load_nonres_base_24h_kWh
:
getSeries
(
D20
),
summer_load_nonres_base_24h_kWh
:
forcedZeroArray24
,
// <-- forced 24 zeros
winter_load_nonres_base_24h_kWh
:
getSeries
(
D21
),
winter_load_nonres_base_24h_kWh
:
forcedZeroArray24
,
// <-- forced 24 zeros
summer_pv_existing_24h_kWh
:
getSeries
(
D
24
)
,
summer_pv_existing_24h_kWh
:
pv_summer_
24
,
winter_pv_existing_24h_kWh
:
getSeries
(
D25
)
,
winter_pv_existing_24h_kWh
:
pv_winter_24
,
cost_summer_24h_EurPerKWh
:
getSeries
(
D26
)
,
cost_summer_24h_EurPerKWh
:
price_summer_24
,
cost_winter_24h_EurPerKWh
:
getSeries
(
D27
)
cost_winter_24h_EurPerKWh
:
price_winter_24
};
};
}
}
return
result
;
return
result
;
...
@@ -400,6 +420,9 @@ function pvValueToReversedColor(value) {
...
@@ -400,6 +420,9 @@ function pvValueToReversedColor(value) {
return
`color("
${
REVERSED_COLORS
[
8
]}
")`
;
return
`color("
${
REVERSED_COLORS
[
8
]}
")`
;
}
}
// Allowed building types for styling
const
ALLOWED_BDG_TYPES
=
new
Set
([
'
EFH
'
,
'
MFH
'
,
'
RH
'
,
'
HH
'
,
'
GMH
'
]);
// Cache the style so switching back to "PV" from "Reset" feels instant (doesnt really work as expected)
// Cache the style so switching back to "PV" from "Reset" feels instant (doesnt really work as expected)
let
pvColorStyle
=
null
;
let
pvColorStyle
=
null
;
...
@@ -419,25 +442,40 @@ async function applyPhotovoltaicPotentialColoring() {
...
@@ -419,25 +442,40 @@ async function applyPhotovoltaicPotentialColoring() {
}
}
const
colorConds
=
[];
const
colorConds
=
[];
for
(
const
id
of
Object
.
keys
(
buildingAttributes
))
{
let
styledCount
=
0
;
const
allIds
=
Object
.
keys
(
buildingAttributes
);
for
(
const
id
of
allIds
)
{
const
b
=
buildingAttributes
[
id
];
const
b
=
buildingAttributes
[
id
];
const
typeRaw
=
(
b
&&
b
.
building_type
)
?
String
(
b
.
building_type
).
trim
().
toUpperCase
()
:
''
;
const
isAllowedType
=
ALLOWED_BDG_TYPES
.
has
(
typeRaw
);
// If not an allowed type → fully transparent
if
(
!
isAllowedType
)
{
colorConds
.
push
([
`
\$
{gml_id} === '
${
id
}
'`
,
'
color("rgba(255,255,255,0.2)")
'
]);
continue
;
}
// Allowed types: derive PV value (potential preferred, then existing)
let
val
=
null
;
let
val
=
null
;
if
(
isFinite
(
b
.
annual_pv_potential_MWh
))
val
=
b
.
annual_pv_potential_MWh
;
if
(
isFinite
(
b
.
annual_pv_potential_MWh
))
val
=
b
.
annual_pv_potential_MWh
;
else
if
(
isFinite
(
b
.
annual_pv_existing_MWh
))
val
=
b
.
annual_pv_existing_MWh
;
else
if
(
isFinite
(
b
.
annual_pv_existing_MWh
))
val
=
b
.
annual_pv_existing_MWh
;
const
colorExpr
=
(
val
==
null
)
const
colorExpr
=
(
val
==
null
)
?
'
color("rgba(255,255,255,0.0)")
'
//
unmatched
→ transparent
?
'
color("rgba(255,255,255,0.0)")
'
//
no PV value
→ transparent
:
pvValueToReversedColor
(
val
);
:
pvValueToReversedColor
(
val
);
if
(
val
!=
null
)
styledCount
++
;
colorConds
.
push
([
`
\$
{gml_id} === '
${
id
}
'`
,
colorExpr
]);
colorConds
.
push
([
`
\$
{gml_id} === '
${
id
}
'`
,
colorExpr
]);
}
}
// Default fallback → transparent
// Default fallback → transparent
colorConds
.
push
([
'
true
'
,
'
color("rgba(255,255,255,0.
0
)")
'
]);
colorConds
.
push
([
'
true
'
,
'
color("rgba(255,255,255,0.
2
)")
'
]);
pvColorStyle
=
new
Cesium
.
Cesium3DTileStyle
({
color
:
{
conditions
:
colorConds
}
});
pvColorStyle
=
new
Cesium
.
Cesium3DTileStyle
({
color
:
{
conditions
:
colorConds
}
});
tilesetnord
.
style
=
pvColorStyle
;
tilesetnord
.
style
=
pvColorStyle
;
console
.
log
(
'
[PV-Style] Built & applied style
with
'
,
colorConds
.
length
,
'
conditions. Unmatched building
s transparent.
'
);
console
.
log
(
`
[PV-Style] Built & applied style
. Allowed types (EFH/MFH/RH/HH/GMH) styled:
${
styledCount
}
/
${
allIds
.
length
}
. Other
s transparent.
`
);
if
(
legendBox
)
legendBox
.
style
.
display
=
'
block
'
;
if
(
legendBox
)
legendBox
.
style
.
display
=
'
block
'
;
}
catch
(
e
)
{
}
catch
(
e
)
{
console
.
error
(
'
Failed to apply PV coloring:
'
,
e
);
console
.
error
(
'
Failed to apply PV coloring:
'
,
e
);
...
@@ -627,7 +665,7 @@ function clampSlider2Min(val){ val = Number(val)||0; return val < 3 ? 3 : val; }
...
@@ -627,7 +665,7 @@ function clampSlider2Min(val){ val = Number(val)||0; return val < 3 ? 3 : val; }
const
ELECTRICAL_SORTED_URL
=
const
ELECTRICAL_SORTED_URL
=
'
https://w2-8080.iaf-ex.hft-stuttgart.de/vcs-wfsT/wfs?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&STOREDQUERY_ID=Electrical_Consumption_Sorted_Desc
'
;
'
https://w2-8080.iaf-ex.hft-stuttgart.de/vcs-wfsT/wfs?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&STOREDQUERY_ID=Electrical_Consumption_Sorted_Desc
'
;
const
PV_SORTED_URL
=
const
PV_SORTED_URL
=
'
https://w2-8080.iaf-ex.hft-stuttgart.de/vcs-wfsT/wfs?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&STOREDQUERY_ID=PV_Buildings_Sorted_Desc
'
;
'
https://w2-8080.iaf-ex.hft-stuttgart.de/vcs-wfsT/wfs?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&STOREDQUERY_ID=PV_
Residential_
Buildings_Sorted_Desc
'
;
let
electricalSortedList
=
null
;
let
electricalSortedList
=
null
;
let
pvSortedList
=
null
;
let
pvSortedList
=
null
;
...
@@ -772,7 +810,7 @@ function ensureCoverageBarDom() {
...
@@ -772,7 +810,7 @@ function ensureCoverageBarDom() {
const
titleSpan
=
document
.
querySelector
(
'
#vizCoverage .viz-card-title .title-left span
'
);
const
titleSpan
=
document
.
querySelector
(
'
#vizCoverage .viz-card-title .title-left span
'
);
if
(
titleSpan
)
titleSpan
.
textContent
=
'
Annual
Energy
Coverage
'
;
if
(
titleSpan
)
titleSpan
.
textContent
=
'
Annual
Power
Coverage
(Residential Only)
'
;
// Keep dotted border inside and prevent overflow
// Keep dotted border inside and prevent overflow
host
.
style
.
position
=
'
relative
'
;
host
.
style
.
position
=
'
relative
'
;
...
@@ -870,7 +908,7 @@ function ensureCoverageBarDom() {
...
@@ -870,7 +908,7 @@ function ensureCoverageBarDom() {
// Render tooltip text with latest energy values
// Render tooltip text with latest energy values
function
renderTip
()
{
function
renderTip
()
{
tip
.
innerHTML
=
tip
.
innerHTML
=
`<b>Annual
Energy
Coverage</b><br/>
`<b>Annual
Power
Coverage
(Residential Only)
</b><br/>
<span style="color:
${
ACCENT_HEX
}
">●</span> Photovoltaic (Roof):
${
fmtMWh
(
lastCoverageEnergy
.
pv
)}
<br/>
<span style="color:
${
ACCENT_HEX
}
">●</span> Photovoltaic (Roof):
${
fmtMWh
(
lastCoverageEnergy
.
pv
)}
<br/>
<span style="color:#ef4444">●</span> Grid:
${
fmtMWh
(
lastCoverageEnergy
.
grid
)}
`
;
<span style="color:#ef4444">●</span> Grid:
${
fmtMWh
(
lastCoverageEnergy
.
grid
)}
`
;
}
}
...
@@ -1065,9 +1103,9 @@ function renderDailyLineChartForSeason(season) {
...
@@ -1065,9 +1103,9 @@ function renderDailyLineChartForSeason(season) {
function
computeBasePvCoverageFromDistrict
(
d
)
{
function
computeBasePvCoverageFromDistrict
(
d
)
{
if
(
!
d
)
return
null
;
if
(
!
d
)
return
null
;
const
sRes
=
d
.
summer_load_res_base_24h_kWh
||
[];
const
sRes
=
d
.
summer_load_res_base_24h_kWh
||
[];
const
sNon
=
d
.
summer_load_nonres_base_24h_kWh
||
[];
const
sNon
=
d
.
summer_load_nonres_base_24h_kWh
||
[];
// forced to zeros in parser
const
wRes
=
d
.
winter_load_res_base_24h_kWh
||
[];
const
wRes
=
d
.
winter_load_res_base_24h_kWh
||
[];
const
wNon
=
d
.
winter_load_nonres_base_24h_kWh
||
[];
const
wNon
=
d
.
winter_load_nonres_base_24h_kWh
||
[];
// forced to zeros in parser
const
sPv
=
d
.
summer_pv_existing_24h_kWh
||
[];
const
sPv
=
d
.
summer_pv_existing_24h_kWh
||
[];
const
wPv
=
d
.
winter_pv_existing_24h_kWh
||
[];
const
wPv
=
d
.
winter_pv_existing_24h_kWh
||
[];
...
@@ -1178,7 +1216,7 @@ function computeNewProfiles() {
...
@@ -1178,7 +1216,7 @@ function computeNewProfiles() {
const
district
=
getFirstDistrictRecord
();
const
district
=
getFirstDistrictRecord
();
if
(
!
district
)
return
null
;
if
(
!
district
)
return
null
;
// Non-Residential base profiles come from district
// Non-Residential base profiles come from district
(FORCED to zeros by parser)
const
nonResSummer
=
district
.
summer_load_nonres_base_24h_kWh
||
new
Array
(
24
).
fill
(
0
);
const
nonResSummer
=
district
.
summer_load_nonres_base_24h_kWh
||
new
Array
(
24
).
fill
(
0
);
const
nonResWinter
=
district
.
winter_load_nonres_base_24h_kWh
||
new
Array
(
24
).
fill
(
0
);
const
nonResWinter
=
district
.
winter_load_nonres_base_24h_kWh
||
new
Array
(
24
).
fill
(
0
);
...
@@ -1206,7 +1244,7 @@ function computeNewProfiles() {
...
@@ -1206,7 +1244,7 @@ function computeNewProfiles() {
add24
(
loadSummer
,
b
.
summer_base_24h_kWh
||
[]);
add24
(
loadSummer
,
b
.
summer_base_24h_kWh
||
[]);
add24
(
loadWinter
,
b
.
winter_base_24h_kWh
||
[]);
add24
(
loadWinter
,
b
.
winter_base_24h_kWh
||
[]);
}
}
// Add non-residential from district
// Add non-residential from district
(zeros)
add24
(
loadSummer
,
nonResSummer
);
add24
(
loadSummer
,
nonResSummer
);
add24
(
loadWinter
,
nonResWinter
);
add24
(
loadWinter
,
nonResWinter
);
...
@@ -1346,7 +1384,7 @@ function computeKpisFromNew(district, base, fresh) {
...
@@ -1346,7 +1384,7 @@ function computeKpisFromNew(district, base, fresh) {
};
};
}
}
/* ------------------------------------------
-
/* ------------------------------------------
Card 1 coin animation (tiers & transitions)
Card 1 coin animation (tiers & transitions)
------------------------------------------- */
------------------------------------------- */
// Animate horizontally by tier (1..N) and each column. stacks coins vertically equal to its column index (tier).
// Animate horizontally by tier (1..N) and each column. stacks coins vertically equal to its column index (tier).
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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